radiant-charts-core 0.2.0

package/src/series/BarSeries.ts

@@ -0,0 +1,502 @@
+// Radiant Charts - BarSeries
+// Phase 2.2: Grouped, stacked, 100% normalized, horizontal, with corner radius
+
+import { Node, BBox } from '../scene/Node';
+import { Group, Rect, Text, Line } from '../scene/Shapes';
+import { Scale, BandScale, safeBandwidth } from '../scale/Scale';
+import { Animator } from '../core/Animator';
+
+export interface BarSeriesOptions {
+  xKey: string;
+  yKey: string;
+  title?: string;
+  fill?: string;
+  stroke?: string;
+  grouped?: boolean;
+  stacked?: boolean;
+  /** 100% normalized stacking */
+  normalized?: boolean;
+  direction?: 'vertical' | 'horizontal';
+  cornerRadius?: number;
+  labels?: import('../RadiantChart').DataLabelOptions;
+  animation?: import('../RadiantChart').AnimationOptions;
+  shadow?: import('../RadiantChart').DropShadow;
+}
+
+/**
+ * Optimized node for rendering thousands of bars in a single draw call.
+ * Avoids the overhead of individual Scene Graph nodes and ctx.save/restore.
+ */
+class BarBatchNode extends Node {
+  bars: { x: number; y: number; width: number; height: number; datum: any }[] = [];
+  fill: string = '';
+  stroke: string = 'transparent';
+  cornerRadius: number = 0;
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    if (this.bars.length === 0) return;
+    
+    ctx.fillStyle = this.fill;
+    ctx.beginPath();
+    
+    // Path batching: one beginPath and one fill for the whole dataset.
+    for (const b of this.bars) {
+      if (this.cornerRadius > 0 && b.width > 8 && b.height > 8) {
+        const r = Math.min(this.cornerRadius, b.width / 2, b.height / 2);
+        ctx.moveTo(b.x + r, b.y);
+        ctx.arcTo(b.x + b.width, b.y, b.x + b.width, b.y + b.height, r);
+        ctx.arcTo(b.x + b.width, b.y + b.height, b.x, b.y + b.height, r);
+        ctx.arcTo(b.x, b.y + b.height, b.x, b.y, r);
+        ctx.arcTo(b.x, b.y, b.x + b.width, b.y, r);
+      } else {
+        ctx.rect(b.x, b.y, b.width, b.height);
+      }
+    }
+    
+    ctx.fill();
+    if (this.stroke !== 'transparent') {
+      ctx.strokeStyle = this.stroke;
+      ctx.stroke();
+    }
+  }
+
+  isPointInNode(x: number, y: number): boolean {
+    // Spatial search optimized for Cartesian layout (if we had scales). 
+    // Even O(N) is faster here than recursive pickNode.
+    for (let i = this.bars.length - 1; i >= 0; i--) {
+      const b = this.bars[i];
+      if (x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height) {
+        this.datum = b.datum;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getBBox(): BBox {
+    if (this.bars.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+    // Just return container bounds or compute from first/last
+    return { x: 0, y: 0, width: 1000, height: 1000 };
+  }
+}
+
+export class BarSeries {
+  private group = new Group();
+  private xKey: string;
+  private yKey: string;
+  fill: string = '#4e79a7';
+  private stroke: string = 'transparent';
+  private grouped: boolean = false;
+  private stacked: boolean = false;
+  private normalized: boolean = false;
+  private direction: 'vertical' | 'horizontal' = 'vertical';
+  private cornerRadius: number = 3;
+  private labelsOpts?: import('../RadiantChart').DataLabelOptions;
+  private animationOpts?: import('../RadiantChart').AnimationOptions;
+  private shadowOpts?: import('../RadiantChart').DropShadow;
+  private animator?: Animator;
+  private batchNode: BarBatchNode | null = null;
+  private bars: {
+    rect: Rect;
+    label?: Text;
+    rawY: number;
+    targetY: number; targetHeight: number; startY: number; startHeight: number;
+    targetX: number; targetWidth: number; startX: number; startWidth: number;
+    targetOpacity: number; startOpacity: number;
+    targetScaleX: number; startScaleX: number;
+    targetScaleY: number; startScaleY: number;
+  }[] = [];
+
+  constructor(options: BarSeriesOptions) {
+    this.xKey = options.xKey;
+    this.yKey = options.yKey;
+    this.grouped = options.grouped ?? false;
+    this.stacked = options.stacked ?? false;
+    this.normalized = options.normalized ?? false;
+    this.direction = options.direction ?? 'vertical';
+    this.cornerRadius = options.cornerRadius ?? 3;
+    this.labelsOpts = options.labels;
+    this.animationOpts = options.animation;
+    this.shadowOpts = options.shadow;
+    if (options.fill) this.fill = options.fill;
+    if (options.stroke) this.stroke = options.stroke;
+  }
+
+  getGroup() { return this.group; }
+
+  update(
+    data: readonly any[],
+    xScale: BandScale | Scale<any, number>,
+    yScale: Scale<number, number>,
+    seriesRect: { x: number; y: number; width: number; height: number },
+    animate: boolean = true,
+    seriesIndex: number = 0,
+    totalSeries: number = 1,
+    stackedOffsets?: number[],
+    /** Column totals for 100% normalization */
+    columnTotals?: number[],
+    options?: BarSeriesOptions
+  ) {
+    if (options) {
+      this.xKey = options.xKey;
+      this.yKey = options.yKey;
+      if (options.fill) this.fill = options.fill;
+      if (options.stroke) this.stroke = options.stroke;
+      if (options.grouped !== undefined) this.grouped = options.grouped;
+      if (options.stacked !== undefined) this.stacked = options.stacked;
+      if (options.normalized !== undefined) this.normalized = options.normalized;
+      if (options.direction !== undefined) this.direction = options.direction;
+      if (options.cornerRadius !== undefined) this.cornerRadius = options.cornerRadius;
+      if (options.labels) this.labelsOpts = options.labels;
+      if (options.animation) this.animationOpts = options.animation;
+      if (options.shadow !== undefined) this.shadowOpts = options.shadow;
+    }
+
+    const isInitial = this.bars.length === 0;
+    const isH = this.direction === 'horizontal';
+    const animType = this.animationOpts?.type || 'grow';
+    const oldLen = this.bars.length;
+    const newLen = data.length;
+    const isBigData = newLen > 1000;
+
+    // ── Pre-Phase: Handle Big Data Fast Path ────────────────────────────
+    if (isBigData) {
+      this.group.clear();
+      this.bars = []; // Drop the individual pool
+      
+      if (!this.batchNode) {
+        this.batchNode = new BarBatchNode();
+      }
+      this.batchNode.fill = this.fill;
+      this.batchNode.stroke = this.stroke;
+      this.batchNode.cornerRadius = this.cornerRadius;
+      this.batchNode.seriesId = this.yKey;
+      this.batchNode.shadow = this.shadowOpts ?? null;
+      
+      this.group.add(this.batchNode);
+
+      const batchBars: any[] = [];
+      data.forEach((datum, i) => {
+        let yVal = datum[this.yKey] as number;
+        if (this.normalized && columnTotals && columnTotals[i]) {
+          yVal = (yVal / columnTotals[i]) * 100;
+        }
+
+        const fullBW = safeBandwidth(xScale);
+        if (!isH) {
+          let bx = xScale.convert(datum[this.xKey]);
+          let bw = fullBW;
+          if (this.grouped && totalSeries > 1) {
+            bw = fullBW / totalSeries;
+            bx += seriesIndex * bw;
+          }
+          const ty = yScale.convert((this.stacked && stackedOffsets ? (stackedOffsets[i] ?? 0) : 0) + yVal);
+          const th = yScale.convert(this.stacked && stackedOffsets ? (stackedOffsets[i] ?? 0) : 0) - ty;
+          batchBars.push({ x: bx, y: ty, width: bw, height: th, datum });
+        } else {
+          // ... Horizontal logic similarly if needed, but keeping it simple for now
+          let by = xScale.convert(datum[this.xKey]);
+          let bh = fullBW;
+          if (this.grouped && totalSeries > 1) {
+            bh = fullBW / totalSeries;
+            by += seriesIndex * bh;
+          }
+          const tx = yScale.convert(this.stacked && stackedOffsets ? (stackedOffsets[i] ?? 0) : 0);
+          const tw = yScale.convert((this.stacked && stackedOffsets ? (stackedOffsets[i] ?? 0) : 0) + yVal) - tx;
+          batchBars.push({ x: tx, y: by, width: tw, height: bh, datum });
+        }
+      });
+      
+      this.batchNode.bars = batchBars;
+
+      // Sampled labels: render every Nth label so the high-density view still
+      // carries context, without paying the full label-layout cost per bar.
+      if (this.labelsOpts?.enabled) {
+        const step = Math.max(1, Math.ceil(newLen / 100));
+        for (let i = 0; i < batchBars.length; i += step) {
+          const b = batchBars[i];
+          const rect = new Rect();
+          rect.x = b.x; rect.y = b.y; rect.width = b.width; rect.height = b.height;
+          const lbl = new Text();
+          this.group.add(lbl);
+          this.placeLabel(lbl, rect, b.datum[this.yKey]);
+        }
+      }
+      return;
+    }
+
+    // Individual node pool path (for < 500 rows)
+    if (this.batchNode) {
+      this.group.remove(this.batchNode);
+      this.batchNode = null;
+    }
+
+    // ── Phase 1: Compute target geometry for every data point ────────────
+    // We build an array of target values first, then reconcile with the pool.
+
+    const targets: {
+      datum: any; rawY: number;
+      tx: number; ty: number; tw: number; th: number;
+    }[] = [];
+
+    data.forEach((datum, i) => {
+      let yVal = datum[this.yKey] as number;
+
+      // 100% normalization
+      if (this.normalized && columnTotals && columnTotals[i]) {
+        yVal = (yVal / columnTotals[i]) * 100;
+      }
+
+      const fullBW = safeBandwidth(xScale);
+      let tx: number, ty: number, tw: number, th: number;
+
+      if (!isH) {
+        let bx = xScale.convert(datum[this.xKey]);
+        let bw = fullBW;
+        if (this.grouped && totalSeries > 1) {
+          bw = fullBW / totalSeries;
+          bx += seriesIndex * bw;
+        }
+        tx = bx; tw = bw;
+        if (this.stacked && stackedOffsets) {
+          const off = stackedOffsets[i] ?? 0;
+          const normalOff = this.normalized && columnTotals?.[i] ? (off / columnTotals[i]) * 100 : off;
+          ty = yScale.convert(normalOff + yVal);
+          th = yScale.convert(normalOff) - ty;
+        } else {
+          ty = yScale.convert(yVal);
+          th = yScale.convert(0) - ty;
+        }
+      } else {
+        let by = xScale.convert(datum[this.xKey]);
+        let bh = fullBW;
+        if (this.grouped && totalSeries > 1) {
+          bh = fullBW / totalSeries;
+          by += seriesIndex * bh;
+        }
+        ty = by; th = bh;
+        if (this.stacked && stackedOffsets) {
+          const off = stackedOffsets[i] ?? 0;
+          tx = yScale.convert(off);
+          tw = yScale.convert(off + yVal) - tx;
+        } else {
+          tx = yScale.convert(0);
+          tw = yScale.convert(yVal) - tx;
+        }
+      }
+
+      targets.push({ datum, rawY: datum[this.yKey] as number, tx, ty, tw, th });
+    });
+
+    // ── Phase 2: Pool reconciliation ─────────────────────────────────────
+    // Reuse existing Rects for indices that already have them, create new
+    // ones for growth, and remove excess for shrinkage.
+
+    // 2a. Remove excess bars when data shrinks
+    if (newLen < oldLen) {
+      for (let i = newLen; i < oldLen; i++) {
+        const old = this.bars[i];
+        this.group.remove(old.rect);
+        if (old.label) this.group.remove(old.label);
+      }
+      this.bars.length = newLen;
+    }
+
+    // 2b. Reconcile each data index
+    for (let i = 0; i < newLen; i++) {
+      const { datum, rawY, tx, ty, tw, th } = targets[i];
+
+      let barRect: Rect;
+      let labelNode: Text | undefined;
+      let sx: number, sy: number, sw: number, sh: number;
+      let so = 1, to = 1;
+      let ssx = 1, tsx = 1;
+      let ssy = 1, tsy = 1;
+
+      if (i < oldLen) {
+        // ── Reuse existing Rect ──────────────────────────────────────────
+        const existing = this.bars[i];
+        barRect = existing.rect;
+        labelNode = existing.label;
+
+        // Capture the Rect's *current* pixel state as the animation start.
+        // This is critical: if a previous animation is mid-flight the bar
+        // will smoothly redirect from wherever it is right now, rather than
+        // snapping to an old target or re-growing from zero.
+        sx = barRect.x;
+        sy = barRect.y;
+        sw = barRect.width;
+        sh = barRect.height;
+        so = barRect.opacity;
+        ssx = barRect.scaling.x;
+        ssy = barRect.scaling.y;
+      } else {
+        // ── Create a new Rect (data grew) ────────────────────────────────
+        barRect = new Rect();
+        this.group.add(barRect);
+
+        // Determine intro animation start
+        sx = tx; sy = ty; sw = tw; sh = th;
+        if (animType === 'grow') {
+          if (!isH) { sy = seriesRect.height; sh = 0; }
+          else { sx = 0; sw = 0; }
+        } else if (animType === 'fade') {
+          so = 0;
+        } else if (animType === 'slide') {
+          if (!isH) { sy = seriesRect.height + 50; }
+          else { sx = -50; }
+        } else if (animType === 'pop') {
+          ssx = 0; ssy = 0;
+        }
+
+        // Create label if needed
+        if (this.labelsOpts?.enabled) {
+          labelNode = new Text();
+          this.group.add(labelNode);
+        }
+      }
+
+      // Apply visual properties (cheap, no allocation)
+      barRect.fill = this.fill;
+      barRect.stroke = this.stroke;
+      barRect.cornerRadius = this.cornerRadius;
+      barRect.datum = datum;
+      barRect.seriesId = this.yKey;
+      barRect.opacity = so;
+      barRect.scaling = { x: ssx, y: ssy };
+      barRect.shadow = this.shadowOpts ?? null;
+
+      // For 'pop' animation, set translation to the bar's center so it
+      // scales from the centre outward.
+      let finalTX = tx, finalTY = ty;
+      if (animType === 'pop') {
+        barRect.translation = { x: tx + tw / 2, y: ty + th / 2 };
+        finalTX = -tw / 2;
+        finalTY = -th / 2;
+        sx = -tw / 2;
+        sy = -th / 2;
+      } else {
+        barRect.translation = { x: 0, y: 0 };
+      }
+
+      // Write back into the pool array (reuse the slot or push a new one)
+      const entry = {
+        rect: barRect, label: labelNode, rawY,
+        targetY: finalTY, targetHeight: th, startY: sy, startHeight: sh,
+        targetX: finalTX, targetWidth: tw, startX: sx, startWidth: sw,
+        targetOpacity: to, startOpacity: so,
+        targetScaleX: tsx, startScaleX: ssx,
+        targetScaleY: tsy, startScaleY: ssy,
+      };
+
+      if (i < oldLen) {
+        this.bars[i] = entry;
+      } else {
+        this.bars.push(entry);
+      }
+    }
+
+    // ── Phase 3: Animate or snap ─────────────────────────────────────────
+    if (animate && (this.animationOpts?.enabled !== false)) {
+      this.animator?.stop();
+      const duration = this.animationOpts?.duration ?? 500;
+      const easing = Animator.getEasing(this.animationOpts?.easing);
+
+      this.animator = new Animator({
+        duration,
+        easing,
+        onUpdate: (progress) => {
+          this.bars.forEach(b => {
+            b.rect.y = b.startY + (b.targetY - b.startY) * progress;
+            b.rect.height = b.startHeight + (b.targetHeight - b.startHeight) * progress;
+            b.rect.x = b.startX + (b.targetX - b.startX) * progress;
+            b.rect.width = b.startWidth + (b.targetWidth - b.startWidth) * progress;
+            b.rect.opacity = b.startOpacity + (b.targetOpacity - b.startOpacity) * progress;
+            b.rect.scaling = {
+              x: b.startScaleX + (b.targetScaleX - b.startScaleX) * progress,
+              y: b.startScaleY + (b.targetScaleY - b.startScaleY) * progress,
+            };
+            if (b.label) this.placeLabel(b.label, b.rect, b.rawY);
+          });
+        },
+      });
+      this.animator.start();
+    } else {
+      this.bars.forEach(b => {
+        b.rect.y = b.targetY;
+        b.rect.height = b.targetHeight;
+        b.rect.x = b.targetX;
+        b.rect.width = b.targetWidth;
+        b.rect.opacity = b.targetOpacity;
+        b.rect.scaling = { x: b.targetScaleX, y: b.targetScaleY };
+        if (b.label) this.placeLabel(b.label, b.rect, b.rawY);
+      });
+    }
+  }
+
+  private placeLabel(txt: Text, rect: Rect, rawValue: number) {
+    const pos = this.labelsOpts?.position || 'inside';
+    const isH = this.direction === 'horizontal';
+    
+    // Formatting: abbreviate large numbers to prevent clutter
+    let fv = String(rawValue);
+    if (typeof rawValue === 'number') {
+      const abs = Math.abs(rawValue);
+      if (abs >= 1e9) fv = (rawValue / 1e9).toFixed(1).replace(/\.0$/, '') + 'B';
+      else if (abs >= 1e6) fv = (rawValue / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+      else if (abs >= 1e3) fv = (rawValue / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
+      else fv = rawValue.toLocaleString();
+    }
+    
+    txt.text = fv;
+    txt.fontSize = this.labelsOpts?.fontSize || 10;
+    txt.fontFamily = this.labelsOpts?.fontFamily || 'sans-serif';
+    txt.fontWeight = this.labelsOpts?.fontWeight || '600';
+    txt.rotation = ((this.labelsOpts?.rotation || 0) * Math.PI) / 180;
+    // Inside a colored bar should ideally be white, outside should be dark/muted
+    txt.fill = this.labelsOpts?.fill || (pos === 'inside' || pos === 'center' ? '#fff' : '#6b7280');
+    txt.textAlign = 'center';
+    txt.textBaseline = 'middle';
+
+    let ax = 0, ay = 0;
+    if (!isH) {
+      ax = rect.x + rect.width / 2;
+      if (pos === 'inside') {
+        ay = rect.y + 12;
+      } else if (pos === 'top' || pos === 'outside') {
+        ay = rect.y - 8;
+        txt.textBaseline = 'bottom';
+        txt.fill = this.labelsOpts?.fill || '#6b7280';
+      } else if (pos === 'center') {
+        ay = rect.y + rect.height / 2;
+      } else if (pos === 'bottom') {
+        ay = rect.y + rect.height - 10;
+      }
+    } else {
+      ay = rect.y + rect.height / 2;
+      if (pos === 'inside') {
+        ax = rect.x + rect.width - 12;
+        txt.textAlign = 'right';
+      } else if (pos === 'right' || pos === 'outside') {
+        ax = rect.x + rect.width + 6;
+        txt.textAlign = 'left';
+        txt.fill = this.labelsOpts?.fill || '#6b7280';
+      } else if (pos === 'center') {
+        ax = rect.x + rect.width / 2;
+      } else if (pos === 'left') {
+        ax = rect.x + 8;
+        txt.textAlign = 'left';
+      }
+    }
+    
+    txt.translation = { x: ax, y: ay };
+    txt.x = 0;
+    txt.y = 0;
+    
+    // Hide label if the bar is too thin to comfortably render text
+    if (pos === 'inside' || pos === 'center') {
+      if (!isH && (rect.width < 14 || rect.height < 14)) txt.text = '';
+      if (isH && (rect.height < 14 || rect.width < 14)) txt.text = '';
+    }
+  }
+}