@trebco/treb 32.4.1 → 32.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "32.4.1",
+  "version": "32.6.4",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -16,7 +16,7 @@
     "@types/uzip": "^0.20201231.0",
     "base64-js": "^1.5.1",
     "cssnano": "^7.0.4",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.25.0",
     "eslint": "^9.9.1",
     "fast-xml-parser": "^4.0.7",
     "html-minifier-terser": "^7.2.0",

package/treb-base-types/src/import.ts

@@ -27,18 +27,22 @@ import type { Table } from './table';
 import type { DataValidation, AnnotationType, ConditionalFormat } from 'treb-data-model';
 
 export interface CellParseResult {
-  row: number,
-  column: number,
+  row: number;
+  column: number;
   type: SerializedValueType; // ValueType,
-  value: number|string|undefined|boolean,
-  calculated?: number|string|undefined|boolean,
+  value: number|string|undefined|boolean;
+  calculated?: number|string|undefined|boolean;
   calculated_type?: SerializedValueType; // ValueType,
-  style_ref?: number,
-  hyperlink?: string,
-  validation?: DataValidation,
-  merge_area?: IArea,
-  area?: IArea,
-  table?: Table,
+  style_ref?: number;
+  hyperlink?: string;
+  validation?: DataValidation;
+  merge_area?: IArea;
+  area?: IArea;
+
+  /** dynamic arrays */
+  spill?: IArea;
+  
+  table?: Table;
 }
 
 export interface AnchoredAnnotation {

package/treb-calculator/src/calculator.ts

@@ -1221,11 +1221,16 @@ export class Calculator extends Graph {
   public AttachSpillData(area: Area, cells?: Cells) {
 
     if (!cells) {
+
+      // can we assume active sheet here? actually I guess not, we'll 
+      // need to set that... 
+
       const sheet = area.start.sheet_id ? this.model.sheets.Find(area.start.sheet_id) : undefined;
       cells = sheet?.cells;
     }
 
     if (!cells) {
+      console.info({area, cells});
       throw new Error('invalid sheet ID in attach spill data');
     }
 

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

@@ -207,6 +207,7 @@ export interface HistogramData extends ColumnDataBaseType {
 export interface LineBaseData extends ChartDataBaseType {
   series?: NumberOrUndefinedArray[];
   series2?: SeriesType[];
+  stacked_series?: SeriesType[];
   scale: RangeScale;
   x_scale?: RangeScale;
   titles?: string[];
@@ -262,6 +263,7 @@ export interface BarData extends LineBaseData {
   type: 'bar';
   round?: boolean;
   space?: number;
+  stacked?: boolean;
 }
 
 export interface DonutDataBaseType extends ChartDataBaseType {

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

@@ -1001,8 +1001,11 @@ export const CreateColumnChart = (
 
   const [data, labels, args_title, args_options] = args;
       
-  const series: SeriesType[] = TransformSeriesData(data);
-  const common = CommonData(series);
+  const options = args_options?.toString() || undefined;
+  const stacked = /stacked/i.test(options || '');
+
+  let series: SeriesType[] = TransformSeriesData(data);
+  let common = CommonData(series);
 
   let category_labels: string[] | undefined;
 
@@ -1041,15 +1044,50 @@ export const CreateColumnChart = (
 
   }
 
+  let stacked_series: SeriesType[]|undefined = undefined;
+  const legend = common.legend; // in case we munge it
+
+  if (stacked) {
+    stacked_series = series;
+
+    const map: Map<number, number> = new Map();
+    // const label_map: Map<number, string> = new Map();
+
+    for (const entry of series) {
+      for (const [index, key] of entry.x.data.entries()) {
+        if (key !== undefined) {
+          const value = entry.y.data[index] || 0;
+          map.set(key, value + (map.get(key) || 0));
+        }
+      }
+    }
+
+    const x_data = Array.from(map.keys()).sort((a, b) => a - b);
+    const y_data = x_data.map(key => map.get(key) || 0);
+
+    // console.info({stacked_series, map, x_data, y_data});
+
+    series = [{
+      x: { data: x_data, format: stacked_series[0]?.x?.format },
+      y: { data: y_data, format: stacked_series[0]?.y?.format },
+    }];
+
+    series[0].x.range = ArrayMinMax(x_data);
+    series[0].y.range = ArrayMinMax(y_data);
+
+    common = CommonData(series, Math.min(0, ...y_data));
+
+  }
+
   const title = args_title?.toString() || undefined;
-  const options = args_options?.toString() || undefined;
 
   const chart_data = {
     type,
-    legend: common.legend,
+    legend, // legend: common.legend,
     // legend_position: LegendPosition.right,
     legend_style: LegendStyle.marker,
     series2: series,
+    stacked_series,
     scale: common.y.scale,
     title,
     y_labels: type === 'bar' ? category_labels : common.y.labels, // swapped
@@ -1057,6 +1095,9 @@ export const CreateColumnChart = (
   };
 
   if (options) {
+    
+    (chart_data as BarData).stacked = stacked;
+
     (chart_data as BarData).round = /round/i.test(options);
     (chart_data as ChartDataBaseType).data_labels = /labels/i.test(options);
 

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

@@ -599,23 +599,33 @@ export class DefaultChartRenderer implements ChartRendererType {
             corners = [half_width, half_width, 0, 0];
           }
 
-          for (let s = 0; s < series_count; s++) {
-            const series = chart_data.series2[s];
-            const color_index = typeof series.index === 'number' ? series.index : s + 1;
+          if (chart_data.stacked_series) {
 
-            for (let i = 0; i < series.y.data.length; i++ ){
-              const value = series.y.data[i];
-              // const format = NumberFormatCache.Get(series.y.format || '0.00');
+            // step by group (stacked series)
+            for (let s = 0; s < chart_data.stacked_series[0].y.data.length; s++ ){
 
-              if (typeof value === 'number') {
+              const x = (area.left + s * column_width + space) ; // + s * width;
+              let y = 0;
+
+              // now check each series, grab s-th value
+              for (let t = 0; t < chart_data.stacked_series.length; t++) {
+
+                const series = chart_data.stacked_series[t];
+                const color_index = typeof series.index === 'number' ? series.index : t + 1;
 
-                // const x = Math.round(area.left + i * column_width + space) + s * width;
-                const x = (area.left + i * column_width + space) + s * width;
-                
                 let height = 0;
-                let y = 0;
                 // let negative = false;
 
+                const value = (series.y.data[s] || 0);
+
+                if (t === 0) {
+                  y = Math.min(chart_data.scale.min || 0, value);
+                }
+
+                height = Util.ApplyScale(value, area.height, chart_data.scale);
+                const base = area.bottom - height - Util.ApplyScale(y, area.height, chart_data.scale);
+
+                /*
                 if (zero) {
                   if (value > 0) {
                     height = Util.ApplyScale(value + chart_data.scale.min, area.height, chart_data.scale);
@@ -631,27 +641,77 @@ export class DefaultChartRenderer implements ChartRendererType {
                   height = Util.ApplyScale(value, area.height, chart_data.scale);
                   y = area.bottom - height;
                 }
+                */
 
-                // const bar_title = chart_data.titles ? chart_data.titles[i] : undefined;
-                const bar_title = undefined;
+                let bar_title = undefined;
+                let label = undefined;
+                let label_point = undefined;
 
-                if (height) {
+                this.renderer.RenderRectangle(new Area(
+                  x, base, x + width, base + height,
+                ), corners, ['chart-column', `series-${color_index}`], bar_title || undefined, label, label_point);
 
-                  const label = (chart_data.data_labels && !!series.y.labels) ? series.y.labels[i] : '';
-                  const label_point = {
-                    x: Math.round(x + width / 2),
-                    y: Math.round(y - 10),
-                  };
+                y += value;
 
-                  this.renderer.RenderRectangle(new Area(
-                    x, y, x + width, y + height,
-                  ), corners, ['chart-column', `series-${color_index}`], bar_title || undefined, label, label_point);
-                }
               }
+
+
             }
+          }
+          else {
+            for (let s = 0; s < series_count; s++) {
+              const series = chart_data.series2[s];
+              const color_index = typeof series.index === 'number' ? series.index : s + 1;
+
+              for (let i = 0; i < series.y.data.length; i++ ){
+                const value = series.y.data[i];
+
+                if (typeof value === 'number') {
+
+                  // const x = Math.round(area.left + i * column_width + space) + s * width;
+                  const x = (area.left + i * column_width + space) + s * width;
+                  
+                  let height = 0;
+                  let y = 0;
+                  // let negative = false;
+
+                  if (zero) {
+                    if (value > 0) {
+                      height = Util.ApplyScale(value + chart_data.scale.min, area.height, chart_data.scale);
+                      y = area.bottom - height - zero;
+                    }
+                    else {
+                      height = Util.ApplyScale(chart_data.scale.min - value, area.height, chart_data.scale);
+                      y = area.bottom - zero; // // area.bottom - height - zero;
+                      // negative = true;
+                    }
+                  }
+                  else {
+                    height = Util.ApplyScale(value, area.height, chart_data.scale);
+                    y = area.bottom - height;
+                  }
+
+                  // const bar_title = chart_data.titles ? chart_data.titles[i] : undefined;
+                  const bar_title = undefined;
+
+                  if (height) {
 
+                    const label = (chart_data.data_labels && !!series.y.labels) ? series.y.labels[i] : '';
+                    const label_point = {
+                      x: Math.round(x + width / 2),
+                      y: Math.round(y - 10),
+                    };
+
+                    this.renderer.RenderRectangle(new Area(
+                      x, y, x + width, y + height,
+                    ), corners, ['chart-column', `series-${color_index}`], bar_title || undefined, label, label_point);
+                  }
+                }
+              }
+
+            }
           }
-  
+
         }
 
       }

package/treb-data-model/src/sheet.ts

@@ -3011,6 +3011,15 @@ export class Sheet {
       this.name = data.name || ''; // wtf is this?
     }
 
+    // patching from import
+    for (const cell of this.cells.Iterate()) {
+      if (cell.spill) {
+        if (!cell.spill.start.sheet_id) {
+          cell.spill.SetSheetID(this.id);
+        }
+      }
+    }
+
     if (data.tab_color) {
       this.tab_color = data.tab_color;
     }

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

@@ -1532,9 +1532,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /**
-   * @internal
+   * 
    */
-  public ConditionalFormatDataBar(range: RangeReference|undefined, options?: ConditionalFormatDataBarOptions): ConditionalFormat {
+  public ConditionalFormatDataBars(range: RangeReference|undefined, options?: ConditionalFormatDataBarOptions): ConditionalFormat {
 
     const area = this.RangeOrSelection(range, 'invalid range (no selection)');
 

package/treb-embed/style/tab-bar.scss

@@ -68,6 +68,7 @@
     & .treb-spreadsheet-tabs>li {
       display: inline-block;
       position: relative;
+      margin: 0;
     }
 
     & .treb-spreadsheet-tabs>li,

package/treb-export/src/{drawing2/drawing2.ts → drawing/drawing.ts}

@@ -21,8 +21,8 @@
 
 import type { ImageOptions } from './embedded-image';
 import { EmbeddedImage } from './embedded-image';
-import type { ChartOptions} from './chart2';
-import { Chart} from './chart2';
+import type { ChartOptions} from './chart';
+import { Chart} from './chart';
 import type { RelationshipMap} from '../relationship';
 import { AddRel } from '../relationship';
 import type { DOMContent } from '../xml-utils';

package/treb-export/src/export.ts

@@ -44,10 +44,10 @@ import { Area, Cells, ValueType, Style, IsHTMLColor, IsThemeColor, ThemeColorInd
 import type { XmlBuilderOptions} from 'fast-xml-parser';
 import { XMLParser } from 'fast-xml-parser';
 
-import { SharedStrings } from './shared-strings2';
-import type { XlColor, BorderEdge } from './workbook-style2';
-import { StyleCache } from './workbook-style2';
-import { Theme } from './workbook-theme2';
+import { SharedStrings } from './shared-strings';
+import type { XlColor, BorderEdge } from './workbook-style';
+import { StyleCache } from './workbook-style';
+import { Theme } from './workbook-theme';
 
 import type { RelationshipMap} from './relationship';
 import { AddRel } from './relationship';
@@ -57,12 +57,12 @@ import type { UnitAddress, UnitRange, ExpressionUnit} from 'treb-parser';
 import { Parser } from 'treb-parser';
 
 // FIXME: move
-import type { ChartOptions } from './drawing2/chart2';
-import { Chart } from './drawing2/chart2';
-import type { ImageOptions } from './drawing2/embedded-image';
-import type { TwoCellAnchor } from './drawing2/drawing2';
-import { Drawing } from './drawing2/drawing2';
-import { ConditionalFormatOperators, type TableDescription, type TableFooterType } from './workbook2';
+import type { ChartOptions } from './drawing/chart';
+import { Chart } from './drawing/chart';
+import type { ImageOptions } from './drawing/embedded-image';
+import type { TwoCellAnchor } from './drawing/drawing';
+import { Drawing } from './drawing/drawing';
+import { ConditionalFormatOperators, type TableDescription, type TableFooterType } from './workbook';
 import type { AnnotationData } from 'treb-data-model/src/annotation';
 import { ZipWrapper } from './zip-wrapper';
 
@@ -179,7 +179,7 @@ export class Exporter {
     }
 
     const parsed = Base64JS.toByteArray(template);
-    this.zip = new ZipWrapper(parsed);
+    this.zip = new ZipWrapper(parsed.buffer as ArrayBuffer);
 
   }