@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/src/components/charts/quill/PieChart.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { cn } from "@/lib/cn";
-
-export interface PieChartSlice {
-  key: string;
-  label: string;
-  value: number;
-  color?: string;
-}
-
-export interface PieChartProps {
-  slices: PieChartSlice[];
-  className?: string;
-  size?: number;
-}
-
-export function PieChart({ slices, className, size = 200 }: PieChartProps) {
-  const tokens = useChartTokens();
-
-  const { total, segments } = useMemo(() => {
-    const t = slices.reduce((s, sl) => s + Math.max(0, sl.value), 0);
-    let cum = 0;
-    const segs = slices.map((sl, i) => {
-      const start = cum;
-      const val = Math.max(0, sl.value);
-      cum += val;
-      return {
-        ...sl,
-        color: sl.color ?? tokens.series[i % tokens.series.length],
-        startAngle: (start / t) * 360,
-        endAngle: (cum / t) * 360,
-        pct: t > 0 ? (val / t) * 100 : 0,
-      };
-    });
-    return { total: t, segments: segs };
-  }, [slices, tokens.series]);
-
-  const cx = size / 2;
-  const cy = size / 2;
-  const r = size * 0.38;
-  const ir = r * 0.6;
-
-  const polarToCart = (angleDeg: number, radius: number) => {
-    const rad = ((angleDeg - 90) * Math.PI) / 180;
-    return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
-  };
-
-  const describeArc = (start: number, end: number) => {
-    if (end - start >= 359.9) {
-      const p1 = polarToCart(start, r);
-      const p2 = polarToCart(start + 179.9, r);
-      const p3 = polarToCart(start + 359.9, r);
-      return `M${p1.x},${p1.y} A${r},${r} 0 0,1 ${p2.x},${p2.y} A${r},${r} 0 0,1 ${p3.x},${p3.y} Z`;
-    }
-    const s = polarToCart(start, r);
-    const e = polarToCart(end, r);
-    const si = polarToCart(start, ir);
-    const ei = polarToCart(end, ir);
-    const large = end - start > 180 ? 1 : 0;
-    return `M${s.x},${s.y} A${r},${r} 0 ${large},1 ${e.x},${e.y} L${ei.x},${ei.y} A${ir},${ir} 0 ${large},0 ${si.x},${si.y} Z`;
-  };
-
-  return (
-    <div className={cn("relative", className)} style={{ width: size, height: size }}>
-      <svg viewBox={`0 0 ${size} ${size}`} className="h-full w-full" suppressHydrationWarning>
-        {segments.map((s) => (
-          <path key={s.key} d={describeArc(s.startAngle, s.endAngle)} fill={s.color}>
-            <title>{`${s.label}: ${s.pct.toFixed(1)}%`}</title>
-          </path>
-        ))}
-        <circle cx={cx} cy={cy} r={ir} fill="var(--ph-surface)" />
-      </svg>
-      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-        <span className="text-lg font-bold text-ph-ink tabular-nums">{slices.length}</span>
-      </div>
-    </div>
-  );
-}

package/src/components/charts/quill/Sparkline.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { cn } from "@/lib/cn";
-
-export interface SparklineProps {
-  data: number[];
-  color?: string;
-  className?: string;
-  width?: number;
-  height?: number;
-  strokeWidth?: number;
-}
-
-export function Sparkline({
-  data,
-  color,
-  className,
-  width = 80,
-  height = 32,
-  strokeWidth = 2,
-}: SparklineProps) {
-  const tokens = useChartTokens();
-  const resolvedColor = color ?? tokens.series[0];
-
-  const path = useMemo(() => {
-    if (data.length < 2) return "";
-    const min = Math.min(...data);
-    const max = Math.max(...data);
-    const range = max - min || 1;
-    const xStep = width / (data.length - 1);
-
-    return data
-      .map((v, i) => {
-        const x = i * xStep;
-        const y = height - ((v - min) / range) * (height - 4) - 2;
-        return `${i === 0 ? "M" : "L"}${x},${y}`;
-      })
-      .join(" ");
-  }, [data, width, height]);
-
-  if (data.length < 2) return null;
-
-  return (
-    <svg
-      className={cn("shrink-0", className)}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      aria-hidden
-      suppressHydrationWarning
-    >
-      <path d={path} fill="none" stroke={resolvedColor} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}

package/src/components/charts/quill/TimeSeriesLineChart.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { CanvasTrendLineChart } from "@/lib/hog-charts-lite/CanvasTrendLineChart";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { buildHogChartTheme } from "@/lib/hog-charts-lite/build-theme";
-import { cn } from "@/lib/cn";
-
-export interface TimeSeriesLineChartSeries {
-  key: string;
-  label: string;
-  data: number[];
-  color?: string;
-}
-
-export interface TimeSeriesLineChartProps {
-  series: TimeSeriesLineChartSeries[];
-  labels: string[];
-  className?: string;
-  showGrid?: boolean;
-  showCrosshair?: boolean;
-  height?: number;
-}
-
-export function TimeSeriesLineChart({
-  series,
-  labels,
-  className,
-  showGrid = true,
-  showCrosshair = true,
-  height = 280,
-}: TimeSeriesLineChartProps) {
-  const tokens = useChartTokens();
-  const theme = useMemo(() => buildHogChartTheme(tokens), [tokens]);
-
-  const resolved = useMemo(
-    () =>
-      series.map((s, i) => ({
-        key: s.key,
-        label: s.label,
-        data: s.data,
-        color: s.color ?? tokens.series[i % tokens.series.length],
-      })),
-    [series, tokens.series]
-  );
-
-  return (
-    <div
-      className={cn("relative w-full", className)}
-      style={{ height, minHeight: 220 }}
-    >
-      <CanvasTrendLineChart
-        labels={labels}
-        series={resolved}
-        theme={theme}
-        showGrid={showGrid}
-        showCrosshair={showCrosshair}
-        className="h-full min-h-[220px]"
-      />
-    </div>
-  );
-}

package/src/components/charts/quill/index.ts

@@ -1,9 +0,0 @@
-"use client";
-
-export { TimeSeriesLineChart, type TimeSeriesLineChartProps, type TimeSeriesLineChartSeries } from "./TimeSeriesLineChart";
-export { BarChart, type BarChartProps, type BarChartSeries } from "./BarChart";
-export { PieChart, type PieChartProps, type PieChartSlice } from "./PieChart";
-export { Sparkline, type SparklineProps } from "./Sparkline";
-export { MetricCard, type MetricCardProps } from "./MetricCard";
-export { FunnelChart, type FunnelChartProps, type FunnelStep } from "./FunnelChart";
-export { InsightShell, type InsightShellProps } from "./InsightShell";