@trebco/treb 28.5.2 → 28.10.0

package/treb-charts/src/renderer.ts

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */
@@ -1193,6 +1193,87 @@ export class ChartRenderer {
 
   }
 
+  public RenderBubbleSeries(area: Area,
+        x: Array<number | undefined>,
+        y: Array<number | undefined>,
+        z: Array<number | undefined>,
+        c: any[] = [],
+        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 d: string[] = [];
+    const areas: string[] = [];
+
+    const group = SVGNode('g', {class: classes});
+
+    // if (title) node.setAttribute('title', title);
+    this.group.appendChild(group);
+
+    let z_min = z[0] || 0;
+    let z_max = z[0] || 0;
+
+    const map: Map<string, number> = new Map();
+
+    for (let i = 0; i < count; i++) {
+
+      const a = x[i];
+      const b = y[i];
+
+      if (typeof a === 'undefined' || typeof b === 'undefined') {
+        points.push(undefined);
+      }
+      else {
+
+        const series_key = c[i] || '';
+        let series = map.get(series_key);
+
+        if (typeof series === 'undefined') {
+
+          series = map.size + 1;
+
+          map.set(series_key, series);
+        }
+
+        let size = z[i] || 0;
+        if (size) {
+          const size_x = size / xrange * area.width;
+          const size_y = size / yrange * area.height;
+          size = Math.min(size_x, size_y);
+        }
+
+        points.push({
+          x: area.left + ((a - x_scale.min) / xrange) * area.width,
+          y: area.bottom - ((b - y_scale.min) / yrange) * area.height,
+          z: size,
+          series,
+        });
+
+      }
+
+    }
+     
+    {
+      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}`}));
+        }
+      }
+
+    }
+
+
+  }
+
   public RenderScatterSeries(area: Area,
     x: Array<number | undefined>,
     y: Array<number | undefined>,

package/treb-charts/src/util.ts

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */

package/treb-charts/style/charts.scss

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */
@@ -161,6 +161,14 @@
     }
   }
 
+  .bubble-chart {
+
+    stroke-width: 3;
+    fill: color-mix(in srgb, currentColor 75%, transparent);
+    stroke: currentColor;
+    
+  }
+
   /* scatter plot line (and marker -- change that class name) */
   .scatter-plot {
 

package/treb-charts/style/old-charts.scss

@@ -1,24 +1,24 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the 
- * terms of the GNU General Public License as published by the Free Software 
- * Foundation, either version 3 of the License, or (at your option) any 
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
- * details.
- *
- * You should have received a copy of the GNU General Public License along 
- * with TREB. If not, see <https://www.gnu.org/licenses/>. 
- *
- * Copyright 2022-2023 trebco, llc. 
- * info@treb.app
- * 
- */
-
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2024 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
 /**
  * NOTE: this file uses the color-mod() function and a postcss library
  * to translate it. that function is no longer in the spec and will be 

package/treb-embed/markup/toolbar.html

@@ -65,6 +65,27 @@
     </div>
   </div>
 
+  <div composite>
+    <button data-command="border-bottom" data-target="border" title="Bottom border"></button>
+    <div class="treb-menu">
+      <button dropdown title="Border options"></button>
+      <div class="treb-icon-buttons" data-replace="border">
+        <button data-command="border-top" title="Top border"></button>        
+        <button data-command="border-left" title="Left border"></button>        
+        <button data-command="border-right" title="Right border"></button>        
+        <button data-command="border-bottom" title="Bottom border"></button>        
+        <button data-command="border-double-bottom" title="Double bottom border"></button>        
+        <button data-command="border-outside" title="Outside borders"></button>        
+        <button data-command="border-all" title="All borders"></button>        
+        <button data-command="border-none" title="Clear borders"></button>        
+        <div separator></div>
+        <div class="treb-menu treb-color-menu treb-submenu" data-color-command="border-color" data-replace-color="border" title="Border color" data-default-color-text="Default border color">
+          <button data-icon="palette" data-color-bar="border" data-color="{}"></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div composite>
     <button data-command="fill-color" data-color-bar="fill" data-color="{}" title="Fill color"></button>
     <div class="treb-menu treb-color-menu" data-color-command="fill-color" data-replace-color="fill" data-default-color-text="No fill">
@@ -94,28 +115,8 @@
     </div>
   </div>
 
-  <div composite>
-    <button data-command="border-bottom" data-target="border" title="Bottom border"></button>
-    <div class="treb-menu">
-      <button dropdown title="Border options"></button>
-      <div class="treb-icon-buttons" data-replace="border">
-        <button data-command="border-top" title="Top border"></button>        
-        <button data-command="border-left" title="Left border"></button>        
-        <button data-command="border-right" title="Right border"></button>        
-        <button data-command="border-bottom" title="Bottom border"></button>        
-        <button data-command="border-double-bottom" title="Double bottom border"></button>        
-        <button data-command="border-outside" title="Outside borders"></button>        
-        <button data-command="border-all" title="All borders"></button>        
-        <button data-command="border-none" title="Clear borders"></button>        
-        <div separator></div>
-        <div class="treb-menu treb-color-menu treb-submenu" data-color-command="border-color" data-replace-color="border" title="Border color" data-default-color-text="Default border color">
-          <button data-icon="palette" data-color-bar="border" data-color="{}"></button>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <div composite font-scale>
+    <div class="treb-font-scale-icon"></div>
     <input class="treb-font-scale" title="Font scale">
     <div class="treb-menu">
       <button dropdown title="Font scale options"></button>
@@ -131,19 +132,6 @@
     </div>
   </div>
 
-  <div class="treb-menu">
-    <button data-icon="layout" title="Rows & columns"></button>
-    <div>
-      <button data-command="insert-row">Insert row</button>
-      <button data-command="insert-column">Insert column</button>
-      <button data-command="delete-row">Delete row</button>
-      <button data-command="delete-column">Delete column</button>
-      <div separator add-remove-sheet></div>
-      <button data-command="insert-sheet" add-remove-sheet>Add sheet</button>
-      <button data-command="delete-sheet" add-remove-sheet>Delete sheet</button>
-    </div>
-  </div>
-
   <div composite>
     <input class="treb-number-format" title="Number format">
     <div class="treb-menu">
@@ -157,6 +145,19 @@
     <button data-command="increase-precision" title="Increase precision"></button>
   </div>
 
+  <div class="treb-menu">
+    <button data-icon="layout" title="Rows & columns"></button>
+    <div>
+      <button data-command="insert-row">Insert row</button>
+      <button data-command="insert-column">Insert column</button>
+      <button data-command="delete-row">Delete row</button>
+      <button data-command="delete-column">Delete column</button>
+      <div separator add-remove-sheet></div>
+      <button data-command="insert-sheet" add-remove-sheet>Add sheet</button>
+      <button data-command="delete-sheet" add-remove-sheet>Delete sheet</button>
+    </div>
+  </div>
+
   <div composite chart-menu>
     <button data-command="insert-column-chart" data-target="annotation" title="Insert column chart"></button>
     <div class="treb-menu">

package/treb-embed/src/custom-element/treb-global.ts

@@ -10,7 +10,7 @@ import type { EmbeddedSpreadsheet } from '../embedded-spreadsheet';
 export class TREBGlobal {
 
   /** 
-   * build version 
+   * Package version 
    * 
    * @privateRemarks
    * 
@@ -25,7 +25,15 @@ export class TREBGlobal {
   public version = process.env.BUILD_VERSION || '';
 
   /** 
-   * create a spreadsheet instance
+   * Create a spreadsheet. The `USER_DATA_TYPE` template parameter is the type 
+   * assigned to the `user_data` field of the spreadsheet instance -- it can
+   * help simplify typing if you are storing extra data in spreadsheet
+   * files. 
+   * 
+   * Just ignore this parameter if you don't need it.
+   * 
+   * @typeParam USER_DATA_TYPE - type for the `user_data` field in the 
+   * spreadsheet instance
    */
   public CreateSpreadsheet<USER_DATA_TYPE = unknown>(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet<USER_DATA_TYPE> {
     const container = options.container;

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

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */
@@ -69,7 +69,7 @@ import {
 } from 'treb-base-types';
 
 import { EventSource, ValidateURI } from 'treb-utils';
-import { NumberFormatCache, ValueParser, NumberFormat } from 'treb-format';
+import { NumberFormatCache, ValueParser, NumberFormat, LotusDate, UnlotusDate } from 'treb-format';
 
 
 
@@ -486,13 +486,19 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     this.DocumentChange();
   }
 
-  /** opaque user data (metadata) */
+  /** 
+   * opaque user data (metadata). `USER_DATA_TYPE` is a template
+   * parameter you can set when creating the spreadsheet.
+   */
   public get user_data(): USER_DATA_TYPE|undefined {
     return this.grid.model.user_data;
   }
 
-  /** opaque user data (metadata) */
-  public set user_data(data: USER_DATA_TYPE) {
+  /** 
+   * opaque user data (metadata). `USER_DATA_TYPE` is a template
+   * parameter you can set when creating the spreadsheet.
+   */
+  public set user_data(data: USER_DATA_TYPE|undefined) {
     this.grid.model.user_data = data;
     this.DocumentChange();
   }
@@ -883,6 +889,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
       this.grid.grid_events.Subscribe((event) => {
 
+        // console.info({event});
+
         switch (event.type) {
 
           case 'error':
@@ -986,7 +994,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
           case 'structure':
             {
+              // console.info("S event", event);
+
               const cached_selection = this.last_selection;
+              if (event.conditional_format) {
+                this.calculator.UpdateConditionals();
+                this.ApplyConditionalFormats(this.grid.active_sheet, false);
+              }
+
               if (event.rebuild_required) {
                 this.calculator.Reset();
 
@@ -1030,10 +1045,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       // this.grid.headless = true; // ensure
     }
 
-    // moved up so we can share parser w/ grid
-
-    // this.calculator = this.InitCalculator();
-    // this.calculator = new type();
+    if (options.preload) {
+      options.preload.call(0, this);
+    }
 
     // FIXME: this should yield so we can subscribe to events before the initial load
 
@@ -1413,12 +1427,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       ...options,
     };
 
-    // we need to calculate the formula once, to get an initial state
-    // update: internal
-    // let result = this.Evaluate(this.Unresolve(area, true, false) + ' ' + options.expression, options.options);
-
-    // ... apply ...
-
     this.AddConditionalFormat(format);
     return format;
 
@@ -1446,18 +1454,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       ...options,
     };
 
-    /*
-    // we need to calculate the formula once, to get an initial state
-    let result = this.Evaluate(options.expression, options.options);
-
-    if (Array.isArray(result)) {
-      result = result[0][0];
-    }
-    const applied = !!result;
-    
-    this.AddConditionalFormat({...format, applied });
-    */
-
     this.AddConditionalFormat(format);
 
     return format;
@@ -1471,20 +1467,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    */
   public AddConditionalFormat(format: ConditionalFormat) {
 
-    const sheet = this.model.sheets.Find(format.area.start.sheet_id||0);
-    
-    if (!sheet) {
-      throw new Error('invalid reference in format');
-    }
-
-    sheet.conditional_formats.push(format);
-
-    this.calculator.UpdateConditionals(format, sheet);
-
-    // call update if it's the current sheet
-    this.ApplyConditionalFormats(sheet, sheet === this.grid.active_sheet);
-
-    this.PushUndo();
+    this.grid.AddConditionalFormat(format);
 
     // fluent
     return format;
@@ -1497,40 +1480,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    * @internal
    */
   public RemoveConditionalFormat(format: ConditionalFormat) {
-    const area = format.area;
-    const sheet = area.start.sheet_id ? this.model.sheets.Find(area.start.sheet_id) : this.grid.active_sheet;
-
-    if (!sheet) {
-      throw new Error('invalid reference in format');
-    }
-
-    let count = 0;
-    sheet.conditional_formats = sheet.conditional_formats.filter(test => {
-      if (test === format) {
-        count++;
-        this.calculator.RemoveConditional(test);
-        return false;
-      }
-      return true;
-    });
-
-    if (count) {
-      sheet.FlushConditionalFormats();
-    }
-
-    // we want to call update if it's the current sheet,
-    // but we want a full repaint
-
-    this.ApplyConditionalFormats(sheet, false);
-
-    if (sheet === this.grid.active_sheet) {
-      this.grid.Update(true);
-    }
-
-    if (count) {
-      this.PushUndo();
-    }
-
+    this.grid.RemoveConditionalFormat({ format });
   }
 
   /**
@@ -1549,37 +1499,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       }
       range = ref.area;
     }
-    const area = this.model.ResolveArea(range, this.grid.active_sheet);
-    const sheet = area.start.sheet_id ? this.model.sheets.Find(area.start.sheet_id) : this.grid.active_sheet;
-
-    if (sheet) {
-      let count = 0;
-
-      sheet.conditional_formats = sheet.conditional_formats.filter(test => {
-        const compare = new Area(test.area.start, test.area.end);
-        if (compare.Intersects(area)) {
-          count++;
-          this.calculator.RemoveConditional(test);
-          return false;
-        }
-        return true;
-      });
-
-      if (count) {
-
-        sheet.FlushConditionalFormats();
-
-        this.ApplyConditionalFormats(sheet, false);
-    
-        if (sheet === this.grid.active_sheet) {
-          this.grid.Update(true);
-        }
-
-        this.PushUndo();
-      }
-
-    }
 
+    const area = this.model.ResolveArea(range, this.grid.active_sheet);
+    this.grid.RemoveConditionalFormat({ area });
 
   }
 
@@ -1997,18 +1919,23 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   /** 
    * Create (and return) a Chart object.
-   * 
-   * @privateRemarks
-   * 
-   * This method was created for RAW, no one else should need it. But it's
-   * not really an internal method, because it's used by outside clients.
-   * 
    * @internal
    */
   public CreateChart(): Chart {
+    
     if (this.calculator.RegisterLibrary('treb-charts', ChartFunctions)) {
       this.UpdateAC();
     }
+
+    if (this.options.chart_renderer) {
+      if (typeof this.options.chart_renderer === 'function') {
+        return new Chart(this.options.chart_renderer());
+      }
+      else {
+        return new Chart(this.options.chart_renderer);
+      }
+    }
+
     return new Chart();
   }
 
@@ -3973,6 +3900,23 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     return NumberFormatCache.Get(format).Format(value);
   }
 
+  /**
+   * convert a javascript date (or timestamp) to a spreadsheet date
+   */
+  public SpreadsheetDate(javascript_date: number|Date) {
+    if (javascript_date instanceof Date) {
+      javascript_date = javascript_date.getTime();
+    }
+    return UnlotusDate(javascript_date, true);
+  }
+
+  /**
+   * convert a spreadsheet date to a javascript date
+   */
+  public JavascriptDate(spreadsheet_date: number) {
+    return LotusDate(spreadsheet_date).getTime();
+  }
+
   /**
    * Apply borders to range. 
    * 
@@ -4607,7 +4551,13 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     this.UpdateAnnotations();
 
+    // we don't really need to call UpdateConditionals here unless
+    // something has changed in a previously inactive sheet -- right?
+
     this.calculator.UpdateConditionals();
+
+    // we do need to call apply (I think)
+
     this.ApplyConditionalFormats(event.activate, true);
 
   }
@@ -5036,7 +4986,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         {
 
           const chart = this.CreateChart();
-          // const chart = new Chart();
           chart.Initialize(view.content_node);
 
           //if (this.calculator.RegisterLibrary('treb-charts', ChartFunctions)) {
@@ -5795,15 +5744,25 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   /**
    * handle key down to intercept ctrl+z (undo)
-   *
+   * UPDATE: we're also handling F9 for recalc (optionally)
+   * 
    * FIXME: redo (ctrl+y or ctrl+shift+z)
    */
   protected HandleKeyDown(event: KeyboardEvent): void {
+
+    // can we drop the event.code stuff in 2024? (YES)
+
     if (event.ctrlKey && (event.code === 'KeyZ' || event.key === 'z')) {
       event.stopPropagation();
       event.preventDefault();
       this.Undo();
     }
+    else if (event.key === 'F9' && this.options.recalculate_on_f9) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.Recalculate();
+    }
+
   }
 
 

package/treb-embed/src/language-model.ts

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */

package/treb-embed/src/options.ts

@@ -14,13 +14,19 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */
 
 import type { ICellAddress } from 'treb-base-types';
 import type { TREBDocument } from './types';
+import type { ChartRenderer } from 'treb-charts';
+
+/**
+ * factory type for chart renderer, if you want instances (pass a constructor)
+ */
+export type ChartRendererFactory = () => ChartRenderer;
 
 /**
  * options for exporting CSV/TSV
@@ -275,6 +281,36 @@ export interface EmbeddedSpreadsheetOptions {
    */
   revert_indicator?: boolean;
 
+  /**
+   * @internal
+   * overload the chart renderer with your own type (or a type factory method).
+   * use a factory if you are going to persist state in the renderer, otherwise
+   * you can just use a single instance.
+   */
+  chart_renderer?: ChartRenderer|ChartRendererFactory;
+
+  /**
+   * @internal
+   * 
+   * optional function to run before loading data. this is useful for example
+   * if you want to load some custom functions before a document is loaded
+   * from local storage. otherwise you'll get #NAME errors when an unknown
+   * function is loaded (I suppose you could recalc, but this is better).
+   * 
+   * @privateRemarks
+   * I'd prefer to pass the instance as a parameter, but I don't want a 
+   * circular reference here. maybe that's not an issue? for the time being
+   * we'll treat it as opaque.
+   */
+  preload?: (instance: unknown) => void;
+
+  /**
+   * handle the F9 key and recalculate the spreadsheet. for compatibility.
+   * we're leaving this option to default `false` for now, but that may 
+   * change in the future. key modifiers have no effect.
+   */
+  recalculate_on_f9?: boolean;
+
 }
 
 /**

package/treb-embed/src/progress-dialog.ts

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License along 
  * with TREB. If not, see <https://www.gnu.org/licenses/>. 
  *
- * Copyright 2022-2023 trebco, llc. 
+ * Copyright 2022-2024 trebco, llc. 
  * info@treb.app
  * 
  */