@trebco/treb 23.6.5 → 25.0.0-rc2

package/treb-charts/src/util.ts

@@ -0,0 +1,122 @@
+/*
+ * 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
+ * 
+ */
+
+import { RangeScale, Scale } from 'treb-utils';
+
+/* * calculated human-friendly scale for rendering axes * /
+export interface RangeScale {
+  scale: number;
+  step: number;
+  count: number;
+  min: number;
+  max: number;
+}
+*/
+
+export class Util {
+
+  /**
+   * given a passed range, find the best scale range. count is just a
+   * suggestion -- we try to get as close as possible.
+   */
+  public static Scale(min: number, max: number, count = 6.5): RangeScale {
+
+    /*
+    const range = max - min;
+    const log10 = // Math.log10(range);
+      Math.log(range) / Math.log(10); // just avoid the problem
+
+    const scale = Math.floor(Math.abs(log10)) * (log10 < 0 ? -1 : 1) - 1;
+    const steps = [.1, .25, .5, 1, 2.5, 5, 10, 25, 100];
+
+    let step = -1;
+    let delta = 0;
+
+    for (const x of steps) {
+      const test_step = x * Math.pow(10, scale);
+      const test_min = Math.floor(min / test_step) * test_step;
+      const test_max = Math.ceil(max / test_step) * test_step;
+      const test_count = (test_max - test_min) / test_step;
+      const test_delta = Math.abs(test_count - count);
+
+      if (step < 0 || test_delta < delta){
+        delta = test_delta;
+        step = test_step;
+      }
+      else if (step >= 0 && test_delta > delta) break;
+    }
+
+    min = Math.floor(min / step) * step;
+    max = Math.ceil(max / step) * step;
+    count = Math.round((max - min) / step); // accounts for fp errors
+
+    return { scale, step, count, min, max };
+    */
+    return Scale(min, max, count);
+    
+  }
+
+  public static Range(data: Array<number|undefined>) {
+
+    let min: number|undefined;
+    let max: number|undefined;
+
+    for (const value of data) {
+      if (typeof value === 'undefined') { continue; }
+      if (typeof min === 'undefined' || min > value) { min = value; }
+      if (typeof max === 'undefined' || max < value) { max = value; }
+    }
+
+    const range = (typeof min === 'undefined' || typeof max === 'undefined') ? 0 : max - min;
+
+    return { min, max, range };
+  }
+
+  public static ApplyScale(value: number, range: number, scale: RangeScale) {
+    return range * (value - scale.min) / (scale.max - scale.min);
+  }
+
+  /**
+   * flatten. we support holes in data, which means undefined values
+   * in arrays, but don't push an empty value at the top level (if
+   * that makes sense).
+   *
+   * @param args
+   */
+  public static Flatten(args: any) {
+    let flat: any[] = [];
+    if (Array.isArray(args)) {
+      for (const element of args) {
+        if (Array.isArray(element)) {
+          flat = flat.concat(this.Flatten(element));
+        }
+        else {
+          flat.push(element);
+        }
+      }
+    }
+    else if (typeof args !== 'undefined') {
+      flat.push(args);
+    }
+    return flat;
+  }
+
+}

package/treb-charts/style/charts.scss

