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

package/dist/npm/field-types/auto-base-unit-steps.interface.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Specifies the allowed time-interval steps when `baseUnit` is set to either `"fit"` or `"auto"`.
+ *
+ * Divides the active period into the smallest possible intervals
+ * that do not exceed the set `maxDateGroups` value.
+ *
+* {% platform_content angular %}
+ * ```html
+ * <kendo-chart-category-axis>
+ *  <kendo-chart-category-axis-item [autoBaseUnitSteps]="baseUnitSteps">
+ *  </kendo-chart-category-axis-item>
+ * </kendo-chart-category-axis>
+ * ```
+ * ```ts
+ * public baseUnitSteps: AutoBaseUnitSteps = {
+ *  // Do not allow zooming into hours
+ *  weeks: [],
+ * };
+ * ```
+* {% endplatform_content %}
+ */
+export interface AutoBaseUnitSteps {
+  /**
+   * Specifies the interval steps when displaying milliseconds.
+   */
+  milliseconds?: number[];
+
+  /**
+   * Specifies the interval steps when displaying seconds.
+   */
+  seconds?: number[];
+
+  /**
+   * Specifies the interval steps when displaying minutes.
+   */
+  minutes?: number[];
+
+  /**
+   * Specifies the interval steps when displaying hours.
+   */
+  hours?: number[];
+
+  /**
+   * Specifies the interval steps when displaying days.
+   */
+  days?: number[];
+
+  /**
+   * Specifies the interval steps when displaying weeks.
+   */
+  weeks?: number[];
+
+  /**
+   * Specifies the interval steps when displaying months.
+   */
+  months?: number[];
+
+  /**
+   * Specifies the interval steps when displaying years.
+   */
+  years?: number[];
+}

package/dist/npm/field-types/axis-labels-position.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Specifies the position of the axis labels.
+ *
+ * The possible values are:
+ * - `"start"`—Positions the labels at the start of the axis, typically located at the left or bottom end of the Chart, unless the crossing axis is reversed.
+ * - `"end"`—Positions the labels at the end of the axis, usually at the top or right end of the Chart, unless the crossing axis is reversed.
+ * - `"onAxis"`—Positions the labels on the axis.
+ * - `""`—Positions the labels based on the axis type.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { AxisLabelsPosition } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-category-axis>
+ *         <kendo-chart-category-axis-item>
+ *           <kendo-chart-category-axis-item-labels [position]="position">
+ *           </kendo-chart-category-axis-item-labels>
+ *         </kendo-chart-category-axis-item>
+ *       </kendo-chart-category-axis>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public position: AxisLabelsPosition = "end";
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import { Chart, ChartValueAxis, ChartValueAxisItem } from '@progress/kendo-react-charts';
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartValueAxis>
+ *      <ChartValueAxisItem labels={{ position: "end" }}/>
+ *    </ChartValueAxis>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ *  <Chart>
+ *    <ChartValueAxis>
+ *      <ChartValueAxisItem :labels="{ position: 'end' }"/>
+ *    </ChartValueAxis>
+ *  </Chart>
+ * );
+ *
+ * ```
+ * {% endplatform_content %}
+ */
+export type AxisLabelsPosition = 'start' | 'end' | 'onAxis' | '';

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

@@ -0,0 +1,41 @@
+import { DashType } from './dash-type';
+
+/**
+ * Specifies the appearance settings for the axis lines.
+ * Affects the major and minor axis ticks, but not the 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 AxisLine {
+  /**
+   * Specifies the color of the lines.
+   * Accepts a valid CSS color string, including hex and rgb.
+   * The `color` option affects the major and minor axis ticks, but not the grid lines.
+   */
+  color?: string;
+
+  /**
+   * Specifies the dash type of the line.
+   */
+  dashType?: DashType;
+
+  /**
+   * Determines whether to display the axis lines.
+   * By default, the axis lines are visible.
+   */
+  visible?: boolean;
+
+  /**
+   * Specifies the width of the line in pixels.
+   * Affects the major and minor axis ticks, but not the grid lines.
+   */
+  width?: number;
+}

package/dist/npm/field-types/axis-ticks.interface.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Specifies the appearance configuration for the major and minor axis ticks.
+ *
+ * {% 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 AxisTicks {
+  /**
+   * Specifies the color of the tick lines. Accepts a valid CSS color string, including hex and rgb.
+   */
+  color?: string;
+
+  /**
+   * Specifies the length of the tick line in pixels.
+   */
+  size?: number;
+
+  /**
+   * Specifies the tick-rendering step. Renders every n<sup>th</sup> tick, where `n` is the step.
+   */
+  step?: number;
+
+  /**
+   * Specifies the number of ticks to skip at the beginning.
+   */
+  skip?: number;
+
+  /**
+   * Determines whether to display the axis ticks.
+   * By default, only the major axis ticks are visible.
+   */
+  visible?: boolean;
+
+  /**
+   * Specifies the width of the ticks in pixels.
+   */
+  width?: number;
+}

package/dist/npm/field-types/axis-title-position.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Specifies the position of an axis title.
+ *
+ * The possible values are:
+ * - `"top"`—Positions the title at the top of the axis.
+ * - `"bottom"`—Positions the title at the bottom of the axis.
+ * - `"left"`—Positions the title at the left of the axis.
+ * - `"right"`—Positions the title at the right of the axis.
+ * - `"center"`—Positions the title at the center of the axis.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { AxisTitlePosition } 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-title [position]="position" text="Title">
+ *           </kendo-chart-value-axis-item-title>
+ *         </kendo-chart-value-axis-item>
+ *       </kendo-chart-value-axis>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public position: AxisTitlePosition = "top";
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import { Chart, ChartValueAxis, ChartValueAxisItem } from '@progress/kendo-react-charts';
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartValueAxis>
+ *      <ChartValueAxisItem title={{ text: 'Title', position: "top" }}/>
+ *    </ChartValueAxis>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ *  <Chart>
+ *    <ChartValueAxis>
+ *      <ChartValueAxisItem :title="{ text: 'Title', position: 'top' }"/>
+ *    </ChartValueAxis>
+ *  </Chart>
+ *
+ * ```
+ * {% endplatform_content %}
+ */
+export type AxisTitlePosition = 'top' | 'bottom' | 'left' | 'right' | 'center';

