← All changes | assets/src/js/admin/admin-statistic.js +32 -476 4.4.2 → 4.4.8 View file →

		@@ -1,483 +1,39 @@
1	1	/**
2		- * Statistics chart.
	2	+ * Statistics dashboard entry — bootstraps the per-tab modules.
3	3	*
	4	+ * All four tabs run on the statistics/* module stack (state, api, chart,
	5	+ * data-table, report-modal); the legacy per-tab loaders are gone.
	6	+ *
4	7	* @since 4.2.5.5
5		- * @version 1.0.0
	8	+ * @version 2.0.0
6	9	*/
7	10
8		-import Chart from 'chart.js/auto';
	11	+import * as lpUtils from 'lpAssetsJsPath/utils.js';
	12	+import { lpStatsFilterBar, LpStatsFilterBar } from './statistics/filter-bar.js';
	13	+import { lpStatsReportModal } from './statistics/report-modal.js';
	14	+import { lpStatsTabOverview, LpStatsTabOverview } from './statistics/tab-overview.js';
	15	+import { lpStatsTabOrders, LpStatsTabOrders } from './statistics/tab-orders.js';
	16	+import { lpStatsTabCourses, LpStatsTabCourses } from './statistics/tab-courses.js';
	17	+import { lpStatsTabUsers, LpStatsTabUsers } from './statistics/tab-users.js';
	18	+import { lpStatsTabInstructors, LpStatsTabInstructors } from './statistics/tab-instructors.js';
