Switch chart engine from nvd3 to c3 (#3590)

* remove nvd3 and install c3

* extend 'PieChartData' with 'key'

* update colors

* added removed npm script

* add set property to track allocated

* reset allocationchart html

* reset allocationchart html

* change types/d3 package from range to specific version

* add chart type

* fix duplicated packages in package.json

* add package-lock.json

angular.json

@@ -27,7 +27,7 @@
               "node_modules/material-design-icons/iconfont/material-icons.css",
               "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
               "node_modules/xterm/dist/xterm.css",
-              "node_modules/nvd3/build/nv.d3.css",
+              "node_modules/c3/c3.min.css",
               "src/app/frontend/index.scss"
             ],
             "scripts": ["node_modules/sockjs-client/dist/sockjs.min.js"]
@@ -81,7 +81,7 @@
             "styles": [
               "node_modules/material-design-icons/iconfont/material-icons.css",
               "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
-              "node_modules/nvd3/build/nv.d3.css",
+              "node_modules/c3/c3.min.css",
               "src/app/frontend/index.scss"
             ],
             "assets": [

package.json

@@ -85,14 +85,16 @@
     "@angular/platform-browser": "8.0.0",
     "@angular/platform-browser-dynamic": "8.0.0",
     "@angular/router": "8.0.0",
+    "@types/c3": "0.7.0",
+    "@types/d3": "5.7.2",
     "@types/file-saver": "2.0.1",
-    "@types/nvd3": "1.8.39",
     "@uirouter/angular": "2.0.4",
     "@uirouter/core": "5.0.23",
     "@uirouter/rx": "0.5.0",
     "ace-builds": "1.4.4",
+    "c3": "0.7.0",
     "core-js": "2.6.5",
-    "d3": "3.5.17",
+    "d3": "5.9.2",
     "file-saver": "2.0.2",
     "hammerjs": "2.0.8",
     "js-yaml": "3.13.1",
@@ -101,7 +103,6 @@
     "ngx-cookie-service": "2.2.0",
     "ngx-filter-pipe": "2.1.2",
     "normalize.css": "8.0.0",
-    "nvd3": "1.8.6",
     "roboto-fontface": "0.10.0",
     "rxjs": "6.5.2",
     "rxjs-compat": "6.5.2",

src/app/frontend/common/components/allocationchart/component.ts

@@ -12,150 +12,142 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit } from '@angular/core';
-import * as d3 from 'd3';
-import { Selection } from 'd3';
-import * as nv from 'nvd3';
-import { Nvd3Element } from 'nvd3';
-
-interface PieChart {
-  data: PieChartData;
-}
+import { AfterViewInit, Component, Input } from '@angular/core';
+import { generate, ChartAPI } from 'c3';
+import { BaseType, select, Selection } from 'd3';
 
 interface PieChartData {
+  key?: string;
   value: number;
+  color?: string;
 }
 
+type ChartType = 'pie' | 'donut';
+
 @Component({
   selector: 'kd-allocation-chart',
   templateUrl: './template.html',
 })
