@progress/kendo-charts 2.12.3-develop.4 → 2.13.0-develop.2

package/dist/npm/field-types/drag-action.interface.d.ts

@@ -0,0 +1,17 @@
+import { LockAxis } from './lock-axis';
+import { ModifierKey } from './modifier-key';
+
+/**
+ * Specifies the drag behavior during the pan and zoom operations.
+ */
+export interface DragAction {
+  /**
+   * Specifies a keyboard key that has to be pressed to activate the gesture.
+   */
+  key?: ModifierKey;
+
+  /**
+   * Specifies an axis that should not be panned or zoomed.
+   */
+  lock?: LockAxis;
+}

package/dist/npm/field-types/error-bar-line.interface.d.ts

@@ -0,0 +1,16 @@
+import { DashType } from './dash-type';
+
+/**
+ * Specifies the appearance settings for the error bar lines.
+ */
+export interface ErrorBarLine {
+  /**
+   * Specifies the dash type of the line.
+   */
+  dashType?: DashType;
+
+  /**
+   * Specifies the width of the line in pixels.
+   */
+  width?: number;
+}

package/dist/npm/field-types/grid-lines.interface.d.ts

@@ -0,0 +1,47 @@
+import { DashType } from './dash-type';
+
+/**
+ * Specifies the appearance configuration for the major and minor axis grid lines.
+ *
+ * {% platform_content angular %}
+ * See the [Default Axis Configuration](https://www.telerik.com/kendo-angular-ui/components/charts/elements/axes#default-axis-configuration) example.
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * See the [Default Axis Configuration](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes#default-axis-configuration) example.
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * See the [Default Axis Configuration](https://www.telerik.com/kendo-vue-ui/components/charts/elements/axes#default-axis-configuration) example.
+ * {% endplatform_content %}
+ */
+export interface GridLines {
+  /**
+   * Specifies the color of the grid lines. Accepts a valid CSS color string, including hex and rgb.
+   */
+  color?: string;
+
+  /**
+   * Specifies the dash type of the grid lines.
+   */
+  dashType?: DashType;
+
+  /**
+   * Specifies the number of lines to skip at the beginning.
+   */
+  skip?: number;
+
+  /**
+   * Specifies the tick-rendering step. Renders every n<sup>th</sup> line, where `n` is the step.
+   */
+  step?: number;
+
+  /**
+   * Determines whether to display the lines.
+   * By default, only the major axis grid lines are visible.
+   */
+  visible?: boolean;
+
+  /**
+   * Specifies the width of the lines in pixels.
+   */
+  width?: number;
+}

package/dist/npm/field-types/highlight-line.interface.d.ts

@@ -0,0 +1,27 @@
+import { DashType } from './dash-type';
+
+/**
+ * Specifies the appearance settings for the highlight line of the Candlestick and OHLC series.
+ */
+export interface HighlightLine {
+  /**
+   * Specifies the color of the highlighted line. Accepts a valid CSS color string, including hex and rgb.
+   * By default, the color is computed from the base-point color.
+   */
+  color?: string;
+
+  /**
+   * Specifies the dash type of the line.
+   */
+  dashType?: DashType;
+
+  /**
+   * Specifies the opacity of the line. By default, the border is opaque (`opacity = 1`).
+   */
+  opacity?: number;
+
+  /**
+   * Specifies the width of the line in pixels.
+   */
+  width?: number;
+}

package/dist/npm/field-types/label-connectors.interface.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Specifies the appearance settings for the label connectors on the Donut and Pie series.
+ */
+export interface LabelConnectors {
+  /**
+   * Specifies the color of the connecting line. Accepts a valid CSS color string, including hex and rgb.
+   */
+  color?: string;
+
+  /**
+   * Specifies the distance between the connector line and the main chart.
+   */
+  padding?: number;
+
+  /**
+   * Specifies the width of the connector line in pixels.
+   */
+  width?: number;
+}

package/dist/npm/field-types/label-rotation.interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Specifies the rotation configuration for the axis labels.
+ */
+export interface LabelRotation {
+  /**
+   * Specifies the alignment of the rotated labels relative to the slot center.
+   * The supported values are:
+   * * `"end"`
+   * * `"center"`
+   *
+   * By default, Charts align the closest end of the label to the center.
+   * If set to `"center"`, Charts align the center of the rotated label instead.
+   */
+  align?: 'end' | 'center';
+
+  /**
+   * Specifies the rotation angle of the labels.
+   * By default, labels are not rotated.
+   *
+   * Can be set to `"auto"`. In this case, labels rotate
+   * only if the slot size is not sufficient for the entire labels.
+   */
+  angle?: number | 'auto';
+}

