Toolbar

packages/core/demo/data/index.ts

@@ -10,6 +10,7 @@ import * as stepDemos from "./step";
 import * as meterDemos from "./meter";
 import * as timeSeriesAxisDemos from "./time-series-axis";
 import * as radarDemos from "./radar";
+import * as toolbarDemos from "./toolbar";
 import * as zoomBarDemos from "./zoom-bar";
 
 export * from "./area";
@@ -762,6 +763,23 @@ let allDemoGroups = [
 			}
 		]
 	},
+	{
+		title: "Toolbar (alpha)",
+		demos: [
+			{
+				options: toolbarDemos.toolbarStackedBarTimeSeriesOptions,
+				data: toolbarDemos.toolbarStackedBarTimeSeriesData,
+				chartType: chartTypes.StackedBarChart,
+				isDemoExample: false
+			},
+			{
+				options: toolbarDemos.toolbarLineTimeSeriesOptions,
+				data: toolbarDemos.toolbarLineTimeSeriesData,
+				chartType: chartTypes.LineChart,
+				isDemoExample: false
+			}
+		]
+	},
 	{
 		title: "Zoom bar (alpha)",
 		demos: [

packages/core/demo/data/toolbar.ts

@@ -0,0 +1,48 @@
+import * as areaChart from "./area";
+import * as barChart from "./bar";
+import * as lineChart from "./line";
+import * as pieChart from "./pie";
+
+// utility function to update title and enable toolbar option
+const addToolbarOptions = (
+	options,
+	configs: any = { enableZoomBar: false, enableResetZoom: false }
+) => {
+	options.experimental = true;
+
+	let titlePostfix = " - enable Toolbar";
+	options.toolbar = {
+		enabled: true
+	};
+	if (configs.enableZoomBar) {
+		titlePostfix += ", Zoom bar";
+		options.zoomBar = {
+			top: {
+				enabled: true
+			}
+		};
+	}
+	if (configs.enableResetZoom) {
+		titlePostfix += ", Reset Zoom";
+		options.toolbar.overflowMenuItems = {
+			resetZoom: {
+				enabled: true
+			}
+		};
+	}
+	options.title += titlePostfix;
+	return options;
+};
+
+export const toolbarStackedBarTimeSeriesData =
+	barChart.stackedBarTimeSeriesData;
+export const toolbarStackedBarTimeSeriesOptions = addToolbarOptions(
+	Object.assign({}, barChart.stackedBarTimeSeriesOptions),
+	{ enableZoomBar: true }
+);
+
+export const toolbarLineTimeSeriesData = lineChart.lineTimeSeriesData;
+export const toolbarLineTimeSeriesOptions = addToolbarOptions(
+	Object.assign({}, lineChart.lineTimeSeriesOptions),
+	{ enableZoomBar: true, enableResetZoom: true }
+);

packages/core/src/axis-chart.ts

@@ -17,6 +17,7 @@ import {
 	Title,
 	AxisChartsTooltip,
 	Spacer,
+	Toolbar,
 	ZoomBar
 } from "./components";
 import { Tools } from "./tools";
@@ -41,6 +42,11 @@ export class AxisChart extends Chart {
 			"top",
 			"enabled"
 		);
+		const toolbarEnabled = Tools.getProperty(
+			this.model.getOptions(),
+			"toolbar",
+			"enabled"
+		);
 
 		this.services.cartesianScales.findDomainAndRangeAxes(); // need to do this before getMainXAxisPosition()
 		const mainXAxisPosition = this.services.cartesianScales.getMainXAxisPosition();
@@ -56,9 +62,41 @@ export class AxisChart extends Chart {
 			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,
+					[
+						// always add title to keep layout correct
+						titleComponent,
+						...(toolbarEnabled ? [toolbarComponent] : [])
+					],
+					{
+						direction: LayoutDirection.ROW
+					}
+				)
+			],
 			growth: {
 				x: LayoutGrowth.PREFERRED,
 				y: LayoutGrowth.FIXED
@@ -160,14 +198,20 @@ export class AxisChart extends Chart {
 			}
 		};
 
-		// Add chart title if it exists
 		const topLevelLayoutComponents = [];
-		if (this.model.getOptions().title) {
-			topLevelLayoutComponents.push(titleComponent);
+		// header component is required for either title or toolbar
+		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