waffle-charts-cli 0.1.0

package/templates/PieChart.tsx

@@ -0,0 +1,177 @@
+import { Pie } from '@visx/shape';
+import { Group } from '@visx/group';
+import { scaleOrdinal } from '@visx/scale';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { useState } from 'react';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+import { arc as d3arc } from 'd3-shape'; // Direct import for custom arc generation
+
+// Types
+export type PieChartProps<T> = {
+  data: T[];
+  valueKey: keyof T;
+  labelKey: keyof T; // Used for tooltip or legend
+  width?: number;
+  height?: number;
+  className?: string; // Wrapper class
+  innerRadius?: number; // 0 for Pie, >0 for Donut
+  colors?: string[]; // CSS variable strings or hex
+  centerText?: {
+    title: string;
+    subtitle?: string;
+  };
+};
+
+type PieChartContentProps<T> = PieChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function PieChartContent<T>({
+  data,
+  width,
+  height,
+  valueKey,
+  labelKey,
+  className,
+  innerRadius = 0, // Default to full pie
+  colors,
+  centerText,
+}: PieChartContentProps<T>) {
+  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const centerY = innerHeight / 2;
+  const centerX = innerWidth / 2;
+
+  // Accessors
+  const getValue = (d: T) => Number(d[valueKey]);
+
+  // Scales (Color)
+  // We prefer using CSS classes/variables, but Visx Pie returns arcs.
+  // We will map index to a Tailwind color class if provided, or default ordinals.
+  const defaultColors = ['text-primary', 'text-blue-500', 'text-indigo-500', 'text-sky-500', 'text-cyan-500']
+  const colorScale = scaleOrdinal({
+    domain: data.map((_, i) => i),
+    range: colors || defaultColors,
+  });
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+    detectBounds: true,
+  });
+
+  // Interaction State
+  const [activeShape, setActiveShape] = useState<number | null>(null);
+
+  if (width < 10) return null;
+
+  return (
+    <div className={cn("relative flex items-center justify-center", className)}>
+      <svg ref={containerRef} width={width} height={height} className="overflow-visible">
+        <Group top={centerY + margin.top} left={centerX + margin.left}>
+          <Pie
+            data={data}
+            pieValue={getValue}
+            outerRadius={radius}
+            innerRadius={innerRadius}
+            padAngle={0.02}
+            cornerRadius={3}
+          >
+            {(pie) => {
+              return pie.arcs.map((arc, index) => {
+                const [centroidX, centroidY] = pie.path.centroid(arc);
+                const isHovered = activeShape === index;
+                const currentOuterRadius = isHovered ? radius + 5 : radius;
+
+                // Create custom arc generator for hover effect
+                // Create custom arc generator for hover effect
+                const arcGenerator = d3arc().cornerRadius(3);
+                // @ts-ignore - d3 types might still complain about explicit config matching
+                const arcPath = arcGenerator({
+                  innerRadius,
+                  outerRadius: currentOuterRadius,
+                  startAngle: arc.startAngle,
+                  endAngle: arc.endAngle,
+                  padAngle: arc.padAngle,
+                });
+
+                return (
+                  <g key={`arc-${index}`}>
+                    <path
+                      d={arcPath || ''}
+                      className={cn("fill-current transition-all duration-300 cursor-pointer hover:opacity-80", colorScale(index))}
+                      // If colors are passed as specific colors (not classes), you might use fill={...} instead. 
+                      // This implementation assumes 'colors' prop contains Tailwind TEXT color classes (e.g. 'text-blue-500'),
+                      // which fill-current will inherit.
+                      onMouseEnter={() => {
+                        setActiveShape(index);
+                        showTooltip({
+                          tooltipData: arc.data,
+                          tooltipLeft: centroidX + centerX + margin.left,
+                          tooltipTop: centroidY + centerY + margin.top,
+                        })
+                      }}
+                      onMouseLeave={() => {
+                        setActiveShape(null);
+                        hideTooltip();
+                      }}
+                    />
+                  </g>
+                )
+              })
+            }}
+          </Pie>
+
+          {/* Center Text (Donut only) */}
+          {innerRadius > 0 && centerText && (
+            <text
+              textAnchor="middle"
+              pointerEvents="none"
+            >
+              <tspan x="0" dy="-0.5em" className="fill-foreground text-2xl font-bold">{centerText.title}</tspan>
+              {centerText.subtitle && (
+                <tspan x="0" dy="1.5em" className="fill-muted-foreground text-sm uppercase tracking-wider">{centerText.subtitle}</tspan>
+              )}
+            </text>
+          )}
+
+        </Group>
+      </svg>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{ ...defaultStyles, padding: 0, borderRadius: 0, boxShadow: 'none', background: 'transparent' }}
+        >
+          <div className="rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95">
+            <p className="font-semibold">{String(getValue(tooltipData))}</p>
+            <p className="text-xs text-muted-foreground">{String(tooltipData[labelKey])}</p>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const PieChart = <T,>(props: PieChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <PieChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}

