webwriter-chart/types/helper-components/Charts/Radar/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 { addAlphaToRGB } from "../../../functions";
import { ChartHelper, getContext, updateData } from "../functions";
import { GenericChart } from "../GenericChart";
import { OptionDefinition } from "./definition";
let RadarChart = class RadarChart extends GenericChart {
    constructor() {
        super(OptionDefinition);
    }
    #chartHelper_accessor_storage;
    get chartHelper() { return this.#chartHelper_accessor_storage; }
    set chartHelper(value) { this.#chartHelper_accessor_storage = value; }
    //TODO: This is exactly the same as in Doughnut.ts
    updated() {
        if (!this.chartHelper)
            return;
        const datasets = this.prepareDataset();
        this.chartHelper.setTitle(this.label);
        this.chartHelper.setLineSmooth(this.options.smoothTheLine);
        this.chartHelper.setXLabels(this.datasets.labels);
        updateData(datasets, this.chartHelper.chart.data.datasets);
        this.chartHelper.update();
    }
    //TODO: besides the "radar", its exactly the same as in Doughnut.ts
    firstUpdated() {
        const datasets = this.prepareDataset();
        const ctx = getContext(this);
        const chart = new Chart(ctx, {
            type: "radar",
            data: {
                labels: this.datasets.labels,
                datasets: datasets,
            },
        });
        this.chartHelper = new ChartHelper("radar", chart);
        this.chartHelper.setTitle(this.label);
        this.chartHelper.setLineSmooth(this.options.smoothTheLine);
        this.chartHelper.update();
    }
    prepareDataset() {
        const result = this.datasets.sets.map((dataset) => {
            return {
                label: dataset.name,
                data: dataset.data,
                backgroundColor: this.options.fill
                    ? dataset.colors.map(() => dataset.color)
                    : dataset.colors.map(() => addAlphaToRGB(dataset.color, 0.2)),
                pointBackgroundColor: this.options.pointColors
                    ? dataset.colors
                    : dataset.colors.map(() => dataset.color),
                borderColor: dataset.color,
                borderWidth: this.options.borderWidth ?? 1,
                pointBorderColor: "transparent",
                pointRadius: this.options.pointRadius,
            };
        });
        return result;
    }
};
__decorate([
    state()
], RadarChart.prototype, "chartHelper", null);
RadarChart = __decorate([
    customElement("radar-chart")
], RadarChart);
export { RadarChart };