package/dist/npm/field-types/base-unit.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Specifies the `baseUnit` type of a X or Y axis.
+ *
+ * The possible values are:
+ * - `"milliseconds"`—Sets the base unit to milliseconds.
+ * - `"seconds"`—Sets the base unit to seconds.
+ * - `"minutes"`—Sets the base unit to minutes.
+ * - `"hours"`—Sets the base unit to hours.
+ * - `"days"`—Sets the base unit to days.
+ * - `"weeks"`—Sets the base unit to weeks.
+ * - `"months"`—Sets the base unit to months.
+ * - `"years"`—Sets the base unit to years.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { BaseUnit } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-x-axis>
+ *         <kendo-chart-x-axis-item [baseUnit]="baseUnit">
+ *         </kendo-chart-x-axis-item>
+ *       </kendo-chart-x-axis>
+ *       <kendo-chart-series>
+ *         <kendo-chart-series-item type="scatter" [data]="data">
+ *         </kendo-chart-series-item>
+ *       </kendo-chart-series>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public baseUnit: BaseUnit = "months";
+ *   public data: any[] = [[new Date(2000, 0, 1), 1], [new Date(2001, 0, 1), 1]];
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import {
+ *  Chart,
+ *  ChartXAxis,
+ *  ChartXAxisItem,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-react-charts';
+ *
+ * const baseUnit = "months";
+ * const data = [[new Date(2000, 0, 1), 1], [new Date(2001, 0, 1), 1]];
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartXAxis>
+ *     <ChartXAxisItem baseUnit={baseUnit} />
+ *    </ChartXAxis>
+ *    <ChartSeries>
+ *      <ChartSeriesItem type="scatter" data={data} />
+ *    </ChartSeries>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ *  <Chart>
+ *    <ChartXAxis>
+ *     <ChartXAxisItem :base-unit="baseUnit" />
+ *    </ChartXAxis>
+ *    <ChartSeries>
+ *      <ChartSeriesItem :type="'scatter'" :data-items="data" />
+ *    </ChartSeries>
+ *  </Chart>
+ * ```
+ * {% endplatform_content %}
+ */
+export type BaseUnit = 'milliseconds' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years';

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

@@ -1,21 +1,36 @@
 import { DashType } from './dash-type';
 
 /**
- * The appearance settings for the border lines.
+ * Specifies the appearance settings for the border lines.
+ *
+ * {% platform_content angular %}
+ * See [Chart Title](https://www.telerik.com/kendo-angular-ui/components/charts/elements/title) example.
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * See [Chart Title](https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/title) example.
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * See [Chart Title](https://www.telerik.com/kendo-vue-ui/components/charts/elements/title) example.
+ * {% endplatform_content %}
  */
 export interface Border {
   /**
-   * The color of the border line. Accepts a valid CSS color string, including hex and rgb.
+   * Specifies the color of the border line. Accepts a valid CSS color string, including hex and rgb.
    */
   color?: string;
 
   /**
-   * The dash type of the border line.
+   * Specifies the dash type of the border line.
    */
   dashType?: DashType;
 
   /**
-   * The width of the border line in pixels.
+   * Specifies the width of the border line in pixels.
    */
   width?: number;
+
+  /**
+   * Specifies the border opacity.
+   */
+  opacity?: number;
 }

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

@@ -0,0 +1,9 @@
+/**
+ * Specifies the appearance settings for the target line of the Bullet series.
+ */
+export interface BulletTargetLine {
+  /**
+   * Specifies the width of the Bullet target line in pixels.
+   */
+  width?: number;
+}

package/dist/npm/field-types/bullet-target.interface.d.ts

@@ -0,0 +1,23 @@
+import { Border } from './border.interface';
+import { BulletTargetLine } from './bullet-target-line.interface';
+
+/**
+ * Specifies the appearance settings for the target of the Bullet series.
+ */
+export interface BulletTarget {
+  /**
+   * Specifies the width of the border in pixels.
+   * By default, the border width is set to `zero`, which means that the border is not visible.
+   */
+  border?: Border;
+
+  /**
+   * Specifies the target color.
+   */
+  color?: string;
+
+  /**
+   * Specifies the appearance settings for the target line of the Bullet series.
+   */
+  line?: BulletTargetLine;
+}

package/dist/npm/field-types/category-base-unit.d.ts

@@ -0,0 +1,113 @@
+import { BaseUnit } from './base-unit';
+
+/**
+ * Specifies the `baseUnit` type of the category axis.
+ *
+ * The possible values are:
+ * - `"milliseconds", "seconds", "minutes", "hours", "days", "weeks", "months", "years"`—Sets a fixed base time interval for the axis labels.
+ * - `"auto"`—Automatically determines the base unit by the minimum difference between subsequent categories.
+ * - `"fit"`—Adjusts the `categoryAxis.baseUnitStep` and base unit so that the number of categories does not exceed `categoryAxis.maxDateGroups`, and uses the `series.aggregate` function to aggregate data based on the selected base unit.
+ *
+ * {% platform_content angular %}
+ * See also, [`BaseUnit`](https://www.telerik.com/kendo-angular-ui/components/charts/api/baseunit)
+ * {% endplatform_content %}
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { CategoryBaseUnit } from '@progress/kendo-angular-charts';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-chart>
+ *       <kendo-chart-category-axis>
+ *         <kendo-chart-category-axis-item [baseUnit]="baseUnit" >
+ *         </kendo-chart-category-axis-item>
+ *       </kendo-chart-category-axis>
+ *       <kendo-chart-series>
+ *         <kendo-chart-series-item categoryField="category" [data]="data">
+ *         </kendo-chart-series-item>
+ *       </kendo-chart-series>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public baseUnit: CategoryBaseUnit = "months";
+ *   public data: any[] = [{ category: new Date(2000, 0, 1), value: 1 }, { category: new Date(2001, 0, 1), value: 1}];
+ * }
+ *
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content react %}
+ * @example
+ * ```jsx
+ * import {
+ *  Chart,
+ *  ChartCategoryAxis,
+ *  ChartCategoryAxisItem,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-react-charts';
+ *
+ * const baseUnit = "months";
+ * const data = [{ category: new Date(2000, 0, 1), value: 1 }, { category: new Date(2001, 0, 1), value: 1}];
+ *
+ * const ChartContainer = () => (
+ *  <Chart>
+ *    <ChartCategoryAxis>
+ *     <ChartCategoryAxisItem baseUnit={baseUnit} />
+ *    </ChartCategoryAxis>
+ *    <ChartSeries>
+ *      <ChartSeriesItem categoryField="category" data={data} />
+ *    </ChartSeries>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ * <template>
+ *  <Chart>
+ *    <ChartCategoryAxis>
+ *     <ChartCategoryAxisItem :base-unit="baseUnit" />
+ *    </ChartCategoryAxis>
+ *    <ChartSeries>
+ *      <ChartSeriesItem :category-field="category" :data-items="dataItems" />
+ *    </ChartSeries>
+ *  </Chart>
+ * </template>
+ * <script>
+ * import {
+ *  Chart,
+ *  ChartCategoryAxis,
+ *  ChartCategoryAxisItem,
+ *  ChartSeries,
+ *  ChartSeriesItem
+ * } from '@progress/kendo-vue-charts';
+ *
+ * export default {
+ *   components: {
+ *       Chart,
+ *       ChartCategoryAxis,
+ *       ChartCategoryAxisItem,
+ *       ChartSeries,
+ *       ChartSeriesItem
+ *   },
+ *   data () {
+ *       return {
+ *          baseUnit: "months",
+ *          dataItems: [
+ *              { category: new Date(2000, 0, 1), value: 1 },
+ *              { category: new Date(2001, 0, 1), value: 1}
+ *          ]
+ *       };
+ *   }
+ * }
+ * </script>
+ * ```
+ * {% endplatform_content %}
+ */
+export type CategoryBaseUnit = BaseUnit | 'auto' | 'fit';

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

@@ -1,7 +1,89 @@
 /**
- * The dash line type.
+ * Specifies the dash line type.
+ *
+ * The possible values are:
+ * - `"dash"`—Creates a line that consists of dashes.
+ * - `"dashDot"`—Creates a line that consists of a repeating dash-dot pattern.
+ * - `"dot"`—Creates a line that consists of dots.
+ * - `"longDash"`—Creates a line that consists of a repeating long-dash pattern.
+ * - `"longDashDot"`—Creates a line that consists of a repeating long-dash-dot pattern.
+ * - `"longDashDotDot"`—Creates a line that consists of a repeating long-dash-dot-dot pattern.
+ * - `"solid"`—Creates a solid line.
+ *
+ * {% platform_content angular %}
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { DashType } 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]" [dashType]="dashType">
+ *         </kendo-chart-series-item>
+ *       </kendo-chart-series>
+ *     </kendo-chart>
+ *   `
+ * })
+ * class AppComponent {
+ *   public dashType: DashType = "dot";
+ * }
+ *
+ * ```
+ * {% 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} dashType="dot" />
+ *    </ChartSeries>
+ *  </Chart>
+ * );
+ * ```
+ * {% endplatform_content %}
+ * {% platform_content vue %}
+ * @example
+ * ```jsx
+ * <template>
+ *  <Chart>
+ *    <ChartSeries>
+ *      <ChartSeriesItem :type="'line'" :data-items="dataItems" :dash-type="'dot'" />
+ *    </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 DashType =
-  'dash' | 'dashDot' | 'dot' |
-  'longDash' | 'longDashDot' | 'longDashDotDot' |
-  'solid';
+export type DashType = 'dash' | 'dashDot' | 'dot' | 'longDash' | 'longDashDot' | 'longDashDotDot' | 'solid';

package/dist/npm/field-types/date-formats.interface.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Specifies the format that displays the labels when they are dates.
+ *
+ * Selects the appropriate format for the current `baseUnit`.
+ * Setting the `format` option of the labels overrides the date formats.
+ */
+export interface DateFormats {
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"milliseconds"`.
+   */
+  milliseconds?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"seconds"`.
+   */
+  seconds?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"minutes"`.
+   */
+  minutes?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"hours"`.
+   */
+  hours?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"days"`.
+   */
+  days?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"weeks"`.
+   */
+  weeks?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"months"`.
+   */
+  months?: string;
+
+  /**
+   * Specifies the format when the axis `baseUnit` is set to `"years"`.
+   */
+  years?: string;
+}