@optilogic/charts 1.0.0-beta.9 → 1.1.0

package/src/shared/use-live-data.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseLiveDataConfig<T> {
+  /** Initial data snapshot */
+  initial?: T[];
+  /** Maximum number of data points to retain (ring buffer) */
+  maxPoints?: number;
+  /** Polling interval in ms (only used when mode is "poll") */
+  interval?: number;
+  /** Data fetch function for poll mode */
+  fetcher?: () => Promise<T[]>;
+  /** Start in paused state */
+  paused?: boolean;
+}
+
+export interface UseLiveDataReturn<T> {
+  data: T[];
+  /** Push new data points */
+  push: (...items: T[]) => void;
+  /** Replace all data at once */
+  replace: (items: T[]) => void;
+  isPaused: boolean;
+  pause: () => void;
+  resume: () => void;
+}
+
+export function useLiveData<T>(
+  config: UseLiveDataConfig<T> = {},
+): UseLiveDataReturn<T> {
+  const {
+    initial = [],
+    maxPoints = 200,
+    interval = 2000,
+    fetcher,
+    paused: initialPaused = false,
+  } = config;
+
+  const [data, setData] = useState<T[]>(initial);
+  const [isPaused, setIsPaused] = useState(initialPaused);
+  const bufferRef = useRef<T[]>(initial);
+
+  const push = useCallback(
+    (...items: T[]) => {
+      bufferRef.current = [...bufferRef.current, ...items].slice(-maxPoints);
+      setData(bufferRef.current);
+    },
+    [maxPoints],
+  );
+
+  const replace = useCallback((items: T[]) => {
+    bufferRef.current = items;
+    setData(items);
+  }, []);
+
+  const pause = useCallback(() => setIsPaused(true), []);
+  const resume = useCallback(() => setIsPaused(false), []);
+
+  useEffect(() => {
+    if (!fetcher || isPaused) return;
+
+    let cancelled = false;
+    const tick = async () => {
+      try {
+        const result = await fetcher();
+        if (!cancelled) {
+          bufferRef.current = result.slice(-maxPoints);
+          setData(bufferRef.current);
+        }
+      } catch {
+        // Silently skip failed polls
+      }
+    };
+
+    tick();
+    const id = setInterval(tick, interval);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [fetcher, interval, isPaused, maxPoints]);
+
+  return { data, push, replace, isPaused, pause, resume };
+}

package/src/specialized/funnel-chart.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import {
+  FunnelChart as RechartsFunnelChart,
+  Funnel,
+  Cell,
+  Tooltip,
+  LabelList,
+} 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 FunnelDatum {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+export interface FunnelChartProps extends BaseChartProps {
+  data: FunnelDatum[];
+  tooltip?: ChartTooltipProp;
+  showLabels?: boolean;
+  loading?: boolean;
+}
+
+const FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(
+  (
+    {
+      data,
+      tooltip = true,
+      showLabels = true,
+      animate = true,
+      live = false,
+      className,
+      height = "100%",
+      margin = { top: 8, right: 8, left: 8, bottom: 8 },
+      loading,
+    },
+    ref,
+  ) => {
+    const tooltipProps = resolveTooltipProps(tooltip);
+    const isAnimated = live ? false : animate;
+
+    return (
+      <ChartContainer
+        ref={ref}
+        className={className}
+        height={height}
+        loading={loading}
+        empty={!data?.length}
+      >
+        <RechartsFunnelChart margin={margin}>
+          <Funnel
+            dataKey="value"
+            data={data}
+            isAnimationActive={isAnimated}
+            animationDuration={isAnimated ? 400 : 0}
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={entry.name}
+                fill={getChartColor(index, entry.color)}
+                stroke="hsl(var(--card))"
+                strokeWidth={2}
+              />
+            ))}
+            {showLabels && (
+              <LabelList
+                dataKey="name"
+                position="center"
+                fill="#ffffff"
+                fontSize={13}
+                fontWeight={600}
+                style={{
+                  textShadow: "0 1px 3px rgba(0,0,0,0.4)",
+                  paintOrder: "stroke",
+                  stroke: "rgba(0,0,0,0.2)",
+                  strokeWidth: 2,
+                  strokeLinejoin: "round",
+                }}
+              />
+            )}
+          </Funnel>
+          {tooltipProps && <Tooltip {...tooltipProps} />}
+        </RechartsFunnelChart>
+      </ChartContainer>
+    );
+  },
+);
+
+FunnelChart.displayName = "FunnelChart";
+export { FunnelChart };

