@carbon/charts 0.34.7 → 0.34.11

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.34.7](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.6...v0.34.7) (2020-07-29)
+## [0.34.11](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.10...v0.34.11) (2020-08-12)
 
 **Note:** Version bump only for package @carbon/charts
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.34.6](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.5...v0.34.6) (2020-07-27)
+## [0.34.10](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.9...v0.34.10) (2020-08-11)
 
 **Note:** Version bump only for package @carbon/charts
 
@@ -19,37 +19,56 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.34.5](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.4...v0.34.5) (2020-07-22)
-
+# Change Log
 
-### Bug Fixes
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-* 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))
+## [0.34.9](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.8...v0.34.9) (2020-08-06)
 
+### Bug Fixes
 
+-   fix tooltip position with zoom bar enabled
+    ([#732](https://github.com/carbon-design-system/carbon-charts/issues/732))
+    ([280ab5e](https://github.com/carbon-design-system/carbon-charts/commit/280ab5edb2770c2b30f988b37e72c2c6f40016ff))
 
+## [0.34.8](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.7...v0.34.8) (2020-07-30)
 
+**Note:** Version bump only for package @carbon/charts
 
 # Change Log
 
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.34.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.3...v0.34.4) (2020-07-21)
+## [0.34.7](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.6...v0.34.7) (2020-07-29)
 
 **Note:** Version bump only for package @carbon/charts
 
+## [0.34.6](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.5...v0.34.6) (2020-07-27)
+
+**Note:** Version bump only for package @carbon/charts
 
+## [0.34.5](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.4...v0.34.5) (2020-07-22)
 
+### 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))
 
-## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20)
+# Change Log
 
-**Note:** Version bump only for package @carbon/charts
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.34.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.3...v0.34.4) (2020-07-21)
 
+**Note:** Version bump only for package @carbon/charts
 
+## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20)
 
+**Note:** Version bump only for package @carbon/charts
 
 ## [0.34.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.1...v0.34.2) (2020-07-15)
 

package/axis-chart.d.ts

@@ -1,6 +1,6 @@
 import { Chart } from "./chart";
-import { ChartConfig, AxisChartOptions } from "./interfaces/index";
-import { LayoutComponent, AxisChartsTooltip } from "./components/index";
+import { ChartConfig, AxisChartOptions } from "./interfaces";
+import { LayoutComponent, AxisChartsTooltip } from "./components";
 export declare class AxisChart extends Chart {
     services: any;
     constructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>);

package/axis-chart.js

@@ -19,21 +19,30 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
     return r;
 };
 import { Chart } from "./chart";
-import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions } from "./interfaces/index";
-import { LayoutComponent, Legend, Title, AxisChartsTooltip, Spacer } from "./components/index";
+import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions, AxisPositions, ScaleTypes } from "./interfaces";
+import { ChartBrush, ChartClip, LayoutComponent, Legend, Title, AxisChartsTooltip, Spacer, ZoomBar } from "./components";
 import { Tools } from "./tools";
