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

package/dist/es/main.js

@@ -10,6 +10,7 @@ import { CrosshairTooltip } from './tooltip/Crosshair';
 import { TooltipPopup } from './tooltip/Popup';
 import { SharedTooltipContent } from './tooltip/SharedTooltipContent';
 import { CrosshairTooltipContainer } from './tooltip/CrosshairContainer';
+import { ChartBreadcrumb } from './ChartBreadcrumb';
 export * from './tooltip/main';
 export * from './components/main';
 export * from './common/api-types';
@@ -17,4 +18,4 @@ export * from './common/property-types';
 export * from './common/events';
 export * from './common/charts';
 export * from './methods/';
-export { Chart, Sparkline, StockChart, CollectionConfigurationComponent, ConfigurationComponent, DonutCenter, TooltipPoint, SeriesTooltip, CrosshairTooltip, TooltipPopup, SharedTooltipContent, CrosshairTooltipContainer };
+export { Chart, Sparkline, StockChart, CollectionConfigurationComponent, ConfigurationComponent, DonutCenter, TooltipPoint, SeriesTooltip, CrosshairTooltip, TooltipPopup, SharedTooltipContent, CrosshairTooltipContainer, ChartBreadcrumb };

package/dist/es/option-types/series-item.interface.d.ts

@@ -105,6 +105,10 @@ export interface Series {
      * The data field which contains the color that is applied when the `open` value is greater than the `close` value. The `downColorField` option is supported when [`series.type`]({% slug api_charts_chartseriesitemprops %}#toc-type) is set to `"candlestick"`.
      */
     downColorField?: string;
+    /**
+     * The data field which contains the value to use to [drill down]({% slug drilldown_charts %}) into detailed data for the point.
+     */
+    drilldownField?: string;
     /**
      * The `dynamicHeight` option is supported when [`series.type`]({% slug api_charts_chartseriesitemprops %}#toc-type) is set to `"funnel"`. When set to `false`, all segments become with the same height. Otherwise, the height of each segment is based on its value.
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-charts',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1688649401,
+    publishDate: 1689103689,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/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/npm/BaseChart.js

@@ -14,6 +14,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)
@@ -25,6 +36,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));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseChart = void 0;
 var React = require("react");
@@ -46,6 +66,7 @@ var CrosshairContainer_1 = require("./tooltip/CrosshairContainer");
 var ChartContext_1 = require("./ChartContext");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("./package-metadata");
+var main_3 = require("./main");
 /**
  * @hidden
  */
@@ -78,6 +99,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 main_3.DrilldownEvent(args, target);
+                _this.props[handler].call(undefined, eventObject);
+            }
+            // Prevent triggering onDrilldown again, it's already triggered above
+            return true;
+        };
         /**
          * @hidden
          */
