feat: add ZoomBarOptions.initZoomDomain

- update storybook - add init() and destroy() in ZoomBar
carbon-design-system · Jun 19, 2020 · 456001b · 456001b
1 parent e09064e
commit 456001b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/packages/core/demo/data/time-series-axis.ts b/packages/core/demo/data/time-series-axis.ts
@@ -453,6 +453,10 @@ const selectionEndFun = (selection, domain) => {
 	console.log(domain);
 };
 
+const initZoomDomain = [
+	new Date(2020, 11, 10, 23, 59, 25),
+	new Date(2020, 11, 11, 0, 0, 25)
+];
 export const lineTimeSeriesZoomBarOptions = {
 	title: "Line (time series) - zoom-bar enabled",
 	axes: {
@@ -463,6 +467,7 @@ export const lineTimeSeriesZoomBarOptions = {
 	},
 	zoomBar: {
 		enabled: true,
+		initZoomDomain: initZoomDomain,
 		selectionStart: selectionStartFun,
 		selectionInProgress: selectionInProgressFun,
 		selectionEnd: selectionEndFun

diff --git a/packages/core/src/components/axes/zoom-bar.ts b/packages/core/src/components/axes/zoom-bar.ts
@@ -19,6 +19,17 @@ export class ZoomBar extends Component {
 
 	brush = brushX();
 
+	init() {
+		// get initZoomDomain
+		const zoomBarOptions = this.model.getOptions().zoomBar;
+		if (zoomBarOptions.initZoomDomain !== undefined) {
+			this.model.set(
+				{ zoomDomain: zoomBarOptions.initZoomDomain },
+				{ skipUpdate: true }
+			);
+		}
+	}
+
 	render(animate = true) {
 		const svg = this.getContainerSVG();
 		const { cartesianScales } = this.services;
@@ -221,6 +232,7 @@ export class ZoomBar extends Component {
 				const brushArea = DOMUtils.appendOrSelect(svg, "g.brush").call(
 					this.brush
 				);
+
 				if (
 					zoomDomain === undefined ||
 					zoomDomain[0].valueOf() === zoomDomain[1].valueOf()
@@ -239,10 +251,11 @@ export class ZoomBar extends Component {
 		}
 	}
 
-	zoomIn() {
-		const mainXScale = this.services.cartesianScales.getMainXScale();
-		console.log("zoom in", mainXScale.domain());
-	}
+	// could be used by Toolbar
+	// zoomIn() {
+	// 	const mainXScale = this.services.cartesianScales.getMainXScale();
+	// 	console.log("zoom in", mainXScale.domain());
+	// }
 
 	// brush event listener
 	brushed(zoomDomain, scale, selection) {
@@ -337,4 +350,8 @@ export class ZoomBar extends Component {
 			.attr("width", handleBarWidth)
 			.attr("height", handleBarHeight);
 	}
+
+	destroy() {
+		this.brush.on("start brush end", null); // remove event listener
+	}
 }
diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -143,6 +143,7 @@ export const timeScale: TimeScaleOptions = {
  */
 export const zoomBar: ZoomBarOptions = {
 	enabled: false,
+	initZoomDomain: undefined,
 	selectionStart: undefined,
 	selectionInProgress: undefined,
 	selectionEnd: undefined
@@ -236,8 +237,8 @@ const lineChart: LineChartOptions = Tools.merge({}, axisChart, {
  */
 const areaChart: AreaChartOptions = Tools.merge({}, lineChart, {
 	timeScale: Tools.merge(timeScale, {
-		addSpaceOnEdges: 0,
-	} as TimeScaleOptions),
+		addSpaceOnEdges: 0
+	} as TimeScaleOptions)
 } as LineChartOptions);
 
 /**
@@ -380,8 +381,8 @@ export const lines = {
 export const area = {
 	opacity: {
 		unselected: 0,
-		selected: 0.4,
-	},
+		selected: 0.4
+	}
 };
 
 /**
@@ -391,8 +392,7 @@ export const areas = {
 	opacity: {
 		unselected: 0.3,
 		selected: 1
-	},
-
+	}
 };
 
 /**

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -168,6 +168,12 @@ export interface ZoomBarOptions {
 	 * is the zoom-bar visible or not
 	 */
 	enabled?: boolean;
+
+	/**
+	 * an two element array which represents the initial zoom domain
+	 */
+	initZoomDomain?: Object[];
+
 	/**
 	 * a function to handle selection start event
 	 */