webwriter-chart/types/helper-components/BarChart.js

ww-chart is an interactive data visualization widget for the WebWriter tool that implements various charts and diagrams for static and exploratory data visualization.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html } from "lit";
import { customElement, property } from "lit/decorators.js";
import style from "./barchart.style";
import Chart from "chart.js/auto";
import { addAlphaToRGB, converter } from "../functions";
import { LitElementWw } from "@webwriter/lit";
let BarChart = class BarChart extends LitElementWw {
    #data_accessor_storage = {};
    get data() { return this.#data_accessor_storage; }
    set data(value) { this.#data_accessor_storage = value; }
    #type_accessor_storage = "bar";
    get type() { return this.#type_accessor_storage; }
    set type(value) { this.#type_accessor_storage = value; }
    #label_accessor_storage = "";
    get label() { return this.#label_accessor_storage; }
    set label(value) { this.#label_accessor_storage = value; }
    #filled_accessor_storage = false;
    get filled() { return this.#filled_accessor_storage; }
    set filled(value) { this.#filled_accessor_storage = value; }
    render() {
        console.log({ data: this.data, filled: this.filled });
        return html `<canvas id="myChart" />`;
    }
    firstUpdated() {
        const values = Object.values(this.data).map((val) => val.value);
        const backgroundColor = Object.values(this.data).map((val) => addAlphaToRGB(val.color, this.filled ? 1 : 0.2));
        const borderColor = Object.values(this.data).map((val) => addAlphaToRGB(val.color, 1));
        if (this.type === "line") {
            backgroundColor.length = 1;
            borderColor.length = 1;
        }
        let options = {
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        };
        if (this.type === "pie" ||
            this.type === "doughnut" ||
            this.type === "polarArea")
            options = {};
        const canvas = (this.shadowRoot?.getElementById("myChart") ||
            null);
        if (!canvas)
            return console.error("No canvas found");
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return console.error("No context found");
        new Chart(ctx, {
            type: this.type,
            data: {
                labels: Object.values(this.data).map((val) => val.label),
                datasets: [
                    {
                        label: this.label,
                        data: values,
                        backgroundColor,
                        borderColor,
                        borderWidth: 1,
                    },
                ],
            },
            options,
        });
    }
    static styles = style;
};
__decorate([
    property({ type: "ChartData", converter })
], BarChart.prototype, "data", null);
__decorate([
    property({ type: String })
], BarChart.prototype, "type", null);
__decorate([
    property({ type: String })
], BarChart.prototype, "label", null);
__decorate([
    property({ type: Boolean, converter })
], BarChart.prototype, "filled", null);
BarChart = __decorate([
    customElement("bar-chart")
], BarChart);
export { BarChart };