@exegia/corpora-ui 2.0.0 → 3.0.0

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

@@ -0,0 +1,125 @@
+import { indicatorBackground, type ResolvedColors } from "./echarts-chart";
+import type { TooltipComponentOption } from "echarts/components";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tooltip — the shared HTML shell/row primitives and the chart-agnostic option
+// fields. The tooltip DOM lives inside `[data-chart={id}]`, so the injected
+// `--color-*` vars and Tailwind classes resolve directly (no color read). Each
+// chart composes its own rows but shares the shell/styling and base option.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type TooltipVariant = "default" | "frosted-glass";
+export type TooltipRoundness = "sm" | "md" | "lg" | "xl";
+// Tooltip anchoring: "variable" follows both axes (ECharts default, current
+// behavior); "fixed" tracks the pointer's X (centered) but stays pinned near
+// the top (fixed Y).
+export type TooltipPosition = "fixed" | "variable";
+
+export const roundnessClass: Record<TooltipRoundness, string> = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+};
+
+export const tooltipVariantClass: Record<TooltipVariant, string> = {
+  default: "bg-background",
+  "frosted-glass": "bg-background/50 backdrop-blur-md",
+};
+
+// The standard series indicator swatch — a rounded square filled with the
+// series' solid var or multi-stop gradient (indicatorBackground). A chart drops
+// this into a tooltipRow's `indicatorHtml`.
+export function tooltipIndicatorHtml(key: string, colorsCount: number): string {
+  return `<div class="h-2.5 w-2.5 shrink-0 rounded-[2px]" style="background:${indicatorBackground(key, colorsCount)}"></div>`;
+}
+
+// One tooltip row: indicator swatch + label/value pair. `dimmed` is a class
+// fragment (e.g. " opacity-30") appended to the row so the selection/hover dim
+// stays byte-identical to the inlined markup.
+export function tooltipRow({
+  indicatorHtml,
+  labelText,
+  valueText,
+  dimmed,
+}: {
+  indicatorHtml: string;
+  labelText: string;
+  valueText: string;
+  dimmed: string;
+}): string {
+  return `<div class="flex w-full flex-wrap items-center gap-2${dimmed}">
+          ${indicatorHtml}
+          <div class="flex flex-1 items-center justify-between gap-4 leading-none">
+            <span class="text-muted-foreground">${labelText}</span>
+            <span class="text-foreground font-mono font-medium tabular-nums">${valueText}</span>
+          </div>
+        </div>`;
+}
+
+// The outer tooltip surface — border, padding, shadow, roundness + variant
+// classes — wrapping the axis label and the composed rows.
+export function tooltipShell({
+  label,
+  body,
+  roundness,
+  variant,
+}: {
+  label: string;
+  body: string;
+  roundness: TooltipRoundness;
+  variant: TooltipVariant;
+}): string {
+  return `<div class="grid min-w-32 items-start gap-1.5 border border-border/50 px-2.5 py-1.5 text-xs shadow-xl ${roundnessClass[roundness]} ${tooltipVariantClass[variant]}">
+      <div class="font-medium text-primary">${label}</div>
+      <div class="grid gap-1.5">${body}</div>
+    </div>`;
+}
+
+// Maps the TooltipPosition prop onto the ECharts tooltip `position` field.
+// "variable" → undefined (default follow-both-axes, current behavior); "fixed" →
+// a callback that centers the tooltip on the pointer's X but pins it near the
+// top (fixed Y).
+export function resolveTooltipPosition(
+  position: TooltipPosition,
+): TooltipComponentOption["position"] {
+  if (position === "variable") return undefined;
+  return (point, _params, _dom, _rect, size) => [point[0] - size.contentSize[0] / 2, 8];
+}
+
+// The chart-agnostic tooltip option fields (show, trigger, confine,
+// background/border/padding/extraCssText, axisPointer, position). The chart
+// supplies only `formatter` and spreads this in. `axisPointerColor` is the
+// pre-resolved cursor-line color, so this helper needs no live token read.
+export function tooltipBaseOption(params: {
+  present: boolean;
+  cursor: boolean;
+  tokens: ResolvedColors["tokens"];
+  position: TooltipPosition;
+  axisPointerColor: string;
+  strokeWidth: number;
+}): TooltipComponentOption {
+  const { present, cursor, position, axisPointerColor, strokeWidth } = params;
+
+  return {
+    show: present,
+    trigger: "axis",
+    confine: true,
+    displayTransition: false,
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    padding: 0,
+    extraCssText: "box-shadow:none;",
+    axisPointer: cursor
+      ? {
+          type: "line",
+          lineStyle: {
+            color: axisPointerColor,
+            width: strokeWidth,
+            type: [3, 3] as [number, number],
+          },
+        }
+      : { type: "none" },
+    position: resolveTooltipPosition(position),
+  };
+}

