@exegia/corpora-ui 2.0.0 → 3.0.0

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.