feat(editor): support radar chart and multiple series for other chart types (#10824)
This commit is contained in:
David Luzar
@@ -0,0 +1,103 @@
|
||||
import { isDevEnv } from "@excalidraw/common";
|
||||
|
||||
import { newElement } from "@excalidraw/element";
|
||||
|
||||
import { commonProps } from "./charts.constants";
|
||||
import {
|
||||
chartBaseElements,
|
||||
chartXLabels,
|
||||
createSeriesLegend,
|
||||
getBackgroundColor,
|
||||
getCartesianChartLayout,
|
||||
getChartDimensions,
|
||||
getColorOffset,
|
||||
getRotatedTextElementBottom,
|
||||
getSeriesColors,
|
||||
} from "./charts.helpers";
|
||||
|
||||
import type { ChartElements, Spreadsheet } from "./charts.types";
|
||||
|
||||
export const renderBarChart = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
colorSeed?: number,
|
||||
): ChartElements => {
|
||||
const series = spreadsheet.series;
|
||||
const layout = getCartesianChartLayout("bar", series.length);
|
||||
const max = Math.max(
|
||||
1,
|
||||
...series.flatMap((seriesData) =>
|
||||
seriesData.values.map((value) => Math.max(0, value)),
|
||||
),
|
||||
);
|
||||
const colorOffset = getColorOffset(colorSeed);
|
||||
const backgroundColor = getBackgroundColor(colorOffset);
|
||||
const seriesColors = getSeriesColors(series.length, colorOffset);
|
||||
const interBarGap =
|
||||
series.length > 1
|
||||
? Math.max(1, Math.floor(layout.gap / (series.length + 1)))
|
||||
: 0;
|
||||
const barWidth =
|
||||
series.length > 1
|
||||
? Math.max(
|
||||
2,
|
||||
(layout.slotWidth - interBarGap * (series.length - 1)) /
|
||||
series.length,
|
||||
)
|
||||
: layout.slotWidth;
|
||||
const clusterWidth =
|
||||
series.length * barWidth + interBarGap * (series.length - 1);
|
||||
const clusterOffset = (layout.slotWidth - clusterWidth) / 2;
|
||||
|
||||
const bars = series[0].values.flatMap((_, categoryIndex) =>
|
||||
series.map((seriesData, seriesIndex) => {
|
||||
const value = Math.max(0, seriesData.values[categoryIndex] ?? 0);
|
||||
const barHeight = (value / max) * layout.chartHeight;
|
||||
const barColor =
|
||||
series.length > 1 ? seriesColors[seriesIndex] : backgroundColor;
|
||||
return newElement({
|
||||
backgroundColor: barColor,
|
||||
...commonProps,
|
||||
type: "rectangle",
|
||||
fillStyle: series.length > 1 ? "solid" : commonProps.fillStyle,
|
||||
strokeColor: series.length > 1 ? barColor : commonProps.strokeColor,
|
||||
x:
|
||||
x +
|
||||
categoryIndex * (layout.slotWidth + layout.gap) +
|
||||
layout.gap +
|
||||
clusterOffset +
|
||||
seriesIndex * (barWidth + interBarGap),
|
||||
y: y - barHeight - layout.gap,
|
||||
width: barWidth,
|
||||
height: barHeight,
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
const baseElements = chartBaseElements(
|
||||
spreadsheet,
|
||||
x,
|
||||
y,
|
||||
backgroundColor,
|
||||
layout,
|
||||
max,
|
||||
isDevEnv(),
|
||||
);
|
||||
const xLabels = chartXLabels(spreadsheet, x, y, backgroundColor, layout);
|
||||
const xLabelsBottomY = Math.max(
|
||||
y + layout.gap / 2,
|
||||
...xLabels.map((label) => getRotatedTextElementBottom(label)),
|
||||
);
|
||||
const { chartWidth } = getChartDimensions(spreadsheet, layout);
|
||||
const seriesLegend = createSeriesLegend(
|
||||
series,
|
||||
seriesColors,
|
||||
x + chartWidth / 2,
|
||||
xLabelsBottomY,
|
||||
y + layout.gap * 5,
|
||||
backgroundColor,
|
||||
);
|
||||
|
||||
return [...baseElements, ...bars, ...seriesLegend];
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import {
|
||||
COLOR_PALETTE,
|
||||
DEFAULT_FONT_FAMILY,
|
||||
DEFAULT_FONT_SIZE,
|
||||
VERTICAL_ALIGN,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import type { Radians } from "@excalidraw/math";
|
||||
|
||||
export const CARTESIAN_BASE_SLOT_WIDTH = 44;
|
||||
export const CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES = 22;
|
||||
export const CARTESIAN_BAR_SLOT_EXTRA_MAX = 66;
|
||||
export const CARTESIAN_LINE_SLOT_WIDTH = 48;
|
||||
export const CARTESIAN_GAP = 14;
|
||||
export const CARTESIAN_BAR_HEIGHT = 304;
|
||||
export const CARTESIAN_LINE_HEIGHT = 320;
|
||||
export const CARTESIAN_LABEL_ROTATION = 5.87 as Radians;
|
||||
export const CARTESIAN_LABEL_MIN_WIDTH = 28;
|
||||
export const CARTESIAN_LABEL_SLOT_PADDING = 4;
|
||||
export const CARTESIAN_LABEL_AXIS_CLEARANCE = 2;
|
||||
export const CARTESIAN_LABEL_MAX_WIDTH_BUFFER = 10;
|
||||
export const CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER = 10;
|
||||
export const CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER = 8;
|
||||
|
||||
export const BAR_GAP = 12;
|
||||
export const BAR_HEIGHT = 256;
|
||||
export const GRID_OPACITY = 10;
|
||||
|
||||
export const RADAR_GRID_LEVELS = 4;
|
||||
export const RADAR_LABEL_OFFSET = BAR_GAP * 2;
|
||||
export const RADAR_PADDING = BAR_GAP * 2;
|
||||
export const RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD = 100;
|
||||
export const RADAR_AXIS_LABEL_MAX_WIDTH = 140;
|
||||
export const RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD = 0.35;
|
||||
export const RADAR_AXIS_LABEL_CLEARANCE = BAR_GAP / 2;
|
||||
export const RADAR_LEGEND_SWATCH_SIZE = 20;
|
||||
export const RADAR_LEGEND_ITEM_GAP = BAR_GAP * 2;
|
||||
export const RADAR_LEGEND_TEXT_GAP = BAR_GAP;
|
||||
|
||||
// Put all common chart element properties here so properties dialog
|
||||
// shows stable values when selecting chart groups.
|
||||
export const commonProps = {
|
||||
fillStyle: "hachure",
|
||||
fontFamily: DEFAULT_FONT_FAMILY,
|
||||
fontSize: DEFAULT_FONT_SIZE,
|
||||
opacity: 100,
|
||||
roughness: 1,
|
||||
strokeColor: COLOR_PALETTE.black,
|
||||
roundness: null,
|
||||
strokeStyle: "solid",
|
||||
strokeWidth: 1,
|
||||
verticalAlign: VERTICAL_ALIGN.MIDDLE,
|
||||
locked: false,
|
||||
} as const;
|
||||
|
||||
export type CartesianChartType = "bar" | "line";
|
||||
|
||||
export type CartesianChartLayout = {
|
||||
slotWidth: number;
|
||||
gap: number;
|
||||
chartHeight: number;
|
||||
xLabelMaxWidth: number;
|
||||
};
|
||||
@@ -0,0 +1,865 @@
|
||||
import { pointFrom } from "@excalidraw/math";
|
||||
|
||||
import {
|
||||
COLOR_PALETTE,
|
||||
DEFAULT_CHART_COLOR_INDEX,
|
||||
FONT_FAMILY,
|
||||
FONT_SIZES,
|
||||
ROUNDNESS,
|
||||
DEFAULT_FONT_SIZE,
|
||||
getAllColorsSpecificShade,
|
||||
getFontString,
|
||||
getLineHeight,
|
||||
ROUGHNESS,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import {
|
||||
getApproxMinLineWidth,
|
||||
measureText,
|
||||
newElement,
|
||||
newLinearElement,
|
||||
newTextElement,
|
||||
wrapText,
|
||||
} from "@excalidraw/element";
|
||||
|
||||
import type {
|
||||
ChartType,
|
||||
ExcalidrawTextElement,
|
||||
} from "@excalidraw/element/types";
|
||||
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
|
||||
|
||||
import {
|
||||
BAR_GAP,
|
||||
CARTESIAN_BAR_HEIGHT,
|
||||
CARTESIAN_BASE_SLOT_WIDTH,
|
||||
CARTESIAN_BAR_SLOT_EXTRA_MAX,
|
||||
CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES,
|
||||
CARTESIAN_GAP,
|
||||
CARTESIAN_LABEL_AXIS_CLEARANCE,
|
||||
CARTESIAN_LABEL_MAX_WIDTH_BUFFER,
|
||||
CARTESIAN_LABEL_MIN_WIDTH,
|
||||
CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER,
|
||||
CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER,
|
||||
CARTESIAN_LABEL_ROTATION,
|
||||
CARTESIAN_LABEL_SLOT_PADDING,
|
||||
CARTESIAN_LINE_HEIGHT,
|
||||
CARTESIAN_LINE_SLOT_WIDTH,
|
||||
GRID_OPACITY,
|
||||
RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD,
|
||||
RADAR_AXIS_LABEL_CLEARANCE,
|
||||
RADAR_AXIS_LABEL_MAX_WIDTH,
|
||||
RADAR_LABEL_OFFSET,
|
||||
RADAR_LEGEND_ITEM_GAP,
|
||||
RADAR_LEGEND_SWATCH_SIZE,
|
||||
RADAR_LEGEND_TEXT_GAP,
|
||||
RADAR_PADDING,
|
||||
RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD,
|
||||
BAR_HEIGHT,
|
||||
commonProps,
|
||||
type CartesianChartLayout,
|
||||
type CartesianChartType,
|
||||
} from "./charts.constants";
|
||||
|
||||
import type {
|
||||
ChartElements,
|
||||
Spreadsheet,
|
||||
SpreadsheetSeries,
|
||||
} from "./charts.types";
|
||||
|
||||
const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX);
|
||||
|
||||
const getSpreadsheetDimensionCount = (spreadsheet: Spreadsheet) =>
|
||||
spreadsheet.labels?.length ?? spreadsheet.series[0]?.values.length ?? 0;
|
||||
|
||||
export const isSpreadsheetValidForChartType = (
|
||||
spreadsheet: Spreadsheet | null,
|
||||
chartType: ChartType,
|
||||
) => {
|
||||
if (!spreadsheet) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const dimensionCount = getSpreadsheetDimensionCount(spreadsheet);
|
||||
if (dimensionCount < 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (chartType === "radar") {
|
||||
return dimensionCount >= 3;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const getSeriesAwareSlotWidth = (
|
||||
baseSlotWidth: number,
|
||||
seriesCount: number,
|
||||
) => {
|
||||
const extraSlotWidth =
|
||||
seriesCount <= 1
|
||||
? 0
|
||||
: Math.min(
|
||||
CARTESIAN_BAR_SLOT_EXTRA_MAX,
|
||||
(seriesCount - 1) * CARTESIAN_BAR_SLOT_EXTRA_PER_SERIES,
|
||||
);
|
||||
return baseSlotWidth + extraSlotWidth;
|
||||
};
|
||||
|
||||
export const getCartesianChartLayout = (
|
||||
chartType: CartesianChartType,
|
||||
seriesCount: number,
|
||||
): CartesianChartLayout => {
|
||||
if (chartType === "line") {
|
||||
const slotWidth = getSeriesAwareSlotWidth(
|
||||
CARTESIAN_LINE_SLOT_WIDTH,
|
||||
seriesCount,
|
||||
);
|
||||
return {
|
||||
slotWidth,
|
||||
gap: CARTESIAN_GAP,
|
||||
chartHeight: CARTESIAN_LINE_HEIGHT,
|
||||
xLabelMaxWidth:
|
||||
slotWidth + CARTESIAN_GAP * 3 + CARTESIAN_LABEL_MAX_WIDTH_BUFFER,
|
||||
};
|
||||
}
|
||||
|
||||
const slotWidth = getSeriesAwareSlotWidth(
|
||||
CARTESIAN_BASE_SLOT_WIDTH,
|
||||
seriesCount,
|
||||
);
|
||||
return {
|
||||
slotWidth,
|
||||
gap: CARTESIAN_GAP,
|
||||
chartHeight: CARTESIAN_BAR_HEIGHT,
|
||||
xLabelMaxWidth:
|
||||
slotWidth + CARTESIAN_GAP * 3 + CARTESIAN_LABEL_MAX_WIDTH_BUFFER,
|
||||
};
|
||||
};
|
||||
|
||||
export const getChartDimensions = (
|
||||
spreadsheet: Spreadsheet,
|
||||
layout: CartesianChartLayout,
|
||||
) => {
|
||||
const chartWidth =
|
||||
(layout.slotWidth + layout.gap) * spreadsheet.series[0].values.length +
|
||||
layout.gap;
|
||||
const chartHeight = layout.chartHeight + layout.gap * 2;
|
||||
return { chartWidth, chartHeight };
|
||||
};
|
||||
|
||||
export const getRadarDimensions = () => {
|
||||
const chartWidth = BAR_HEIGHT + RADAR_PADDING * 2;
|
||||
const chartHeight = BAR_HEIGHT + RADAR_PADDING * 2;
|
||||
return { chartWidth, chartHeight };
|
||||
};
|
||||
|
||||
const getCircularDistance = (
|
||||
firstIndex: number,
|
||||
secondIndex: number,
|
||||
paletteSize: number,
|
||||
) => {
|
||||
const absoluteDistance = Math.abs(firstIndex - secondIndex);
|
||||
return Math.min(absoluteDistance, paletteSize - absoluteDistance);
|
||||
};
|
||||
|
||||
export const getSeriesColors = (
|
||||
seriesCount: number,
|
||||
colorOffset: number,
|
||||
): readonly string[] => {
|
||||
if (seriesCount <= 0 || bgColors.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const paletteSize = bgColors.length;
|
||||
const startIndex = ((colorOffset % paletteSize) + paletteSize) % paletteSize;
|
||||
const selectedIndices = [startIndex];
|
||||
const maxUniqueColors = Math.min(seriesCount, paletteSize);
|
||||
const availableIndices = new Set(
|
||||
Array.from({ length: paletteSize }, (_, index) => index).filter(
|
||||
(index) => index !== startIndex,
|
||||
),
|
||||
);
|
||||
|
||||
while (selectedIndices.length < maxUniqueColors) {
|
||||
let bestIndex = -1;
|
||||
let bestMinDistance = -1;
|
||||
let bestAverageDistance = -1;
|
||||
|
||||
for (const candidateIndex of availableIndices) {
|
||||
const distances = selectedIndices.map((selectedIndex) =>
|
||||
getCircularDistance(candidateIndex, selectedIndex, paletteSize),
|
||||
);
|
||||
const minDistance = Math.min(...distances);
|
||||
const averageDistance =
|
||||
distances.reduce((total, distance) => total + distance, 0) /
|
||||
distances.length;
|
||||
|
||||
if (
|
||||
minDistance > bestMinDistance ||
|
||||
(minDistance === bestMinDistance &&
|
||||
averageDistance > bestAverageDistance)
|
||||
) {
|
||||
bestIndex = candidateIndex;
|
||||
bestMinDistance = minDistance;
|
||||
bestAverageDistance = averageDistance;
|
||||
}
|
||||
}
|
||||
|
||||
selectedIndices.push(bestIndex);
|
||||
availableIndices.delete(bestIndex);
|
||||
}
|
||||
|
||||
return Array.from(
|
||||
{ length: seriesCount },
|
||||
(_, index) => bgColors[selectedIndices[index % selectedIndices.length]],
|
||||
);
|
||||
};
|
||||
|
||||
export const getColorOffset = (colorSeed?: number) => {
|
||||
if (bgColors.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (typeof colorSeed !== "number" || !Number.isFinite(colorSeed)) {
|
||||
return Math.floor(Math.random() * bgColors.length);
|
||||
}
|
||||
|
||||
const seedText = colorSeed.toString();
|
||||
let hash = 0;
|
||||
for (let index = 0; index < seedText.length; index++) {
|
||||
hash = (hash * 31 + seedText.charCodeAt(index)) | 0;
|
||||
}
|
||||
return Math.abs(hash) % bgColors.length;
|
||||
};
|
||||
|
||||
export const getBackgroundColor = (colorOffset: number) =>
|
||||
bgColors[colorOffset];
|
||||
|
||||
export const getRadarValueScale = (
|
||||
series: SpreadsheetSeries[],
|
||||
_labelsLength: number,
|
||||
) => {
|
||||
const allValues = series.flatMap((s) =>
|
||||
s.values.map((value) => Math.max(0, value)),
|
||||
);
|
||||
const positiveValues = allValues.filter((value) => value > 0);
|
||||
const max = Math.max(1, ...allValues);
|
||||
const minPositive =
|
||||
positiveValues.length > 0 ? Math.min(...positiveValues) : 1;
|
||||
const useLogScale =
|
||||
series.length === 1 &&
|
||||
minPositive > 0 &&
|
||||
max / minPositive >= RADAR_SINGLE_SERIES_LOG_SCALE_THRESHOLD;
|
||||
|
||||
return {
|
||||
renderSteps: false,
|
||||
normalize: (value: number, _axisIndex: number) => {
|
||||
const safeValue = Math.max(0, value);
|
||||
return useLogScale
|
||||
? Math.log10(safeValue + 1) / Math.log10(max + 1)
|
||||
: safeValue / max;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const shouldWrapRadarText = (text: string) => /\s/.test(text.trim());
|
||||
|
||||
export const getRadarDisplayText = (
|
||||
text: string,
|
||||
fontString: ReturnType<typeof getFontString>,
|
||||
maxWidth: number,
|
||||
) => {
|
||||
return shouldWrapRadarText(text)
|
||||
? wrapText(text, fontString, maxWidth)
|
||||
: text;
|
||||
};
|
||||
|
||||
export const createRadarAxisLabels = (
|
||||
labels: readonly string[],
|
||||
angles: readonly number[],
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
radius: number,
|
||||
backgroundColor: string,
|
||||
): {
|
||||
axisLabels: ChartElements;
|
||||
axisLabelTopY: number;
|
||||
axisLabelBottomY: number;
|
||||
} => {
|
||||
const fontFamily = FONT_FAMILY.Excalifont;
|
||||
const fontSize = FONT_SIZES.sm;
|
||||
const lineHeight = getLineHeight(fontFamily);
|
||||
const fontString = getFontString({ fontFamily, fontSize });
|
||||
const baseLabelWidth = Math.min(
|
||||
RADAR_AXIS_LABEL_MAX_WIDTH,
|
||||
radius * (labels.length > 8 ? 0.56 : 0.72),
|
||||
);
|
||||
const minLabelWidth = getApproxMinLineWidth(fontString, lineHeight);
|
||||
|
||||
const axisLabels = labels.map((label, index) => {
|
||||
const angle = angles[index];
|
||||
const longestWordWidth = Math.max(
|
||||
0,
|
||||
...label
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
.map((word) => measureText(word, fontString, lineHeight).width),
|
||||
);
|
||||
const maxLabelWidth = Math.max(
|
||||
minLabelWidth,
|
||||
baseLabelWidth,
|
||||
longestWordWidth,
|
||||
);
|
||||
const displayLabel = getRadarDisplayText(label, fontString, maxLabelWidth);
|
||||
const metrics = measureText(displayLabel, fontString, lineHeight);
|
||||
const cos = Math.cos(angle);
|
||||
const sin = Math.sin(angle);
|
||||
|
||||
const textAlign: "left" | "center" | "right" =
|
||||
cos > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
|
||||
? "left"
|
||||
: cos < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
|
||||
? "right"
|
||||
: "center";
|
||||
|
||||
// Keep labels outside the radar ring by projecting text extents
|
||||
// onto the axis direction.
|
||||
const centerAlignedXExtent = textAlign === "center" ? metrics.width / 2 : 0;
|
||||
const projectedExtent =
|
||||
Math.abs(cos) * centerAlignedXExtent +
|
||||
Math.abs(sin) * (metrics.height / 2);
|
||||
const radialOffset =
|
||||
RADAR_LABEL_OFFSET + projectedExtent + RADAR_AXIS_LABEL_CLEARANCE;
|
||||
const anchorX = centerX + cos * (radius + radialOffset);
|
||||
const anchorY = centerY + sin * (radius + radialOffset);
|
||||
|
||||
const yNudge =
|
||||
sin > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
|
||||
? BAR_GAP / 3
|
||||
: sin < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD
|
||||
? -BAR_GAP / 3
|
||||
: 0;
|
||||
|
||||
return newTextElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
text: displayLabel,
|
||||
originalText: label,
|
||||
x: anchorX,
|
||||
y: anchorY + yNudge,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
textAlign,
|
||||
verticalAlign: "middle",
|
||||
});
|
||||
});
|
||||
|
||||
const axisLabelTopY = Math.min(...axisLabels.map((axisLabel) => axisLabel.y));
|
||||
const axisLabelBottomY = Math.max(
|
||||
...axisLabels.map((axisLabel) => axisLabel.y + axisLabel.height),
|
||||
);
|
||||
return { axisLabels, axisLabelTopY, axisLabelBottomY };
|
||||
};
|
||||
|
||||
export const createSeriesLegend = (
|
||||
series: SpreadsheetSeries[],
|
||||
seriesColors: readonly string[],
|
||||
centerX: number,
|
||||
minLegendTopY: number,
|
||||
fallbackLegendY: number,
|
||||
backgroundColor: string,
|
||||
): ChartElements => {
|
||||
if (series.length <= 1) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const fontFamily = FONT_FAMILY["Lilita One"];
|
||||
const fontSize = FONT_SIZES.lg;
|
||||
const lineHeight = getLineHeight(fontFamily);
|
||||
const fontString = getFontString({ fontFamily, fontSize });
|
||||
const legendItems = series.map((seriesItem, index) => {
|
||||
const label = seriesItem.title?.trim() || `Series ${index + 1}`;
|
||||
const displayLabel = getRadarDisplayText(label, fontString, BAR_HEIGHT);
|
||||
const metrics = measureText(displayLabel, fontString, lineHeight);
|
||||
const itemWidth =
|
||||
RADAR_LEGEND_SWATCH_SIZE + RADAR_LEGEND_TEXT_GAP + metrics.width;
|
||||
return {
|
||||
label,
|
||||
displayLabel,
|
||||
color: seriesColors[index],
|
||||
width: itemWidth,
|
||||
height: metrics.height,
|
||||
};
|
||||
});
|
||||
const maxLegendHalfHeight = Math.max(
|
||||
RADAR_LEGEND_SWATCH_SIZE / 2,
|
||||
...legendItems.map((item) => item.height / 2),
|
||||
);
|
||||
const legendY = Math.max(
|
||||
fallbackLegendY,
|
||||
minLegendTopY + maxLegendHalfHeight + RADAR_LABEL_OFFSET,
|
||||
);
|
||||
|
||||
const pillPaddingX = RADAR_LEGEND_ITEM_GAP;
|
||||
const pillPaddingY = RADAR_LEGEND_SWATCH_SIZE * 0.6;
|
||||
const totalLegendWidth =
|
||||
legendItems.reduce((total, item) => total + item.width, 0) +
|
||||
RADAR_LEGEND_ITEM_GAP * Math.max(0, legendItems.length - 1);
|
||||
const pillWidth = totalLegendWidth + pillPaddingX * 2;
|
||||
const pillHeight = maxLegendHalfHeight * 2 + pillPaddingY * 2;
|
||||
|
||||
const legendElements: NonDeletedExcalidrawElement[] = [];
|
||||
|
||||
// rounded pill background
|
||||
legendElements.push(
|
||||
newElement({
|
||||
...commonProps,
|
||||
backgroundColor: "transparent",
|
||||
type: "rectangle",
|
||||
fillStyle: "solid",
|
||||
strokeColor: COLOR_PALETTE.black,
|
||||
x: centerX - pillWidth / 2,
|
||||
y: legendY - pillHeight / 2,
|
||||
width: pillWidth,
|
||||
height: pillHeight,
|
||||
roughness: ROUGHNESS.architect,
|
||||
roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
|
||||
}),
|
||||
);
|
||||
|
||||
let cursorX = centerX - totalLegendWidth / 2;
|
||||
|
||||
legendItems.forEach((item) => {
|
||||
// solid filled swatch
|
||||
legendElements.push(
|
||||
newElement({
|
||||
...commonProps,
|
||||
backgroundColor: item.color,
|
||||
type: "rectangle",
|
||||
x: cursorX,
|
||||
y: legendY - RADAR_LEGEND_SWATCH_SIZE / 2,
|
||||
width: RADAR_LEGEND_SWATCH_SIZE,
|
||||
height: RADAR_LEGEND_SWATCH_SIZE,
|
||||
fillStyle: "solid",
|
||||
strokeColor: item.color,
|
||||
roughness: ROUGHNESS.architect,
|
||||
roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
|
||||
}),
|
||||
);
|
||||
|
||||
// label in default (black) color
|
||||
legendElements.push(
|
||||
newTextElement({
|
||||
...commonProps,
|
||||
text: item.displayLabel,
|
||||
originalText: item.label,
|
||||
autoResize: false,
|
||||
x: cursorX + RADAR_LEGEND_SWATCH_SIZE + RADAR_LEGEND_TEXT_GAP,
|
||||
y: legendY,
|
||||
fontFamily,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
textAlign: "left",
|
||||
verticalAlign: "middle",
|
||||
}),
|
||||
);
|
||||
|
||||
cursorX += item.width + RADAR_LEGEND_ITEM_GAP;
|
||||
});
|
||||
|
||||
return legendElements;
|
||||
};
|
||||
|
||||
const ellipsifyTextToWidth = (
|
||||
text: string,
|
||||
maxWidth: number,
|
||||
fontString: ReturnType<typeof getFontString>,
|
||||
lineHeight: ExcalidrawTextElement["lineHeight"],
|
||||
) => {
|
||||
if (measureText(text, fontString, lineHeight).width <= maxWidth) {
|
||||
return text;
|
||||
}
|
||||
|
||||
let end = text.length;
|
||||
while (end > 1) {
|
||||
const candidate = `${text.slice(0, end)}...`;
|
||||
if (measureText(candidate, fontString, lineHeight).width <= maxWidth) {
|
||||
return candidate;
|
||||
}
|
||||
end--;
|
||||
}
|
||||
|
||||
return text[0] ? `${text[0]}...` : text;
|
||||
};
|
||||
|
||||
const wrapOrEllipsifyTextToWidth = (
|
||||
text: string,
|
||||
maxWidth: number,
|
||||
fontString: ReturnType<typeof getFontString>,
|
||||
lineHeight: ExcalidrawTextElement["lineHeight"],
|
||||
) => {
|
||||
if (measureText(text, fontString, lineHeight).width <= maxWidth) {
|
||||
return { wrapped: false, text };
|
||||
}
|
||||
|
||||
const words = text.trim().split(/\s+/).filter(Boolean);
|
||||
if (words.length > 1) {
|
||||
const hasLongWord = words.some((word) => {
|
||||
return measureText(word, fontString, lineHeight).width > maxWidth;
|
||||
});
|
||||
if (
|
||||
!hasLongWord &&
|
||||
maxWidth >= getApproxMinLineWidth(fontString, lineHeight)
|
||||
) {
|
||||
return { wrapped: true, text: wrapText(text, fontString, maxWidth) };
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
wrapped: false,
|
||||
text: ellipsifyTextToWidth(text, maxWidth, fontString, lineHeight),
|
||||
};
|
||||
};
|
||||
|
||||
const getRotatedBoundingBox = (
|
||||
width: number,
|
||||
height: number,
|
||||
angle: number,
|
||||
) => {
|
||||
const cos = Math.abs(Math.cos(angle));
|
||||
const sin = Math.abs(Math.sin(angle));
|
||||
return {
|
||||
width: width * cos + height * sin,
|
||||
height: width * sin + height * cos,
|
||||
};
|
||||
};
|
||||
|
||||
type CartesianAxisLabelSpec = {
|
||||
originalText: string;
|
||||
text: string;
|
||||
wrapped: boolean;
|
||||
metrics: ReturnType<typeof measureText>;
|
||||
rotatedWidth: number;
|
||||
rotatedHeight: number;
|
||||
};
|
||||
|
||||
const isEllipsifiedLabel = (text: string) => text.includes("...");
|
||||
|
||||
const getCartesianAxisLabelSpec = (
|
||||
label: string,
|
||||
maxLabelWidth: number,
|
||||
maxRotatedWidth: number,
|
||||
fontString: ReturnType<typeof getFontString>,
|
||||
lineHeight: ExcalidrawTextElement["lineHeight"],
|
||||
): CartesianAxisLabelSpec => {
|
||||
const minWidth = Math.max(
|
||||
CARTESIAN_LABEL_MIN_WIDTH,
|
||||
Math.ceil(getApproxMinLineWidth(fontString, lineHeight)),
|
||||
);
|
||||
const maxWidth = Math.max(minWidth, Math.floor(maxLabelWidth));
|
||||
const candidateWidths: number[] = [];
|
||||
for (let width = maxWidth; width >= minWidth; width -= 4) {
|
||||
candidateWidths.push(width);
|
||||
}
|
||||
if (candidateWidths[candidateWidths.length - 1] !== minWidth) {
|
||||
candidateWidths.push(minWidth);
|
||||
}
|
||||
|
||||
const getRank = (spec: CartesianAxisLabelSpec) => {
|
||||
const ellipsified = isEllipsifiedLabel(spec.text);
|
||||
const visibleChars = spec.text
|
||||
.replace(/\.\.\./g, "")
|
||||
.replace(/\n/g, "").length;
|
||||
const lineCount = spec.text.split("\n").length;
|
||||
return {
|
||||
ellipsified,
|
||||
visibleChars,
|
||||
lineCount,
|
||||
};
|
||||
};
|
||||
|
||||
const shouldPrefer = (
|
||||
candidate: CartesianAxisLabelSpec,
|
||||
current: CartesianAxisLabelSpec,
|
||||
) => {
|
||||
const candidateRank = getRank(candidate);
|
||||
const currentRank = getRank(current);
|
||||
if (candidateRank.ellipsified !== currentRank.ellipsified) {
|
||||
return !candidateRank.ellipsified;
|
||||
}
|
||||
if (candidateRank.visibleChars !== currentRank.visibleChars) {
|
||||
return candidateRank.visibleChars > currentRank.visibleChars;
|
||||
}
|
||||
if (candidateRank.lineCount !== currentRank.lineCount) {
|
||||
return candidateRank.lineCount < currentRank.lineCount;
|
||||
}
|
||||
return candidate.rotatedHeight < current.rotatedHeight;
|
||||
};
|
||||
|
||||
let bestFit: CartesianAxisLabelSpec | null = null;
|
||||
let bestOverflowAny: {
|
||||
overflow: number;
|
||||
spec: CartesianAxisLabelSpec;
|
||||
} | null = null;
|
||||
let bestOverflowNonEllipsified: {
|
||||
overflow: number;
|
||||
spec: CartesianAxisLabelSpec;
|
||||
} | null = null;
|
||||
|
||||
for (const width of candidateWidths) {
|
||||
const { wrapped, text } = wrapOrEllipsifyTextToWidth(
|
||||
label,
|
||||
width,
|
||||
fontString,
|
||||
lineHeight,
|
||||
);
|
||||
const metrics = measureText(text, fontString, lineHeight);
|
||||
const rotated = getRotatedBoundingBox(
|
||||
metrics.width,
|
||||
metrics.height,
|
||||
CARTESIAN_LABEL_ROTATION,
|
||||
);
|
||||
const spec = {
|
||||
originalText: label,
|
||||
text,
|
||||
metrics,
|
||||
rotatedWidth: rotated.width,
|
||||
rotatedHeight: rotated.height,
|
||||
wrapped,
|
||||
};
|
||||
const overflow = rotated.width - maxRotatedWidth;
|
||||
if (overflow <= 0) {
|
||||
if (!bestFit || shouldPrefer(spec, bestFit)) {
|
||||
bestFit = spec;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (
|
||||
!bestOverflowAny ||
|
||||
overflow < bestOverflowAny.overflow ||
|
||||
(overflow === bestOverflowAny.overflow &&
|
||||
shouldPrefer(spec, bestOverflowAny.spec))
|
||||
) {
|
||||
bestOverflowAny = { overflow, spec };
|
||||
}
|
||||
if (
|
||||
!isEllipsifiedLabel(spec.text) &&
|
||||
(!bestOverflowNonEllipsified ||
|
||||
overflow < bestOverflowNonEllipsified.overflow ||
|
||||
(overflow === bestOverflowNonEllipsified.overflow &&
|
||||
shouldPrefer(spec, bestOverflowNonEllipsified.spec)))
|
||||
) {
|
||||
bestOverflowNonEllipsified = { overflow, spec };
|
||||
}
|
||||
}
|
||||
|
||||
if (bestFit) {
|
||||
return bestFit;
|
||||
}
|
||||
|
||||
if (
|
||||
bestOverflowNonEllipsified &&
|
||||
bestOverflowAny &&
|
||||
bestOverflowNonEllipsified.overflow <=
|
||||
bestOverflowAny.overflow + CARTESIAN_LABEL_OVERFLOW_PREFERENCE_BUFFER
|
||||
) {
|
||||
return bestOverflowNonEllipsified.spec;
|
||||
}
|
||||
|
||||
return bestOverflowAny!.spec;
|
||||
};
|
||||
|
||||
export const getRotatedTextElementBottom = (
|
||||
element: NonDeletedExcalidrawElement,
|
||||
) => {
|
||||
if (element.type !== "text") {
|
||||
return element.y + element.height;
|
||||
}
|
||||
const rotated = getRotatedBoundingBox(
|
||||
element.width,
|
||||
element.height,
|
||||
element.angle,
|
||||
);
|
||||
return element.y + element.height / 2 + rotated.height / 2;
|
||||
};
|
||||
|
||||
export const chartXLabels = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
backgroundColor: string,
|
||||
layout: CartesianChartLayout,
|
||||
): ChartElements => {
|
||||
const fontFamily = commonProps.fontFamily;
|
||||
const fontSize = FONT_SIZES.sm;
|
||||
const lineHeight = getLineHeight(fontFamily);
|
||||
const fontString = getFontString({ fontFamily, fontSize });
|
||||
const maxRotatedWidth = Math.max(
|
||||
1,
|
||||
layout.slotWidth +
|
||||
layout.gap -
|
||||
CARTESIAN_LABEL_SLOT_PADDING * 2 +
|
||||
CARTESIAN_LABEL_ROTATED_WIDTH_BUFFER,
|
||||
);
|
||||
const axisY = y;
|
||||
|
||||
return (
|
||||
spreadsheet.labels?.map((label, index) => {
|
||||
const labelSpec = getCartesianAxisLabelSpec(
|
||||
label,
|
||||
layout.xLabelMaxWidth,
|
||||
maxRotatedWidth,
|
||||
fontString,
|
||||
lineHeight,
|
||||
);
|
||||
const centerX =
|
||||
x +
|
||||
index * (layout.slotWidth + layout.gap) +
|
||||
layout.gap +
|
||||
layout.slotWidth / 2;
|
||||
const labelY =
|
||||
axisY +
|
||||
CARTESIAN_LABEL_AXIS_CLEARANCE +
|
||||
(labelSpec.rotatedHeight - labelSpec.metrics.height) / 2;
|
||||
|
||||
return newTextElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
text: labelSpec.text,
|
||||
originalText: labelSpec.wrapped ? label : labelSpec.text,
|
||||
autoResize: !labelSpec.wrapped,
|
||||
x: centerX,
|
||||
y: labelY,
|
||||
angle: CARTESIAN_LABEL_ROTATION,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
textAlign: "center",
|
||||
verticalAlign: "top",
|
||||
});
|
||||
}) || []
|
||||
);
|
||||
};
|
||||
|
||||
const chartYLabels = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
backgroundColor: string,
|
||||
layout: CartesianChartLayout,
|
||||
maxValue = Math.max(...spreadsheet.series[0].values),
|
||||
): ChartElements => {
|
||||
const minYLabel = newTextElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
x: x - layout.gap,
|
||||
y: y - layout.gap,
|
||||
text: "0",
|
||||
textAlign: "right",
|
||||
});
|
||||
|
||||
const maxYLabel = newTextElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
x: x - layout.gap,
|
||||
y: y - layout.chartHeight - minYLabel.height / 2,
|
||||
text: maxValue.toLocaleString(),
|
||||
textAlign: "right",
|
||||
});
|
||||
|
||||
return [minYLabel, maxYLabel];
|
||||
};
|
||||
|
||||
const chartLines = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
backgroundColor: string,
|
||||
layout: CartesianChartLayout,
|
||||
): ChartElements => {
|
||||
const { chartWidth, chartHeight } = getChartDimensions(spreadsheet, layout);
|
||||
const xLine = newLinearElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x,
|
||||
y,
|
||||
width: chartWidth,
|
||||
points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
|
||||
});
|
||||
|
||||
const yLine = newLinearElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x,
|
||||
y,
|
||||
height: chartHeight,
|
||||
points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
|
||||
});
|
||||
|
||||
const maxLine = newLinearElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x,
|
||||
y: y - layout.chartHeight - layout.gap,
|
||||
strokeStyle: "dotted",
|
||||
width: chartWidth,
|
||||
opacity: GRID_OPACITY,
|
||||
points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
|
||||
});
|
||||
|
||||
return [xLine, yLine, maxLine];
|
||||
};
|
||||
|
||||
// For the maths behind it https://excalidraw.com/#json=6320864370884608,O_5xfD-Agh32tytHpRJx1g
|
||||
export const chartBaseElements = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
backgroundColor: string,
|
||||
layout: CartesianChartLayout,
|
||||
maxValue = Math.max(...spreadsheet.series[0].values),
|
||||
debug?: boolean,
|
||||
): ChartElements => {
|
||||
const { chartWidth, chartHeight } = getChartDimensions(spreadsheet, layout);
|
||||
|
||||
const title = spreadsheet.title
|
||||
? newTextElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
text: spreadsheet.title,
|
||||
x: x + chartWidth / 2,
|
||||
y: y - layout.chartHeight - layout.gap * 2 - DEFAULT_FONT_SIZE,
|
||||
roundness: null,
|
||||
textAlign: "center",
|
||||
fontSize: FONT_SIZES.xl,
|
||||
fontFamily: FONT_FAMILY["Lilita One"],
|
||||
})
|
||||
: null;
|
||||
|
||||
const debugRect = debug
|
||||
? newElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
type: "rectangle",
|
||||
x,
|
||||
y: y - chartHeight,
|
||||
width: chartWidth,
|
||||
height: chartHeight,
|
||||
strokeColor: COLOR_PALETTE.black,
|
||||
fillStyle: "solid",
|
||||
opacity: 6,
|
||||
})
|
||||
: null;
|
||||
|
||||
return [
|
||||
...(debugRect ? [debugRect] : []),
|
||||
...(title ? [title] : []),
|
||||
...chartXLabels(spreadsheet, x, y, backgroundColor, layout),
|
||||
...chartYLabels(spreadsheet, x, y, backgroundColor, layout, maxValue),
|
||||
...chartLines(spreadsheet, x, y, backgroundColor, layout),
|
||||
];
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
import { pointFrom } from "@excalidraw/math";
|
||||
|
||||
import { isDevEnv } from "@excalidraw/common";
|
||||
|
||||
import { newElement, newLinearElement } from "@excalidraw/element";
|
||||
|
||||
import type { LocalPoint } from "@excalidraw/math";
|
||||
|
||||
import { GRID_OPACITY, commonProps } from "./charts.constants";
|
||||
import {
|
||||
chartBaseElements,
|
||||
chartXLabels,
|
||||
createSeriesLegend,
|
||||
getBackgroundColor,
|
||||
getCartesianChartLayout,
|
||||
getChartDimensions,
|
||||
getColorOffset,
|
||||
getRotatedTextElementBottom,
|
||||
getSeriesColors,
|
||||
} from "./charts.helpers";
|
||||
|
||||
import type { ChartElements, Spreadsheet } from "./charts.types";
|
||||
|
||||
export const renderLineChart = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
colorSeed?: number,
|
||||
): ChartElements => {
|
||||
const series = spreadsheet.series;
|
||||
const layout = getCartesianChartLayout("line", series.length);
|
||||
const max = Math.max(1, ...series.flatMap((seriesData) => seriesData.values));
|
||||
const colorOffset = getColorOffset(colorSeed);
|
||||
const backgroundColor = getBackgroundColor(colorOffset);
|
||||
const seriesColors = getSeriesColors(series.length, colorOffset);
|
||||
|
||||
const lines = series.map((seriesData, seriesIndex) => {
|
||||
const points = seriesData.values.map((value, valueIndex) =>
|
||||
pointFrom<LocalPoint>(
|
||||
valueIndex * (layout.slotWidth + layout.gap),
|
||||
-(value / max) * layout.chartHeight,
|
||||
),
|
||||
);
|
||||
|
||||
const maxX = Math.max(...points.map((point) => point[0]));
|
||||
const maxY = Math.max(...points.map((point) => point[1]));
|
||||
const minX = Math.min(...points.map((point) => point[0]));
|
||||
const minY = Math.min(...points.map((point) => point[1]));
|
||||
|
||||
return newLinearElement({
|
||||
backgroundColor: "transparent",
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x: x + layout.gap + layout.slotWidth / 2,
|
||||
y: y - layout.gap,
|
||||
height: maxY - minY,
|
||||
width: maxX - minX,
|
||||
strokeColor: seriesColors[seriesIndex],
|
||||
strokeWidth: 2,
|
||||
points,
|
||||
});
|
||||
});
|
||||
|
||||
const dots = series.flatMap((seriesData, seriesIndex) =>
|
||||
seriesData.values.map((value, valueIndex) => {
|
||||
const cx = valueIndex * (layout.slotWidth + layout.gap) + layout.gap / 2;
|
||||
const cy = -(value / max) * layout.chartHeight + layout.gap / 2;
|
||||
return newElement({
|
||||
backgroundColor: seriesColors[seriesIndex],
|
||||
...commonProps,
|
||||
fillStyle: "solid",
|
||||
strokeColor: seriesColors[seriesIndex],
|
||||
strokeWidth: 2,
|
||||
type: "ellipse",
|
||||
x: x + cx + layout.slotWidth / 2,
|
||||
y: y + cy - layout.gap * 2,
|
||||
width: layout.gap,
|
||||
height: layout.gap,
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
const guideValues = series[0].values.map((_, valueIndex) =>
|
||||
Math.max(
|
||||
0,
|
||||
...series.map((seriesData) => seriesData.values[valueIndex] ?? 0),
|
||||
),
|
||||
);
|
||||
const guides = guideValues.map((value, valueIndex) => {
|
||||
const cx = valueIndex * (layout.slotWidth + layout.gap) + layout.gap / 2;
|
||||
const cy = (value / max) * layout.chartHeight + layout.gap / 2 + layout.gap;
|
||||
return newLinearElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x: x + cx + layout.slotWidth / 2 + layout.gap / 2,
|
||||
y: y - cy,
|
||||
height: cy,
|
||||
strokeStyle: "dotted",
|
||||
opacity: GRID_OPACITY,
|
||||
points: [pointFrom(0, 0), pointFrom(0, cy)],
|
||||
});
|
||||
});
|
||||
|
||||
const baseElements = chartBaseElements(
|
||||
spreadsheet,
|
||||
x,
|
||||
y,
|
||||
backgroundColor,
|
||||
layout,
|
||||
max,
|
||||
isDevEnv(),
|
||||
);
|
||||
const xLabels = chartXLabels(spreadsheet, x, y, backgroundColor, layout);
|
||||
const xLabelsBottomY = Math.max(
|
||||
y + layout.gap / 2,
|
||||
...xLabels.map((label) => getRotatedTextElementBottom(label)),
|
||||
);
|
||||
const { chartWidth } = getChartDimensions(spreadsheet, layout);
|
||||
const seriesLegend = createSeriesLegend(
|
||||
series,
|
||||
seriesColors,
|
||||
x + chartWidth / 2,
|
||||
xLabelsBottomY,
|
||||
y + layout.gap * 5,
|
||||
backgroundColor,
|
||||
);
|
||||
|
||||
return [...baseElements, ...lines, ...guides, ...dots, ...seriesLegend];
|
||||
};
|
||||
@@ -0,0 +1,174 @@
|
||||
import { type ParseSpreadsheetResult } from "./charts.types";
|
||||
|
||||
/**
|
||||
* @private exported for testing
|
||||
*/
|
||||
export const tryParseNumber = (s: string): number | null => {
|
||||
const match =
|
||||
/^([-+]?)[$\u20AC\u00A3\u00A5\u20A9]?([-+]?)([\d.,]+)[%]?$/.exec(s);
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
|
||||
};
|
||||
|
||||
const isNumericColumn = (lines: string[][], columnIndex: number) =>
|
||||
lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
|
||||
|
||||
/**
|
||||
* @private exported for testing
|
||||
*/
|
||||
export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
|
||||
const numCols = cells[0].length;
|
||||
|
||||
if (numCols > 2) {
|
||||
const hasHeader = cells[0].every((cell) => tryParseNumber(cell) === null);
|
||||
const rows = hasHeader ? cells.slice(1) : cells;
|
||||
|
||||
if (rows.length < 1) {
|
||||
return { ok: false, reason: "No data rows" };
|
||||
}
|
||||
|
||||
const invalidNumericColumn = rows.some((row) =>
|
||||
row.slice(1).some((value) => tryParseNumber(value) === null),
|
||||
);
|
||||
if (invalidNumericColumn) {
|
||||
return { ok: false, reason: "Value is not numeric" };
|
||||
}
|
||||
|
||||
// When there are more value columns than data rows, the data is in
|
||||
// "wide" format — transpose so columns become labels (dimensions)
|
||||
// and rows become series. This enables e.g. radar charts for wide data.
|
||||
const numValueCols = numCols - 1;
|
||||
if (numValueCols > rows.length) {
|
||||
const labels = hasHeader ? cells[0].slice(1).map((h) => h.trim()) : null;
|
||||
const series = rows.map((row) => ({
|
||||
title: row[0]?.trim() || null,
|
||||
values: row.slice(1).map((v) => tryParseNumber(v)!),
|
||||
}));
|
||||
const title =
|
||||
series.length === 1
|
||||
? series[0].title
|
||||
: hasHeader
|
||||
? cells[0][0].trim() || null
|
||||
: null;
|
||||
return {
|
||||
ok: true,
|
||||
data: { title, labels, series },
|
||||
};
|
||||
}
|
||||
|
||||
const series = cells[0].slice(1).map((seriesTitle, index) => {
|
||||
const valueColumnIndex = index + 1;
|
||||
const fallbackTitle = `Series ${valueColumnIndex}`;
|
||||
return {
|
||||
title: hasHeader ? seriesTitle.trim() || fallbackTitle : fallbackTitle,
|
||||
values: rows.map((row) => tryParseNumber(row[valueColumnIndex])!),
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
data: {
|
||||
title: hasHeader ? cells[0][0].trim() || null : null,
|
||||
labels: rows.map((row) => row[0]),
|
||||
series,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (numCols === 1) {
|
||||
if (!isNumericColumn(cells, 0)) {
|
||||
return { ok: false, reason: "Value is not numeric" };
|
||||
}
|
||||
|
||||
const hasHeader = tryParseNumber(cells[0][0]) === null;
|
||||
const title = hasHeader ? cells[0][0] : null;
|
||||
const values = (hasHeader ? cells.slice(1) : cells).map((line) =>
|
||||
tryParseNumber(line[0]),
|
||||
);
|
||||
|
||||
if (values.length < 2) {
|
||||
return { ok: false, reason: "Less than two rows" };
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
data: {
|
||||
title,
|
||||
labels: null,
|
||||
series: [{ title, values: values as number[] }],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const hasHeader = tryParseNumber(cells[0][1]) === null;
|
||||
const rows = hasHeader ? cells.slice(1) : cells;
|
||||
|
||||
if (rows.length < 2) {
|
||||
return { ok: false, reason: "Less than 2 rows" };
|
||||
}
|
||||
|
||||
const invalidNumericColumn = rows.some(
|
||||
(row) => tryParseNumber(row[1]) === null,
|
||||
);
|
||||
if (invalidNumericColumn) {
|
||||
return { ok: false, reason: "Value is not numeric" };
|
||||
}
|
||||
|
||||
const title = hasHeader ? cells[0][1] : null;
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
data: {
|
||||
title,
|
||||
labels: rows.map((row) => row[0]),
|
||||
series: [{ title, values: rows.map((row) => tryParseNumber(row[1])!) }],
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
|
||||
// Copy/paste from excel, spreadsheets, TSV, CSV, semicolon-separated.
|
||||
const parseDelimitedLines = (delimiter: "\t" | "," | ";") =>
|
||||
text
|
||||
.replace(/\r\n?/g, "\n")
|
||||
.split("\n")
|
||||
.filter((line) => line.trim().length > 0)
|
||||
.map((line) => line.split(delimiter).map((cell) => cell.trim()));
|
||||
|
||||
// Score each delimiter: prefer consistent column counts with the most columns.
|
||||
// A delimiter that produces all single-column rows likely isn't the right one.
|
||||
const candidates = (["\t", ",", ";"] as const).map((delimiter) => {
|
||||
const parsed = parseDelimitedLines(delimiter);
|
||||
const numCols = parsed[0]?.length ?? 0;
|
||||
const isConsistent =
|
||||
parsed.length > 0 && parsed.every((line) => line.length === numCols);
|
||||
return { delimiter, parsed, numCols, isConsistent };
|
||||
});
|
||||
|
||||
// Prefer: consistent + most columns. Among ties, tab > comma > semicolon
|
||||
// (the array order already encodes this priority).
|
||||
const best =
|
||||
candidates.find((c) => c.isConsistent && c.numCols > 1) ??
|
||||
candidates.find((c) => c.isConsistent) ??
|
||||
candidates[0];
|
||||
|
||||
const lines = best.parsed;
|
||||
|
||||
if (lines.length === 0) {
|
||||
return { ok: false, reason: "No values" };
|
||||
}
|
||||
|
||||
const numColsFirstLine = lines[0].length;
|
||||
const isSpreadsheet = lines.every((line) => line.length === numColsFirstLine);
|
||||
|
||||
if (!isSpreadsheet) {
|
||||
return {
|
||||
ok: false,
|
||||
reason: "All rows don't have same number of columns",
|
||||
};
|
||||
}
|
||||
|
||||
return tryParseCells(lines);
|
||||
};
|
||||
@@ -0,0 +1,199 @@
|
||||
import { pointFrom } from "@excalidraw/math";
|
||||
|
||||
import {
|
||||
FONT_FAMILY,
|
||||
FONT_SIZES,
|
||||
getFontString,
|
||||
getLineHeight,
|
||||
ROUGHNESS,
|
||||
} from "@excalidraw/common";
|
||||
|
||||
import {
|
||||
measureText,
|
||||
newLinearElement,
|
||||
newTextElement,
|
||||
} from "@excalidraw/element";
|
||||
|
||||
import type { LocalPoint } from "@excalidraw/math";
|
||||
|
||||
import {
|
||||
BAR_GAP,
|
||||
BAR_HEIGHT,
|
||||
GRID_OPACITY,
|
||||
RADAR_GRID_LEVELS,
|
||||
RADAR_LABEL_OFFSET,
|
||||
commonProps,
|
||||
} from "./charts.constants";
|
||||
import {
|
||||
createRadarAxisLabels,
|
||||
createSeriesLegend,
|
||||
getBackgroundColor,
|
||||
getColorOffset,
|
||||
getRadarDimensions,
|
||||
getRadarDisplayText,
|
||||
getRadarValueScale,
|
||||
getSeriesColors,
|
||||
isSpreadsheetValidForChartType,
|
||||
} from "./charts.helpers";
|
||||
|
||||
import type { ChartElements, Spreadsheet } from "./charts.types";
|
||||
|
||||
export const renderRadarChart = (
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
colorSeed?: number,
|
||||
): ChartElements | null => {
|
||||
if (!isSpreadsheetValidForChartType(spreadsheet, "radar")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const labels =
|
||||
spreadsheet.labels ??
|
||||
spreadsheet.series[0].values.map((_, index) => `Value ${index + 1}`);
|
||||
|
||||
const series = spreadsheet.series;
|
||||
const { normalize, renderSteps } = getRadarValueScale(series, labels.length);
|
||||
const colorOffset = getColorOffset(colorSeed);
|
||||
const backgroundColor = getBackgroundColor(colorOffset);
|
||||
const seriesColors = getSeriesColors(series.length, colorOffset);
|
||||
const { chartWidth, chartHeight } = getRadarDimensions();
|
||||
const centerX = x + chartWidth / 2;
|
||||
const centerY = y - chartHeight / 2;
|
||||
const radius = BAR_HEIGHT / 2;
|
||||
const angles = labels.map(
|
||||
(_, index) => -Math.PI / 2 + (Math.PI * 2 * index) / labels.length,
|
||||
);
|
||||
|
||||
const { axisLabels, axisLabelTopY, axisLabelBottomY } = createRadarAxisLabels(
|
||||
labels,
|
||||
angles,
|
||||
centerX,
|
||||
centerY,
|
||||
radius,
|
||||
backgroundColor,
|
||||
);
|
||||
|
||||
const titleFontFamily = FONT_FAMILY["Lilita One"];
|
||||
const titleFontSize = FONT_SIZES.xl;
|
||||
const titleLineHeight = getLineHeight(titleFontFamily);
|
||||
const titleFontString = getFontString({
|
||||
fontFamily: titleFontFamily,
|
||||
fontSize: titleFontSize,
|
||||
});
|
||||
const titleText = spreadsheet.title
|
||||
? getRadarDisplayText(
|
||||
spreadsheet.title,
|
||||
titleFontString,
|
||||
chartWidth + RADAR_LABEL_OFFSET * 2,
|
||||
)
|
||||
: null;
|
||||
const titleTextMetrics = titleText
|
||||
? measureText(titleText, titleFontString, titleLineHeight)
|
||||
: null;
|
||||
const title = titleText
|
||||
? newTextElement({
|
||||
backgroundColor,
|
||||
...commonProps,
|
||||
text: titleText,
|
||||
originalText: spreadsheet.title ?? titleText,
|
||||
x: x + chartWidth / 2,
|
||||
y: axisLabelTopY - RADAR_LABEL_OFFSET - titleTextMetrics!.height / 2,
|
||||
fontFamily: titleFontFamily,
|
||||
fontSize: titleFontSize,
|
||||
lineHeight: titleLineHeight,
|
||||
textAlign: "center",
|
||||
})
|
||||
: null;
|
||||
|
||||
const radarGridLines = renderSteps
|
||||
? Array.from({ length: RADAR_GRID_LEVELS }, (_, levelIndex) => {
|
||||
const levelRatio = (levelIndex + 1) / RADAR_GRID_LEVELS;
|
||||
const levelRadius = radius * levelRatio;
|
||||
const points = angles.map((angle) =>
|
||||
pointFrom<LocalPoint>(
|
||||
Math.cos(angle) * levelRadius,
|
||||
Math.sin(angle) * levelRadius,
|
||||
),
|
||||
);
|
||||
points.push(pointFrom(points[0][0], points[0][1]));
|
||||
|
||||
return newLinearElement({
|
||||
backgroundColor: "transparent",
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
width: levelRadius * 2,
|
||||
height: levelRadius * 2,
|
||||
strokeStyle: "solid",
|
||||
roughness: ROUGHNESS.architect,
|
||||
opacity: GRID_OPACITY,
|
||||
polygon: true,
|
||||
points,
|
||||
});
|
||||
})
|
||||
: [];
|
||||
|
||||
const spokes = angles.map((angle) => {
|
||||
const px = Math.cos(angle) * radius;
|
||||
const py = Math.sin(angle) * radius;
|
||||
return newLinearElement({
|
||||
backgroundColor: "transparent",
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
width: Math.abs(px),
|
||||
height: Math.abs(py),
|
||||
strokeStyle: "solid",
|
||||
roughness: ROUGHNESS.architect,
|
||||
opacity: GRID_OPACITY,
|
||||
points: [pointFrom(0, 0), pointFrom(px, py)],
|
||||
});
|
||||
});
|
||||
|
||||
const seriesPolygons = series.map((seriesData, index) => {
|
||||
const points = angles.map((angle, axisIndex) => {
|
||||
const value = seriesData.values[axisIndex] ?? 0;
|
||||
const pointRadius = normalize(value, axisIndex) * radius;
|
||||
return pointFrom<LocalPoint>(
|
||||
Math.cos(angle) * pointRadius,
|
||||
Math.sin(angle) * pointRadius,
|
||||
);
|
||||
});
|
||||
points.push(pointFrom(points[0][0], points[0][1]));
|
||||
|
||||
return newLinearElement({
|
||||
backgroundColor: "transparent",
|
||||
...commonProps,
|
||||
type: "line",
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
width: radius * 2,
|
||||
height: radius * 2,
|
||||
strokeColor: seriesColors[index],
|
||||
strokeWidth: 2,
|
||||
polygon: true,
|
||||
points,
|
||||
});
|
||||
});
|
||||
|
||||
const seriesLegend = createSeriesLegend(
|
||||
series,
|
||||
seriesColors,
|
||||
centerX,
|
||||
axisLabelBottomY,
|
||||
y + BAR_GAP * 5,
|
||||
backgroundColor,
|
||||
);
|
||||
|
||||
return [
|
||||
...(title ? [title] : []),
|
||||
...axisLabels,
|
||||
...radarGridLines,
|
||||
...spokes,
|
||||
...seriesPolygons,
|
||||
...seriesLegend,
|
||||
];
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
|
||||
|
||||
export type ChartElements = readonly NonDeletedExcalidrawElement[];
|
||||
|
||||
export interface Spreadsheet {
|
||||
title: string | null;
|
||||
labels: string[] | null;
|
||||
series: SpreadsheetSeries[];
|
||||
}
|
||||
|
||||
export interface SpreadsheetSeries {
|
||||
title: string | null;
|
||||
values: number[];
|
||||
}
|
||||
|
||||
export type ParseSpreadsheetResult =
|
||||
| { ok: false; reason: string }
|
||||
| { ok: true; data: Spreadsheet };
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { ChartType } from "@excalidraw/element/types";
|
||||
|
||||
import { renderBarChart } from "./charts.bar";
|
||||
import { renderLineChart } from "./charts.line";
|
||||
import {
|
||||
tryParseCells,
|
||||
tryParseNumber,
|
||||
tryParseSpreadsheet,
|
||||
} from "./charts.parse";
|
||||
import { renderRadarChart } from "./charts.radar";
|
||||
|
||||
import type { ChartElements, Spreadsheet } from "./charts.types";
|
||||
|
||||
export {
|
||||
type ParseSpreadsheetResult,
|
||||
type Spreadsheet,
|
||||
type SpreadsheetSeries,
|
||||
type ChartElements,
|
||||
} from "./charts.types";
|
||||
|
||||
export { isSpreadsheetValidForChartType } from "./charts.helpers";
|
||||
export { tryParseCells, tryParseNumber, tryParseSpreadsheet };
|
||||
|
||||
export const renderSpreadsheet = (
|
||||
chartType: ChartType,
|
||||
spreadsheet: Spreadsheet,
|
||||
x: number,
|
||||
y: number,
|
||||
colorSeed?: number,
|
||||
): ChartElements | null => {
|
||||
if (chartType === "line") {
|
||||
return renderLineChart(spreadsheet, x, y, colorSeed);
|
||||
}
|
||||
if (chartType === "radar") {
|
||||
return renderRadarChart(spreadsheet, x, y, colorSeed);
|
||||
}
|
||||
return renderBarChart(spreadsheet, x, y, colorSeed);
|
||||
};
|
||||
Reference in New Issue
Block a user