package/templates/RadarChart.tsx

@@ -0,0 +1,163 @@
+import { Group } from '@visx/group';
+import { scaleLinear } from '@visx/scale';
+import { Point } from '@visx/point';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+import { useMemo } from 'react';
+
+export type RadarChartProps<T> = {
+  data: T[];
+  radiusKey: keyof T;
+  angleKey: keyof T;
+  className?: string;
+  gridColor?: string;
+  polygonColor?: string;
+  width?: number;
+  height?: number;
+};
+
+type RadarChartContentProps<T> = RadarChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function RadarChartContent<T>({
+  data,
+  width,
+  height,
+  radiusKey,
+  angleKey,
+  className,
+  gridColor = "stroke-border",
+  polygonColor = "fill-primary",
+}: RadarChartContentProps<T>) {
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 };
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+  const radius = Math.min(xMax, yMax) / 2;
+
+  const getRadius = (d: T) => Number(d[radiusKey]);
+  const getAngle = (d: T) => d[angleKey] as string;
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [0, radius],
+        domain: [0, Math.max(...data.map(getRadius)) * 1.1],
+      }),
+    [radius, data, radiusKey]
+  );
+
+  const angleStep = (Math.PI * 2) / data.length;
+
+  // Generate grid points
+  // 5 concentric circles
+  const gridLevels = [1, 2, 3, 4, 5];
+  const gridPoints = gridLevels.map((level) => {
+    const r = (radius / 5) * level;
+    return data.map((_, i) => {
+      const angle = i * angleStep - Math.PI / 2;
+      return new Point({
+        x: r * Math.cos(angle),
+        y: r * Math.sin(angle),
+      });
+    });
+  });
+
+  // Calculate polygon points
+  const points = data.map((d, i) => {
+    const angle = i * angleStep - Math.PI / 2;
+    const r = yScale(getRadius(d));
+    return new Point({
+      x: r * Math.cos(angle),
+      y: r * Math.sin(angle),
+    });
+  });
+
+  if (width < 10) return null;
+
+  return (
+    <div className={cn("relative flex items-center justify-center", className)}>
+      <svg width={width} height={height} className="overflow-visible">
+        <Group top={height / 2} left={width / 2}>
+          {/* Grid Rings (Polygonal) */}
+          {gridPoints.map((levelPoints, i) => (
+            <polygon
+              key={`grid-level-${i}`}
+              points={levelPoints.map(p => `${p.x},${p.y}`).join(' ')}
+              fill="transparent"
+              stroke="currentColor"
+              className={cn("stroke-1 opacity-20", gridColor)}
+            />
+          ))}
+
+          {/* Axes */}
+          {data.map((_, i) => {
+            const angle = i * angleStep - Math.PI / 2;
+            const r = radius;
+            const x = r * Math.cos(angle);
+            const y = r * Math.sin(angle);
+            return (
+              <line
+                key={`axis-${i}`}
+                x1={0}
+                y1={0}
+                x2={x}
+                y2={y}
+                className={cn("stroke-1 opacity-20", gridColor)}
+              />
+            );
+          })}
+
+          {/* Labels */}
+          {data.map((d, i) => {
+            const angle = i * angleStep - Math.PI / 2;
+            const r = radius + 20; // Offset label
+            const x = r * Math.cos(angle);
+            const y = r * Math.sin(angle);
+            return (
+              <text
+                key={`label-${i}`}
+                x={x}
+                y={y}
+                dy="0.35em"
+                textAnchor={x > 0 ? 'start' : x < 0 ? 'end' : 'middle'}
+                className="text-xs fill-muted-foreground capit"
+              >
+                {getAngle(d)}
+              </text>
+            );
+          })}
+
+          {/* The Radar Polygon */}
+          <polygon
+            points={points.map(p => `${p.x},${p.y}`).join(' ')}
+            className={cn("stroke-primary stroke-2 fill-primary/20 hover:opacity-80 transition-opacity", polygonColor)}
+          />
+
+          {/* Dots on corners */}
+          {points.map((p, i) => (
+            <circle
+              key={`point-${i}`}
+              cx={p.x}
+              cy={p.y}
+              r={4}
+              className="fill-background stroke-primary stroke-2"
+            />
+          ))}
+
+        </Group>
+      </svg>
+    </div>
+  );
+}
+
+export const RadarChart = <T,>(props: RadarChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <RadarChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}

