Untitled
unknown
javascript
2 years ago
9.7 kB
6
Indexable
// Webpack support if (typeof module !== 'undefined') { module.exports = KTChartsWidget35; } "use strict"; var firstChartDate; var secondChartDate; var thirdChartDate; var fourthChartDate; var fifthChartDate; var firstChartData; var secondChartData; var thirdChartData; var fourthChartData; var fifthChartData; // Class definition var KTChartsWidget35 = function () { var chart1 = { self: null, rendered: false }; var chart2 = { self: null, rendered: false }; var chart3 = { self: null, rendered: false }; var chart4 = { self: null, rendered: false }; var chart5 = { self: null, rendered: false }; function getChart(url) { if (currentPage != 'homepage') return false; var tmp = []; $.ajax({ 'async': false, 'type': "GET", 'global': false, 'dataType': 'html', 'url': url, 'data': { 'request': "", 'target': 'arrange_url', 'method': 'method_target' }, 'success': function (data) { tmp = JSON.parse(data); } }); if (url.indexOf("total-revenue") != -1) { tmp.forEach((element, index) => { tmp[index] = Math.round((element + Number.EPSILON) * 100) / 100; }); } return tmp; } // date requests starts firstChartDate = getChart('/v1/chart-date-listing?date=today'); secondChartDate = getChart('/v1/chart-date-listing?date=yesterday'); thirdChartDate = getChart('/v1/chart-date-listing?date=thisWeek'); fourthChartDate = getChart('/v1/chart-date-listing?date=thisMonth'); fifthChartDate = getChart('/v1/chart-date-listing?date=lastThreeMonths'); //// date requests ends /// /// data requests starts /// firstChartData = getChart('/v1/total-revenue-by-date?date=today'); secondChartData = getChart('/v1/total-revenue-by-date?date=yesterday'); thirdChartData = getChart('/v1/total-revenue-by-date?date=thisWeek'); fourthChartData = getChart('/v1/total-revenue-by-date?date=thisMonth'); fifthChartData = getChart('/v1/total-revenue-by-date?date=lastThreeMonths'); // data requests ends /// // Private methods var initChart = function(chart, toggle, chartSelector, data, labels, initByDefault) { var element = document.querySelector(chartSelector); if (!element) { return; } var height = parseInt(KTUtil.css(element, 'height')); var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--kt-gray-500'); var borderColor = KTUtil.getCssVariableValue('--kt-border-dashed-color'); var baseColor = "#4FCD89"; var options = { series: [{ name: 'Earnings', data: data }], chart: { fontFamily: 'inherit', type: 'area', height: 490, toolbar: { show: true } }, legend: { show: true }, dataLabels: { enabled: false }, fill: { type: "gradient", gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.2, stops: [50, 300, 1000] } }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: labels, axisBorder: { show: false, }, axisTicks: { show: true }, offsetX: 20, tickAmount: 6, labels: { rotate: 40, rotateAlways: true, show: true, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { position: 'front', stroke: { color: baseColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { tickAmount: 6, max: Math.max.apply(Math, data), min: Math.min.apply(Math, data), labels: { show: true } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'date', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return val + '$'; } } }, colors: [baseColor], grid: { borderColor: borderColor, strokeDashArray: 3, yaxis: { lines: { show: false } } }, markers: { strokeColor: baseColor, strokeWidth: 3 } }; chart.self = new ApexCharts(element, options); var tab = document.querySelector(toggle); if (initByDefault === true) { // Set timeout to properly get the parent elements width setTimeout(function() { chart.self.render(); chart.rendered = true; }, 200); } tab.addEventListener('shown.bs.tab', function (event) { if (chart.rendered === false) { chart.self.render(); chart.rendered = true; } }); } // Public methods return { init: function () { var chart1Data = firstChartData; var chart2Data = secondChartData; var chart3Data = thirdChartData; var chart4Data = fourthChartData; var chart5Data = fifthChartData; var chart1Labels = firstChartDate; var chart2Labels = secondChartDate; var chart3Labels = thirdChartDate; var chart4Labels = fourthChartDate; var chart5Labels = fifthChartDate; // initChart(chart1, '#kt_charts_widget_35_tab_1', '#kt_charts_widget_35_chart_1', chart1Data, chart1Labels, true); initChart(chart2, '#kt_charts_widget_35_tab_2', '#kt_charts_widget_35_chart_2', chart2Data, chart2Labels, true); initChart(chart3, '#kt_charts_widget_35_tab_3', '#kt_charts_widget_35_chart_3', chart3Data, chart3Labels, true); initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, true); initChart(chart5, '#kt_charts_widget_35_tab_5', '#kt_charts_widget_35_chart_5', chart5Data, chart5Labels, true); // Update chart on theme mode change KTThemeMode.on("kt.thememode.change", function() { if (chart1.rendered) { chart1.self.destroy(); } if (chart2.rendered) { chart2.self.destroy(); } if (chart3.rendered) { chart3.self.destroy(); } if (chart4.rendered) { chart4.self.destroy(); } if (chart5.rendered) { chart5.self.destroy(); } initChart(chart1, '#kt_charts_widget_35_tab_1', '#kt_charts_widget_35_chart_1', chart1Data, chart1Labels, chart1.rendered); initChart(chart2, '#kt_charts_widget_35_tab_2', '#kt_charts_widget_35_chart_2', chart2Data, chart2Labels, chart2.rendered); initChart(chart3, '#kt_charts_widget_35_tab_3', '#kt_charts_widget_35_chart_3', chart3Data, chart3Labels, chart3.rendered); initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, chart4.rendered); initChart(chart5, '#kt_charts_widget_35_tab_5', '#kt_charts_widget_35_chart_5', chart5Data, chart5Labels, chart5.rendered); // initChart(chart4, '#kt_charts_widget_35_tab_4', '#kt_charts_widget_35_chart_4', chart4Data, chart4Labels, chart4.rendered); }); } } }(); // On document ready KTUtil.onDOMContentLoaded(function() { KTChartsWidget35.init(); });
Editor is loading...