@eclipse-scout/chart 11.0.39 → 22.0.0-beta.1

package/dist/file-list

@@ -1,12 +1,6 @@
-eclipse-scout-chart-4f219da36ee28808d3bf.min.js
-eclipse-scout-chart-4f219da36ee28808d3bf.min.js.map
-eclipse-scout-chart-theme-dark-e356c56e246c4f8f5ff3.min.css
 eclipse-scout-chart-theme-dark.css
 eclipse-scout-chart-theme-dark.css.map
-eclipse-scout-chart-theme-e85ee1f9c7c3e6d5af5d.min.css
 eclipse-scout-chart-theme.css
 eclipse-scout-chart-theme.css.map
 eclipse-scout-chart.js
 eclipse-scout-chart.js.map
-file-list
-texts.json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/chart",
-  "version": "11.0.39",
+  "version": "22.0.0-beta.1",
   "description": "Eclipse Scout chart",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -10,9 +10,9 @@
   },
   "license": "EPL-1.0",
   "engines": {
-    "node": ">=12.1.0",
-    "npm": ">=6.9.0",
-    "pnpm": ">=5"
+    "node": ">=16.13.0",
+    "npm": ">=8.1.0",
+    "pnpm": ">=6.22.2"
   },
   "keywords": [
     "scout",
@@ -24,6 +24,18 @@
     "dist",
     "src"
   ],
+  "devDependencies": {
+    "@eclipse-scout/cli": "22.0.0-beta.1",
+    "@eclipse-scout/releng": "^22.0.0",
+    "jasmine-core": "3.10.1",
+    "karma": "6.3.9"
+  },
+  "dependencies": {
+    "@eclipse-scout/core": "22.0.0-beta.1",
+    "jquery": "3.6.0",
+    "chart.js": "3.7.0",
+    "chartjs-plugin-datalabels": "2.0.0"
+  },
   "scripts": {
     "testserver:start": "scout-scripts test-server:start",
     "testserver:stop": "scout-scripts test-server:stop",
@@ -32,22 +44,10 @@
     "build:prod": "scout-scripts build:prod",
     "build:all": "scout-scripts build:dev && scout-scripts build:prod",
     "build:dev:watch": "scout-scripts build:dev:watch",
-    "snapshot-cleanup": "releng-scripts snapshot-cleanup",
-    "snapshot-predependency": "releng-scripts snapshot-install-dependency",
-    "snapshot-postdependency": "releng-scripts snapshot-publish-dependency",
-    "release-predependency": "releng-scripts release-install-dependency",
-    "release-postdependency": "releng-scripts release-publish-dependency"
-  },
-  "devDependencies": {
-    "@eclipse-scout/cli": "11.0.39",
-    "@eclipse-scout/releng": "^10.0.0",
-    "jasmine-core": "3.6.0",
-    "karma": "5.2.2"
-  },
-  "dependencies": {
-    "jquery": "3.5.1",
-    "@eclipse-scout/core": "11.0.39",
-    "chart.js": "2.9.4",
-    "chartjs-plugin-datalabels": "0.7.0"
+    "cleanup:snapshots": "releng-scripts cleanup:snapshots",
+    "version:snapshot:dependencies": "releng-scripts version:snapshot:dependencies",
+    "version:snapshot": "releng-scripts version:snapshot",
+    "version:release:dependencies": "releng-scripts version:release:dependencies",
+    "version:release": "releng-scripts version:release"
   }
 }

package/src/chart/AbstractChartRenderer.js

