waffle-charts-cli 0.1.0

package/bin/index.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { add } from '../src/commands/add.js';
+
+const program = new Command();
+
+const packageJson = JSON.parse(
+  fs.readFileSync(
+    path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json'),
+    'utf-8'
+  )
+);
+
+program
+  .name('waffle-charts')
+  .description('CLI to easily add WaffleCharts components to your React project')
+  .version(packageJson.version);
+
+program
+  .command('add')
+  .description('Add a chart component to your project')
+  .argument('[component]', 'The component to add (e.g. bar-chart)')
+  .option('-p, --path <path>', 'Path to add the component to', 'src/components/ui/waffle')
+  .action(add);
+
+program.parse();

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "waffle-charts-cli",
+  "version": "0.1.0",
+  "description": "CLI to add WaffleCharts components to your project",
+  "main": "bin/index.js",
+  "bin": {
+    "waffle-charts": "./bin/index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "charts",
+    "cli",
+    "visx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mbuchthal/waffle-charts.git"
+  },
+  "author": "WaffleCharts Team",
+  "license": "MIT",
+  "files": [
+    "bin",
+    "src",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2"
+  },
+  "type": "module"
+}

package/src/commands/add.js

@@ -0,0 +1,91 @@
+import prompts from 'prompts';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import ora from 'ora';
+import { fileURLToPath } from 'url';
+import { registry } from '../registry.js';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export async function add(component, options) {
+  let selectedComponents = component ? [component] : [];
+
+  // 1. If no component provided, ask user
+  if (!component) {
+    const response = await prompts({
+      type: 'multiselect',
+      name: 'components',
+      message: 'Which charts would you like to add?',
+      choices: Object.entries(registry).map(([key, value]) => ({
+        title: value.label,
+        value: key
+      })),
+      min: 1
+    });
+
+    if (!response.components || response.components.length === 0) {
+      console.log(chalk.yellow('No components selected. Exiting.'));
+      process.exit(0);
+    }
+    selectedComponents = response.components;
+  }
+
+  // 2. Validate selections
+  for (const comp of selectedComponents) {
+    if (!registry[comp]) {
+      console.error(chalk.red(`Error: Component "${comp}" not found in registry.`));
+      process.exit(1);
+    }
+  }
+
+  const targetDir = path.resolve(process.cwd(), options.path);
+
+  // 3. Ensure target directory exists
+  if (!fs.existsSync(targetDir)) {
+    const spinner = ora(`Creating directory ${options.path}...`).start();
+    fs.mkdirpSync(targetDir);
+    spinner.succeed(`Created directory ${options.path}`);
+  }
+
+  // 4. Install Dependencies
+  const dependencies = new Set();
+  selectedComponents.forEach(comp => {
+    registry[comp].dependencies.forEach(dep => dependencies.add(dep));
+  });
+
+  const dependencySpinner = ora('Installing dependencies...').start();
+  try {
+    // Detect package manager (simple check)
+    const packageManager = fs.existsSync('yarn.lock') ? 'yarn add' : 'npm install';
+    const installCmd = `${packageManager} ${Array.from(dependencies).join(' ')}`;
+    execSync(installCmd, { stdio: 'ignore' });
+    dependencySpinner.succeed('Dependencies installed');
+  } catch (error) {
+    dependencySpinner.fail('Failed to install dependencies');
+    console.error(error);
+  }
+
+  // 5. Copy Files
+  for (const comp of selectedComponents) {
+    const spinner = ora(`Adding ${registry[comp].label}...`).start();
+    const templatePath = path.join(__dirname, '../../templates', registry[comp].file);
+    const destPath = path.join(targetDir, registry[comp].file);
+
+    try {
+      if (fs.existsSync(templatePath)) {
+        fs.copyFileSync(templatePath, destPath);
+        spinner.succeed(`Added ${registry[comp].label} to ${options.path}/${registry[comp].file}`);
+      } else {
+        spinner.fail(`Template for ${comp} not found at ${templatePath}`);
+      }
+    } catch (error) {
+      spinner.fail(`Failed to copy ${comp}`);
+      console.error(error);
+    }
+  }
+
+  console.log(chalk.green('\nDone! Happy charting with WaffleCharts. 🧇'));
+}

package/src/registry.js

