'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var chart_js = require('chart.js');

var ChartEmits;
(function(ChartEmits) {
    ChartEmits["ChartRendered"] = 'chart:rendered';
    ChartEmits["ChartUpdated"] = 'chart:updated';
    ChartEmits["ChartDestroyed"] = 'chart:destroyed';
    ChartEmits["LabelsUpdated"] = 'labels:updated';
})(ChartEmits || (ChartEmits = {}));
function chartCreate(createChartFunction, chartData, chartOptions, context) {
    createChartFunction(chartData, chartOptions);
    if (context !== undefined) {
        context.emit(ChartEmits.ChartRendered);
    }
}
function chartUpdate(chart, context) {
    chart.update();
    if (context !== undefined) {
        context.emit(ChartEmits.ChartUpdated);
    }
}
function chartDestroy(chart, context) {
    chart.destroy();
    if (context !== undefined) {
        context.emit(ChartEmits.ChartDestroyed);
    }
}
function getChartData(data, datasetIdKey) {
    const nextData = {
        labels: typeof data.labels === 'undefined' ? [] : [
            ...data.labels
        ],
        datasets: []
    };
    setChartDatasets(nextData, {
        ...data
    }, datasetIdKey);
    return nextData;
}
function getChartOptions(options, plugins) {
    const chartOptions = options;
    if (chartOptions !== undefined && 'plugins' in chartOptions && typeof plugins !== 'undefined' && Object.keys(plugins).length > 0) {
        chartOptions.plugins = {
            ...chartOptions.plugins,
            ...plugins
        };
    }
    return chartOptions;
}
function setChartDatasets(oldData, newData, datasetIdKey) {
    const addedDatasets = [];
    oldData.datasets = newData.datasets.map((nextDataset)=>{
        // given the new set, find it's current match
        const currentDataset = oldData.datasets.find((dataset)=>dataset[datasetIdKey] === nextDataset[datasetIdKey]
        );
        // There is no original to update, so simply add new one
        if (!currentDataset || !nextDataset.data || addedDatasets.includes(currentDataset)) {
            return {
                ...nextDataset
            };
        }
        addedDatasets.push(currentDataset);
        Object.assign(currentDataset, nextDataset);
        return currentDataset;
    });
}
function setChartLabels(chart, labels, context) {
    chart.data.labels = labels;
    if (context !== undefined) {
        context.emit(ChartEmits.LabelsUpdated);
    }
}
function compareData(newData, oldData) {
    // Get new and old DataSet Labels
    const newDatasetLabels = newData.datasets.map((dataset)=>{
        return dataset.label;
    });
    const oldDatasetLabels = oldData.datasets.map((dataset)=>{
        return dataset.label;
    });
    // Check if Labels are equal and if dataset length is equal
    return oldData.datasets.length === newData.datasets.length && newDatasetLabels.every((value, index)=>value === oldDatasetLabels[index]
    );
}
const templateError = 'Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components';