@@ -8,7 +8,6 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Chart} from '../index';
 
 export default class AbstractChartRenderer {
 
@@ -139,6 +138,13 @@ export default class AbstractChartRenderer {
     return false;
   }
 
+  refresh() {
+    if (this.rendered) {
+      this.remove(false);
+    }
+    this.render(false);
+  }
+
   /**
    * @param requestAnimation
    *          Whether animations should be used while removing the chart. Note that his

package/src/chart/AbstractSvgChartRenderer.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -10,7 +10,7 @@
  */
 import {ObjectFactory, strings, styles} from '@eclipse-scout/core';
 import $ from 'jquery';
-import {Chart, AbstractChartRenderer} from '../index';
+import {AbstractChartRenderer, Chart} from '../index';
 
 export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
 
@@ -243,7 +243,7 @@ export default class AbstractSvgChartRenderer extends AbstractChartRenderer {
       removeFunc: () => {
       }
     };
-    if (!this.chart.config.options.tooltips.enabled) {
+    if (!this.chart.config.options.plugins.tooltip.enabled) {
       return legend;
     }
     let padding = 5,

package/src/chart/Chart.js

@@ -138,17 +138,17 @@ export default class Chart extends Widget {
         animation: {
           duration: Chart.DEFAULT_ANIMATION_DURATION
         },
-        tooltips: {
-          enabled: true
-        },
-        legend: {
-          display: true,
-          clickable: false,
-          position: Chart.Position.RIGHT
-        },
         plugins: {
           datalabels: {
             display: false
+          },
+          tooltip: {
+            enabled: true
+          },
+          legend: {
+            display: true,
+            clickable: false,
+            position: Chart.Position.RIGHT
           }
         }
       }
@@ -161,7 +161,35 @@ export default class Chart extends Widget {
 
     // check if only data has changed
     let oldConfigWithNewData = $.extend(true, {}, this.config);
-    oldConfigWithNewData.data = config.data;
+    if (config.data) {
+      oldConfigWithNewData.data = config.data;
+    } else {
+      delete oldConfigWithNewData.data;
+    }
+
+    // the label map is technically part of the config, but it is handled as data. Therefore it is excluded from this check.
+    let transferLabelMap = (source, target, identifier) => {
+      if (!source || !target || !identifier) {
+        return;
+      }
+      // Property not set on source -> remove from target
+      if (!source.options || !source.options[identifier]) {
+        if (target.options) {
+          delete target.options[identifier];
+        }
+        if (target.options && objects.isEmpty(target.options.scales) && !(source.options && source.options.scales)) {
+          delete target.options.scales;
+        }
+        if (objects.isEmpty(target.options) && !source.options) {
+          delete target.options;
+        }
+        return;
+      }
+      target.options[identifier] = source.options[identifier];
+    };
+    transferLabelMap(config, oldConfigWithNewData, 'xLabelMap');
+    transferLabelMap(config, oldConfigWithNewData, 'yLabelMap');
+
     if (objects.equalsRecursive(oldConfigWithNewData, config)) {
       this._setProperty('config', config);
       if (this.rendered) {
@@ -246,6 +274,7 @@ export default class Chart extends Widget {
    *   [requestAnimation] default false
    *   [debounce] default 0
    *   [onlyUpdateData] default false
+   *   [onlyRefresh] default false
    */
   updateChart(opts) {
     opts = opts || {};
@@ -281,6 +310,8 @@ export default class Chart extends Widget {
       this._updateChartOpts = null;
       if (opts.onlyUpdateData && this.chartRenderer && this.chartRenderer.isDataUpdatable()) {
         this.chartRenderer.updateData(opts.requestAnimation);
+      } else if (opts.onlyRefresh && this.chartRenderer) {
+        this.chartRenderer.refresh();
       } else if (this.chartRenderer) {
         this.chartRenderer.remove(this.chartRenderer.shouldAnimateRemoveOnUpdate(opts), chartAnimationStopping => {
           if (this.removing || chartAnimationStopping) {

package/src/chart/Chart.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -361,32 +361,29 @@
       fill: @chart-legend-label-color;
 
       .inverted > & {
-        fill: @palette-white;
+        fill: @chart-legend-label-inverted-color;
       }
     }
 
     > .datalabel {
-      fill: @palette-white;
+      fill: @chart-data-label-color;
     }
 
     > .axis-label {
       fill: @chart-axis-label-color;
 
       .inverted > & {
-        fill: @palette-white;
+        fill: @chart-axis-label-color-inverted;
       }
     }
 
-    > .grid {
+    > .grid,
+    > .scale-ticks {
       fill: @chart-axis-line-color;
-    }
-
-    > .tooltip-background {
-      fill: @chart-tooltip-background-color;
-    }
 
-    > .tooltip-border {
-      fill: @chart-tooltip-border-color;
+      .inverted > & {
+        fill: @chart-axis-line-color-inverted;
+      }
     }
   }
 }
@@ -426,12 +423,6 @@
   #scout.chart-auto-stroke-colors-schemes();
   #scout.chart-auto-colors-schemes(@darken: 10, @additional-classes: ~".hover");
   #scout.chart-auto-stroke-colors-schemes(@darken: 10, @additional-classes: ~".hover");
-
-  > .point {
-    &.hover {
-      fill: @palette-white;
-    }
-  }
 }
 
 .bar-chart,
@@ -476,8 +467,12 @@
   & > .elements {
     #scout.chart-label-grid-colors();
 
-    :not(.inverted) > & > .grid {
+    & > .grid {
       fill: darken(@chart-axis-line-color, 15);
+
+      .inverted > & {
+        fill: lighten(@chart-axis-line-color-inverted, 25);
+      }
     }
 
     #scout.chart-auto-colors-schemes(@opacity: 70);
@@ -498,17 +493,20 @@
 
   & > .elements {
     #scout.chart-label-grid-colors();
+
+    & > .scale-ticks {
+      fill: darken(@chart-axis-line-color, 15);
+
+      .inverted > & {
+        fill: lighten(@chart-axis-line-color-inverted, 25);
+      }
+    }
+
     #scout.chart-auto-colors-schemes(@opacity: 20);
     #scout.chart-auto-stroke-colors-schemes();
     #scout.chart-auto-colors-schemes(@opacity: 35, @additional-classes: ~".hover");
 
     #scout.chart-auto-colors-schemes(@additional-classes: ~".legend");
-
-    > .point {
-      &.hover {
-        fill: @palette-white;
-      }
-    }
   }
 }
 
@@ -536,13 +534,12 @@ text.line-label {
   font-size: @font-size-normal;
 
   .inverted & {
-    fill: @palette-white;
+    fill: @chart-axis-label-color-inverted;
   }
 }
 
 text.line-label-background {
   font-size: @font-size-normal;
-
   fill: @chart-line-label-background-color;
 
   .inverted & {
@@ -560,7 +557,11 @@ text.line-label-background {
 
 line.label-line {
   stroke-width: 1px;
-  stroke: @chart-axis-line-color;
+  stroke: @chart-line-label-border-color;
+
+  .inverted & {
+    stroke: @chart-line-label-inverted-border-color;
+  }
 }
 
 /* --- Wire labels default ---*/
@@ -591,58 +592,58 @@ path.fulfillment-chart {
   }
 
   &.auto-color {
-    fill: @chart-data-color-2;
+    fill: @chart-data-color;
 
     .clickable &:hover {
-      fill: @chart-data-color-3;
+      fill: @chart-data-hover-color;
     }
 
     &.selected {
-      fill: @chart-data-color-3;
+      fill: @chart-data-selected-color;
     }
   }
 
   .color-alternative &.auto-color {
-    fill: @chart-data-color-2-alternative;
+    fill: @chart-data-color-alternative;
 
     .clickable &:hover {
-      fill: @chart-data-color-3-alternative;
+      fill: @chart-data-hover-color-alternative;
     }
 
     &.selected {
-      fill: @chart-data-color-3-alternative;
+      fill: @chart-data-selected-color-alternative;
     }
   }
 
   .inverted & {
     &.auto-color {
-      fill: @chart-data-color-1-inverted;
+      fill: @chart-data-color-inverted;
 
-      .clickable &:hover {
-        fill: @chart-data-color-2-inverted;
+      .clickable&:hover {
+        fill: @chart-data-hover-color-inverted;
       }
 
       &.selected {
-        fill: @chart-data-color-2-inverted;
+        fill: @chart-data-selected-color-inverted;
       }
     }
 
     .color-alternative&.auto-color {
-      fill: @chart-data-color-2-alternative-inverted;
+      fill: @chart-data-color-alternative-inverted;
 
-      .clickable &:hover {
-        fill: @chart-data-color-3-alternative-inverted;
+      .clickable&:hover {
+        fill: @chart-data-hover-color-alternative-inverted;
       }
 
       &.selected {
-        fill: @chart-data-color-3-alternative-inverted;
+        fill: @chart-data-selected-color-alternative-inverted;
       }
     }
   }
 }
 
 path.fulfillment-chart-inner-circle {
-  fill: @palette-gray-3;
+  fill: @fufillment-chart-inner-circle-color;
 }
 
 text.fulfillment-chart-label {
@@ -689,7 +690,7 @@ path.speedo-chart-arc, path.pointer {
 /* --- Salesfunnel --- */
 
 line.label-separator {
-  stroke: @chart-axis-line-color;
+  stroke: @palette-gray-7;
 
   .inverted & {
     stroke: @palette-white;
@@ -712,23 +713,23 @@ polygon.salesfunnel-chart-bar {
   }
 
   &.auto-color:hover {
-    fill: @chart-data-active-color;
+    fill: @chart-data-hover-color;
   }
 
   .inverted &.auto-color:hover {
-    fill: @chart-data-active-color-inverted;
+    fill: @chart-data-white-hover-color;
   }
 
   .color-alternative &.auto-color:hover {
-    fill: @chart-data-active-color-alternative;
+    fill: @chart-data-hover-color-alternative;
   }
 
   .color-alternative.inverted &.auto-color:hover {
-    fill: @chart-data-active-color-alternative-inverted;
+    fill: @chart-data-white-hover-color;
   }
 
   .color-rainbow &.auto-color:hover {
-    fill: @chart-data-active-color-rainbow;
+    fill: @chart-data-hover-color-rainbow;
   }
 }
 
@@ -753,11 +754,7 @@ text.salesfunnel-bar-label {
 }
 
 text.salesfunnel-label {
-  fill: @salesfunnel-label-color;
-
-  .color-alternative & {
-    fill: @salesfunnel-alternative-label-color;
-  }
+  fill: @chart-axis-text-color;
 
   text-anchor: end;
   dominant-baseline: central;
@@ -789,18 +786,18 @@ circle.venn-circle {
   }
 
   &.auto-color {
-    fill: @chart-data-color-2;
+    fill: @chart-data-color;
 
     .inverted & {
-      fill: @chart-data-text-color;
+      fill: @chart-data-color-inverted;
     }
 
     .color-alternative & {
-      fill: @chart-data-color-2-alternative;
+      fill: @chart-data-color-alternative;
     }
 
     .color-alternative.inverted & {
-      fill: @chart-data-color-2-alternative-inverted;
+      fill: @chart-data-color-alternative-inverted;
     }
   }
 }
@@ -823,24 +820,70 @@ text.venn-legend {
   text-anchor: start;
 }
 
-.venn-chart-loading-indicator {
-  @loading-animation-size: 30px;
-  display: inline-block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -(@loading-animation-size / 2);
-  margin-left: -(@loading-animation-size / 2);
-  #scout.animation(fade-in 0.15s);
-
-  &::before {
-    #scout.animation(pulsate 2.0s linear infinite);
-    content: '';
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: 50%;
-    border: 1px solid @border-color;
-    width: @loading-animation-size;
-    height: @loading-animation-size;
+/*** chart tooltip ***/
+.tooltip.chart-tooltip {
+  --chart-tooltip-font-family: @font-default-family;
+  --chart-tooltip-label-width: 70px;
+
+  & > .tooltip-content > .attribute {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: center;
+    align-items: center;
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    & > .color {
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+
+    & > label {
+      width: var(--chart-tooltip-label-width);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-right: 10px;
+      white-space: nowrap;
+      font-size: @field-label-font-size;
+      padding-top: @font-size-normal - @field-label-font-size;
+
+      &:first-child {
+        width: calc(var(--chart-tooltip-label-width) + 15px); // compensate missing color bubble
+
+        &:last-child {
+          width: 100%;
+          padding-right: 0;
+          font-size: @font-size-normal;
+          font-family: var(--chart-tooltip-font-family);
+        }
+      }
+    }
+
+    & > .value {
+      flex-grow: 1;
+      max-width: calc(100% - 15px - var(--chart-tooltip-label-width));
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      text-align: right;
+      font-size: @font-size-normal;
+      font-weight: @font-weight-normal;
+      font-family: var(--chart-tooltip-font-family);
+    }
+
+    &.title > .value {
+      text-align: left;
+    }
   }
-}
+}