chart_js is not defined

[UZApocalyps]

Après avoir installer les librairies chartJS, il y'a une erreur dans le fichier de sortie.

De plus si on rajoute des plugins comme le zoom ou la décimation l'erreur se transforme en "unexpected token var".

Mon package JSON
{ "dependencies": { "chart.js": "^4.4.0", "chartjs-adapter-date-fns": "^3.0.0", "chartjs-plugin-annotation": "^3.0.1", "chartjs-plugin-zoom": "^2.0.1", "date-fns": "^2.30.0" } }

[Maxime Bétrisey]

Can you provide a minimal version of your project or at least a file example where you import ChartJs inside component so that I can test it

[UZApocalyps]

Sure @max529

`import { de } from 'date-fns/locale';
import { Chart, ChartConfiguration } from 'chart.js';

export class Graph extends Aventus.WebComponent implements Aventus.DefaultComponent {

//#region static

//#endregion


//#region props

//#endregion


//#region variables

@ViewElement()
protected graph: HTMLCanvasElement;

@ViewElement()
protected graphcontainer: HTMLDivElement;

private chart: any;

private nameDataset: any[] = [];
//#endregion


//#region constructor

//#endregion


//#region methods
public createGraph() {

    let ctx = this.graph.getContext('2d');
    const config: ChartConfiguration = {
        type: "line",
        data: {
            datasets: [],
        },
        options: {
            normalized: true,
            parsing: false,
            datasets: {
                line: {
                    indexAxis: 'x'
                }
            },
            scales: {

                x: {
                    type: 'time',
                    adapters: {
                        date: {
                            locale: de
                        }
                    },
                }
            },
            plugins: {
                decimation: {
                    enabled: true,
                    algorithm: 'lttb',
                    samples: 100,
                    threshold: 10
                }
            }
        }
    };

    /*
        zoom: {
            pan: {
                enabled: true,
                modifierKey: 'ctrl',
            },
            zoom: {
                drag: {
                    enabled: true,
                    backgroundColor: "rgba(225,225,225,0.3)"
                },
                mode: 'x',
                onZoomComplete: (c) => {
                    //let newSet = this.filterDatasets(this.chart.data.datasets, this.chart.data.labels, c.chart.scales.x.ticks[0].label, c.chart.scales.x.ticks[c.chart.scales.x.ticks.length - 1].label);
                    //this.updateChart(newSet.sets, newSet.labels);
                    //  console.log(newSet);
                }
            },
            
        },*/

    this.chart = new Chart(ctx, config);
}


private filterDatasets(datasets, labels, start, end) {
    start = this.strToDate(start);
    end = this.strToDate(end);
    let newsets = [];
    let newlabels = [];
    for(let d of datasets) {
        let newData = [];
        for(let i = 0; i < d.data.length; i++) {
            if(this.strToDate(labels[i]) >= start && this.strToDate(labels[i]) <= end) {
                console.log("pushing");
                newData.push(d.data[i]);
                newlabels.push(labels[i]);
            }
        }
        newsets.push({ label: d.label, data: newData, borderColor: d.borderColor, backgroundColor: d.backgroundColor });
    }
    return { sets: newsets, labels: newlabels };
}
public addTimeLine(label: []) {
    //add timeline to graph
    let lbls = [];
    for(let l of label) {
        lbls.push(this.strToDate(l).toLocaleString());
    }
    console.log("ici", lbls);
    this.chart.data.labels = lbls;
    this.chart.update();

}

public addDataset(name: string, dataset: {}) {
    //add dataset to graph
    this.chart.data.datasets.push(dataset);
    this.chart.update();
    console.log(name);
    this.nameDataset.push({ name: name, dataset: dataset });
}

public removeDataset(name: string) {
    console.log(this.nameDataset, name);
    //find all graph with name 
    let sets = this.chart.data.datasets.filter((set) => set.name == name);
    console.log(sets);
    this.chart.data.datasets = this.chart.data.datasets.filter((set) => set.name != name);
    this.chart.update();
}

private strToDate(dtStr) {
    let dt = dtStr.split(" ");
    let d = dt[0].split("-");
    let t = d[2].split(":");
    return new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]), parseInt(t[0]), parseInt(t[1]), parseInt(t[2]));
}



//#endregion

}`