echarts-dot

1import type * as echarts from "echarts/core";
2 
3// ─────────────────────────────────────────────────────────────────────────────
4// Dots — map the resting/active variants onto ECharts symbols. Shared by every
5// ECharts chart that draws point markers.
6// ─────────────────────────────────────────────────────────────────────────────
7 
8export type DotVariant = "none" | "default" | "border" | "colored-border" | "ping";
9 
10// Dot marker paint — structurally assignable to BOTH the series-level and the
11// per-datum itemStyle (the per-datum variant forbids callback color paints, so
12// the broader LineSeriesOption["itemStyle"] cannot be reused for it).
13export type DotItemStyleOption = {
14  color?: string | echarts.graphic.LinearGradient;
15  borderColor?: string | echarts.graphic.LinearGradient;
16  borderWidth?: number;
17  opacity?: number;
18};
19 
20export type DotStyle = { size: number; itemStyle: DotItemStyleOption };
21 
22// Re-color a solid paint at a given alpha (hex #rgb/#rrggbb or rgb/rgba in, rgba
23// out; named colors pass through). Used for the translucent "ping" halo ring.
24function withAlpha(color: string, alpha: number): string {
25  if (color.startsWith("#")) {
26    let hex = color.slice(1);
27    if (hex.length === 3)
28      hex = hex
29        .split("")
30        .map((c) => c + c)
31        .join("");
32    const n = parseInt(hex, 16);
33    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
34  }
35  const m = color.match(/rgba?\(([^)]+)\)/);
36  if (m) {
37    const [r, g, b] = m[1].split(",").map((s) => parseFloat(s));
38    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
39  }
40  return color;
41}
42 
43export function dotItemStyle(
44  variant: DotVariant,
45  paint: string | echarts.graphic.LinearGradient,
46  background: string,
47): DotItemStyleOption {
48  switch (variant) {
49    case "border":
50      // Series-colored core with a thick background halo (Recharts r6 / sw5).
51      return { color: paint, borderColor: background, borderWidth: 2 };
52    case "colored-border":
53      // Background-filled core with a thin colored ring (Recharts r3 / sw1).
54      return { color: background, borderColor: paint, borderWidth: 1 };
55    case "ping": {
56// … truncated