@progress/kendo-react-charts 5.15.0-dev.202307061400 → 5.15.0-dev.202307112015

package/dist/es/BaseChart.d.ts

@@ -43,9 +43,13 @@ export declare class BaseChart extends React.Component<BaseChartPrivateProps, {}
     protected observersStore: any;
     protected chartObserver: InstanceObserver;
     protected childrenObserver: InstanceObserver;
-    protected contextValue: ChartContextType;
     protected suppressTransitions: boolean;
+    readonly state: ChartContextType;
     constructor(props: BaseChartPrivateProps);
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: any, state: any): any;
     /**
      * @hidden
      */
@@ -94,6 +98,10 @@ export declare class BaseChart extends React.Component<BaseChartPrivateProps, {}
      * @hidden
      */
     onRender: (e: any) => void;
+    /**
+     * @hidden
+     */
+    onDrilldown: (e: any) => boolean;
     /**
      * @hidden
      */

package/dist/es/BaseChart.js

@@ -13,6 +13,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,6 +35,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { registerForIntl, provideIntlService } from '@progress/kendo-react-intl';
@@ -43,6 +63,7 @@ import { CrosshairTooltipContainer } from './tooltip/CrosshairContainer';
 import { ChartContext } from './ChartContext';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
+import { DrilldownEvent } from './main';
 /**
  * @hidden
  */
@@ -75,6 +96,28 @@ var BaseChart = /** @class */ (function (_super) {
                 _this.trigger('render', e);
             }
         };
+        /**
+         * @hidden
+         */
+        _this.onDrilldown = function (e) {
+            var _a;
+            var allSeries = _this.optionsStore.getState().series;
+            var series = allSeries.find(function (s) { return s.name === e.series.name; });
+            if (!series.drilldownSeriesFactory) {
+                return true;
+            }
+            var handler = 'onDrilldown';
+            if (_this.props.hasOwnProperty(handler)) {
+                var step = { seriesName: series.name, drilldownValue: e.value };
+                var nextSteps = __spreadArray(__spreadArray([], (((_a = _this.props.drilldownState) === null || _a === void 0 ? void 0 : _a.steps) || []), true), [step], false);
+                var target = _this.props.getTarget();
+                var args = __assign(__assign({}, e), { currentState: _this.props.drilldownState, nextState: { steps: nextSteps } });
+                var eventObject = new DrilldownEvent(args, target);
+                _this.props[handler].call(undefined, eventObject);
+            }
+            // Prevent triggering onDrilldown again, it's already triggered above
+            return true;
+        };
         /**
          * @hidden
          */
