@progress/kendo-react-charts 6.1.1 → 7.0.0-develop.2

package/BaseChart.d.ts

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Surface } from '@progress/kendo-drawing';
+import { InstanceObserver } from '@progress/kendo-charts';
+import { DomEvent } from './events/dom-event';
+import { BaseChartPrivateProps } from './BaseChartProps';
+import { ChartContextType } from './ChartContext';
+/**
+ * @hidden
+ */
+export declare class BaseChart extends React.Component<BaseChartPrivateProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        dir: PropTypes.Requireable<string>;
+        renderAs: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        renderAs: string;
+    };
+    /**
+     * @hidden
+     */
+    chartInstance: any | null;
+    /**
+     * @hidden
+     */
+    surface: Surface | null;
+    /**
+     * @hidden
+     */
+    get element(): HTMLDivElement;
+    protected _element: HTMLDivElement | null;
+    protected optionsStore: any;
+    protected optionsUnsubscriber: Function;
+    protected themeStore: any;
+    protected themeUnsubscriber: Function;
+    protected observersStore: any;
+    protected chartObserver: InstanceObserver;
+    protected childrenObserver: InstanceObserver;
+    protected suppressTransitions: boolean;
+    private showLicenseWatermark;
+    readonly state: ChartContextType;
+    constructor(props: BaseChartPrivateProps);
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: any, state: any): any;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: BaseChartPrivateProps): void;
+    /**
+     * @hidden
+     */
+    render(): any;
+    /**
+     * @hidden
+     */
+    getDirection(dir?: string): boolean;
+    /**
+     * @hidden
+     */
+    getChartOptions(): any;
+    /**
+     * @hidden
+     */
+    refresh(): void;
+    /**
+     * @hidden
+     */
+    instantiateCoreChart(): void;
+    /**
+     * @hidden
+     */
+    trigger(name: string, e: any): boolean;
+    /**
+     * @hidden
+     */
+    requiresHandlers(names: string[]): boolean;
+    /**
+     * @hidden
+     */
+    triggerDomEvent<T>(name: string, e: DomEvent<T>): boolean;
+    /**
+     * @hidden
+     */
+    onRender: (e: any) => void;
+    /**
+     * @hidden
+     */
+    onDrilldown: (e: any) => boolean;
+    /**
+     * @hidden
+     */
+    onLegendItemClick: (e: any) => void;
+    /**
+     * @hidden
+     */
+    onWindowResize: () => void;
+    /**
+     * @hidden
+     */
+    onChartMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onChildMouseLeave: (e: DomEvent<React.MouseEvent<HTMLElement>>) => boolean;
+}

package/BaseChartProps.d.ts

