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";
@@ -768,6 +769,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,70 @@
+import * as barChart from "./bar";
+import * as lineChart from "./line";
+
+// utility function to enable toolbar option
+const addToolbarOptions = (options, configs?) => {
+	options.experimental = true;
+
+	options.toolbar = {
+		enabled: true
+	};
+	options.zoomBar = {
+		top: {
+			enabled: true
+		}
+	};
+	options.toolbar.controls = [
+		{
+			type: "Zoom in",
+			text: "Zoom in"
+		},
+		{
+			type: "Zoom out",
+			text: "Zoom out"
+		},
+		{
+			type: "Reset zoom",
+			text: "Reset zoom"
+		}
+	];
+
+	if (configs) {
+		if (configs.titlePostfix) {
+			options.title += configs.titlePostfix;
+		}
+		if (configs.numberOfIcons) {
+			options.toolbar.numberOfIcons = configs.numberOfIcons;
+		}
+		if (configs.controls) {
+			options.toolbar.controls = configs.controls;
+		}
+	}
+
+	return options;
+};
+
+export const toolbarStackedBarTimeSeriesData =
+	barChart.stackedBarTimeSeriesData;
+export const toolbarStackedBarTimeSeriesOptions = addToolbarOptions(
+	Object.assign({}, barChart.stackedBarTimeSeriesOptions)
+);
+
+export const toolbarLineTimeSeriesData = lineChart.lineTimeSeriesData;
+export const toolbarLineTimeSeriesOptions = addToolbarOptions(
+	Object.assign({}, lineChart.lineTimeSeriesOptions),
+	{
+		titlePostfix: " - two icons",
+		numberOfIcons: 2,
+		controls: [
+			{
+				type: "Reset zoom"
+			},
+			{
+				type: "Zoom in"
+			},
+			{
+				type: "Zoom out"
+			}
+		]
+	}
+);

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: 15 } : undefined
+					)
+				],
 				growth: {
 					x: LayoutGrowth.PREFERRED,
 					y: LayoutGrowth.FIXED