@trebco/treb 28.10.0 → 28.10.5

package/dist/treb.d.ts

@@ -438,6 +438,8 @@ export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
      * Add a sheet, optionally named.
      */
     AddSheet(name?: string): number;
+    RemoveConnectedChart(id: number): void;
+    UpdateConnectedChart(id: number, formula: string): void;
 
     /**
      * Insert an annotation node. Usually this means inserting a chart. Regarding

package/notes/connected-elements.md

@@ -0,0 +1,37 @@
+
+
+"Connected elements" refers to a new API that's intended to link things 
+outside of the spreadsheet to the spreadsheet's graph and calculation events.
+
+The canonical example is a chart that lives outside of the spreadsheet.
+It should be updated any time the spreadsheet data changes. It should 
+also gracefully handle layout modifications (change sheet name, insert/delete
+rows/columns) as if it were inside the spreadsheet.
+
+One thing about these is that they're ephemeral; they have no persistent 
+representation in the data model. So you create them when you lay out your 
+web page, and they only exist for the lifetime of that page.
+
+Still TODO:
+
+ - clean up junk (when?)
+    As long as we remove the leaf nodes from the graph, it should be
+    clean. 
+
+ - deal with model rebuild (elements are getting orphaned here)
+    I think this is handled? still maybe an issue on Reset()
+
+ - API to update elements (e.g. change formula w/o removing)
+    that last one could be implemented as remove/add, possibly 
+    reusing the generated ID. at least as a first cut.
+
+Done:
+
+ - API to remove elements
+
+ - rewrite formula on layout changes
+
+Open Qs:
+
+ - what happens if you completely flush the data model (reset, load new file?)
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "28.10.0",
+  "version": "28.10.5",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {

package/treb-calculator/src/calculator.ts

@@ -55,6 +55,7 @@ import type { LeafVertex } from './dag/graph';
 import { ArgumentError, ReferenceError, UnknownError, ValueError, ExpressionError, NAError, DivideByZeroError } from './function-error';
 import { StateLeafVertex } from './dag/state_leaf_vertex';
 import { CalculationLeafVertex } from './dag/calculation_leaf_vertex';
+import type { ConnectedElementType } from 'treb-grid';
 
 /**
  * breaking this out so we can use it for export (TODO)
@@ -1291,6 +1292,7 @@ export class Calculator extends Graph {
       subset = undefined;
       this.UpdateAnnotations();
       this.UpdateConditionals();
+      this.UpdateConnectedElements();
       // this.UpdateNotifiers();
       this.full_rebuild_required = false; // unset
     }
@@ -1488,6 +1490,7 @@ export class Calculator extends Graph {
 
     this.UpdateAnnotations(); // all
     this.UpdateConditionals();
+    this.UpdateConnectedElements();
 
     // and notifiers
 
@@ -1767,6 +1770,52 @@ export class Calculator extends Graph {
     }
   }
 
+  public RemoveConnectedELement(element: ConnectedElementType) {
+    let internal = element.internal as { vertex: StateLeafVertex };
+    if (internal?.vertex) {
+      this.RemoveLeafVertex(internal.vertex);
+      return true;
+    }
+    return false;
+  }
+
+  public UpdateConnectedElements(context?: Sheet, element?: ConnectedElementType) {
+
+    // we have a problem here in that these elements are not bound
+    // to sheets, so we might have no context. for now we'll 
+    // just grab the first sheet, although that's not necessarily
+    // what you want. we should enforce that these have hard sheet 
+    // references when created.
+    
+    if (!context) {
+      context = this.model.sheets.list[0];
+    }
+
+    if (element) {
+      let internal = element.internal as { vertex: StateLeafVertex };
+      if (internal?.vertex) {
+        this.RemoveLeafVertex(internal.vertex);
+      }
+    }
+
+    const elements = element ? [element] : this.model.connected_elements.values();
+
+    for (const element of elements) {
+      let internal = element.internal as { vertex: StateLeafVertex };
+      if (!internal) {
+        internal = {
+          vertex: new StateLeafVertex(),
+        };
+        element.internal = internal;
+      }
+
+      const vertex = internal.vertex as LeafVertex;
+      this.AddLeafVertex(vertex);
+      this.UpdateLeafVertex(vertex, element.formula, context);
+
+    }
+  }
+
   public UpdateConditionals(list?: ConditionalFormat|ConditionalFormat[], context?: Sheet): void {
 
     // this method is (1) relying on the leaf vertex Set to avoid duplication,

package/treb-calculator/src/dag/graph.ts

@@ -31,6 +31,7 @@ import type { DataModel } from 'treb-grid';
 import { CalculationLeafVertex } from './calculation_leaf_vertex';
 
 export type LeafVertex = StateLeafVertex|CalculationLeafVertex;
+export type { StateLeafVertex };
 
 // FIXME: this is a bad habit if you're testing on falsy for OK.
 

package/treb-calculator/src/index.ts

@@ -24,4 +24,4 @@ export * from './calculator';
 
 // for annotations that have dependencies
 
-export type { LeafVertex } from './dag/graph';
+export type { LeafVertex, StateLeafVertex } from './dag/graph';

package/treb-charts/src/chart-functions.ts

@@ -60,14 +60,20 @@ export const ChartFunctions: FunctionMap = {
    * more general "group" if you just want to group things.
    * 
    * boxing properly as "extended" type
+   * 
+   * this is getting too specific to bubble charts, which have a lot
+   * of requirements that other charts don't have. can we split? 
+   * 
    */
   Series: {
     arguments: [
       { name: 'Label' }, // , metadata: true, },
       { name: 'X', metadata: true, },
       { name: 'Y', metadata: true, },
+      { name: 'Z', metadata: true, },
       { name: 'index', },
       { name: 'subtype', },
+      { name: 'Labels', description: 'Labels for bubble charts only (atm)' },
     ],
     fn: (...args: any) => {
       return {
@@ -155,10 +161,7 @@ export const ChartFunctions: FunctionMap = {
 
   'Bubble.Chart': {
     arguments: [
-      { name: 'X', metadata: true, },
-      { name: 'Y', metadata: true, },
-      { name: 'Z', metadata: true, },
-      { name: 'Categories' },
+      { name: 'Data', metadata: true, },
       { name: 'Chart Title' },
     ],
     fn: Identity,

package/treb-charts/src/chart-types.ts

@@ -111,10 +111,14 @@ export interface BubbleChartData extends ChartDataBaseType {
 
   type: 'bubble';
 
+  /*
   x?: SubSeries;
   y?: SubSeries;
   z?: SubSeries;
   c?: any[];
+  */
+  series: SeriesType[];
+
 
   x_scale: RangeScale;
   y_scale: RangeScale;
@@ -219,7 +223,7 @@ export enum LegendPosition {
 }
 
 export enum LegendStyle {
-  line, marker
+  line, marker, bubble
 }
 
 export interface LegendOptions {
@@ -243,6 +247,8 @@ export interface SeriesType {
   subtype?: string;
   x: SubSeries;
   y: SubSeries;
+  z?: SubSeries;
   index?: number;
+  labels?: string[];
 }
 

package/treb-charts/src/chart-utils.ts

@@ -1,7 +1,7 @@
 
 import { type UnionValue, ValueType, type ArrayUnion } from 'treb-base-types';
 import { LegendStyle } from './chart-types';
-import type { SubSeries, SeriesType, BarData, ChartDataBaseType, ChartData, ScatterData2, LineData, DonutSlice } from './chart-types';
+import type { SubSeries, SeriesType, BarData, ChartDataBaseType, ChartData, ScatterData2, LineData, DonutSlice, BubbleChartData } from './chart-types';
 import { NumberFormatCache } from 'treb-format';
 import { Util } from './util';
 
@@ -17,17 +17,33 @@ const DEFAULT_FORMAT = '#,##0.00'; // why not use "general", or whatever the usu
 
 export const ReadSeries = (data: Array<any>): SeriesType => {
 
+  // series type is (now)
+  //
+  // [0] label, string
+  // [1] X, array, metadata [* could be single value?]
+  // [2] Y, array, metadata [* could be single value?]
+  // [3] Z, array, metadata [* could be single value?]
+  // [4] index, number
+  // [5] subtype, string
+  //
+  
   // in this case it's (label, X, Y)
   const series: SeriesType = {
     x: { data: [] },
     y: { data: [] },
   };
 
-  if (data[3] && typeof data[3] === 'number') {
-    series.index = data[3];
+  if (data[4] && typeof data[4] === 'number') {
+    series.index = data[4];
   }
-  if (data[4]) {
-    series.subtype = data[4].toString();
+
+  if (data[5]) {
+    series.subtype = data[5].toString();
+  }
+
+  if (data[6]) {
+    const labels = Util.Flatten(Array.isArray(data[6]) ? data[6] : [data[6]]);
+    series.labels = labels.map(value => (typeof value === 'undefined') ? '' : value.toString());
   }
 
   if (data[0]) {
@@ -47,6 +63,17 @@ export const ReadSeries = (data: Array<any>): SeriesType => {
     }
   }
 
+  // convert single value series to arrays so we can just use the old routine
+
+  for (let i = 1; i < 4; i++) {
+    if (data[i] && typeof data[i] === 'object' && data[i].key === 'metadata') {
+      data[i] = {
+        type: ValueType.array,
+        value: [data[i]],
+      }
+    }
+  }
+  
   // read [2] first, so we can default for [1] if necessary
 
   if (!!data[2] && (typeof data[2] === 'object') && data[2].type === ValueType.array) {
@@ -67,7 +94,21 @@ export const ReadSeries = (data: Array<any>): SeriesType => {
     }
   }
 
-  for (const subseries of [series.x, series.y]) {
+  const entries = [series.x, series.y]
+
+  // try reading [3]
+
+  if (!!data[3] && (typeof data[3] === 'object') && data[3].type === ValueType.array) {
+    const flat = Util.Flatten(data[3].value);
+    series.z = { data: [] };
+    series.z.data = flat.map(item => typeof item.value.value === 'number' ? item.value.value : undefined);
+    if (flat[0].value.format) {
+      series.z.format = flat[0].value.format;
+    }
+  }
+
+
+  for (const subseries of entries) {
 
     // in case of no values
     if (subseries.data.length) {
@@ -169,10 +210,13 @@ export const TransformSeriesData = (raw_data?: UnionValue, default_x?: UnionValu
   if (raw_data.type === ValueType.object) {
     if (raw_data.key === 'group') {
       if (Array.isArray(raw_data.value)) {
-        for (const entry of raw_data.value) {
+        for (const [series_index, entry] of raw_data.value.entries()) {
           if (!!entry && (typeof entry === 'object')) {
             if (entry.key === 'series') {
               const series = ReadSeries(entry.value);
+              if (typeof series.index === 'undefined') {
+                series.index = series_index + 1;
+              }
               list.push(series);
             }
             else if (entry.type === ValueType.array) {
@@ -285,13 +329,40 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
   }
 
   const x = series.filter(test => test.x.range);
-  const x_min = Math.min.apply(0, x.map(test => test.x.range?.min || 0));
-  const x_max = Math.max.apply(0, x.map(test => test.x.range?.max || 0));
+  let x_min = Math.min.apply(0, x.map(test => test.x.range?.min || 0));
+  let x_max = Math.max.apply(0, x.map(test => test.x.range?.max || 0));
 
   const y = series.filter(test => test.y.range);
   let y_min = Math.min.apply(0, x.map(test => test.y.range?.min || 0));
   let y_max = Math.max.apply(0, x.map(test => test.y.range?.max || 0));
 
+  // if there's z data (used for bubble size), adjust x/y min/max to
+  // account for the z size so bubbles are contained within the grid
+
+  for (const subseries of series) {
+    if (subseries.z) {
+      for (const [index, z] of subseries.z.data.entries()) {
+        if (typeof z !== 'undefined') {
+          const x = subseries.x.data[index];
+          
+          const half = Math.max(0, z/2); // accounting for negative values (which we don't use)
+
+          if (typeof x !== 'undefined') {
+            x_min = Math.min(x_min, x - half);
+            x_max = Math.max(x_max, x + half);
+          }
+
+          const y = subseries.y.data[index];
+          if (typeof y !== 'undefined') {
+            y_min = Math.min(y_min, y - half);
+            y_max = Math.max(y_max, y + half);
+          }
+
+        }
+      }
+    }
+  }
+  
   if (typeof y_floor !== 'undefined') {
     y_min = Math.min(y_min, y_floor);
   }
@@ -366,6 +437,32 @@ const ApplyLabels = (series_list: SeriesType[], pattern: string, category_labels
 
 export const CreateBubbleChart = (args: UnionValue[]): ChartData => {
 
+  const series: SeriesType[] = TransformSeriesData(args[0]);
+  const common = CommonData(series);
+  const title = args[1]?.toString() || undefined;
+  const options = args[2]?.toString() || undefined;
+
+  // console.info({ series, common, title, options });
+
+  const chart_data: BubbleChartData = {
+
+    legend: common.legend,
+    legend_style: LegendStyle.bubble,
+    type: 'bubble',
+    series,
+    title,
+
+    x_scale: common.x.scale,
+    x_labels: common.x.labels,
+
+    y_scale: common.y.scale,
+    y_labels: common.y.labels,
+
+  };
+  
+  return chart_data;
+
+  /*
   const [x, y, z] = [0,1,2].map(index => {
     const arg = args[index];
     if (arg.type === ValueType.array) {
@@ -450,6 +547,8 @@ export const CreateBubbleChart = (args: UnionValue[]): ChartData => {
 
   };
 
+  */
+
 };
 
 /**

package/treb-charts/src/default-chart-renderer.ts

@@ -208,18 +208,9 @@ export class DefaultChartRenderer implements ChartRendererType {
         chart_data.x_scale.count + 1, // (sigh)
         'chart-grid');
 
-      if (chart_data.x && chart_data.y && chart_data.z) {
-        this.renderer.RenderBubbleSeries(area,
-            chart_data.x.data,
-            chart_data.y.data,
-            chart_data.z.data,
-            chart_data.c || [],
-            chart_data.x_scale,
-            chart_data.y_scale,
-            undefined,
-            undefined,
-            'bubble-chart',
-          );
+      for (const [index, series] of chart_data.series.entries()) {
+        const series_index = (typeof series.index === 'number') ? series.index : index + 1;
+        this.renderer.RenderBubbleSeries(area, series, chart_data.x_scale, chart_data.y_scale, `bubble-chart series-${series_index}`);
       }
 
       break;

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;
@@ -1193,23 +1201,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 +1228,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 +1308,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,6 +92,13 @@
     rect {
       fill: currentColor;
     }
+    circle {
+      fill: currentColor;
+      fill-opacity: .5;
+      stroke: currentColor;
+      stroke-width: 2px;
+      r: .25em;
+    }
   }
 
   /* grid */
@@ -166,7 +173,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) */