@exegia/corpora-ui 2.0.0 → 3.0.0

package/src/components/composed/chat/chart/evilcharts/echarts-brush.tsx

@@ -0,0 +1,233 @@
+import { withAlpha, type ResolvedColors } from "./echarts-chart";
+import type { DataZoomComponentOption } from "echarts/components";
+import type { FC } from "react";
+import * as echarts from "echarts/core";
+
+type EChartsInstance = ReturnType<typeof echarts.init>;
+
+const BRUSH_BORDER_OPACITY = 1; // brush frame, × border alpha (evil-brush uses the full token)
+
+export { BRUSH_BORDER_OPACITY };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Brush marker — the declarative `<Chart.Brush/>` child. Rendering nothing, its
+// PRESENCE turns the brush on (replacing the old showBrush prop) and its props
+// carry the brush's height, handle-label formatter, and range callback. Shared
+// so every cartesian chart attaches the SAME component to its root.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface BrushProps {
+  height?: number; // brush preview strip height in px (default 56)
+  formatLabel?: (value: string, index: number) => string; // formats the range-handle labels
+  onChange?: (range: { startIndex: number; endIndex: number }) => void; // fires as the range moves
+}
+
+/** Declares the zoom brush below the chart. Presence renders it; renders nothing itself. */
+export const Brush: FC<BrushProps> = () => null;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Brush overlays — the evil-brush look: a rounded border around the SELECTED
+// range, dimmed unselected sides, centered grip-dot handle pills, and range
+// label pills below the frame. None of that is a dataZoom capability. They are
+// raw zrender elements updated imperatively — routing them through setOption
+// re-renders the dataZoom component mid-drag, resetting its drag anchor (the
+// handle progressively lags the pointer).
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type BrushRange = { start: number; end: number };
+export type BrushGeometry = { bottom: number; height: number };
+
+export type BrushOverlayParams = {
+  range: BrushRange;
+  geom: BrushGeometry;
+  size: { width: number; height: number };
+  tokens: ResolvedColors["tokens"];
+  labels: { start: string; end: string } | null;
+  showLabels: boolean;
+  hover: { left: boolean; right: boolean };
+};
+
+type ZrRect = InstanceType<typeof echarts.graphic.Rect>;
+type ZrCircle = InstanceType<typeof echarts.graphic.Circle>;
+type ZrText = InstanceType<typeof echarts.graphic.Text>;
+
+export type BrushOverlayElements = {
+  dimLeft: ZrRect;
+  dimRight: ZrRect;
+  frame: ZrRect;
+  pillLeft: ZrRect;
+  pillRight: ZrRect;
+  grips: ZrCircle[]; // 3 left + 3 right
+  labelStart: ZrText;
+  labelEnd: ZrText;
+};
+
+export function syncBrushOverlay(
+  chart: EChartsInstance,
+  store: { brushOverlay: BrushOverlayElements | null },
+  params: BrushOverlayParams | null,
+) {
+  const zr = chart.getZr();
+  if (!zr) return;
+
+  if (!params) {
+    if (store.brushOverlay) {
+      const { grips, ...rest } = store.brushOverlay;
+      [...Object.values(rest), ...grips].forEach((el) => zr.remove(el));
+      store.brushOverlay = null;
+    }
+    return;
+  }
+
+  if (!store.brushOverlay) {
+    const rect = (z: number) => new echarts.graphic.Rect({ silent: true, z, shape: {} });
+    const els: BrushOverlayElements = {
+      dimLeft: rect(100),
+      dimRight: rect(100),
+      frame: rect(101),
+      pillLeft: rect(102),
+      pillRight: rect(102),
+      grips: Array.from(
+        { length: 6 },
+        () => new echarts.graphic.Circle({ silent: true, z: 103, shape: {} }),
+      ),
+      labelStart: new echarts.graphic.Text({ silent: true, z: 104 }),
+      labelEnd: new echarts.graphic.Text({ silent: true, z: 104 }),
+    };
+    const { grips, ...rest } = els;
+    [...Object.values(rest), ...grips].forEach((el) => zr.add(el));
+    store.brushOverlay = els;
+  }
+
+  const els = store.brushOverlay;
+  const { range, geom, size, tokens, labels, showLabels, hover } = params;
+
+  const trackLeft = 8;
+  const trackRight = Math.max(size.width - 8, trackLeft);
+  const trackWidth = trackRight - trackLeft;
+  const top = size.height - geom.bottom - geom.height;
+  const centerY = top + geom.height / 2;
+  const selectionLeft = trackLeft + (trackWidth * range.start) / 100;
+  const selectionRight = trackLeft + (trackWidth * range.end) / 100;
+
+  const dimFill = withAlpha(tokens.background, 0.7);
+  els.dimLeft.setShape({
+    x: trackLeft,
+    y: top,
+    width: Math.max(selectionLeft - trackLeft, 0),
+    height: geom.height,
+  });
+  els.dimLeft.setStyle({ fill: dimFill });
+  els.dimRight.setShape({
+    x: selectionRight,
+    y: top,
+    width: Math.max(trackRight - selectionRight, 0),
+    height: geom.height,
+  });
+  els.dimRight.setStyle({ fill: dimFill });
+
+  els.frame.setShape({
+    x: selectionLeft,
+    y: top,
+    width: Math.max(selectionRight - selectionLeft, 0),
+    height: geom.height,
+    r: 6,
+  });
+  els.frame.setStyle({
+    fill: "none",
+    stroke: withAlpha(tokens.border, BRUSH_BORDER_OPACITY),
+    lineWidth: 1,
+  });
+
+  // Handle pills: evil-brush's 6×16 grip pill, centered on the selection edge,
+  // brightening to foreground on hover/drag.
+  const pill = (el: ZrRect, x: number, hovered: boolean) => {
+    el.setShape({ x: x - 3, y: centerY - 8, width: 6, height: 16, r: 3 });
+    el.setStyle({ fill: hovered ? tokens.foreground : tokens.mutedForeground });
+  };
+  pill(els.pillLeft, selectionLeft, hover.left);
+  pill(els.pillRight, selectionRight, hover.right);
+
+  const gripFill = withAlpha(tokens.background, 0.7);
+  [-4, 0, 4].forEach((offset, i) => {
+    els.grips[i].setShape({ cx: selectionLeft, cy: centerY + offset, r: 1 });
+    els.grips[i].setStyle({ fill: gripFill });
+    els.grips[i + 3].setShape({ cx: selectionRight, cy: centerY + offset, r: 1 });
+    els.grips[i + 3].setStyle({ fill: gripFill });
+  });
+
+  // Range label pills straddle the frame's bottom line — an overlay, so they
+  // occupy no layout space; half the pill sits above the line, half below. Each
+  // pill grows INWARD from its handle with a small inset, like the Recharts
+  // labels, instead of hanging past the frame edge.
+  const label = (el: ZrText, text: string, x: number, align: "left" | "right") => {
+    el.setStyle({
+      text,
+      x: align === "left" ? Math.max(x + 6, trackLeft + 2) : Math.min(x - 6, trackRight - 2),
+      y: top + geom.height,
+      align,
+      verticalAlign: "middle",
+      fill: tokens.background,
+      backgroundColor: tokens.foreground,
+      padding: [2, 5],
+      borderRadius: 4,
+      font: "500 9px system-ui, sans-serif",
+    });
+    el.attr("invisible", !showLabels || !text);
+  };
+  label(els.labelStart, labels?.start ?? "", selectionLeft, "left");
+  label(els.labelEnd, labels?.end ?? "", selectionRight, "right");
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// dataZoom slider — the transparent drag layer laid over the mini chart. Fully
+// chart-agnostic: the visible frame/handles/labels are the graphic overlays
+// above; this provides interaction only. Both zoom entries target only the MAIN
+// x-axis (index 0), so the mini chart never filters itself. The per-chart
+// mini-series (which differ per chart type) are built by the chart, not here.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function buildBrushDataZoom(params: {
+  brushBottom: number;
+  brushHeight: number;
+  brushRange: BrushRange;
+  fillerColor: string;
+}): DataZoomComponentOption[] {
+  const { brushBottom, brushHeight, brushRange, fillerColor } = params;
+
+  return [
+    {
+      type: "slider",
+      show: true,
+      xAxisIndex: [0],
+      left: 8,
+      right: 8,
+      bottom: brushBottom,
+      height: brushHeight,
+      // Carry the live range through every rebuild — a notMerge push
+      // without start/end would reset the zoom to the full extent.
+      start: brushRange.start,
+      end: brushRange.end,
+      brushSelect: false,
+      // Range labels are overlay pills below the frame (see
+      // syncBrushOverlay) — the native detail text renders INSIDE the
+      // track, which is not the evil-brush look.
+      showDetail: false,
+      backgroundColor: "transparent",
+      // The visible frame is the graphic overlay riding the selection —
+      // the component's own static border stays hidden.
+      borderColor: "transparent",
+      fillerColor,
+      dataBackground: { lineStyle: { opacity: 0 }, areaStyle: { opacity: 0 } },
+      selectedDataBackground: { lineStyle: { opacity: 0 }, areaStyle: { opacity: 0 } },
+      // Interaction only — the visible pills are graphic overlays (see
+      // syncBrushOverlay). Kept generous for an easy grab target.
+      handleIcon: "path://M -3 -5 L -3 5 A 3 3 0 0 0 3 5 L 3 -5 A 3 3 0 0 0 -3 -5 Z",
+      handleSize: "35%",
+      handleStyle: { opacity: 0 },
+      moveHandleSize: 0,
+      emphasis: { handleStyle: { opacity: 0 } },
+    },
+    { type: "inside", xAxisIndex: [0] },
+  ];
+}

