@carbon/charts 0.32.9 → 0.33.0

package/README.md

@@ -17,26 +17,36 @@ instead:
 yarn add @carbon/charts d3
 ```
 
-**Note:** you'd also need to install `carbon-components` if you're not using a bundled version of the library.
+**Note:** you'd also need to install `carbon-components` if you're not using a
+bundled version of the library.
 
 ## Step-by-step instructions
 
-Read [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--vanilla)
+Read
+[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--vanilla)
 
 ## Codesandbox examples
 
 [Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts).
 
-**When opening the link above**, click on the **Edit on Codesandbox** button for each demo to see an isolated project showing you how to reproduce the demo.
+**When opening the link above**, click on the **Edit on Codesandbox** button for
+each demo to see an isolated project showing you how to reproduce the demo.
 
 ## Charting data & options
 
-Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
+Although we will definitely introduce new models in the future as we start
+shipping new components such as maps, Data and options follow the same model in
+all charts, with minor exceptions and differences in specific components.
 
-For instance in the case of a donut chart you're able to pass in an additional field called `center` in your options configuring the donut center.
+For instance in the case of a donut chart you're able to pass in an additional
+field called `center` in your options configuring the donut center.
 
-For instructions on using the **tabular data format**, see [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
+For instructions on using the **tabular data format**, see
+[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
 
-There are also additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+There are also additional options available depending on the chart type being
+used,
+[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
 
-Customizable options (specific to chart type) can be found [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
+Customizable options (specific to chart type) can be found
+[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)

package/axis-chart.js

@@ -19,8 +19,8 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
     return r;
 };
 import { Chart } from "./chart";
-import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions, } from "./interfaces/index";
-import { LayoutComponent, Legend, Title, Spacer, } from "./components/index";
+import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions } from "./interfaces/index";
+import { LayoutComponent, Legend, Title, Spacer } from "./components/index";
 import { Tools } from "./tools";
 import { CartesianScales, Curves } from "./services/index";
 var AxisChart = /** @class */ (function (_super) {
@@ -29,7 +29,7 @@ var AxisChart = /** @class */ (function (_super) {
         var _this = _super.call(this, holder, chartConfigs) || this;
         _this.services = Object.assign(_this.services, {
             cartesianScales: CartesianScales,
-            curves: Curves,
+            curves: Curves
         });
         return _this;
     }
@@ -39,24 +39,24 @@ var AxisChart = /** @class */ (function (_super) {
             components: [new Title(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var legendComponent = {
             id: "legend",
             components: [new Legend(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var graphFrameComponent = {
             id: "graph-frame",
             components: graphFrameComponents,
             growth: {
                 x: LayoutGrowth.STRETCH,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var isLegendEnabled = this.model.getOptions().legend.enabled !== false;
         // Decide the position of the legend in reference to the chart
@@ -86,23 +86,23 @@ var AxisChart = /** @class */ (function (_super) {
             components: [new Spacer(this.model, this.services)],
             growth: {
                 x: LayoutGrowth.PREFERRED,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         var fullFrameComponent = {
             id: "full-frame",
             components: [
                 new LayoutComponent(this.model, this.services, __spreadArrays((isLegendEnabled ? [legendComponent] : []), [
                     legendSpacerComponent,
-                    graphFrameComponent,
+                    graphFrameComponent
                 ]), {
-                    direction: fullFrameComponentDirection,
-                }),
+                    direction: fullFrameComponentDirection
+                })
             ],
             growth: {
                 x: LayoutGrowth.STRETCH,
-                y: LayoutGrowth.FIXED,
-            },
+                y: LayoutGrowth.FIXED
+            }
         };
         // Add chart title if it exists
         var topLevelLayoutComponents = [];
@@ -113,16 +113,16 @@ var AxisChart = /** @class */ (function (_super) {
                 components: [new Spacer(this.model, this.services)],
                 growth: {
                     x: LayoutGrowth.PREFERRED,
-                    y: LayoutGrowth.FIXED,
-                },
+                    y: LayoutGrowth.FIXED
+                }
             };
             topLevelLayoutComponents.push(titleSpacerComponent);
         }
         topLevelLayoutComponents.push(fullFrameComponent);
         return [
             new LayoutComponent(this.model, this.services, topLevelLayoutComponents, {
-                direction: LayoutDirection.COLUMN,
-            }),
+                direction: LayoutDirection.COLUMN
+            })
         ];
     };
     return AxisChart;

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\tTooltip,\n\tTooltipBar,\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\tconst isLegendEnabled =\n\t\t\tthis.model.getOptions().legend.enabled !== false;\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\tlegendSpacerComponent,\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 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} from \"./interfaces/index\";\nimport {\n\tLayoutComponent,\n\tLegend,\n\tTitle,\n\tTooltip,\n\tTooltipBar,\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\tconst isLegendEnabled =\n\t\t\tthis.model.getOptions().legend.enabled !== false;\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\tlegendSpacerComponent,\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 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/area.d.ts

@@ -55,6 +55,23 @@ export declare const stackedAreaTimeSeriesOptions: {
     };
     curve: string;
 };
+export declare const stackedAreaTimeSeriesUnevenData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const stackedAreaTimeSeriesUnevenDataOptions: {
+    title: string;
+    axes: {
+        left: {
+            stacked: boolean;
+        };
+        bottom: {
+            scaleType: string;
+        };
+    };
+    curve: string;
+};
 export declare const stackedAreaPercentageTimeSeriesOptions: {
     title: string;
     axes: {

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

@@ -15,6 +15,26 @@ export declare const groupedBarOptions: {
         };
     };
 };
+export declare const groupedBarSelectedGroupsData: {
+    group: string;
+    key: string;
+    value: number;
+}[];
+export declare const groupedBarSelectedGroupsOptions: {
+    title: string;
+    data: {
+        selectedGroups: string[];
+    };
+    axes: {
+        left: {
+            mapsTo: string;
+        };
+        bottom: {
+            scaleType: string;
+            mapsTo: string;
+        };
+    };
+};
 export declare const groupedHorizontalBarData: {
     group: string;
     key: string;
@@ -48,6 +68,29 @@ export declare const simpleBarOptions: {
         };
     };
 };
+export declare const simpleBarLongLabelData: {
+    group: string;
+    value: number;
+}[];
+export declare const simpleBarLongLabelOptions: {
+    title: string;
+    axes: {
+        left: {
+            mapsTo: string;
+        };
+        bottom: {
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    legend: {
+        truncation: {
+            type: string;
+            threshold: number;
+            numCharacter: number;
+        };
+    };
+};
 export declare const simpleBarFixedDomainOptions: {
     title: string;
     axes: {
@@ -65,6 +108,10 @@ export declare const simpleHorizontalBarData: {
     group: string;
     value: number;
 }[];
+export declare const simpleHorizontalBarLongLabelData: {
+    group: string;
+    value: number;
+}[];
 export declare const simpleHorizontalBarOptions: {
     title: string;
     axes: {
@@ -77,6 +124,30 @@ export declare const simpleHorizontalBarOptions: {
         };
     };
 };
+export declare const simpleHorizontalBarLongLabelOptions: {
+    title: string;
+    axes: {
+        left: {
+            mapsTo: string;
+            scaleType: string;
+            truncation: {
+                type: string;
+                threshold: number;
+                numCharacter: number;
+            };
+        };
+        bottom: {
+            mapsTo: string;
+        };
+    };
+    legend: {
+        truncation: {
+            type: string;
+            threshold: number;
+            numCharacter: number;
+        };
+    };
+};
 export declare const simpleBarTimeSeriesData: {
     group: string;
     date: Date;

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

@@ -24,6 +24,32 @@ export declare const lineOptions: {
         };
     };
 };
+export declare const lineLongLabelData: ({
+    group: string;
+    key: string;
+    value: number;
+    audienceSize?: undefined;
+} | {
+    group: string;
+    key: string;
+    value: number;
+    audienceSize: number;
+})[];
+export declare const lineLongLabelOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+};
 export declare const lineCustomDomainOptions: {
     title: string;
     axes: {
@@ -41,6 +67,35 @@ export declare const lineCustomDomainOptions: {
         };
     };
 };
+export declare const lineSelectedGroupsData: ({
+    group: string;
+    key: string;
+    value: number;
+    audienceSize?: undefined;
+} | {
+    group: string;
+    key: string;
+    value: number;
+    audienceSize: number;
+})[];
+export declare const lineSelectedGroupsOptions: {
+    title: string;
+    data: {
+        selectedGroups: string[];
+    };
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+};
 export declare const lineTimeSeriesData: {
     group: string;
     date: Date;

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

@@ -36,6 +36,24 @@ export declare const scatterDiscreteOptions: {
         };
     };
 };
+export declare const scatterLongLabelDiscreteData: {
+    group: string;
+    key: string;
+    value: number;
+}[];
+export declare const scatterLongLabelDiscreteOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            scaleType: string;
+            mapsTo: string;
+        };
+        left: {
+            mapsTo: string;
+        };
+    };
+};
 export declare const scatterTimeSeriesData: {
     group: string;
     date: Date;

package/build/src/components/essentials/tooltip-bar.d.ts

@@ -1,5 +1,5 @@
 import { Tooltip } from "./tooltip";
-import { TooltipPosition } from "./../../interfaces";
+import { TooltipPosition, TooltipTypes } from "./../../interfaces";
 export declare class TooltipBar extends Tooltip {
     init(): void;
     /**
@@ -18,7 +18,7 @@ export declare class TooltipBar extends Tooltip {
      * Returns the html for the bar single point tooltip
      * @param data associated values for the hovered bar
      */
-    getTooltipHTML(data: any): string;
+    getTooltipHTML(data: any, type: TooltipTypes): string;
     /**
      * Multip tooltips for bar charts include totals for each stack
      * @param data

package/build/src/components/essentials/tooltip-radar.d.ts

@@ -1,4 +1,5 @@
 import { Tooltip } from "./tooltip";
+import { TooltipTypes } from "../../interfaces";
 export declare class TooltipRadar extends Tooltip {
-    getMultilineTooltipHTML(data: any): string;
+    getMultilineTooltipHTML(data: any, type: TooltipTypes): string;
 }

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

@@ -9,9 +9,9 @@ export declare class Tooltip extends Component {
     constructor(model: ChartModel, services: any, configs?: any);
     init(): void;
     getTooltipHTML(data: any, type: TooltipTypes): string;
-    getMultilineTooltipHTML(data: any): string;
+    getMultilineTooltipHTML(data: any, type: TooltipTypes): string;
     render(): void;
-    getTooltipPosition(hoveredElement: any): {
+    getTooltipPosition(hoveredElement: any, type: TooltipTypes): {
         placement: TooltipPosition;
         position: {
             left: number;

package/build/src/interfaces/axis-scales.d.ts

@@ -2,6 +2,7 @@ import { ScaleTypes } from "./enums";
 import { AxisDomain } from "d3";
 import { Locale } from "date-fns";
 import { ThresholdOptions } from "./components";
+import { TruncationOptions } from "./truncation";
 /**
  * options to configure a scale. not all options are used by all scales
  */
@@ -77,6 +78,7 @@ export interface AxisOptions {
          */
         formatter?: Function;
     };
+    truncation?: TruncationOptions;
 }
 /**
  * customize time series scales

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

@@ -67,6 +67,11 @@ export interface BaseChartOptions {
          * used to simulate data loading
          */
         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.
+         */
+        selectedGroups?: string[];
     };
     /**
      * options related to color scales

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

@@ -1,5 +1,6 @@
 import { LayoutGrowth, LegendPositions } from "./enums";
 import { Component } from "../components/component";
+import { TruncationOptions } from "./truncation";
 /**
  * customize the overlay contents
  */
@@ -47,6 +48,7 @@ export interface LegendOptions {
         radius?: Number;
         spaceAfter?: Number;
     };
+    truncation?: TruncationOptions;
 }
 export interface TooltipOptions {
     /**

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

@@ -18,6 +18,15 @@ export declare enum AxisPositions {
     TOP = "top",
     BOTTOM = "bottom"
 }
+/**
+ * enum of all possible truncation types
+ */
+export declare enum TruncationTypes {
+    END_LINE = "end_line",
+    MID_LINE = "mid_line",
+    FRONT_LINE = "front_line",
+    NONE = "none"
+}
 /**
  * enum of all possible cartesian orientations
  * to be used for determining the orientation
@@ -51,7 +60,9 @@ export declare enum TooltipPosition {
 export declare enum TooltipTypes {
     DATAPOINT = "datapoint",
     GRIDLINE = "gridline",
-    TITLE = "title"
+    TITLE = "title",
+    LEGEND = "legend",
+    AXISLABEL = "axislabel"
 }
 /**
  * enum of all possible legend positions

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

@@ -0,0 +1,17 @@
+export interface TruncationOptions {
+    /**
+     * truncation configuration
+     */
+    /**
+     * truncation type
+     */
+    type?: string;
+    /**
+     * truncation threshold
+     */
+    threshold?: Number;
+    /**
+     * how many characters to be shown
+     */
+    numCharacter?: Number;
+}

package/build/src/model.d.ts

@@ -15,6 +15,7 @@ export declare class ChartModel {
     protected allDataGroups: string[];
     protected colorScale: any;
     constructor(services: any);
+    getAllDataFromDomain(): any;
     getDisplayData(): any;
     getData(): any;
     isDataEmpty(): boolean;

package/build/src/tools.d.ts

@@ -82,6 +82,15 @@ export declare namespace Tools {
      * @returns The percentage in the form of a number (1 significant digit if necessary)
      */
     export function convertValueToPercentage(item: any, fullData: any): number;
+    /**
+     * Truncate the labels
+     * @export
+     * @param {any} fullText
+     * @param {any} truncationType
+     * @param {any} numCharacter
+     * @returns Truncated text
+     */
+    export function truncateLabel(fullText: any, truncationType: any, numCharacter: any): any;
     /**************************************
      *  Object/array related checks       *
      *************************************/