-import { CartesianScales, Curves } from "./services/index";
+import { CartesianScales, Curves, Zoom } from "./services";
 var AxisChart = /** @class */ (function (_super) {
     __extends(AxisChart, _super);
     function AxisChart(holder, chartConfigs) {
         var _this = _super.call(this, holder, chartConfigs) || this;
         _this.services = Object.assign(_this.services, {
             cartesianScales: CartesianScales,
-            curves: Curves
+            curves: Curves,
+            zoom: Zoom
         });
         return _this;
     }
     AxisChart.prototype.getAxisChartComponents = function (graphFrameComponents) {
+        var isZoomBarEnabled = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "enabled");
+        this.services.cartesianScales.findDomainAndRangeAxes(); // need to do this before getMainXAxisPosition()
+        var mainXAxisPosition = this.services.cartesianScales.getMainXAxisPosition();
+        var mainXScaleType = Tools.getProperty(this.model.getOptions(), "axes", mainXAxisPosition, "scaleType");
+        // @todo - Zoom Bar only supports main axis at BOTTOM axis and time scale for now
+        var zoomBarEnabled = isZoomBarEnabled &&
+            mainXAxisPosition === AxisPositions.BOTTOM &&
+            mainXScaleType === ScaleTypes.TIME;
         var titleComponent = {
             id: "title",
             components: [new Title(this.model, this.services)],
@@ -50,6 +59,9 @@ var AxisChart = /** @class */ (function (_super) {
                 y: LayoutGrowth.FIXED
             }
         };
+        if (zoomBarEnabled) {
+            graphFrameComponents.push(new ChartClip(this.model, this.services), new ChartBrush(this.model, this.services));
+        }
         var graphFrameComponent = {
             id: "graph-frame",
             components: graphFrameComponents,
@@ -105,6 +117,14 @@ var AxisChart = /** @class */ (function (_super) {
                 y: LayoutGrowth.FIXED
             }
         };
+        var zoomBarComponent = {
+            id: "zoom-bar",
+            components: [new ZoomBar(this.model, this.services)],
+            growth: {
+                x: LayoutGrowth.PREFERRED,
+                y: LayoutGrowth.FIXED
+            }
+        };
         // Add chart title if it exists
         var topLevelLayoutComponents = [];
         if (this.model.getOptions().title) {
@@ -119,6 +139,9 @@ var AxisChart = /** @class */ (function (_super) {
             };
             topLevelLayoutComponents.push(titleSpacerComponent);
         }
+        if (zoomBarEnabled) {
+            topLevelLayoutComponents.push(zoomBarComponent);
+        }
         topLevelLayoutComponents.push(fullFrameComponent);
         return [
             new AxisChartsTooltip(this.model, this.services),

package/axis-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"axis-chart.js","sourceRoot":"","sources":["axis-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { Chart } from \"./chart\";\nimport {\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLegendOrientations,\n\tLegendPositions,\n\tChartConfig,\n\tAxisChartOptions\n} from \"./interfaces/index\";\nimport {\n\tLayoutComponent,\n\tLegend,\n\tTitle,\n\tAxisChartsTooltip,\n\tSpacer\n} from \"./components/index\";\nimport { Tools } from \"./tools\";\n\nimport { CartesianScales, Curves } from \"./services/index\";\n\nexport class AxisChart extends Chart {\n\tservices: any = Object.assign(this.services, {\n\t\tcartesianScales: CartesianScales,\n\t\tcurves: Curves\n\t});\n\n\tconstructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>) {\n\t\tsuper(holder, chartConfigs);\n\t}\n\n\tprotected getAxisChartComponents(graphFrameComponents: any[]) {\n\t\tconst titleComponent = {\n\t\t\tid: \"title\",\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst legendComponent = {\n\t\t\tid: \"legend\",\n\t\t\tcomponents: [new Legend(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: \"graph-frame\",\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\t// if the chart is loading but has data, don't enable legend until loading is false\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"data\",\n\t\t\t\"loading\"\n\t\t);\n\t\tconst isLegendEnabled =\n\t\t\tthis.model.getOptions().legend.enabled !== false && !isDataLoading;\n\n\t\t// Decide the position of the legend in reference to the chart\n\t\tlet fullFrameComponentDirection = LayoutDirection.COLUMN;\n\t\tif (isLegendEnabled) {\n\t\t\tconst legendPosition = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"legend\",\n\t\t\t\t\"position\"\n\t\t\t);\n\t\t\tif (legendPosition === LegendPositions.LEFT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.RIGHT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW_REVERSE;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.BOTTOM) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;\n\t\t\t}\n\t\t}\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: \"spacer\",\n\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: \"full-frame\",\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\t...(isLegendEnabled ? [legendSpacerComponent] : []),\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\t// Add chart title if it exists\n\t\tconst topLevelLayoutComponents = [];\n\t\tif (this.model.getOptions().title) {\n\t\t\ttopLevelLayoutComponents.push(titleComponent);\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: \"spacer\",\n\t\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\t\tgrowth: {\n\t\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t\t}\n\t\t\t};\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent);\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent);\n\n\t\treturn [\n\t\t\tnew AxisChartsTooltip(this.model, this.services),\n\t\t\tnew LayoutComponent(\n\t\t\t\tthis.model,\n\t\t\t\tthis.services,\n\t\t\t\ttopLevelLayoutComponents,\n\t\t\t\t{\n\t\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t\t}\n\t\t\t)\n\t\t];\n\t}\n}\n"]}
+{"version":3,"file":"axis-chart.js","sourceRoot":"","sources":["axis-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { Chart } from \"./chart\";\nimport {\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLegendOrientations,\n\tLegendPositions,\n\tChartConfig,\n\tAxisChartOptions,\n\tAxisPositions,\n\tScaleTypes\n} from \"./interfaces\";\nimport {\n\tChartBrush,\n\tChartClip,\n\tLayoutComponent,\n\tLegend,\n\tTitle,\n\tAxisChartsTooltip,\n\tSpacer,\n\tZoomBar\n} from \"./components\";\nimport { Tools } from \"./tools\";\n\nimport { CartesianScales, Curves, Zoom } from \"./services\";\n\nexport class AxisChart extends Chart {\n\tservices: any = Object.assign(this.services, {\n\t\tcartesianScales: CartesianScales,\n\t\tcurves: Curves,\n\t\tzoom: Zoom\n\t});\n\n\tconstructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>) {\n\t\tsuper(holder, chartConfigs);\n\t}\n\n\tprotected getAxisChartComponents(graphFrameComponents: any[]) {\n\t\tconst isZoomBarEnabled = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"enabled\"\n\t\t);\n\n\t\tthis.services.cartesianScales.findDomainAndRangeAxes(); // need to do this before getMainXAxisPosition()\n\t\tconst mainXAxisPosition = this.services.cartesianScales.getMainXAxisPosition();\n\t\tconst mainXScaleType = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"axes\",\n\t\t\tmainXAxisPosition,\n\t\t\t\"scaleType\"\n\t\t);\n\t\t// @todo - Zoom Bar only supports main axis at BOTTOM axis and time scale for now\n\t\tconst zoomBarEnabled =\n\t\t\tisZoomBarEnabled &&\n\t\t\tmainXAxisPosition === AxisPositions.BOTTOM &&\n\t\t\tmainXScaleType === ScaleTypes.TIME;\n\n\t\tconst titleComponent = {\n\t\t\tid: \"title\",\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst legendComponent = {\n\t\t\tid: \"legend\",\n\t\t\tcomponents: [new Legend(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tif (zoomBarEnabled) {\n\t\t\tgraphFrameComponents.push(\n\t\t\t\tnew ChartClip(this.model, this.services),\n\t\t\t\tnew ChartBrush(this.model, this.services)\n\t\t\t);\n\t\t}\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: \"graph-frame\",\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\t// if the chart is loading but has data, don't enable legend until loading is false\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"data\",\n\t\t\t\"loading\"\n\t\t);\n\t\tconst isLegendEnabled =\n\t\t\tthis.model.getOptions().legend.enabled !== false && !isDataLoading;\n\n\t\t// Decide the position of the legend in reference to the chart\n\t\tlet fullFrameComponentDirection = LayoutDirection.COLUMN;\n\t\tif (isLegendEnabled) {\n\t\t\tconst legendPosition = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"legend\",\n\t\t\t\t\"position\"\n\t\t\t);\n\t\t\tif (legendPosition === LegendPositions.LEFT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.RIGHT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW_REVERSE;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.BOTTOM) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;\n\t\t\t}\n\t\t}\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: \"spacer\",\n\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: \"full-frame\",\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\t...(isLegendEnabled ? [legendSpacerComponent] : []),\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst zoomBarComponent = {\n\t\t\tid: \"zoom-bar\",\n\t\t\tcomponents: [new ZoomBar(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\t// Add chart title if it exists\n\t\tconst topLevelLayoutComponents = [];\n\t\tif (this.model.getOptions().title) {\n\t\t\ttopLevelLayoutComponents.push(titleComponent);\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: \"spacer\",\n\t\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\t\tgrowth: {\n\t\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t\t}\n\t\t\t};\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent);\n\t\t}\n\t\tif (zoomBarEnabled) {\n\t\t\ttopLevelLayoutComponents.push(zoomBarComponent);\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent);\n\n\t\treturn [\n\t\t\tnew AxisChartsTooltip(this.model, this.services),\n\t\t\tnew LayoutComponent(\n\t\t\t\tthis.model,\n\t\t\t\tthis.services,\n\t\t\t\ttopLevelLayoutComponents,\n\t\t\t\t{\n\t\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t\t}\n\t\t\t)\n\t\t];\n\t}\n}\n"]}

package/build/demo/data/bar.d.ts

@@ -68,6 +68,21 @@ export declare const simpleBarOptions: {
         };
     };
 };
+export declare const simpleBarCustomLegendOrderOptions: {
+    title: string;
+    axes: {
+        left: {
+            mapsTo: string;
+        };
+        bottom: {
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    legend: {
+        order: string[];
+    };
+};
 export declare const simpleBarDataCustomTicks: {
     group: string;
     value: number;

package/build/demo/data/zoom-bar.d.ts

@@ -0,0 +1,74 @@
+export declare const zoomBarStackedAreaTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const zoomBarStackedAreaTimeSeriesOptions: any;
+export declare const zoomBarSimpleBarTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const zoomBarSimpleBarTimeSeriesOptions: any;
+export declare const zoomBarStackedBarTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const zoomBarStackedBarTimeSeriesOptions: any;
+export declare const definedZoomBarStackedBarTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const definedZoomBarStackedBarTimeSeriesOptions: any;
+export declare const zoomBarBubbleTimeSeriesData: ({
+    group: string;
+    date: Date;
+    value: number;
+} & {
+    surplus: number;
+})[];
+export declare const zoomBarBubbleTimeSeriesOptions: any;
+export declare const zoomBarLineTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const zoomBarLineTimeSeriesOptions: any;
+export declare const zoomBarScatterTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const zoomBarScatterTimeSeriesOptions: any;
+export declare const zoomBarStepTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const zoomBarStepTimeSeriesOptions: any;
+export declare const zoomBarLineTimeSeries15secondsData: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: {
+            date: Date;
+            value: number;
+        }[];
+    }[];
+};
+export declare const zoomBarLineTimeSeries15secondsOptions: any;
+export declare const zoomBarLineTimeSeriesInitDomainData: {
+    labels: string[];
+    datasets: {
+        label: string;
+        data: {
+            date: Date;
+            value: number;
+        }[];
+    }[];
+};
+export declare const zoomBarLineTimeSeriesInitDomainOptions: any;
+export declare const zoomBarSkeletonData: any[];
+export declare const zoomBarSkeletonOptions: any;

package/build/src/axis-chart.d.ts

@@ -1,6 +1,6 @@
 import { Chart } from "./chart";
-import { ChartConfig, AxisChartOptions } from "./interfaces/index";
-import { LayoutComponent, AxisChartsTooltip } from "./components/index";
+import { ChartConfig, AxisChartOptions } from "./interfaces";
+import { LayoutComponent, AxisChartsTooltip } from "./components";
 export declare class AxisChart extends Chart {
     services: any;
     constructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>);

package/build/src/components/axes/axis.d.ts

@@ -6,7 +6,11 @@ export declare class Axis extends Component {
     margins: any;
     scale: any;
     scaleType: ScaleTypes;
+    zoomDomainChanging: boolean;
     constructor(model: ChartModel, services: any, configs?: any);
+    init(): void;
+    handleZoomBarSelectionStart: () => void;
+    handleZoomBarSelectionEnd: () => void;
     render(animate?: boolean): void;
     addEventListeners(): void;
     getInvisibleAxisRef(): any;

package/build/src/components/axes/chart-clip.d.ts

@@ -0,0 +1,11 @@
+import { Component } from "../component";
+import { ChartModel } from "../../model";
+export declare class ChartClip extends Component {
+    type: string;
+    chartClipId: string;
+    chartClipPath: any;
+    constructor(model: ChartModel, services: any, configs?: any);
+    init(): void;
+    render(animate?: boolean): void;
+    createClipPath(): void;
+}

package/build/src/components/axes/grid-brush.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "../component";
+export declare class ChartBrush extends Component {
+    static DASH_LENGTH: number;
+    type: string;
+    selectionSelector: string;
+    frontSelectionSelector: string;
+    render(animate?: boolean): void;
+}

package/build/src/components/axes/zoom-bar.d.ts

@@ -0,0 +1,21 @@
+import { Component } from "../component";
+export declare class ZoomBar extends Component {
+    type: string;
+    MIN_SELECTION_DIFF: number;
+    brushSelector: string;
+    maxSelectionRange: [0, 0];
+    clipId: string;
+    brush: import("d3-brush").BrushBehavior<unknown>;
+    xScale: any;
+    yScale: any;
+    init(): void;
+    render(animate?: boolean): void;
+    addBrushEventListener(zoomDomain: any, axesLeftMargin: any, width: any): void;
+    handleBrushedEvent(zoomDomain: any, scale: any, selection: any): void;
+    updateBrushHandle(svg: any, selection: any, domain: any): void;
+    updateSliderSelectedArea(selection: any): void;
+    renderZoomBarArea(container: any, querySelector: any, data: any, clipId: any): void;
+    updateClipPath(svg: any, clipId: any, x: any, y: any, width: any, height: any): void;
+    compensateDataForDefaultDomain(data: any, defaultDomain: any): void;
+    destroy(): void;
+}

package/build/src/components/component.d.ts

@@ -13,5 +13,7 @@ export declare class Component {
     setServices(newObj: any): void;
     setParent(parent: any): void;
     getParent(): any;
-    getContainerSVG(): any;
+    getContainerSVG(configs?: {
+        withinChartClip: boolean;
+    }): any;
 }

package/build/src/components/essentials/legend.d.ts

@@ -2,6 +2,7 @@ import { Component } from "../component";
 export declare class Legend extends Component {
     type: string;
     render(): void;
+    sortDataGroups(dataGroups: any, legendOrder: any): any;
     breakItemsIntoLines(addedLegendItems: any): void;
     addEventListeners(): void;
 }

package/build/src/components/graphs/bar.d.ts

@@ -1,4 +1,5 @@
 import { Component } from "../component";
 export declare class Bar extends Component {
     protected getBarWidth(allDataLabels?: string[]): number;
+    protected isOutsideZoomedDomain(x0: number, x1: number): boolean;
 }

package/build/src/components/graphs/scatter.d.ts

@@ -3,6 +3,7 @@ import { Selection } from "d3-selection";
 export declare class Scatter extends Component {
     type: string;
     init(): void;
+    filterBasedOnZoomDomain(data: any): any;
     render(animate: boolean): void;
     isDatapointThresholdAnomaly(datum: any, index: number): boolean;
     styleCircles(selection: Selection<any, any, any, any>, animate: boolean): void;

package/build/src/components/index.d.ts

@@ -22,7 +22,10 @@ export * from "./layout/spacer";
 export * from "./layout/layout";
 export * from "./axes/two-dimensional-axes";
 export * from "./axes/axis";
+export * from "./axes/grid-brush";
+export * from "./axes/chart-clip";
 export * from "./axes/grid";
 export * from "./axes/ruler";
 export * from "./axes/ruler-stacked-bar";
 export * from "./axes/zero-line";
+export * from "./axes/zoom-bar";

package/build/src/configuration.d.ts

@@ -1,4 +1,4 @@
-import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, AreaChartOptions, PieChartOptions, GaugeChartOptions, DonutChartOptions, BubbleChartOptions, RadarChartOptions, GridOptions, TimeScaleOptions, TooltipOptions, LegendOptions, MeterChartOptions } from "./interfaces";
+import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, AreaChartOptions, PieChartOptions, GaugeChartOptions, DonutChartOptions, BubbleChartOptions, RadarChartOptions, GridOptions, TimeScaleOptions, TooltipOptions, LegendOptions, MeterChartOptions, ZoomBarTypes } from "./interfaces";
 /**
  * Legend options
  */
@@ -88,5 +88,12 @@ export declare const spacers: {
         size: number;
     };
 };
+export declare const zoomBar: {
+    height: {
+        [ZoomBarTypes.GRAPH_VIEW]: number;
+        [ZoomBarTypes.SLIDER_VIEW]: number;
+    };
+    spacerHeight: number;
+};
 export declare const tickSpaceRatioVertical = 2.5;
 export declare const tickSpaceRatioHorizontal = 3.5;

package/build/src/interfaces/charts.d.ts

@@ -1,5 +1,5 @@
 import { GaugeTypes, Statuses, ArrowDirections, Alignments } from "./enums";
-import { LegendOptions, TooltipOptions, GridOptions, AxesOptions } from "./index";
+import { LegendOptions, TooltipOptions, GridOptions, AxesOptions, ZoomBarsOptions } from "./index";
 import { BarOptions, StackedBarOptions } from "./components";
 import { TimeScaleOptions } from "./axis-scales";
 /**
@@ -66,7 +66,7 @@ export interface BaseChartOptions {
         /**
          * used to simulate data loading
          */
-        loading?: Boolean;
+        loading?: boolean;
         /**
          * options related to pre-selected data groups
          * Remains empty if every legend item is active or dataset doesn't have the data groups.
@@ -90,6 +90,10 @@ export interface AxisChartOptions extends BaseChartOptions {
     axes?: AxesOptions;
     grid?: GridOptions;
     timeScale?: TimeScaleOptions;
+    /**
+     * zoombar configuration
+     */
+    zoomBar?: ZoomBarsOptions;
 }
 /**
  * options specific to bar charts

package/build/src/interfaces/components.d.ts

@@ -1,4 +1,4 @@
-import { LayoutGrowth, LegendPositions, Alignments } from "./enums";
+import { LayoutGrowth, LegendPositions, Alignments, ZoomBarTypes } from "./enums";
 import { Component } from "../components/component";
 import { TruncationOptions } from "./truncation";
 /**
@@ -34,19 +34,20 @@ export interface LegendOptions {
     clickable?: boolean;
     items?: {
         status?: {
-            ACTIVE?: Number;
-            DISABLED?: Number;
+            ACTIVE?: number;
+            DISABLED?: number;
         };
-        horizontalSpace?: Number;
-        verticalSpace?: Number;
-        textYOffset?: Number;
+        horizontalSpace?: number;
+        verticalSpace?: number;
+        textYOffset?: number;
     };
     checkbox?: {
-        radius?: Number;
-        spaceAfter?: Number;
+        radius?: number;
+        spaceAfter?: number;
     };
     truncation?: TruncationOptions;
     alignment?: Alignments;
+    order?: string[];
 }
 export interface TooltipOptions {
     /**
@@ -105,3 +106,33 @@ export interface BarOptions {
 export interface StackedBarOptions extends BarOptions {
     dividerSize?: number;
 }
+/**
+ * customize the ZoomBars in a chart
+ */
+export interface ZoomBarsOptions {
+    /**
+     * currently only the top position is supported
+     */
+    top?: ZoomBarOptions;
+}
+/**
+ * customize the ZoomBar component
+ */
+export interface ZoomBarOptions {
+    /**
+     * is the zoom-bar visible or not
+     */
+    enabled?: boolean;
+    /**
+     * whether the zoom bar is showing a slider view or a graph view etc.
+     */
+    type?: ZoomBarTypes;
+    /**
+     * an two element array which represents the initial zoom domain
+     */
+    initialZoomDomain?: Object[];
+    /**
+     * options related to zoom bar data
+     */
+    data?: Object[];
+}

package/build/src/interfaces/enums.d.ts

@@ -18,6 +18,13 @@ export declare enum AxisPositions {
     TOP = "top",
     BOTTOM = "bottom"
 }
+/**
+ * enum of all possible axis positions
+ */
+export declare enum ZoomBarTypes {
+    GRAPH_VIEW = "graph_view",
+    SLIDER_VIEW = "slider_view"
+}
 /**
  * enum of all possible truncation types
  */

package/build/src/interfaces/events.d.ts

@@ -13,6 +13,15 @@ export declare enum Chart {
 export declare enum Model {
     UPDATE = "model-update"
 }
+/**
+ * enum of all events related to the zoom-bar
+ */
+export declare enum ZoomBar {
+    UPDATE = "zoom-bar-update",
+    SELECTION_START = "zoom-bar-selection-start",
+    SELECTION_IN_PROGRESS = "zoom-bar-selection-in-progress",
+    SELECTION_END = "zoom-bar-selection-end"
+}
 /**
  * enum of all axis-related events
  */

package/build/src/model.d.ts

@@ -40,7 +40,7 @@ export declare class ChartModel {
      * @return {Object} The chart's options
      */
     getOptions(): any;
-    set(newState: any, skipUpdate?: boolean): void;
+    set(newState: any, configs?: any): void;
     get(property?: string): any;
     /**
      *
@@ -52,7 +52,7 @@ export declare class ChartModel {
      * Updates miscellanous information within the model
      * such as the color scales, or the legend data labels
      */
-    update(): void;
+    update(animate?: boolean): void;
     setUpdateCallback(cb: Function): void;
     toggleDataLabel(changedLabel: string): void;
     /**
@@ -80,7 +80,7 @@ export declare class ChartModel {
     protected updateAllDataGroups(): void;
     protected generateDataGroups(data: any): {
         name: string;
-        status: Number;
+        status: number;
     }[];
     protected setColorScale(): void;
 }

package/build/src/services/index.d.ts

@@ -3,3 +3,4 @@ export * from "./essentials/events";
 export * from "./essentials/transitions";
 export * from "./scales-cartesian";
 export * from "./curves";
+export * from "./zoom";

package/build/src/services/scales-cartesian.d.ts

@@ -1,5 +1,5 @@
 import { Service } from "./service";
-import { AxisPositions, CartesianOrientations, ThresholdOptions } from "../interfaces";
+import { AxisPositions, CartesianOrientations, ScaleTypes, ThresholdOptions } from "../interfaces";
 export declare class CartesianScales extends Service {
     protected scaleTypes: {
         top: any;
@@ -35,9 +35,12 @@ export declare class CartesianScales extends Service {
     getMainYAxisPosition(): AxisPositions;
     getMainXScale(): any;
     getMainYScale(): any;
-    getValueFromScale(axisPosition: AxisPositions, datum: any, index?: number): any;
+    getValueFromScale(scale: any, scaleType: ScaleTypes, axisPosition: AxisPositions, datum: any, index?: number): any;
+    getValueThroughAxisPosition(axisPosition: AxisPositions, datum: any, index?: number): any;
     getDomainValue(d: any, i: any): any;
     getRangeValue(d: any, i: any): any;
+    getMainXScaleType(): any;
+    getMainYScaleType(): any;
     getDomainIdentifier(): any;
     getRangeIdentifier(): any;
     /** Uses the Y Axis to get data items associated with that value. */
@@ -51,11 +54,11 @@ export declare class CartesianScales extends Service {
     };
     protected getScaleDomain(axisPosition: AxisPositions): any;
     protected createScale(axisPosition: AxisPositions): any;
-    getHighestDomainThreshold(): null | {
+    protected getHighestDomainThreshold(): null | {
         threshold: ThresholdOptions;
         scaleValue: number;
     };
-    getHighestRangeThreshold(): null | {
+    protected getHighestRangeThreshold(): null | {
         threshold: ThresholdOptions;
         scaleValue: number;
     };

package/build/src/services/zoom.d.ts

@@ -0,0 +1,5 @@
+import { Service } from "./service";
+export declare class Zoom extends Service {
+    getZoomBarData(): {}[];
+    getDefaultZoomBarDomain(): any;
+}