package/src/components/composed/chat/chart/evilcharts/echarts-chart.tsx

@@ -0,0 +1,214 @@
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+import type { ComponentType, ReactNode } from "react";
+import * as echarts from "echarts/core";
+
+export const ECHARTS_RENDERERS = {
+  canvas: "canvas",
+  svg: "svg",
+} as const;
+
+export type EChartsRenderer = (typeof ECHARTS_RENDERERS)[keyof typeof ECHARTS_RENDERERS];
+
+export const DEFAULT_ECHARTS_RENDERER = ECHARTS_RENDERERS.canvas;
+
+// Renderer registration is shared by every modular ECharts chart. Individual
+// chart modules only register the series and components they use.
+echarts.use([CanvasRenderer, SVGRenderer]);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Theme keys + config — replicated from the repo's <ChartStyle> so the ECharts
+// charts stay self-contained (no recharts ui imports). Shared by every ECharts
+// chart and the tooltip/legend/brush ui modules.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Theme selectors mirror the repo's <ChartStyle>: light is the bare root, dark is `.dark`.
+export const THEMES = { light: "", dark: ".dark" } as const;
+export type ThemeKey = keyof typeof THEMES;
+export const THEME_KEYS = Object.keys(THEMES) as ThemeKey[];
+
+// Require at least one theme key — identical constraint to the repo's ChartConfig.
+export type AtLeastOneThemeColor =
+  | { light: string[]; dark?: string[] }
+  | { light?: string[]; dark: string[] };
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: ReactNode;
+    icon?: ComponentType;
+    colors?: AtLeastOneThemeColor;
+  }
+>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Color plumbing — replicated from the repo's <ChartStyle> so the charts stay
+// self-contained (no ./recharts imports).
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Max slots a key needs = longest color array across themes (min 1). Both themes
+// always emit the same number of `--color-{key}-{n}` vars.
+export function getColorsCount(item: ChartConfig[string]): number {
+  if (!item.colors) return 1;
+  const counts = THEME_KEYS.map((theme) => item.colors?.[theme]?.length ?? 0);
+  return Math.max(...counts, 1);
+}
+
+// Distribute colors evenly across slots; extra slots go to the LAST color(s).
+// 2 colors / 4 slots → [c0, c0, c1, c1]; 3 colors / 4 slots → [c0, c1, c2, c2].
+export function distributeColors(colors: string[], maxCount: number): string[] {
+  const available = colors.length;
+  if (available >= maxCount) return colors.slice(0, maxCount);
+
+  const result: string[] = [];
+  const baseSlots = Math.floor(maxCount / available);
+  const extraSlots = maxCount % available;
+
+  for (let i = 0; i < available; i++) {
+    const isExtra = i >= available - extraSlots;
+    const slots = baseSlots + (isExtra ? 1 : 0);
+    for (let j = 0; j < slots; j++) result.push(colors[i]);
+  }
+
+  return result;
+}
+
+// Emits the same CSS <ChartStyle> would: `--color-{key}-{n}` scoped to
+// `[data-chart={id}]` (light) and `.dark [data-chart={id}]` (dark).
+export function buildChartCss(id: string, config: ChartConfig): string {
+  const colorConfig = Object.entries(config).filter(([, item]) => item.colors);
+  if (!colorConfig.length) return "";
+
+  const varsFor = (theme: ThemeKey) =>
+    colorConfig
+      .flatMap(([key, item]) => {
+        const authored = item.colors?.[theme];
+        if (!authored || authored.length === 0) return [];
+        return distributeColors(authored, getColorsCount(item)).map(
+          (color, index) => `  --color-${key.replace(/[^a-zA-Z0-9_-]/g, character => "\\" + character.codePointAt(0)!.toString(16) + " ")}-${index}: ${color};`,
+        );
+      })
+      .join("\n");
+
+  return Object.entries(THEMES)
+    .map(([theme, prefix]) => `${prefix} [data-chart=${id}] {\n${varsFor(theme as ThemeKey)}\n}`)
+    .join("\n");
+}
+
+// A single reusable 1×1 canvas normalizes ANY CSS color (hex, named, oklch, …)
+// to a concrete rgba string by painting it and reading the pixel back.
+let normalizerCtx: CanvasRenderingContext2D | null = null;
+export function normalizeColor(value: string): string {
+  const raw = value.trim();
+  if (!raw || typeof document === "undefined") return raw;
+
+  if (!normalizerCtx) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    normalizerCtx = canvas.getContext("2d", { willReadFrequently: true });
+  }
+  if (!normalizerCtx) return raw;
+
+  normalizerCtx.clearRect(0, 0, 1, 1);
+  normalizerCtx.fillStyle = "#000";
+  normalizerCtx.fillStyle = raw; // invalid values leave the sentinel in place
+  normalizerCtx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = normalizerCtx.getImageData(0, 0, 1, 1).data;
+  return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
+}
+
+// Scales the alpha of a normalized `rgba(r, g, b, a)` string. Multiplying (not
+// replacing) keeps translucent theme tokens honest: a border that is 10%-white
+// at `withAlpha(border, 0.5)` lands at 5%, matching Tailwind's `border/50`.
+export function withAlpha(color: string, alpha: number): string {
+  const match = color.match(/rgba?\(([^)]+)\)/);
+  if (!match) return color;
+  const [r, g, b, a] = match[1].split(",").map((p) => p.trim());
+  const base = a === undefined ? 1 : Number.parseFloat(a) || 0;
+  return `rgba(${r}, ${g}, ${b}, ${(base * alpha).toFixed(3)})`;
+}
+
+export type ResolvedColors = {
+  series: Record<string, string[]>; // normalized `--color-{key}-{n}` slots per key
+  tokens: {
+    mutedForeground: string;
+    border: string;
+    foreground: string;
+    background: string;
+  };
+};
+
+// Reads the injected CSS vars + theme tokens from the live DOM. Series slots come
+// from `getComputedStyle` on the container; tokens are read off a throwaway probe
+// carrying the matching Tailwind class (robust to the var naming a theme uses).
+export function resolveColors(
+  container: HTMLElement,
+  config: ChartConfig,
+  seriesKeys: string[],
+): ResolvedColors {
+  const computed = getComputedStyle(container);
+  const series: Record<string, string[]> = {};
+
+  for (const key of seriesKeys) {
+    const count = getColorsCount(config[key] ?? {});
+    const slots: string[] = [];
+    for (let n = 0; n < count; n++) {
+      const raw = computed.getPropertyValue(`--color-${key}-${n}`).trim();
+      slots.push(raw ? normalizeColor(raw) : "rgba(120, 120, 120, 1)");
+    }
+    series[key] = slots;
+  }
+
+  const probe = document.createElement("span");
+  probe.style.cssText = "position:absolute;width:0;height:0;visibility:hidden;pointer-events:none;";
+  container.appendChild(probe);
+  const readToken = (className: string) => {
+    probe.className = className;
+    return normalizeColor(getComputedStyle(probe).color);
+  };
+  const tokens = {
+    mutedForeground: readToken("text-muted-foreground"),
+    border: readToken("text-border"),
+    foreground: readToken("text-foreground"),
+    background: readToken("text-background"),
+  };
+  container.removeChild(probe);
+
+  return { series, tokens };
+}
+
+// Horizontal multi-stop color for a series — a solid string when there is only
+// one color, else an evenly-distributed left→right LinearGradient. Reused for the
+// stroke, symbol fills, and as the base tint for the area fill.
+export function seriesPaint(slots: string[]): string | echarts.graphic.LinearGradient {
+  if (slots.length <= 1) return slots[0] ?? "rgba(120, 120, 120, 1)";
+  const stops = slots.map((color, i) => ({ offset: i / (slots.length - 1), color }));
+  return new echarts.graphic.LinearGradient(0, 0, 1, 0, stops);
+}
+
+// Solid var / gradient of vars for a series indicator — mirrors getIndicatorColorStyle.
+// Used by BOTH the tooltip rows and the legend indicators.
+export function indicatorBackground(key: string, colorsCount: number): string {
+  if (colorsCount <= 1) return `var(--color-${key}-0)`;
+  const stops = Array.from({ length: colorsCount }, (_, i) => {
+    const offset = (i / (colorsCount - 1)) * 100;
+    return `var(--color-${key}-${i}) ${offset}%`;
+  }).join(", ");
+  return `linear-gradient(to right, ${stops})`;
+}
+
+// Composites a translucent color over an opaque base into a FLAT color. The
+// tick dots need this: a translucent stroke double-paints where its round caps
+// overlap the line body, which reads as two stacked colors.
+export function flattenColor(color: string, base: string): string {
+  const parse = (value: string) =>
+    value
+      .match(/rgba?\(([^)]+)\)/)?.[1]
+      .split(",")
+      .map((part) => Number.parseFloat(part)) ?? [0, 0, 0, 1];
+  const [r, g, b, a = 1] = parse(color);
+  const [baseR, baseG, baseB] = parse(base);
+  const mix = (channel: number, baseChannel: number) =>
+    Math.round(channel * a + baseChannel * (1 - a));
+  return `rgb(${mix(r, baseR)}, ${mix(g, baseG)}, ${mix(b, baseB)})`;
+}

