feat: allow user to set zoom bar data

hlyang397 · Jul 21, 2020 · e1d4636 · e1d4636
1 parent abfd3e1
commit e1d4636
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 6 deletions.
diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -730,6 +730,12 @@ let allDemoGroups = [
 				chartType: chartTypes.StackedBarChart,
 				isDemoExample: false
 			},
+			{
+				options: zoomBarDemos.definedZoomBarStackedBarTimeSeriesOptions,
+				data: zoomBarDemos.definedZoomBarStackedBarTimeSeriesData,
+				chartType: chartTypes.StackedBarChart,
+				isDemoExample: false
+			},
 			{
 				options: zoomBarDemos.zoomBarBubbleTimeSeriesOptions,
 				data: zoomBarDemos.zoomBarBubbleTimeSeriesData,

diff --git a/packages/core/demo/data/zoom-bar.ts b/packages/core/demo/data/zoom-bar.ts
@@ -11,10 +11,28 @@ const initialZoomDomain = [
 	new Date(2020, 11, 11, 0, 0, 25)
 ];
 
+const definedZoomBarData = [
+	{ date: new Date(2019, 0, 1), value: 10000 },
+	{ date: new Date(2019, 0, 2), value: 10 },
+	{ date: new Date(2019, 0, 3), value: 75000 },
+	{ date: new Date(2019, 0, 5), value: 65000 },
+	{ date: new Date(2019, 0, 6), value: 57312 },
+	{ date: new Date(2019, 0, 8), value: 10000 },
+	{ date: new Date(2019, 0, 13), value: 49213 },
+	{ date: new Date(2019, 0, 15), value: 70323 },
+	{ date: new Date(2019, 0, 17), value: 51213 },
+	{ date: new Date(2019, 0, 19), value: 21300 }
+];
+
 // utility function to update title and enable zoomBar option
-const addZoomBarToOptions = (options) => {
-	options["title"] = options["title"] + " - Zoom bar enabled";
-	options["zoomBar"] = { enabled: true };
+const addZoomBarToOptions = (options, includeDefinedZoomBarData = false) => {
+	if (includeDefinedZoomBarData) {
+		options["title"] = options["title"] + " - Defined zoom bar enabled";
+		options["zoomBar"] = { enabled: true, data: definedZoomBarData };
+	} else {
+		options["title"] = options["title"] + " - Zoom bar enabled";
+		options["zoomBar"] = { enabled: true };
+	}
 	return options;
 };
 
@@ -35,6 +53,13 @@ export const zoomBarStackedBarTimeSeriesOptions = addZoomBarToOptions(
 	Object.assign({}, barChart.stackedBarTimeSeriesOptions)
 );
 
+export const definedZoomBarStackedBarTimeSeriesData =
+	barChart.stackedBarTimeSeriesData;
+export const definedZoomBarStackedBarTimeSeriesOptions = addZoomBarToOptions(
+	Object.assign({}, barChart.stackedBarTimeSeriesOptions),
+	true
+);
+
 export const zoomBarBubbleTimeSeriesData = bubbleChart.bubbleTimeSeriesData;
 export const zoomBarBubbleTimeSeriesOptions = addZoomBarToOptions(
 	Object.assign({}, bubbleChart.bubbleTimeSeriesOptions)

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -125,4 +125,8 @@ export interface ZoomBarOptions {
 	 * an two element array which represents the initial zoom domain
 	 */
 	initialZoomDomain?: Object[];
+	/**
+	 * options related to zoom bar data
+	 */
+	data?: Object[];
 }
diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
@@ -46,10 +46,23 @@ export class ChartModel {
 		const domainIdentifier = cartesianScales.getDomainIdentifier();
 		const rangeIdentifier = cartesianScales.getRangeIdentifier();
 
-		const displayData = this.getDisplayData();
+		let zoomBarData;
+		// check if pre-defined zoom bar data exists
+		const definedZoomBarData = Tools.getProperty(
+			this.getOptions(),
+			"zoomBar",
+			"data"
+		);
+		// if user already defines zoom bar data, use it
+		if (definedZoomBarData) {
+			zoomBarData = definedZoomBarData;
+		} else {
+			// use displayData if not defined
+			zoomBarData = this.getDisplayData();
+		}
 		// get all dates (Number) in displayData
 		let allDates = [];
-		displayData.forEach((data) => {
+		zoomBarData.forEach((data) => {
 			allDates = allDates.concat(Number(data[domainIdentifier]));
 		});
 		allDates = Tools.removeArrayDuplicates(allDates).sort();
@@ -59,7 +72,7 @@ export class ChartModel {
 			let sum = 0;
 			const datum = {};
 
-			displayData.forEach((data) => {
+			zoomBarData.forEach((data) => {
 				if (Number(data[domainIdentifier]) === date) {
 					sum += data[rangeIdentifier];
 				}