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.
95 lines (94 loc) • 3.11 kB
JavaScript
export function getContext(this_, canvasId = "chart-canvas") {
const canvas = (this_.shadowRoot?.getElementById(canvasId) ||
null);
if (!canvas)
throw new Error("No canvas found");
const ctx = canvas.getContext("2d");
if (!ctx)
throw new Error("No context found");
return ctx;
}
export const getLabels = (data) => Object.values(data).map((val) => val.label);
export const getData = (data) => Object.values(data).map((val) => val.value);
export function updateData(sources, targets) {
if (sources.length < targets.length) {
targets.splice(sources.length, targets.length - sources.length);
}
if (sources.length > targets.length) {
for (let i = targets.length; i < sources.length; i++) {
targets.push(sources[i]);
}
}
targets.forEach((target, i) => {
Object.keys(sources[i]).forEach((key) => (target[key] = sources[i][key]));
});
}
//TODO: fix ChartTypeRegistry
export class ChartHelper {
chart;
chartType;
constructor(type, chart) {
this.chart = chart;
this.chartType = type;
console.log(this.chartType);
}
setTitle(title) {
if (!this.chart.options.plugins)
this.chart.options.plugins = {};
if (!this.chart.options.plugins.title)
this.chart.options.plugins.title = {};
this.chart.options.plugins.title.text = title;
this.chart.options.plugins.title.display = title !== "";
}
setYScales(dynamicSize, scaleMin, scaleMax, stepSize) {
if (!this.chart.options.scales)
this.chart.options.scales = {};
if (!this.chart.options.scales.y)
this.chart.options.scales.y = {};
this.chart.options.scales.y = {
min: undefined,
max: undefined,
};
if (!dynamicSize)
this.chart.options.scales.y = {
min: scaleMin,
max: scaleMax,
ticks: {
stepSize: stepSize,
},
};
// @ts-ignore
if (this.chart.options.scales.y.beginAtZero)
// @ts-ignore
this.chart.options.scales.y.beginAtZero = dynamicSize;
}
setIndexAxis(indexAxis) {
this.chart.options.indexAxis = indexAxis;
}
setXLabels(labels) {
this.chart.data.labels = labels;
}
setHideExactValues(val) {
console.log({ t: "hideExactValues", v: val });
if (!val)
this.chart.options.events = [
"mousemove",
"mouseout",
"click",
"touchstart",
"touchmove",
];
else
this.chart.options.events = [];
}
setLineSmooth(isLineSmooth) {
if (!this.chart.options.elements)
this.chart.options.elements = {};
if (!this.chart.options.elements.line)
this.chart.options.elements.line = {};
this.chart.options.elements.line.tension = isLineSmooth ? 0.4 : 0;
}
update() {
this.chart.update();
}
}