Merge pull request #87 from theiliad/donut-sum

Calculate sum of values for DonutCenter automatically
carbon-design-system · Nov 12, 2018 · b2ce664 · b2ce664
2 parents 89ee0d8 + 1fcf438
commit b2ce664
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 55 deletions.
diff --git a/packages/core/demo/demo-data/pie-donut.ts b/packages/core/demo/demo-data/pie-donut.ts
@@ -1,7 +1,5 @@
 import { colors } from "./colors";
 
-import { DonutCenter } from "../../src/index";
-
 export const pieOptions = {
 	accessibility: false,
 	legendClickable: true,
@@ -14,10 +12,7 @@ export const donutOptions = {
 	legendClickable: true,
 	containerResizable: true,
 	colors,
-	center: new DonutCenter({
-		number: 25423,
-		label: "Browsers"
-	})
+	centerLabel: "Products"
 };
 
 export const pieData = {
@@ -27,7 +22,7 @@ export const pieData = {
 		{
 			label: "Dataset 1",
 			backgroundColors: colors,
-			data: [100000, 200000, 600000, 100000, 400000, 450000, 300000, 70000, 20000, 120000]
+			data: [70000, 40000, 90000, 50000, 60000, 45000, 90000, 70000, 80000, 120000]
 		}
 	]
 };
diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts
@@ -137,20 +137,6 @@ const changeDemoData = (chartType: any, oldData: any, delay?: number) => {
 				return newDataset;
 			});
 
-			if (chartType === "donut") {
-				setTimeout(() => {
-					// Update DonutCenter values
-					const { number: centerNumber } = classyChartObject.center.configs;
-					let newCenterNumber = Math.floor(Math.max(0.2 * centerNumber, centerNumber * Math.random() * (Math.random() * 5)));
-					if (newCenterNumber <= 10) {
-						newCenterNumber = 10000;
-					}
-
-					classyChartObject.center.configs.number = newCenterNumber;
-					classyChartObject.center.update();
-				}, delay || 0);
-			}
-
 			break;
 		default:
 		case "grouped-bar":

diff --git a/packages/core/src/donut-chart.ts b/packages/core/src/donut-chart.ts
@@ -5,40 +5,6 @@ import { interpolateNumber } from "d3-interpolate";
 import { PieChart } from "./pie-chart";
 import * as Configuration from "./configuration";
 
-export class DonutChart extends PieChart {
-	center: DonutCenter;
-
-	constructor(holder: Element, configs: any) {
-		super(holder, configs, "donut");
-
-		// Check if the DonutCenter object is provided
-		if (configs.options.center) {
-			this.center = configs.options.center;
-		}
-	}
-
-	draw() {
-		super.draw();
-
-		// Draw the center text
-		if (this.center && this.center.configs) {
-			this.center.draw(this.innerWrap);
-		}
-	}
-
-	resizeChart() {
-		if (this.innerWrap) {
-			// Inherit resizing logic from PieChart
-			super.resizeChart();
-
-			if (this.center) {
-				// Trigger resize on DonutCenter as well
-				this.center.resize(this.innerWrap, this.getChartSize(this.container));
-			}
-		}
-	}
-}
-
 export class DonutCenter {
 	configs: any;
 	oldConfigs: any;
@@ -114,6 +80,56 @@ export class DonutCenter {
 	}
 }
 
+export class DonutChart extends PieChart {
+	center: DonutCenter;
+
+	constructor(holder: Element, configs: any) {
+		super(holder, configs, "donut");
+
+		// Check if the DonutCenter object is provided
+		if (configs.options.centerLabel) {
+			this.center = new DonutCenter({
+				label: configs.options.centerLabel
+			});
+		}
+	}
+
+	draw() {
+		super.draw();
+
+		// Draw the center text
+		if (this.center && this.center.configs) {
+			const sumOfDatapoints = this.displayData.datasets[0].data.reduce((accum, currVal) => accum + currVal.value, 0);
+			this.center.configs.number = sumOfDatapoints;
+
+			this.center.draw(this.innerWrap);
+		}
+	}
+
+	resizeChart() {
+		if (this.innerWrap) {
+			// Inherit resizing logic from PieChart
+			super.resizeChart();
+
+			if (this.center) {
+				// Trigger resize on DonutCenter as well
+				this.center.resize(this.innerWrap, this.getChartSize(this.container));
+			}
+		}
+	}
+
+	update() {
+		super.update();
+
+		if (this.center) {
+			const sumOfDatapoints = this.displayData.datasets[0].data.reduce((accum, currVal) => accum + currVal.value, 0);
+
+			this.center.configs.number = sumOfDatapoints;
+			this.center.update();
+		}
+	}
+}
+
 function donutCenterNumberTween(d3Ref, newNumber: number) {
 	// Remove commas from the current value string, and convert to an int
 	const currentValue = parseInt(d3Ref.text().replace(/[, ]+/g, ""), 10);