feat(core): Automatic calculation of DonutCenter value, closes #83

carbon-design-system · Nov 12, 2018 · d20e883 · d20e883
1 parent a5fffcf
commit d20e883
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 23 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
@@ -12,8 +12,10 @@ export class DonutChart extends PieChart {
 		super(holder, configs, "donut");
 
 		// Check if the DonutCenter object is provided
-		if (configs.options.center) {
-			this.center = configs.options.center;
+		if (configs.options.centerLabel) {
+			this.center = new DonutCenter({
+				label: configs.options.centerLabel
+			});
 		}
 	}
 
@@ -22,6 +24,9 @@ export class DonutChart extends PieChart {
 
 		// 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);
 		}
 	}
@@ -37,6 +42,17 @@ export class DonutChart extends PieChart {
 			}
 		}
 	}
+
+	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();
+		}
+	}
 }
 
 export class DonutCenter {