@sd-angular/core 1.2.98 → 1.3.0

package/fesm2015/sd-angular-core-chart.js.__ivy_ngcc_bak

@@ -0,0 +1,727 @@
+import '@sd-angular/core/common';
+import { InjectionToken, Component, ChangeDetectorRef, Optional, Inject, Input, ViewChild, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { __awaiter } from 'tslib';
+import * as Chart from 'chart.js';
+import $ from 'jquery';
+import { v4 } from 'uuid';
+
+const ChartColors = {
+    Red: 'rgb(255, 99, 132)',
+    Orange: 'rgb(255, 159, 64)',
+    Yellow: 'rgb(255, 205, 86)',
+    Green: 'rgb(75, 192, 192)',
+    Blue: 'rgb(54, 162, 235)',
+    Purple: 'rgb(153, 102, 255)',
+    Grey: 'rgb(201, 203, 207)',
+    Purple700: '#2E224C',
+    Purple600: '#453372',
+    Purple500: '#574191',
+    Purple400: '#7356BF',
+    Purple300: '#957FCE',
+    Purple200: '#C1B4E2',
+    Purple100: '#E3DDF2',
+    Purple50: '#F3F1F9',
+    Blue700: '#0F2C60',
+    Blue600: '#174291',
+    Blue500: '#1D53B7',
+    Blue400: '#276EF1',
+    Blue300: '#5A90F4',
+    Blue200: '#9FBFF8',
+    Blue100: '#D4E2FC',
+    Blue50: '#EDF3FD',
+    Green700: '#0D4020',
+    Green600: '#156A36',
+    Green500: '#09863D',
+    Green400: '#21A453',
+    Green300: '#43BF75',
+    Green200: '#9EE2B8',
+    Green100: '#CFF3DD',
+    Green50: '#F0FAF3',
+    Yellow700: '#664C1A',
+    Yellow600: '#997328',
+    Yellow500: '#C19132',
+    Yellow400: '#FFC043',
+    Yellow300: '#FFCF70',
+    Yellow200: '#FFE3AC',
+    Yellow100: '#FFF2D9',
+    Yellow50: '#FFF9EF',
+    Orange700: '#5F2C14',
+    Orange600: '#8E421E',
+    Orange500: '#B45326',
+    Orange400: '#ED6E33',
+    Orange300: '#F19063',
+    Orange200: '#F7BFA5',
+    Orange100: '#FBE2D6',
+    Orange50: '#FDF3EE',
+    Red700: '#541A14',
+    Red600: '#7F281E',
+    Red500: '#A13226',
+    Red400: '#D44333',
+    Red300: '#DE7063',
+    Red200: '#ECACA5',
+    Red100: '#F6D9D6',
+    Red50: '#FBEFEE',
+    Brown700: '#3D281E',
+    Brown600: '#5B3C2D',
+    Brown500: '#744C39',
+    Brown400: '#99644C',
+    Brown300: '#B18976',
+    Brown200: '#D2BAB0',
+    Brown100: '#EBE0DB',
+    Brown50: '#F6F2F0',
+    Gray900: '#141414',
+    Gray800: '#1F1F1F',
+    Gray700: '#333333',
+    Gray600: '#545454',
+    Gray500: '#757575',
+    Gray400: '#AFAFAF',
+    Gray300: '#CBCBCB',
+    Gray200: '#E2E2E2',
+    Gray100: '#EEEEEE',
+    Gray50: '#F6F6F6',
+    Platinum700: '#394145',
+    Platinum600: '#556268',
+    Platinum500: '#6C7C83',
+    Platinum400: '#8EA3AD',
+    Platinum300: '#A1BDCA',
+    Platinum200: '#CCDFE5',
+    Platinum100: '#EBF5F7',
+    Platinum50: '#F4FAFB',
+    EatsGreen400: '#21A453',
+    FreightBlue400: '#21A453',
+    JumpRed400: '#FF0A2D',
+    Black: '#000000',
+    White: '#FFFFFF',
+};
+const CHART_CONFIG = new InjectionToken('chart.configuration');
+
+class SdChart {
+    constructor(ref, chartConfiguration) {
+        this.ref = ref;
+        this.chartConfiguration = chartConfiguration;
+        this.initialized = false;
+        this.isLoading = false;
+        this.visible = true;
+        this.height = '300px';
+        this.loadingStart = () => {
+            this.isLoading = true;
+        };
+    }
+    set chartOption(chartOption) {
+        this.pChartOption = chartOption;
+        if (this.initialized) {
+            this.renderChart();
+        }
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        this.renderChart(true);
+        this.initialized = true;
+        this.ref.detectChanges();
+    }
+    renderChart(firstRender) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.height = ((_a = this.pChartOption) === null || _a === void 0 ? void 0 : _a.height) || '300px';
+            if (!firstRender) {
+                this.visible = false;
+                yield new Promise(resolve => setTimeout(resolve, 200));
+                this.visible = true;
+            }
+            yield new Promise(resolve => setTimeout(resolve, 200));
+            if ((_b = this.chartRef) === null || _b === void 0 ? void 0 : _b.nativeElement) {
+                const canvas = this.chartRef.nativeElement;
+                this.ctx = canvas.getContext('2d');
+                switch (this.pChartOption.type) {
+                    case 'pie':
+                        this.renderPieChart(this.pChartOption);
+                        break;
+                    case 'bar':
+                        this.renderBarChart(this.pChartOption);
+                        break;
+                    case 'horizontalBar':
+                        this.renderHorizontalBarChart(this.pChartOption);
+                        break;
+                    case 'line':
+                        this.renderLineChart(this.pChartOption);
+                        break;
+                    case 'stackArea':
+                        this.renderStackAreaChart(this.pChartOption);
+                        break;
+                    case 'barline':
+                        this.renderBarLineChart(this.pChartOption);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        });
+    }
+    renderPieChart(option) {
+        var _a, _b, _c;
+        const configuration = {
+            type: 'pie',
+            options: {
+                responsive: true,
+                title: {
+                    display: true,
+                    text: option.title
+                },
+                legend: {
+                    display: !option.hideLegend
+                },
+                tooltips: {
+                    callbacks: {
+                        label: (tooltipItem, data) => {
+                            var _a, _b, _c;
+                            const datasetLabel = (_a = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _a === void 0 ? void 0 : _a.label;
+                            const label = data === null || data === void 0 ? void 0 : data.labels[tooltipItem.index];
+                            const value = (_b = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _b === void 0 ? void 0 : _b.data[tooltipItem.index];
+                            return ((_c = option.tooltips) === null || _c === void 0 ? void 0 : _c.label({
+                                datasetLabel,
+                                label,
+                                value
+                            })) || `${datasetLabel ? `[${datasetLabel}] ` : ''}${label} : ${Number.toVNCurrency(value)}`;
+                        }
+                    }
+                }
+            },
+            data: {
+                labels: ((_a = option.datasets) === null || _a === void 0 ? void 0 : _a.map(e => e.label)) || [],
+                datasets: [{
+                        data: ((_b = option.datasets) === null || _b === void 0 ? void 0 : _b.map(e => e.value)) || [],
+                        backgroundColor: ((_c = option.datasets) === null || _c === void 0 ? void 0 : _c.map((e, idx) => {
+                            var _a, _b, _c;
+                            return e.backgroundColor
+                                || ((_c = (_b = (_a = this.chartConfiguration) === null || _a === void 0 ? void 0 : _a.defaultColors) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.backgroundColor)
+                                || this.dynamicColor;
+                        })) || []
+                    }]
+            }
+        };
+        if (option.hover === 'ShowAll') {
+            configuration.options.tooltips = Object.assign(Object.assign({}, configuration.options.tooltips), { mode: 'index', intersect: false });
+            configuration.options.hover = Object.assign(Object.assign({}, configuration.options.hover), { mode: 'index', intersect: false });
+        }
+        this.chart = new Chart(this.ctx, configuration);
+        this.isLoading = false;
+    }
+    renderBarChart(option) {
+        var _a, _b;
+        const labelWidth = (_a = option.labelWidth) !== null && _a !== void 0 ? _a : 50;
+        if (option.datasets.length) {
+            // const newwidth = Math.max(option.labels.length * option.datasets.length * labelWidth, $(this.chartWrapperRef.nativeElement).width());
+            // $(this.chartAreaWrapperExtendRef.nativeElement).width(newwidth);
+            const newwidth = option.labels.length * option.datasets.length * labelWidth;
+            $(this.chartAreaWrapperExtendRef.nativeElement).css('width', `max(100%,${newwidth}px)`);
+        }
+        const configuration = {
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                legend: {
+                    display: !option.hideLegend
+                },
+                scales: {
+                    xAxes: [{
+                            display: true,
+                            scaleLabel: {
+                                display: !!option.xTitle,
+                                labelString: option.xTitle || ''
+                            },
+                            ticks: {
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.xLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            }
+                        }],
+                    yAxes: [{
+                            display: true,
+                            ticks: {
+                                beginAtZero: (_b = option.beginAtZero) !== null && _b !== void 0 ? _b : true,
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.yLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                            scaleLabel: {
+                                display: !!option.yTitle,
+                                labelString: option.yTitle || ''
+                            }
+                        }]
+                },
+                tooltips: {
+                    callbacks: {
+                        label: (tooltipItem, data) => {
+                            var _a, _b, _c;
+                            const datasetLabel = (_a = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _a === void 0 ? void 0 : _a.label;
+                            const label = data === null || data === void 0 ? void 0 : data.labels[tooltipItem.index];
+                            const value = (_b = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _b === void 0 ? void 0 : _b.data[tooltipItem.index];
+                            return ((_c = option.tooltips) === null || _c === void 0 ? void 0 : _c.label({
+                                datasetLabel,
+                                label,
+                                value
+                            })) || `${datasetLabel} : ${Number.toVNCurrency(value)}`;
+                        }
+                    }
+                }
+            },
+            type: 'bar',
+            data: {
+                labels: option.labels,
+                datasets: option.datasets.map((e, idx) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    const dynamicColor = this.dynamicColor;
+                    const result = {
+                        label: e.label,
+                        fill: e.backgroundColor || ((_c = (_b = (_a = this.chartConfiguration) === null || _a === void 0 ? void 0 : _a.defaultColors) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.backgroundColor) || dynamicColor,
+                        backgroundColor: e.backgroundColor || ((_f = (_e = (_d = this.chartConfiguration) === null || _d === void 0 ? void 0 : _d.defaultColors) === null || _e === void 0 ? void 0 : _e[idx]) === null || _f === void 0 ? void 0 : _f.backgroundColor) || dynamicColor,
+                        data: e.data,
+                        stack: e.stack
+                    };
+                    return result;
+                })
+            }
+        };
+        if (option.hover === 'ShowAll') {
+            configuration.options.tooltips = Object.assign(Object.assign({}, configuration.options.tooltips), { mode: 'index', intersect: false });
+            configuration.options.hover = Object.assign(Object.assign({}, configuration.options.hover), { mode: 'index', intersect: false });
+        }
+        this.chart = new Chart(this.ctx, configuration);
+        this.isLoading = false;
+    }
+    renderHorizontalBarChart(option) {
+        var _a;
+        // const labelWidth = option.labelWidth ?? 50;
+        // if (option.datasets.length) {
+        //   const newwidth = Math.max(option.labels.length * option.datasets.length * labelWidth, $(this.chartWrapperRef.nativeElement).width());
+        //   $(this.chartAreaWrapperExtendRef.nativeElement).width(newwidth);
+        // }
+        const configuration = {
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                legend: {
+                    display: !option.hideLegend
+                },
+                scales: {
+                    xAxes: [{
+                            display: true,
+                            scaleLabel: {
+                                display: !!option.xTitle,
+                                labelString: option.xTitle || ''
+                            },
+                            ticks: {
+                                beginAtZero: (_a = option.beginAtZero) !== null && _a !== void 0 ? _a : true,
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.xLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            }
+                        }],
+                    yAxes: [{
+                            display: true,
+                            ticks: {
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.yLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                            scaleLabel: {
+                                display: !!option.yTitle,
+                                labelString: option.yTitle || ''
+                            }
+                        }]
+                },
+                tooltips: {
+                    callbacks: {
+                        label: (tooltipItem, data) => {
+                            var _a, _b, _c;
+                            const datasetLabel = (_a = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _a === void 0 ? void 0 : _a.label;
+                            const label = data === null || data === void 0 ? void 0 : data.labels[tooltipItem.index];
+                            const value = (_b = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _b === void 0 ? void 0 : _b.data[tooltipItem.index];
+                            return ((_c = option.tooltips) === null || _c === void 0 ? void 0 : _c.label({
+                                datasetLabel,
+                                label,
+                                value
+                            })) || `${datasetLabel} : ${Number.toVNCurrency(value)}`;
+                        }
+                    }
+                }
+            },
+            type: 'horizontalBar',
+            data: {
+                labels: option.labels,
+                datasets: option.datasets.map((e, idx) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    const dynamicColor = this.dynamicColor;
+                    const result = {
+                        label: e.label,
+                        fill: e.backgroundColor || ((_c = (_b = (_a = this.chartConfiguration) === null || _a === void 0 ? void 0 : _a.defaultColors) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.backgroundColor) || dynamicColor,
+                        backgroundColor: e.backgroundColor || ((_f = (_e = (_d = this.chartConfiguration) === null || _d === void 0 ? void 0 : _d.defaultColors) === null || _e === void 0 ? void 0 : _e[idx]) === null || _f === void 0 ? void 0 : _f.backgroundColor) || dynamicColor,
+                        data: e.data,
+                        stack: e.stack
+                    };
+                    return result;
+                })
+            }
+        };
+        if (option.hover === 'ShowAll') {
+            configuration.options.tooltips = Object.assign(Object.assign({}, configuration.options.tooltips), { mode: 'index', intersect: false });
+            configuration.options.hover = Object.assign(Object.assign({}, configuration.options.hover), { mode: 'index', intersect: false });
+        }
+        this.chart = new Chart(this.ctx, configuration);
+        this.isLoading = false;
+    }
+    renderLineChart(option) {
+        var _a, _b;
+        const labelWidth = (_a = option.labelWidth) !== null && _a !== void 0 ? _a : 50;
+        if (option.datasets.length) {
+            // const newwidth = Math.max(option.labels.length * labelWidth, $(this.chartWrapperRef.nativeElement).width());
+            // $(this.chartAreaWrapperExtendRef.nativeElement).width(newwidth);
+            const newwidth = option.labels.length * labelWidth;
+            $(this.chartAreaWrapperExtendRef.nativeElement).css('width', `max(100%,${newwidth}px)`);
+        }
+        const configuration = {
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                legend: {
+                    display: !option.hideLegend
+                },
+                scales: {
+                    xAxes: [{
+                            display: true,
+                            scaleLabel: {
+                                display: !!option.xTitle,
+                                labelString: option.xTitle || ''
+                            },
+                            ticks: {
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.xLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                        }],
+                    yAxes: [{
+                            display: true,
+                            ticks: {
+                                beginAtZero: (_b = option.beginAtZero) !== null && _b !== void 0 ? _b : true,
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.yLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                            scaleLabel: {
+                                display: !!option.yTitle,
+                                labelString: option.yTitle || ''
+                            }
+                        }]
+                },
+                tooltips: {
+                    callbacks: {
+                        label: (tooltipItem, data) => {
+                            var _a, _b, _c;
+                            const datasetLabel = (_a = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _a === void 0 ? void 0 : _a.label;
+                            const label = data === null || data === void 0 ? void 0 : data.labels[tooltipItem.index];
+                            const value = (_b = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _b === void 0 ? void 0 : _b.data[tooltipItem.index];
+                            return ((_c = option.tooltips) === null || _c === void 0 ? void 0 : _c.label({
+                                datasetLabel,
+                                label,
+                                value
+                            })) || `${datasetLabel} : ${Number.toVNCurrency(value)}`;
+                        }
+                    }
+                }
+            },
+            type: 'line',
+            data: {
+                labels: option.labels,
+                datasets: option.datasets.map((e, idx) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                    const dynamicColor = this.dynamicColor;
+                    const result = {
+                        label: e.label,
+                        fill: e.backgroundColor || ((_c = (_b = (_a = this.chartConfiguration) === null || _a === void 0 ? void 0 : _a.defaultColors) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.backgroundColor) || dynamicColor,
+                        backgroundColor: e.backgroundColor || ((_f = (_e = (_d = this.chartConfiguration) === null || _d === void 0 ? void 0 : _d.defaultColors) === null || _e === void 0 ? void 0 : _e[idx]) === null || _f === void 0 ? void 0 : _f.backgroundColor) || dynamicColor,
+                        borderColor: e.borderColor || ((_j = (_h = (_g = this.chartConfiguration) === null || _g === void 0 ? void 0 : _g.defaultColors) === null || _h === void 0 ? void 0 : _h[idx]) === null || _j === void 0 ? void 0 : _j.borderColor) || dynamicColor,
+                        data: e.data,
+                        lineTension: 0,
+                    };
+                    return result;
+                })
+            }
+        };
+        if (option.hover === 'ShowAll') {
+            configuration.options.tooltips = Object.assign(Object.assign({}, configuration.options.tooltips), { mode: 'index', intersect: false });
+            configuration.options.hover = Object.assign(Object.assign({}, configuration.options.hover), { mode: 'index', intersect: false });
+        }
+        this.chart = new Chart(this.ctx, configuration);
+        this.isLoading = false;
+    }
+    renderStackAreaChart(option) {
+        var _a, _b;
+        const labelWidth = (_a = option.labelWidth) !== null && _a !== void 0 ? _a : 50;
+        if (option.datasets.length) {
+            // const newwidth = Math.max(option.labels.length * labelWidth, $(this.chartWrapperRef.nativeElement).width());
+            // $(this.chartAreaWrapperExtendRef.nativeElement).width(newwidth);
+            const newwidth = option.labels.length * labelWidth;
+            $(this.chartAreaWrapperExtendRef.nativeElement).css('width', `max(100%,${newwidth}px)`);
+        }
+        const configuration = {
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                legend: {
+                    display: !option.hideLegend
+                },
+                scales: {
+                    xAxes: [{
+                            display: true,
+                            scaleLabel: {
+                                display: !!option.xTitle,
+                                labelString: option.xTitle || ''
+                            },
+                            ticks: {
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.xLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                        }],
+                    yAxes: [{
+                            display: true,
+                            ticks: {
+                                beginAtZero: (_b = option.beginAtZero) !== null && _b !== void 0 ? _b : true,
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.yLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                            stacked: true,
+                            scaleLabel: {
+                                display: !!option.yTitle,
+                                labelString: option.yTitle || ''
+                            }
+                        }]
+                },
+                tooltips: {
+                    callbacks: {
+                        label: (tooltipItem, data) => {
+                            var _a, _b, _c;
+                            const datasetLabel = (_a = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _a === void 0 ? void 0 : _a.label;
+                            const label = data === null || data === void 0 ? void 0 : data.labels[tooltipItem.index];
+                            const value = (_b = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _b === void 0 ? void 0 : _b.data[tooltipItem.index];
+                            return ((_c = option.tooltips) === null || _c === void 0 ? void 0 : _c.label({
+                                datasetLabel,
+                                label,
+                                value
+                            })) || `${datasetLabel} : ${Number.toVNCurrency(value)}`;
+                        }
+                    }
+                }
+            },
+            type: 'line',
+            data: {
+                labels: option.labels,
+                datasets: option.datasets.map((e, idx) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    const dynamicColor = this.dynamicColor;
+                    const result = {
+                        label: e.label,
+                        // fill: e.backgroundColor,
+                        backgroundColor: e.backgroundColor || ((_c = (_b = (_a = this.chartConfiguration) === null || _a === void 0 ? void 0 : _a.defaultColors) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.backgroundColor) || dynamicColor,
+                        borderColor: e.borderColor || ((_f = (_e = (_d = this.chartConfiguration) === null || _d === void 0 ? void 0 : _d.defaultColors) === null || _e === void 0 ? void 0 : _e[idx]) === null || _f === void 0 ? void 0 : _f.borderColor) || dynamicColor,
+                        data: e.data,
+                        lineTension: 0,
+                    };
+                    return result;
+                })
+            }
+        };
+        if (option.hover === 'ShowAll') {
+            configuration.options.tooltips = Object.assign(Object.assign({}, configuration.options.tooltips), { mode: 'index', intersect: false });
+            configuration.options.hover = Object.assign(Object.assign({}, configuration.options.hover), { mode: 'index', intersect: false });
+        }
+        this.chart = new Chart(this.ctx, configuration);
+        this.isLoading = false;
+    }
+    renderBarLineChart(option) {
+        var _a, _b, _c;
+        const labelWidth = (_a = option.labelWidth) !== null && _a !== void 0 ? _a : 50;
+        if (option.datasets.length) {
+            const numberOfBars = option.datasets.filter(e => e.type === 'bar').length;
+            if (numberOfBars <= 1) {
+                // const newwidth = Math.max(option.labels.length * labelWidth, $(this.chartWrapperRef.nativeElement).width());
+                // $(this.chartAreaWrapperExtendRef.nativeElement).width(newwidth);
+                const newwidth = option.labels.length * labelWidth;
+                $(this.chartAreaWrapperExtendRef.nativeElement).css('width', `max(100%,${newwidth}px)`);
+            }
+            else {
+                // const newwidth = Math.max(option.labels.length * numberOfBars * labelWidth, $(this.chartWrapperRef.nativeElement).width());
+                // $(this.chartAreaWrapperExtendRef.nativeElement).width(newwidth);
+                const newwidth = option.labels.length * numberOfBars * labelWidth;
+                $(this.chartAreaWrapperExtendRef.nativeElement).css('width', `max(100%,${newwidth}px)`);
+            }
+        }
+        const leftId = `I${v4()}`;
+        const rightId = `I${v4()}`;
+        const yAxes = [{
+                type: 'linear',
+                display: true,
+                position: 'left',
+                id: leftId,
+                ticks: {
+                    beginAtZero: (_b = option.beginAtZero) !== null && _b !== void 0 ? _b : true,
+                    suggestedMin: 0,
+                    callback: (value, index) => {
+                        var _a;
+                        return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.yLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                    }
+                },
+                scaleLabel: {
+                    display: !!option.yTitle,
+                    labelString: option.yTitle || ''
+                }
+            }];
+        if (option.datasets.some(e => e.yAlign === 'right')) {
+            yAxes.push({
+                type: 'linear',
+                display: true,
+                position: 'right',
+                id: rightId,
+                ticks: {
+                    beginAtZero: (_c = option.beginAtZero) !== null && _c !== void 0 ? _c : true,
+                    suggestedMin: 0,
+                    callback: (value, index) => {
+                        var _a;
+                        return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.yRightLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                    }
+                },
+                scaleLabel: {
+                    display: !!option.yRightTitle,
+                    labelString: option.yRightTitle || ''
+                }
+            });
+        }
+        const configuration = {
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                legend: {
+                    display: !option.hideLegend
+                },
+                title: {
+                    display: true,
+                    text: option.title
+                },
+                scales: {
+                    xAxes: [{
+                            display: true,
+                            scaleLabel: {
+                                display: !!option.xTitle,
+                                labelString: option.xTitle || ''
+                            },
+                            ticks: {
+                                callback: (value, index) => {
+                                    var _a;
+                                    return ((_a = option.ticks) === null || _a === void 0 ? void 0 : _a.xLabel(value, index)) || (Number.isNumber(value) ? Number.toVNCurrency(value) : value);
+                                }
+                            },
+                        }],
+                    yAxes
+                },
+                tooltips: {
+                    callbacks: {
+                        label: (tooltipItem, data) => {
+                            var _a, _b, _c;
+                            const datasetLabel = (_a = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _a === void 0 ? void 0 : _a.label;
+                            const label = data === null || data === void 0 ? void 0 : data.labels[tooltipItem.index];
+                            const value = (_b = data === null || data === void 0 ? void 0 : data.datasets[tooltipItem.datasetIndex]) === null || _b === void 0 ? void 0 : _b.data[tooltipItem.index];
+                            return ((_c = option.tooltips) === null || _c === void 0 ? void 0 : _c.label({
+                                datasetLabel,
+                                label,
+                                value
+                            })) || `${datasetLabel ? `[${datasetLabel}] ` : ''} ${label} : ${Number.toVNCurrency(value)}`;
+                        }
+                    }
+                }
+            },
+            data: {
+                labels: option.labels,
+                datasets: option.datasets.map((e, idx) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                    const dynamicColor = this.dynamicColor;
+                    const result = {
+                        type: e.type,
+                        label: e.label,
+                        fill: e.backgroundColor || ((_c = (_b = (_a = this.chartConfiguration) === null || _a === void 0 ? void 0 : _a.defaultColors) === null || _b === void 0 ? void 0 : _b[idx]) === null || _c === void 0 ? void 0 : _c.backgroundColor) || dynamicColor,
+                        backgroundColor: e.backgroundColor || ((_f = (_e = (_d = this.chartConfiguration) === null || _d === void 0 ? void 0 : _d.defaultColors) === null || _e === void 0 ? void 0 : _e[idx]) === null || _f === void 0 ? void 0 : _f.backgroundColor) || dynamicColor,
+                        borderColor: e.borderColor || ((_j = (_h = (_g = this.chartConfiguration) === null || _g === void 0 ? void 0 : _g.defaultColors) === null || _h === void 0 ? void 0 : _h[idx]) === null || _j === void 0 ? void 0 : _j.borderColor) || dynamicColor,
+                        data: e.data,
+                        yAxisID: e.yAlign === 'right' ? rightId : leftId,
+                        lineTension: 0
+                    };
+                    return result;
+                })
+            }
+        };
+        if (option.hover === 'ShowAll') {
+            configuration.options.tooltips = Object.assign(Object.assign({}, configuration.options.tooltips), { mode: 'index', intersect: false });
+            configuration.options.hover = Object.assign(Object.assign({}, configuration.options.hover), { mode: 'index', intersect: false });
+        }
+        this.chart = new Chart(this.ctx, configuration);
+        this.isLoading = false;
+    }
+    get dynamicColor() {
+        const r = Math.floor(Math.random() * 255);
+        const g = Math.floor(Math.random() * 255);
+        const b = Math.floor(Math.random() * 255);
+        return 'rgb(' + r + ',' + g + ',' + b + ')';
+    }
+}
+SdChart.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-chart',
+                template: "<div *ngIf=\"visible\" class=\"c-chart-wrapper mt-2\" >\r\n  <div class=\"c-chart-area-wrapper\" #chartWrapper>\r\n    <div class=\"c-chart-area-wrapper-extend\" [ngStyle]=\"{'height':height}\" #chartAreaWrapperExtend [ngClass]=\"{'c-loading': isLoading}\">\r\n      <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-5x fa-spinner fa-pulse c-loading-icon\"></i>\r\n      <canvas #chart [ngClass]=\"{'c-loading-margin': isLoading}\"></canvas>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [".c-container{background:#f5f6f7;border-radius:5px}.c-flex{border-radius:8px;display:flex;margin:15px}.c-chart-container{background:#fff;border-radius:5px;border-radius:8px;box-shadow:0 0 13px 0 rgba(82,63,105,.1);margin:15px;padding:15px}.c-btn-dashboard{align-self:center;height:60%;vertical-align:middle}.c-chart-wrapper{position:relative}.c-chart-wrapper>canvas{left:0;pointer-events:none;position:absolute;top:0}.c-chart-area-wrapper{overflow-x:auto;position:relative;width:100%}.c-chart-area-wrapper-extend{position:relative}.c-loading{opacity:.4}.c-loading-icon{left:calc(50% - 2.5rem);position:-webkit-sticky;position:sticky;top:calc(50% - 2.5rem)}.c-loading-margin{margin-top:-6rem}::-webkit-scrollbar{height:7px;width:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#555}"]
+            },] }
+];
+SdChart.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [CHART_CONFIG,] }] }
+];
+SdChart.propDecorators = {
+    chartOption: [{ type: Input }],
+    chartRef: [{ type: ViewChild, args: ['chart',] }],
+    chartWrapperRef: [{ type: ViewChild, args: ['chartWrapper',] }],
+    chartAxisRef: [{ type: ViewChild, args: ['chartAxis',] }],
+    chartAreaWrapperExtendRef: [{ type: ViewChild, args: ['chartAreaWrapperExtend',] }]
+};
+
+class SdChartModule {
+}
+SdChartModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    SdChart
+                ],
+                exports: [
+                    SdChart
+                ],
+                providers: []
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHART_CONFIG, ChartColors, SdChart, SdChartModule };
+//# sourceMappingURL=sd-angular-core-chart.js.map