webwriter-chart
Version:
ww-chart is an interactive data visualization widget for the WebWriter tool that implements various charts and diagrams for static and exploratory data visualization.
59 lines (58 loc) • 2.95 kB
JavaScript
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 { property } from "lit/decorators.js";
import { converter } from "../../functions";
import { SharedTestStateMixin } from "../../state";
import { LitElementWw } from "@webwriter/lit";
/**WebWriter API: Minimal base class for a widget implemented in Lit. Implements the core properties required by WebWriter, initializes the component when loaded and provides a Scoped Custom Element Registry (@open-wc/scoped-elements) to help with namespace conflicts when using other components in this widget. */
export class GenericChart extends SharedTestStateMixin(LitElementWw) {
#datasets_accessor_storage = {};
get datasets() { return this.#datasets_accessor_storage; }
set datasets(value) { this.#datasets_accessor_storage = value; }
#label_accessor_storage = "";
get label() { return this.#label_accessor_storage; }
set label(value) { this.#label_accessor_storage = value; }
#options_accessor_storage = {};
get options() { return this.#options_accessor_storage; }
set options(value) { this.#options_accessor_storage = value; }
#hide_excat_values_accessor_storage = false;
get hide_excat_values() { return this.#hide_excat_values_accessor_storage; }
set hide_excat_values(value) { this.#hide_excat_values_accessor_storage = value; }
exportCanvasContent() {
var canvas = this.shadowRoot?.getElementById("chart-canvas");
if (!canvas)
return "";
var ctx = canvas.getContext("2d");
if (!ctx)
return "";
return canvas.toDataURL();
}
render() {
return html `<canvas id="chart-canvas"></canvas>`;
}
//TODO: see fix This ChartTypeRegistry
constructor(optionsDefinition) {
super();
this.sharedState.chart.options = Object.entries(optionsDefinition).reduce((acc, [key, value]) => {
acc[key] = this.sharedState.chart.options[key] ?? value.default;
return acc;
}, {});
}
}
__decorate([
property({ type: Array, converter })
], GenericChart.prototype, "datasets", null);
__decorate([
property({ type: String })
], GenericChart.prototype, "label", null);
__decorate([
property({ type: Object, converter })
], GenericChart.prototype, "options", null);
__decorate([
property({ type: Boolean, converter })
], GenericChart.prototype, "hide_excat_values", null);