@@ -0,0 +1,47 @@
+export const registry = {
+  "bar-chart": {
+    file: "BarChart.tsx",
+    label: "Bar Chart",
+    dependencies: ["@visx/shape", "@visx/scale", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/axis", "@visx/grid", "clsx", "tailwind-merge"],
+  },
+  "line-chart": {
+    file: "LineChart.tsx",
+    label: "Line Chart",
+    dependencies: ["@visx/shape", "@visx/curve", "@visx/scale", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/axis", "@visx/grid", "@visx/glyph", "clsx", "tailwind-merge"],
+  },
+  "area-chart": {
+    file: "AreaChart.tsx",
+    label: "Area Chart",
+    dependencies: ["@visx/shape", "@visx/curve", "@visx/scale", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/axis", "@visx/grid", "clsx", "tailwind-merge"],
+  },
+  "pie-chart": {
+    file: "PieChart.tsx",
+    label: "Pie Chart",
+    dependencies: ["@visx/shape", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/text", "clsx", "tailwind-merge"],
+  },
+  "radar-chart": {
+    file: "RadarChart.tsx",
+    label: "Radar Chart",
+    dependencies: ["@visx/shape", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/scale", "@visx/point", "@visx/grid", "@visx/curve", "clsx", "tailwind-merge"],
+  },
+  "bubble-chart": {
+    file: "BubbleChart.tsx",
+    label: "Bubble Chart",
+    dependencies: ["@visx/shape", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/scale", "@visx/axis", "@visx/grid", "clsx", "tailwind-merge"],
+  },
+  "heatmap-chart": {
+    file: "HeatmapChart.tsx",
+    label: "Heatmap Chart",
+    dependencies: ["@visx/heatmap", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/scale", "@visx/axis", "clsx", "tailwind-merge"],
+  },
+  "treemap-chart": {
+    file: "TreemapChart.tsx",
+    label: "Treemap Chart",
+    dependencies: ["@visx/hierarchy", "@visx/group", "@visx/responsive", "@visx/tooltip", "@visx/scale", "clsx", "tailwind-merge"],
+  },
+  "scatter-chart": {
+    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"],
+  }
+};

package/templates/AreaChart.tsx

@@ -0,0 +1,205 @@
+import { useMemo } from 'react';
+import { AreaStack } from '@visx/shape';
+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 { bisector } from 'd3-array';
+
+export type AreaChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  keys: (keyof T)[]; // Keys to stack
+  colors?: string[]; // CSS text-color classes
+  className?: string;
+  width?: number;
+  height?: number;
+};
+
+type AreaChartContentProps<T> = AreaChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function AreaChartContent<T>({
+  data,
+  width,
+  height,
+  xKey,
+  keys,
+  colors = ['text-blue-500', 'text-indigo-500', 'text-purple-500'],
+  className,
+}: AreaChartContentProps<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 getY0 = (d: unknown) => (d as { [key: string]: number })[0];
+  const getY1 = (d: unknown) => (d as { [key: string]: number })[1];
+
+
+  // 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,
+        // Calculate max value from stacked data could be complex, assuming simplistic sum or finding max from data
+        // For accurate stacking, we should ideally calculate the max stack value.
+        // For this demo, let's just make sure we cover the data range generously.
+        domain: [0, Math.max(...data.map(d => keys.reduce((acc, k) => acc + Number(d[k]), 0))) * 1.1],
+        nice: true,
+      }),
+    [yMax, data, keys],
+  );
+
+  // Tooltip - Simplified for AreaStack (just showing nearest X for now)
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<T>();
+
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+  });
+
+  const bisectDate = bisector<T, Date>(d => getX(d)).left;
+
+  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(0) + margin.top, // Snap to bottom or follow mouse
+      });
+    }
+  };
+
+  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}>
+          <GridRows scale={yScale} width={xMax} height={yMax} strokeDasharray="3,3" stroke="hsl(var(--border))" />
+          <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",
+            }}
+          />
+          <AxisLeft
+            scale={yScale}
+            stroke="transparent"
+            tickStroke="hsl(var(--border))"
+            tickLabelProps={{
+              fill: "hsl(var(--muted-foreground))",
+              fontSize: 11,
+              textAnchor: "end",
+              dx: -4,
+              dy: 4,
+            }}
+          />
+
+          <AreaStack
+            data={data}
+            keys={keys as string[]}
+            x={d => xScale(getX(d.data)) ?? 0}
+            y0={d => yScale(getY0(d)) ?? 0}
+            y1={d => yScale(getY1(d)) ?? 0}
+          >
+            {({ stacks, path }) =>
+              stacks.map((stack, i) => (
+                <path
+                  key={`stack-${stack.key}`}
+                  d={path(stack) || ''}
+                  stroke="transparent"
+                  // Use currentColor to inherit color from text-class
+                  className={cn("fill-current opacity-80 hover:opacity-100 transition-opacity", colors[i % colors.length])}
+                />
+              ))
+            }
+          </AreaStack>
+
+          {/* Invisible Overlay for Tooltip */}
+          <rect
+            x={0}
+            y={0}
+            width={xMax}
+            height={yMax}
+            fill="transparent"
+            onTouchStart={handleTooltip}
+            onTouchMove={handleTooltip}
+            onMouseMove={handleTooltip}
+            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">
+            <p className="font-semibold text-xs text-muted-foreground mb-1">{getX(tooltipData).toLocaleDateString()}</p>
+            {keys.map((key, i) => (
+              <div key={key as string} className="flex items-center gap-2">
+                <div className={cn("w-2 h-2 rounded-full bg-current", colors[i % colors.length])} />
+                <span className="text-xs capitalize">{key as string}:</span>
+                <span className="font-mono text-xs font-bold">{String(tooltipData[key])}</span>
+              </div>
+            ))}
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const AreaChart = <T,>(props: AreaChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <AreaChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}

