@trebco/treb 28.10.0 → 28.11.1

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v28.10. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v28.11. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -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.11.1",
   "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) {
@@ -266,7 +310,7 @@ export const TransformSeriesData = (raw_data?: UnionValue, default_x?: UnionValu
 };
 
 /** get a unified scale, and formats */
-export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: number) => {
+export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: number, x_floor?: number, x_ceiling?: number) => {
 
   let x_format = '';
   let y_format = '';
@@ -285,13 +329,47 @@ 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 x_floor !== 'undefined') {
+    x_min = Math.min(x_min, x_floor);
+  }
+  if (typeof x_ceiling !== 'undefined') {
+    x_min = Math.max(x_min, x_ceiling);
+  }
+
   if (typeof y_floor !== 'undefined') {
     y_min = Math.min(y_min, y_floor);
   }
@@ -366,6 +444,46 @@ const ApplyLabels = (series_list: SeriesType[], pattern: string, category_labels
 
 export const CreateBubbleChart = (args: UnionValue[]): ChartData => {
 
+  const series: SeriesType[] = TransformSeriesData(args[0]);
+
+  let y_floor: number|undefined = undefined;
+  let x_floor: number|undefined = undefined;
+  
+  for (const entry of series) {
+
+    if (typeof entry.x.range?.min === 'number' && entry.x.range.min > 0 && entry.x.range.min < 50) {
+      x_floor = 0;
+    }
+    if (typeof entry.y.range?.min === 'number' && entry.y.range.min > 0 && entry.y.range.min < 50) {
+      y_floor = 0;
+    }
+  }
+
+  const common = CommonData(series, y_floor, undefined, x_floor);
+  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 +568,8 @@ export const CreateBubbleChart = (args: UnionValue[]): ChartData => {
 
   };
 
+  */
+
 };
 
 /**

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

@@ -196,6 +196,8 @@ export class DefaultChartRenderer implements ChartRendererType {
 
     // now do type-specific rendering
 
+    let zeros: number[]|undefined = [];
+
     switch (chart_data.type) {
     case 'scatter':
       this.renderer.RenderPoints(area, chart_data.x, chart_data.y, 'mc mc-correlation series-1');
@@ -203,23 +205,21 @@ export class DefaultChartRenderer implements ChartRendererType {
 
     case 'bubble':
 
+      if (chart_data.x_scale.min <= 0 && chart_data.x_scale.max >= 0) {
+        zeros[0] = Math.round(Math.abs(chart_data.x_scale.min / chart_data.x_scale.step));
+      }      
+      if (chart_data.y_scale.min <= 0 && chart_data.y_scale.max >= 0) {
+        zeros[1] = Math.round(Math.abs(chart_data.y_scale.max / chart_data.y_scale.step));
+      }
+
       this.renderer.RenderGrid(area, 
         chart_data.y_scale.count, 
         chart_data.x_scale.count + 1, // (sigh)
-        'chart-grid');
+        'chart-grid', zeros);
 
-      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;