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

package/src/table/controls/ChartTableControl.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, DateColumn, icons, NumberColumn, objects, scout, strings, styles, TableControl, TableMatrix, tooltips} from '@eclipse-scout/core';
+import {arrays, DateColumn, icons, NumberColumn, objects, scout, scrollbars, strings, styles, TableControl, TableMatrix, tooltips} from '@eclipse-scout/core';
 import {Chart, ChartTableControlLayout, ChartTableUserFilter} from '../../index';
 import $ from 'jquery';
 
@@ -77,13 +77,14 @@ export default class ChartTableControl extends TableControl {
 
   _renderChartType() {
     this._selectChartType();
-    if (this.oldChartType) {
-      this.$yAxisSelect.animateAVCSD('width', this.chartType === Chart.Type.BUBBLE ? 175 : 0);
-      this.$yAxisSelect.animateAVCSD('margin-right', this.chartType === Chart.Type.BUBBLE ? 15 : 0);
-    } else {
-      this.$yAxisSelect.css('width', this.chartType === Chart.Type.BUBBLE ? 175 : 0);
-      this.$yAxisSelect.css('margin-right', this.chartType === Chart.Type.BUBBLE ? 15 : 0);
-    }
+    this.$yAxisSelect.toggleClass('hide', this.chartType !== Chart.Type.BUBBLE);
+    this.$yAxisSelect.toggleClass('animated', scout.isOneOf(Chart.Type.BUBBLE, this.chartType, this.oldChartType) && !!this.oldChartType);
+    this.$yAxisSelect.data('scroll-shadow').setVisible(false);
+    this.$yAxisSelect.oneAnimationEnd(() => {
+      scrollbars.update(this.$yAxisSelect);
+      this.$yAxisSelect.data('scroll-shadow').setVisible(true);
+      this.$yAxisSelect.removeClass('animated');
+    });
 
     if (this.contentRendered) {
       this.chart.$container.animateAVCSD('opacity', 0, () => {
@@ -117,7 +118,7 @@ export default class ChartTableControl extends TableControl {
     let chartGroup = this[groupName];
     if (chartGroup) {
       let $element = this[map][chartGroup.id];
-      $element.siblings().animateAVCSD('height', 30);
+      $element.siblings('.select-axis').animateAVCSD('height', 30);
       $element.selectOne('selected');
 
       if (chartGroup.modifier > 0) {
@@ -158,19 +159,24 @@ export default class ChartTableControl extends TableControl {
     }
   }
 
-  _renderChartSelect(cssClass, chartType, renderSvgIcon) {
-    let $svg = this.$chartSelect
-      .appendSVG('svg', cssClass + ' select-chart')
+  _renderChartSelect(cssClass, chartType, iconId) {
+    let icon = scout.create('Icon', {
+      parent: this,
+      iconDesc: iconId,
+      cssClass: cssClass
+    });
+    icon.render(this.$chartSelect);
+    this.$contentContainer.one('remove', () => icon.destroy());
+    let $iconContainer = icon.$container;
+    $iconContainer
       .toggleClass('disabled', !this.enabledComputed || !this._hasColumns())
       .data('chartType', chartType);
 
     if (this.enabledComputed && this._hasColumns()) {
-      $svg.on('click', this._onClickChartType.bind(this));
+      $iconContainer.on('click', this._onClickChartType.bind(this));
     }
 
-    this._chartTypeMap[chartType] = $svg;
-
-    renderSvgIcon($svg);
+    this._chartTypeMap[chartType] = $iconContainer;
   }
 
   /**
@@ -186,88 +192,19 @@ export default class ChartTableControl extends TableControl {
     let supportedChartTypes = this._getSupportedChartTypes();
 
     if (scout.isOneOf(Chart.Type.BAR, supportedChartTypes)) {
-      this._renderChartSelect('chart-bar', Chart.Type.BAR, renderSvgIconBar);
+      this._renderChartSelect('chart-bar', Chart.Type.BAR, icons.DIAGRAM_BARS_VERTICAL);
     }
     if (scout.isOneOf(Chart.Type.BAR_HORIZONTAL, supportedChartTypes)) {
-      this._renderChartSelect('chart-stacked', Chart.Type.BAR_HORIZONTAL, renderSvgIconStacked);
+      this._renderChartSelect('chart-stacked', Chart.Type.BAR_HORIZONTAL, icons.DIAGRAM_BARS_HORIZONTAL);
     }
     if (scout.isOneOf(Chart.Type.LINE, supportedChartTypes)) {
-      this._renderChartSelect('chart-line', Chart.Type.LINE, renderSvgIconLine);
+      this._renderChartSelect('chart-line', Chart.Type.LINE, icons.DIAGRAM_LINE);
     }
     if (scout.isOneOf(Chart.Type.PIE, supportedChartTypes)) {
-      this._renderChartSelect('chart-pie', Chart.Type.PIE, renderSvgIconPie.bind(this));
+      this._renderChartSelect('chart-pie', Chart.Type.PIE, icons.DIAGRAM_PIE);
     }
     if (scout.isOneOf(Chart.Type.BUBBLE, supportedChartTypes)) {
-      this._renderChartSelect('chart-bubble', Chart.Type.BUBBLE, renderSvgIconBubble);
-    }
-
-    function renderSvgIconBar($svg) {
-      let show = [2, 4, 3, 3.5, 5];
-
-      for (let s = 0; s < show.length; s++) {
-        $svg.appendSVG('rect', 'select-fill')
-          .attr('x', s * 13)
-          .attr('y', 50 - show[s] * 9)
-          .attr('width', 11)
-          .attr('height', show[s] * 9);
-      }
-    }
-
-    function renderSvgIconStacked($svg) {
-      let show = [2, 4, 3.5, 4.5];
-
-      for (let s = 0; s < show.length; s++) {
-        $svg.appendSVG('rect', 'select-fill')
-          .attr('x', 0)
-          .attr('y', 16 + s * 9)
-          .attr('width', show[s] * 14)
-          .attr('height', 7);
-      }
-    }
-
-    function renderSvgIconLine($svg) {
-      let show = [0, 1.7, 1, 2, 1.5, 2.5],
-        pathPoints = [];
-
-      for (let s = 0; s < show.length; s++) {
-        pathPoints.push(2 + (s * 12) + ',' + (45 - show[s] * 11));
-      }
-
-      $svg
-        .appendSVG('path', 'select-fill-line')
-        .attr('d', 'M' + pathPoints.join('L'));
-    }
-
-    function renderSvgIconPie($svg) {
-      let show = [
-        [0, 0.1],
-        [0.1, 0.25],
-        [0.25, 1]
-      ];
-
-      for (let s = 0; s < show.length; s++) {
-        $svg
-          .appendSVG('path', 'select-fill-pie')
-          .attr('d', this._pathSegment(37, 30, 24, show[s][0], show[s][1]));
-      }
-    }
-
-    function renderSvgIconBubble($svg) {
-      $svg.appendSVG('line', 'select-fill-line')
-        .attr('x1', 3).attr('y1', 53)
-        .attr('x2', 63).attr('y2', 53);
-
-      $svg.appendSVG('line', 'select-fill-line')
-        .attr('x1', 8).attr('y1', 12)
-        .attr('x2', 8).attr('y2', 58);
-
-      $svg.appendSVG('circle', 'select-fill')
-        .attr('cx', 22).attr('cy', 40)
-        .attr('r', 5);
-
-      $svg.appendSVG('circle', 'select-fill')
-        .attr('cx', 50).attr('cy', 26)
-        .attr('r', 11);
+      this._renderChartSelect('chart-bubble', Chart.Type.BUBBLE, icons.DIAGRAM_SCATTER);
     }
   }
 
@@ -437,14 +374,7 @@ export default class ChartTableControl extends TableControl {
 
     this._addListeners();
 
-    // add addition rectangle for hover and event handling
-    $('.select-chart', this.$contentContainer)
-      .appendSVG('rect', 'select-events')
-      .attr('width', 65)
-      .attr('height', 60)
-      .attr('fill', 'none')
-      .attr('pointer-events', 'all');
-
+    this._renderAxisSelectorsContainer();
     let columnCount = this._renderAxisSelectors();
 
     // draw first chart
@@ -464,14 +394,30 @@ export default class ChartTableControl extends TableControl {
     this.chart.on('valueClick', this._chartValueClickedHandler);
   }
 
+  _renderAxisSelectorsContainer() {
+    this.$axisSelectContainer = this.$contentContainer
+      .appendDiv('axis-select-container');
+  }
+
   _renderAxisSelectors() {
     // create container for x/y-axis
-    this.$xAxisSelect = this.$contentContainer
+    this.$xAxisSelect = this.$axisSelectContainer
       .appendDiv('xaxis-select')
       .data('groupId', 1);
-    this.$yAxisSelect = this.$contentContainer
+    scrollbars.install(this.$xAxisSelect, {
+      parent: this,
+      session: this.session,
+      axis: 'y'
+    });
+
+    this.$yAxisSelect = this.$axisSelectContainer
       .appendDiv('yaxis-select')
       .data('groupId', 2);
+    scrollbars.install(this.$yAxisSelect, {
+      parent: this,
+      session: this.session,
+      axis: 'y'
+    });
 
     // map for selection (column id, $element)
     this._chartGroup1Map = {};
@@ -556,19 +502,17 @@ export default class ChartTableControl extends TableControl {
       this.$yAxisSelect.append($yDiv);
     }
 
-    if (numberOfAxisItems < 2) {
-      let $bubbleSelect = this.$contentContainer.find('.chart-bubble.select-chart');
-      if ($bubbleSelect) {
-        $bubbleSelect.remove();
-      }
-    }
-
     // map for selection (column id, $element)
     this._aggregationMap = {};
 
     if (this._hasColumns()) {
       // create container for data
-      this.$dataSelect = this.$contentContainer.appendDiv('data-select');
+      this.$dataSelect = this.$axisSelectContainer.appendDiv('data-select');
+      scrollbars.install(this.$dataSelect, {
+        parent: this,
+        session: this.session,
+        axis: 'y'
+      });
 
       // add data-count for no column restriction (all columns)
       let countDesc = this.session.text('ui.Count');
@@ -712,8 +656,10 @@ export default class ChartTableControl extends TableControl {
         handleResize: true,
         colorScheme: this.chartColorScheme,
         maxSegments: 5,
-        legend: {
-          display: false
+        plugins: {
+          legend: {
+            display: false
+          }
         }
       }
     };
@@ -832,11 +778,6 @@ export default class ChartTableControl extends TableControl {
       data.labels = labels;
     }
 
-    // duplicate the dataset for pie charts, this is necessary for datalabels on the segments and outside of the pie chart
-    if (this.chartType === Chart.Type.PIE) {
-      data.datasets[1] = $.extend(true, {}, dataset);
-    }
-
     return data;
   }
 
@@ -909,22 +850,30 @@ export default class ChartTableControl extends TableControl {
       if (this.chartType !== Chart.Type.PIE) {
         config.options = $.extend(true, {}, config.options, {
           scales: {
-            xAxes: [{
+            x: {
               ticks: {
-                fontFamily: fontFamily
+                font: {
+                  family: fontFamily
+                }
               }
-            }],
-            yAxes: [{
+            },
+            y: {
               ticks: {
-                fontFamily: fontFamily
+                font: {
+                  family: fontFamily
+                }
               }
-            }]
+            }
           }
         });
       }
       config.options = $.extend(true, {}, config.options, {
-        tooltips: {
-          titleFontFamily: fontFamily
+        plugins: {
+          tooltip: {
+            titleFont: {
+              family: fontFamily
+            }
+          }
         }
       });
       config.options = $.extend(true, {}, config.options, {
@@ -950,22 +899,22 @@ export default class ChartTableControl extends TableControl {
       if (!(xAxis.column instanceof NumberColumn)) {
         config.options = $.extend(true, {}, config.options, {
           scales: {
-            xAxes: [{
+            x: {
               ticks: {
                 callback: label => this._formatLabel(label, xAxis)
               }
-            }]
+            }
           }
         });
       }
       if (!(yAxis.column instanceof NumberColumn)) {
         config.options = $.extend(true, {}, config.options, {
           scales: {
-            yAxes: [{
+            y: {
               ticks: {
                 callback: label => this._formatLabel(label, yAxis)
               }
-            }]
+            }
           }
         });
       }
@@ -1044,7 +993,7 @@ export default class ChartTableControl extends TableControl {
       return;
     }
 
-    config.bubble = $.extend(true, {}, config.bubble, {
+    config.options.bubble = $.extend(true, {}, config.options.bubble, {
       sizeOfLargestBubble: 25,
       minBubbleSize: 5
     });
@@ -1055,19 +1004,22 @@ export default class ChartTableControl extends TableControl {
       return;
     }
 
-    // first dataset is hidden but datalabels are displayed outside of the chart
-    config.data.datasets[0].weight = 0;
     config.data.datasets[0].datalabels = {
-      display: 'auto',
-      color: styles.get([this.chartColorScheme, this.chartType + '-chart', 'elements', 'label'], 'fill').fill,
-      formatter: (value, context) => {
-        return context.chart.data.labels[context.dataIndex];
-      },
-      anchor: 'end',
-      align: 'end',
-      clamp: true,
-      offset: 10,
-      padding: 4
+      labels: {
+        index: {
+          display: 'auto',
+          color: styles.get([this.chartColorScheme, this.chartType + '-chart', 'elements', 'label'], 'fill').fill,
+          formatter: (value, context) => {
+            return context.chart.data.labels[context.dataIndex];
+          },
+          anchor: 'end',
+          align: 'end',
+          clamp: true,
+          offset: 10,
+          padding: 4
+        },
+        labels: {}
+      }
     };
 
     config.options = $.extend(true, {}, config.options, {
@@ -1096,16 +1048,12 @@ export default class ChartTableControl extends TableControl {
 
     config.options = $.extend(true, {}, config.options, {
       scales: {
-        xAxes: [{
-          ticks: {
-            beginAtZero: true
-          }
-        }],
-        yAxes: [{
-          ticks: {
-            beginAtZero: true
-          }
-        }]
+        x: {
+          beginAtZero: true
+        },
+        y: {
+          beginAtZero: true
+        }
       }
     });
   }
@@ -1161,9 +1109,7 @@ export default class ChartTableControl extends TableControl {
     let filters = [];
     if (this.chart && this.chart.config.data) {
       let maxSegments = this.chart.config.options.maxSegments,
-        // first dataset is hidden on pie charts
-        datasetIndex = this.chartType === Chart.Type.PIE ? 1 : 0,
-        dataset = this.chart.config.data.datasets[datasetIndex],
+        dataset = this.chart.config.data.datasets[0],
         getFilters = index => ({deterministicKey: dataset.deterministicKeys[index]});
       if (this.chartType === Chart.Type.PIE) {
         getFilters = index => {
@@ -1175,7 +1121,7 @@ export default class ChartTableControl extends TableControl {
         };
       }
 
-      let checkedIndices = this.chart.checkedItems.filter(item => item.datasetIndex === datasetIndex)
+      let checkedIndices = this.chart.checkedItems.filter(item => item.datasetIndex === 0)
         .map(item => item.dataIndex);
       checkedIndices.forEach(index => {
         arrays.pushAll(filters, getFilters(index));
@@ -1197,8 +1143,6 @@ export default class ChartTableControl extends TableControl {
     } else {
       this.table.removeFilterByKey(ChartTableUserFilter.TYPE);
     }
-
-    this.table.filter();
   }
 
   _axisContentForColumn(column) {
@@ -1246,9 +1190,12 @@ export default class ChartTableControl extends TableControl {
     this.$xAxisSelect.each((index, element) => {
       tooltips.uninstall($(element));
     });
+    scrollbars.uninstall(this.$xAxisSelect, this.session);
     this.$yAxisSelect.each((index, element) => {
       tooltips.uninstall($(element));
     });
+    scrollbars.uninstall(this.$yAxisSelect, this.session);
+    scrollbars.uninstall(this.$dataSelect, this.session);
     this._uninstallScrollbars();
   }