waffle-charts-cli 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,28 @@
+# WaffleCharts CLI 🧇
+
+The official CLI for [WaffleCharts](https://mbuchthal.github.io/waffle-charts).
+
+> Beautiful, headless, copy-pasteable charts for React. Built with Visx and Tailwind CSS.
+
+## Usage
+
+Run the `add` command to interactively select charts to add to your project:
+
+```bash
+npx waffle-charts-cli add
+```
+
+Or add a specific chart directly:
+
+```bash
+npx waffle-charts-cli add bar-chart
+```
+
+## What it does
+
+1.  **Checks dependencies**: Detects if you have the necessary `@visx` packages and installs them if missing.
+2.  **Copies code**: Downloads (or copies) the component source code directly into your project's component directory.
+
+## 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.1",
   "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,10 @@ 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"],
   }
 };

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>
+  );
+}