waffle-charts-cli 0.1.0

package/templates/BubbleChart.tsx

@@ -0,0 +1,193 @@
+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 BubbleChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  yKey: keyof T;
+  zKey: keyof T; // Radius
+  className?: string; // Wrapper class
+  pointClassName?: string; // Point color/style
+  width?: number;
+  height?: number;
+  minRadius?: number;
+  maxRadius?: number;
+};
+
+// Internal component
+type BubbleChartContentProps<T> = BubbleChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function BubbleChartContent<T>({
+  data,
+  width,
+  height,
+  xKey,
+  yKey,
+  zKey,
+  className,
+  pointClassName = "fill-primary/50", // Use opacity for bubbles
+  minRadius = 4,
+  maxRadius = 30,
+}: BubbleChartContentProps<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]);
+  const getZ = (d: T) => Number(d[zKey]);
+
+  // 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],
+  );
+
+  const zScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [minRadius, maxRadius],
+        round: true,
+        domain: [Math.min(...data.map(getZ)), Math.max(...data.map(getZ))],
+      }),
+    [minRadius, maxRadius, data, zKey],
+  );
+
+  // 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}
+          />
+          <AxisLeft
+            scale={yScale}
+            stroke="transparent"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "end",
+              dx: -4,
+              dy: 4,
+            }}
+          />
+          <AxisBottom
+            top={yMax}
+            scale={xScale}
+            stroke="hsl(var(--border))"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "middle",
+            }}
+          />
+          {data.map((d, i) => {
+            const cx = xScale(getX(d));
+            const cy = yScale(getY(d));
+            const r = zScale(getZ(d));
+
+            return (
+              <Circle
+                key={`point-${i}`}
+                cx={cx}
+                cy={cy}
+                r={r}
+                className={cn("transition-all duration-300 hover:opacity-80 cursor-pointer stroke-background stroke-1", 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 text-xs text-muted-foreground">Values</span>
+              <div className="grid grid-cols-2 gap-x-2 gap-y-0.5 mt-1">
+                <span>X:</span>
+                <span className="font-mono">{String(getX(tooltipData))}</span>
+                <span>Y:</span>
+                <span className="font-mono">{String(getY(tooltipData))}</span>
+                <span>Z:</span>
+                <span className="font-mono">{String(getZ(tooltipData))}</span>
+              </div>
+            </div>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const BubbleChart = <T,>(props: BubbleChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <BubbleChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}

package/templates/HeatmapChart.tsx

@@ -0,0 +1,155 @@
+import { Group } from '@visx/group';
+import { scaleLinear } from '@visx/scale';
+import { HeatmapRect } from '@visx/heatmap';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+import { useMemo } from 'react';
+
+// Types
+export type HeatmapData = {
+  bin: number;
+  bins: {
+    bin: number;
+    count: number;
+  }[];
+};
+
+export type HeatmapChartProps = {
+  data: HeatmapData[];
+  width?: number;
+  height?: number;
+  className?: string;
+  colorRange?: [string, string]; // Hex colors for min/max
+  gap?: number;
+};
+
+type HeatmapChartContentProps = HeatmapChartProps & {
+  width: number;
+  height: number;
+};
+
+function HeatmapChartContent({
+  data,
+  width,
+  height,
+  className,
+  colorRange = ['#e2e8f0', '#0f172a'], // Default slate-200 to slate-900 (using hex for interpolation usually better, but Visx scale accepts colors)
+  gap = 2,
+}: HeatmapChartContentProps) {
+  const margin = { top: 10, right: 10, bottom: 20, left: 20 };
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
+
+  // Helpers
+  const binWidth = xMax / data.length;
+
+  // Scales
+  const xScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        domain: [0, data.length],
+        range: [0, xMax],
+      }),
+    [xMax, data],
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        domain: [0, data[0].bins.length],
+        range: [yMax, 0],
+      }),
+    [yMax, data],
+  );
+
+  const maxCount = Math.max(...data.flatMap((d) => d.bins.map((b) => b.count)));
+  const colorScale = useMemo(
+    () =>
+      scaleLinear<string>({
+        domain: [0, maxCount],
+        range: colorRange,
+      }),
+    [maxCount, colorRange],
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<number>(); // Tooltip data is just the bin count (number)
+
+  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}>
+          <HeatmapRect<HeatmapData, { bin: number; count: number }>
+            data={data}
+            xScale={xScale}
+            yScale={yScale}
+            colorScale={colorScale}
+            binWidth={binWidth}
+            binHeight={binWidth}
+            gap={gap}
+          >
+            {(heatmap) =>
+              heatmap.map((heatmapBins) =>
+                heatmapBins.map((bin) => (
+                  <rect
+                    key={`heatmap-rect-${bin.row}-${bin.column}`}
+                    className="transition-all duration-300 hover:opacity-80 cursor-pointer"
+                    width={bin.width}
+                    height={bin.height}
+                    x={bin.x}
+                    y={bin.y}
+                    fill={bin.color}
+                    rx={2}
+                    onMouseEnter={() => {
+                      showTooltip({
+                        tooltipData: bin.count ?? 0, // Ensure strictly number
+                        tooltipLeft: bin.x + margin.left + bin.width / 2,
+                        tooltipTop: bin.y + margin.top,
+                      });
+                    }}
+                    onMouseLeave={() => hideTooltip()}
+                  />
+                ))
+              )
+            }
+          </HeatmapRect>
+        </Group>
+      </svg>
+      {tooltipOpen && tooltipData !== undefined && (
+        <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">Value: {tooltipData}</p>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const HeatmapChart = (props: HeatmapChartProps) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <HeatmapChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}

package/templates/LineChart.tsx

@@ -0,0 +1,230 @@
+import { useMemo } from 'react';
+import { AreaClosed, LinePath, Bar } from '@visx/shape';
+import { curveMonotoneX } from '@visx/curve';
+import { Group } from '@visx/group';
+import { scaleTime, scaleLinear } from '@visx/scale';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { GridRows, GridColumns } from '@visx/grid';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+import { GlyphCircle } from '@visx/glyph';
+import { bisector } from 'd3-array';
+
+// Types
+export type LineChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  yKey: keyof T;
+  className?: string;
+  lineColor?: string;
+  areaColor?: string; // CSS class for area fill
+  width?: number;
+  height?: number;
+};
+
+type LineChartContentProps<T> = LineChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function LineChartContent<T>({
+  data,
+  width,
+  height,
+  xKey,
+  yKey,
+  className,
+  lineColor = "stroke-primary",
+  areaColor = "text-primary", // using text color to set fill via currentColor/opacity
+}: LineChartContentProps<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) => new Date(d[xKey] as string | number | Date);
+  const getY = (d: T) => Number(d[yKey]);
+
+  // Bisector for tooltip
+  const bisectDate = bisector<T, Date>(d => getX(d)).left;
+
+  // Scales
+  const xScale = useMemo(
+    () =>
+      scaleTime({
+        range: [0, xMax],
+        domain: [Math.min(...data.map(d => getX(d).getTime())), Math.max(...data.map(d => getX(d).getTime()))],
+      }),
+    [xMax, data, xKey],
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, Math.max(...data.map(getY)) * 1.1], // Add some padding
+      }),
+    [yMax, data, yKey],
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  const handleTooltip = (event: React.MouseEvent<SVGRectElement> | React.TouchEvent<SVGRectElement>) => {
+    const { x } = localPoint(event) || { x: 0 };
+    const x0 = xScale.invert(x - margin.left);
+    const index = bisectDate(data, x0, 1);
+    const d0 = data[index - 1];
+    const d1 = data[index];
+    let d = d0;
+    if (d1 && getX(d1)) {
+      d = x0.valueOf() - getX(d0).valueOf() > getX(d1).valueOf() - x0.valueOf() ? d1 : d0;
+    }
+
+    if (d) {
+      showTooltip({
+        tooltipData: d,
+        tooltipLeft: xScale(getX(d)) + margin.left,
+        tooltipTop: yScale(getY(d)) + margin.top,
+      });
+    }
+  };
+
+  if (width < 10) return null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <svg ref={containerRef} width={width} height={height} className="overflow-visible">
+        {/* Defs for gradient */}
+        <defs>
+          <linearGradient id="area-gradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="currentColor" stopOpacity={0.2} className={areaColor} />
+            <stop offset="100%" stopColor="currentColor" stopOpacity={0} className={areaColor} />
+          </linearGradient>
+        </defs>
+
+        <Group left={margin.left} top={margin.top}>
+          <GridRows scale={yScale} width={xMax} height={yMax} strokeDasharray="3,3" stroke="hsl(var(--border))" tickValues={[...yScale.ticks(5)]} />
+          <GridColumns scale={xScale} width={xMax} height={yMax} strokeDasharray="3,3" stroke="hsl(var(--border))" />
+
+          <AxisBottom
+            top={yMax}
+            scale={xScale}
+            stroke="hsl(var(--border))"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "middle",
+            }}
+            numTicks={width > 520 ? 10 : 5}
+          />
+          <AxisLeft
+            scale={yScale}
+            stroke="transparent"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "end",
+              dx: -4,
+              dy: 4,
+            }}
+            numTicks={5}
+          />
+
+          <AreaClosed
+            data={data}
+            x={d => xScale(getX(d)) ?? 0}
+            y={d => yScale(getY(d)) ?? 0}
+            yScale={yScale}
+            curve={curveMonotoneX}
+            fill="url(#area-gradient)"
+            className={areaColor} // Pass helper class to set currentColor if needed
+          />
+
+          <LinePath
+            data={data}
+            x={d => xScale(getX(d)) ?? 0}
+            y={d => yScale(getY(d)) ?? 0}
+            curve={curveMonotoneX}
+            strokeWidth={2}
+            className={cn("fill-transparent transition-all", lineColor)}
+          />
+
+          {/* Tooltip Overlay */}
+          <Bar
+            x={0}
+            y={0}
+            width={xMax}
+            height={yMax}
+            fill="transparent"
+            rx={14}
+            onTouchStart={handleTooltip}
+            onTouchMove={handleTooltip}
+            onMouseMove={handleTooltip}
+            onMouseLeave={() => hideTooltip()}
+          />
+
+          {/* Tooltip Dot */}
+          {tooltipOpen && tooltipData && (
+            <g>
+              <GlyphCircle
+                left={xScale(getX(tooltipData)) ?? 0}
+                top={yScale(getY(tooltipData)) ?? 0}
+                size={50}
+                className={cn("fill-background", lineColor)}
+                strokeWidth={2}
+                stroke="currentColor" // Inherits from parent or setting explicitly
+              />
+              <circle
+                cx={xScale(getX(tooltipData)) ?? 0}
+                cy={yScale(getY(tooltipData)) ?? 0}
+                r={4}
+                className={cn("fill-background stroke-2", lineColor)}
+              />
+            </g>
+          )}
+
+        </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(getY(tooltipData))}</p>
+            <p className="text-xs text-muted-foreground">{getX(tooltipData).toLocaleDateString()}</p>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const LineChart = <T,>(props: LineChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <LineChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}