webwriter-chart/types/helper-components/Charts/Bar/chart.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 { customElement, state } from "lit/decorators.js";
import Chart from "chart.js/auto";
import { ChartHelper, getContext, updateData } from "../functions";
import { GenericChart } from "../GenericChart";
import { OptionDefinition } from "./definition";
import { addAlphaToRGB } from "../../../functions";
let BarChart = class BarChart extends GenericChart {
    constructor() {
        super(OptionDefinition);
    }
    #chartHelper_accessor_storage;
    get chartHelper() { return this.#chartHelper_accessor_storage; }
    set chartHelper(value) { this.#chartHelper_accessor_storage = value; }
    updated() {
        if (!this.chartHelper)
            return;
        const datasets = this.prepareDataset();
        this.chartHelper.setTitle(this.label);
        this.chartHelper.setYScales(this.options.dynamicSize, this.options.scaleMin, this.options.scaleMax, this.options.scaleStepSize);
        this.chartHelper.setHideExactValues(this.hide_excat_values);
        this.chartHelper.setXLabels(this.datasets.labels);
        updateData(datasets, this.chartHelper.chart.data.datasets);
        this.chartHelper.update();
    }
    firstUpdated() {
        const datasets = this.prepareDataset();
        const ctx = getContext(this);
        const chart = new Chart(ctx, {
            type: "bar",
            data: {
                labels: this.datasets.labels,
                datasets: datasets,
            },
        });
        this.chartHelper = new ChartHelper("bar", chart);
        this.chartHelper.setTitle(this.label);
        this.chartHelper.setYScales(this.options.dynamicSize, this.options.scaleMin, this.options.scaleMax, this.options.scaleStepSize);
        this.chartHelper.setHideExactValues(this.hide_excat_values);
        //@ts-ignore
        window.chart = this.chartHelper;
        this.chartHelper.update();
    }
    prepareDataset() {
        const result = this.datasets.sets.map((dataset) => {
            return {
                label: dataset.name,
                data: dataset.data,
                backgroundColor: this.options.individualColors
                    ? dataset.colors.map((color) => addAlphaToRGB(color, this.options.filled ? 1 : 0.2))
                    : dataset.colors.map(() => addAlphaToRGB(dataset.color, this.options.filled ? 1 : 0.2)),
                borderColor: this.options.individualColors
                    ? dataset.colors.map((color) => color)
                    : dataset.colors.map(() => dataset.color),
                borderWidth: this.options.borderWidth ?? 1,
                borderRadius: this.options.borderRadius ?? 0,
            };
        });
        return result;
    }
};
__decorate([
    state()
], BarChart.prototype, "chartHelper", null);
BarChart = __decorate([
    customElement("bar-chart")
], BarChart);
export { BarChart };