@trebco/treb 28.7.0 → 28.10.5

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);
   }
@@ -364,6 +435,121 @@ 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) {
+      return ArrayToSeries(arg).y;
+    }
+    return undefined;
+  });
+
+  let c: string[]|undefined = undefined;
+  if (Array.isArray(args[3])) {
+    c = Util.Flatten(args[3]).map(value => (value||'').toString());
+  }
+ 
+  const title = args[4]?.toString() || undefined;
+
+  // FIXME: need to pad out the axes by the values at the edges,
+  // so the whole circle is included in the chart area. 
+
+  const [x_scale, y_scale] = [x, y].map(subseries => {
+
+    let series_min = 0;
+    let series_max = 1;
+    let first = false;
+
+    if (subseries?.data) {
+
+      for (const [index, value] of subseries.data.entries()) {
+        if (typeof value === 'number') {
+
+          if (!first) {
+            first = true;
+            series_min = value;
+            series_max = value;
+          }
+
+          const size = (z?.data?.[index]) || 0;
+          series_min = Math.min(series_min, value - size / 2);
+          series_max = Math.max(series_max, value + size / 2);
+        }      
+      }
+    }
+
+    return Util.Scale(series_min, series_max, 7);
+
+  });
+
+  let x_labels: string[] | undefined;
+  let y_labels: string[] | undefined;
+
+  if (x?.format) {
+    x_labels = [];
+    const format = NumberFormatCache.Get(x.format);
+    for (let i = 0; i <= x_scale.count; i++) {
+      x_labels.push(format.Format(x_scale.min + i * x_scale.step));
+    }
+  }
+
+  if (y?.format) {
+    y_labels = [];
+    const format = NumberFormatCache.Get(y.format);
+    for (let i = 0; i <= y_scale.count; i++) {
+      y_labels.push(format.Format(y_scale.min + i * y_scale.step));
+    }
+  }
+
+  return {
+
+    type: 'bubble',
+
+    title,
+
+    x,
+    y,
+    z,
+    c,
+    
+    x_scale,
+    y_scale,
+
+    x_labels, 
+    y_labels,
+
+  };
+
+  */
+
+};
 
 /**
  * args is [data, title, options]

package/treb-charts/src/chart.ts

@@ -64,6 +64,10 @@ export class Chart {
         this.chart_data = ChartUtils.CreateScatterChart(args, 'line');
         break;
   
+      case 'bubble.chart':
+        this.chart_data = ChartUtils.CreateBubbleChart(args);
+        break;
+
       default:
         this.Clear();
         break;

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

@@ -95,6 +95,7 @@ export class DefaultChartRenderer implements ChartRendererType {
         || chart_data.type === 'histogram2'
         || chart_data.type === 'bar'
         || chart_data.type === 'scatter2'
+        || chart_data.type === 'bubble'
         ) {
 
       // we need to measure first, then lay out the other axis, then we
@@ -122,7 +123,7 @@ export class DefaultChartRenderer implements ChartRendererType {
         let max_width = 0;
         let max_height = 0;
 
-        const scale = (chart_data.type === 'scatter2') ? chart_data.y_scale : chart_data.scale;
+        const scale = (chart_data.type === 'scatter2' || chart_data.type === 'bubble') ? chart_data.y_scale : chart_data.scale;
         
         const count = (chart_data.type === 'bar') ? 
           chart_data.y_labels.length :
@@ -163,6 +164,7 @@ export class DefaultChartRenderer implements ChartRendererType {
           chart_data.type !== 'area' && 
           chart_data.type !== 'bar' && 
           chart_data.type !== 'scatter2' && 
+          chart_data.type !== 'bubble' && 
           chart_data.type !== 'histogram2' 
           );
 
@@ -199,6 +201,20 @@ export class DefaultChartRenderer implements ChartRendererType {
       this.renderer.RenderPoints(area, chart_data.x, chart_data.y, 'mc mc-correlation series-1');
       break;
 
+    case 'bubble':
+
+      this.renderer.RenderGrid(area, 
+        chart_data.y_scale.count, 
+        chart_data.x_scale.count + 1, // (sigh)
+        'chart-grid');
+
+      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;
+
     case 'scatter2':
 
       this.renderer.RenderGrid(area, 

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,6 +1201,171 @@ export class ChartRenderer {
 
   }
 
+  public RenderBubbleSeries(
+        area: Area,
+        series: SeriesType,
+        x_scale: RangeScale,
+        y_scale: RangeScale,
+        classes?: string | string[]): void {
+
+    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} | undefined> = [];
+    const labels: Array<{
+      x: number,
+      y: number,
+      text: string,
+      offset: number,
+    }> = [];
+
+    const d: string[] = [];
+    const areas: string[] = [];
+
+    const group = SVGNode('g', {class: classes});
+
+    // 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;
+
+    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`,
+        }));
+      }
+    }
+
+    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`;
+
+        }
+      }
+    }
+
+
+  }
+
   public RenderScatterSeries(area: Area,
     x: Array<number | undefined>,
     y: Array<number | undefined>,

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 */
@@ -161,6 +168,38 @@
     }
   }
 
+  .bubble-chart {
+
+    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) */
   .scatter-plot {
 

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">