@@ -0,0 +1,199 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+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
+ */
+export interface BaseChartPrivateProps extends BaseChartProps {
+    /**
+     * @hidden
+     */
+    deriveOptionsFromParent?: (options: any) => any;
+    /**
+     * @hidden
+     */
+    chartConstructor: any;
+    /**
+     * @hidden
+     */
+    wrapper: string;
+    /**
+     * @hidden
+     */
+    getTarget: () => Charts;
+    /**
+     * @hidden
+     */
+    data?: any;
+}
+/**
+ * @hidden
+ */
+export interface BaseChartProps {
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * The styles that are applied to the component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional CSS classes to the component.
+     */
+    className?: string;
+    /**
+     * @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.
+     *
+     * The supported values are:
+     * - `"svg"`—If available, renders the component as an inline `.svg` file.
+     * - `"canvas"`—If available, renders the component as a `canvas` element.
+     */
+    renderAs?: 'svg' | 'canvas';
+    /**
+     * Specifies if the Chart can be panned ([see example]({% slug panzoom_chart_charts %})).
+     */
+    pannable?: boolean | DragAction;
+    /**
+     * Specifies if the Chart can be zoomed ([see example]({% slug panzoom_chart_charts %})).
+     */
+    zoomable?: boolean | Zoomable;
+    /**
+     * The default colors for the Chart series. When all colors are used, new colors are pulled from the start again.
+     */
+    seriesColors?: string[];
+    /**
+     * If set to `true`, the Chart plays animations when it displays the series. By default, animations are enabled.
+     */
+    transitions?: boolean;
+    /**
+     * This option allows to override the default pane options.
+     */
+    paneDefaults?: PaneDefaults;
+    /**
+     * The chart panes configuration.
+     */
+    panes?: Pane[];
+    /**
+     * This option allows to override the default series options.
+     */
+    seriesDefaults?: SeriesDefaults;
+    /**
+     * This option allows to override the default axis options.
+     */
+    axisDefaults?: AxisDefaults;
+    /**
+     * Fires when the user clicks an axis label.
+     */
+    onAxisLabelClick?: (event: AxisLabelClickEvent) => void;
+    /**
+     * Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
+     */
+    onDrag?: (event: DragEvent) => void;
+    /**
+     * Fires when the user stops dragging the Chart.
+     */
+    onDragEnd?: (event: DragEndEvent) => void;
+    /**
+     * 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.
+     */
+    onLegendItemHover?: (event: LegendItemHoverEvent) => void;
+    /**
+     * Fires when the user clicks a legend item ([see example]({% slug legend_chart_charts %}#toc-clicking-legend-items)).
+     */
+    onLegendItemClick?: (event: LegendItemClickEvent) => void;
+    /**
+     * Fires when the user clicks a note.
+     */
+    onNoteClick?: (event: NoteClickEvent) => void;
+    /**
+     * Fires when the user hovers over a note.
+     */
+    onNoteHover?: (event: NoteHoverEvent) => void;
+    /**
+     * Fires when the user clicks the plot area. The `click` event is triggered by the `tap` and `contextmenu` events. To distinguish between the original events, inspect the `e.originalEvent.type` field.
+     */
+    onPlotAreaClick?: (event: PlotAreaClickEvent) => void;
+    /**
+     * Fires when the user hovers the plot area ([see example]({% slug crosshairs_chart_charts %}#toc-current-cursotr-value)).
+     */
+    onPlotAreaHover?: (event: PlotAreaHoverEvent) => void;
+    /**
+     * Fires when the Chart is ready to render on screen ([see example]({% slug plotbands_chart_charts %}#toc-custom-plot-bands)). For example, you can use it to remove loading indicators. Any changes made to the options are ignored.
+     */
+    onRender?: (event: RenderEvent) => void;
+    /**
+     * Fires when the Chart is about to refresh. The event can be used to prevent the refresh of the Chart in specific cases ([see example]({% slug refresh_chart %}).
+     */
+    onRefresh?: (chartOptions: any, themeOptions: any, chartInstance: any) => void;
+    /**
+     * Fires when the user modifies the selection.
+     *
+     * The range units are:
+     * - Generic axis—Category index (0-based).
+     * - Date axis—Date instance.
+     */
+    onSelect?: (event: SelectEvent) => void;
+    /**
+     * Fires when the user completes the modification of the selection ([see example]({% slug selection_chart_charts %}#toc-using-selection-as-navigator)).
+     *
+     * The range units are:
+     * - Generic axis—Category index (0-based).
+     * - Date axis—Date instance.
+     */
+    onSelectEnd?: (event: SelectEndEvent) => void;
+    /**
+     * Fires when the user starts modifying the axis selection.
+     *
+     * The range units are:
+     * - Generic axis—Category index (0-based).
+     * - Date axis—Date instance.
+     */
+    onSelectStart?: (event: SelectStartEvent) => void;
+    /**
+     * Fires when the user clicks the Chart series.
+     *
+     * The `click` event will be triggered by the `tap` and `contextmenu` events. To distinguish between the original events, inspect the `e.originalEvent.type` field.
+     */
+    onSeriesClick?: (event: SeriesClickEvent) => void;
+    /**
+     * Fires when the user hovers over the Chart series.
+     */
+    onSeriesHover?: (event: SeriesHoverEvent) => void;
+    /**
+     * Fires as long as the user is zooming the Chart by using the mousewheel operation.
+     */
+    onZoom?: (event: ZoomEvent) => void;
+    /**
+     * Fires when the user stops zooming the Chart.
+     */
+    onZoomEnd?: (event: ZoomEndEvent) => void;
+    /**
+     * Fires when the user uses the mousewheel to zoom the Chart.
+     */
+    onZoomStart?: (event: ZoomStartEvent) => void;
+}

