feat(CORE): ability to customize donut label & number

carbon-design-system · Jan 24, 2019 · 07014cf · 07014cf
1 parent 6e3c160
commit 07014cf
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 26 deletions.
diff --git a/packages/core/demo/demo-data/pie-donut.ts b/packages/core/demo/demo-data/pie-donut.ts
@@ -12,7 +12,10 @@ export const donutOptions = {
 	legendClickable: true,
 	containerResizable: true,
 	colors,
-	centerLabel: "Products"
+	center: {
+		label: "Products",
+		number: 300000
+	}
 };
 
 export const pieData = {

diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts
@@ -156,18 +156,35 @@ const changeDemoData = (chartType: any, oldData: any, delay?: number) => {
 		}
 	};
 
+	// Function to be used to randomize all datapoints
+	const updateChartData = oldData => {
+		const newData = Object.assign({}, oldData);
+		newData.datasets = oldData.datasets.map(dataset => {
+			const datasetNewData = dataset.data.map(dataPoint => randomizeValue(dataPoint));
+
+			const newDataset = Object.assign({}, dataset, { data: datasetNewData });
+
+			return newDataset;
+		});
+
+		return newData;
+	};
+
 	switch (chartType) {
 		case "donut":
-		case "pie":
 			// Randomize old data values
-			newData = Object.assign({}, oldData);
-			newData.datasets = oldData.datasets.map(dataset => {
-				const datasetNewData = dataset.data.map(dataPoint => randomizeValue(dataPoint));
+			newData = updateChartData(oldData);
 
-				const newDataset = Object.assign({}, dataset, { data: datasetNewData });
+			// Update donut center configurations
+			classyChartObject.options.center = {
+				label: "New Title",
+				number: randomizeValue(classyChartObject.center.configs.number)
+			};
 
-				return newDataset;
-			});
+			break;
+		case "pie":
+			// Randomize old data values
+			newData = updateChartData(oldData);
 
 			break;
 		default:
@@ -176,14 +193,7 @@ const changeDemoData = (chartType: any, oldData: any, delay?: number) => {
 		case "simple-bar-accessible":
 		case "stacked-bar":
 		case "stacked-bar-accessible":
-			newData = Object.assign({}, oldData);
-			newData.datasets = oldData.datasets.map(dataset => {
-				const datasetNewData = dataset.data.map(dataPoint => randomizeValue(dataPoint));
-
-				const newDataset = Object.assign({}, dataset, { data: datasetNewData });
-
-				return newDataset;
-			});
+			newData = updateChartData(oldData);
 
 			if (removeADataset && chartType !== "combo") {
 				const randomIndex = Math.floor(Math.random() * (newData.datasets.length - 1));

diff --git a/packages/core/src/donut-chart.ts b/packages/core/src/donut-chart.ts
@@ -87,20 +87,23 @@ export class DonutChart extends PieChart {
 		super(holder, configs, "donut");
 
 		// Check if the DonutCenter object is provided
-		if (configs.options.centerLabel) {
-			this.center = new DonutCenter({
-				label: configs.options.centerLabel
-			});
+		// in the chart configurations
+		const { center } = configs.options;
+		if (center) {
+			// Set donut center configs
+			// And instantiate the DonutCenter object
+			const donutCenterConfigs = this.getSuppliedCenterConfigs();
+			this.center = new DonutCenter(donutCenterConfigs);
 		}
 	}
 
 	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;
+		if (this.center) {
+			// Set donut center configs
+			this.setCenterConfigs();
 
 			this.center.draw(this.innerWrap);
 		}
@@ -120,14 +123,38 @@ 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);
+			// Set donut center configs
+			this.setCenterConfigs();
 
-			this.center.configs.number = sumOfDatapoints;
+			// Update donut center
 			this.center.update();
 		}
 	}
+
+	getSuppliedCenterConfigs() {
+		let number;
+		const { center } = this.options;
+
+		// If a number for donut center has been provided
+		// Use it
+		if (center.number) {
+			number = center.number;
+		} else if (this.displayData) { // If not, use the sum of datapoints
+			const sumOfDatapoints = this.displayData.datasets[0].data.reduce((accum, currVal) => accum + currVal.value, 0);
+			number = sumOfDatapoints;
+		}
+
+		return {
+			label: center.label,
+			number
+		};
+	}
+
+	setCenterConfigs() {
+		this.center.configs = this.getSuppliedCenterConfigs();
+	}
 }
 
 function donutCenterNumberTween(d3Ref, newNumber: number) {