waffle-charts-cli 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,59 @@
+# WaffleCharts CLI 🧇
+
+The official CLI for [WaffleCharts](https://mbuchthal.github.io/waffle-charts).
+
+> **Beautiful, Headless, Copy-Pasteable Charts for React.**  
+> Built with [Visx](https://airbnb.io/visx) and [Tailwind CSS](https://tailwindcss.com).
+
+[![NPM Version](https://img.shields.io/npm/v/waffle-charts-cli)](https://www.npmjs.com/package/waffle-charts-cli)
+[![License](https://img.shields.io/npm/l/waffle-charts-cli)](https://github.com/mbuchthal/waffle-charts/blob/main/LICENSE)
+
+## Why WaffleCharts?
+
+WaffleCharts is not a component library you install and get stuck with. It's a collection of **templates**.
+The CLI copies the full source code of the chart directly into your project. You own the code. You can customize the axis, the colors, the tooltip logic—everything.
+
+## Usage
+
+Run the `add` command to interactively select charts:
+
+```bash
+npx waffle-charts-cli add
+```
+
+Or add specific charts directly:
+
+```bash
+npx waffle-charts-cli add bar-chart line-chart
+```
+
+## Available Charts
+
+| Chart | Command | Description |
+| :--- | :--- | :--- |
+| **Bar Chart** | `bar-chart` | Standard vertical bar chart for categorical data. |
+| **Line Chart** | `line-chart` | Smooth curves for trends over time. |
+| **Area Chart** | `area-chart` | Filled area charts for volume visualization. |
+| **Pie Chart** | `pie-chart` | Donut or Pie charts for proportions. |
+| **Radar Chart** | `radar-chart` | Spider/Web chart for multi-variable comparison. |
+| **Scatter Plot** | `scatter-chart` | X/Y plotting for correlation. |
+| **Bubble Chart** | `bubble-chart` | 3D data visualization (X, Y, Radius). |
+| **Heatmap** | `heatmap-chart` | Grid-based density visualization. |
+| **Treemap** | `treemap-chart` | Hierarchical data visualization. |
+| **Sankey** | `sankey-chart` | Flow and process visualization. |
+| **Composite** | `composite-chart` | **New!** Dual-axis Bar + Line combination. |
+
+## What it does
+
+1.  **Checks dependencies**: Detects if you have the necessary `@visx` packages (`shape`, `scale`, `axis`, etc.) and installs them if missing.
+2.  **Copies code**: Downloads the component source code to `src/components/waffle/` (or your configured directory).
+3.  **Zero Lock-in**: Once added, the code is yours.
+
+## Requirements
+
+- React 16+
+- Tailwind CSS configured in your project.
+
+## License
+
+MIT © [WaffleCharts](https://github.com/mbuchthal/waffle-charts)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waffle-charts-cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CLI to add WaffleCharts components to your project",
   "main": "bin/index.js",
   "bin": {
@@ -24,7 +24,8 @@
   "files": [
     "bin",
     "src",
-    "templates"
+    "templates",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -37,4 +38,4 @@
     "prompts": "^2.4.2"
   },
   "type": "module"
-}
+}

package/src/registry.js

@@ -43,5 +43,15 @@ export const registry = {
     file: "ScatterChart.tsx",
     label: "Scatter Chart",
     dependencies: ["@visx/shape", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/scale", "@visx/axis", "@visx/grid", "@visx/glyph", "clsx", "tailwind-merge"],
+  },
+  "sankey-chart": {
+    file: "SankeyChart.tsx",
+    label: "Sankey Chart",
+    dependencies: ["@visx/sankey", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/scale", "clsx", "tailwind-merge"],
+  },
+  "composite-chart": {
+    file: "CompositeChart.tsx",
+    label: "Composite Chart",
+    dependencies: ["@visx/shape", "@visx/scale", "@visx/axis", "@visx/grid", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/curve", "@visx/event", "clsx", "tailwind-merge"],
   }
 };

package/templates/CompositeChart.tsx

@@ -0,0 +1,247 @@
+import { Group } from '@visx/group';
+import { Bar, LinePath } from '@visx/shape';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { AxisLeft, AxisRight, AxisBottom } from '@visx/axis';
+import { GridRows } from '@visx/grid';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { ParentSize } from '@visx/responsive';
+import { curveMonotoneX } from '@visx/curve';
+import { localPoint } from '@visx/event';
+import { cn } from '../../lib/utils';
+import React, { useMemo } from 'react';
+
+// Types
+export type CompositeChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  barKey: keyof T;
+  lineKey: keyof T;
+  width?: number;
+  height?: number;
+  className?: string;
+  barColor?: string;
+  lineColor?: string;
+};
+
+type CompositeChartContentProps<T> = CompositeChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function CompositeChartContent<T>({
+  data,
+  xKey,
+  barKey,
+  lineKey,
+  width,
+  height,
+  className,
+  barColor = '#3b82f6', // blue-500
+  lineColor = '#ef4444', // red-500
+}: CompositeChartContentProps<T>) {
+  const margin = { top: 40, right: 50, bottom: 50, left: 50 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  // Accessors
+  const getX = (d: T) => d[xKey] as unknown as string;
+  const getBarValue = (d: T) => d[barKey] as unknown as number;
+  const getLineValue = (d: T) => d[lineKey] as unknown as number;
+
+  // Scales
+  const xScale = useMemo(
+    () =>
+      scaleBand({
+        range: [0, innerWidth],
+        domain: data.map(getX),
+        padding: 0.4,
+      }),
+    [innerWidth, data, getX]
+  );
+
+  const y1Scale = useMemo(
+    () =>
+      scaleLinear({
+        range: [innerHeight, 0],
+        domain: [0, Math.max(...data.map(getBarValue)) * 1.1], // 10% headroom
+      }),
+    [innerHeight, data, getBarValue]
+  );
+
+  const y2Scale = useMemo(
+    () =>
+      scaleLinear({
+        range: [innerHeight, 0],
+        domain: [0, Math.max(...data.map(getLineValue)) * 1.1],
+      }),
+    [innerHeight, data, getLineValue]
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<{ x: string; barVal: number; lineVal: number }>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  const handleTooltip = (event: React.MouseEvent | React.TouchEvent) => {
+    const { x } = localPoint(event) || { x: 0 };
+    const x0 = x - margin.left;
+    const bandWidth = xScale.step();
+    const index = Math.floor(x0 / bandWidth);
+
+    if (index >= 0 && index < data.length) {
+      const d = data[index];
+      const barVal = getBarValue(d);
+      const lineVal = getLineValue(d);
+      const xVal = getX(d);
+
+      const barX = xScale(xVal) ?? 0;
+
+      showTooltip({
+        tooltipData: { x: xVal, barVal, lineVal },
+        tooltipLeft: barX + xScale.bandwidth() / 2 + margin.left,
+        tooltipTop: y1Scale(barVal) + margin.top, // Snap to bar top or mouse Y
+      });
+    }
+  };
+
+  if (width < 50) return null;
+
+  return (
+    <div className={cn("relative font-sans", className)}>
+      <svg
+        ref={containerRef}
+        width={width}
+        height={height}
+        className="overflow-visible"
+        onMouseMove={handleTooltip}
+        onMouseLeave={() => hideTooltip()}
+        onTouchMove={handleTooltip}
+      >
+        <Group left={margin.left} top={margin.top}>
+          <GridRows scale={y1Scale} width={innerWidth} strokeDasharray="3,3" strokeOpacity={0.2} />
+
+          {/* Bars (Primary Axis) */}
+          {data.map((d) => {
+            const xVal = getX(d);
+            const barWidth = xScale.bandwidth();
+            const barHeight = innerHeight - (y1Scale(getBarValue(d)) ?? 0);
+            const barX = xScale(xVal);
+            const barY = innerHeight - barHeight;
+            return (
+              <Bar
+                key={`bar-${xVal}`}
+                x={barX}
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                fill={barColor}
+                rx={4}
+                opacity={0.8}
+              />
+            );
+          })}
+
+          {/* Line (Secondary Axis) */}
+          <LinePath
+            data={data}
+            x={(d) => (xScale(getX(d)) ?? 0) + xScale.bandwidth() / 2}
+            y={(d) => y2Scale(getLineValue(d)) ?? 0}
+            stroke={lineColor}
+            strokeWidth={3}
+            curve={curveMonotoneX}
+          />
+          {/* Line Points */}
+          {data.map((d, i) => (
+            <circle
+              key={i}
+              cx={(xScale(getX(d)) ?? 0) + xScale.bandwidth() / 2}
+              cy={y2Scale(getLineValue(d)) ?? 0}
+              r={4}
+              fill={lineColor}
+              stroke="white"
+              strokeWidth={2}
+            />
+          ))}
+
+          {/* Axes */}
+          <AxisBottom
+            scale={xScale}
+            top={innerHeight}
+            stroke="hsl(var(--muted-foreground))"
+            tickStroke="hsl(var(--muted-foreground))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: 'middle',
+            }}
+          />
+          <AxisLeft
+            scale={y1Scale}
+            stroke="hsl(var(--muted-foreground))"
+            tickStroke="hsl(var(--muted-foreground))"
+            tickLabelProps={{
+              fill: barColor, // Color match axis to data
+              fontSize: 11,
+              textAnchor: 'end',
+              dx: -4,
+              dy: 2,
+            }}
+          />
+          <AxisRight
+            scale={y2Scale}
+            left={innerWidth}
+            stroke="hsl(var(--muted-foreground))"
+            tickStroke="hsl(var(--muted-foreground))"
+            tickLabelProps={{
+              fill: lineColor, // Color match axis to data
+              fontSize: 11,
+              textAnchor: 'start',
+              dx: 4,
+              dy: 2,
+            }}
+          />
+        </Group>
+      </svg>
+
+      {/* Tooltip */}
+      {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">
+            <span className="font-semibold block mb-1">{tooltipData.x}</span>
+            <div className="flex items-center gap-2 text-xs">
+              <span className="w-2 h-2 rounded-full" style={{ background: barColor }}></span>
+              <span>Bar: {tooltipData.barVal}</span>
+            </div>
+            <div className="flex items-center gap-2 text-xs">
+              <span className="w-2 h-2 rounded-full" style={{ background: lineColor }}></span>
+              <span>Line: {tooltipData.lineVal}</span>
+            </div>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export function CompositeChart<T>(props: CompositeChartProps<T>) {
+  return (
+    <div className="w-full h-[400px]">
+      <ParentSize>
+        {({ width, height }) => <CompositeChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  );
+}

package/templates/SankeyChart.tsx

@@ -0,0 +1,188 @@
+import { Group } from '@visx/group';
+import { Sankey } from '@visx/sankey';
+import { scaleOrdinal } from '@visx/scale';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils'; // Adjust path if needed
+import React, { useMemo } from 'react';
+
+// Types for your Sankey data
+export type SankeyNode = {
+  name: string;
+  index?: number; // Added by Visx
+};
+
+export type SankeyLink = {
+  source: number;
+  target: number;
+  value: number;
+};
+
+export type SankeyData = {
+  nodes: SankeyNode[];
+  links: SankeyLink[];
+};
+
+export type SankeyChartProps = {
+  data: SankeyData;
+  width?: number;
+  height?: number;
+  className?: string;
+  colorScheme?: string[];
+};
+
+type SankeyChartContentProps = SankeyChartProps & {
+  width: number;
+  height: number;
+};
+
+function SankeyChartContent({
+  data,
+  width,
+  height,
+  className,
+  colorScheme = ['#a855f7', '#ec4899', '#3b82f6', '#14b8a6', '#f59e0b', '#ef4444'], // Default diverse palette
+}: SankeyChartContentProps) {
+  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  // Color Scale
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        domain: data.nodes.map((node) => node.name),
+        range: colorScheme,
+      }),
+    [data, colorScheme]
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<{ name: string; value: number }>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  /* Use a separate ref for measuring the SVG position if needed for relative tooltip calculations */
+  const svgRef = React.useRef<SVGSVGElement>(null);
+
+  // Merge refs (containerRef from visx needs to be called with the element)
+  const setRefs = (node: SVGSVGElement | null) => {
+    containerRef(node);
+    svgRef.current = node;
+  };
+
+  if (width < 50) return null;
+
+  return (
+    <div className={cn("relative font-sans", className)}>
+      <svg ref={setRefs} width={width} height={height} className="overflow-visible">
+        <Sankey
+          root={data}
+          size={[innerWidth, innerHeight]}
+          nodeWidth={15}
+          nodePadding={10}
+          extent={[[margin.left, margin.top], [innerWidth + margin.left, innerHeight + margin.top]]}
+        >
+          {({ graph }) => (
+            <Group>
+              {/* Links */}
+              {graph.links.map((link: any, i: number) => (
+                <path
+                  key={`link-${i}`}
+                  d={link.path || ''}
+                  stroke="currentColor"
+                  strokeOpacity={0.2}
+                  fill="none"
+                  strokeWidth={Math.max(1, link.width || 0)}
+                  className="text-foreground transition-opacity duration-200 hover:stroke-opacity-50"
+                  onMouseEnter={(event) => {
+                    const containerRect = svgRef.current?.getBoundingClientRect();
+                    const containerLeft = containerRect?.left || 0;
+                    const containerTop = containerRect?.top || 0;
+
+                    showTooltip({
+                      tooltipData: {
+                        name: `${link.source.name} → ${link.target.name}`,
+                        value: link.value
+                      },
+                      tooltipLeft: event.clientX - containerLeft,
+                      tooltipTop: event.clientY - containerTop,
+                    });
+                  }}
+                  onMouseLeave={() => hideTooltip()}
+                />
+              ))}
+
+              {/* Nodes */}
+              {graph.nodes.map((node: any, i: number) => (
+                <Group key={`node-${i}`} top={node.y0} left={node.x0}>
+                  <rect
+                    width={Math.max(0, node.x1 - node.x0)}
+                    height={Math.max(0, node.y1 - node.y0)}
+                    fill={colorScale(node.name)}
+                    opacity={0.8}
+                    rx={2}
+                    className="transition-all duration-200 hover:opacity-100 cursor-pointer stroke-background"
+                    strokeWidth={0}
+                    onMouseEnter={() => {
+                      showTooltip({
+                        tooltipData: { name: node.name, value: node.value },
+                        tooltipLeft: node.x1 + margin.left,
+                        tooltipTop: node.y0 + margin.top + (node.y1 - node.y0) / 2,
+                      });
+                    }}
+                    onMouseLeave={() => hideTooltip()}
+                  />
+                  {/* Node Label (only if tall enough) */}
+                  {(node.y1 - node.y0) > 12 && (
+                    <text
+                      x={node.x0 < width / 2 ? (node.x1 - node.x0) + 6 : -6}
+                      y={(node.y1 - node.y0) / 2}
+                      dy=".35em"
+                      fontSize={10} // Reduced base font size
+                      textAnchor={node.x0 < width / 2 ? 'start' : 'end'}
+                      className="fill-foreground font-medium pointer-events-none select-none"
+                    >
+                      {node.name}
+                    </text>
+                  )}
+                </Group>
+              ))}
+            </Group>
+          )}
+        </Sankey>
+      </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">
+            <span className="font-semibold block">{tooltipData.name}</span>
+            <span className="text-xs text-muted-foreground">Value: {tooltipData.value}</span>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const SankeyChart = (props: SankeyChartProps) => {
+  return (
+    <div className="w-full h-[400px]">
+      <ParentSize>
+        {({ width, height }) => <SankeyChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  );
+}