package/templates/ScatterChart.tsx

@@ -0,0 +1,167 @@
+import { useMemo } from 'react';
+import { Group } from '@visx/group';
+import { Circle } from '@visx/shape';
+import { scaleLinear } from '@visx/scale';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { Grid } from '@visx/grid';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+
+// Types
+export type ScatterChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  yKey: keyof T;
+  className?: string; // Wrapper class
+  pointClassName?: string; // Point color/style
+  width?: number;
+  height?: number;
+};
+
+// Internal component
+type ScatterChartContentProps<T> = ScatterChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function ScatterChartContent<T>({
+  data,
+  width,
+  height,
+  xKey,
+  yKey,
+  className,
+  pointClassName = "fill-primary",
+}: ScatterChartContentProps<T>) {
+  // Config
+  const margin = { top: 40, right: 30, bottom: 50, left: 50 };
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+
+  // Accessors
+  const getX = (d: T) => Number(d[xKey]);
+  const getY = (d: T) => Number(d[yKey]);
+
+  // Scales
+  const xScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [0, xMax],
+        round: true,
+        domain: [0, Math.max(...data.map(getX)) * 1.1], // Add padding
+      }),
+    [xMax, data, xKey],
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, Math.max(...data.map(getY)) * 1.1],
+      }),
+    [yMax, data, yKey],
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  if (width < 10) return null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <svg ref={containerRef} width={width} height={height} className="overflow-visible">
+        <Group left={margin.left} top={margin.top}>
+          <Grid
+            xScale={xScale}
+            yScale={yScale}
+            width={xMax}
+            height={yMax}
+            stroke="hsl(var(--border))"
+            strokeOpacity={0.4}
+          />
+          <AxisBottom
+            top={yMax}
+            scale={xScale}
+            stroke="hsl(var(--border))"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "middle",
+            }}
+          />
+          <AxisLeft
+            scale={yScale}
+            stroke="transparent"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "end",
+              dx: -4,
+              dy: 4,
+            }}
+          />
+          {data.map((d, i) => {
+            const cx = xScale(getX(d));
+            const cy = yScale(getY(d));
+            return (
+              <Circle
+                key={`point-${i}`}
+                cx={cx}
+                cy={cy}
+                r={6}
+                className={cn("transition-all duration-300 hover:r-8 hover:opacity-80 cursor-pointer", pointClassName)}
+                onMouseEnter={() => {
+                  showTooltip({
+                    tooltipData: d,
+                    tooltipLeft: cx + margin.left, // absolute relative to container
+                    tooltipTop: cy + margin.top, // absolute relative to container
+                  });
+                }}
+                onMouseLeave={() => hideTooltip()}
+              />
+            );
+          })}
+        </Group>
+      </svg>
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{ ...defaultStyles, padding: 0, borderRadius: 0, boxShadow: 'none', background: 'transparent' }}
+        >
+          <div className="rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95">
+            <div className="flex flex-col gap-1">
+              <span className="font-semibold">{String(getY(tooltipData))}</span>
+              <span className="text-xs text-muted-foreground">{String(getX(tooltipData))}</span>
+            </div>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const ScatterChart = <T,>(props: ScatterChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <ScatterChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}

