@outsidedata/dolex 0.1.0

package/src/renderers/d3/time/line.ts

@@ -0,0 +1,409 @@
+/**
+ * Line chart D3 renderer.
+ * Handles single and multi-series time-based line charts with optional
+ * area fills, point markers, and multiple interpolation modes.
+ */
+
+import type { VisualizationSpec } from '../../../types.js';
+import {
+  createSvg,
+  buildColorScale,
+  createTooltip,
+  showTooltip,
+  hideTooltip,
+  formatValue,
+  styleAxis,
+  getAdaptiveTickCount,
+  createLegend,
+  renderEmptyState,
+  isAllZeros,
+  TEXT_MUTED,
+  DARK_BG,
+  DEFAULT_PALETTE,
+} from '../shared.js';
+
+declare const d3: any;
+
+export function renderLine(container: HTMLElement, spec: VisualizationSpec): void {
+  const { config, encoding, data } = spec;
+  const timeField = config.timeField || encoding.x?.field;
+  const valueField = config.valueField || encoding.y?.field;
+  const seriesField = config.seriesField || encoding.color?.field || null;
+  const interpolation = config.interpolation || 'monotone';
+  const showPoints = interpolation === 'step' ? false : (config.showPoints ?? data.length <= 50);
+  const showArea = config.showArea ?? false;
+  const strokeWidth = config.strokeWidth ?? 2;
+
+  // Parse and filter data upfront
+  const parsedData = data
+    .map((d) => ({
+      ...d,
+      _date: parseDate(d[timeField]),
+      _value: Number(d[valueField]),
+    }))
+    .filter((d) => d._date !== null && !isNaN(d._value));
+
+  const colorScale = buildColorScale(encoding.color, data);
+
+  // Determine if multi-series
+  const seriesNames: string[] = seriesField
+    ? [...new Set(parsedData.map((d: any) => d[seriesField]))] as string[]
+    : [];
+  const isMultiSeries = seriesNames.length > 1;
+
+  // ── Container layout: flex column with chartWrapper + legend ──
+  container.style.display = 'flex';
+  container.style.flexDirection = 'column';
+  container.style.background = DARK_BG;
+  container.style.borderRadius = '8px';
+  container.style.overflow = 'hidden';
+
+  const chartWrapper = document.createElement('div');
+  chartWrapper.style.flex = '1';
+  chartWrapper.style.minHeight = '0';
+  container.appendChild(chartWrapper);
+
+  // HTML legend below chart for multi-series
+  if (isMultiSeries) {
+    const legendDiv = createLegend(colorScale, { shape: 'line' });
+    container.appendChild(legendDiv);
+  }
+
+  // ── SVG + scales ──
+  const { svg, g, dims } = createSvg(chartWrapper, spec, {
+    right: 30,
+    top: 40,
+  });
+  svg.style('background', 'none');
+  const tooltip = createTooltip(chartWrapper);
+
+  // Check if all values are zero
+  if (parsedData.every((d: any) => d._value === 0)) {
+    renderEmptyState(g, dims);
+    return;
+  }
+
+  // X scale (time)
+  const xExtent = d3.extent(parsedData, (d: any) => d._date) as [Date, Date];
+  const xScale = d3.scaleTime().domain(xExtent).range([0, dims.innerWidth]).nice();
+
+  // Y scale (linear)
+  const yExtent = d3.extent(parsedData, (d: any) => d._value) as [number, number];
+  const yMin = showArea ? 0 : yExtent[0] * 0.9;
+  const yScale = d3
+    .scaleLinear()
+    .domain([yMin, yExtent[1] * 1.05])
+    .range([dims.innerHeight, 0])
+    .nice();
+
+  // ── Axes (direct creation + styleAxis) ──
+  const xTickCount = getAdaptiveTickCount(dims.innerWidth);
+  const xAxis = g
+    .append('g')
+    .attr('class', 'x-axis')
+    .attr('transform', `translate(0,${dims.innerHeight})`)
+    .call(
+      d3
+        .axisBottom(xScale)
+        .ticks(xTickCount)
+        .tickSize(0)
+        .tickPadding(8)
+    );
+  styleAxis(xAxis);
+
+  const yTickCount = getAdaptiveTickCount(dims.innerHeight, 40);
+  const yAxis = g
+    .append('g')
+    .attr('class', 'y-axis')
+    .call(
+      d3
+        .axisLeft(yScale)
+        .ticks(yTickCount)
+        .tickSize(-dims.innerWidth)
+        .tickPadding(8)
+        .tickFormat((d: number) => formatValue(d))
+    );
+  styleAxis(yAxis);
+
+
+  // ── Interpolation ──
+  const curveMap: Record<string, any> = {
+    linear: d3.curveLinear,
+    monotone: d3.curveMonotoneX,
+    basis: d3.curveBasis,
+    step: d3.curveStepAfter,
+    cardinal: d3.curveCardinal,
+    catmullRom: d3.curveCatmullRom,
+  };
+  const curve = curveMap[config.interpolation || 'monotone'] || d3.curveMonotoneX;
+
+  const lineGen = d3
+    .line()
+    .x((d: any) => xScale(d._date))
+    .y((d: any) => yScale(d._value))
+    .curve(curve);
+
+  const areaGen = d3
+    .area()
+    .x((d: any) => xScale(d._date))
+    .y0(dims.innerHeight)
+    .y1((d: any) => yScale(d._value))
+    .curve(curve);
+
+  // ── Draw lines (multi or single) ──
+  const uniqueDates = new Set(parsedData.map((d: any) => d._date!.getTime()));
+  const isSinglePoint = uniqueDates.size <= 1;
+
+  if (isSinglePoint) {
+    const color = isMultiSeries ? undefined : DEFAULT_PALETTE[0];
+    parsedData.forEach((d: any) => {
+      const c = isMultiSeries ? colorScale(d[seriesField!]) : color;
+      g.append('circle')
+        .attr('cx', xScale(d._date))
+        .attr('cy', yScale(d._value))
+        .attr('r', 6)
+        .attr('fill', c)
+        .attr('stroke', '#fff')
+        .attr('stroke-width', 2);
+      g.append('text')
+        .attr('x', xScale(d._date))
+        .attr('y', yScale(d._value) - 14)
+        .attr('text-anchor', 'middle')
+        .attr('fill', TEXT_MUTED)
+        .attr('font-size', '11px')
+        .attr('font-family', 'Inter, system-ui, sans-serif')
+        .text(formatValue(d._value));
+    });
+  } else if (isMultiSeries) {
+    drawMultiSeries(g, parsedData, seriesField!, seriesNames, colorScale, lineGen, areaGen, xScale, yScale, showArea, showPoints, strokeWidth);
+  } else {
+    drawSingleSeries(g, parsedData, lineGen, areaGen, xScale, yScale, showArea, showPoints, strokeWidth);
+  }
+
+  // ── Crosshair hover targets ──
+  if (!isSinglePoint) {
+    addCrosshairHover(g, parsedData, seriesField, seriesNames, timeField, valueField, colorScale, xScale, yScale, dims, tooltip, isMultiSeries);
+  }
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function parseDate(v: any): Date | null {
+  if (v instanceof Date) return v;
+  const d = new Date(v);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function drawMultiSeries(
+  g: any,
+  parsedData: Record<string, any>[],
+  seriesField: string,
+  seriesNames: string[],
+  colorScale: any,
+  lineGen: any,
+  areaGen: any,
+  xScale: any,
+  yScale: any,
+  showArea: boolean,
+  showPoints: boolean,
+  strokeWidth: number,
+): void {
+  seriesNames.forEach((name) => {
+    const seriesData = parsedData
+      .filter((d) => d[seriesField] === name)
+      .sort((a, b) => a._date!.getTime() - b._date!.getTime());
+
+    const color = colorScale(name);
+
+    if (showArea) {
+      g.append('path')
+        .datum(seriesData)
+        .attr('fill', color)
+        .attr('opacity', 0.1)
+        .attr('d', areaGen)
+        .attr('pointer-events', 'none');
+    }
+
+    g.append('path')
+      .datum(seriesData)
+      .attr('class', 'line-path')
+      .attr('fill', 'none')
+      .attr('stroke', color)
+      .attr('stroke-width', strokeWidth)
+      .attr('d', lineGen)
+      .attr('pointer-events', 'none');
+
+    if (showPoints) {
+      g.selectAll(`.point-${String(name).replace(/\W/g, '')}`)
+        .data(seriesData)
+        .join('circle')
+        .attr('class', `point-${String(name).replace(/\W/g, '')}`)
+        .attr('cx', (d: any) => xScale(d._date))
+        .attr('cy', (d: any) => yScale(d._value))
+        .attr('r', 1.25)
+        .attr('fill', color)
+        .attr('stroke', DARK_BG)
+        .attr('stroke-width', 1.5)
+        .attr('pointer-events', 'none');
+    }
+  });
+}
+
+function drawSingleSeries(
+  g: any,
+  parsedData: Record<string, any>[],
+  lineGen: any,
+  areaGen: any,
+  xScale: any,
+  yScale: any,
+  showArea: boolean,
+  showPoints: boolean,
+  strokeWidth: number,
+): void {
+  const sortedData = [...parsedData].sort((a, b) => a._date!.getTime() - b._date!.getTime());
+  const color = DEFAULT_PALETTE[0];
+
+  if (showArea) {
+    g.append('path')
+      .datum(sortedData)
+      .attr('fill', color)
+      .attr('opacity', 0.1)
+      .attr('d', areaGen)
+      .attr('pointer-events', 'none');
+  }
+
+  g.append('path')
+    .datum(sortedData)
+    .attr('class', 'line-path')
+    .attr('fill', 'none')
+    .attr('stroke', color)
+    .attr('stroke-width', strokeWidth)
+    .attr('d', lineGen)
+    .attr('pointer-events', 'none');
+
+  if (showPoints) {
+    g.selectAll('.point')
+      .data(sortedData)
+      .join('circle')
+      .attr('class', 'point')
+      .attr('cx', (d: any) => xScale(d._date))
+      .attr('cy', (d: any) => yScale(d._value))
+      .attr('r', 1.25)
+      .attr('fill', color)
+      .attr('stroke', DARK_BG)
+      .attr('stroke-width', 0.75)
+      .attr('pointer-events', 'none');
+  }
+}
+
+/**
+ * Crosshair-style hover: vertical line + dots at intersections + tooltip with all series values.
+ * Uses bisector to find the nearest data point to the cursor x position.
+ */
+function addCrosshairHover(
+  g: any,
+  parsedData: Record<string, any>[],
+  seriesField: string | null,
+  seriesNames: string[],
+  timeField: string,
+  valueField: string,
+  colorScale: any,
+  xScale: any,
+  yScale: any,
+  dims: any,
+  tooltip: HTMLDivElement,
+  isMultiSeries: boolean,
+): void {
+  // Build sorted date → values lookup
+  const dateMap = new Map<number, Record<string, any>[]>();
+  parsedData.forEach((d) => {
+    const key = d._date!.getTime();
+    if (!dateMap.has(key)) dateMap.set(key, []);
+    dateMap.get(key)!.push(d);
+  });
+  const sortedDates = [...dateMap.keys()].sort((a, b) => a - b);
+
+  // Crosshair vertical line (hidden by default)
+  const crosshairLine = g.append('line')
+    .attr('class', 'crosshair')
+    .attr('y1', 0)
+    .attr('y2', dims.innerHeight)
+    .attr('stroke', TEXT_MUTED)
+    .attr('stroke-width', 1)
+    .attr('stroke-dasharray', '4,3')
+    .attr('pointer-events', 'none')
+    .attr('opacity', 0);
+
+  // Highlight dots group
+  const highlightDots = g.append('g').attr('class', 'highlight-dots').attr('pointer-events', 'none');
+
+  // Invisible rect for mouse events
+  g.append('rect')
+    .attr('class', 'hover-area')
+    .attr('width', dims.innerWidth)
+    .attr('height', dims.innerHeight)
+    .attr('fill', 'transparent')
+    .attr('cursor', 'crosshair')
+    .on('mousemove', function (event: MouseEvent) {
+      const [mx] = d3.pointer(event, this);
+      const xDate = xScale.invert(mx).getTime();
+
+      // Bisect to find nearest date
+      const bisect = d3.bisector((d: number) => d).left;
+      let idx = bisect(sortedDates, xDate);
+      if (idx > 0 && idx < sortedDates.length) {
+        const d0 = sortedDates[idx - 1];
+        const d1 = sortedDates[idx];
+        idx = xDate - d0 > d1 - xDate ? idx : idx - 1;
+      } else if (idx >= sortedDates.length) {
+        idx = sortedDates.length - 1;
+      }
+
+      const nearestTime = sortedDates[idx];
+      const nearestX = xScale(new Date(nearestTime));
+      const points = dateMap.get(nearestTime) || [];
+
+      // Show crosshair line
+      crosshairLine.attr('x1', nearestX).attr('x2', nearestX).attr('opacity', 1);
+
+      // Show highlight dots
+      highlightDots.selectAll('circle').remove();
+      points.forEach((d) => {
+        const color = isMultiSeries ? colorScale(d[seriesField!]) : DEFAULT_PALETTE[0];
+        highlightDots.append('circle')
+          .attr('cx', nearestX)
+          .attr('cy', yScale(d._value))
+          .attr('r', 5)
+          .attr('fill', color)
+          .attr('stroke', '#fff')
+          .attr('stroke-width', 2);
+      });
+
+      // Dim all lines slightly
+      g.selectAll('.line-path').attr('opacity', 0.4);
+
+      // Build tooltip
+      const dateLabel = points[0]?.[timeField] ?? new Date(nearestTime).toLocaleDateString();
+      let html = `<strong>${dateLabel}</strong>`;
+
+      if (isMultiSeries) {
+        // Sort by value descending for readability
+        const sorted = [...points].sort((a, b) => b._value - a._value);
+        sorted.forEach((d) => {
+          const color = colorScale(d[seriesField!]);
+          html += `<br/><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:${color};margin-right:5px;vertical-align:middle;"></span>${d[seriesField!]}: ${formatValue(d._value)}`;
+        });
+      } else {
+        html += `<br/>${valueField}: ${formatValue(points[0]?._value)}`;
+      }
+
+      showTooltip(tooltip, html, event);
+    })
+    .on('mouseout', function () {
+      crosshairLine.attr('opacity', 0);
+      highlightDots.selectAll('circle').remove();
+      g.selectAll('.line-path').attr('opacity', 1);
+      hideTooltip(tooltip);
+    });
+}
+

package/src/renderers/d3/time/small-multiples.ts

@@ -0,0 +1,190 @@
+/**
+ * Small multiples D3 renderer.
+ */
+
+import type { VisualizationSpec } from '../../../types.js';
+import {
+  buildColorScale,
+  isAllZeros,
+  TEXT_COLOR,
+  TEXT_MUTED,
+  DARK_BG,
+  truncateTitle,
+} from '../shared.js';
+import { renderLine } from './line.js';
+
+declare const d3: any;
+
+export function renderSmallMultiples(container: HTMLElement, spec: VisualizationSpec): void {
+  const { config, encoding, data } = spec;
+  const timeField = config.timeField || encoding.x?.field;
+  const valueField = config.valueField || encoding.y?.field;
+  const seriesField = config.seriesField || encoding.color?.field;
+
+  if (!seriesField) {
+    return renderLine(container, spec);
+  }
+
+  const seriesNames = [...new Set(data.map((d) => d[seriesField]))];
+  const cols = Math.ceil(Math.sqrt(seriesNames.length));
+  const rows = Math.ceil(seriesNames.length / cols);
+
+  const width = container.clientWidth || 800;
+  const height = container.clientHeight || 500;
+  const titleReserve = spec.title ? 28 : 0;
+  const cellW = width / cols;
+  const cellH = (height - titleReserve) / rows;
+  const cellMargin = { top: 18, right: 20, bottom: 20, left: 40 };
+  const innerCellW = cellW - cellMargin.left - cellMargin.right;
+  const innerCellH = cellH - cellMargin.top - cellMargin.bottom;
+
+  const svg = d3
+    .select(container)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .style('background', DARK_BG)
+    .style('border-radius', '8px');
+
+  if (spec.title) {
+    const titleEl = svg
+      .append('text')
+      .attr('x', width / 2)
+      .attr('y', 16)
+      .attr('text-anchor', 'middle')
+      .attr('fill', TEXT_COLOR)
+      .attr('font-size', '13px')
+      .attr('font-weight', '600')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .text(spec.title);
+    truncateTitle(titleEl, spec.title, width - 20);
+  }
+
+  // Global scales for consistency
+  const allDates = data.map((d) => parseDate(d[timeField])).filter(Boolean) as Date[];
+  const allValues = data.map((d) => Number(d[valueField])).filter((v) => !isNaN(v));
+  const xDomain = d3.extent(allDates) as [Date, Date];
+  const yDomain = [Math.min(0, d3.min(allValues) as number), d3.max(allValues) as number];
+
+  // Check if all values are zero
+  if (allValues.every(v => v === 0)) {
+    svg.append('text')
+      .attr('x', width / 2)
+      .attr('y', height / 2)
+      .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'central')
+      .attr('fill', TEXT_MUTED)
+      .attr('font-size', '14px')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .text('All values are zero');
+    return;
+  }
+
+  const colorScale = buildColorScale(encoding.color, data);
+
+  seriesNames.forEach((name, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const offsetX = col * cellW + cellMargin.left;
+    const offsetY = row * cellH + cellMargin.top + titleReserve;
+
+    const cellG = svg.append('g').attr('transform', `translate(${offsetX},${offsetY})`);
+
+    const xScale = d3.scaleTime().domain(xDomain).range([0, innerCellW]);
+    const yScale = d3.scaleLinear().domain(yDomain).range([innerCellH, 0]);
+
+    // Mini axes
+    cellG
+      .append('g')
+      .attr('transform', `translate(0,${innerCellH})`)
+      .call(d3.axisBottom(xScale).ticks(3).tickSize(0))
+      .selectAll('text')
+      .attr('fill', TEXT_MUTED)
+      .attr('font-size', '8px');
+
+    cellG
+      .append('g')
+      .call(d3.axisLeft(yScale).ticks(3).tickSize(0))
+      .selectAll('text')
+      .attr('fill', TEXT_MUTED)
+      .attr('font-size', '8px');
+
+    cellG.selectAll('.domain').remove();
+
+    // Series label — truncated to fit within cell
+    const maxLabelChars = Math.max(5, Math.floor(innerCellW / 6));
+    const seriesLabel = String(name);
+    const truncatedLabel = seriesLabel.length > maxLabelChars
+      ? seriesLabel.slice(0, maxLabelChars - 1) + '\u2026'
+      : seriesLabel;
+    cellG
+      .append('text')
+      .attr('x', innerCellW / 2)
+      .attr('y', -4)
+      .attr('text-anchor', 'middle')
+      .attr('fill', colorScale(name))
+      .attr('font-size', '11px')
+      .attr('font-weight', '500')
+      .attr('font-family', 'Inter, system-ui, sans-serif')
+      .text(truncatedLabel);
+
+    // Data for this series
+    const seriesData = data
+      .filter((d) => d[seriesField] === name)
+      .map((d) => ({ ...d, _date: parseDate(d[timeField]), _value: Number(d[valueField]) }))
+      .filter((d) => d._date !== null)
+      .sort((a, b) => a._date!.getTime() - b._date!.getTime());
+
+    const line = d3
+      .line()
+      .x((d: any) => xScale(d._date))
+      .y((d: any) => yScale(d._value))
+      .curve(d3.curveMonotoneX);
+
+    const area = d3
+      .area()
+      .x((d: any) => xScale(d._date))
+      .y0(yScale(0))
+      .y1((d: any) => yScale(d._value))
+      .curve(d3.curveMonotoneX);
+
+    if (seriesData.length <= 1 && seriesData.length > 0) {
+      const d = seriesData[0];
+      cellG.append('circle')
+        .attr('cx', xScale(d._date))
+        .attr('cy', yScale(d._value))
+        .attr('r', 5)
+        .attr('fill', colorScale(name))
+        .attr('stroke', '#fff')
+        .attr('stroke-width', 1.5);
+      cellG.append('text')
+        .attr('x', xScale(d._date))
+        .attr('y', yScale(d._value) - 10)
+        .attr('text-anchor', 'middle')
+        .attr('fill', TEXT_MUTED)
+        .attr('font-size', '9px')
+        .attr('font-family', 'Inter, system-ui, sans-serif')
+        .text(d._value);
+    } else {
+      cellG
+        .append('path')
+        .datum(seriesData)
+        .attr('fill', colorScale(name))
+        .attr('opacity', 0.08)
+        .attr('d', area);
+
+      cellG
+        .append('path')
+        .datum(seriesData)
+        .attr('fill', 'none')
+        .attr('stroke', colorScale(name))
+        .attr('stroke-width', 1.5)
+        .attr('d', line);
+    }
+  });
+}
+
+function parseDate(v: any): Date | null {
+  const d = new Date(v);
+  return isNaN(d.getTime()) ? null : d;
+}