package/Chart.d.ts

@@ -0,0 +1,82 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ChartProps } from './ChartProps';
+import { Surface } from '@progress/kendo-drawing';
+/**
+ * Represents the [KendoReact Chart component]({% slug overview_chart_charts %}).
+ *
+ * @example
+ * ```jsx
+ * import {
+ *     Chart,
+ *     ChartSeries,
+ *     ChartSeriesItem,
+ *     ChartCategoryAxis,
+ *     ChartCategoryAxisItem,
+ *     ChartTitle,
+ *     ChartLegend
+ * } from '@progress/kendo-react-charts';
+ *
+ * const categories = [ 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 ];
+ * const series = [ {
+ *     name: 'India',
+ *     data: [ 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 ]
+ * }, {
+ *     name: 'Russian Federation',
+ *     data: [ 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 ]
+ * }, {
+ *     name: 'Germany',
+ *     data: [ 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 ]
+ * }, {
+ *     name: 'World',
+ *     data: [ 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 ]
+ * } ];
+ *
+ * const ChartContainer = () => (
+ *     <Chart>
+ *         <ChartTitle text="Gross domestic product growth GDP annual" />
+ *         <ChartLegend position="top" orientation="horizontal" />
+ *         <ChartCategoryAxis>
+ *             <ChartCategoryAxisItem categories={categories} startAngle={45} />
+ *         </ChartCategoryAxis>
+ *         <ChartSeries>
+ *             {series.map((item, idx) => (
+ *                 <ChartSeriesItem
+ *                     key={idx}
+ *                     type="column"
+ *                     data={item.data}
+ *                     name={item.name}
+ *                 />))}
+ *         </ChartSeries>
+ *     </Chart>
+ * );
+ *
+ * ReactDOM.render(
+ *     <ChartContainer />,
+ *     document.querySelector('my-app')
+ * );
+ * ```
+ */
+export declare class Chart extends React.Component<ChartProps, {}> {
+    private _baseChart;
+    /**
+     * @hidden
+     */
+    get chartInstance(): any;
+    /**
+     * The Drawing `Surface` of the Chart.
+     */
+    get surface(): Surface | null;
+    /**
+     * The DOM element of the Chart.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    render(): any;
+    private getTarget;
+}

package/ChartBreadcrumb.d.ts

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+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/ChartContext.d.ts

@@ -0,0 +1,21 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+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
+ */
+export interface ChartContextType {
+    optionsStore: Store;
+    observersStore: Store;
+    childrenObserver: InstanceObserver;
+    drilldownState: ChartDrilldownState;
+}
+/**
+ * @hidden
+ */
+export declare const ChartContext: React.Context<ChartContextType | null>;

package/ChartProps.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { BaseChartProps } from './BaseChartProps';
+/**
+ * Represents the props of the KendoReact Chart component.
+ */
+export interface ChartProps extends BaseChartProps {
+    /**
+     * When set, the prop is used to render the Donut Center template.
+     */
+    donutCenterRender?: () => React.ReactElement<any>;
+}

package/Container.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+declare const Container: React.FunctionComponent<any>;
+/**
+ * To provide support for React versions which do not support `React.Fragment`, the following component acts as its replacement. Returning an array is not an option as it blocks unit testing until [https://github.com/airbnb/enzyme/pull/1498#issuecomment-378413134](https://github.com/airbnb/enzyme/pull/1498#issuecomment-378413134) is released.
+ */
+export { Container };

package/DonutCenter.d.ts

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { InstanceObserver } from '@progress/kendo-charts';
+import { ChartContext } from './ChartContext';
+/**
+ * @hidden
+ */
+export interface DonutCenterStyle {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/**
+ * @hidden
+ */
+export interface DonutCenterProps {
+    render?: () => React.ReactElement<any, any>;
+}
+/**
+ * @hidden
+ */
+export interface DonutCenterState {
+    donutCenterStyles: DonutCenterStyle | null;
+}
+/**
+ * @hidden
+ */
+declare class DonutCenter extends React.Component<DonutCenterProps, DonutCenterState> {
+    static contextType: React.Context<import("./ChartContext").ChartContextType | null>;
+    context: React.ContextType<typeof ChartContext>;
+    readonly state: DonutCenterState;
+    chartObserver: InstanceObserver;
+    constructor(props: DonutCenterProps, context: any);
+    render(): any;
+    onRender(event: any): void;
+}
+export { DonutCenter };

package/LICENSE.md

@@ -8,4 +8,4 @@ This is commercial software. To use it, you need to agree to the [**End User Lic
 
 All available KendoReact commercial licenses may be obtained at the [KendoReact website](https://www.telerik.com/kendo-react-ui/pricing).
 
-*Copyright © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.*
+*Copyright © 2023 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.*

package/Sparkline.d.ts

@@ -0,0 +1,91 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SparklineProps } from './SparklineProps';
+import { Surface } from '@progress/kendo-drawing';
+/**
+ * The root Sparkline component.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *     Sparkline,
+ *     ChartValueAxis,
+ *     ChartValueAxisItem
+ * } from '@progress/kendo-react-charts';
+ *
+ * const sparklineData = [ 936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007 ];
+ * const bulletData = [ 21, 23 ];
+ * const bulletValueAxis = {
+ *     min: 0,
+ *     max: 30,
+ *     plotBands: [{
+ *         from: 0, to: 15, color: '#787878', opacity: 0.15
+ *     }, {
+ *         from: 15, to: 22, color: '#787878', opacity: 0.3
+ *     }, {
+ *         from: 22, to: 30, color: '#787878', opacity: 0.15
+ *     }]
+ * };
+ *
+ * const SparklineContainer = () => (
+ *      <ul>
+ *        <li>
+ *            Base Sparkline chart
+ *            <Sparkline data={sparklineData} />
+ *        </li>
+ *        <li>
+ *            Bar/Column type Sparkline chart
+ *            <Sparkline data={sparklineData} type="column" />
+ *        </li>
+ *        <li>
+ *            Area type Sparkline chart
+ *            <Sparkline data={sparklineData} type="area" />
+ *        </li>
+ *        <li>
+ *            Pie type Sparkline chart
+ *            <Sparkline data={sparklineData} type="pie" />
+ *        </li>
+ *        <li>
+ *            Bullet type Sparkline chart
+ *            <Sparkline data={bulletData} type="bullet">
+ *                <ChartValueAxis>
+ *                    <ChartValueAxisItem {...bulletValueAxis} />
+ *                </ChartValueAxis>
+ *            </Sparkline>
+ *        </li>
+ *      </ul>
+ * );
+ *
+ * ReactDOM.render(
+ *     <SparklineContainer />,
+ *     document.querySelector('my-app')
+ * );
+ * ```
+ */
+export declare class Sparkline extends React.Component<SparklineProps, {}> {
+    private _baseChart;
+    /**
+     * @hidden
+     */
+    get chartInstance(): any;
+    /**
+     * The Drawing `Surface` of the Sparkline.
+     */
+    get surface(): Surface | null;
+    /**
+     * The DOM element of the Sparkline.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    deriveOptionsFromParent: (options: any) => any;
+    /**
+     * @hidden
+     */
+    render(): any;
+    private getTarget;
+}

package/SparklineProps.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { BaseChartProps } from './BaseChartProps';
+/**
+ * Represents the props of the KendoReact Sparkline component.
+ */
+export interface SparklineProps extends Omit<BaseChartProps, 'drilldownState' | 'onDrilldown'> {
+    /**
+     * The data for the default Sparkline series. Discarded if series are supplied.
+     */
+    data?: any;
+    /**
+     * The data for the default Sparkline series. Discarded if series are supplied.
+     */
+    type?: string;
+}