@outsidedata/dolex 0.1.0

package/src/renderers/react/Alluvial.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Alluvial Chart pattern.
+ * Thin wrapper around the D3 renderAlluvial function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderAlluvial } from '../d3/flow/alluvial.js';
+
+export function Alluvial({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderAlluvial, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/Area.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Area Chart pattern.
+ * Thin wrapper around the D3 renderArea function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderArea } from '../d3/time/area.js';
+
+export function Area({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderArea, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/Bar.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Bar Chart pattern.
+ * Thin wrapper around the D3 renderBar function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderBar } from '../d3/comparison/bar.js';
+
+export function Bar({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderBar, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/Beeswarm.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Beeswarm pattern.
+ * Thin wrapper around the D3 renderBeeswarm function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderBeeswarm } from '../d3/distribution/beeswarm.js';
+
+export function Beeswarm({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderBeeswarm, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/BoxPlot.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderBoxPlot } from '../d3/distribution/box-plot.js';
+
+export function BoxPlot({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderBoxPlot, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/Bullet.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderBullet } from '../d3/comparison/bullet.js';
+
+export function Bullet({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderBullet, width, height, onReady);
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/BumpChart.tsx

@@ -0,0 +1,37 @@
+/**
+ * React component for the Bump Chart pattern.
+ *
+ * Since there's no standalone D3 renderer for bump-chart yet,
+ * this component uses the HTML builder via a sandboxed iframe.
+ */
+
+import React, { useMemo } from 'react';
+import type { ChartProps } from './types.js';
+import { buildBumpChartHtml } from '../html/builders/bump-chart.js';
+
+export function BumpChart({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const srcDoc = useMemo(() => buildBumpChartHtml(spec), [spec]);
+
+  return (
+    <iframe
+      srcDoc={srcDoc}
+      width={width}
+      height={height}
+      className={className}
+      title={spec.title || 'Bump Chart'}
+      style={{ border: 'none', display: 'block' }}
+      sandbox="allow-scripts"
+      ref={(el) => {
+        if (el && onReady) {
+          el.addEventListener('load', () => onReady(el as unknown as HTMLDivElement), { once: true });
+        }
+      }}
+    />
+  );
+}

package/src/renderers/react/CalendarHeatmap.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Calendar Heatmap pattern.
+ * Thin wrapper around the D3 renderCalendarHeatmap function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderCalendarHeatmap } from '../d3/time/calendar-heatmap.js';
+
+export function CalendarHeatmap({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderCalendarHeatmap, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/Chord.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Chord Chart pattern.
+ * Thin wrapper around the D3 renderChord function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderChord } from '../d3/flow/chord.js';
+
+export function Chord({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderChord, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/Choropleth.tsx

@@ -0,0 +1,35 @@
+/**
+ * React component for the Choropleth Map pattern.
+ * Uses the HTML builder via a sandboxed iframe.
+ */
+
+import React, { useMemo } from 'react';
+import type { ChartProps } from './types.js';
+import { buildChoroplethHtml } from '../html/builders/choropleth.js';
+
+export function Choropleth({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const srcDoc = useMemo(() => buildChoroplethHtml(spec), [spec]);
+
+  return (
+    <iframe
+      srcDoc={srcDoc}
+      width={width}
+      height={height}
+      className={className}
+      title={spec.title || 'Choropleth Map'}
+      style={{ border: 'none', display: 'block' }}
+      sandbox="allow-scripts"
+      ref={(el) => {
+        if (el && onReady) {
+          el.addEventListener('load', () => onReady(el as unknown as HTMLDivElement), { once: true });
+        }
+      }}
+    />
+  );
+}

package/src/renderers/react/CirclePack.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Circle Pack pattern.
+ * Thin wrapper around the D3 renderCirclePack function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderCirclePack } from '../d3/composition/circle-pack.js';
+
+export function CirclePack({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderCirclePack, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/CompoundChart.tsx

@@ -0,0 +1,146 @@
+/**
+ * React component for compound visualizations.
+ *
+ * Renders multiple views (chart + table) in a CSS grid layout
+ * with linked interaction state.
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import type { CompoundVisualizationSpec, VisualizationSpec, CompoundView } from '../../types.js';
+import { DataTable } from './DataTable.js';
+
+/** Dynamic import type for chart components */
+type ChartComponent = React.ComponentType<{
+  spec: VisualizationSpec;
+  width?: number;
+  height?: number;
+  className?: string;
+  onReady?: (container: HTMLDivElement) => void;
+}>;
+
+export interface CompoundChartProps {
+  /** The compound visualization spec */
+  spec: CompoundVisualizationSpec;
+  /** Container width in pixels */
+  width?: number;
+  /** Container height in pixels */
+  height?: number;
+  /** Additional CSS class */
+  className?: string;
+  /** Map of pattern IDs to React chart components */
+  chartComponents?: Record<string, ChartComponent>;
+}
+
+export function CompoundChart({
+  spec,
+  width = 1200,
+  height = 800,
+  className,
+  chartComponents = {},
+}: CompoundChartProps) {
+  const [highlightRow, setHighlightRow] = useState<Record<string, any> | null>(null);
+
+  const highlightFields = useMemo(() => {
+    return (spec.interactions || [])
+      .filter(i => i.type === 'highlight')
+      .map(i => i.field);
+  }, [spec.interactions]);
+
+  const handleHighlight = useCallback((row: Record<string, any>) => {
+    setHighlightRow(row);
+  }, []);
+
+  const handleClearHighlight = useCallback(() => {
+    setHighlightRow(null);
+  }, []);
+
+  const layout = spec.layout || { type: 'rows' };
+  const sizes = layout.sizes || spec.views.map(v => v.type === 'chart' ? 3 : 2);
+  const gap = layout.gap || 12;
+
+  const gridStyle: React.CSSProperties = {
+    width,
+    height,
+    display: 'grid',
+    gap,
+    padding: gap,
+    background: '#0f1117',
+    borderRadius: 8,
+    ...(layout.type === 'columns'
+      ? { gridTemplateColumns: sizes.map(s => s + 'fr').join(' '), gridTemplateRows: '1fr' }
+      : { gridTemplateRows: sizes.map(s => s + 'fr').join(' '), gridTemplateColumns: '1fr' }
+    ),
+  };
+
+  // Calculate view dimensions based on layout
+  const viewDimensions = useMemo(() => {
+    const totalSize = sizes.reduce((a, b) => a + b, 0);
+    const innerGap = gap * (sizes.length + 1);
+
+    return sizes.map(s => {
+      const fraction = s / totalSize;
+      if (layout.type === 'columns') {
+        return {
+          width: Math.floor((width - innerGap) * fraction),
+          height: height - gap * 2,
+        };
+      }
+      return {
+        width: width - gap * 2,
+        height: Math.floor((height - innerGap) * fraction),
+      };
+    });
+  }, [width, height, sizes, gap, layout.type]);
+
+  function renderView(view: CompoundView, index: number) {
+    const dims = viewDimensions[index];
+
+    if (view.type === 'chart' && view.chart) {
+      const ChartComp = chartComponents[view.chart.pattern];
+      if (ChartComp) {
+        const fullSpec: VisualizationSpec = {
+          ...view.chart,
+          data: spec.data,
+        } as VisualizationSpec;
+        return (
+          <div key={view.id} style={{ minHeight: 0, minWidth: 0, overflow: 'hidden' }}>
+            <ChartComp spec={fullSpec} width={dims.width} height={dims.height} />
+          </div>
+        );
+      }
+      // Fallback: show pattern name
+      return (
+        <div key={view.id} style={{
+          minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: '#6b7280', fontSize: 14,
+        }}>
+          Chart: {view.chart.pattern} (component not provided)
+        </div>
+      );
+    }
+
+    if (view.type === 'table') {
+      return (
+        <DataTable
+          key={view.id}
+          data={spec.data}
+          tableSpec={view.table}
+          width={dims.width}
+          height={dims.height}
+          highlightRow={highlightRow}
+          highlightFields={highlightFields}
+          onHighlight={handleHighlight}
+          onClearHighlight={handleClearHighlight}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <div style={gridStyle} className={className}>
+      {spec.views.map((view, i) => renderView(view, i))}
+    </div>
+  );
+}

package/src/renderers/react/ConnectedDotPlot.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Connected Dot Plot pattern.
+ * Thin wrapper around the D3 renderConnectedDotPlot function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderConnectedDotPlot } from '../d3/comparison/connected-dot-plot.js';
+
+export function ConnectedDotPlot({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderConnectedDotPlot, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/ConnectedScatter.tsx

@@ -0,0 +1,21 @@
+/**
+ * React component for the Connected Scatter pattern.
+ * Thin wrapper around the D3 renderConnectedScatter function.
+ */
+
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderConnectedScatter } from '../d3/connected-scatter.js';
+
+export function ConnectedScatter({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderConnectedScatter, width, height, onReady);
+
+  return <div ref={containerRef} className={className} />;
+}

package/src/renderers/react/DataTable.tsx

@@ -0,0 +1,214 @@
+/**
+ * React component for the data table view in compound visualizations.
+ *
+ * Sortable, hoverable table with dark theme styling.
+ * Participates in interaction linking via highlight/onHighlight props.
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import type { TableViewSpec, TableColumn } from '../../types.js';
+
+export interface DataTableProps {
+  /** The data rows to display */
+  data: Record<string, any>[];
+  /** Table configuration */
+  tableSpec?: TableViewSpec;
+  /** Container width */
+  width?: number;
+  /** Container height */
+  height?: number;
+  /** Additional CSS class */
+  className?: string;
+  /** Currently highlighted row (from interaction bus) */
+  highlightRow?: Record<string, any> | null;
+  /** Fields to match on for highlighting */
+  highlightFields?: string[];
+  /** Callback when user hovers a row */
+  onHighlight?: (row: Record<string, any>) => void;
+  /** Callback when user stops hovering */
+  onClearHighlight?: () => void;
+}
+
+export function DataTable({
+  data,
+  tableSpec,
+  width,
+  height,
+  className,
+  highlightRow,
+  highlightFields = [],
+  onHighlight,
+  onClearHighlight,
+}: DataTableProps) {
+  const [sortState, setSortState] = useState<{ field: string; direction: 'asc' | 'desc' } | null>(
+    tableSpec?.sort || null
+  );
+
+  // Auto-detect columns and numeric fields
+  const { columns, numericFields } = useMemo(() => {
+    let cols: TableColumn[] = tableSpec?.columns || [];
+    if (cols.length === 0 && data.length > 0) {
+      cols = Object.keys(data[0]).map(k => ({ field: k, title: k }));
+    }
+    const numFields = new Set<string>();
+    if (data.length > 0) {
+      cols.forEach(col => {
+        const sample = data.slice(0, 10).map(d => d[col.field]);
+        const numCount = sample.filter(v =>
+          v != null && (typeof v === 'number' || (typeof v === 'string' && v !== '' && !isNaN(Number(v))))
+        ).length;
+        if (numCount > sample.length * 0.7) numFields.add(col.field);
+      });
+    }
+    return { columns: cols, numericFields: numFields };
+  }, [data, tableSpec?.columns]);
+
+  // Sort data
+  const sortedData = useMemo(() => {
+    const sorted = [...data];
+    if (!sortState) return sorted;
+    const { field, direction } = sortState;
+    const dir = direction === 'asc' ? 1 : -1;
+    sorted.sort((a, b) => {
+      const va = a[field], vb = b[field];
+      if (va == null) return 1;
+      if (vb == null) return -1;
+      if (typeof va === 'number' && typeof vb === 'number') return dir * (va - vb);
+      return dir * String(va).localeCompare(String(vb));
+    });
+    return sorted;
+  }, [data, sortState]);
+
+  const displayData = useMemo(() => {
+    const limit = tableSpec?.pageSize || 200;
+    return sortedData.slice(0, limit);
+  }, [sortedData, tableSpec?.pageSize]);
+
+  const handleSort = useCallback((field: string) => {
+    setSortState(prev => {
+      if (prev?.field === field) {
+        return { field, direction: prev.direction === 'asc' ? 'desc' : 'asc' };
+      }
+      return { field, direction: numericFields.has(field) ? 'desc' : 'asc' };
+    });
+  }, [numericFields]);
+
+  const isRowHighlighted = useCallback((row: Record<string, any>) => {
+    if (!highlightRow || highlightFields.length === 0) return false;
+    return highlightFields.some(f =>
+      row[f] != null && highlightRow[f] != null && String(row[f]) === String(highlightRow[f])
+    );
+  }, [highlightRow, highlightFields]);
+
+  function formatCell(value: any, col: TableColumn): string {
+    if (value == null) return '';
+    if (numericFields.has(col.field) && typeof value === 'number') {
+      if (Math.abs(value) >= 1e6) return (value / 1e6).toFixed(1) + 'M';
+      if (Math.abs(value) >= 1e3) return (value / 1e3).toFixed(1) + 'K';
+      if (Math.abs(value) < 1 && value !== 0) return value.toFixed(2);
+      return value.toLocaleString();
+    }
+    return String(value);
+  }
+
+  function getAlign(col: TableColumn): string {
+    if (col.align) return col.align;
+    return numericFields.has(col.field) ? 'right' : 'left';
+  }
+
+  const containerStyle: React.CSSProperties = {
+    width: width || '100%',
+    height: height || '100%',
+    overflow: 'auto',
+    background: '#0f1117',
+    borderRadius: 8,
+  };
+
+  const tableStyle: React.CSSProperties = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontFamily: 'Inter, system-ui, sans-serif',
+    fontSize: 12,
+    color: '#d1d5db',
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      <table style={tableStyle}>
+        <thead>
+          <tr>
+            {columns.map(col => {
+              const isSorted = sortState?.field === col.field;
+              const arrow = isSorted ? (sortState!.direction === 'asc' ? ' \u25B2' : ' \u25BC') : '';
+              return (
+                <th
+                  key={col.field}
+                  onClick={() => handleSort(col.field)}
+                  style={{
+                    padding: '8px 12px',
+                    textAlign: getAlign(col) as any,
+                    borderBottom: '2px solid #2d3041',
+                    color: '#9ca3af',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    position: 'sticky',
+                    top: 0,
+                    background: '#0f1117',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {(col.title || col.field) + arrow}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {displayData.map((row, i) => (
+            <tr
+              key={i}
+              onMouseEnter={() => onHighlight?.(row)}
+              onMouseLeave={() => onClearHighlight?.()}
+              style={{
+                background: isRowHighlighted(row) ? '#1a1d2e' : undefined,
+                transition: 'background 0.1s',
+              }}
+            >
+              {columns.map(col => (
+                <td
+                  key={col.field}
+                  style={{
+                    padding: '6px 12px',
+                    textAlign: getAlign(col) as any,
+                    borderBottom: '1px solid #1f2937',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {formatCell(row[col.field], col)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+        {data.length > (tableSpec?.pageSize || 200) && (
+          <tfoot>
+            <tr>
+              <td
+                colSpan={columns.length}
+                style={{
+                  padding: '8px 12px',
+                  color: '#6b7280',
+                  fontSize: 11,
+                  borderTop: '1px solid #2d3041',
+                }}
+              >
+                Showing {displayData.length} of {data.length} rows
+              </td>
+            </tr>
+          </tfoot>
+        )}
+      </table>
+    </div>
+  );
+}

package/src/renderers/react/DensityPlot.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChartProps } from './types.js';
+import { useChart } from './useChart.js';
+import { renderDensityPlot } from '../d3/distribution/density-plot.js';
+
+export function DensityPlot({
+  spec,
+  width = 800,
+  height = 500,
+  className,
+  onReady,
+}: ChartProps) {
+  const containerRef = useChart(spec, renderDensityPlot, width, height, onReady);
+  return <div ref={containerRef} className={className} />;
+}