@optilogic/charts 1.0.0-beta.9 → 1.1.0

package/src/specialized/heatmap-chart.tsx

@@ -0,0 +1,250 @@
+import * as React from "react";
+import { cn } from "@optilogic/core";
+
+export interface HeatmapCell {
+  x: string | number;
+  y: string | number;
+  value: number;
+}
+
+export interface HeatmapColorScale {
+  min: string;
+  mid?: string;
+  max: string;
+}
+
+export interface HeatmapChartProps {
+  data: HeatmapCell[];
+  xLabels: string[];
+  yLabels: string[];
+  colorScale?: HeatmapColorScale;
+  cellSize?: number;
+  showValues?: boolean;
+  valueFormatter?: (value: number) => string;
+  className?: string;
+  height?: number | string;
+  loading?: boolean;
+  onCellClick?: (cell: HeatmapCell) => void;
+}
+
+const DEFAULT_SCALE: HeatmapColorScale = {
+  min: "hsl(var(--chart-9))",
+  mid: "hsl(var(--chart-4))",
+  max: "hsl(var(--chart-7))",
+};
+
+function interpolateColor(t: number, scale: HeatmapColorScale): string {
+  if (!scale.mid) {
+    return `color-mix(in srgb, ${scale.min} ${(1 - t) * 100}%, ${scale.max})`;
+  }
+  if (t <= 0.5) {
+    const t2 = t * 2;
+    return `color-mix(in srgb, ${scale.min} ${(1 - t2) * 100}%, ${scale.mid})`;
+  }
+  const t2 = (t - 0.5) * 2;
+  return `color-mix(in srgb, ${scale.mid} ${(1 - t2) * 100}%, ${scale.max})`;
+}
+
+const HeatmapChart = React.forwardRef<HTMLDivElement, HeatmapChartProps>(
+  function HeatmapChart(
+    {
+      data,
+      xLabels,
+      yLabels,
+      colorScale = DEFAULT_SCALE,
+      cellSize = 40,
+      showValues = true,
+      valueFormatter,
+      className,
+      height,
+      loading,
+      onCellClick,
+    },
+    ref,
+  ) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [hoveredCell, setHoveredCell] = React.useState<HeatmapCell | null>(null);
+    const [tooltipPos, setTooltipPos] = React.useState({ x: 0, y: 0 });
+
+    const { valueMap, minVal, maxVal } = React.useMemo(() => {
+      const map = new Map<string, number>();
+      let lo = Infinity;
+      let hi = -Infinity;
+      for (const cell of data) {
+        map.set(`${cell.x}|${cell.y}`, cell.value);
+        if (cell.value < lo) lo = cell.value;
+        if (cell.value > hi) hi = cell.value;
+      }
+      return { valueMap: map, minVal: lo, maxVal: hi };
+    }, [data]);
+
+    const normalize = (v: number) =>
+      maxVal === minVal ? 0.5 : (v - minVal) / (maxVal - minVal);
+
+    const labelColWidth = 80;
+    const svgWidth = labelColWidth + xLabels.length * cellSize;
+    const svgHeight = 28 + yLabels.length * cellSize;
+
+    if (loading) {
+      return (
+        <div
+          ref={ref}
+          className={cn("w-full flex items-center justify-center", className)}
+          style={{ height: height ?? svgHeight }}
+        >
+          <div
+            className="animate-pulse"
+            style={{
+              width: "80%",
+              height: "60%",
+              borderRadius: 6,
+              background: "hsl(var(--muted))",
+            }}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
+        className={cn("w-full overflow-auto relative", className)}
+        style={{ height }}
+      >
+        <svg width={svgWidth} height={svgHeight}>
+          {/* X-axis labels */}
+          {xLabels.map((label, i) => (
+            <text
+              key={`x-${i}`}
+              x={labelColWidth + i * cellSize + cellSize / 2}
+              y={14}
+              textAnchor="middle"
+              fontSize={9}
+              fill="hsl(var(--muted-foreground))"
+            >
+              {label}
+            </text>
+          ))}
+
+          {/* Y-axis labels + cells */}
+          {yLabels.map((yLabel, yi) => (
+            <g key={`row-${yi}`}>
+              <text
+                x={labelColWidth - 8}
+                y={28 + yi * cellSize + cellSize / 2}
+                textAnchor="end"
+                dominantBaseline="central"
+                fontSize={9}
+                fill="hsl(var(--muted-foreground))"
+              >
+                {yLabel}
+              </text>
+              {xLabels.map((xLabel, xi) => {
+                const key = `${xLabel}|${yLabel}`;
+                const val = valueMap.get(key);
+                const t = val != null ? normalize(val) : 0;
+                const cx = labelColWidth + xi * cellSize;
+                const cy = 28 + yi * cellSize;
+                const cellData: HeatmapCell = { x: xLabel, y: yLabel, value: val ?? 0 };
+
+                return (
+                  <g
+                    key={key}
+                    onMouseEnter={(e) => {
+                      setHoveredCell(cellData);
+                      const rect = containerRef.current?.getBoundingClientRect();
+                      setTooltipPos({
+                        x: e.clientX - (rect?.left ?? 0) + (containerRef.current?.scrollLeft ?? 0),
+                        y: e.clientY - (rect?.top ?? 0) + (containerRef.current?.scrollTop ?? 0),
+                      });
+                    }}
+                    onMouseLeave={() => setHoveredCell(null)}
+                    onClick={() => onCellClick?.(cellData)}
+                    style={{ cursor: onCellClick ? "pointer" : "default" }}
+                  >
+                    <rect
+                      x={cx + 1}
+                      y={cy + 1}
+                      width={cellSize - 2}
+                      height={cellSize - 2}
+                      rx={3}
+                      fill={
+                        val != null
+                          ? interpolateColor(t, colorScale)
+                          : "hsl(var(--muted))"
+                      }
+                      fillOpacity={val != null ? 0.85 : 0.3}
+                      stroke={
+                        hoveredCell?.x === xLabel && hoveredCell?.y === yLabel
+                          ? "hsl(var(--foreground))"
+                          : "none"
+                      }
+                      strokeWidth={1.5}
+                    />
+                    {showValues && val != null && cellSize >= 32 && (
+                      <text
+                        x={cx + cellSize / 2}
+                        y={cy + cellSize / 2}
+                        textAnchor="middle"
+                        dominantBaseline="central"
+                        fontSize={Math.min(10, cellSize / 4.5)}
+                        fill="hsl(var(--foreground))"
+                        fontWeight={500}
+                        style={{ pointerEvents: "none" }}
+                      >
+                        {valueFormatter ? valueFormatter(val) : val.toLocaleString()}
+                      </text>
+                    )}
+                  </g>
+                );
+              })}
+            </g>
+          ))}
+        </svg>
+
+        {/* Tooltip */}
+        {hoveredCell && (
+          <div
+            style={{
+              position: "absolute",
+              left: tooltipPos.x + 12,
+              top: tooltipPos.y - 10,
+              background: "hsl(var(--card))",
+              border: "1px solid hsl(var(--border))",
+              borderRadius: 6,
+              padding: "6px 10px",
+              fontSize: 11,
+              lineHeight: 1.5,
+              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+              pointerEvents: "none",
+              zIndex: 50,
+              maxWidth: 200,
+            }}
+          >
+            <div style={{ color: "hsl(var(--muted-foreground))" }}>
+              {String(hoveredCell.x)} / {String(hoveredCell.y)}
+            </div>
+            <div
+              style={{
+                fontWeight: 600,
+                color: "hsl(var(--foreground))",
+                fontVariantNumeric: "tabular-nums",
+              }}
+            >
+              {valueFormatter
+                ? valueFormatter(hoveredCell.value)
+                : hoveredCell.value.toLocaleString()}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+HeatmapChart.displayName = "HeatmapChart";
+export { HeatmapChart };

package/src/specialized/sankey-chart.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import { Sankey, Tooltip, Layer, Rectangle } from "recharts";
+import { getChartColor } from "../shared/colors";
+import { resolveTooltipProps } from "../shared/chart-tooltip";
+import { ChartContainer } from "../shared/chart-container";
+import type { BaseChartProps, ChartTooltipProp } from "../shared/types";
+
+export interface SankeyNode {
+  name: string;
+  color?: string;
+}
+
+export interface SankeyLink {
+  source: number;
+  target: number;
+  value: number;
+}
+
+export interface SankeyChartData {
+  nodes: SankeyNode[];
+  links: SankeyLink[];
+}
+
+export interface SankeyChartProps extends BaseChartProps {
+  data: SankeyChartData;
+  nodeWidth?: number;
+  nodePadding?: number;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+interface SankeyNodeRendererProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  index: number;
+  payload: { name: string; color?: string };
+}
+
+function SankeyNodeRenderer({
+  x,
+  y,
+  width,
+  height,
+  index,
+  payload,
+}: SankeyNodeRendererProps) {
+  const fill = payload.color ?? getChartColor(index);
+  return (
+    <Layer key={`node-${index}`}>
+      <Rectangle
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        fill={fill}
+        fillOpacity={0.9}
+      />
+      <text
+        x={x + width + 6}
+        y={y + height / 2}
+        textAnchor="start"
+        dominantBaseline="central"
+        fontSize={10}
+        fill="hsl(var(--foreground))"
+      >
+        {payload.name}
+      </text>
+    </Layer>
+  );
+}
+
+interface SankeyLinkRendererProps {
+  sourceX: number;
+  sourceY: number;
+  sourceControlX: number;
+  targetX: number;
+  targetY: number;
+  targetControlX: number;
+  linkWidth: number;
+  index: number;
+  payload: { source: { color?: string }; target: unknown };
+}
+
+function SankeyLinkRenderer({
+  sourceX,
+  sourceY,
+  sourceControlX,
+  targetX,
+  targetY,
+  targetControlX,
+  linkWidth,
+  index,
+  payload,
+}: SankeyLinkRendererProps) {
+  const sourceColor =
+    (payload.source as { color?: string }).color ?? getChartColor(index);
+  return (
+    <Layer key={`link-${index}`}>
+      <path
+        d={`
+          M${sourceX},${sourceY}
+          C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}
+        `}
+        fill="none"
+        stroke={sourceColor}
+        strokeWidth={linkWidth}
+        strokeOpacity={0.3}
+      />
+    </Layer>
+  );
+}
+
+const SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(
+  (
+    {
+      data,
+      nodeWidth = 10,
+      nodePadding = 20,
+      tooltip = true,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 80, left: 8, bottom: 8 },
+      loading,
+    },
+    ref,
+  ) => {
+    const tooltipProps = resolveTooltipProps(tooltip);
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.nodes?.length}
+      >
+        <Sankey
+          data={data}
+          nodeWidth={nodeWidth}
+          nodePadding={nodePadding}
+          margin={margin}
+          node={(SankeyNodeRenderer as never)}
+          link={(SankeyLinkRenderer as never)}
+        >
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+        </Sankey>
+      </ChartContainer>
+    );
+  },
+);
+
+SankeyChart.displayName = "SankeyChart";
+export { SankeyChart };

package/src/specialized/treemap-chart.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { Treemap, Tooltip } from "recharts";
+import { getChartColor } from "../shared/colors";
+import { resolveTooltipProps } from "../shared/chart-tooltip";
+import { ChartContainer } from "../shared/chart-container";
+import type { BaseChartProps, ChartTooltipProp } from "../shared/types";
+
+export interface TreemapDatum {
+  name: string;
+  value?: number;
+  color?: string;
+  children?: TreemapDatum[];
+}
+
+export interface TreemapChartProps extends BaseChartProps {
+  data: TreemapDatum[];
+  dataKey?: string;
+  aspectRatio?: number;
+  tooltip?: ChartTooltipProp;
+  loading?: boolean;
+}
+
+interface TreemapContentProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  index: number;
+  name: string;
+  depth: number;
+  color?: string;
+}
+
+function TreemapContent({
+  x,
+  y,
+  width,
+  height,
+  index,
+  name,
+  depth,
+  color,
+}: TreemapContentProps) {
+  const fill = color ?? getChartColor(index);
+  const showLabel = width > 40 && height > 20;
+
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        fill={fill}
+        fillOpacity={depth === 1 ? 0.85 : 0.6}
+        stroke="hsl(var(--card))"
+        strokeWidth={2}
+        rx={2}
+      />
+      {showLabel && (
+        <text
+          x={x + width / 2}
+          y={y + height / 2}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fontSize={Math.min(11, width / 6)}
+          fill="hsl(var(--card-foreground))"
+          fontWeight={500}
+          style={{ pointerEvents: "none" }}
+        >
+          {name.length > width / 7 ? `${name.slice(0, Math.floor(width / 7))}…` : name}
+        </text>
+      )}
+    </g>
+  );
+}
+
+const TreemapChart = React.forwardRef<HTMLDivElement, TreemapChartProps>(
+  (
+    {
+      data,
+      dataKey = "value",
+      aspectRatio = 4 / 3,
+      tooltip = true,
+      animate = true,
+      live = false,
+      className,
+      height = "100%",
+      margin,
+      loading,
+    },
+    ref,
+  ) => {
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <Treemap
+          data={data}
+          dataKey={dataKey}
+          aspectRatio={aspectRatio}
+          isAnimationActive={isAnimated}
+          animationDuration={isAnimated ? 400 : 0}
+          content={<TreemapContent x={0} y={0} width={0} height={0} index={0} name="" depth={1} />}
+        >
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+        </Treemap>
+      </ChartContainer>
+    );
+  },
+);
+
+TreemapChart.displayName = "TreemapChart";
+export { TreemapChart };