@trebco/treb 30.15.0 → 30.16.0

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v30.15. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v30.16. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map

package/package.json

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

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

@@ -48,7 +48,7 @@ export type ChartFunction
   | 'Box.Plot'
   ;
 
-type SupportFunction = 'Group'|'Series';
+type SupportFunction = 'Group'|'Series' ; // |'Scatter.Series';
 
 /**
  * chart functions for registration
@@ -87,20 +87,57 @@ export const ChartFunctions: Record<ChartFunction|SupportFunction, CompositeFunc
       { name: 'X', metadata: true, },
       { name: 'Y', metadata: true, },
       { name: 'Z', metadata: true, },
-      { name: 'index', },
-      { name: 'subtype', },
+      { name: 'Index', },
+      { name: 'Subtype', },
       { name: 'Labels', description: 'Labels for bubble charts only (atm)' },
+      { name: 'Axis', description: `Series axis (scatter plot only)` },
     ],
     fn: (...args: unknown[]) => {
       return {
         type: ValueType.object,
-        value: args,
+        value: {
+          label: args[0],
+          x: args[1],
+          y: args[2],
+          z: args[3],
+          index: args[4],
+          subtype: args[5],
+          data_labels: args[6],
+          axis: args[7],
+        },
         key: 'series',
       };
     },
     category: ['chart functions'],
   },
 
+  /*
+  'Scatter.Series': {
+    arguments: [
+      { name: 'Label' }, // , metadata: true, },
+      { name: 'X', metadata: true, },
+      { name: 'Y', metadata: true, },
+      { name: 'index', },
+      { name: 'subtype', },
+      { name: 'axis', },
+    ],
+    fn: (...args: unknown[]) => {
+      return {
+        type: ValueType.object,
+        value: {
+          label: args[0],
+          x: args[1],
+          y: args[2],
+          index: args[3],
+          subtype: args[4],
+          axis: args[5],
+        },
+        key: 'series',
+      };
+    },
+  },
+  */
+
   'Bar.Chart': {
     arguments: [
       { name: 'Data', metadata: true, },

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

@@ -33,6 +33,18 @@ export interface ReferenceMetadata {
 
 export interface ReferenceSeries extends ExtendedUnion {
   key: 'series',
+  value: {
+    label?: string;
+    x?: UnionValue;
+    y?: UnionValue;
+    z?: UnionValue;
+    index?: number;
+    subtype?: string;
+    data_labels?: string[];
+    axis?: number;
+  }
+
+  /*
   value: [
     CellValue?, // { name: 'Label' }, // , metadata: true, },
     UnionValue?, // { name: 'X', metadata: true, },
@@ -42,6 +54,8 @@ export interface ReferenceSeries extends ExtendedUnion {
     CellValue?, // { name: 'subtype', },
     CellValue?, // { name: 'Labels', description: 'Labels for bubble charts only (atm)' },
   ];
+  */
+
 }
 
 export const IsMetadata = (value?: unknown): value is ExtendedUnion & { value: ReferenceMetadata } => {
@@ -54,7 +68,8 @@ export const IsMetadata = (value?: unknown): value is ExtendedUnion & { value: R
 export const IsSeries = (value?: unknown): value is ReferenceSeries => {
   return (!!value && (typeof value === 'object')
     && (value as ReferenceSeries).key === 'series'
-    && Array.isArray((value as ReferenceSeries).value));
+    // && Array.isArray((value as ReferenceSeries).value));
+    && (typeof (value as ReferenceSeries).value === 'object'));
 };
 
 export const IsArrayUnion = (value?: unknown): value is ArrayUnion => {
@@ -140,9 +155,11 @@ export interface ScatterData2 extends ChartDataBaseType {
 
   x_scale: RangeScale;
   y_scale: RangeScale;
+  y2_scale?: RangeScale;
 
   x_labels?: string[];
   y_labels?: string[];
+  y2_labels?: string[];
 
   style?: 'plot'|'line'|'area';
 
@@ -311,8 +328,10 @@ export interface SeriesType {
   subtype?: string;
   x: SubSeries;
   y: SubSeries;
+  y2?: SubSeries;
   z?: SubSeries;
   index?: number;
   labels?: string[];
+  axis?: number;
 }
 

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

@@ -61,8 +61,10 @@ export const ArrayMinMax = (data: number[]) => {
 
 export const ReadSeries = (data: ReferenceSeries['value']): SeriesType => {
 
-  const [label, x, y, z, index, subtype, data_labels] = data;
+  // const label, x, y, z, index, subtype, data_labels] = data;
 
+  const { label, x, y, z, index, subtype, data_labels, axis } = data;
+ 
   // series type is (now)
   //
   // [0] label, string
@@ -79,6 +81,10 @@ export const ReadSeries = (data: ReferenceSeries['value']): SeriesType => {
     y: { data: [] },
   };
 
+  if (typeof axis === 'number') {
+    series.axis = axis;
+  }
+
   if (typeof index === 'number') {
     series.index = index;
   }
@@ -431,10 +437,22 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
 
   let x_format = '';
   let y_format = '';
+  let y2_format = '';
 
   for (const entry of series) {
-    if (entry.y.format && !y_format) { y_format = entry.y.format; }
-    if (entry.x.format && !x_format) { x_format = entry.x.format; }
+    if (entry.axis) {
+      if (entry.y.format && !y2_format) { 
+        y2_format = entry.y.format; 
+      }
+    }
+    else {
+      if (entry.y.format && !y_format) { 
+        y_format = entry.y.format; 
+      }
+    }
+    if (entry.x.format && !x_format) { 
+      x_format = entry.x.format; 
+    }
   }
 
   let legend: Array<{ label: string, index?: number }> | undefined; // string[]|undefined;
@@ -449,13 +467,25 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
   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));
+  const x1 = x.filter(test => !test.axis);
+  const x2 = x.filter(test => test.axis);
+  
+  let y_min = Math.min.apply(0, x1.map(test => test.y.range?.min || 0));
+  let y_max = Math.max.apply(0, x1.map(test => test.y.range?.max || 0));
+
+  let y2_min = -1;
+  let y2_max = -1;
+
+  if (x2.length) {
+    y2_min = Math.min.apply(0, x2.map(test => test.y.range?.min || 0));
+    y2_max = Math.max.apply(0, x2.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
 
+  // this can't be used with axis (atm)
+
   for (const subseries of series) {
     if (subseries.z) {
       for (const [index, z] of subseries.z.data.entries()) {
@@ -496,9 +526,29 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
 
   const x_scale = Util.Scale(x_min, x_max, 7);
   const y_scale = Util.Scale(y_min, y_max, 7);
+  const y2_scale = Util.Scale(y2_min, y2_max, 7);
+
+  if (y2_min !== y2_max && y_scale && y2_scale) {
+    if (y_scale.count !== y2_scale.count) {
+      const max = Math.max(y_scale.count, y2_scale.count);
+      const target = y_scale.count < max ? y_scale : y2_scale;
+      for (let i = target.count; i < max; i += 2) {
+        // add high
+        target.max += target.step;
+        target.count++;
+
+        if (target.count < max) {
+          // add low
+          target.min -= target.step;
+          target.count++;
+        }
+      }
+    }
+  }
 
   let x_labels: string[] | undefined;
   let y_labels: string[] | undefined;
+  let y2_labels: string[] | undefined;
 
   if (x_format) {
     x_labels = [];
@@ -509,10 +559,13 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
   }
 
   if (!y_format && auto_number_format) {
-    // y_format = default_number_format;
     y_format = AutoFormat(y_scale);
   }
 
+  if (!y2_format && auto_number_format) {
+    y2_format = AutoFormat(y2_scale);
+  }
+
   if (y_format) {
     y_labels = [];
     const format = NumberFormatCache.Get(y_format);
@@ -520,8 +573,20 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
       y_labels.push(format.Format(y_scale.min + i * y_scale.step));
     }
   }
+  if (y2_format) {
+    y2_labels = [];
+    const format = NumberFormatCache.Get(y2_format);
+    for (let i = 0; i <= y2_scale.count; i++) {
+      y2_labels.push(format.Format(y2_scale.min + i * y2_scale.step));
+    }
+  }
 
-  return {
+  const result: {
+    legend?: { label: string, index?: number }[],
+    x: { format: string, scale: RangeScale, labels?: string[] },
+    y: { format: string, scale: RangeScale, labels?: string[] },
+    y2?: { format: string, scale: RangeScale, labels?: string[] },
+  } = {
     x: {
       format: x_format,
       scale: x_scale,
@@ -535,6 +600,16 @@ export const CommonData = (series: SeriesType[], y_floor?: number, y_ceiling?: n
     legend,
   };
 
+  if (y2_min !== y2_max) {
+    result.y2 = {
+      format: y2_format,
+      scale: y2_scale,
+      labels: y2_labels,
+    };
+  }
+
+  return result;
+
 };
 
 const ApplyLabels = (series_list: SeriesType[], pattern: string, category_labels?: string[]): void => {
@@ -859,7 +934,6 @@ export const CreateScatterChart = (args: [UnionValue, string, string], style: 'p
   // transform).
 
   const series: SeriesType[] = TransformSeriesData(args[0]);
-
   const common = CommonData(series);
 
   const title = args[1]?.toString() || undefined;
@@ -878,6 +952,9 @@ export const CreateScatterChart = (args: [UnionValue, string, string], style: 'p
     y_scale: common.y.scale,
     y_labels: common.y.labels,
 
+    y2_scale: common.y2?.scale,
+    y2_labels: common.y2?.labels,
+
     lines: style === 'line', // true,
     points: style === 'plot',
 

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

@@ -175,6 +175,44 @@ export class DefaultChartRenderer implements ChartRendererType {
 
       }
 
+      if (chart_data.type === 'scatter2' && chart_data.y2_labels && chart_data.y2_labels.length && chart_data.y2_scale) {
+
+        const y2_labels: Array<{label: string; metrics: Metrics}> = [];
+        let max_width = 0;
+        let max_height = 0;
+
+        const scale = chart_data.y2_scale;
+        
+        const count = scale.count + 1;
+
+        for (let i = 0; i < count; i++ ){
+          const metrics = this.renderer.MeasureText(chart_data.y2_labels[i], ['axis-label', 'y-axis-label']);
+          y2_labels.push({ label: chart_data.y2_labels[i], metrics });
+          max_width = Math.max(max_width, metrics.width);
+          max_height = Math.max(max_height, metrics.height);
+        }
+
+        /*
+        area.bottom = Math.round(area.bottom - max_height / 2);
+        area.top = Math.round(area.top + max_height / 2);
+
+        if (x_metrics.length) {
+          area.bottom -= (max_x_height + chart_margin.bottom);
+        }
+        if (x_metrics2.length) {
+          area.bottom -= (max_x_height2 + chart_margin.bottom);
+        }
+        if (extra_padding) {
+          area.bottom -= extra_padding;
+        }
+        */
+
+        this.renderer.RenderYAxis(area, area.right - max_width, y2_labels, ['axis-label', 'y-axis-label'], 'left');
+        area.right -= (max_width + chart_margin.left);
+        // area.left += (max_width + chart_margin.left);
+
+      }
+
       // now render x axis
 
       if (x_metrics.length && chart_data.x_labels?.length) {
@@ -318,11 +356,12 @@ export class DefaultChartRenderer implements ChartRendererType {
           }
 
           const index = typeof series.index === 'number' ? series.index : i + 1;
+
           this.renderer.RenderScatterSeries(area, 
             series.x.data, 
             series.y.data, 
             chart_data.x_scale, 
-            chart_data.y_scale, 
+            (series.axis && chart_data.y2_scale) ? chart_data.y2_scale : chart_data.y_scale, 
               lines,
               points,
               !!chart_data.filled,

package/treb-charts/src/renderer.ts

@@ -577,11 +577,11 @@ export class ChartRenderer {
   /**
    * render y axis labels; skips over labels to prevent overlap
    */
-  public RenderYAxis(area: Area, left: number,
+  public RenderYAxis(area: Area, x: number,
     labels: Array<{
       label: string;
       metrics: Metrics;
-    }>, classes?: string | string[]) {
+    }>, classes?: string | string[], align:'left'|'right' = 'right') {
 
     const count = labels.length;
     if (!count) return;
@@ -612,7 +612,7 @@ export class ChartRenderer {
     for (let i = 0; i < count; i += increment) {
       const label = labels[i];
       const y = Math.round(area.bottom - step * i + label.metrics.height / 4);
-      this.RenderText(this.axis_group, label.label, 'right', { x: left, y }, classes);
+      this.RenderText(this.axis_group, label.label, align, { x, y }, classes);
     }
 
   }