package/dist/npm/field-types/legend-labels.interface.d.ts

@@ -0,0 +1,37 @@
+import { LegendLabelsContentArgs } from '../argument-types/legend-labels-content-args.interface';
+import { Margin } from './margin.interface';
+import { Padding } from './padding.interface';
+
+/**
+ * Specifies the appearance configuration for the legend labels.
+ */
+export interface LegendLabels {
+  /**
+   * Specifies the color of the legend label text.
+   * Accepts a valid [CSS `color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
+   * configuration string, including hex and rgb.
+   */
+  color?: string;
+
+  /**
+   * Specifies the font of the legend label text.
+   * Accepts a valid [CSS `font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
+   * configuration string.
+   */
+  font?: string;
+
+  /**
+   * Specifies the margin of the labels. A numeric value sets all margins.
+   */
+  margin?: Margin | number;
+
+  /**
+   * Specifies the padding of the labels. A numeric value sets all paddings.
+   */
+  padding?: Padding | number;
+
+  /**
+   * Specifies a function used to generate the content of each label.
+   */
+  content?: (e: LegendLabelsContentArgs) => string;
+}

package/dist/npm/field-types/line-style.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Specifies the line style of the series.
+ *
+ * The possible values are:
+ * - `"normal"`—Connects the values with a straight line.
+ * - `"step"`—Connects the values with a right-angled line. Available when series type is set to `"line"`.
+ * - `"smooth"`—Connects the values with a smooth line. Not supported for stacked area series with missing values.
+ *
+ * {% platform_content angular %}
+ * See also:
+ * - [`series.type`](https://www.telerik.com/kendo-angular-ui/components/charts/api/series#type)
+ * {% endplatform_content %}
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { LineStyle } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-series>
+ *         <kendo-chart-series-item type="line" [data]="[1, 2, 1]" [style]="style">
+ *         </kendo-chart-series-item>
+ *       </kendo-chart-series>
+ *     </kendo-chart>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public style: LineStyle = "smooth";
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import {
+ *  Chart,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-react-charts';
+ *
+ * const data = [1, 2, 3];
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartSeries>
+ *      <ChartSeriesItem type="line" data={data} style="smooth" />
+ *    </ChartSeries>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ * <template>
+ *  <Chart>
+ *    <ChartSeries>
+ *      <ChartSeriesItem :type="'line'" :data-items="dataItems" :item-style="'smooth'" />
+ *    </ChartSeries>
+ *  </Chart>
+ *  </template>
+ * <script>
+ * import {
+ *  Chart,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-vue-charts';
+ *
+ * export default {
+ *   components: {
+ *      Chart,
+ *      ChartSeries,
+ *      ChartSeriesItem
+ *   },
+ *   data () {
+ *       return {
+ *          dataItems: [1, 2, 3]
+ *       };
+ *   }
+ * }
+ * </script>
+ * ```
+ * {% endplatform_content %}
+ */
+export type LineStyle = 'normal' | 'step' | 'smooth';

package/dist/npm/field-types/lock-axis.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Specifies an axis for locking during the pan and zoom operations.
+ *
+ * The possible values are:
+ * - `"none"`—Locks no axis.
+ * - `"x"`—Locks the X axis.
+ * - `"y"`—Locks the Y axis.
+ *
+ * {% platform_content angular %}
+ * See the [Disabling Pan-and-Zoom Direction](https://www.telerik.com/kendo-angular-ui/components/charts/pan-zoom#disabling-pan-and-zoom-directions) example.
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * See the [Disabling Pan-and-Zoom Direction](https://www.telerik.com/kendo-react-ui/components/charts/chart/pan-zoom#disabling-pan-and-zoom-direction) example.
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * See the [Disabling Pan-and-Zoom Direction](https://www.telerik.com/kendo-vue-ui/components/charts/chart/pan-zoom#disabling-pan-and-zoom-direction) example.
+ * {% endplatform_content %}
+ */
+export type LockAxis = 'none' | 'x' | 'y';

package/dist/npm/field-types/margin.interface.d.ts

@@ -1,24 +1,34 @@
 /**
- * The margin size for each side.
+ * Specifies the margin configuration for each side of the element.
+ *
+ * {% platform_content angular %}
+ * See the [Chart Area](https://www.telerik.com/kendo-angular-ui/components/charts/elements/chart-area) example.
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * See the [Chart Area](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/chart-area) example.
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * See the [Chart Area](https://www.telerik.com/kendo-vue-ui/components/charts/elements/chart-area) example.
+ * {% endplatform_content %}
  */
 export interface Margin {
   /**
-   * The top margin in pixels.
+   * Specifies the top margin in pixels.
    */
   top?: number;
 
   /**
-   * The right margin in pixels.
+   * Specifies the right margin in pixels.
    */
   right?: number;
 
   /**
-   * The bottom margin in pixels.
+   * Specifies the bottom margin in pixels.
    */
   bottom?: number;
 
   /**
-   * The left margin in pixels.
+   * Specifies the left margin in pixels.
    */
   left?: number;
 }

package/dist/npm/field-types/marker-type.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Specifies the marker type.
+ *
+ * > Note that `"rect"` is an alias for `"square"`.
+ *
+ * The possible values are:
+ * - `"square"`—Creates a square marker.
+ * - `"circle"`—Creates a circle marker.
+ * - `"triangle"`—Creates a triangle marker.
+ * - `"cross"`—Creates a cross marker.
+ * - `"rect"`—Creates a rectangle marker.
+ * - `"roundedRect"`—Creates a rounded rectangle marker.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { MarkerType } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-series>
+ *         <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
+ *           <kendo-chart-series-item-markers [type]="markerType">
+ *           </kendo-chart-series-item-markers>
+ *         </kendo-chart-series-item>
+ *       </kendo-chart-series>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public markerType: MarkerType = "cross";
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import {
+ *  Chart,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-react-charts';
+ *
+ * const data = [1, 2, 3];
+ * const markerType = "cross";
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartSeries>
+ *      <ChartSeriesItem type="line" data={data} markers={{ type: markerType }} />
+ *    </ChartSeries>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ * <template>
+ *  <Chart>
+ *    <ChartSeries>
+ *      <ChartSeriesItem :type="'line'" :data-items="dataItems" :markers="markerType" />
+ *    </ChartSeries>
+ *  </Chart>
+ *  </template>
+ * <script>
+ * import {
+ *  Chart,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-vue-charts';
+ *
+ * export default {
+ *   components: {
+ *      Chart,
+ *      ChartSeries,
+ *      ChartSeriesItem
+ *   },
+ *   data () {
+ *       return {
+ *          dataItems: [1, 2, 3],
+ *          markerType: { type: "cross" }
+ *       };
+ *   }
+ * }
+ * </script>
+ * ```
+ * {% endplatform_content %}
+ */
+export type MarkerType = 'square' | 'circle' | 'triangle' | 'cross' | 'rect' | 'roundedRect';

package/dist/npm/field-types/modifier-key.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Specifies a modifier key.
+ *
+ * The possible values are:
+ * - `"none"`—Requires no modifier key.
+ * - `"ctrl"`—Requires the `Ctrl` key.
+ * - `"shift"`—Requires the `Shift` key.
+ * - `"alt"`—Requires the `Alt` key.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { DragAction } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *  selector: 'my-app',
+ * template: `
+ * <kendo-chart [zoomable]="true">
+ *   <kendo-chart-zoomable [selection]="dragAction"></kendo-chart-zoomable>
+ * </kendo-chart>
+ * `
+ * })
+ * export class AppComponent {
+ *  public dragAction: DragAction = { key: 'shift' };
+ * }
+ * ```
+ * {% endplatform_content %}
+ */
+export type ModifierKey = 'none' | 'ctrl' | 'shift' | 'alt';

package/dist/npm/field-types/mousewheel-select.interface.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Specifies the configuration of the mousewheel action for selection.
+ */
+export interface MousewheelSelect {
+  /**
+   * Determines whether to reverse the mousewheel direction.
+   * The normal direction is down for `"zoom out"`.
+   * The normal direction is up for `"zoom in"`.
+   */
+  reverse?: boolean;
+
+  /**
+   * Specifies the zoom direction of the selection.
+   * Use `both` to enable zooming to expand and contract the selection on both sides, `left` to allow zooming on the left side only, or `right` to permit zooming on the right side only.
+   */
+  zoom?: 'both' | 'left' | 'right';
+}

package/dist/npm/field-types/mousewheel-zoom.interface.d.ts

@@ -0,0 +1,21 @@
+import { LockAxis } from './lock-axis';
+
+/**
+ * Specifies the configuration of the mousewheel action for zooming.
+ */
+export interface MousewheelZoom {
+  /**
+   * Specifies an axis that should not be zoomed.
+   */
+  lock?: LockAxis;
+
+  /**
+   * Specifies the zoom rate as percentage of the axis range. The default value is 0.3 or 30% of the axis range.
+   *
+   * Accepts the range from 0.01 to 0.9 (1% to 90%).
+   *
+   * @default 0.3
+   *
+   */
+   rate?: number;
+}

package/dist/npm/field-types/negative-bubble-values.interface.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Specifies the appearance settings for the negative values in the Bubble series.
+ */
+export interface NegativeBubbleValues {
+  /**
+   * Specifies the color of the negative bubble Chart values.
+   */
+  color?: string;
+
+  /**
+   * Determines whether the Chart displays the negative bubbles.
+   * By default, the negative bubbles are not displayed.
+   */
+  visible?: boolean;
+}

package/dist/npm/field-types/note-label-position.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Specifies the position of a note label.
+ *
+ * The possible values are:
+ * - `"inside"`—Positions the note label inside the axis.
+ * - `"outside"`—Positions the note label outside the axis.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { NoteLabelPosition } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-value-axis>
+ *         <kendo-chart-value-axis-item>
+ *             <kendo-chart-value-axis-item-notes [data]="[{value: 1, label: { text: 'Foo' }}]">
+ *               <kendo-chart-value-axis-item-notes-label [position]="position">
+ *               </kendo-chart-value-axis-item-notes-label>
+ *             </kendo-chart-value-axis-item-notes>
+ *         </kendo-chart-value-axis-item>
+ *       </kendo-chart-value-axis>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public position: NoteLabelPosition = "outside";
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import {
+ *  Chart,
+ *  ChartValueAxis,
+ *  ChartValueAxisItem
+ * } from '@progress/kendo-react-charts';
+ *
+ * const data = [{value: 1, label: { text: 'Foo' }}];
+ * const position = "outside";
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartValueAxis>
+ *      <ChartValueAxisItem notes={{ data, label: { position } }} />
+ *    </ChartValueAxis>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ * <template>
+ *   <div>
+ *     <Chart>
+ *       <ChartValueAxis>
+ *         <ChartValueAxisItem :max="5" :notes="valueNotes" />
+ *       </ChartValueAxis>
+ *     </Chart>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import {
+ *   Chart,
+ *   ChartValueAxis,
+ *   ChartValueAxisItem,
+ * } from '@progress/kendo-vue-charts';
+ *
+ * export default {
+ *   components: {
+ *     Chart,
+ *     ChartValueAxis,
+ *     ChartValueAxisItem,
+ *   },
+ *   data: function () {
+ *     return {
+ *       valueNotes: {
+ *         data: [
+ *           {
+ *             value: 4,
+ *             text: 'Max',
+ *           },
+ *           {
+ *             value: 1,
+ *             text: 'Min',
+ *           },
+ *         ],
+ *         label: {
+ *           position: 'outside',
+ *           content: (args) => args.dataItem.text,
+ *         },
+ *       },
+ *     };
+ *   },
+ * };
+ * </script>
+ * ```
+ * {% endplatform_content %}
+ */
+export type NoteLabelPosition = 'inside' | 'outside';

package/dist/npm/field-types/note-line.interface.d.ts

@@ -0,0 +1,26 @@
+import { DashType } from './dash-type';
+
+/**
+ * Specifies the appearance settings for the note-connecting line.
+ */
+export interface NoteLine {
+  /**
+   * Specifies the color of the note line. Accepts a valid CSS color string, including hex and rgb.
+   */
+  color?: string;
+
+  /**
+   * Specifies the dash type of the note line.
+   */
+  dashType?: DashType;
+
+  /**
+   * Specifies the length of the connecting line in pixels.
+   */
+  length?: number;
+
+  /**
+   * Specifies the width of the connecting line in pixels.
+   */
+  width?: number;
+}