Tool bar above zoom bar and shift-clicking on chart

packages/core/CHANGELOG.md

@@ -39,9 +39,11 @@ All notable changes to this project will be documented in this file. See
 
 ### Bug Fixes
 
--   fix pie chart alignment
-    ([#716](https://github.com/carbon-design-system/carbon-charts/issues/716))
-    ([638c331](https://github.com/carbon-design-system/carbon-charts/commit/638c331b7fa8fbc73cf557cf99a6b3af2435b492))
+* fix pie chart alignment ([#716](https://github.com/carbon-design-system/carbon-charts/issues/716)) ([638c331](https://github.com/carbon-design-system/carbon-charts/commit/638c331b7fa8fbc73cf557cf99a6b3af2435b492))
+
+
+
+
 
 # Change Log
 

packages/core/demo/data/index.ts

@@ -820,6 +820,12 @@ let allDemoGroups = [
 				chartType: chartTypes.LineChart,
 				isDemoExample: false
 			},
+			{
+				options: zoomBarDemos.zoomBarEmptyStateOptions,
+				data: zoomBarDemos.zoomBarEmptyStateData,
+				chartType: chartTypes.StackedBarChart,
+				isDemoExample: false
+			},
 			{
 				options: zoomBarDemos.zoomBarSkeletonOptions,
 				data: zoomBarDemos.zoomBarSkeletonData,

packages/core/demo/data/zoom-bar.ts

@@ -24,12 +24,23 @@ const definedZoomBarData = [
 	{ date: new Date(2019, 0, 19), value: 21300 }
 ];
 
+const defaultToolBarOptions = {
+	enabled: true,
+	toolBarMenuItems: {
+		resetZoom: {
+			enabled: true,
+			text: "Reset zoom"
+		}
+	}
+};
+
 // utility function to update title and enable zoomBar option
 const addZoomBarToOptions = (options, includeDefinedZoomBarData = false) => {
 	options["experimental"] = true;
 	if (includeDefinedZoomBarData) {
 		options["title"] = options["title"] + " - Defined zoom bar enabled";
 		options["zoomBar"] = {
+			zoomRatio: 0.4,
 			top: {
 				enabled: true,
 				data: definedZoomBarData
@@ -38,11 +49,13 @@ const addZoomBarToOptions = (options, includeDefinedZoomBarData = false) => {
 	} else {
 		options["title"] = options["title"] + " - Zoom bar enabled";
 		options["zoomBar"] = {
+			zoomRatio: 0.4,
 			top: {
 				enabled: true
 			}
 		};
 	}
+	options["toolBar"] = defaultToolBarOptions;
 	return options;
 };
 
@@ -104,6 +117,12 @@ export const zoomBarLineTimeSeriesInitDomainOptions = addZoomBarToOptions(
 zoomBarLineTimeSeriesInitDomainOptions["title"] += " (initial zoomed domain)";
 zoomBarLineTimeSeriesInitDomainOptions.zoomBar.top.initialZoomDomain = initialZoomDomain;
 
+export const zoomBarEmptyStateData = barChart.stackedBarEmptyStateData;
+export const zoomBarEmptyStateOptions = addZoomBarToOptions(
+	Object.assign({}, barChart.stackedBarTimeSeriesOptions)
+);
+zoomBarEmptyStateOptions["title"] = "Zoom bar (empty state)";
+
 // assume no data set while loading is true
 export const zoomBarSkeletonData = [];
 export const zoomBarSkeletonOptions = addZoomBarToOptions(

packages/core/src/axis-chart.ts

@@ -5,9 +5,7 @@ import {
 	LegendOrientations,
 	LegendPositions,
 	ChartConfig,
-	AxisChartOptions,
-	AxisPositions,
-	ScaleTypes
+	AxisChartOptions
 } from "./interfaces";
 import {
 	ChartBrush,
@@ -17,8 +15,9 @@ import {
 	Title,
 	AxisChartsTooltip,
 	Spacer,
+	ToolBar,
 	ZoomBar
-} from "./components";
+} from "./components/index";
 import { Tools } from "./tools";
 
 import { CartesianScales, Curves, Zoom } from "./services";
@@ -35,30 +34,49 @@ export class AxisChart extends Chart {
 	}
 
 	protected getAxisChartComponents(graphFrameComponents: any[]) {
-		const isZoomBarEnabled = Tools.getProperty(
+		const zoomBarEnabled = this.services.zoom.isZoomBarEnabled();
+
+		const toolbarEnabled = Tools.getProperty(
 			this.model.getOptions(),
-			"zoomBar",
-			"top",
+			"toolBar",
 			"enabled"
 		);
 
-		this.services.cartesianScales.findDomainAndRangeAxes(); // need to do this before getMainXAxisPosition()
-		const mainXAxisPosition = this.services.cartesianScales.getMainXAxisPosition();
-		const mainXScaleType = Tools.getProperty(
-			this.model.getOptions(),
-			"axes",
-			mainXAxisPosition,
-			"scaleType"
-		);
-		// @todo - Zoom Bar only supports main axis at BOTTOM axis and time scale for now
-		const zoomBarEnabled =
-			isZoomBarEnabled &&
-			mainXAxisPosition === AxisPositions.BOTTOM &&
-			mainXScaleType === ScaleTypes.TIME;
+		const titleAvailable = !!this.model.getOptions().title;
 
 		const titleComponent = {
 			id: "title",
 			components: [new Title(this.model, this.services)],
+			growth: {
+				x: LayoutGrowth.STRETCH,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
+		const toolBarComponent = {
+			id: "toolbar",
+			components: [new ToolBar(this.model, this.services)],
+			growth: {
+				x: LayoutGrowth.PREFERRED,
+				y: LayoutGrowth.FIXED
+			}
+		};
+
+		const headerComponent = {
+			id: "header",
+			components: [
+				new LayoutComponent(
+					this.model,
+					this.services,
+					[
+						...(titleAvailable ? [titleComponent] : []),
+						...(toolbarEnabled ? [toolBarComponent] : [])
+					],
+					{
+						direction: LayoutDirection.ROW
+					}
+				)
+			],
 			growth: {
 				x: LayoutGrowth.PREFERRED,
 				y: LayoutGrowth.FIXED
@@ -168,12 +186,18 @@ export class AxisChart extends Chart {
 
 		// Add chart title if it exists
 		const topLevelLayoutComponents = [];
-		if (this.model.getOptions().title) {
-			topLevelLayoutComponents.push(titleComponent);
+		if (titleAvailable || toolbarEnabled) {
+			topLevelLayoutComponents.push(headerComponent);
 
 			const titleSpacerComponent = {
 				id: "spacer",
-				components: [new Spacer(this.model, this.services)],
+				components: [
+					new Spacer(
+						this.model,
+						this.services,
+						toolbarEnabled ? { size: 10 } : undefined
+					)
+				],
 				growth: {
 					x: LayoutGrowth.PREFERRED,
 					y: LayoutGrowth.FIXED

packages/core/src/components/axes/grid-brush.ts

@@ -2,10 +2,11 @@
 import { Component } from "../component";
 import { Events, ScaleTypes } from "../../interfaces";
 import { DOMUtils } from "../../services";
+import { Tools } from "../../tools";
 
 // D3 Imports
 import { brushX } from "d3-brush";
-import { event } from "d3-selection";
+import { event, mouse } from "d3-selection";
 import { scaleTime } from "d3-scale";
 
 // This class is used for handle brush events in chart
@@ -18,7 +19,11 @@ export class ChartBrush extends Component {
 
 	frontSelectionSelector = "rect.frontSelection"; // needs to match the class name in _grid-brush.scss
 
+	zoomService = this.services.zoom;
+
 	render(animate = true) {
+		const zoomRatio = this.zoomService.getZoomRatio();
+
 		const svg = this.parent;
 		// use this area to display selection above all graphs
 		const frontSelectionArea = this.getContainerSVG();
@@ -29,6 +34,14 @@ export class ChartBrush extends Component {
 		// use this area to handle d3 brush events
 		const brushArea = DOMUtils.appendOrSelect(backdrop, `g.${this.type}`);
 
+		if (
+			this.zoomService.isDataLoading() ||
+			this.zoomService.isEmptyState()
+		) {
+			brushArea.html(null);
+			return;
+		}
+
 		// set an id for rect.selection to be referred
 		const d3Selection = DOMUtils.appendOrSelect(
 			brushArea,
@@ -38,8 +51,17 @@ export class ChartBrush extends Component {
 		const { width, height } = DOMUtils.getSVGElementSize(backdrop, {
 			useAttrs: true
 		});
+		// initialization is not completed yet
+		if (width === 0 || height === 0) {
+			return;
+		}
 
 		const { cartesianScales } = this.services;
+		let axesLeftMargin = 0;
+		const axesMargins = this.model.get("axesMargins");
+		if (axesMargins && axesMargins.left) {
+			axesLeftMargin = axesMargins.left;
+		}
 		const mainXScaleType = cartesianScales.getMainXScaleType();
 		const mainXScale = cartesianScales.getMainXScale();
 		const [xScaleStart, xScaleEnd] = mainXScale.range();
@@ -49,13 +71,19 @@ export class ChartBrush extends Component {
 			this.frontSelectionSelector
 		);
 
+		const setDomain = (newDomain) => {
+			this.model.set({ zoomDomain: newDomain }, { animate: false });
+		};
+
 		if (mainXScale && mainXScaleType === ScaleTypes.TIME) {
 			// get current zoomDomain
 			let zoomDomain = this.model.get("zoomDomain");
 			if (zoomDomain === undefined) {
 				// default to full range with extended domain
 				zoomDomain = this.services.zoom.getDefaultZoomBarDomain();
-				this.model.set({ zoomDomain: zoomDomain }, { animate: false });
+				if (zoomDomain) {
+					setDomain(zoomDomain);
+				}
 			}
 
 			const updateSelectionDash = (selection) => {
@@ -127,37 +155,44 @@ export class ChartBrush extends Component {
 					});
 				}
 			};
+
+			const handleZoomDomain = (startPoint, endPoint) => {
+				// create xScale based on current zoomDomain
+				const xScale = scaleTime()
+					.range([axesLeftMargin, width])
+					.domain(zoomDomain);
+
+				let newDomain = [
+					xScale.invert(startPoint),
+					xScale.invert(endPoint)
+				];
+
+				// if selected start time and end time are the same
+				// reset to default full range
+				if (newDomain[0].valueOf() === newDomain[1].valueOf()) {
+					// same as d3 behavior and zoom bar behavior: set to default full range
+					newDomain = this.services.zoom.getDefaultZoomBarDomain();
+				}
+
+				// only if zoomDomain needs update
+				if (
+					zoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
+					zoomDomain[1].valueOf() !== newDomain[1].valueOf()
+				) {
+					// only dispatch zoom domain change event for triggering api call when event type equals to end
+					this.services.events.dispatchEvent(
+						Events.ZoomDomain.CHANGE,
+						{ newDomain }
+					);
+					setDomain(newDomain);
+				}
+			};
+
 			const brushed = () => {
 				const selection = event.selection;
 
 				if (selection !== null) {
-					// create xScale based on current zoomDomain
-					const xScale = scaleTime()
-						.range([0, width])
-						.domain(zoomDomain);
-
-					let newDomain = [
-						xScale.invert(selection[0]),
-						xScale.invert(selection[1])
-					];
-
-					// if selected start time and end time are the same
-					// reset to default full range
-					if (newDomain[0].valueOf() === newDomain[1].valueOf()) {
-						// same as d3 behavior and zoom bar behavior: set to default full range
-						newDomain = this.services.zoom.getDefaultZoomBarDomain();
-					}
-
-					// only if zoomDomain needs update
-					if (
-						zoomDomain[0].valueOf() !== newDomain[0].valueOf() ||
-						zoomDomain[1].valueOf() !== newDomain[1].valueOf()
-					) {
-						this.model.set(
-							{ zoomDomain: newDomain },
-							{ animate: false }
-						);
-					}
+					handleZoomDomain(selection[0], selection[1]);
 
 					// clear brush selection
 					brushArea.call(brush.move, null);
@@ -176,6 +211,26 @@ export class ChartBrush extends Component {
 				.on("end.brushed", brushed);
 
 			brushArea.call(brush);
+
+			backdrop.on("click", function () {
+				if (event.shiftKey) {
+					const coords = mouse(this);
+					const currentClickLocation = coords[0] - axesLeftMargin;
+
+					let leftPoint =
+						currentClickLocation - (width * zoomRatio) / 2;
+					if (leftPoint < 0) {
+						leftPoint = 0;
+					}
+					let rightPoint =
+						currentClickLocation + (width * zoomRatio) / 2;
+					if (rightPoint > width) {
+						rightPoint = width;
+					}
+
+					handleZoomDomain(leftPoint, rightPoint);
+				}
+			});
 		}
 	}
 }