package/templates/BarChart.tsx

@@ -0,0 +1,165 @@
+import { useMemo } from 'react';
+import { Bar } from '@visx/shape';
+import { Group } from '@visx/group';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+import { ParentSize } from '@visx/responsive';
+import { cn } from '../../lib/utils';
+
+// Types
+export type BarChartProps<T> = {
+  data: T[];
+  xKey: keyof T;
+  yKey: keyof T;
+  className?: string;
+  barColor?: string;
+  width?: number;
+  height?: number;
+};
+
+// Internal component with required dimensions
+type BarChartContentProps<T> = BarChartProps<T> & {
+  width: number;
+  height: number;
+};
+
+function BarChartContent<T>({
+  data,
+  width,
+  height,
+  xKey,
+  yKey,
+  className,
+  barColor = "bg-primary"
+}: BarChartContentProps<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) => d[xKey] as string;
+  const getY = (d: T) => Number(d[yKey]);
+
+  // Scales
+  const xScale = useMemo(
+    () =>
+      scaleBand<string>({
+        range: [0, xMax],
+        round: true,
+        domain: data.map(getX),
+        padding: 0.4,
+      }),
+    [xMax, data, xKey],
+  );
+
+  const yScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        range: [yMax, 0],
+        round: true,
+        domain: [0, Math.max(...data.map(getY))],
+      }),
+    [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}>
+          <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,
+            }}
+            numTicks={5}
+          />
+          {data.map((d) => {
+            const letter = getX(d);
+            const barWidth = xScale.bandwidth();
+            const barHeight = yMax - (yScale(getY(d)) ?? 0);
+            const barX = xScale(letter);
+            const barY = yMax - barHeight;
+            return (
+              <Bar
+                key={`bar-${letter}`}
+                x={barX}
+                y={barY}
+                width={barWidth}
+                height={barHeight}
+                className={cn("fill-primary transition-all duration-300 hover:opacity-80 cursor-pointer", barColor)}
+                onMouseLeave={() => hideTooltip()}
+                onMouseMove={(event) => {
+                  const eventSvgCoords = localPoint(event);
+                  const left = barX! + barWidth / 2;
+                  showTooltip({
+                    tooltipData: d,
+                    tooltipTop: eventSvgCoords?.y,
+                    tooltipLeft: left,
+                  });
+                }}
+              />
+            );
+          })}
+        </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)}</p>
+          </div>
+        </TooltipInPortal>
+      )}
+    </div>
+  );
+}
+
+export const BarChart = <T,>(props: BarChartProps<T>) => {
+  return (
+    <div className="w-full h-[300px]">
+      <ParentSize>
+        {({ width, height }) => <BarChartContent {...props} width={width} height={height} />}
+      </ParentSize>
+    </div>
+  )
+}