package/src/components/composed/chat/chart/index.ts

@@ -0,0 +1,13 @@
+export { ChartRoot as Chart, ChartRoot } from "./chart-root"
+export { useChartContext } from "./chart-context"
+export { useChartActions, useChartState } from "./use-chart-state"
+export {
+  chartSelectedKeyAtom,
+  chartStateAtom,
+  selectChartKeyAtom,
+  toggleChartKeyAtom,
+  resetChartAtom,
+  removeChartInstance,
+} from "./chart-atom"
+export { CHART_TYPE_LABEL, CHART_DEFAULT_HEIGHT } from "./constants"
+export type * from "./type"

package/src/components/composed/chat/chart/type.ts

@@ -0,0 +1,88 @@
+import type { useRender } from "@base-ui/react/use-render"
+import type * as React from "react"
+import type { Reference } from "@/components/atoms/reference"
+import type {
+  AreaProps,
+  CurveType,
+  TooltipProps,
+  XAxisProps,
+  YAxisProps,
+} from "./evilcharts/echarts-area-chart"
+import type { BarProps } from "./evilcharts/echarts-bar-chart"
+import type { LineProps } from "./evilcharts/echarts-line-chart"
+import type { PieProps } from "./evilcharts/echarts-pie-chart"
+import type { BrushProps } from "./evilcharts/echarts-brush"
+import type { EChartsRenderer } from "./evilcharts/echarts-chart"
+
+export type TChartType = "pie" | "area" | "line" | "bar"
+export type TChartVariant =
+  "default" | "stacked" | "percent" | "donut" | "horizontal"
+export type TChartInstanceId = string
+export type TChartDatum = {
+  label: string
+  [key: string]: string | number | null
+}
+export interface IChartSeries {
+  key: string
+  label: React.ReactNode
+  color?: string
+  format?: (value: number) => React.ReactNode
+  area?: Omit<AreaProps, "dataKey" | "children">
+  line?: Omit<LineProps, "dataKey" | "children">
+  bar?: Omit<BarProps, "dataKey">
+}
+export interface IChartState {
+  selectedKey: string | null
+}
+export interface IChartStateActions {
+  select: (key: string | null) => void
+  toggle: (key: string) => void
+  clearSelection: () => void
+  reset: () => void
+}
+export interface IChartProps extends Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "title"
+> {
+  type: TChartType
+  /** Unique within the current Jotai store. Omit for an isolated generated id. */
+  chartId?: TChartInstanceId
+  title?: React.ReactNode
+  subtitle?: React.ReactNode
+  badge?: React.ReactNode
+  reference?: React.ComponentProps<typeof Reference>
+  data: TChartDatum[]
+  series: IChartSeries[]
+  center?: { value: React.ReactNode; label?: React.ReactNode }
+  headerless?: boolean
+  /** Outer component width. Numbers are pixels; CSS lengths such as "100%" work. */
+  width?: React.CSSProperties["width"]
+  /** Outer component height, including header and legend. Plot fills remaining space. */
+  height?: React.CSSProperties["height"]
+  /** Explicit plot height takes precedence over filling the outer height. */
+  plotHeight?: React.CSSProperties["height"]
+  /** Replace the outer element using the coss/Base UI render API. */
+  render?: useRender.ComponentProps<"div">["render"]
+  /** stacked/percent: area or bar; horizontal: bar; donut: pie. */
+  variant?: TChartVariant
+  renderer?: EChartsRenderer
+  animation?: boolean
+  loading?: boolean
+  emptyContent?: React.ReactNode
+  showLegend?: boolean
+  interactive?: boolean
+  selectedKey?: string | null
+  defaultSelectedKey?: string | null
+  onSelectionChange?: (key: string | null) => void
+  curveType?: CurveType
+  grid?: boolean
+  xAxis?: boolean | XAxisProps
+  yAxis?: boolean | YAxisProps
+  tooltip?: boolean | TooltipProps
+  brush?: boolean | BrushProps
+  pie?: Omit<PieProps, "children">
+  /** ECharts options override generated options at the top level. */
+  chartOptions?: Record<string, unknown>
+  /** Selection methods; also available via useChartActions(chartId). */
+  ref?: React.Ref<IChartStateActions>
+}

package/src/components/composed/chat/chart/use-chart-state.ts

