import { Chart } from "chart.js";
import ChartDeferred from "chartjs-plugin-deferred";
import { h, Host } from "@stencil/core";
import { chartCfg, dataSetProps } from "./pn-chart-helper";
export class PnChart {
    constructor() {
        this.labels = null;
        this.dataSets = null;
        this.dataChartType = 'doughnut';
        this.myChartCtxRef = undefined;
    }
    element;
    myChart;
    parsedDataSets;
    parsedLabels;
    parsedDatasetWithDataParsed;
    data;
    numberOfSetsGreaterThanOne;
    dataChangeHandler() {
        this.parsedDataSets = JSON.parse(this.dataSets);
        this.numberOfSetsGreaterThanOne = this.parsedDataSets.length > 1;
        this.parsedDatasetWithDataParsed = this.parsedDataSets.map(set => dataSetProps(set, this.dataChartType));
        this.data = {
            ...this.data,
            datasets: this.parsedDatasetWithDataParsed,
        };
    }
    labelsChangeHandler() {
        this.parsedLabels = JSON.parse(this.labels);
        this.data = {
            ...this.data,
            labels: this.parsedLabels,
        };
    }
    componentWillLoad() {
        this.dataChangeHandler();
        this.labelsChangeHandler();
    }
    componentDidLoad() {
        Chart.plugins.register(ChartDeferred);
        this.myChartCtxRef = this.element.querySelector('#chart-canvas');
        this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data, this.numberOfSetsGreaterThanOne));
    }
    render() {
        return (h(Host, { key: '9f34e03c80c36bbe89f2407290a4d343164ac71f' }, h("div", { key: '7f61a11f9685fdacf6e984f8d4d4a907a17f4a43', class: "chart-wrapper" }, h("canvas", { key: '1483c145b02848fb2bd5e06efd9261eede6eafb0', id: "chart-canvas", class: "pnChart" }))));
    }
    static get is() { return "pn-chart"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-chart.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-chart.css"]
        };
    }
    static get properties() {
        return {
            "labels": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "labels",
                "reflect": false,
                "defaultValue": "null"
            },
            "dataSets": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "data-sets",
                "reflect": false,
                "defaultValue": "null"
            },
            "dataChartType": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "data-chart-type",
                "reflect": false,
                "defaultValue": "'doughnut'"
            }
        };
    }
    static get states() {
        return {
            "myChartCtxRef": {}
        };
    }
    static get elementRef() { return "element"; }
    static get watchers() {
        return [{
                "propName": "dataSets",
                "methodName": "dataChangeHandler"
            }, {
                "propName": "labels",
                "methodName": "labelsChangeHandler"
            }];
    }
}
//# sourceMappingURL=pn-chart.js.map