@@ -0,0 +1,221 @@
+/*
+ * 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
+ * 
+ */
+
+/**
+ * rebuilding, try to keep it sane
+ *
+ * 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 
+ * implemented differently, so this will probably need to change.
+ *
+ * originally this file used sass so we used some sass library functions
+ * to do the same thing. all we are doing is (1) set alpha on a color and
+ * (2) darken a color.
+ *
+ * UPDATE to support scaling: we won't explicitly set font size (or family).
+ * those should be set in containing nodes, possibly from theme or style.
+ * we will base our scale 100 at font size 10pt, and scale from there.
+ *
+ * UPDATE: the color-mod function is no longer used, not sure where it went
+ * UPDATE: back to sass, but still using this file (compiles fine)
+ */
+
+
+/* container style */
+.treb-chart {
+
+  /** 
+   * default theme. the way we do this now is assign color from the theme, 
+   * then optionally set fill/stroke via currentColor. that reduces the number
+   * of times we have to define the same colors.
+   */
+
+  background: var(--treb-chart-background, #fff);
+
+  .series-1  { color: var(--treb-chart-color-series-1,  #80B1D3); }
+  .series-2  { color: var(--treb-chart-color-series-2,  #8DD3C7); }
+  .series-3  { color: var(--treb-chart-color-series-3,  #BEBADA); }
+  .series-4  { color: var(--treb-chart-color-series-4,  #FB8072); }
+  .series-5  { color: var(--treb-chart-color-series-5,  #FDB462); }
+  .series-6  { color: var(--treb-chart-color-series-6,  #B3DE69); }
+  .series-7  { color: var(--treb-chart-color-series-7,  #FCCDE5); }
+  .series-8  { color: var(--treb-chart-color-series-8,  #D9D9D9); }
+  .series-9  { color: var(--treb-chart-color-series-9,  #BC80BD); }
+  .series-10 { color: var(--treb-chart-color-series-10, #CCEBC5); }
+  .series-11 { color: var(--treb-chart-color-series-11, #FFED6F); }
+  .series-12 { color: var(--treb-chart-color-series-12, #FFFFB3); }
+
+  /* chart title, at top or bottom */
+  .chart-title {
+    font-size: 1.4em;
+  }
+
+  /* axis labels */
+  .axis-group {
+    font-size: .9em;
+  }
+
+  /* default text color */
+  text {
+    fill: var(--treb-chart-text-color, #000);
+    stroke: none;
+  }
+
+  /* legend uses matching series colors */
+  .legend {
+    font-size: 1.05em; // ?
+    rect {
+      fill: currentColor;
+    }
+  }
+
+  /* grid */
+  .chart-grid, .chart-ticks {
+    stroke: var(--treb-chart-grid-color, #ddd);
+  }
+
+  /* mouse elements */
+  .label-target {
+    stroke: none;
+    fill: transparent;
+    
+  }
+
+  path.label-target {
+    transition: fill .2s;
+  }
+
+  path.label-target:hover {
+    fill: rgba(0, 0, 0, .15);
+  }
+
+  .data-label {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+
+    & text {
+      fill: #fff;
+    }
+
+    & path {
+      fill: #000;
+    }
+
+    & .marker-highlight {
+      fill: currentColor;
+      stroke: none;
+    }
+
+  }
+
+  .label-target:hover + .data-label {
+    opacity: 1;
+  }
+
+  /* old type of line chart */
+  .chart-line {
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+  }
+
+  /**
+   * area chart has separate parts for line and area
+   * (because the line doesn't go up and down the sides)
+   */
+  .chart-area {
+    .line {
+      stroke: currentColor;
+      stroke-width: 2px;
+      fill: none;
+    }
+    .fill {
+      fill: currentColor;
+      opacity: .5;
+    }
+  }
+
+  /* scatter plot line (and marker -- change that class name) */
+  .scatter-plot {
+
+    stroke-width: 3;
+    fill: none;
+    stroke: currentColor;
+
+    & .fill {
+      fill: currentColor;
+      opacity: .5;
+      stroke: none;
+    }
+
+    /**
+     * circle marker
+     */
+    & .marker {
+
+      stroke-width: 2.5px;
+      fill: #fff;
+      transition: stroke-width .15s ease-in;
+
+      &:hover {
+        stroke-width: 5px;
+      }
+
+    }
+
+  }
+
+  /* donut/pie */
+  .donut {
+
+    & path {
+      fill: currentColor; /* has to be attached to path for IE11 */
+    }
+
+    /* this is the dotted line to callouts */
+    & path.callout {
+      fill: none;
+      stroke: #999;
+      stroke-dasharray: 2 2;
+    }
+ 
+    /* this is the actual label */
+    text.callout-label {
+      /* font-size: 10pt; */
+      font-size: 1em;
+    }
+
+  }
+
+  /* HISTOGRAM NEEDS CLEANUP (IN LAYOUT) */
+  .chart-column {
+    fill: currentColor;
+    stroke: none;
+  }
+
+  /* SO DOES CORRELATION CHART */
+  .mc-correlation {
+    stroke: currentColor;
+    stroke-width: 1;
+  }
+
+}

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

@@ -0,0 +1,250 @@
+/*
+ * 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
+ * 
+ */
+
+/**
+ * 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 
+ * implemented differently, so this will probably need to change.
+ *
+ * originally this file used sass so we used some sass library functions
+ * to do the same thing. all we are doing is (1) set alpha on a color and
+ * (2) darken a color.
+ */
+
+$color1:  #8DD3C7;
+$color2:  #FFFFB3;
+$color3:  #BEBADA;
+$color4:  #FB8072;
+$color5:  #80B1D3;
+$color6:  #FDB462;
+$color7:  #B3DE69;
+$color8:  #FCCDE5;
+$color9:  #D9D9D9;
+$color10: #BC80BD;
+$color11: #CCEBC5;
+$color12: #FFED6F;
+
+$font-stack:  // "-apple-system",
+  "BlinkMacSystemFont",
+  "Segoe UI",
+  "Roboto",
+  "Oxygen-Sans",
+  "Ubuntu",
+  "Cantarell",
+  "Helvetica Neue",
+  "sans-serif";
+
+.treb-chart {
+
+  font-family: $font-stack;
+
+  /* box-shadow:0 3px 7px rgba(0,0,0,.3); // looks good though */
+
+  background: #fff;
+
+  .axis-label {
+    font-size: 8.5pt;
+  }
+
+  .chart-title {
+    font-size: 14pt;
+  }
+
+  .chart-column {
+    fill: $color1;
+  }
+
+  .chart-column-shadow {
+    fill: color-mod($color1 shade(25%));
+  }
+
+  .chart-grid, .chart-ticks {
+    stroke: #ddd;
+  }
+
+  .chart-column, .chart-bar {
+    &.chart-column-shadow {
+      &.series-1  { fill: color-mod($color1 shade(25%)); }
+      &.series-2  { fill: color-mod($color3 shade(25%)); }
+      &.series-3  { fill: color-mod($color4 shade(25%)); }
+      &.series-4  { fill: color-mod($color5 shade(25%)); }
+      &.series-5  { fill: color-mod($color6 shade(25%)); }
+      &.series-6  { fill: color-mod($color7 shade(25%)); }
+      &.series-7  { fill: color-mod($color8 shade(25%)); }
+      &.series-8  { fill: color-mod($color9 shade(25%)); }
+      &.series-9  { fill: color-mod($color10 shade(25%)); }
+      &.series-10  { fill: color-mod($color11 shade(25%)); }
+      &.series-11  { fill: color-mod($color12 shade(25%)); }
+      &.series-12  { fill: color-mod($color2 shade(25%)); }
+    }
+
+    &.series-1  { fill: $color1; }
+    &.series-2  { fill: $color3; }
+    &.series-3  { fill: $color4; }
+    &.series-4  { fill: $color5; }
+    &.series-5  { fill: $color6; }
+    &.series-6  { fill: $color7; }
+    &.series-7  { fill: $color8; }
+    &.series-8  { fill: $color9; }
+    &.series-9  { fill: $color10; }
+    &.series-10  { fill: $color11; }
+    &.series-11  { fill: $color12; }
+    &.series-12  { fill: $color2; }
+
+    
+  }
+
+  .chart-line, .chart-area {
+
+    .line {
+
+      fill: none;
+      stroke-width: 2px;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+
+    }
+
+    &.scatter-line .line {
+      stroke-width: 3px;
+    }
+
+    &.scatter-line .marker {
+      stroke-width: 6px;
+      fill: #fff;
+      /* 
+      d: path('M-1,-1 L1,-1 L1,1 L-1,1 Z');
+      */
+      d: path('M0,-1.5 a1.5,1.5,0,1,1,0,3 a1.5,1.5,0,1,1,0,-3'); /* circle */
+      transition: d .15s ease-in;
+
+      &:hover {
+        d: path('M0,-3 a3,3,0,1,1,0,6 a3,3,0,1,1,0,-6'); /* circle */
+      }
+
+    }
+
+    &.series-1  { stroke: $color1; }
+    &.series-2  { stroke: $color3; }
+    &.series-3  { stroke: $color4; }
+    &.series-4  { stroke: $color5; }
+    &.series-5  { stroke: $color6; }
+    &.series-6  { stroke: $color7; }
+    &.series-7  { stroke: $color8; }
+    &.series-8  { stroke: $color9; }
+    &.series-9  { stroke: $color10; }
+    &.series-10  { stroke: $color11; }
+    &.series-11  { stroke: $color12; }
+    &.series-12  { stroke: $color2; }
+
+  }
+
+  .chart-area {
+
+    &.series-1  { fill: color-mod($color1 a(.75)); }
+    &.series-2  { fill: color-mod($color3 a(.75)); }
+    &.series-3  { fill: color-mod($color4 a(.75)); }
+    &.series-4  { fill: color-mod($color5 a(.75)); }
+    &.series-5  { fill: color-mod($color6 a(.75)); }
+    &.series-6  { fill: color-mod($color7 a(.75)); }
+    &.series-7  { fill: color-mod($color8 a(.75)); }
+    &.series-8  { fill: color-mod($color9 a(.75)); }
+    &.series-9  { fill: color-mod($color10 a(.75)); }
+    &.series-10  { fill: color-mod($color11 a(.75)); }
+    &.series-11  { fill: color-mod($color12 a(.75)); }
+    &.series-12  { fill: color-mod($color2 a(.75)); }
+
+    .fill {
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+  }
+
+  .points {
+    stroke-width: 1;
+    stroke: #39f;
+  }
+
+  .mouse-layer {
+    fill: transparent;
+  }
+
+  .donut path.callout {
+    fill: none;
+    stroke: #999;
+    stroke-dasharray: 2 2;
+  }
+
+  text.callout-label {
+    font-size: 10pt;
+  }
+
+  .legend {
+    font-size: 10.5pt;
+
+    & { stroke: none; }
+
+    .series-1  { fill: $color1; }
+    .series-2  { fill: $color3; }
+    .series-3  { fill: $color4; }
+    .series-4  { fill: $color5; }
+    .series-5  { fill: $color6; }
+    .series-6  { fill: $color7; }
+    .series-7  { fill: $color8; }
+    .series-8  { fill: $color9; }
+    .series-9  { fill: $color10; }
+    .series-10  { fill: $color11; }
+    .series-11  { fill: $color12; }
+    .series-12  { fill: $color2; }
+
+
+  }
+
+  .donut path {
+
+    stroke: none;
+
+    /*
+    don't use child ordering for color, use explicit series values.
+    we want to tie color to input order, even if the chart sorts the
+    data.
+
+    I don't like this. we should use order. if necesary, you can
+    add the nodes out of order.
+    */
+
+    &.series-1  { fill: $color1; }
+    &.series-2  { fill: $color2; }
+    &.series-3  { fill: $color3; }
+    &.series-4  { fill: $color4; }
+    &.series-5  { fill: $color5; }
+    &.series-6  { fill: $color6; }
+    &.series-7  { fill: $color7; }
+    &.series-8  { fill: $color8; }
+    &.series-9  { fill: $color9; }
+    &.series-10  { fill: $color10; }
+    &.series-11  { fill: $color11; }
+    &.series-12  { fill: $color12; }
+
+  }  
+
+}