@@ -0,0 +1,22 @@
+"use client"
+import { useMemo } from "react"
+import { useAtomValue, useSetAtom } from "jotai"
+import {
+  chartStateAtom,
+  selectChartKeyAtom,
+  toggleChartKeyAtom,
+  resetChartAtom,
+} from "./chart-atom"
+import type { IChartStateActions, TChartInstanceId } from "./type"
+export function useChartState(id: TChartInstanceId) {
+  return useAtomValue(chartStateAtom(id))
+}
+export function useChartActions(id: TChartInstanceId): IChartStateActions {
+  const select = useSetAtom(selectChartKeyAtom(id))
+  const toggle = useSetAtom(toggleChartKeyAtom(id))
+  const reset = useSetAtom(resetChartAtom(id))
+  return useMemo(
+    () => ({ select, toggle, reset, clearSelection: () => select(null) }),
+    [select, toggle, reset]
+  )
+}

package/src/components/composed/chat/chart/use-chart.ts

@@ -0,0 +1,70 @@
+"use client"
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { useStore } from "jotai"
+import {
+  chartConfigAtom,
+  chartSelectedKeyAtom,
+  removeChartInstance,
+} from "./chart-atom"
+import { useChartActions, useChartState } from "./use-chart-state"
+import type { IChartProps } from "./type"
+const useClientLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect
+export function useChart(props: IChartProps) {
+  const generatedId = useId()
+  const id = props.chartId ?? generatedId
+  const store = useStore()
+  const [initial] = useState(props.defaultSelectedKey ?? null)
+  const lifecycle = useRef(0)
+  const keys = useMemo(
+    () =>
+      props.type === "pie"
+        ? props.data.map((row) => row.label)
+        : props.series.map((s) => s.key),
+    [props.type, props.data, props.series]
+  )
+  const state = useChartState(id)
+  const actions = useChartActions(id)
+  useClientLayoutEffect(() => {
+    const generation = ++lifecycle.current
+    store.set(chartSelectedKeyAtom(id), initial)
+    // Named instances persist until removeChartInstance; generated ids have no external consumers.
+    return () => {
+      queueMicrotask(() => {
+        if (!props.chartId && lifecycle.current === generation)
+          removeChartInstance(id)
+      })
+    }
+  }, [id, store, initial, props.chartId])
+  useClientLayoutEffect(() => {
+    store.set(chartConfigAtom(id), {
+      controlled: props.selectedKey !== undefined,
+      initial,
+      keys,
+      onChange: props.onSelectionChange,
+    })
+    const current =
+      props.selectedKey !== undefined
+        ? props.selectedKey
+        : store.get(chartSelectedKeyAtom(id))
+    store.set(
+      chartSelectedKeyAtom(id),
+      current !== null && keys.includes(current) ? current : null
+    )
+  }, [id, store, initial, keys, props.selectedKey, props.onSelectionChange])
+  const candidate =
+    props.selectedKey !== undefined ? props.selectedKey : state.selectedKey
+  return {
+    id,
+    selectedKey:
+      candidate !== null && keys.includes(candidate) ? candidate : null,
+    actions,
+  }
+}

package/src/components/composed/chat/chart/utils.ts

@@ -0,0 +1,47 @@
+import type { ChartConfig } from "./evilcharts/echarts-chart"
+import type { IChartSeries, TChartDatum, TChartType } from "./type"
+export function chartSeriesColor(series: IChartSeries, index: number) {
+  return series.color ?? `var(--chart-series-${(index % 5) + 1})`
+}
+export function formatChartValue(
+  series: IChartSeries | undefined,
+  value: unknown
+) {
+  return typeof value === "number" && series?.format
+    ? series.format(value)
+    : String(value ?? "—")
+}
+export function buildChartConfig(
+  type: TChartType,
+  data: TChartDatum[],
+  series: IChartSeries[]
+): ChartConfig {
+  const entries =
+    type === "pie"
+      ? data.map(
+          (row, index) =>
+            [
+              row.label,
+              {
+                label: row.label,
+                colors: { light: [`var(--chart-series-${(index % 5) + 1})`] },
+              },
+            ] as const
+        )
+      : series.map(
+          (item, index) =>
+            [
+              item.key,
+              {
+                label: item.label,
+                colors: { light: [chartSeriesColor(item, index)] },
+              },
+            ] as const
+        )
+  return Object.fromEntries(
+    entries.map(([key, value]) => [
+      key,
+      { ...value, colors: { light: [...value.colors.light] } },
+    ])
+  )
+}