@@ -146,13 +189,18 @@ var BaseChart = /** @class */ (function (_super) {
         _this.optionsStore = createStore(optionsReducer);
         _this.observersStore = createStore(observersReducer);
         _this.childrenObserver = new InstanceObserver(_this, { onMouseLeave: 'onChildMouseLeave' });
-        _this.contextValue = {
+        _this.state = {
             optionsStore: _this.optionsStore,
             observersStore: _this.observersStore,
-            childrenObserver: _this.childrenObserver
+            childrenObserver: _this.childrenObserver,
+            drilldownState: { steps: [] }
         };
         _this.themeStore = createStore(themeReducer);
-        _this.chartObserver = new InstanceObserver(_this, { render: 'onRender', legendItemClick: 'onLegendItemClick' });
+        _this.chartObserver = new InstanceObserver(_this, {
+            render: 'onRender',
+            legendItemClick: 'onLegendItemClick',
+            drilldown: 'onDrilldown'
+        });
         return _this;
     }
     Object.defineProperty(BaseChart.prototype, "element", {
@@ -165,6 +213,12 @@ var BaseChart = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    /**
+     * @hidden
+     */
+    BaseChart.getDerivedStateFromProps = function (props, state) {
+        return __assign(__assign({}, state), { drilldownState: props.drilldownState || [] });
+    };
     /**
      * @hidden
      */
@@ -230,7 +284,7 @@ var BaseChart = /** @class */ (function (_super) {
             style: chartStyles,
             key: 'chartElement'
         }, (React.createElement("div", { onMouseLeave: this.onChartMouseLeave, ref: function (el) { return _this._element = el; }, className: "k-chart-surface" }, children)));
-        return (React.createElement(ChartContext.Provider, { value: this.contextValue },
+        return (React.createElement(ChartContext.Provider, { value: this.state },
             React.createElement(SeriesTooltip, { key: "seriesTooltip" }),
             React.createElement(CrosshairTooltipContainer, { key: "crosshairTooltips" }),
             content));

package/dist/es/BaseChartProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { AxisLabelClickEvent, DragEvent, DragStartEvent, DragEndEvent, LegendItemClickEvent, LegendItemHoverEvent, NoteClickEvent, NoteHoverEvent, PlotAreaClickEvent, PlotAreaHoverEvent, RenderEvent, SeriesClickEvent, SeriesHoverEvent, ZoomEvent, ZoomStartEvent, ZoomEndEvent, SelectEvent, SelectStartEvent, SelectEndEvent } from './common/events';
+import { AxisLabelClickEvent, DragEvent, DragStartEvent, DragEndEvent, DrilldownEvent, LegendItemClickEvent, LegendItemHoverEvent, NoteClickEvent, NoteHoverEvent, PlotAreaClickEvent, PlotAreaHoverEvent, RenderEvent, SeriesClickEvent, SeriesHoverEvent, ZoomEvent, ZoomStartEvent, ZoomEndEvent, SelectEvent, SelectStartEvent, SelectEndEvent } from './common/events';
 import { AxisDefaults, DragAction, Pane, PaneDefaults, SeriesDefaults, Zoomable } from './common/property-types';
 import { Charts } from './common/charts';
+import { ChartDrilldownState } from './common/api-types';
 /**
  * @hidden
  */
@@ -47,6 +48,13 @@ export interface BaseChartProps {
      * @hidden
      */
     children?: any;
+    /**
+     * Gets or sets the current drill-down state for [Drilldown Charts](slug:drilldown_charts).
+     *
+     * To return to a previous level, remove the items from the `steps` array following the desired level.
+     * To return to the root chart, set the `steps` array to `[]`.
+     */
+    drilldownState?: ChartDrilldownState;
     /**
      * Sets the preferred rendering engine ([see example]({% slug rendering_chart_charts %})). If not supported by the browser, the Chart switches to the first available mode.
      *
@@ -103,6 +111,10 @@ export interface BaseChartProps {
      * Fires when the user starts dragging the Chart.
      */
     onDragStart?: (event: DragStartEvent) => void;
+    /**
+     * Fires when the user when the user wants to drill down on a specific point.
+     */
+    onDrilldown?: (event: DrilldownEvent) => void;
     /**
      * Fires when the user hovers over a legend item.
      */

package/dist/es/ChartBreadcrumb.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { BreadcrumbProps, DataModel } from '@progress/kendo-react-layout';
+import { ChartDrilldownState } from './api-types/chart-drilldown-state.interface';
+import { DrilldownStateChangeEvent } from './events/drilldown-state-change-event';
+/**
+ * Represents the properties of [Chart Breadcrumb](% slug api_charts_chartbreadcrumb %) component.
+ */
+export interface ChartBreadcrumbProps extends Omit<BreadcrumbProps, 'data'> {
+    /**
+     * The definition of the breadcrumb root item.
+     *
+     * The default value is `{ text: 'Home', icon: <SvgIcon icon={homeIcon} /> }`.
+     * Where `homeIcon` is imported from `@progress/kendo-svg-icons`.
+     */
+    rootItem?: DataModel;
+    /**
+     * Fires when the user when the user has selected a different drilldown level.
+     */
+    onDrilldownStateChange?: (event: DrilldownStateChangeEvent) => void;
+    /**
+     * The current drilldown state of the Chart.
+     */
+    drilldownState?: ChartDrilldownState;
+}
+/**
+ * Represents the Object which is passed to the
+ * [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the ChartBreadcrumb component.
+ */
+export interface ChartBreadcrumbHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the ChartBreadcrumb.
+     */
+    props: ChartBreadcrumbProps;
+}
+/**
+ * Represents the Chart Breadcrumb component.
+ */
+export declare const ChartBreadcrumb: React.ForwardRefExoticComponent<ChartBreadcrumbProps & React.RefAttributes<ChartBreadcrumbHandle | null>>;

package/dist/es/ChartBreadcrumb.js

@@ -0,0 +1,92 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Breadcrumb } from '@progress/kendo-react-layout';
+import { SvgIcon } from '@progress/kendo-react-common';
+import { homeIcon } from '@progress/kendo-svg-icons';
+import { DrilldownStateChangeEvent } from './events/drilldown-state-change-event';
+/**
+ * Represents the Chart Breadcrumb component.
+ */
+export var ChartBreadcrumb = React.forwardRef(function (props, ref) {
+    var target = React.useRef(null);
+    var breadcrumbRef = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: breadcrumbRef.current,
+        props: props
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    var rootItem = __assign({ id: '0' }, (props.rootItem || {
+        text: 'Home',
+        icon: React.createElement(SvgIcon, { icon: homeIcon, style: { marginInlineEnd: '4px' } })
+    }));
+    var data = [rootItem];
+    if (props.drilldownState) {
+        data = __spreadArray(__spreadArray([], data, true), props.drilldownState.steps.map(function (step, index) { return ({ id: (index + 1).toString(), text: step.drilldownValue }); }), true);
+    }
+    var breadcrumbProps = __assign(__assign({}, props), { data: data });
+    var handleItemSelect = function (e) {
+        var _a;
+        var handler = 'onDrilldownStateChange';
+        if (props.hasOwnProperty(handler)) {
+            var level = data.findIndex(function (item) { return item.id === e.id; });
+            var nextState = { steps: (((_a = props.drilldownState) === null || _a === void 0 ? void 0 : _a.steps) || []).slice(0, level) };
+            var eventObject = new DrilldownStateChangeEvent({ currentState: props.drilldownState, nextState: nextState });
+            props[handler].call(undefined, eventObject);
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(Breadcrumb, __assign({}, breadcrumbProps, { onItemSelect: handleItemSelect }))));
+});
+var propTypes = {
+    id: PropTypes.string,
+    style: PropTypes.object,
+    className: PropTypes.string,
+    breadcrumbOrderedList: PropTypes.elementType,
+    breadcrumbListItem: PropTypes.elementType,
+    breadcrumbDelimiter: PropTypes.elementType,
+    breadcrumbLink: PropTypes.elementType,
+    dir: PropTypes.oneOf(['ltr', 'rtl']),
+    disabled: PropTypes.bool,
+    valueField: PropTypes.string,
+    textField: PropTypes.string,
+    iconField: PropTypes.string,
+    iconClassField: PropTypes.string,
+    onItemSelect: PropTypes.func,
+    ariaLabel: PropTypes.string,
+    onDrilldownStateChange: PropTypes.func,
+    drilldownState: PropTypes.shape({
+        steps: PropTypes.array
+    }),
+    rootItem: PropTypes.object
+};
+var defaultProps = {
+    valueField: 'id',
+    textField: 'text',
+    iconField: 'icon',
+    iconClassField: 'iconClass',
+    data: []
+};
+ChartBreadcrumb.displayName = 'KendoReactChartBreadcrumb';
+// TODO: delete casting when @types/react is updated!
+ChartBreadcrumb.propTypes = propTypes;
+ChartBreadcrumb.defaultProps = defaultProps;

package/dist/es/ChartContext.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Store } from './store/store';
 import { InstanceObserver } from '@progress/kendo-charts';
+import { ChartDrilldownState } from './api-types/chart-drilldown-state.interface';
 /**
  * @hidden
  */
@@ -8,6 +9,7 @@ export interface ChartContextType {
     optionsStore: Store;
     observersStore: Store;
     childrenObserver: InstanceObserver;
+    drilldownState: ChartDrilldownState;
 }
 /**
  * @hidden

package/dist/es/DonutCenter.d.ts

@@ -14,7 +14,7 @@ export interface DonutCenterStyle {
  * @hidden
  */
 export interface DonutCenterProps {
-    render?: () => React.ReactNode;
+    render?: () => React.ReactElement<any, any>;
 }
 /**
  * @hidden

package/dist/es/DonutCenter.js

@@ -37,11 +37,12 @@ var DonutCenter = /** @class */ (function (_super) {
         return _this;
     }
     DonutCenter.prototype.render = function () {
-        var render = this.props.render;
+        var RenderComp = this.props.render;
         var donutCenterStyles = this.state.donutCenterStyles;
         var renderer = null;
-        if (render && donutCenterStyles) {
-            renderer = (React.createElement("div", { className: "k-chart-donut-center", style: donutCenterStyles }, render()));
+        if (RenderComp && donutCenterStyles) {
+            renderer = (React.createElement("div", { className: "k-chart-donut-center", style: donutCenterStyles },
+                React.createElement(RenderComp, null)));
         }
         return renderer;
     };

package/dist/es/SparklineProps.d.ts

@@ -2,7 +2,7 @@ import { BaseChartProps } from './BaseChartProps';
 /**
  * Represents the props of the KendoReact Sparkline component.
  */
-export interface SparklineProps extends BaseChartProps {
+export interface SparklineProps extends Omit<BaseChartProps, 'drilldownState' | 'onDrilldown'> {
     /**
      * The data for the default Sparkline series. Discarded if series are supplied.
      */

package/dist/es/StockChartProps.d.ts

@@ -3,7 +3,7 @@ import { NavigatorFilterEvent } from './common/events';
 /**
  * Represents the props of the KendoReact StockChart component.
  */
-export interface StockChartProps extends BaseChartProps {
+export interface StockChartProps extends Omit<BaseChartProps, 'drilldownState' | 'onDrilldown'> {
     /**
      * Specifies whether the StockChart will perform full or partial redraw upon re-render. The partial redraw is required when the `onNavigatorFilter` event is handled and the data for the main panes is limited to a specific set. The default value is `false`.
      */

package/dist/es/api-types/chart-drilldown-state.interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Describes a single drilldown step.
+ */
+export interface ChartDrilldownStep {
+    /**
+     * The parent series name.
+     */
+    seriesName: string;
+    /**
+     * The drilldown value of the selected series point.
+     */
+    drilldownValue: any;
+}
+/**
+ * The Chart drilldown state.
+ */
+export interface ChartDrilldownState {
+    /**
+     * A stack of all drilldown steps performed in the Chart.
+     *
+     * If the `steps` are empty the Chart is the root level.
+     */
+    steps: ChartDrilldownStep[];
+}

package/dist/es/api-types/chart-drilldown-state.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/es/argument-types/drilldown-series-factory-props.interface.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Represents the props of a [Drilldown Series Factory](slug:api_charts_chartseriesitemprops#toc-drilldownseriesfactory) component.
+ */
+export interface DrilldownSeriesFactoryProps {
+    /**
+     * The drilldown field value.
+     */
+    drilldownValue: any;
+    /**
+     * The series point to drill down to.
+     */
+    point: any;
+    /**
+     * The series to drill down to.
+     */
+    series: any;
+}

package/dist/es/argument-types/drilldown-series-factory-props.interface.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/es/common/api-types.d.ts

@@ -5,3 +5,4 @@ export { SeriesPointType } from '../api-types/series-point.interface';
 export { ChartAxisType } from '../api-types/chart-axis.interface';
 export { ChartPaneType } from '../api-types/chart-pane.interface';
 export { ChartPlotAreaType } from '../api-types/chart-plotarea.interface';
+export { ChartDrilldownStep, ChartDrilldownState } from '../api-types/chart-drilldown-state.interface';

package/dist/es/common/events.d.ts

@@ -2,6 +2,8 @@ export { AxisLabelClickEvent } from '../events/axis-label-click-event';
 export { DragEndEvent } from '../events/drag-end-event';
 export { DragEvent } from '../events/drag-event';
 export { DragStartEvent } from '../events/drag-start-event';
+export { DrilldownEvent } from '../events/drilldown-event';
+export { DrilldownStateChangeEvent } from '../events/drilldown-state-change-event';
 export { LegendItemClickEvent } from '../events/legend-item-click-event';
 export { LegendItemHoverEvent } from '../events/legend-item-hover-event';
 export { NavigatorFilterEvent } from '../events/navigator-filter-event';

package/dist/es/common/events.js

@@ -3,6 +3,8 @@ export { AxisLabelClickEvent } from '../events/axis-label-click-event';
 export { DragEndEvent } from '../events/drag-end-event';
 export { DragEvent } from '../events/drag-event';
 export { DragStartEvent } from '../events/drag-start-event';
+export { DrilldownEvent } from '../events/drilldown-event';
+export { DrilldownStateChangeEvent } from '../events/drilldown-state-change-event';
 export { LegendItemClickEvent } from '../events/legend-item-click-event';
 export { LegendItemHoverEvent } from '../events/legend-item-hover-event';
 export { NavigatorFilterEvent } from '../events/navigator-filter-event';

package/dist/es/common/property-types.d.ts

@@ -50,6 +50,7 @@ export { SeriesNoteVisualArgs } from '../argument-types/series-note-visual-args.
 export { SeriesVisualArgs } from '../argument-types/series-visual-args.interface';
 export { TitleVisualArgs } from '../argument-types/title-visual-args.interface';
 export { PlotBandLabelVisualArgs } from '../argument-types/plot-band-label-visual-args.interface';
+export { DrilldownSeriesFactoryProps } from '../argument-types/drilldown-series-factory-props.interface';
 export { AxisDefaultsCrosshair } from '../option-types/axis-defaults/crosshair.interface';
 export { AxisDefaultsCrosshairTooltip } from '../option-types/axis-defaults/crosshair.tooltip.interface';
 export { AxisDefaultsLabels } from '../option-types/axis-defaults/labels.interface';

package/dist/es/components/SeriesItem.d.ts

@@ -8,6 +8,14 @@ export interface ChartSeriesItemProps extends Series {
      * @hidden
      */
     children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    _chartCollectionIdxKey?: string;
+    /**
+     * When set, the prop is used to render the Drilldown Series.
+     */
+    drilldownSeriesFactory?: (props: any) => React.ReactElement<any, any>;
 }
 declare const ChartSeriesItem: React.FunctionComponent<ChartSeriesItemProps>;
 export { ChartSeriesItem };

package/dist/es/components/SeriesItem.js

@@ -11,8 +11,19 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import { ConfigurationComponent } from './base/ConfigurationComponent';
+import { ChartContext } from '../ChartContext';
 var ChartSeriesItem = function (props) {
-    return (React.createElement(ConfigurationComponent, __assign({}, props)));
+    var DrilldownFactory = function (_) { return React.createElement(React.Fragment, null); };
+    if (props.drilldownSeriesFactory) {
+        DrilldownFactory = props.drilldownSeriesFactory;
+    }
+    var drilldownFrame = function (context) { var _a, _b; return context && ((_b = (_a = context.drilldownState) === null || _a === void 0 ? void 0 : _a.steps) === null || _b === void 0 ? void 0 : _b.find(function (_a) {
+        var seriesName = _a.seriesName;
+        return seriesName === props.name;
+    })); };
+    return (React.createElement(ChartContext.Consumer, null, function (context) { return drilldownFrame(context) ?
+        React.createElement(DrilldownFactory, { _chartCollectionIdxKey: props._chartCollectionIdxKey, drilldownValue: drilldownFrame(context).drilldownValue }) :
+        React.createElement(ConfigurationComponent, __assign({}, props)); }));
 };
 ChartSeriesItem.displayName = 'ChartSeriesItem';
 export { ChartSeriesItem };

package/dist/es/events/chart-event-builder.js

@@ -2,6 +2,7 @@ import { AxisLabelClickEvent } from './axis-label-click-event';
 import { DragEvent } from './drag-event';
 import { DragEndEvent } from './drag-end-event';
 import { DragStartEvent } from './drag-start-event';
+import { DrilldownEvent } from './drilldown-event';
 import { LegendItemHoverEvent } from './legend-item-hover-event';
 import { LegendItemClickEvent } from './legend-item-click-event';
 import { LegendItemLeaveEvent } from './legend-item-leave-event';
@@ -24,6 +25,7 @@ var EVENT_MAP = {
     drag: DragEvent,
     dragEnd: DragEndEvent,
     dragStart: DragStartEvent,
+    drilldownEvent: DrilldownEvent,
     legendItemHover: LegendItemHoverEvent,
     legendItemClick: LegendItemClickEvent,
     legendItemLeave: LegendItemLeaveEvent,

package/dist/es/events/drilldown-event.d.ts

@@ -0,0 +1,38 @@
+import { Charts } from '../common/charts';
+import { BaseEvent } from './base-event';
+import { EventSeriesOptions } from '../api-types/event-series-options.interface';
+import { SeriesPointType } from '../api-types/series-point.interface';
+import { ChartDrilldownState } from '../api-types/chart-drilldown-state.interface';
+/**
+ * Arguments for the `drilldown` event.
+ *
+ * See [Drilldown Charts](slug:drilldown_charts).
+ */
+export declare class DrilldownEvent extends BaseEvent {
+    /**
+     * The clicked series point.
+     */
+    point: SeriesPointType;
+    /**
+     * The clicked point series options.
+     */
+    series: EventSeriesOptions;
+    /**
+     * The data point value.
+     */
+    value: any;
+    /**
+     * The current Chart [drilldown state](slug:api_charts_chartprops#toc-drilldownstate).
+     */
+    currentState: ChartDrilldownState;
+    /**
+     * The Chart [drilldown state](slug:api_charts_chartprops#toc-drilldownstate) that will apply the current drilldown operation.
+     *
+     * See [Drilldown](slug:drilldown_charts) for an application example.
+     */
+    nextState: ChartDrilldownState;
+    /**
+     * @hidden
+     */
+    constructor(e: any, target: Charts);
+}

package/dist/es/events/drilldown-event.js

@@ -0,0 +1,38 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BaseEvent } from './base-event';
+/**
+ * Arguments for the `drilldown` event.
+ *
+ * See [Drilldown Charts](slug:drilldown_charts).
+ */
+var DrilldownEvent = /** @class */ (function (_super) {
+    __extends(DrilldownEvent, _super);
+    /**
+     * @hidden
+     */
+    function DrilldownEvent(e, target) {
+        var _this = _super.call(this, target) || this;
+        _this.value = e.value;
+        _this.point = e.point;
+        _this.series = e.series;
+        _this.currentState = e.currentState;
+        _this.nextState = e.nextState;
+        return _this;
+    }
+    return DrilldownEvent;
+}(BaseEvent));
+export { DrilldownEvent };

package/dist/es/events/drilldown-state-change-event.d.ts

@@ -0,0 +1,22 @@
+import { ChartDrilldownState } from '../api-types/chart-drilldown-state.interface';
+/**
+ * Arguments for the `drilldownStateChange` event on the Chart Breadcrumb.
+ *
+ * See [Drilldown Charts](slug:drilldown_charts).
+ */
+export declare class DrilldownStateChangeEvent {
+    /**
+     * The current Chart [drilldown state](slug:api_charts_chartprops#toc-drilldownstate).
+     */
+    currentState: ChartDrilldownState;
+    /**
+     * The Chart [drilldown state](slug:api_charts_chartprops#toc-drilldownstate) that will apply the current drilldown operation.
+     *
+     * See [Drilldown](slug:drilldown_charts) for an application example.
+     */
+    nextState: ChartDrilldownState;
+    /**
+     * @hidden
+     */
+    constructor(e: any);
+}

package/dist/es/events/drilldown-state-change-event.js

@@ -0,0 +1,16 @@
+/**
+ * Arguments for the `drilldownStateChange` event on the Chart Breadcrumb.
+ *
+ * See [Drilldown Charts](slug:drilldown_charts).
+ */
+var DrilldownStateChangeEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function DrilldownStateChangeEvent(e) {
+        this.currentState = e.currentState;
+        this.nextState = e.nextState;
+    }
+    return DrilldownStateChangeEvent;
+}());
+export { DrilldownStateChangeEvent };

package/dist/es/main.d.ts

@@ -18,6 +18,7 @@ import { CrosshairTooltip, CrosshairTooltipProps } from './tooltip/Crosshair';
 import { TooltipPopup, TooltipPopupProps } from './tooltip/Popup';
 import { SharedTooltipContent } from './tooltip/SharedTooltipContent';
 import { CrosshairTooltipContainer } from './tooltip/CrosshairContainer';
+import { ChartBreadcrumb, ChartBreadcrumbProps } from './ChartBreadcrumb';
 export * from './tooltip/main';
 export * from './components/main';
 export * from './common/api-types';
@@ -25,4 +26,4 @@ export * from './common/property-types';
 export * from './common/events';
 export * from './common/charts';
 export * from './methods/';
-export { Chart, ChartProps, Sparkline, SparklineProps, StockChart, StockChartProps, CategoryBaseUnit, BaseUnit, AxisLabelVisualArgs, LineStyle, ValueAxisTitle, SeriesLabels, CollectionConfigurationComponent, ConfigurationComponent, DonutCenter, TooltipPoint, SeriesTooltip, CrosshairTooltip, CrosshairTooltipProps, TooltipPopup, TooltipPopupProps, SharedTooltipContent, CrosshairTooltipContainer };
+export { Chart, ChartProps, Sparkline, SparklineProps, StockChart, StockChartProps, CategoryBaseUnit, BaseUnit, AxisLabelVisualArgs, LineStyle, ValueAxisTitle, SeriesLabels, CollectionConfigurationComponent, ConfigurationComponent, DonutCenter, TooltipPoint, SeriesTooltip, CrosshairTooltip, CrosshairTooltipProps, TooltipPopup, TooltipPopupProps, SharedTooltipContent, CrosshairTooltipContainer, ChartBreadcrumb, ChartBreadcrumbProps };