package/src/components/composed/chat/chart/evilcharts/echarts-dot.tsx

@@ -0,0 +1,111 @@
+import type * as echarts from "echarts/core";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Dots — map the resting/active variants onto ECharts symbols. Shared by every
+// ECharts chart that draws point markers.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type DotVariant = "none" | "default" | "border" | "colored-border" | "ping";
+
+// Dot marker paint — structurally assignable to BOTH the series-level and the
+// per-datum itemStyle (the per-datum variant forbids callback color paints, so
+// the broader LineSeriesOption["itemStyle"] cannot be reused for it).
+export type DotItemStyleOption = {
+  color?: string | echarts.graphic.LinearGradient;
+  borderColor?: string | echarts.graphic.LinearGradient;
+  borderWidth?: number;
+  opacity?: number;
+};
+
+export type DotStyle = { size: number; itemStyle: DotItemStyleOption };
+
+// Re-color a solid paint at a given alpha (hex #rgb/#rrggbb or rgb/rgba in, rgba
+// out; named colors pass through). Used for the translucent "ping" halo ring.
+function withAlpha(color: string, alpha: number): string {
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3)
+      hex = hex
+        .split("")
+        .map((c) => c + c)
+        .join("");
+    const n = parseInt(hex, 16);
+    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+  }
+  const m = color.match(/rgba?\(([^)]+)\)/);
+  if (m) {
+    const [r, g, b] = m[1].split(",").map((s) => parseFloat(s));
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  return color;
+}
+
+export function dotItemStyle(
+  variant: DotVariant,
+  paint: string | echarts.graphic.LinearGradient,
+  background: string,
+): DotItemStyleOption {
+  switch (variant) {
+    case "border":
+      // Series-colored core with a thick background halo (Recharts r6 / sw5).
+      return { color: paint, borderColor: background, borderWidth: 2 };
+    case "colored-border":
+      // Background-filled core with a thin colored ring (Recharts r3 / sw1).
+      return { color: background, borderColor: paint, borderWidth: 1 };
+    case "ping": {
+      // Solid core wrapped in a wide, translucent same-color ring — a static
+      // "ping". The ring is the symbol's BORDER (a stroke ~1.25× the core
+      // radius), which fills out to a soft halo disc; a genuinely large symbol
+      // would silently fail to render on a category-axis line, so we stroke a
+      // small one instead.
+      const halo = typeof paint === "string" ? withAlpha(paint, 0.28) : paint;
+      return { color: paint, borderColor: halo, borderWidth: 10 };
+    }
+    case "default":
+      return { color: paint, borderWidth: 0 };
+    default:
+      return {};
+  }
+}
+
+// Sizes mirror the Recharts markers: default r3, border r6 (mostly halo), and
+// colored-border r3+ring. Flattening these to one size makes the hover ring read
+// LARGER than a haloed resting dot — the opposite of the Recharts twin.
+export const DOT_SIZES: Record<DotVariant, number> = {
+  none: 0,
+  default: 6,
+  border: 8,
+  "colored-border": 6,
+  ping: 8,
+};
+
+export function dotStyle(
+  variant: DotVariant,
+  paint: string | echarts.graphic.LinearGradient,
+  background: string,
+): DotStyle {
+  return { size: DOT_SIZES[variant], itemStyle: dotItemStyle(variant, paint, background) };
+}
+
+// The color the horizontal series gradient shows at position t ∈ [0, 1]. ECharts
+// paints a gradient itemStyle relative to each symbol's own bounding box — a full
+// rainbow inside every dot — while the Recharts dots clip a chart-wide gradient,
+// so each takes the gradient's color at its x-position. Sampling reproduces that.
+export function sampleGradient(slots: string[], t: number): string {
+  if (slots.length <= 1) return slots[0] ?? "rgba(120, 120, 120, 1)";
+
+  const parse = (color: string) =>
+    color
+      .match(/rgba?\(([^)]+)\)/)?.[1]
+      .split(",")
+      .map(Number) ?? [120, 120, 120, 1];
+
+  const position = t * (slots.length - 1);
+  const index = Math.min(Math.floor(position), slots.length - 2);
+  const fraction = position - index;
+  const [r1, g1, b1, a1 = 1] = parse(slots[index]);
+  const [r2, g2, b2, a2 = 1] = parse(slots[index + 1]);
+  const lerp = (from: number, to: number) => from + (to - from) * fraction;
+
+  return `rgba(${Math.round(lerp(r1, r2))}, ${Math.round(lerp(g1, g2))}, ${Math.round(lerp(b1, b2))}, ${lerp(a1, a2).toFixed(3)})`;
+}