wehub-resource-sync
1678 lines
44 KiB
TypeScript
1678 lines
44 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import Chart from "chart.js/auto";
|
|
import type {
|
|
ChartConfiguration,
|
|
ChartDataset,
|
|
ChartOptions,
|
|
Plugin,
|
|
} from "chart.js";
|
|
import { Group, Image as KonvaImage, Rect } from "react-konva";
|
|
import {
|
|
ellipsizeChartText,
|
|
markdownToPlainChartText,
|
|
normalizeChartTypeName,
|
|
} from "@/components/slide-editor/charts/chart-data";
|
|
import type { DataLabelPosition } from "@/components/slide-editor/types";
|
|
import {
|
|
asRecord,
|
|
clamp,
|
|
isRecord,
|
|
readArray,
|
|
readBoolean,
|
|
readNumber,
|
|
readString,
|
|
withHash,
|
|
type RawElement,
|
|
} from "@/components/slide-editor/model/core";
|
|
|
|
type RawChartPoint = {
|
|
x: number;
|
|
y: number;
|
|
r?: number;
|
|
};
|
|
|
|
type RawChartDataset = {
|
|
categoryColors?: string[];
|
|
color: string;
|
|
name: string;
|
|
points: RawChartPoint[];
|
|
values: number[];
|
|
};
|
|
|
|
type ChartJsKind = {
|
|
area: boolean;
|
|
chartJsType:
|
|
| "bar"
|
|
| "bubble"
|
|
| "doughnut"
|
|
| "line"
|
|
| "pie"
|
|
| "polarArea"
|
|
| "radar"
|
|
| "scatter";
|
|
horizontal: boolean;
|
|
pieLike: boolean;
|
|
stacked: boolean;
|
|
};
|
|
|
|
type LabelBounds = {
|
|
bottom: number;
|
|
left: number;
|
|
right: number;
|
|
top: number;
|
|
};
|
|
|
|
type LineSegment = {
|
|
end: { x: number; y: number };
|
|
start: { x: number; y: number };
|
|
};
|
|
|
|
const DEFAULT_CHART_COLORS = [
|
|
"#7F22FE",
|
|
"#155DFC",
|
|
"#F59E0B",
|
|
"#12B76A",
|
|
"#EF4444",
|
|
"#06B6D4",
|
|
"#8B5CF6",
|
|
"#64748B",
|
|
];
|
|
|
|
const CHART_FONT_FAMILY = "Inter, Arial, sans-serif";
|
|
const DATA_LABEL_POSITIONS = new Set(["base", "mid", "top", "outside"]);
|
|
const CHART_TITLE_DISPLAY_MAX_LENGTH = 44;
|
|
const CHART_AXIS_TITLE_DISPLAY_MAX_LENGTH = 36;
|
|
const CHART_AXIS_TICK_DISPLAY_MAX_LENGTH = 22;
|
|
const CHART_LEGEND_DISPLAY_MAX_LENGTH = 28;
|
|
|
|
export function TemplateV2ChartJsElement({
|
|
element,
|
|
height,
|
|
interactive,
|
|
width,
|
|
}: {
|
|
element: RawElement;
|
|
height: number;
|
|
interactive: boolean;
|
|
width: number;
|
|
}) {
|
|
const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
|
|
const logicalWidth = Math.max(1, Math.round(width));
|
|
const logicalHeight = Math.max(1, Math.round(height));
|
|
const pixelRatio =
|
|
typeof window === "undefined"
|
|
? 1
|
|
: clamp(window.devicePixelRatio || 1, 1, interactive ? 2 : 3);
|
|
const renderSignature = useMemo(
|
|
() =>
|
|
chartRenderSignature(
|
|
element,
|
|
logicalWidth,
|
|
logicalHeight,
|
|
pixelRatio,
|
|
),
|
|
[element, logicalHeight, logicalWidth, pixelRatio],
|
|
);
|
|
const renderInput = useMemo(
|
|
() => ({
|
|
element,
|
|
logicalHeight,
|
|
logicalWidth,
|
|
pixelRatio,
|
|
renderSignature,
|
|
}),
|
|
[element, logicalHeight, logicalWidth, pixelRatio, renderSignature],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (typeof document === "undefined") return;
|
|
|
|
const nextCanvas = document.createElement("canvas");
|
|
nextCanvas.width = renderInput.logicalWidth;
|
|
nextCanvas.height = renderInput.logicalHeight;
|
|
nextCanvas.style.width = `${renderInput.logicalWidth}px`;
|
|
nextCanvas.style.height = `${renderInput.logicalHeight}px`;
|
|
|
|
const config = createChartJsConfig(
|
|
renderInput.element,
|
|
renderInput.logicalHeight,
|
|
renderInput.pixelRatio,
|
|
);
|
|
|
|
let chart: Chart | null = null;
|
|
try {
|
|
chart = new Chart(nextCanvas, config);
|
|
chart.update("none");
|
|
setCanvas(nextCanvas);
|
|
} catch (error) {
|
|
console.error("Failed to render template v2 Chart.js chart:", error);
|
|
setCanvas(null);
|
|
}
|
|
|
|
return () => {
|
|
chart?.destroy();
|
|
};
|
|
}, [renderInput]);
|
|
|
|
return (
|
|
<Group listening={interactive}>
|
|
<Rect width={width} height={height} fill="rgba(0,0,0,0)" />
|
|
{canvas ? (
|
|
<KonvaImage
|
|
image={canvas}
|
|
listening={false}
|
|
perfectDrawEnabled={false}
|
|
shadowForStrokeEnabled={false}
|
|
width={width}
|
|
height={height}
|
|
/>
|
|
) : null}
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
function chartRenderSignature(
|
|
element: RawElement,
|
|
width: number,
|
|
height: number,
|
|
pixelRatio: number,
|
|
) {
|
|
return stableChartStringify({
|
|
axis_color: element.axis_color,
|
|
axisColor: element.axisColor,
|
|
categories: element.categories,
|
|
chart_type: element.chart_type,
|
|
chartType: element.chartType,
|
|
color: element.color,
|
|
colors: element.colors,
|
|
data: element.data,
|
|
data_labels: element.data_labels,
|
|
dataLabels: element.dataLabels,
|
|
grid_color: element.grid_color,
|
|
gridColor: element.gridColor,
|
|
height,
|
|
legend: element.legend,
|
|
pixelRatio,
|
|
series: element.series,
|
|
showLegend: element.showLegend,
|
|
text_color: element.text_color,
|
|
textColor: element.textColor,
|
|
title: element.title,
|
|
title_color: element.title_color,
|
|
titleColor: element.titleColor,
|
|
width,
|
|
x_axis: element.x_axis,
|
|
x_axis_grid: element.x_axis_grid,
|
|
x_axis_title: element.x_axis_title,
|
|
xAxis: element.xAxis,
|
|
xAxisGrid: element.xAxisGrid,
|
|
xAxisTitle: element.xAxisTitle,
|
|
y_axis: element.y_axis,
|
|
y_axis_grid: element.y_axis_grid,
|
|
y_axis_title: element.y_axis_title,
|
|
yAxis: element.yAxis,
|
|
yAxisGrid: element.yAxisGrid,
|
|
yAxisTitle: element.yAxisTitle,
|
|
});
|
|
}
|
|
|
|
function stableChartStringify(value: unknown) {
|
|
return JSON.stringify(value, (_key, currentValue) => {
|
|
if (!isRecord(currentValue)) return currentValue;
|
|
return Object.keys(currentValue)
|
|
.sort()
|
|
.reduce<Record<string, unknown>>((result, key) => {
|
|
result[key] = currentValue[key];
|
|
return result;
|
|
}, {});
|
|
});
|
|
}
|
|
|
|
function createChartJsConfig(
|
|
element: RawElement,
|
|
height: number,
|
|
pixelRatio: number,
|
|
): ChartConfiguration {
|
|
const kind = rawChartJsKind(element.chart_type ?? element.chartType);
|
|
const primaryColor = safeChartColor(
|
|
readString(element.color),
|
|
DEFAULT_CHART_COLORS[0],
|
|
);
|
|
const sourceColors = readArray(element.colors).map((value) =>
|
|
safeChartColor(String(value)),
|
|
);
|
|
const rawColors = sourceColors.length > 0 ? sourceColors : [primaryColor];
|
|
const categories = rawChartCategories(element, kind.pieLike);
|
|
const datasets = rawChartDatasets(
|
|
element,
|
|
categories,
|
|
rawColors,
|
|
kind.pieLike,
|
|
);
|
|
const axisColor = safeChartColor(
|
|
readString(element.axis_color ?? element.axisColor),
|
|
"#98A2B3",
|
|
);
|
|
const gridColor = safeChartColor(
|
|
readString(element.grid_color ?? element.gridColor),
|
|
axisColor,
|
|
);
|
|
const textColor = safeChartColor(
|
|
readString(element.text_color ?? element.textColor),
|
|
"#475467",
|
|
);
|
|
const titleColor = safeChartColor(
|
|
readString(element.title_color ?? element.titleColor),
|
|
"#344054",
|
|
);
|
|
const title = markdownToPlainChartText(readString(element.title) ?? "");
|
|
const dataLabelPosition = readDataLabelPosition(
|
|
hasOwn(element, "data_labels") ? element.data_labels : element.dataLabels,
|
|
);
|
|
const showValues = dataLabelPosition != null;
|
|
const showXAxisGrid =
|
|
readBoolean(element.x_axis_grid ?? element.xAxisGrid) ?? true;
|
|
const showYAxisGrid =
|
|
readBoolean(element.y_axis_grid ?? element.yAxisGrid) ?? true;
|
|
const showXAxis = readBoolean(element.x_axis ?? element.xAxis) ?? true;
|
|
const showYAxis = readBoolean(element.y_axis ?? element.yAxis) ?? true;
|
|
const xAxisTitle =
|
|
markdownToPlainChartText(
|
|
readString(
|
|
"x_axis_title" in element
|
|
? element.x_axis_title
|
|
: element.xAxisTitle,
|
|
) ?? "",
|
|
);
|
|
const yAxisTitle =
|
|
markdownToPlainChartText(
|
|
readString(
|
|
"y_axis_title" in element
|
|
? element.y_axis_title
|
|
: element.yAxisTitle,
|
|
) ?? "",
|
|
);
|
|
const fontSize = clamp(height * 0.033, 9, 18);
|
|
const titleFontSize = clamp(height * 0.044, 11, 26);
|
|
const valueFontSize = clamp(height * 0.029, 8, 15);
|
|
const chartDatasets = createChartJsDatasets(kind, datasets);
|
|
const autoShowLegend =
|
|
kind.pieLike ||
|
|
datasets.length > 1 ||
|
|
Boolean(datasets[0]?.name && datasets[0].name !== "Series 1");
|
|
const showLegend =
|
|
readBoolean(
|
|
"legend" in element ? element.legend : element.showLegend,
|
|
) ?? autoShowLegend;
|
|
|
|
return {
|
|
type: kind.chartJsType,
|
|
data: {
|
|
labels: categories.map((category) => displayChartCategoryLabel(category)),
|
|
datasets: chartDatasets,
|
|
},
|
|
options: {
|
|
animation: false,
|
|
color: textColor,
|
|
devicePixelRatio: pixelRatio,
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
},
|
|
indexAxis: kind.horizontal ? "y" : "x",
|
|
layout: {
|
|
padding: kind.pieLike
|
|
? { top: 16, right: 20, bottom: 12, left: 20 }
|
|
: { top: 12, right: 22, bottom: 8, left: 12 },
|
|
},
|
|
maintainAspectRatio: false,
|
|
normalized: true,
|
|
plugins: {
|
|
legend: showLegend ? {
|
|
display: showLegend,
|
|
labels: {
|
|
boxHeight: Math.max(8, fontSize * 0.8),
|
|
boxWidth: Math.max(8, fontSize * 0.8),
|
|
color: textColor,
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: fontSize,
|
|
weight: 600,
|
|
},
|
|
padding: Math.max(8, fontSize),
|
|
usePointStyle: true,
|
|
},
|
|
position: "bottom",
|
|
} : {
|
|
display: false,
|
|
},
|
|
title: {
|
|
color: titleColor,
|
|
display: Boolean(title),
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: titleFontSize,
|
|
weight: 700,
|
|
},
|
|
padding: {
|
|
bottom: Math.max(16, titleFontSize * 0.8),
|
|
top: 0,
|
|
},
|
|
text: title
|
|
.split(/\r?\n/)
|
|
.filter(Boolean)
|
|
.map((line) =>
|
|
ellipsizeChartText(line, CHART_TITLE_DISPLAY_MAX_LENGTH),
|
|
),
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
responsive: false,
|
|
scales: chartScales({
|
|
axisColor,
|
|
fontSize,
|
|
gridColor,
|
|
kind,
|
|
showXAxis,
|
|
showXAxisGrid,
|
|
showYAxis,
|
|
showYAxisGrid,
|
|
xAxisTitle,
|
|
yAxisTitle,
|
|
}),
|
|
} as ChartOptions,
|
|
plugins: [
|
|
chartValueLabelsPlugin({
|
|
enabled: showValues,
|
|
fontSize: valueFontSize,
|
|
horizontal: kind.horizontal,
|
|
outsideColor: textColor,
|
|
position: dataLabelPosition ?? "top",
|
|
}),
|
|
],
|
|
};
|
|
}
|
|
|
|
function createChartJsDatasets(
|
|
kind: ChartJsKind,
|
|
datasets: RawChartDataset[],
|
|
): ChartDataset[] {
|
|
if (kind.chartJsType === "pie" || kind.chartJsType === "doughnut") {
|
|
const dataset = datasets[0] ?? emptyDataset();
|
|
return [
|
|
{
|
|
backgroundColor: categoryColors(dataset),
|
|
borderColor: "#FFFFFF",
|
|
borderWidth: 1,
|
|
data: dataset.values,
|
|
hoverOffset: 0,
|
|
label: displayChartLegendLabel(dataset.name),
|
|
},
|
|
];
|
|
}
|
|
|
|
if (kind.chartJsType === "polarArea") {
|
|
const sourceDatasets = datasets.length > 0 ? datasets : [emptyDataset()];
|
|
return sourceDatasets.map((dataset) => {
|
|
const colors =
|
|
sourceDatasets.length === 1
|
|
? categoryColors(dataset)
|
|
: dataset.values.map(() => dataset.color);
|
|
return {
|
|
backgroundColor: colors.map((color) => withAlpha(color, 0.78)),
|
|
borderColor: colors,
|
|
borderWidth: 1,
|
|
data: dataset.values,
|
|
label: displayChartLegendLabel(dataset.name),
|
|
};
|
|
});
|
|
}
|
|
|
|
if (kind.chartJsType === "scatter" || kind.chartJsType === "bubble") {
|
|
return datasets.map((dataset) => {
|
|
const colors =
|
|
datasets.length === 1
|
|
? categoryColors(dataset)
|
|
: [withHash(dataset.color) ?? "#7F22FE"];
|
|
return {
|
|
backgroundColor: colors.map((color) => withAlpha(color, 0.78)),
|
|
borderColor: colors,
|
|
borderWidth: 2,
|
|
data:
|
|
kind.chartJsType === "bubble"
|
|
? dataset.points.map((point) => ({ ...point, r: point.r ?? 6 }))
|
|
: dataset.points.map(({ x, y }) => ({ x, y })),
|
|
label: displayChartLegendLabel(dataset.name),
|
|
pointRadius: kind.chartJsType === "scatter" ? 4 : undefined,
|
|
pointHoverRadius: 4,
|
|
};
|
|
});
|
|
}
|
|
|
|
return datasets.map((dataset, index) => {
|
|
const color =
|
|
withHash(dataset.color) ??
|
|
DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
|
|
const isLineLike = kind.chartJsType === "line";
|
|
const datasetCategoryColors =
|
|
datasets.length === 1 && dataset.categoryColors?.length
|
|
? categoryColors(dataset)
|
|
: null;
|
|
|
|
return {
|
|
backgroundColor: kind.area
|
|
? withAlpha(color, 0.24)
|
|
: isLineLike
|
|
? color
|
|
: datasetCategoryColors
|
|
? datasetCategoryColors
|
|
: color,
|
|
borderColor: color,
|
|
borderRadius:
|
|
kind.chartJsType === "bar"
|
|
? kind.stacked
|
|
? 7
|
|
: (context: { raw: unknown }) =>
|
|
barBorderRadius(context.raw, kind.horizontal)
|
|
: undefined,
|
|
borderSkipped:
|
|
kind.chartJsType === "bar" && kind.stacked ? "start" : false,
|
|
borderWidth: isLineLike ? 3 : 0,
|
|
data: dataset.values,
|
|
fill: kind.area,
|
|
label: displayChartLegendLabel(dataset.name),
|
|
maxBarThickness: 62,
|
|
pointBackgroundColor: datasetCategoryColors ?? color,
|
|
pointBorderColor: "#FFFFFF",
|
|
pointBorderWidth: isLineLike ? 1.5 : 0,
|
|
pointRadius: isLineLike ? 3.5 : 0,
|
|
tension: isLineLike ? 0.35 : 0,
|
|
};
|
|
});
|
|
}
|
|
|
|
function barBorderRadius(rawValue: unknown, horizontal: boolean) {
|
|
const radius = 7;
|
|
const value = chartValue(rawValue);
|
|
|
|
if (horizontal) {
|
|
return value < 0
|
|
? {
|
|
bottomLeft: radius,
|
|
bottomRight: 0,
|
|
topLeft: radius,
|
|
topRight: 0,
|
|
}
|
|
: {
|
|
bottomLeft: 0,
|
|
bottomRight: radius,
|
|
topLeft: 0,
|
|
topRight: radius,
|
|
};
|
|
}
|
|
|
|
return value < 0
|
|
? {
|
|
bottomLeft: radius,
|
|
bottomRight: radius,
|
|
topLeft: 0,
|
|
topRight: 0,
|
|
}
|
|
: {
|
|
bottomLeft: 0,
|
|
bottomRight: 0,
|
|
topLeft: radius,
|
|
topRight: radius,
|
|
};
|
|
}
|
|
|
|
function chartScales({
|
|
axisColor,
|
|
fontSize,
|
|
gridColor,
|
|
kind,
|
|
showXAxis,
|
|
showXAxisGrid,
|
|
showYAxis,
|
|
showYAxisGrid,
|
|
xAxisTitle,
|
|
yAxisTitle,
|
|
}: {
|
|
axisColor: string;
|
|
fontSize: number;
|
|
gridColor: string;
|
|
kind: ChartJsKind;
|
|
showXAxis: boolean;
|
|
showXAxisGrid: boolean;
|
|
showYAxis: boolean;
|
|
showYAxisGrid: boolean;
|
|
xAxisTitle: string;
|
|
yAxisTitle: string;
|
|
}) {
|
|
if (kind.pieLike || kind.chartJsType === "polarArea") return undefined;
|
|
|
|
if (kind.chartJsType === "radar") {
|
|
return {
|
|
r: {
|
|
angleLines: {
|
|
color: withAlpha(gridColor, showXAxisGrid ? 0.35 : 0),
|
|
display: showXAxisGrid,
|
|
},
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: withAlpha(gridColor, showYAxisGrid ? 0.35 : 0),
|
|
display: showYAxisGrid,
|
|
},
|
|
pointLabels: {
|
|
color: axisColor,
|
|
display: showXAxis,
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: fontSize,
|
|
weight: 600,
|
|
},
|
|
},
|
|
ticks: {
|
|
backdropColor: "transparent",
|
|
callback: (value: string | number) => formatAxisTick(value),
|
|
color: axisColor,
|
|
display: showYAxis,
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: Math.max(8, fontSize - 1),
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
const showCategoryGrid = kind.horizontal
|
|
? showXAxisGrid
|
|
: showYAxisGrid;
|
|
const showLinearGrid = kind.horizontal ? showYAxisGrid : showXAxisGrid;
|
|
const showCategoryAxis = kind.horizontal ? showYAxis : showXAxis;
|
|
const showLinearAxis = kind.horizontal ? showXAxis : showYAxis;
|
|
|
|
const categoryAxis = {
|
|
display: showCategoryAxis || showCategoryGrid,
|
|
border: {
|
|
color: axisColor,
|
|
display: showCategoryAxis,
|
|
},
|
|
grid: {
|
|
color: withAlpha(gridColor, showCategoryGrid ? 0.25 : 0),
|
|
display: showCategoryGrid,
|
|
drawTicks: showCategoryAxis,
|
|
},
|
|
stacked: kind.stacked,
|
|
ticks: {
|
|
color: axisColor,
|
|
display: showCategoryAxis,
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: fontSize,
|
|
weight: 600,
|
|
},
|
|
},
|
|
title: {
|
|
color: axisColor,
|
|
display:
|
|
showCategoryAxis &&
|
|
Boolean(kind.horizontal ? yAxisTitle : xAxisTitle),
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: fontSize,
|
|
weight: 700,
|
|
},
|
|
text: ellipsizeChartText(
|
|
kind.horizontal ? yAxisTitle : xAxisTitle,
|
|
CHART_AXIS_TITLE_DISPLAY_MAX_LENGTH,
|
|
),
|
|
},
|
|
type: "category",
|
|
};
|
|
const linearAxis = {
|
|
beginAtZero: true,
|
|
display: showLinearAxis || showLinearGrid,
|
|
border: {
|
|
color: axisColor,
|
|
display: showLinearAxis,
|
|
},
|
|
grace: "8%",
|
|
grid: {
|
|
color: withAlpha(gridColor, showLinearGrid ? 0.35 : 0),
|
|
display: showLinearGrid,
|
|
drawTicks: showLinearAxis,
|
|
},
|
|
stacked: kind.stacked,
|
|
ticks: {
|
|
callback: (value: string | number) => formatAxisTick(value),
|
|
color: axisColor,
|
|
display: showLinearAxis,
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: Math.max(8, fontSize - 2),
|
|
weight: 600,
|
|
},
|
|
},
|
|
title: {
|
|
color: axisColor,
|
|
display:
|
|
showLinearAxis &&
|
|
Boolean(kind.horizontal ? xAxisTitle : yAxisTitle),
|
|
font: {
|
|
family: CHART_FONT_FAMILY,
|
|
size: fontSize,
|
|
weight: 700,
|
|
},
|
|
text: ellipsizeChartText(
|
|
kind.horizontal ? xAxisTitle : yAxisTitle,
|
|
CHART_AXIS_TITLE_DISPLAY_MAX_LENGTH,
|
|
),
|
|
},
|
|
type: "linear",
|
|
};
|
|
|
|
if (kind.chartJsType === "scatter" || kind.chartJsType === "bubble") {
|
|
return {
|
|
x: {
|
|
...linearAxis,
|
|
display: showXAxis || showYAxisGrid,
|
|
border: {
|
|
...linearAxis.border,
|
|
display: showXAxis,
|
|
},
|
|
grid: {
|
|
color: withAlpha(gridColor, showYAxisGrid ? 0.35 : 0),
|
|
display: showYAxisGrid,
|
|
drawTicks: showXAxis,
|
|
},
|
|
ticks: {
|
|
...linearAxis.ticks,
|
|
display: showXAxis,
|
|
},
|
|
title: {
|
|
...linearAxis.title,
|
|
display: showXAxis && Boolean(xAxisTitle),
|
|
text: ellipsizeChartText(
|
|
xAxisTitle,
|
|
CHART_AXIS_TITLE_DISPLAY_MAX_LENGTH,
|
|
),
|
|
},
|
|
},
|
|
y: {
|
|
...linearAxis,
|
|
display: showYAxis || showXAxisGrid,
|
|
border: {
|
|
...linearAxis.border,
|
|
display: showYAxis,
|
|
},
|
|
grid: {
|
|
color: withAlpha(gridColor, showXAxisGrid ? 0.35 : 0),
|
|
display: showXAxisGrid,
|
|
drawTicks: showYAxis,
|
|
},
|
|
ticks: {
|
|
...linearAxis.ticks,
|
|
display: showYAxis,
|
|
},
|
|
title: {
|
|
...linearAxis.title,
|
|
display: showYAxis && Boolean(yAxisTitle),
|
|
text: ellipsizeChartText(
|
|
yAxisTitle,
|
|
CHART_AXIS_TITLE_DISPLAY_MAX_LENGTH,
|
|
),
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
return kind.horizontal
|
|
? { x: linearAxis, y: categoryAxis }
|
|
: { x: categoryAxis, y: linearAxis };
|
|
}
|
|
|
|
function rawChartJsKind(value: unknown): ChartJsKind {
|
|
const normalized = normalizeChartTypeName(value);
|
|
|
|
switch (normalized) {
|
|
case "area":
|
|
return baseKind("line", { area: true });
|
|
case "bubble":
|
|
return baseKind("bubble");
|
|
case "donut":
|
|
case "doughnut":
|
|
return baseKind("doughnut", { pieLike: true });
|
|
case "horizontal_bar":
|
|
case "bar_horizontal":
|
|
return baseKind("bar", { horizontal: true });
|
|
case "line":
|
|
return baseKind("line");
|
|
case "pie":
|
|
return baseKind("pie", { pieLike: true });
|
|
case "polar":
|
|
case "polar_area":
|
|
return baseKind("polarArea");
|
|
case "radar":
|
|
return baseKind("radar");
|
|
case "scatter":
|
|
return baseKind("scatter");
|
|
case "stackedbar":
|
|
case "stacked_bar":
|
|
case "bar_stacked":
|
|
case "stacked":
|
|
return baseKind("bar", { stacked: true });
|
|
case "horizontalstackbar":
|
|
case "horizontalstackedbar":
|
|
case "horizontal_stack_bar":
|
|
case "horizontal_stacked_bar":
|
|
return baseKind("bar", { horizontal: true, stacked: true });
|
|
case "bar":
|
|
default:
|
|
return baseKind("bar");
|
|
}
|
|
}
|
|
|
|
function baseKind(
|
|
chartJsType: ChartJsKind["chartJsType"],
|
|
overrides: Partial<ChartJsKind> = {},
|
|
): ChartJsKind {
|
|
return {
|
|
area: false,
|
|
chartJsType,
|
|
horizontal: false,
|
|
pieLike: false,
|
|
stacked: false,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function rawChartCategories(
|
|
element: RawElement,
|
|
singleSeriesOnly = false,
|
|
): string[] {
|
|
const categories = readArray(element.categories).map(String);
|
|
const dataLabels = readArray(element.data)
|
|
.map((item) => readString(asRecord(item)?.label))
|
|
.filter((label): label is string => Boolean(label));
|
|
const rawSeries = readArray(element.series).filter(isRecord);
|
|
const series = singleSeriesOnly ? rawSeries.slice(0, 1) : rawSeries;
|
|
const length = Math.min(
|
|
24,
|
|
Math.max(
|
|
1,
|
|
categories.length,
|
|
dataLabels.length,
|
|
...series.map((item) => readArray(item.values ?? item.data).length),
|
|
),
|
|
);
|
|
|
|
if (categories.length > 0) {
|
|
return Array.from(
|
|
{ length },
|
|
(_, index) => categories[index] ?? `Item ${index + 1}`,
|
|
);
|
|
}
|
|
if (dataLabels.length > 0) {
|
|
return Array.from(
|
|
{ length },
|
|
(_, index) => dataLabels[index] ?? `Item ${index + 1}`,
|
|
);
|
|
}
|
|
|
|
return Array.from({ length }, (_, index) => `Item ${index + 1}`);
|
|
}
|
|
|
|
function rawChartDatasets(
|
|
element: RawElement,
|
|
categories: string[],
|
|
colors: string[],
|
|
singleSeriesOnly = false,
|
|
): RawChartDataset[] {
|
|
const rawSeries = readArray(element.series).filter(isRecord);
|
|
const effectiveSeries = singleSeriesOnly ? rawSeries.slice(0, 1) : rawSeries;
|
|
const categoryLength = Math.max(1, categories.length);
|
|
|
|
if (effectiveSeries.length > 0) {
|
|
return effectiveSeries.slice(0, 12).map((item, index) => {
|
|
const rawValues = readArray(item.values ?? item.data);
|
|
const values = normalizeValues(
|
|
rawValues.map((value) => chartValue(value)),
|
|
categoryLength,
|
|
);
|
|
const points = normalizePoints(
|
|
rawValues.map((value, valueIndex) => chartPoint(value, valueIndex)),
|
|
categoryLength,
|
|
values,
|
|
);
|
|
|
|
return {
|
|
color:
|
|
colors[index % colors.length] ??
|
|
DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length],
|
|
name: readString(item.name) ?? `Series ${index + 1}`,
|
|
categoryColors: effectiveSeries.length === 1 ? colors : undefined,
|
|
points,
|
|
values,
|
|
};
|
|
});
|
|
}
|
|
|
|
const rawData = readArray(element.data).filter(isRecord);
|
|
const values = normalizeValues(
|
|
rawData.map((item) => chartValue(item)),
|
|
categoryLength,
|
|
);
|
|
return [
|
|
{
|
|
color:
|
|
colors[0] ??
|
|
safeChartColor(readString(element.color), DEFAULT_CHART_COLORS[0]),
|
|
name: readString(element.title) ?? "Series 1",
|
|
categoryColors: colors,
|
|
points: normalizePoints(
|
|
rawData.map((value, valueIndex) => chartPoint(value, valueIndex)),
|
|
categoryLength,
|
|
values,
|
|
),
|
|
values,
|
|
},
|
|
];
|
|
}
|
|
|
|
function chartValue(value: unknown) {
|
|
const directNumber = readNumber(value);
|
|
if (directNumber != null) return directNumber;
|
|
|
|
const record = asRecord(value);
|
|
return (
|
|
readNumber(record?.value) ??
|
|
readNumber(record?.y) ??
|
|
readNumber(record?.data) ??
|
|
0
|
|
);
|
|
}
|
|
|
|
function chartPoint(value: unknown, index: number): RawChartPoint {
|
|
const record = asRecord(value);
|
|
if (!record) {
|
|
return { x: index + 1, y: chartValue(value) };
|
|
}
|
|
|
|
return {
|
|
x: readNumber(record.x) ?? index + 1,
|
|
y: chartValue(record),
|
|
...(readNumber(record.r ?? record.radius) != null
|
|
? { r: readNumber(record.r ?? record.radius) ?? undefined }
|
|
: {}),
|
|
};
|
|
}
|
|
|
|
function normalizeValues(values: number[], length: number) {
|
|
const normalized = values.slice(0, length);
|
|
while (normalized.length < length) normalized.push(0);
|
|
return normalized;
|
|
}
|
|
|
|
function normalizePoints(
|
|
points: RawChartPoint[],
|
|
length: number,
|
|
fallbackValues: number[],
|
|
) {
|
|
const normalized = points.slice(0, length);
|
|
while (normalized.length < length) {
|
|
const index = normalized.length;
|
|
normalized.push({ x: index + 1, y: fallbackValues[index] ?? 0 });
|
|
}
|
|
return normalized;
|
|
}
|
|
|
|
function emptyDataset(): RawChartDataset {
|
|
return {
|
|
color: DEFAULT_CHART_COLORS[0],
|
|
name: "Series 1",
|
|
points: [{ x: 1, y: 0 }],
|
|
values: [0],
|
|
};
|
|
}
|
|
|
|
function categoryColors(dataset: RawChartDataset) {
|
|
const colors = dataset.categoryColors ?? [];
|
|
return dataset.values.map(
|
|
(_, index) =>
|
|
withHash(colors[index % colors.length]) ??
|
|
withHash(dataset.color) ??
|
|
DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length],
|
|
);
|
|
}
|
|
|
|
function readDataLabelPosition(value: unknown): DataLabelPosition | null {
|
|
if (value === true) return "top";
|
|
if (value === false || value == null) return null;
|
|
const text = readString(value);
|
|
return text && DATA_LABEL_POSITIONS.has(text)
|
|
? (text as DataLabelPosition)
|
|
: null;
|
|
}
|
|
|
|
function hasOwn(record: RawElement, key: string) {
|
|
return Object.prototype.hasOwnProperty.call(record, key);
|
|
}
|
|
|
|
function chartValueLabelsPlugin({
|
|
enabled,
|
|
fontSize,
|
|
horizontal,
|
|
outsideColor,
|
|
position,
|
|
}: {
|
|
enabled: boolean;
|
|
fontSize: number;
|
|
horizontal: boolean;
|
|
outsideColor: string;
|
|
position: DataLabelPosition;
|
|
}): Plugin {
|
|
return {
|
|
id: "templateV2ChartValueLabels",
|
|
afterDatasetsDraw(chart) {
|
|
if (!enabled) return;
|
|
|
|
const ctx = chart.ctx;
|
|
ctx.save();
|
|
ctx.font = `600 ${fontSize}px ${CHART_FONT_FAMILY}`;
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
const occupiedLabels: LabelBounds[] = [];
|
|
const lineObstacles: LineSegment[] = [];
|
|
const pointObstacles: LabelBounds[] = [];
|
|
|
|
chart.data.datasets.forEach((_, datasetIndex) => {
|
|
const meta = chart.getDatasetMeta(datasetIndex);
|
|
const metaType = readString((meta as { type?: unknown }).type);
|
|
if (meta.hidden || !isPointChartType(metaType)) return;
|
|
meta.data.forEach((element) => {
|
|
const bounds = pointElementBounds(element);
|
|
if (bounds) pointObstacles.push(bounds);
|
|
});
|
|
if (metaType === "line" || metaType === "radar") {
|
|
for (let index = 1; index < meta.data.length; index += 1) {
|
|
const start = chartElementPoint(meta.data[index - 1]);
|
|
const end = chartElementPoint(meta.data[index]);
|
|
if (start && end) lineObstacles.push({ start, end });
|
|
}
|
|
}
|
|
});
|
|
|
|
chart.data.datasets.forEach((dataset, datasetIndex) => {
|
|
const meta = chart.getDatasetMeta(datasetIndex);
|
|
if (meta.hidden) return;
|
|
|
|
meta.data.forEach((element, index) => {
|
|
const rawValue = readArray(dataset.data)[index];
|
|
const numeric = chartValue(rawValue);
|
|
const metaType = readString((meta as { type?: unknown }).type);
|
|
const label = formatChartValue(numeric);
|
|
|
|
if (metaType === "bar") {
|
|
drawBarValueLabel({
|
|
color: datasetBackgroundColor(dataset, index),
|
|
ctx,
|
|
element,
|
|
fontSize,
|
|
horizontal,
|
|
label,
|
|
outsideColor,
|
|
position,
|
|
value: numeric,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (isPointChartType(metaType)) {
|
|
drawPointValueLabel({
|
|
chartArea: chart.chartArea,
|
|
ctx,
|
|
datasetIndex,
|
|
element,
|
|
fontSize,
|
|
index,
|
|
label,
|
|
lineLike: metaType === "line" || metaType === "radar",
|
|
lineObstacles,
|
|
metaElements: meta.data,
|
|
occupiedLabels,
|
|
outsideColor,
|
|
position,
|
|
pointObstacles,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (
|
|
metaType === "pie" ||
|
|
metaType === "doughnut" ||
|
|
metaType === "polarArea"
|
|
) {
|
|
drawArcValueLabel({
|
|
color: datasetBackgroundColor(dataset, index),
|
|
ctx,
|
|
element,
|
|
fontSize,
|
|
label,
|
|
outsideColor,
|
|
position,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const fallbackPosition =
|
|
typeof element.tooltipPosition === "function"
|
|
? element.tooltipPosition(true)
|
|
: null;
|
|
if (!fallbackPosition) return;
|
|
|
|
ctx.fillStyle =
|
|
metaType === "pie" ||
|
|
metaType === "doughnut" ||
|
|
metaType === "polarArea"
|
|
? contrastTextColor(
|
|
datasetBackgroundColor(dataset, index),
|
|
outsideColor,
|
|
)
|
|
: outsideColor;
|
|
ctx.fillText(label, (fallbackPosition.x ?? 0), (fallbackPosition.y ?? 0));
|
|
});
|
|
});
|
|
|
|
ctx.restore();
|
|
},
|
|
};
|
|
}
|
|
|
|
function drawBarValueLabel({
|
|
color,
|
|
ctx,
|
|
element,
|
|
fontSize,
|
|
horizontal,
|
|
label,
|
|
outsideColor,
|
|
position,
|
|
value,
|
|
}: {
|
|
color: string | null;
|
|
ctx: CanvasRenderingContext2D;
|
|
element: unknown;
|
|
fontSize: number;
|
|
horizontal: boolean;
|
|
label: string;
|
|
outsideColor: string;
|
|
position: DataLabelPosition;
|
|
value: number;
|
|
}) {
|
|
const bar = asRecord(element);
|
|
const x = readNumber(bar?.x);
|
|
const y = readNumber(bar?.y);
|
|
const base = readNumber(bar?.base);
|
|
const width = Math.abs(readNumber(bar?.width) ?? 0);
|
|
const height = Math.abs(readNumber(bar?.height) ?? 0);
|
|
if (x == null || y == null || base == null) return;
|
|
|
|
const textWidth = ctx.measureText(label).width;
|
|
const padding = 5;
|
|
const fitsInside = horizontal
|
|
? width >= textWidth + padding * 2 && height >= fontSize * 1.35
|
|
: height >= fontSize * 1.65 && width >= textWidth + padding * 2;
|
|
const resolvedPosition =
|
|
position === "outside" || !fitsInside ? "outside" : position;
|
|
|
|
if (resolvedPosition !== "outside") {
|
|
ctx.fillStyle = contrastTextColor(color, outsideColor);
|
|
if (horizontal) {
|
|
const direction = value < 0 ? -1 : 1;
|
|
const labelX =
|
|
resolvedPosition === "base"
|
|
? base + direction * (textWidth / 2 + padding)
|
|
: resolvedPosition === "top"
|
|
? x - direction * (textWidth / 2 + padding)
|
|
: (x + base) / 2;
|
|
ctx.fillText(label, labelX, y);
|
|
return;
|
|
}
|
|
|
|
const direction = value < 0 ? 1 : -1;
|
|
const labelY =
|
|
resolvedPosition === "base"
|
|
? base + direction * (fontSize / 2 + padding)
|
|
: resolvedPosition === "top"
|
|
? y - direction * (fontSize / 2 + padding)
|
|
: (y + base) / 2;
|
|
ctx.fillText(
|
|
label,
|
|
x,
|
|
labelY,
|
|
);
|
|
return;
|
|
}
|
|
|
|
ctx.fillStyle = outsideColor;
|
|
if (horizontal) {
|
|
const direction = value < 0 ? -1 : 1;
|
|
ctx.fillText(
|
|
label,
|
|
x + direction * (textWidth / 2 + padding),
|
|
y,
|
|
);
|
|
return;
|
|
}
|
|
|
|
const direction = value < 0 ? 1 : -1;
|
|
ctx.fillText(label, x, y + direction * (fontSize / 2 + padding));
|
|
}
|
|
|
|
function drawPointValueLabel({
|
|
chartArea,
|
|
ctx,
|
|
datasetIndex,
|
|
element,
|
|
fontSize,
|
|
index,
|
|
label,
|
|
lineLike,
|
|
lineObstacles,
|
|
metaElements,
|
|
occupiedLabels,
|
|
outsideColor,
|
|
position,
|
|
pointObstacles,
|
|
}: {
|
|
chartArea: LabelBounds;
|
|
ctx: CanvasRenderingContext2D;
|
|
datasetIndex: number;
|
|
element: unknown;
|
|
fontSize: number;
|
|
index: number;
|
|
label: string;
|
|
lineLike: boolean;
|
|
lineObstacles: LineSegment[];
|
|
metaElements: unknown[];
|
|
occupiedLabels: LabelBounds[];
|
|
outsideColor: string;
|
|
position: DataLabelPosition;
|
|
pointObstacles: LabelBounds[];
|
|
}) {
|
|
const point = asRecord(element);
|
|
const x = readNumber(point?.x);
|
|
const y = readNumber(point?.y);
|
|
if (!point || x == null || y == null) return;
|
|
|
|
const radius = pointElementRadius(point);
|
|
const textWidth = ctx.measureText(label).width;
|
|
const textHeight = fontSize * 1.15;
|
|
const verticalDirection = lineLike
|
|
? lineLabelDirection(metaElements, index, datasetIndex)
|
|
: (index + datasetIndex) % 2 === 0
|
|
? -1
|
|
: 1;
|
|
const verticalOffset = radius + textHeight / 2 + 5;
|
|
const horizontalOffset = radius + textWidth / 2 + 5;
|
|
|
|
if (position !== "outside") {
|
|
const candidate =
|
|
position === "base"
|
|
? { x, y: y + verticalOffset }
|
|
: position === "top"
|
|
? { x, y: y - verticalOffset }
|
|
: { x, y };
|
|
const bounds = valueLabelBounds(
|
|
candidate.x,
|
|
candidate.y,
|
|
textWidth,
|
|
textHeight,
|
|
);
|
|
const intersectsPoint =
|
|
position !== "mid" &&
|
|
pointObstacles.some((obstacle) => labelBoundsOverlap(bounds, obstacle));
|
|
if (
|
|
labelFitsChartArea(bounds, chartArea) &&
|
|
occupiedLabels.every(
|
|
(occupied) => !labelBoundsOverlap(bounds, occupied),
|
|
) &&
|
|
!intersectsPoint &&
|
|
lineObstacles.every(
|
|
(segment) => !lineSegmentIntersectsBounds(segment, bounds),
|
|
)
|
|
) {
|
|
occupiedLabels.push(bounds);
|
|
ctx.fillStyle = outsideColor;
|
|
ctx.fillText(label, candidate.x, candidate.y);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const candidates = [
|
|
{ x, y: y + verticalDirection * verticalOffset },
|
|
{ x, y: y - verticalDirection * verticalOffset },
|
|
{ x: x + horizontalOffset, y },
|
|
{ x: x - horizontalOffset, y },
|
|
{
|
|
x: x + horizontalOffset,
|
|
y: y + verticalDirection * verticalOffset,
|
|
},
|
|
{
|
|
x: x - horizontalOffset,
|
|
y: y + verticalDirection * verticalOffset,
|
|
},
|
|
{
|
|
x: x + horizontalOffset,
|
|
y: y - verticalDirection * verticalOffset,
|
|
},
|
|
{
|
|
x: x - horizontalOffset,
|
|
y: y - verticalDirection * verticalOffset,
|
|
},
|
|
{ x, y: y + verticalDirection * verticalOffset * 1.7 },
|
|
{ x, y: y - verticalDirection * verticalOffset * 1.7 },
|
|
];
|
|
|
|
const availableCandidate = candidates
|
|
.map((candidate) => ({
|
|
...candidate,
|
|
bounds: valueLabelBounds(
|
|
candidate.x,
|
|
candidate.y,
|
|
textWidth,
|
|
textHeight,
|
|
),
|
|
}))
|
|
.find(
|
|
(candidate) =>
|
|
labelFitsChartArea(candidate.bounds, chartArea) &&
|
|
occupiedLabels.every(
|
|
(occupied) => !labelBoundsOverlap(candidate.bounds, occupied),
|
|
) &&
|
|
pointObstacles.every(
|
|
(obstacle) => !labelBoundsOverlap(candidate.bounds, obstacle),
|
|
) &&
|
|
lineObstacles.every(
|
|
(segment) => !lineSegmentIntersectsBounds(segment, candidate.bounds),
|
|
),
|
|
);
|
|
if (!availableCandidate) return;
|
|
const resolved = availableCandidate;
|
|
const bounds = valueLabelBounds(
|
|
resolved.x,
|
|
resolved.y,
|
|
textWidth,
|
|
textHeight,
|
|
);
|
|
|
|
occupiedLabels.push(bounds);
|
|
ctx.fillStyle = outsideColor;
|
|
ctx.fillText(label, resolved.x, resolved.y);
|
|
}
|
|
|
|
function drawArcValueLabel({
|
|
color,
|
|
ctx,
|
|
element,
|
|
fontSize,
|
|
label,
|
|
outsideColor,
|
|
position,
|
|
}: {
|
|
color: string | null;
|
|
ctx: CanvasRenderingContext2D;
|
|
element: unknown;
|
|
fontSize: number;
|
|
label: string;
|
|
outsideColor: string;
|
|
position: DataLabelPosition;
|
|
}) {
|
|
const arc = asRecord(element);
|
|
const centerX = readNumber(arc?.x);
|
|
const centerY = readNumber(arc?.y);
|
|
const startAngle = readNumber(arc?.startAngle);
|
|
const endAngle = readNumber(arc?.endAngle);
|
|
const innerRadius = Math.max(0, readNumber(arc?.innerRadius) ?? 0);
|
|
const outerRadius = Math.max(innerRadius, readNumber(arc?.outerRadius) ?? 0);
|
|
|
|
let point: { x: number; y: number } | null = null;
|
|
if (
|
|
centerX != null &&
|
|
centerY != null &&
|
|
startAngle != null &&
|
|
endAngle != null &&
|
|
outerRadius > 0
|
|
) {
|
|
const angle = (startAngle + endAngle) / 2;
|
|
const ringWidth = Math.max(1, outerRadius - innerRadius);
|
|
const textHeight = fontSize * 1.15;
|
|
const radius =
|
|
position === "outside"
|
|
? outerRadius + textHeight / 2 + 7
|
|
: position === "top"
|
|
? Math.max(innerRadius + textHeight / 2, outerRadius - textHeight / 2 - 5)
|
|
: position === "base"
|
|
? innerRadius > 0
|
|
? innerRadius + Math.min(ringWidth * 0.25, textHeight + 5)
|
|
: outerRadius * 0.35
|
|
: innerRadius + ringWidth / 2;
|
|
point = {
|
|
x: centerX + Math.cos(angle) * radius,
|
|
y: centerY + Math.sin(angle) * radius,
|
|
};
|
|
} else if (typeof arc?.tooltipPosition === "function") {
|
|
point = arc.tooltipPosition(true);
|
|
}
|
|
|
|
if (!point) return;
|
|
ctx.fillStyle =
|
|
position === "outside"
|
|
? outsideColor
|
|
: contrastTextColor(color, outsideColor);
|
|
ctx.fillText(label, point.x, point.y);
|
|
}
|
|
|
|
function isPointChartType(metaType: string | null) {
|
|
return (
|
|
metaType === "line" ||
|
|
metaType === "scatter" ||
|
|
metaType === "bubble" ||
|
|
metaType === "radar"
|
|
);
|
|
}
|
|
|
|
function pointElementRadius(point: RawElement) {
|
|
const options = asRecord(point.options);
|
|
return Math.max(
|
|
0,
|
|
readNumber(options?.radius) ?? readNumber(point.radius) ?? 3,
|
|
);
|
|
}
|
|
|
|
function pointElementBounds(element: unknown): LabelBounds | null {
|
|
const point = asRecord(element);
|
|
const x = readNumber(point?.x);
|
|
const y = readNumber(point?.y);
|
|
if (!point || x == null || y == null) return null;
|
|
|
|
const radius = pointElementRadius(point) + 2;
|
|
return {
|
|
bottom: y + radius,
|
|
left: x - radius,
|
|
right: x + radius,
|
|
top: y - radius,
|
|
};
|
|
}
|
|
|
|
function lineLabelDirection(
|
|
elements: unknown[],
|
|
index: number,
|
|
datasetIndex: number,
|
|
) {
|
|
const currentY = readNumber(asRecord(elements[index])?.y);
|
|
const previousY = readNumber(asRecord(elements[index - 1])?.y);
|
|
const nextY = readNumber(asRecord(elements[index + 1])?.y);
|
|
if (currentY == null) return datasetIndex % 2 === 0 ? -1 : 1;
|
|
|
|
if (previousY != null && nextY != null) {
|
|
if (currentY <= previousY && currentY <= nextY) return -1;
|
|
if (currentY >= previousY && currentY >= nextY) return 1;
|
|
}
|
|
if (nextY != null && previousY == null) return nextY < currentY ? 1 : -1;
|
|
if (previousY != null && nextY == null) {
|
|
return previousY < currentY ? 1 : -1;
|
|
}
|
|
return datasetIndex % 2 === 0 ? -1 : 1;
|
|
}
|
|
|
|
function chartElementPoint(element: unknown) {
|
|
const point = asRecord(element);
|
|
const x = readNumber(point?.x);
|
|
const y = readNumber(point?.y);
|
|
return x == null || y == null ? null : { x, y };
|
|
}
|
|
|
|
function lineSegmentIntersectsBounds(
|
|
segment: LineSegment,
|
|
bounds: LabelBounds,
|
|
) {
|
|
if (
|
|
pointInsideBounds(segment.start, bounds) ||
|
|
pointInsideBounds(segment.end, bounds)
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
const topLeft = { x: bounds.left, y: bounds.top };
|
|
const topRight = { x: bounds.right, y: bounds.top };
|
|
const bottomLeft = { x: bounds.left, y: bounds.bottom };
|
|
const bottomRight = { x: bounds.right, y: bounds.bottom };
|
|
return (
|
|
lineSegmentsIntersect(segment.start, segment.end, topLeft, topRight) ||
|
|
lineSegmentsIntersect(segment.start, segment.end, topRight, bottomRight) ||
|
|
lineSegmentsIntersect(segment.start, segment.end, bottomRight, bottomLeft) ||
|
|
lineSegmentsIntersect(segment.start, segment.end, bottomLeft, topLeft)
|
|
);
|
|
}
|
|
|
|
function pointInsideBounds(
|
|
point: { x: number; y: number },
|
|
bounds: LabelBounds,
|
|
) {
|
|
return (
|
|
point.x >= bounds.left &&
|
|
point.x <= bounds.right &&
|
|
point.y >= bounds.top &&
|
|
point.y <= bounds.bottom
|
|
);
|
|
}
|
|
|
|
function lineSegmentsIntersect(
|
|
firstStart: { x: number; y: number },
|
|
firstEnd: { x: number; y: number },
|
|
secondStart: { x: number; y: number },
|
|
secondEnd: { x: number; y: number },
|
|
) {
|
|
if (
|
|
Math.max(firstStart.x, firstEnd.x) < Math.min(secondStart.x, secondEnd.x) ||
|
|
Math.min(firstStart.x, firstEnd.x) > Math.max(secondStart.x, secondEnd.x) ||
|
|
Math.max(firstStart.y, firstEnd.y) < Math.min(secondStart.y, secondEnd.y) ||
|
|
Math.min(firstStart.y, firstEnd.y) > Math.max(secondStart.y, secondEnd.y)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
const firstA = lineSide(firstStart, firstEnd, secondStart);
|
|
const firstB = lineSide(firstStart, firstEnd, secondEnd);
|
|
const secondA = lineSide(secondStart, secondEnd, firstStart);
|
|
const secondB = lineSide(secondStart, secondEnd, firstEnd);
|
|
return firstA * firstB <= 0 && secondA * secondB <= 0;
|
|
}
|
|
|
|
function lineSide(
|
|
start: { x: number; y: number },
|
|
end: { x: number; y: number },
|
|
point: { x: number; y: number },
|
|
) {
|
|
return (
|
|
(end.x - start.x) * (point.y - start.y) -
|
|
(end.y - start.y) * (point.x - start.x)
|
|
);
|
|
}
|
|
|
|
function valueLabelBounds(
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
height: number,
|
|
): LabelBounds {
|
|
const padding = 2;
|
|
return {
|
|
bottom: y + height / 2 + padding,
|
|
left: x - width / 2 - padding,
|
|
right: x + width / 2 + padding,
|
|
top: y - height / 2 - padding,
|
|
};
|
|
}
|
|
|
|
function labelFitsChartArea(bounds: LabelBounds, chartArea: LabelBounds) {
|
|
return (
|
|
bounds.left >= chartArea.left &&
|
|
bounds.right <= chartArea.right &&
|
|
bounds.top >= chartArea.top &&
|
|
bounds.bottom <= chartArea.bottom
|
|
);
|
|
}
|
|
|
|
function labelBoundsOverlap(first: LabelBounds, second: LabelBounds) {
|
|
return !(
|
|
first.right < second.left ||
|
|
first.left > second.right ||
|
|
first.bottom < second.top ||
|
|
first.top > second.bottom
|
|
);
|
|
}
|
|
|
|
function datasetBackgroundColor(dataset: ChartDataset, index: number) {
|
|
const backgroundColor = (dataset as { backgroundColor?: unknown })
|
|
.backgroundColor;
|
|
const color = Array.isArray(backgroundColor)
|
|
? backgroundColor[index]
|
|
: backgroundColor;
|
|
return typeof color === "string" ? color : null;
|
|
}
|
|
|
|
function contrastTextColor(backgroundColor: string | null, fallback: string) {
|
|
const background = parseChartColor(backgroundColor);
|
|
if (!background) return fallback;
|
|
|
|
const [red, green, blue, alpha] = background;
|
|
const composite = [red, green, blue].map(
|
|
(channel) => channel * alpha + 255 * (1 - alpha),
|
|
);
|
|
const backgroundLuminance = relativeLuminance(composite);
|
|
const dark = [16, 24, 40];
|
|
const light = [255, 255, 255];
|
|
const darkContrast = contrastRatio(
|
|
backgroundLuminance,
|
|
relativeLuminance(dark),
|
|
);
|
|
const lightContrast = contrastRatio(
|
|
backgroundLuminance,
|
|
relativeLuminance(light),
|
|
);
|
|
return lightContrast >= darkContrast ? "#FFFFFF" : "#101828";
|
|
}
|
|
|
|
function parseChartColor(
|
|
color: string | null,
|
|
): [number, number, number, number] | null {
|
|
if (!color) return null;
|
|
const hex = color.match(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/);
|
|
if (hex) {
|
|
const raw =
|
|
hex[1].length === 3
|
|
? hex[1]
|
|
.split("")
|
|
.map((character) => character + character)
|
|
.join("")
|
|
: hex[1];
|
|
const value = Number.parseInt(raw, 16);
|
|
return [(value >> 16) & 255, (value >> 8) & 255, value & 255, 1];
|
|
}
|
|
|
|
const rgb = color.match(/^rgba?\(([^)]+)\)$/i);
|
|
if (!rgb) return null;
|
|
const channels = rgb[1].split(",").map((part) => Number(part.trim()));
|
|
if (channels.length < 3 || channels.slice(0, 3).some(Number.isNaN)) {
|
|
return null;
|
|
}
|
|
return [
|
|
clamp(channels[0], 0, 255),
|
|
clamp(channels[1], 0, 255),
|
|
clamp(channels[2], 0, 255),
|
|
clamp(Number.isFinite(channels[3]) ? channels[3] : 1, 0, 1),
|
|
];
|
|
}
|
|
|
|
function relativeLuminance(channels: number[]) {
|
|
const [red, green, blue] = channels.map((channel) => {
|
|
const normalized = channel / 255;
|
|
return normalized <= 0.04045
|
|
? normalized / 12.92
|
|
: ((normalized + 0.055) / 1.055) ** 2.4;
|
|
});
|
|
return red * 0.2126 + green * 0.7152 + blue * 0.0722;
|
|
}
|
|
|
|
function contrastRatio(first: number, second: number) {
|
|
const lighter = Math.max(first, second);
|
|
const darker = Math.min(first, second);
|
|
return (lighter + 0.05) / (darker + 0.05);
|
|
}
|
|
|
|
function formatChartValue(value: number) {
|
|
if (!Number.isFinite(value)) return "0";
|
|
if (Math.abs(value) >= 1000) {
|
|
return Intl.NumberFormat("en", { notation: "compact" }).format(value);
|
|
}
|
|
return Number.isInteger(value) ? `${value}` : value.toFixed(1).replace(/\.0$/, "");
|
|
}
|
|
|
|
function formatAxisTick(value: string | number) {
|
|
const numeric = Number(value);
|
|
return Number.isFinite(numeric) ? formatChartValue(numeric) : String(value);
|
|
}
|
|
|
|
function displayChartCategoryLabel(value: string) {
|
|
return ellipsizeChartText(value, CHART_AXIS_TICK_DISPLAY_MAX_LENGTH);
|
|
}
|
|
|
|
function displayChartLegendLabel(value: string) {
|
|
return ellipsizeChartText(value, CHART_LEGEND_DISPLAY_MAX_LENGTH);
|
|
}
|
|
|
|
function safeChartColor(
|
|
value: string | null | undefined,
|
|
fallback = DEFAULT_CHART_COLORS[0],
|
|
) {
|
|
const color = withHash(value) ?? fallback;
|
|
if (
|
|
/^#[0-9A-Fa-f]{3}$/.test(color) ||
|
|
/^#[0-9A-Fa-f]{6}$/.test(color) ||
|
|
/^rgba?\(/i.test(color)
|
|
) {
|
|
return color;
|
|
}
|
|
return fallback;
|
|
}
|
|
|
|
function withAlpha(color: string, alpha: number) {
|
|
const normalized = safeChartColor(color);
|
|
const hex = normalized.match(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/);
|
|
if (!hex) {
|
|
const rgb = normalized.match(/^rgba?\(([^)]+)\)$/i);
|
|
if (rgb) {
|
|
const channels = rgb[1]
|
|
.split(",")
|
|
.slice(0, 3)
|
|
.map((part) => part.trim());
|
|
return `rgba(${channels.join(", ")}, ${alpha})`;
|
|
}
|
|
return normalized;
|
|
}
|
|
|
|
const raw =
|
|
hex[1].length === 3
|
|
? hex[1].split("").map((char) => char + char).join("")
|
|
: hex[1];
|
|
const int = Number.parseInt(raw, 16);
|
|
return `rgba(${(int >> 16) & 255}, ${(int >> 8) & 255}, ${int & 255}, ${alpha})`;
|
|
}
|