@trebco/treb 28.10.0 → 28.11.1

package/treb-charts/src/renderer.ts

@@ -21,7 +21,7 @@
 
 import type { Size, Point } from './rectangle';
 import { Area } from './rectangle';
-import type { DonutSlice, LegendOptions} from './chart-types';
+import type { DonutSlice, LegendOptions, SeriesType} from './chart-types';
 import { LegendLayout, LegendPosition, LegendStyle } from './chart-types';
 import type { RangeScale } from 'treb-utils';
 
@@ -196,14 +196,22 @@ export class ChartRenderer {
         group.appendChild(SVGNode('text', {
           'dominant-baseline': 'middle', x: x + marker_width, y, dy: (trident ? '.3em' : undefined) }, label.label));
 
-        if (options.style === LegendStyle.marker) {
-          group.appendChild(SVGNode('rect', { 
-            class: `series-${color}`, x, y: marker_y - 4, width: 8, height: 8 }));
-        }
-        else {
-          group.appendChild(SVGNode('rect', { 
-            class: `series-${color}`, x, y: marker_y - 1, width: marker_width - 3, height: 2}));
-        }
+        switch (options.style) {
+          case LegendStyle.marker:
+            group.appendChild(SVGNode('rect', { 
+              class: `series-${color}`, x, y: marker_y - 4, width: 8, height: 8 }));
+            break;
+
+          case LegendStyle.bubble:
+            group.appendChild(SVGNode('circle', { 
+              class: `series-${color}`, cx: x + marker_width - 11, cy: marker_y - 4 + 3, /* r: '0.25em' */ }));
+            break;
+                  
+          default:
+            group.appendChild(SVGNode('rect', { 
+              class: `series-${color}`, x, y: marker_y - 1, width: marker_width - 3, height: 2}));
+            break;
+          }
 
         h = Math.max(h, text_metrrics.height);
         x += text_metrrics.width + marker_width + padding;
@@ -960,23 +968,54 @@ export class ChartRenderer {
 
   }
 
-  public RenderGrid(area: Area, y_count: number, x_count = 0, classes?: string | string[]): void {
+  public RenderGrid(area: Area, y_count: number, x_count = 0, classes?: string | string[], zeros?: number[]): void {
 
     const d: string[] = [];
+    const d2: string[] = [];
 
     let step = area.height / y_count;
     for (let i = 0; i <= y_count; i++) {
+
       const y = Math.round(area.top + step * i) - 0.5;
-      d.push(`M${area.left} ${y} L${area.right} ${y}`);
+
+      if (zeros && zeros[1] === i) {
+        d2.push(`M${area.left} ${y} L${area.right} ${y}`);
+      }
+      else {
+        d.push(`M${area.left} ${y} L${area.right} ${y}`);
+      }
     }
 
     step = area.width / (x_count - 1);
     for (let i = 0; i < x_count; i++) {
+
       const x = Math.round(area.left + step * i) - 0.5;
-      d.push(`M${x} ${area.top} L${x} ${area.bottom}`);
+
+      if (zeros && zeros[0] === i) {
+        d2.push(`M${x} ${area.top} L${x} ${area.bottom}`);
+      }
+      else {
+        d.push(`M${x} ${area.top} L${x} ${area.bottom}`);
+      }
     }
 
     this.group.appendChild(SVGNode('path', {d, class: classes}));
+    if (d2.length) {
+
+      if (classes) {
+        if (!Array.isArray(classes)) {
+          classes = classes + ' zero';
+        }
+        else {
+          classes.push('zero');
+        }
+      }
+      else {
+        classes = 'zero';
+      }
+
+      this.group.appendChild(SVGNode('path', {d: d2, class: classes}));
+    }
 
   }
 
@@ -1193,23 +1232,24 @@ export class ChartRenderer {
 
   }
 
-  public RenderBubbleSeries(area: Area,
-        x: Array<number | undefined>,
-        y: Array<number | undefined>,
-        z: Array<number | undefined>,
-        c: any[] = [],
+  public RenderBubbleSeries(
+        area: Area,
+        series: SeriesType,
         x_scale: RangeScale,
         y_scale: RangeScale,
-        min = 10,
-        max = 30,
         classes?: string | string[]): void {
 
-    const count = Math.max(x.length, y.length, z.length);
     const xrange = (x_scale.max - x_scale.min) || 1;
     const yrange = (y_scale.max - y_scale.min) || 1;
 
     // const marker_elements: string[] = [];
-    const points: Array<{x: number, y: number, z: number, series: number} | undefined> = [];
+    const points: Array<{x: number, y: number, z: number} | undefined> = [];
+    const labels: Array<{
+      x: number,
+      y: number,
+      text: string,
+      offset: number,
+    }> = [];
 
     const d: string[] = [];
     const areas: string[] = [];
@@ -1219,6 +1259,43 @@ export class ChartRenderer {
     // if (title) node.setAttribute('title', title);
     this.group.appendChild(group);
 
+    if (series.z) {
+      for (const [index, z] of series.z.data.entries()) {
+
+        const x = series.x.data[index];
+        const y = series.y.data[index];
+
+        if (typeof x !== 'undefined' && typeof y !== 'undefined' && typeof z !== 'undefined' && z > 0) {
+
+          const size_x = z / xrange * area.width;
+          const size_y = z / yrange * area.height;
+          const size = Math.max(size_x, size_y);
+
+          const point: Point & { z: number } = {
+            x: area.left + ((x - x_scale.min) / xrange) * area.width, 
+            y: area.bottom - ((y - y_scale.min) / yrange) * area.height, 
+            z: size,
+          };
+
+          points.push(point);
+
+          if (series.labels?.[index]) {
+            const r = point.z/2;
+            labels.push({
+              x: point.x, //  + Math.cos(Math.PI/4) * r, 
+              y: point.y, //  + Math.sin(Math.PI/4) * r, 
+              text: series.labels?.[index] || '',
+              offset: Math.cos(Math.PI/4) * r,
+            });
+          }
+
+        }
+
+      }
+    }
+    
+    /*
+
     let z_min = z[0] || 0;
     let z_max = z[0] || 0;
 
@@ -1262,13 +1339,59 @@ export class ChartRenderer {
 
     }
      
-    {
-      for (const point of points) {
-        if (point) {
-          group.appendChild(SVGNode('circle', {cx: point.x, cy: point.y, r: point.z / 2, class: `point series-${point.series}`}));
-        }
+    */
+
+    for (const point of points) {
+      if (point) {
+        group.appendChild(SVGNode('circle', {
+          cx: point.x, 
+          cy: point.y, 
+          r: point.z / 2, 
+          class: `point`,
+        }));
       }
+    }
 
+    if (labels.length) {
+      const container = this.label_group.getBoundingClientRect();
+
+      for (const entry of labels) {
+        if (entry.text) {
+
+          const group = this.label_group.appendChild(SVGNode('g', {
+            class: 'bubble-label',
+          }));
+
+          const rect = group.appendChild(SVGNode('rect', {
+            x: entry.x, // + entry.offset, 
+            y: entry.y, // + entry.offset, 
+            // rx: `3px`,
+            // fill: 'Canvas',
+            // 'fill-opacity': '60%',
+            // stroke: `none`,
+            // 'style': `--translate-offset: ${Math.round(entry.offset)}px`,
+            class: 'label-background'
+          }));
+
+          const label = group.appendChild(SVGNode('text', { 
+            x: entry.x, // + entry.offset, 
+            y: entry.y, // + entry.offset, 
+            offset: entry.offset,
+            class: 'label-text', 
+            'text-anchor': 'middle',
+            'alignment-baseline': 'middle',
+            'style': `--translate-offset: ${Math.round(entry.offset)}px`,
+           }, entry.text));
+
+           const bounds = label.getBoundingClientRect();
+
+           rect.setAttribute('x', (bounds.left - container.left - 2).toString());
+           rect.setAttribute('y', (bounds.top - container.top - 1).toString());
+           rect.style.height = (bounds.height + 2) + `px`;
+           rect.style.width = (bounds.width + 4) + `px`;
+
+        }
+      }
     }
 
 

package/treb-charts/style/charts.scss

@@ -92,11 +92,23 @@
     rect {
       fill: currentColor;
     }
+    circle {
+      fill: currentColor;
+      fill-opacity: .5;
+      stroke: currentColor;
+      stroke-width: 2px;
+      r: .25em;
+    }
   }
 
   /* grid */
   .chart-grid, .chart-ticks {
     stroke: var(--treb-chart-grid-color, #ddd);
+
+    &.zero {
+      stroke: var(--treb-chart-grid-zero-color, var(--treb-chart-grid-color, #999));
+    }
+
   }
 
   /* mouse elements */
@@ -166,7 +178,31 @@
     stroke-width: 3;
     fill: color-mix(in srgb, currentColor 75%, transparent);
     stroke: currentColor;
-    
+  }
+
+  .bubble-label {
+
+    .label-background {
+      stroke: none;
+      fill: none;
+
+      /*
+      fill: Canvas;
+      fill-opacity: .5;
+      rx: 2px;
+      */
+    }
+
+    .label-text {
+
+      /**
+      * default translate to lower-right. you can calc() to switch 
+      * to a different position.
+      */
+      transform: translate(var(--translate-offset), var(--translate-offset));
+
+    }
+
   }
 
   /* scatter plot line (and marker -- change that class name) */

package/treb-embed/src/embedded-spreadsheet.ts

@@ -87,6 +87,10 @@ import type { BorderToolbarMessage, ToolbarMessage } from './toolbar-message';
 import { Chart, ChartFunctions } from 'treb-charts';
 import type { SetRangeOptions } from 'treb-grid';
 
+import type { StateLeafVertex } from 'treb-calculator';
+import type { ConnectedElementType } from 'treb-grid';
+
+
 // --- worker ------------------------------------------------------------------
 
 /**
@@ -95,7 +99,6 @@ import type { SetRangeOptions } from 'treb-grid';
  * the script so we can run it as a worker.
  */
 import * as export_worker_script from 'worker:../../treb-export/src/export-worker/index.worker';
-import { StateLeafVertex } from 'treb-calculator/src/dag/state_leaf_vertex';
 
 // --- types -------------------------------------------------------------------
 
@@ -2197,6 +2200,114 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   }
 
+  public RemoveConnectedChart(id: number) {
+    const element = this.model.RemoveConnectedElement(id);
+    if (element) {
+      const removed = this.calculator.RemoveConnectedELement(element);
+      if (removed) {
+        // ... actually don't need to update here
+      }
+    }
+  }
+
+  public UpdateConnectedChart(id: number, formula: string) {
+    const element = this.model.connected_elements.get(id);
+    if (element) {
+      element.formula = formula;
+      const internal = (element.internal) as { vertex: StateLeafVertex, state: any };
+
+      if (internal?.state) {
+        internal.state = undefined;
+      }
+      this.calculator.UpdateConnectedElements(this.grid.active_sheet, element);     
+      
+      if (element.update) {
+        element.update.call(0, element);
+      }
+
+    }
+  }
+
+  /**
+   * @internal
+   * 
+   * @returns an id that can be used to manage the reference
+   */
+  public CreateConnectedChart(formula: string, target: HTMLElement, options: EvaluateOptions): number {
+
+    // FIXME: merge w/ insert annotation?
+
+    let r1c1 = options?.r1c1 || false;
+    let argument_separator = options?.argument_separator || this.parser.argument_separator; // default to current
+
+    this.parser.Save();
+    this.parser.flags.r1c1 = r1c1;
+
+    if (argument_separator === ',') {
+      this.parser.argument_separator = ArgumentSeparatorType.Comma;
+      this.parser.decimal_mark = DecimalMarkType.Period;
+    }
+    else {
+      this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
+      this.parser.decimal_mark = DecimalMarkType.Comma;
+    }
+
+    const result = this.parser.Parse(formula);
+
+    this.parser.Restore();
+
+    if (result.expression) {
+      formula = '=' + this.parser.Render(result.expression, { missing: '' });
+    }
+    else {
+      console.warn("invalid formula", result.error);
+    }
+
+    const chart = this.CreateChart();
+    chart.Initialize(target);
+
+    const id = this.model.AddConnectedElement({
+      formula,
+
+      // this is circular, but I want to leave `this` bound to the sheet
+      // instance in case we need it -- so what's a better approach? pass
+      // in the formula explicitly, and update if we need to make changes?
+
+      update: (instance: ConnectedElementType) => {
+
+        const parse_result = this.parser.Parse(instance.formula);
+
+        if (parse_result &&
+          parse_result.expression &&
+          parse_result.expression.type === 'call') {
+
+          // FIXME: make a method for doing this
+
+          this.parser.Walk(parse_result.expression, (unit) => {
+            if (unit.type === 'address' || unit.type === 'range') {
+              this.model.ResolveSheetID(unit, undefined, this.grid.active_sheet);
+            }
+            return true;
+          });
+
+          const expr_name = parse_result.expression.name.toLowerCase();
+          const result = this.calculator.CalculateExpression(parse_result.expression);
+          chart.Exec(expr_name, result as ExtendedUnion); // FIXME: type?
+        }
+
+        chart.Update();
+
+      },
+
+    });
+
+    this.calculator.UpdateConnectedElements(this.grid.active_sheet);
+    this.UpdateConnectedElements();
+
+    return id;
+
+  }
+
   /**
    * Insert an annotation node. Usually this means inserting a chart. Regarding
    * the argument separator, see the Evaluate function.
@@ -2226,11 +2337,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       target = Rectangle.IsRectangle(rect) ? rect : this.model.ResolveArea(rect, this.grid.active_sheet);
     }
 
+    // FIXME: with the new parser save/restore semantics we should 
+    // just always do this. also I don't think the r1c1 logic works
+    // properly here... unless we're assuming that the default state
+    // is always off
+
     if (argument_separator && argument_separator !== this.parser.argument_separator || r1c1) {
+
+      this.parser.Save();
+
+      /*
       const current = {
         argument_separator: this.parser.argument_separator, 
         decimal_mark: this.parser.decimal_mark,
       };
+      */
 
       if (argument_separator === ',') {
         this.parser.argument_separator = ArgumentSeparatorType.Comma;
@@ -2241,17 +2362,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         this.parser.decimal_mark = DecimalMarkType.Comma;
       }
 
-      const r1c1_state = this.parser.flags.r1c1;
-      if (r1c1) {
-        this.parser.flags.r1c1 = r1c1;
-      }
+      // const r1c1_state = this.parser.flags.r1c1;
+      // if (r1c1) 
+      // {
+        this.parser.flags.r1c1 = !!r1c1;
+      // }
 
       const result = this.parser.Parse(formula);
       
+      /*
       // reset
       this.parser.argument_separator = current.argument_separator;
       this.parser.decimal_mark = current.decimal_mark;
       this.parser.flags.r1c1 = r1c1_state;
+      */
+      this.parser.Restore();
 
       if (result.expression) {
         formula = '=' + this.parser.Render(result.expression, { missing: '' });
@@ -4856,6 +4981,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    * (just sparklines atm) and update if necessary.
    */
   protected UpdateAnnotations(): void {
+
     for (const annotation of this.grid.active_sheet.annotations) {
       if (annotation.temp.vertex) {
         const vertex = annotation.temp.vertex as StateLeafVertex;
@@ -4893,6 +5019,27 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       }
 
     }
+
+    this.UpdateConnectedElements();
+
+  }
+
+  protected UpdateConnectedElements() {
+    for (const element of this.model.connected_elements.values()) {
+      const internal = (element.internal) as { vertex: StateLeafVertex, state: any };
+      if (internal?.vertex && internal.vertex.state_id !== internal.state ) {
+        internal.state = internal.vertex.state_id;
+        const fn = element.update; 
+        if (fn) {
+
+          // FIXME: what if there are multiple calls pending? some 
+          // kind of a dispatch system might be useful
+
+          Promise.resolve().then(() => fn.call(0, element));
+
+        }
+      }
+    }
   }
 
   /*