function generateChart(chartId, chartType, chartController) {
    return {
        props: {
            chartData: {
                type: Object,
                required: true
            },
            chartOptions: {
                type: Object,
                default: ()=>{}
            },
            datasetIdKey: {
                type: String,
                default: 'label'
            },
            chartId: {
                type: String,
                default: chartId
            },
            width: {
                type: Number,
                default: 400
            },
            height: {
                type: Number,
                default: 400
            },
            cssClasses: {
                type: String,
                default: ''
            },
            styles: {
                type: Object,
                default: ()=>{}
            },
            plugins: {
                type: Object,
                default: ()=>{}
            }
        },
        data () {
            return {
                _chart: null
            };
        },
        created () {
            chart_js.Chart.register(chartController);
        },
        mounted () {
            if ('datasets' in this.chartData && this.chartData.datasets.length > 0) {
                chartCreate(this.renderChart, this.chartData, this.chartOptions);
                this.$emit(ChartEmits.ChartRendered);
            }
        },
        watch: {
            chartData (newValue, oldValue) {
                this.chartDataHandler(newValue, oldValue);
            }
        },
        methods: {
            renderChart (data, options) {
                if (this.$data._chart !== null) {
                    chartDestroy(this.$data._chart);
                    this.$emit(ChartEmits.ChartDestroyed);
                }
                if (!this.$refs.canvas) {
                    throw new Error(templateError);
                } else {
                    const chartData = getChartData(data, this.datasetIdKey);
                    const canvasEl2DContext = this.$refs.canvas.getContext('2d');
                    if (canvasEl2DContext !== null) {
                        this.$data._chart = new chart_js.Chart(canvasEl2DContext, {
                            type: chartType,
                            data: chartData,
                            options: getChartOptions(options, this.plugins)
                        });
                    }
                }
            },
            chartDataHandler (newValue, oldValue) {
                const newData = {
                    ...newValue
                };
                const oldData = {
                    ...oldValue
                };
                if (Object.keys(oldData).length > 0) {
                    const chart = this.$data._chart;
                    const isEqualLabelsAndDatasetsLength = compareData(newData, oldData);
                    if (isEqualLabelsAndDatasetsLength && chart !== null) {
                        setChartDatasets(chart.data, newData, this.datasetIdKey);
                        if (newData.labels !== undefined) {
                            setChartLabels(chart, newData.labels);
                            this.$emit(ChartEmits.LabelsUpdated);
                        }
                        chartUpdate(chart);
                        this.$emit(ChartEmits.ChartUpdated);
                    } else {
                        if (chart !== null) {
                            chartDestroy(chart);
                            this.$emit(ChartEmits.ChartDestroyed);
                        }
                        chartCreate(this.renderChart, this.chartData, this.chartOptions);
                        this.$emit(ChartEmits.ChartRendered);
                    }
                } else {
                    if (this.$data._chart !== null) {
                        chartDestroy(this.$data._chart);
                        this.$emit(ChartEmits.ChartDestroyed);
                    }
                    chartCreate(this.renderChart, this.chartData, this.chartOptions);
                    this.$emit(ChartEmits.ChartRendered);
                }
            }
        },
        beforeDestroy () {
            if (this.$data._chart !== null) {
                chartDestroy(this.$data._chart);
                this.$emit(ChartEmits.ChartDestroyed);
            }
        },
        render: function(createElement) {
            return createElement('div', {
                style: this.styles,
                class: this.cssClasses
            }, [
                createElement('canvas', {
                    attrs: {
                        id: this.chartId,
                        width: this.width,
                        height: this.height
                    },
                    ref: 'canvas'
                })
            ]);
        }
    };
}
const Bar = /* #__PURE__ */ generateChart('bar-chart', 'bar', chart_js.BarController);
const Doughnut = /* #__PURE__ */ generateChart('doughnut-chart', 'doughnut', chart_js.DoughnutController);
const Line = /* #__PURE__ */ generateChart('line-chart', 'line', chart_js.LineController);
const Pie = /* #__PURE__ */ generateChart('pie-chart', 'pie', chart_js.PieController);
const PolarArea = /* #__PURE__ */ generateChart('polar-chart', 'polarArea', chart_js.PolarAreaController);
const Radar = /* #__PURE__ */ generateChart('radar-chart', 'radar', chart_js.RadarController);
const Bubble = /* #__PURE__ */ generateChart('bubble-chart', 'bubble', chart_js.BubbleController);
const Scatter = /* #__PURE__ */ generateChart('scatter-chart', 'scatter', chart_js.ScatterController);

exports.Bar = Bar;
exports.Bubble = Bubble;
exports.Doughnut = Doughnut;
exports.Line = Line;
exports.Pie = Pie;
exports.PolarArea = PolarArea;
exports.Radar = Radar;
exports.Scatter = Scatter;
//# sourceMappingURL=index.cjs.map