-export class AllocationChartComponent implements OnInit {
+export class AllocationChartComponent implements AfterViewInit {
   @Input() data: PieChartData[];
   @Input() colorPalette: string[];
   @Input() outerPercent: number;
   @Input() outerColor: string;
   @Input() innerPercent: number;
   @Input() innerColor: string;
-  @Input() ratio = 0.67;
+  @Input() type: ChartType = 'donut';
   @Input() enableTooltips = false;
-  @Input() size: number;
+  @Input() size = 280;
   @Input() id: string;
 
-  ngOnInit(): void {
-    this.generateGraph_();
+  allocated = new Set();
+
+  ngAfterViewInit(): void {
+    setTimeout(() => this.generateGraph_(), 0);
   }
 
-  /**
-   * Initializes pie chart graph. Check documentation at:
-   * https://nvd3-community.github.io/nvd3/examples/documentation.html#pieChart
-   */
   initPieChart_(
-    svg: Selection<{}>,
+    svg: Selection<BaseType, {}, HTMLElement, HTMLElement>,
     data: PieChartData[],
-    colors: string[],
-    margin: number,
-    ratio: number,
-    labelFunc: (d: {}, i: number, values: {}) => string | null
-  ): Nvd3Element {
-    const size = this.size || 280;
-
-    if (!labelFunc) {
-      labelFunc = this.formatLabel_;
-    }
+    padding: number,
+    labelFunc: (d: {}, i: number, values: {}) => string | null = this
+      .formatLabel_
+  ): ChartAPI {
+    const colors: { [key: string]: string } = {};
+    const columns: Array<Array<string | number>> = [];
+
+    data.forEach((x, i) => {
+      if (x.value > 0) {
+        const key = x.key || x.value;
+        colors[key] = x.color || this.colorPalette[i];
+        columns.push([key, x.value]);
 
-    const chart = nv.models
-      .pieChart()
-      .showLegend(false)
-      .showLabels(true)
-      .x(d => d.key)
-      .y(d => d.value)
-      .donut(true)
-      .donutRatio(ratio)
-      .color(colors)
-      .margin({ top: margin, right: margin, bottom: margin, left: margin })
-      .width(size)
-      .height(size)
-      .growOnHover(false)
-      .labelType(labelFunc);
-
-    chart.tooltip.enabled(this.enableTooltips);
-    chart.tooltip.contentGenerator(obj => {
-      /**
-       * This is required because the RatioItem.key is of the form `label: count` and the
-       * RatioItem.value stores the percentage. This splits the key to extract label and
-       * the count.
-       */
-      if (obj.data.key.includes(':')) {
-        const values = obj.data.key.split(':');
-        return `<h3>${values[0]}</h3><p>${values[1]}</p>`;
+        if (i === 0) {
+          this.allocated.add(key);
+        }
       }
-      return obj.data.key;
     });
 
-    svg
-      .attr('height', size)
-      .attr('width', size)
-      .append('g')
-      .datum(data)
-      .transition()
-      .duration(350)
-      .call(chart);
-
-    return chart;
+    return generate({
+      bindto: svg,
+      size: {
+        width: this.size,
+        height: this.size,
+      },
+      legend: {
+        show: false,
+      },
+      tooltip: {
+        show: this.enableTooltips,
+      },
+      transition: { duration: 350 },
+      donut: {
+        label: {
+          format: labelFunc,
+        },
+      },
+      data: {
+        columns,
+        type: this.type,
+        colors,
+      },
+      padding: { top: padding, right: padding, bottom: padding, left: padding },
+    });
   }
 
   /**
    * Generates graph using provided requests and limits bindings.
    */
   generateGraph_(): void {
-    nv.addGraph(() => {
-      const svg = d3.select(`#${this.id}`).append('svg');
-      if (!this.data) {
-        let chart: Nvd3Element;
-        if (this.outerPercent !== undefined) {
-          this.outerColor = this.outerColor ? this.outerColor : '#00c752';
-          chart = this.initPieChart_(
-            svg,
-            [{ value: this.outerPercent }, { value: 100 - this.outerPercent }],
-            [this.outerColor, '#ddd'],
-            0,
-            0.67,
-            this.displayOnlyAllocated_
-          );
-        }
-        if (this.innerPercent !== undefined) {
-          this.innerColor = this.innerColor ? this.innerColor : '#326de6';
-          chart = this.initPieChart_(
-            svg,
-            [{ value: this.innerPercent }, { value: 100 - this.innerPercent }],
-            [this.innerColor, '#ddd'],
-            39,
-            0.55,
-            this.displayOnlyAllocated_
-          );
-        }
-        return chart;
-      } else {
-        // Initializes a pie chart with multiple entries in a single ring
-        return this.initPieChart_(
-          svg,
-          this.data,
-          this.colorPalette,
+    let svg = select(`#${this.id}`);
+
+    if (!this.data) {
+      svg = svg
+        .append('svg')
+        .attr('width', this.size)
+        .attr('height', this.size);
+
+      if (this.outerPercent !== undefined) {
+        this.outerColor = this.outerColor ? this.outerColor : '#00c752';
+        this.initPieChart_(
+          svg.append('g'),
+          [
+            { value: this.outerPercent, color: this.outerColor },
+            { value: 100 - this.outerPercent, color: '#ddd' },
+          ],
           0,
-          this.ratio,
-          null
+          this.displayOnlyAllocated_.bind(this)
         );
       }
-    });
+
+      if (this.innerPercent !== undefined) {
+        this.innerColor = this.innerColor ? this.innerColor : '#326de6';
+        this.initPieChart_(
+          svg.append('g'),
+          [
+            { value: this.innerPercent, color: this.innerColor },
+            { value: 100 - this.innerPercent, color: '#ddd' },
+          ],
+          45,
+          this.displayOnlyAllocated_.bind(this)
+        );
+      }
+    } else {
+      // Initializes a pie chart with multiple entries in a single ring
+      this.initPieChart_(svg, this.data, 0);
+    }
   }
 
   /**
-   * Displays label only for allocated resources (with index equal to 0).
+   * Displays label only for allocated resources
    */
-  private displayOnlyAllocated_(d: PieChart, i: number): string {
-    if (i === 0) {
-      return `${Math.round(d.data.value)}%`;
+  private displayOnlyAllocated_(
+    value: number,
+    _: number,
+    id: string | number
+  ): string {
+    if (this.allocated.has(id)) {
+      return `${Math.round(value)}%`;
     }
     return '';
   }
@@ -163,7 +155,7 @@ export class AllocationChartComponent implements OnInit {
   /**
    * Formats percentage label to display in fixed format.
    */
-  private formatLabel_(d: PieChart): string {
-    return `${Math.round(d.data.value)}%`;
+  private formatLabel_(value: number): string {
+    return `${Math.round(value)}%`;
   }
 }

src/app/frontend/overview/workloadstatus/template.html

@@ -29,7 +29,7 @@ limitations under the License.
         <kd-allocation-chart id="cronJobs"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.cronJobRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -44,7 +44,7 @@ limitations under the License.
         <kd-allocation-chart id="daemonSets"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.daemonSetRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -59,7 +59,7 @@ limitations under the License.
         <kd-allocation-chart id="deployments"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.deploymentRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -74,7 +74,7 @@ limitations under the License.
         <kd-allocation-chart id="jobs"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.jobRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -89,7 +89,7 @@ limitations under the License.
         <kd-allocation-chart id="pods"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.podRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -104,7 +104,7 @@ limitations under the License.
         <kd-allocation-chart id="replicaSets"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.replicaSetRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -119,7 +119,7 @@ limitations under the License.
         <kd-allocation-chart id="replicationControllers"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.replicationControllerRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>
@@ -134,7 +134,7 @@ limitations under the License.
         <kd-allocation-chart id="statefulSets"
                              [colorPalette]="colors"
                              [data]="resourcesRatio.statefulSetRatio"
-                             [ratio]="0"
+                             type="pie"
                              [enableTooltips]="true"
                              [size]="140"></kd-allocation-chart>
       </div>