waffle-charts-cli 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waffle-charts-cli",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "CLI to add WaffleCharts components to your project",
   "main": "bin/index.js",
   "bin": {
@@ -16,9 +16,9 @@
     "visx"
   ],
   "repository": {
-    "type": "git",
     "url": "git+https://github.com/mbuchthal/waffle-charts.git"
   },
+  "homepage": "https://mbuchthal.github.io/waffle-charts",
   "author": "WaffleCharts Team",
   "license": "MIT",
   "files": [

package/src/registry.js

@@ -53,5 +53,10 @@ export const registry = {
     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"],
+  },
+  "chord-chart": {
+    file: "ChordChart.tsx",
+    label: "Chord Diagram",
+    dependencies: ["@visx/chord", "@visx/scale", "@visx/tooltip", "@visx/shape", "@visx/responsive", "@visx/group", "clsx", "tailwind-merge"],
   }
 };

package/templates/ChordChart.tsx

@@ -0,0 +1,153 @@
+import { Chord, Ribbon } from '@visx/chord';
+import { scaleOrdinal } from '@visx/scale';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { Arc } from '@visx/shape';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+import React, { useMemo, useState, useRef } from 'react';
+import { Group } from '@visx/group';
+
+// Types
+export type ChordChartProps = {
+  data: number[][];
+  keys: string[];
+  width?: number;
+  height?: number;
+  className?: string;
+  colorScheme?: string[];
+};
+
+type ChordChartContentProps = ChordChartProps & {
+  width: number;
+  height: number;
+};
+
+function ChordChartContent({
+  data,
+  keys,
+  width,
+  height,
+  className,
+  colorScheme = ['#a855f7', '#ec4899', '#3b82f6', '#14b8a6', '#f59e0b', '#ef4444'],
+}: ChordChartContentProps) {
+  const outerRadius = Math.min(width, height) * 0.5 - 40;
+  const innerRadius = outerRadius - 20;
+
+  const [activeArc, setActiveArc] = useState<number | null>(null);
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        domain: keys,
+        range: colorScheme,
+      }),
+    [keys, colorScheme]
+  );
+
+  // Tooltip
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<{ label: string; value: number }>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  // Use a local ref to access the SVG element for bounding rect
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  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">
+        <Group top={height / 2} left={width / 2}>
+          <Chord matrix={data} padAngle={0.05} sortSubgroups={(a, b) => b - a}>
+            {({ chords }) => (
+              <g>
+                {/* Ribbons */}
+                {chords.groups.map((group, i) => (
+                  <Arc
+                    key={`arc-${i}`}
+                    data={group}
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    fill={colorScale(keys[i])}
+                    className="transition-opacity duration-200 cursor-pointer"
+                    opacity={activeArc === null || activeArc === i ? 1 : 0.3}
+                    onMouseEnter={() => setActiveArc(i)}
+                    onMouseLeave={() => setActiveArc(null)}
+                  />
+                ))}
+
+                {chords.map((chord, i) => (
+                  <Ribbon
+                    key={`ribbon-${i}`}
+                    chord={chord}
+                    radius={innerRadius}
+                    fill={colorScale(keys[chord.source.index])}
+                    fillOpacity={0.75}
+                    className="transition-all duration-200 hover:fill-opacity-100 mix-blend-multiply dark:mix-blend-screen"
+                    opacity={
+                      activeArc === null ||
+                        activeArc === chord.source.index ||
+                        activeArc === chord.target.index ? 0.75 : 0.1
+                    }
+                    onMouseEnter={(event) => {
+                      const rect = svgRef.current?.getBoundingClientRect();
+                      if (!rect) return;
+
+                      showTooltip({
+                        tooltipData: {
+                          label: `${keys[chord.source.index]} ↔ ${keys[chord.target.index]}`,
+                          value: chord.source.value
+                        },
+                        tooltipLeft: event.clientX - rect.left,
+                        tooltipTop: event.clientY - rect.top,
+                      });
+                    }}
+                    onMouseLeave={() => hideTooltip()}
+                  />
+                ))}
+              </g>
+            )}
+          </Chord>
+        </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">{tooltipData.label}</span>
+            <span className="text-xs text-muted-foreground">Flow: {tooltipData.value}</span>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const ChordChart = (props: ChordChartProps) => {
+  return (
+    <div className="w-full h-[400px]">
+      <ParentSize>
+        {({ width, height }) => <ChordChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  );
+}