diff --git a/packages/core/demo/demo-data/pie-donut.ts b/packages/core/demo/demo-data/pie-donut.ts index 29e7092c12..a5b425116c 100644 --- 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 index 86a136a501..5d8fc0dbfc 100644 --- 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 index c6e142b86e..d3abe4f1ab 100644 --- 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);