9	19
10		-document.addEventListener( 'DOMContentLoaded', function() {
11		- const lpStatisticsLoad = () => {
12		- const elementLoad = document.querySelector( 'input.statistics-type' );
13		- if ( ! elementLoad ) {
14		- return;
15		- }
16		- if ( elementLoad.value === 'orders-statistics' ) {
17		- orderLoadData();
18		- } else if ( elementLoad.value === 'overview-statistics' ) {
19		- overviewLoadData();
20		- } else if ( elementLoad.value === 'courses-statistics' ) {
21		- courseLoadData();
22		- } else if ( elementLoad.value === 'users-statistics' ) {
23		- userLoadData();
24		- }
25		- };
26		- const overviewLoadData = ( filterType = 'today', date = '' ) => {
27		- wp.apiFetch( {
28		- path: wp.url.addQueryArgs(
29		- 'lp/v1/statistics/overviews-statistics',
30		- {
31		- filtertype: filterType,
32		- date,
33		- }
34		- ),
35		- method: 'GET',
36		- } )
37		- .then( ( res ) => {
38		- const { data, status, message } = res;
39		- if ( status === 'error' ) {
40		- throw new Error( message || 'Error' );
41		- }
42		- const configChartOverview = {
43		- options: {
44		- scales: {
45		- y: {
46		- min: 0,
47		- ticks: {
48		- callback( value, index, ticks ) {
49		- return '$' + value;
50		- },
51		- },
52		- },
53		- },
54		- },
55		- };
56		- initStatisticChart(
57		- 'net-sales-chart-content',
58		- data.chart_data,
59		- configChartOverview
60		- );
61		- document.querySelector( '.total-sales' ).textContent =
62		- data.total_sales;
63		- document.querySelector( '.total-orders' ).textContent =
64		- data.total_orders;
65		- document.querySelector( '.total-courses' ).textContent =
66		- data.total_courses;
67		- document.querySelector( '.total-instructors' ).textContent =
68		- data.total_instructors;
69		- document.querySelector( '.total-students' ).textContent =
70		- data.total_students;
71		- if ( data.top_courses.length > 0 ) {
72		- const topCourses = data.top_courses,
73		- topCoursesWrap =
74		- document.querySelector( '.top-course-sold' );
75		- for ( let i = 0; i < topCourses.length; i++ ) {
76		- topCoursesWrap.insertAdjacentHTML(
77		- 'beforeend',
78		- `<li>${ topCourses[ i ].course_name } - ${ topCourses[ i ].course_count }</li>`
79		- );
80		- }
81		- }
82		- if ( data.top_categories.length > 0 ) {
83		- const topCategories = data.top_categories,
84		- topCategoriesWrap =
85		- document.querySelector( '.top-category-sold' );
86		- for ( let i = 0; i < topCategories.length; i++ ) {
87		- topCategoriesWrap.insertAdjacentHTML(
88		- 'beforeend',
89		- `<li>${ topCategories[ i ].term_name } - ${ topCategories[ i ].term_count }</li>`
90		- );
91		- }
92		- }
93		- } )
94		- .catch( ( err ) => {
95		- console.log( err );
96		- } )
97		- .finally( () => {} );
98		- };
99		- const orderLoadData = ( filterType = 'today', date = '' ) => {
100		- wp.apiFetch( {
101		- path: wp.url.addQueryArgs( 'lp/v1/statistics/order-statistics', {
102		- filtertype: filterType,
103		- date,
104		- } ),
105		- method: 'GET',
106		- } )
107		- .then( ( res ) => {
108		- const { data, status, message } = res;
109		- if ( status === 'error' ) {
110		- throw new Error( message || 'Error' );
111		- }
112		- initStatisticChart( 'orders-chart-content', data.chart_data );
113		- // chartEle.style.display = 'block';
114		- if ( data.statistics.length > 0 ) {
115		- let totalOrder = 0;
116		- for ( let i = data.statistics.length - 1; i >= 0; i-- ) {
117		- const v = data.statistics[ i ];
118		- if ( v.order_status == 'completed' ) {
119		- document.querySelector(
120		- '.completed-order-count'
121		- ).textContent = v.count_order;
122		- totalOrder += parseInt( v.count_order );
123		- } else if ( v.order_status == 'pending' ) {
124		- document.querySelector(
125		- '.pending-order-count'
126		- ).textContent = v.count_order;
127		- totalOrder += parseInt( v.count_order );
128		- } else if ( v.order_status == 'processing' ) {
129		- document.querySelector(
130		- '.processing-order-count'
131		- ).textContent = v.count_order;
132		- totalOrder += parseInt( v.count_order );
133		- } else if ( v.order_status == 'cancelled' ) {
134		- document.querySelector(
135		- '.cancelled-order-count'
136		- ).textContent = v.count_order;
137		- totalOrder += parseInt( v.count_order );
138		- } else if ( v.order_status == 'failed' ) {
139		- document.querySelector(
140		- '.failed-order-count'
141		- ).textContent = v.count_order;
142		- totalOrder += parseInt( v.count_order );
143		- }
144		- }
145		- document.querySelector( '.total-order-count' ).textContent =
146		- totalOrder;
147		- } else {
148		- document
149		- .querySelectorAll( '.statistics-item-count' )
150		- .forEach( ( ele ) => {
151		- ele.textContent = 0;
152		- } );
153		- }
154		- } )
155		- .catch( ( err ) => {
156		- console.log( err );
157		- } )
158		- .finally( () => {} );
159		- };
160		- const courseLoadData = ( filterType = 'today', date = '' ) => {
161		- wp.apiFetch( {
162		- path: wp.url.addQueryArgs( 'lp/v1/statistics/course-statistics', {
163		- filtertype: filterType,
164		- date,
165		- } ),
166		- method: 'GET',
167		- } )
168		- .then( ( res ) => {
169		- const { data, status, message } = res;
170		- if ( status === 'error' ) {
171		- throw new Error( message || 'Error' );
172		- }
173		- initStatisticChart( 'course-chart-content', data.chart_data );
174		- if ( data.courses.length > 0 ) {
175		- let totalCourse = 0;
176		- for ( let i = 0; i < data.courses.length; i++ ) {
177		- const v = data.courses[ i ];
178		- if ( v.course_status == 'publish' ) {
179		- document.querySelector(
180		- '.statistics-courses.published'
181		- ).textContent = v.course_count;
182		- totalCourse += parseInt( v.course_count );
183		- } else if ( v.course_status == 'pending' ) {
184		- document.querySelector(
185		- '.statistics-courses.pending'
186		- ).textContent = v.course_count;
187		- totalCourse += parseInt( v.course_count );
188		- } else if ( v.course_status == 'future' ) {
189		- document.querySelector(
190		- '.statistics-courses.future'
191		- ).textContent = v.course_count;
192		- totalCourse += parseInt( v.course_count );
193		- }
194		- }
195		- document.querySelector(
196		- '.statistics-courses.total'
197		- ).textContent = totalCourse;
198		- } else {
199		- document
200		- .querySelectorAll( '.statistics-courses' )
201		- .forEach( ( ele ) => {
202		- ele.textContent = 0;
203		- } );
204		- }
205		- if ( data.items.length > 0 ) {
206		- for ( let i = 0; i < data.items.length; i++ ) {
207		- const v = data.items[ i ];
208		- if ( v.item_type == 'lp_lesson' ) {
209		- document.querySelector(
210		- '.statistics-items.lessons'
211		- ).textContent = v.item_count;
212		- } else if ( v.item_type == 'lp_quiz' ) {
213		- document.querySelector(
214		- '.statistics-items.quizes'
215		- ).textContent = v.item_count;
216		- } else if ( v.item_type == 'lp_assignment' ) {
217		- document.querySelector(
218		- '.statistics-items.assignment'
219		- ).textContent = v.item_count;
220		- }
221		- }
222		- } else {
223		- document
224		- .querySelectorAll( '.statistics-items' )
225		- .forEach( ( ele ) => {
226		- ele.textContent = 0;
227		- } );
228		- }
229		- } )
230		- .catch( ( err ) => {
231		- console.log( err );
232		- } )
233		- .finally( () => {} );
234		- };
235		- const userLoadData = ( filterType = 'today', date = '' ) => {
236		- wp.apiFetch( {
237		- path: wp.url.addQueryArgs( 'lp/v1/statistics/user-statistics', {
238		- filtertype: filterType,
239		- date,
240		- } ),
241		- method: 'GET',
242		- } )
243		- .then( ( res ) => {
244		- const { data, status, message } = res;
245		- if ( status === 'error' ) {
246		- throw new Error( message || 'Error' );
247		- }
248		- initStatisticChart( 'user-chart-content', data.chart_data );
249		- const totalUserActived = 0;
250		- document.querySelector(
251		- '.statistics-instructors'
252		- ).textContent = data.total_instructors;
253		- document.querySelector( '.statistics-students' ).textContent =
254		- data.total_students;
255		- document.querySelector(
256		- '.statistics-user-actived'
257		- ).textContent = data.total_instructors + data.total_students;
258		- document.querySelector(
259		- '.statistics-not-started'
260		- ).textContent = data.user_not_start_course;
261		- if ( data.user_course_statused.length > 0 ) {
262		- let userGraduration = data.user_course_statused,
263		- userFinished = 0;
264		- for ( let i = 0; i < userGraduration.length; i++ ) {
265		- if (
266		- userGraduration[ i ].graduation_status ===
267		- 'in-progress'
268		- ) {
269		- document.querySelector(
270		- '.statistics-graduration.in-progress'
271		- ).textContent = userGraduration[ i ].user_count;
272		- } else {
273		- userFinished += parseInt( userGraduration[ i ].user_count );
274		- }
275		- }
276		- document.querySelector(
277		- '.statistics-graduration.finished'
278		- ).textContent = userFinished;
279		- } else {
280		- document
281		- .querySelectorAll( '.statistics-graduration' )
282		- .forEach( ( ele ) => {
283		- ele.textContent = 0;
284		- } );
285		- }
286		- if ( Object.keys( data.top_enrolled_instructor ).length > 0 ) {
287		- const topInstructor = data.top_enrolled_instructor,
288		- topInstructorWrap = document.querySelector(
289		- '.top-intructor-by-student'
290		- );
291		- Object.keys( topInstructor ).forEach( function( key ) {
292		- // console.log(key, topInstructor[key]);
293		- topInstructorWrap.insertAdjacentHTML(
294		- 'beforeend',
295		- `<li>${ topInstructor[ key ].name } - ${ topInstructor[ key ].students }</li>`
296		- );
297		- } );
298		- }
299		- if ( data.top_enrolled_courses.length > 0 ) {
300		- const topCourse = data.top_enrolled_courses,
301		- topCourseWrap = document.querySelector(
302		- '.top-course-by-student'
303		- );
304		- for ( let i = 0; i < topCourse.length; i++ ) {
305		- topCourseWrap.insertAdjacentHTML(
306		- 'beforeend',
307		- `<li>${ topCourse[ i ].course_name } - ${ topCourse[ i ].enrolled_user }</li>`
308		- );
309		- }
310		- }
311		- } )
312		- .catch( ( err ) => {
313		- console.log( err );
314		- } )
315		- .finally( () => {} );
316		- };
317		- const generateChart = ( chartEle = '', data = [], config = {} ) => {
318		- const canvas = document.getElementById( chartEle );
319		- const chart_data = {
320		- labels: data.labels,
321		- datasets: [
322		- {
323		- label: data.line_label,
324		- borderColor: 'rgb(49 74 199)',
325		- borderWidth: 2,
326		- data: data.data,
327		- backgroundColor: 'rgb(49 74 199)',
328		- },
329		- ],
330		- };
331		- const configDefault = {
332		- type: 'line',
333		- data: chart_data,
334		- options: {
335		- responsive: true,
336		- maintainAspectRatio: false,
337		- aspectRatio: 0.8,
338		- plugins: {
339		- legend: {
340		- display: false,
341		- },
342		- },
343		- scales: {
344		- y: {
345		- min: 0,
346		- },
347		- x: {
348		- title: {
349		- display: true,
350		- text: data.x_label,
351		- align: 'end',
352		- },
353		- },
354		- },
355		- },
356		- };
357		-
358		- const configChart = { ...configDefault, ...config };
359		- configChart.options = { ...configDefault.options, ...config.options };
360		-
361		- // console.log( configChart );
362		-
363		- const chart = new Chart( canvas, configChart );
364		- return chart;
365		- };
366		- const loadLpSkeletonAnimations = ( show = false ) => {
367		- if ( show ) {
368		- document
369		- .querySelectorAll( '.lp-skeleton-animation' )
370		- .forEach( ( animation ) => {
371		- animation.style.display = 'block';
372		- } );
373		- } else {
374		- document
375		- .querySelectorAll( '.lp-skeleton-animation' )
376		- .forEach( ( animation ) => {
377		- animation.style.display = 'none';
378		- } );
379		- }
380		- };
381		- document.querySelectorAll( '.btn-filter-time' ).forEach( ( btn ) => {
382		- btn.addEventListener( 'click', () => {
383		- document
384		- .querySelectorAll( '.btn-filter-time' )
385		- .forEach( ( ele ) => ele.classList.remove( 'active' ) );
386		- btn.classList.add( 'active' );
387		- const filterType = btn.dataset.filter;
388		- if ( filterType == 'custom' ) {
389		- document.querySelector( '.custom-filter-time' ).style.display =
390		- 'flex';
391		- } else {
392		- const elementLoad = document.querySelector(
393		- 'input.statistics-type'
394		- );
395		- if ( elementLoad ) {
396		- document.querySelector(
397		- '.statistics-content canvas'
398		- ).style.display = 'none';
399		- loadLpSkeletonAnimations( true );
400		- if ( elementLoad.value == 'orders-statistics' ) {
401		- orderLoadData( filterType );
402		- } else if ( elementLoad.value == 'overview-statistics' ) {
403		- document.querySelector(
404		- '.top-category-sold'
405		- ).innerHTML = '';
406		- document.querySelector( '.top-course-sold' ).innerHTML =
407		- '';
408		- overviewLoadData( filterType );
409		- } else if ( elementLoad.value == 'courses-statistics' ) {
410		- courseLoadData( filterType );
411		- } else if ( elementLoad.value == 'users-statistics' ) {
412		- document.querySelector(
413		- '.top-course-by-student'
414		- ).innerHTML = '';
415		- document.querySelector(
416		- '.top-intructor-by-student'
417		- ).innerHTML = '';
418		- userLoadData( filterType );
419		- }
420		- }
421		- }
422		- } );
423		- } );
424		- document
425		- .querySelector( '.custom-filter-btn' )
426		- .addEventListener( 'click', ( e ) => {
427		- const time1 = document.querySelector( '#ct-filter-1' ).value,
428		- time2 = document.querySelector( '#ct-filter-2' ).value;
429		- if ( ! time1 || ! time2 ) {
430		- alert( 'Choose date' );
431		- } else {
432		- const elementLoad = document.querySelector(
433		- 'input.statistics-type'
434		- );
435		- document.querySelector(
436		- '.statistics-content canvas'
437		- ).style.display = 'none';
438		- loadLpSkeletonAnimations( true );
439		- if ( elementLoad ) {
440		- if ( elementLoad.value === 'orders-statistics' ) {
441		- orderLoadData( 'custom', `${ time1 }+${ time2 }` );
442		- } else if ( elementLoad.value === 'overview-statistics' ) {
443		- document.querySelector(
444		- '.top-category-sold'
445		- ).innerHTML = '';
446		- document.querySelector( '.top-course-sold' ).innerHTML =
447		- '';
448		- overviewLoadData( 'custom', `${ time1 }+${ time2 }` );
449		- } else if ( elementLoad.value === 'courses-statistics' ) {
450		- courseLoadData( 'custom', `${ time1 }+${ time2 }` );
451		- } else if ( elementLoad.value === 'users-statistics' ) {
452		- userLoadData( 'custom', `${ time1 }+${ time2 }` );
453		- }
454		- }
455		- }
456		- } );
457		- lpStatisticsLoad();
458		- const initStatisticChart = (
459		- chartID = '',
460		- chartData = [],
461		- chartConfig = false
462		- ) => {
463		- let chart = Chart.getChart( chartID );
464		- const chartEle = document.getElementById( chartID );
465		-
466		- // console.log( data );
467		- chartEle.style.display = 'block';
468		- loadLpSkeletonAnimations();
469		-
470		- if ( chart === undefined ) {
471		- if ( chartConfig ) {
472		- chart = generateChart( chartID, chartData, chartConfig );
473		- } else {
474		- chart = generateChart( chartID, chartData );
475		- }
476		- } else {
477		- chart.data.labels = chartData.labels;
478		- chart.data.datasets[ 0 ].data = chartData.data;
479		- chart.config.options.scales.x.title.text = chartData.x_label;
480		- chart.update();
481		- }
482		- };
	20	+lpUtils.lpOnElementReady( LpStatsFilterBar.selectors.elContainer, () => {
	21	+ lpStatsFilterBar.init();
	22	+} );
	23	+// SweetAlert2 popup: delegated events only, no rendered container to wait for.
	24	+lpStatsReportModal.init();
	25	+lpUtils.lpOnElementReady( LpStatsTabOverview.selectors.elContainer, () => {
	26	+ lpStatsTabOverview.init();
	27	+} );
	28	+lpUtils.lpOnElementReady( LpStatsTabOrders.selectors.elContainer, () => {
	29	+ lpStatsTabOrders.init();
	30	+} );
	31	+lpUtils.lpOnElementReady( LpStatsTabCourses.selectors.elContainer, () => {
	32	+ lpStatsTabCourses.init();
	33	+} );
	34	+lpUtils.lpOnElementReady( LpStatsTabUsers.selectors.elContainer, () => {
	35	+ lpStatsTabUsers.init();
	36	+} );
	37	+lpUtils.lpOnElementReady( LpStatsTabInstructors.selectors.elContainer, () => {
	38	+ lpStatsTabInstructors.init();
483	39	} );