@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -0,0 +1,9 @@
+"use client"
+import { createContext, useContext } from "react"
+export const ChartContext = createContext<string | null>(null)
+export function useChartContext() {
+  const id = useContext(ChartContext)
+  if (id === null)
+    throw new Error("useChartContext must be used within <Chart>")
+  return id
+}

package/src/components/composed/chat/chart/chart-legend.tsx

@@ -0,0 +1,75 @@
+"use client"
+import type { CSSProperties } from "react"
+import { LegendItem, type TDotTone } from "@/components/ui/chat"
+import { cn } from "@/lib/utils"
+import { chartSeriesColor, formatChartValue } from "./utils"
+import type { IChartProps } from "./type"
+export function ChartLegend({
+  type,
+  data,
+  series,
+  selectedKey,
+  interactive,
+  onSelect,
+}: Pick<
+  IChartProps,
+  "type" | "data" | "series" | "selectedKey" | "interactive"
+> & { onSelect: (key: string) => void }) {
+  const entries =
+    type === "pie"
+      ? data.map((row, i) => ({
+          key: row.label,
+          label: row.label,
+          value: formatChartValue(series[0], row[series[0].key]),
+          color: `var(--chart-series-${(i % 5) + 1})`,
+        }))
+      : series.map((s, i) => ({
+          key: s.key,
+          label: s.label,
+          value: undefined,
+          color: chartSeriesColor(s, i),
+        }))
+  return (
+    <ul
+      data-slot="chart-legend"
+      className={cn(
+        "gap-3 flex flex-wrap",
+        type === "pie" && "min-w-24 flex-1 flex-col"
+      )}
+    >
+      {entries.map((entry, i) => (
+        <li
+          key={entry.key}
+          style={{ "--legend-color": entry.color } as CSSProperties}
+          className={cn(
+            "min-w-0 [&_[data-slot=dot]]:bg-(--legend-color)",
+            selectedKey && selectedKey !== entry.key && "opacity-40"
+          )}
+        >
+          {interactive ? (
+            <button
+              type="button"
+              aria-pressed={selectedKey === entry.key}
+              className="w-full rounded-sm text-left focus-visible:outline-2 focus-visible:outline-ring"
+              onClick={() => onSelect(entry.key)}
+            >
+              <LegendItem
+                tone={`series-${(i % 5) + 1}` as TDotTone}
+                value={entry.value}
+              >
+                {entry.label}
+              </LegendItem>
+            </button>
+          ) : (
+            <LegendItem
+              tone={`series-${(i % 5) + 1}` as TDotTone}
+              value={entry.value}
+            >
+              {entry.label}
+            </LegendItem>
+          )}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/components/composed/chat/chart/chart-plot.tsx

@@ -0,0 +1,233 @@
+"use client"
+import { useMemo, useEffect, useRef, useState } from "react"
+import { EChartsAreaChart as Area } from "./evilcharts/echarts-area-chart"
+import { EChartsLineChart as Line } from "./evilcharts/echarts-line-chart"
+import { EChartsBarChart as Bar } from "./evilcharts/echarts-bar-chart"
+import { EChartsPieChart as Pie } from "./evilcharts/echarts-pie-chart"
+import { resolveTooltipPosition } from "./evilcharts/echarts-tooltip"
+import { buildChartConfig } from "./utils"
+import { createChartTooltip } from "./chart-tooltip"
+import type { IChartProps } from "./type"
+
+/** Wait for layout before initializing ECharts (also supports hidden tabs and SSR). */
+export function ChartPlot(props: IChartProps) {
+  const host = useRef<HTMLDivElement>(null)
+  const [ready, setReady] = useState(false)
+  useEffect(() => {
+    const node = host.current
+    if (!node) return
+    const observer = new ResizeObserver((entries) => {
+      if (
+        entries.some(
+          (entry) => entry.contentRect.width > 0 && entry.contentRect.height > 0
+        )
+      )
+        setReady(true)
+    })
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [])
+  return (
+    <div ref={host} className="h-full w-full">
+      {ready && <ChartRenderer {...props} />}
+    </div>
+  )
+}
+
+function ChartRenderer({
+  type,
+  data,
+  series,
+  variant = "default",
+  renderer = "canvas",
+  animation = true,
+  loading = false,
+  interactive = false,
+  selectedKey = null,
+  onSelectionChange,
+  curveType = "monotone",
+  grid = true,
+  xAxis = true,
+  yAxis = false,
+  tooltip = true,
+  brush = false,
+  pie,
+  chartOptions,
+}: IChartProps) {
+  const config = useMemo(
+    () => buildChartConfig(type, data, series),
+    [type, data, series]
+  )
+  const options = useMemo(
+    () => ({
+      ...(tooltip
+        ? {
+            tooltip: {
+              show: !loading,
+              trigger: type === "pie" ? "item" : "axis",
+              confine: true,
+              padding: 0,
+              borderWidth: 0,
+              backgroundColor: "transparent",
+              // Only the inner tooltip owns a shadow; ECharts adds one otherwise.
+              extraCssText: "box-shadow:none;",
+              axisPointer: {
+                type:
+                  typeof tooltip === "object" && tooltip.cursor === false
+                    ? "none"
+                    : "line",
+              },
+              position: resolveTooltipPosition(
+                typeof tooltip === "object"
+                  ? (tooltip.position ?? "variable")
+                  : "variable"
+              ),
+              formatter: createChartTooltip(
+                type,
+                data,
+                series,
+                typeof tooltip === "object" ? tooltip : {}
+              ),
+            },
+          }
+        : {}),
+      ...chartOptions,
+    }),
+    [tooltip, loading, type, data, series, chartOptions]
+  )
+  const common = {
+    data,
+    config,
+    renderer,
+    animation,
+    isLoading: loading,
+    chartOptions: options,
+    className: "h-full w-full",
+  }
+  const selection = { selectedDataKey: selectedKey, onSelectionChange }
+  const tooltipProps = typeof tooltip === "object" ? tooltip : {}
+  const xProps = typeof xAxis === "object" ? xAxis : {}
+  const yProps = typeof yAxis === "object" ? yAxis : {}
+  const brushProps = typeof brush === "object" ? brush : {}
+  if (type === "pie")
+    return (
+      <Pie
+        {...common}
+        dataKey={series[0]?.key ?? "value"}
+        nameKey="label"
+        selectedSector={selectedKey}
+        onSelectionChange={(value) =>
+          onSelectionChange?.(value?.dataKey ?? null)
+        }
+      >
+        <Pie.Pie
+          innerRadius={variant === "donut" || variant === "default" ? "66%" : 0}
+          outerRadius="95%"
+          paddingAngle={2}
+          cornerRadius={8}
+          isClickable={interactive}
+          {...pie}
+        />
+        {tooltip && <Pie.Tooltip {...tooltipProps} />}
+      </Pie>
+    )
+  if (type === "bar")
+    return (
+      <Bar
+        {...common}
+        {...selection}
+        xDataKey="label"
+        barRadius={8}
+        layout={variant === "horizontal" ? "horizontal" : "vertical"}
+        stackType={
+          variant === "percent"
+            ? "percent"
+            : variant === "stacked"
+              ? "stacked"
+              : "default"
+        }
+      >
+        {series.map((s) => (
+          <Bar.Bar
+            key={s.key}
+            dataKey={s.key}
+            isClickable={interactive}
+            {...s.bar}
+          />
+        ))}
+        {xAxis && <Bar.XAxis {...xProps} />}
+        {yAxis && (
+          <Bar.YAxis
+            {...yProps}
+            tickFormatter={
+              yProps.tickFormatter
+                ? (value, index) => yProps.tickFormatter!(Number(value), index)
+                : undefined
+            }
+          />
+        )}
+        {grid && <Bar.Grid />}
+        {tooltip && <Bar.Tooltip {...tooltipProps} />}
+        {brush && variant !== "horizontal" && <Bar.Brush {...brushProps} />}
+      </Bar>
+    )
+  if (type === "line")
+    return (
+      <Line
+        {...common}
+        {...selection}
+        xDataKey="label"
+        curveType={curveType}
+        enableHoverHighlight={interactive}
+      >
+        {series.map((s) => (
+          <Line.Line
+            key={s.key}
+            dataKey={s.key}
+            isClickable={interactive}
+            {...s.line}
+          >
+            <Line.Dot />
+            <Line.ActiveDot />
+          </Line.Line>
+        ))}
+        {xAxis && <Line.XAxis {...xProps} />}
+        {yAxis && <Line.YAxis {...yProps} />}
+        {grid && <Line.Grid />}
+        {tooltip && <Line.Tooltip {...tooltipProps} />}
+        {brush && <Line.Brush {...brushProps} />}
+      </Line>
+    )
+  return (
+    <Area
+      {...common}
+      {...selection}
+      xDataKey="label"
+      curveType={curveType}
+      enableHoverHighlight={interactive}
+      stackType={
+        variant === "percent"
+          ? "expanded"
+          : variant === "stacked"
+            ? "stacked"
+            : "default"
+      }
+    >
+      {series.map((s) => (
+        <Area.Area
+          key={s.key}
+          dataKey={s.key}
+          isClickable={interactive}
+          {...s.area}
+        >
+          <Area.ActiveDot />
+        </Area.Area>
+      ))}
+      {xAxis && <Area.XAxis {...xProps} />}
+      {yAxis && <Area.YAxis {...yProps} />}
+      {grid && <Area.Grid />}
+      {tooltip && <Area.Tooltip {...tooltipProps} />}
+      {brush && <Area.Brush {...brushProps} />}
+    </Area>
+  )
+}

package/src/components/composed/chat/chart/chart-root.tsx

@@ -0,0 +1,229 @@
+"use client"
+import { useRender } from "@base-ui/react/use-render"
+import { useImperativeHandle } from "react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import {
+  Card,
+  CardFrame,
+  CardFrameHeader,
+  CardPanel,
+} from "@/components/ui/card"
+import { Pill } from "@/components/ui/chat"
+import { Reference } from "@/components/atoms/reference"
+import { ChartContext } from "./chart-context"
+import { ChartPlot } from "./chart-plot"
+import { ChartLegend } from "./chart-legend"
+import { CHART_DEFAULT_HEIGHT, CHART_TYPE_LABEL } from "./constants"
+import { useChart } from "./use-chart"
+import type { IChartProps } from "./type"
+
+export function ChartRoot({
+  ref,
+  ...allProps
+}: IChartProps): React.ReactElement {
+  const { id, selectedKey, actions } = useChart(allProps)
+  useImperativeHandle(ref, () => actions, [actions])
+  return (
+    <ChartContext value={id}>
+      <ChartCard
+        {...allProps}
+        selectedKey={selectedKey}
+        onSelectionChange={actions.select}
+      />
+    </ChartContext>
+  )
+}
+function ChartCard({
+  type,
+  title,
+  subtitle,
+  badge,
+  reference,
+  data,
+  series,
+  center,
+  headerless = false,
+  plotHeight,
+  width,
+  height,
+  render,
+  style,
+  className,
+  chartId: _chartId,
+  ref: _ref,
+  defaultSelectedKey: _defaultSelectedKey,
+  variant = "default",
+  renderer,
+  animation,
+  loading = false,
+  emptyContent = "No data",
+  showLegend = true,
+  interactive = false,
+  selectedKey,
+  onSelectionChange,
+  curveType,
+  grid,
+  xAxis,
+  yAxis,
+  tooltip,
+  brush,
+  pie,
+  chartOptions,
+  children,
+  ...props
+}: IChartProps): React.ReactElement {
+  const fillHeight =
+    (height !== undefined || style?.height !== undefined) &&
+    plotHeight === undefined
+  const plotSize = fillHeight
+    ? "100%"
+    : (plotHeight ?? (type === "pie" ? 140 : CHART_DEFAULT_HEIGHT))
+  const rootStyle = { width, height, ...style }
+  const empty = data.length === 0 || series.length === 0
+  const legend =
+    !empty && !loading && showLegend ? (
+      <ChartLegend
+        type={type}
+        data={data}
+        series={series}
+        selectedKey={selectedKey}
+        interactive={interactive}
+        onSelect={(key) =>
+          onSelectionChange?.(selectedKey === key ? null : key)
+        }
+      />
+    ) : null
+  const plot = (
+    <>
+      <div
+        className={cn(
+          "min-w-0",
+          fillHeight && "min-h-0 flex flex-1 flex-col",
+          type === "pie" &&
+            "gap-6 flex flex-row flex-wrap items-center justify-center"
+        )}
+        aria-busy={loading}
+      >
+        <div
+          className={cn(
+            "min-w-0 relative",
+            type === "pie" ? "shrink-0" : "w-full"
+          )}
+          style={{
+            height: plotSize,
+            width:
+              type === "pie" ? (fillHeight ? "auto" : plotSize) : undefined,
+            maxWidth: "100%",
+            aspectRatio: type === "pie" ? "1" : undefined,
+          }}
+          role="group"
+          aria-label={
+            typeof title === "string"
+              ? title
+              : `${CHART_TYPE_LABEL[type]} chart`
+          }
+        >
+          {empty && !loading ? (
+            <div
+              role="status"
+              className="text-xs flex h-full items-center justify-center text-text-secondary"
+            >
+              {emptyContent}
+            </div>
+          ) : (
+            <ChartPlot
+              type={type}
+              data={data}
+              series={series}
+              variant={variant}
+              renderer={renderer}
+              animation={animation}
+              loading={loading}
+              interactive={interactive}
+              selectedKey={selectedKey}
+              onSelectionChange={onSelectionChange}
+              curveType={curveType}
+              grid={grid}
+              xAxis={xAxis}
+              yAxis={yAxis}
+              tooltip={tooltip}
+              brush={brush}
+              pie={pie}
+              chartOptions={chartOptions}
+            />
+          )}
+          {type === "pie" && center && !loading ? (
+            <div className="inset-0 pointer-events-none absolute flex flex-col items-center justify-center">
+              <span className="font-semibold text-[17px] text-text-primary">
+                {center.value}
+              </span>
+              {center.label && (
+                <span className="text-[11px] text-text-secondary">
+                  {center.label}
+                </span>
+              )}
+            </div>
+          ) : null}
+        </div>
+        {type === "pie" && legend}
+      </div>
+      {type !== "pie" && legend}
+      {children}
+    </>
+  )
+  const bareRoot = useRender({
+    defaultTagName: "div",
+    render: headerless ? render : undefined,
+    props: {
+      ...props,
+      "data-slot": "chart",
+      "data-type": type,
+      className: cn("w-80 gap-2 flex max-w-full flex-col", className),
+      style: rootStyle,
+      children: plot,
+    },
+  })
+  if (headerless) return bareRoot
+  return (
+    <CardFrame
+      render={render}
+      style={rootStyle}
+      data-slot="chart"
+      data-type={type}
+      className={cn(
+        "w-80 max-w-full [--frame-radius:var(--radius-md)]",
+        className
+      )}
+      {...props}
+    >
+      <CardFrameHeader className="gap-x-3 gap-y-2 px-3.5 py-3 flex flex-row flex-wrap items-start justify-between">
+        <div className="min-w-0 basis-36 gap-0.5 flex flex-1 flex-col">
+          <span className="font-semibold leading-4 text-[13px] text-text-primary">
+            {title}
+          </span>
+          {subtitle ? (
+            <span className="leading-3 text-[11px] text-text-secondary">
+              {subtitle}
+            </span>
+          ) : null}
+        </div>
+        {reference ? (
+          <Reference
+            {...reference}
+            className={cn("max-w-full shrink-0", reference.className)}
+          />
+        ) : (
+          <Pill>{badge ?? CHART_TYPE_LABEL[type]}</Pill>
+        )}
+      </CardFrameHeader>
+      <Card className={cn(fillHeight && "min-h-0 flex-1")}>
+        <CardPanel
+          className={cn("gap-3 p-3.5 flex flex-col", fillHeight && "min-h-0")}
+        >
+          {plot}
+        </CardPanel>
+      </Card>
+    </CardFrame>
+  )
+}

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

@@ -0,0 +1,74 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import type { TooltipProps } from "./evilcharts/echarts-area-chart"
+import {
+  roundnessClass,
+  tooltipVariantClass,
+} from "./evilcharts/echarts-tooltip"
+import { cn } from "@/lib/utils"
+import { chartSeriesColor, formatChartValue } from "./utils"
+import type { IChartSeries, TChartDatum, TChartType } from "./type"
+/** React escapes labels and formatted nodes before they enter ECharts' HTML tooltip. */
+export function createChartTooltip(
+  type: TChartType,
+  data: TChartDatum[],
+  series: IChartSeries[],
+  options: TooltipProps = {}
+) {
+  return (params: unknown) => {
+    const rows = (Array.isArray(params) ? params : [params]).filter(
+      (row): row is Record<string, unknown> =>
+        typeof row === "object" && row !== null
+    )
+    return renderToStaticMarkup(
+      <div
+        data-slot="chart-tooltip"
+        style={{ boxShadow: "0 4px 12px rgb(0 0 0 / 0.12)" }}
+        className={cn(
+          "p-2.5 text-xs border border-border-default text-text-primary",
+          roundnessClass[options.roundness ?? "md"],
+          tooltipVariantClass[options.variant ?? "frosted-glass"]
+        )}
+      >
+        {type !== "pie" && (
+          <div className="mb-1 font-medium">
+            {data[Number(rows[0]?.dataIndex)]?.label}
+          </div>
+        )}
+        {rows
+          .filter((row) => !String(row.seriesId ?? "").startsWith("__"))
+          .map((row, i) => {
+            const item =
+              type === "pie"
+                ? series[0]
+                : (series.find(
+                    (s) => s.key === row.seriesId || s.key === row.seriesName
+                  ) ?? series[Number(row.seriesIndex)])
+            const datum = data[Number(row.dataIndex)]
+            return (
+              <div key={i} className="gap-3 flex items-center">
+                <span
+                  aria-hidden="true"
+                  className="size-2 shrink-0 rounded-full"
+                  style={{
+                    background:
+                      type === "pie"
+                        ? `var(--chart-series-${(Number(row.dataIndex) % 5) + 1})`
+                        : item
+                          ? chartSeriesColor(item, series.indexOf(item))
+                          : undefined,
+                  }}
+                />
+                <span>{type === "pie" ? datum?.label : item?.label}</span>
+                <span className="font-medium ml-auto">
+                  {formatChartValue(
+                    item,
+                    datum && item ? datum[item.key] : row.value
+                  )}
+                </span>
+              </div>
+            )
+          })}
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { TChartType } from "./type"
+export const CHART_TYPE_LABEL: Record<TChartType, string> = {
+  pie: "Pie",
+  area: "Area",
+  line: "Line",
+  bar: "Bar",
+}
+export const CHART_DEFAULT_HEIGHT = 150

package/src/components/composed/chat/chart/evilcharts/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Gurbinder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/components/composed/chat/chart/evilcharts/README.md

@@ -0,0 +1,8 @@
+# EvilCharts source
+
+Vendored from https://github.com/legions-developer/evilcharts at `500ecd44c1fdcf319ba83ea68f3771bc76125974`.
+MIT license in LICENSE. Only shared module import paths are adapted.
+
+Local patches: line/bar accept controlled selectedDataKey; selection callbacks run outside React state updaters.
+
+CSS variable declarations escape category/series keys so labels with spaces retain their colors.