@@ -149,13 +192,18 @@ var BaseChart = /** @class */ (function (_super) {
         _this.optionsStore = (0, store_1.default)(reducer_1.optionsReducer);
         _this.observersStore = (0, store_1.default)(reducer_1.observersReducer);
         _this.childrenObserver = new kendo_charts_1.InstanceObserver(_this, { onMouseLeave: 'onChildMouseLeave' });
-        _this.contextValue = {
+        _this.state = {
             optionsStore: _this.optionsStore,
             observersStore: _this.observersStore,
-            childrenObserver: _this.childrenObserver
+            childrenObserver: _this.childrenObserver,
+            drilldownState: { steps: [] }
         };
         _this.themeStore = (0, store_1.default)(reducer_1.themeReducer);
-        _this.chartObserver = new kendo_charts_1.InstanceObserver(_this, { render: 'onRender', legendItemClick: 'onLegendItemClick' });
+        _this.chartObserver = new kendo_charts_1.InstanceObserver(_this, {
+            render: 'onRender',
+            legendItemClick: 'onLegendItemClick',
+            drilldown: 'onDrilldown'
+        });
         return _this;
     }
     Object.defineProperty(BaseChart.prototype, "element", {
@@ -168,6 +216,12 @@ var BaseChart = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    /**
+     * @hidden
+     */
+    BaseChart.getDerivedStateFromProps = function (props, state) {
+        return __assign(__assign({}, state), { drilldownState: props.drilldownState || [] });
+    };
     /**
      * @hidden
      */
@@ -233,7 +287,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_1.ChartContext.Provider, { value: this.contextValue },
+        return (React.createElement(ChartContext_1.ChartContext.Provider, { value: this.state },
             React.createElement(Series_1.SeriesTooltip, { key: "seriesTooltip" }),
             React.createElement(CrosshairContainer_1.CrosshairTooltipContainer, { key: "crosshairTooltips" }),
             content));

package/dist/npm/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/npm/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/npm/ChartBreadcrumb.js

@@ -0,0 +1,95 @@
+"use strict";
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartBreadcrumb = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var drilldown_state_change_event_1 = require("./events/drilldown-state-change-event");
+/**
+ * Represents the Chart Breadcrumb component.
+ */
+exports.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(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.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 drilldown_state_change_event_1.DrilldownStateChangeEvent({ currentState: props.drilldownState, nextState: nextState });
+            props[handler].call(undefined, eventObject);
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(kendo_react_layout_1.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: []
+};
+exports.ChartBreadcrumb.displayName = 'KendoReactChartBreadcrumb';
+// TODO: delete casting when @types/react is updated!
+exports.ChartBreadcrumb.propTypes = propTypes;
+exports.ChartBreadcrumb.defaultProps = defaultProps;

package/dist/npm/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/npm/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/npm/DonutCenter.js

@@ -40,11 +40,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/npm/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/npm/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/npm/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/npm/api-types/chart-drilldown-state.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/argument-types/drilldown-series-factory-props.interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;

package/dist/npm/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/npm/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/npm/common/events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomStartEvent = exports.ZoomEvent = exports.ZoomEndEvent = exports.SeriesHoverEvent = exports.SeriesClickEvent = exports.SelectStartEvent = exports.SelectEvent = exports.SelectEndEvent = exports.RenderEvent = exports.PlotAreaHoverEvent = exports.PlotAreaClickEvent = exports.NoteHoverEvent = exports.NoteClickEvent = exports.NavigatorFilterEvent = exports.LegendItemHoverEvent = exports.LegendItemClickEvent = exports.DragStartEvent = exports.DragEvent = exports.DragEndEvent = exports.AxisLabelClickEvent = void 0;
+exports.ZoomStartEvent = exports.ZoomEvent = exports.ZoomEndEvent = exports.SeriesHoverEvent = exports.SeriesClickEvent = exports.SelectStartEvent = exports.SelectEvent = exports.SelectEndEvent = exports.RenderEvent = exports.PlotAreaHoverEvent = exports.PlotAreaClickEvent = exports.NoteHoverEvent = exports.NoteClickEvent = exports.NavigatorFilterEvent = exports.LegendItemHoverEvent = exports.LegendItemClickEvent = exports.DrilldownStateChangeEvent = exports.DrilldownEvent = exports.DragStartEvent = exports.DragEvent = exports.DragEndEvent = exports.AxisLabelClickEvent = void 0;
 // Re-export event types
 var axis_label_click_event_1 = require("../events/axis-label-click-event");
 Object.defineProperty(exports, "AxisLabelClickEvent", { enumerable: true, get: function () { return axis_label_click_event_1.AxisLabelClickEvent; } });
@@ -10,6 +10,10 @@ var drag_event_1 = require("../events/drag-event");
 Object.defineProperty(exports, "DragEvent", { enumerable: true, get: function () { return drag_event_1.DragEvent; } });
 var drag_start_event_1 = require("../events/drag-start-event");
 Object.defineProperty(exports, "DragStartEvent", { enumerable: true, get: function () { return drag_start_event_1.DragStartEvent; } });
+var drilldown_event_1 = require("../events/drilldown-event");
+Object.defineProperty(exports, "DrilldownEvent", { enumerable: true, get: function () { return drilldown_event_1.DrilldownEvent; } });
+var drilldown_state_change_event_1 = require("../events/drilldown-state-change-event");
+Object.defineProperty(exports, "DrilldownStateChangeEvent", { enumerable: true, get: function () { return drilldown_state_change_event_1.DrilldownStateChangeEvent; } });
 var legend_item_click_event_1 = require("../events/legend-item-click-event");
 Object.defineProperty(exports, "LegendItemClickEvent", { enumerable: true, get: function () { return legend_item_click_event_1.LegendItemClickEvent; } });
 var legend_item_hover_event_1 = require("../events/legend-item-hover-event");

package/dist/npm/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/npm/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/npm/components/SeriesItem.js

@@ -14,8 +14,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartSeriesItem = void 0;
 var React = require("react");
 var ConfigurationComponent_1 = require("./base/ConfigurationComponent");
+var ChartContext_1 = require("../ChartContext");
 var ChartSeriesItem = function (props) {
-    return (React.createElement(ConfigurationComponent_1.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_1.ChartContext.Consumer, null, function (context) { return drilldownFrame(context) ?
+        React.createElement(DrilldownFactory, { _chartCollectionIdxKey: props._chartCollectionIdxKey, drilldownValue: drilldownFrame(context).drilldownValue }) :
+        React.createElement(ConfigurationComponent_1.ConfigurationComponent, __assign({}, props)); }));
 };
 exports.ChartSeriesItem = ChartSeriesItem;
 ChartSeriesItem.displayName = 'ChartSeriesItem';

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

@@ -5,6 +5,7 @@ var axis_label_click_event_1 = require("./axis-label-click-event");
 var drag_event_1 = require("./drag-event");
 var drag_end_event_1 = require("./drag-end-event");
 var drag_start_event_1 = require("./drag-start-event");
+var drilldown_event_1 = require("./drilldown-event");
 var legend_item_hover_event_1 = require("./legend-item-hover-event");
 var legend_item_click_event_1 = require("./legend-item-click-event");
 var legend_item_leave_event_1 = require("./legend-item-leave-event");
@@ -27,6 +28,7 @@ var EVENT_MAP = {
     drag: drag_event_1.DragEvent,
     dragEnd: drag_end_event_1.DragEndEvent,
     dragStart: drag_start_event_1.DragStartEvent,
+    drilldownEvent: drilldown_event_1.DrilldownEvent,
     legendItemHover: legend_item_hover_event_1.LegendItemHoverEvent,
     legendItemClick: legend_item_click_event_1.LegendItemClickEvent,
     legendItemLeave: legend_item_leave_event_1.LegendItemLeaveEvent,

package/dist/npm/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/npm/events/drilldown-event.js

@@ -0,0 +1,41 @@
+"use strict";
+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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrilldownEvent = void 0;
+var base_event_1 = require("./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;
+}(base_event_1.BaseEvent));
+exports.DrilldownEvent = DrilldownEvent;