@exegia/corpora-ui 3.0.0 → 3.1.0

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

@@ -1,233 +0,0 @@
-"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

@@ -1,229 +0,0 @@
-"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

@@ -1,74 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/README.md

@@ -1,8 +0,0 @@
-# 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.