package/src/specialized/gantt-chart.tsx

@@ -0,0 +1,416 @@
+import * as React from "react";
+import { cn } from "@optilogic/core";
+import { getChartColor } from "../shared/colors";
+
+export interface GanttTask {
+  id: string;
+  name: string;
+  start: Date;
+  end: Date;
+  /** 0–100 completion percentage */
+  progress?: number;
+  group?: string;
+  color?: string;
+  /** Task IDs this task depends on (renders dependency arrows) */
+  dependencies?: string[];
+}
+
+export interface GanttMilestone {
+  id: string;
+  name: string;
+  date: Date;
+  color?: string;
+}
+
+export type GanttTimeScale = "day" | "week" | "month";
+
+export interface GanttChartProps {
+  tasks: GanttTask[];
+  milestones?: GanttMilestone[];
+  timeScale?: GanttTimeScale;
+  className?: string;
+  height?: number | string;
+  rowHeight?: number;
+  labelWidth?: number;
+  onTaskClick?: (task: GanttTask) => void;
+}
+
+const ROW_HEIGHT_DEFAULT = 36;
+const LABEL_WIDTH_DEFAULT = 160;
+const HEADER_HEIGHT = 32;
+
+function getTimeBounds(tasks: GanttTask[], milestones: GanttMilestone[]) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const t of tasks) {
+    if (t.start.getTime() < min) min = t.start.getTime();
+    if (t.end.getTime() > max) max = t.end.getTime();
+  }
+  for (const m of milestones) {
+    if (m.date.getTime() < min) min = m.date.getTime();
+    if (m.date.getTime() > max) max = m.date.getTime();
+  }
+  const pad = (max - min) * 0.05 || 86400000;
+  return { min: min - pad, max: max + pad, span: max - min + 2 * pad };
+}
+
+function generateTicks(
+  min: number,
+  max: number,
+  scale: GanttTimeScale,
+): { pos: number; label: string }[] {
+  const ticks: { pos: number; label: string }[] = [];
+  const d = new Date(min);
+
+  if (scale === "day") {
+    d.setHours(0, 0, 0, 0);
+    while (d.getTime() <= max) {
+      ticks.push({
+        pos: d.getTime(),
+        label: d.toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+      });
+      d.setDate(d.getDate() + 1);
+    }
+  } else if (scale === "week") {
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() - d.getDay());
+    while (d.getTime() <= max) {
+      ticks.push({
+        pos: d.getTime(),
+        label: d.toLocaleDateString(undefined, { month: "short", day: "numeric" }),
+      });
+      d.setDate(d.getDate() + 7);
+    }
+  } else {
+    d.setDate(1);
+    d.setHours(0, 0, 0, 0);
+    while (d.getTime() <= max) {
+      ticks.push({
+        pos: d.getTime(),
+        label: d.toLocaleDateString(undefined, { month: "short", year: "2-digit" }),
+      });
+      d.setMonth(d.getMonth() + 1);
+    }
+  }
+  return ticks;
+}
+
+const GanttChart = React.forwardRef<HTMLDivElement, GanttChartProps>(
+  function GanttChart(
+    {
+      tasks,
+      milestones = [],
+      timeScale = "day",
+      className,
+      height = 400,
+      rowHeight = ROW_HEIGHT_DEFAULT,
+      labelWidth = LABEL_WIDTH_DEFAULT,
+      onTaskClick,
+    },
+    ref,
+  ) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [hoveredId, setHoveredId] = React.useState<string | null>(null);
+    const [tooltipInfo, setTooltipInfo] = React.useState<{
+      task: GanttTask;
+      x: number;
+      y: number;
+    } | null>(null);
+
+    const groups = React.useMemo(() => {
+      const map = new Map<string, GanttTask[]>();
+      for (const t of tasks) {
+        const g = t.group ?? "";
+        if (!map.has(g)) map.set(g, []);
+        map.get(g)!.push(t);
+      }
+      return map;
+    }, [tasks]);
+
+    const orderedTasks = React.useMemo(() => {
+      const result: GanttTask[] = [];
+      for (const group of groups.values()) {
+        result.push(...group.sort((a, b) => a.start.getTime() - b.start.getTime()));
+      }
+      return result;
+    }, [groups]);
+
+    const taskIndex = React.useMemo(() => {
+      const m = new Map<string, number>();
+      orderedTasks.forEach((t, i) => m.set(t.id, i));
+      return m;
+    }, [orderedTasks]);
+
+    const bounds = React.useMemo(
+      () => getTimeBounds(tasks, milestones),
+      [tasks, milestones],
+    );
+
+    const ticks = React.useMemo(
+      () => generateTicks(bounds.min, bounds.max, timeScale),
+      [bounds, timeScale],
+    );
+
+    const chartHeight =
+      typeof height === "number" ? height : undefined;
+    const svgHeight = HEADER_HEIGHT + orderedTasks.length * rowHeight + 8;
+
+    function xOf(time: number, chartWidth: number) {
+      return ((time - bounds.min) / bounds.span) * chartWidth;
+    }
+
+    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="100%"
+          height={Math.max(svgHeight, chartHeight ?? svgHeight)}
+          style={{ minWidth: labelWidth + 400 }}
+        >
+          {/* Label background */}
+          <rect
+            x={0}
+            y={0}
+            width={labelWidth}
+            height={svgHeight}
+            fill="hsl(var(--card))"
+          />
+          <line
+            x1={labelWidth}
+            y1={0}
+            x2={labelWidth}
+            y2={svgHeight}
+            stroke="hsl(var(--border))"
+          />
+
+          {/* Time axis header */}
+          <g>
+            {ticks.map((tick, i) => {
+              const x = labelWidth + xOf(tick.pos, 1000);
+              return (
+                <g key={i}>
+                  <line
+                    x1={x}
+                    y1={HEADER_HEIGHT}
+                    x2={x}
+                    y2={svgHeight}
+                    stroke="hsl(var(--divider))"
+                    strokeDasharray="2 4"
+                  />
+                  <text
+                    x={x + 4}
+                    y={HEADER_HEIGHT - 10}
+                    fontSize={9}
+                    fill="hsl(var(--muted-foreground))"
+                  >
+                    {tick.label}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+
+          {/* Rows */}
+          {orderedTasks.map((task, i) => {
+            const y = HEADER_HEIGHT + i * rowHeight;
+            const barX = labelWidth + xOf(task.start.getTime(), 1000);
+            const barW = xOf(task.end.getTime(), 1000) - xOf(task.start.getTime(), 1000);
+            const barH = rowHeight * 0.55;
+            const barY = y + (rowHeight - barH) / 2;
+            const color = task.color ?? getChartColor(i);
+            const isHovered = hoveredId === task.id;
+            const progress = task.progress ?? 0;
+
+            return (
+              <g
+                key={task.id}
+                onMouseEnter={(e) => {
+                  setHoveredId(task.id);
+                  const rect = containerRef.current?.getBoundingClientRect();
+                  setTooltipInfo({
+                    task,
+                    x: e.clientX - (rect?.left ?? 0) + (containerRef.current?.scrollLeft ?? 0),
+                    y: e.clientY - (rect?.top ?? 0) + (containerRef.current?.scrollTop ?? 0),
+                  });
+                }}
+                onMouseLeave={() => {
+                  setHoveredId(null);
+                  setTooltipInfo(null);
+                }}
+                onClick={() => onTaskClick?.(task)}
+                style={{ cursor: onTaskClick ? "pointer" : "default" }}
+              >
+                {/* Row stripe */}
+                {i % 2 === 0 && (
+                  <rect
+                    x={0}
+                    y={y}
+                    width="100%"
+                    height={rowHeight}
+                    fill="hsl(var(--muted))"
+                    fillOpacity={0.3}
+                  />
+                )}
+                {/* Label */}
+                <text
+                  x={12}
+                  y={y + rowHeight / 2}
+                  dominantBaseline="central"
+                  fontSize={11}
+                  fill="hsl(var(--foreground))"
+                  fontWeight={isHovered ? 600 : 400}
+                >
+                  {task.name.length > labelWidth / 8
+                    ? `${task.name.slice(0, Math.floor(labelWidth / 8))}…`
+                    : task.name}
+                </text>
+                {/* Background bar */}
+                <rect
+                  x={barX}
+                  y={barY}
+                  width={Math.max(barW, 2)}
+                  height={barH}
+                  rx={3}
+                  fill={color}
+                  fillOpacity={0.25}
+                  stroke={isHovered ? color : "none"}
+                  strokeWidth={isHovered ? 1.5 : 0}
+                />
+                {/* Progress fill */}
+                {progress > 0 && (
+                  <rect
+                    x={barX}
+                    y={barY}
+                    width={Math.max((barW * progress) / 100, 2)}
+                    height={barH}
+                    rx={3}
+                    fill={color}
+                    fillOpacity={0.85}
+                  />
+                )}
+              </g>
+            );
+          })}
+
+          {/* Dependency arrows */}
+          {orderedTasks.map((task) =>
+            (task.dependencies ?? []).map((depId) => {
+              const fromIdx = taskIndex.get(depId);
+              if (fromIdx === undefined) return null;
+              const toIdx = taskIndex.get(task.id)!;
+              const fromTask = orderedTasks[fromIdx];
+              const fromEndX = labelWidth + xOf(fromTask.end.getTime(), 1000);
+              const fromY = HEADER_HEIGHT + fromIdx * rowHeight + rowHeight / 2;
+              const toStartX = labelWidth + xOf(task.start.getTime(), 1000);
+              const toY = HEADER_HEIGHT + toIdx * rowHeight + rowHeight / 2;
+              const midX = (fromEndX + toStartX) / 2;
+
+              return (
+                <g key={`${depId}-${task.id}`}>
+                  <path
+                    d={`M${fromEndX},${fromY} C${midX},${fromY} ${midX},${toY} ${toStartX},${toY}`}
+                    fill="none"
+                    stroke="hsl(var(--muted-foreground))"
+                    strokeWidth={1}
+                    strokeDasharray="3 2"
+                    markerEnd="url(#arrow)"
+                  />
+                </g>
+              );
+            }),
+          )}
+
+          {/* Milestones */}
+          {milestones.map((m, i) => {
+            const x = labelWidth + xOf(m.date.getTime(), 1000);
+            return (
+              <g key={m.id}>
+                <line
+                  x1={x}
+                  y1={HEADER_HEIGHT}
+                  x2={x}
+                  y2={svgHeight}
+                  stroke={m.color ?? "hsl(var(--warning))"}
+                  strokeWidth={1.5}
+                  strokeDasharray="4 3"
+                />
+                <polygon
+                  points={`${x},${HEADER_HEIGHT - 2} ${x + 5},${HEADER_HEIGHT + 6} ${x},${HEADER_HEIGHT + 14} ${x - 5},${HEADER_HEIGHT + 6}`}
+                  fill={m.color ?? "hsl(var(--warning))"}
+                />
+              </g>
+            );
+          })}
+
+          {/* Arrow marker definition */}
+          <defs>
+            <marker
+              id="arrow"
+              viewBox="0 0 6 6"
+              refX={6}
+              refY={3}
+              markerWidth={6}
+              markerHeight={6}
+              orient="auto-start-reverse"
+            >
+              <path
+                d="M 0 0 L 6 3 L 0 6 z"
+                fill="hsl(var(--muted-foreground))"
+              />
+            </marker>
+          </defs>
+        </svg>
+
+        {/* Tooltip */}
+        {tooltipInfo && (
+          <div
+            style={{
+              position: "absolute",
+              left: tooltipInfo.x + 12,
+              top: tooltipInfo.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: 220,
+            }}
+          >
+            <div
+              style={{
+                fontWeight: 600,
+                color: "hsl(var(--foreground))",
+                marginBottom: 2,
+              }}
+            >
+              {tooltipInfo.task.name}
+            </div>
+            <div style={{ color: "hsl(var(--muted-foreground))" }}>
+              {tooltipInfo.task.start.toLocaleDateString()} –{" "}
+              {tooltipInfo.task.end.toLocaleDateString()}
+            </div>
+            {tooltipInfo.task.progress != null && (
+              <div style={{ color: "hsl(var(--muted-foreground))" }}>
+                Progress: {tooltipInfo.task.progress}%
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+GanttChart.displayName = "GanttChart";
+export { GanttChart };