package/templates/TreemapChart.tsx

@@ -0,0 +1,135 @@
+import { Group } from '@visx/group';
+import {
+  Treemap,
+  hierarchy,
+  treemapSquarify,
+  treemapBinary,
+  treemapDice,
+  treemapSlice,
+  treemapSliceDice,
+  treemapResquarify
+} from '@visx/hierarchy';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+import { useMemo } from 'react';
+
+// Types
+export type TreemapData = {
+  name: string;
+  size?: number; // Leaf nodes have size
+  parent?: string; // For explicit parent-child (optional if using nested structure)
+  children?: TreemapData[];
+};
+
+const tileMethods = {
+  binary: treemapBinary,
+  squarify: treemapSquarify,
+  resquarify: treemapResquarify,
+  slice: treemapSlice,
+  dice: treemapDice,
+  sliceDice: treemapSliceDice,
+};
+
+export type TreemapChartProps = {
+  data: TreemapData; // Root node
+  width?: number;
+  height?: number;
+  className?: string;
+  tileMethod?: keyof typeof tileMethods;
+  background?: string;
+};
+
+type TreemapChartContentProps = TreemapChartProps & {
+  width: number;
+  height: number;
+};
+
+function TreemapChartContent({
+  data,
+  width,
+  height,
+  className,
+  background = "fill-background",
+  tileMethod = "squarify"
+}: TreemapChartContentProps) {
+
+  const root = useMemo(() => {
+    // If data is already a hierarchy tree
+    const rootHierarchy = hierarchy(data)
+      .sort((a, b) => (b.value || 0) - (a.value || 0));
+
+    // Sum values for layout
+    return rootHierarchy.sum((d) => d.size ?? 0);
+  }, [data]);
+
+  const tile = tileMethods[tileMethod] || treemapSquarify;
+
+  if (width < 10) return null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <svg width={width} height={height} className="overflow-visible">
+        <rect width={width} height={height} rx={14} className={background} />
+        <Treemap<TreemapData>
+          top={0}
+          left={0}
+          root={root}
+          size={[width, height]}
+          tile={tile}
+          round
+        >
+          {treemap => {
+            // @visx/hierarchy Treemap passes the root node of the layout as the argument
+            const nodes = treemap.descendants();
+
+            return (
+              <Group>
+                {nodes.map((node, i) => {
+                  const width = node.x1 - node.x0;
+                  const height = node.y1 - node.y0;
+                  // Skip root if we want, or render it as background. usually we skip root rect or render it transparent
+                  if (node.depth === 0) return null;
+
+                  return (
+                    <Group key={`node-${i}`} top={node.y0} left={node.x0}>
+                      <rect
+                        width={width}
+                        height={height}
+                        className={cn("stroke-background stroke-[2px] transition-all hover:opacity-80",
+                          node.depth === 1 ? "fill-primary" : "fill-accent"
+                        )}
+                      />
+                      {width > 30 && height > 20 && (
+                        <text
+                          x={width / 2}
+                          y={height / 2}
+                          dy=".33em"
+                          fontSize={10}
+                          textAnchor="middle"
+                          fill="white"
+                          className="pointer-events-none font-medium truncate"
+                        >
+                          {node.data.name}
+                        </text>
+                      )}
+                    </Group>
+                  )
+                })}
+              </Group>
+            )
+          }}
+        </Treemap>
+      </svg>
+    </div>
+  );
+}
+
+export const TreemapChart = (props: TreemapChartProps) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <TreemapChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}