@progress/kendo-angular-charts 13.2.0-develop.5 → 13.2.0-develop.7

package/chart.component.d.ts

@@ -100,11 +100,20 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
     protected instanceEventService: InstanceEventService;
     protected changeDetector: ChangeDetectorRef;
     protected renderer: Renderer2;
+    /**
+   * Specifies if the Chart can be panned.
+   * @default false
+   */
     pannable: boolean | DragAction;
     renderAs: 'svg' | 'canvas';
     seriesColors: string[];
     subtitle: string | Subtitle;
     title: string | Title;
+    /**
+     * If set to `true`, the Chart plays animations when it displays the series.
+     * By default, animations are enabled.
+     * @default true
+     */
     transitions: boolean;
     zoomable: boolean | Zoomable;
     axisDefaults: AxisDefaults;
@@ -157,10 +166,7 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
      */
     noteLeave: EventEmitter<NoteLeaveEvent>;
     /**
-     * Fires when a pane is rendered because the Chart:
-     * * Is rendered.
-     * * Performs panning or zooming.
-     * * Is exported with different options.
+     * Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options.
      * The event is used to render custom visuals in the panes.
      */
     paneRender: EventEmitter<PaneRenderEvent>;
@@ -187,25 +193,19 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
     /**
      * Fires when the user modifies the selection.
      *
-     * The range units are:
-     * - Generic axis&mdash;Category index (0-based).
-     * - Date axis&mdash;Date instance.
+     * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
      */
     select: EventEmitter<SelectEvent>;
     /**
      * Fires when the user completes the modification of the selection.
      *
-     * The range units are:
-     * - Generic axis&mdash;Category index (0-based).
-     * - Date axis&mdash;Date instance.
+     * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
      */
     selectEnd: EventEmitter<SelectEndEvent>;
     /**
      * Fires when the user starts modifying the axis selection.
      *
-     * The range units are:
-     * - Generic axis&mdash;Category index (0-based).
-     * - Date axis&mdash;Date instance.
+     * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
      */
     selectStart: EventEmitter<SelectStartEvent>;
     /**
@@ -257,27 +257,7 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
      * that the component redraws its content when the size of its container changes.
      * Defaults to `10`. To disable the automatic resizing, set it to `0`.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *     selector: 'my-app',
-     *     template: `
-     *         <kendo-chart [resizeRateLimit]="2">
-     * <!--                 ^^^^^^^^^^^^^^^^^^^^^^
-     *       Will update the size of the Chart up to two times a second.
-     *       Resize the example pane or window to try it out.
-     * -->
-     *          <kendo-chart-series>
-     *            <kendo-chart-series-item [data]="seriesData">
-     *           </kendo-chart-series-item>
-     *         </kendo-chart-series>
-     *       </kendo-chart>
-     *   `
-     * })
-     * export class AppComponent {
-     *    seriesData: number[] = [1, 2, 3, 5];
-     * }
-     * ```
+     * @default 10
      */
     resizeRateLimit: number;
     /**
@@ -394,17 +374,7 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
     /**
      * Highlights the series points or the segments of a Pie, Donut, or Funnel charts.
      *
-     * See [Series Highlight]({% slug serieshighlight_chart_charts %}) for more details.
-     *
-     * In the following example, the callback is evaluated for each data point.
-     * If the function returns `true`, the point is highlighted.
-     *
-     * {% meta height:500 %}
-     * {% embed_file elements/highlight/api/app.component.ts preview %}
-     * {% embed_file shared/app.module.ts hidden %}
-     * {% embed_file shared/main.ts hidden %}
-     * {% endmeta %}
-     *
+     * See [Series Highlight]({% slug serieshighlight_chart_charts %}) for more details (with an [example](slug:serieshighlight_chart_charts#toc-toggling-the-highlight-with-code)).
      * @param show - A Boolean value that indicates whether the highlight is shown or hidden.
      * @param filter - A string that represents the series or category name, an object with the series and category name, or a function which will be called for each point. The function should return `true` for the points for which the highlight is toggled.
      */

package/esm2020/chart/pane.component.mjs

@@ -13,57 +13,16 @@ import * as i2 from "../common/collection.service";
  * The configuration component for a Chart pane.
  *
  * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *       <kendo-chart>
- *         <kendo-chart-panes>
- *             <kendo-chart-pane name="top" background="pink" [border]="{ color: 'black', dashtype: 'dash', width: 2 }">
- *               <!--            ^^^^^^^^^^
- *                   Unique ID for the pane.
- *               -->
- *             </kendo-chart-pane>
- *             <kendo-chart-pane name="bottom" [height]="150" title="Bottom pane">
- *               <!--                          ^^^^^^^^^^^^^^
- *                   Note that the binding is required,
- *                   otherwise the property will be
- *                   bound to a '100' string.
- *               -->
- *             </kendo-chart-pane>
- *         </kendo-chart-panes>
- *
- *         <kendo-chart-value-axis>
- *             <kendo-chart-value-axis-item name="top">
- *               <!--                       ^^^^^^^^^^
- *                   Unique ID for the axis.
- *                   No need to set a pane as it will use the first,
- *                   'top' pane by default.
- *               -->
- *             </kendo-chart-value-axis-item>
- *             <kendo-chart-value-axis-item name="bottom"
- *                                          pane="bottom">
- *               <!--                       ^^^^^^^^^^^^^
- *                   Move the axis to the bottom pane.
- *               -->
- *             </kendo-chart-value-axis-item>
- *         </kendo-chart-value-axis>
- *         <kendo-chart-series>
- *           <kendo-chart-series-item [data]="seriesData[0]">
- *               <!-- Will use the first, 'top' value axis by default. -->
- *           </kendo-chart-series-item>
- *           <kendo-chart-series-item type="line" [data]="seriesData[1]" axis="bottom">
- *               <!-- Plot this series to the 'bottom' axis.              ^^^^^^^^^^^^^ -->
- *           </kendo-chart-series-item>
- *         </kendo-chart-series>
- *       </kendo-chart>
- *   `
- * })
- * export class AppComponent {
- *   public seriesData: number[][] = [[1, 2, 3, 5], [0, 1, 0, 1]];
- * }
+ * ```html
+ * <kendo-chart>
+ *   <kendo-chart-panes>
+ *     <kendo-chart-pane
+ *         name="top"
+ *         background="pink"
+ *         [border]="{ color: 'black', dashType: 'dash', width: 2 }">
+ *     </kendo-chart-pane>
+ *   </kendo-chart-panes>
+ * </kendo-chart>
  * ```
  */
 export class PaneComponent extends CollectionItemComponent {

package/esm2020/chart/panes.component.mjs

@@ -15,38 +15,14 @@ import * as i2 from "../common/collection.service";
  * A collection of one or more pane configuration components.
  *
  * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-chart>
- *       <kendo-chart-panes>
- *         <kendo-chart-pane name="topPane">
- *         </kendo-chart-pane>
- *         <kendo-chart-pane name="bottomPane">
- *         </kendo-chart-pane>
- *       </kendo-chart-panes>
- *       <kendo-chart-value-axis>
- *         <kendo-chart-value-axis-item pane="topPane">
- *         </kendo-chart-value-axis-item>
- *         <kendo-chart-value-axis-item name="bottomAxis" pane="bottomPane">
- *         </kendo-chart-value-axis-item>
- *       </kendo-chart-value-axis>
- *       <kendo-chart-series>
- *         <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
- *         </kendo-chart-series-item>
- *         <kendo-chart-series-item type="line" [data]="[1, 2, 3, 4]"
- *                                  axis="bottomAxis">
- *         </kendo-chart-series-item>
- *       </kendo-chart-series>
- *     </kendo-chart>
- *   `
- * })
- * class AppComponent {
- * }
- *
+ * ```html
+ * <kendo-chart>
+ *   <kendo-chart-panes>
+ *     <kendo-chart-pane name="topPane"></kendo-chart-pane>
+ *     <kendo-chart-pane name="bottomPane"></kendo-chart-pane>
+ *   </kendo-chart-panes>
+ *   ...
+ * </kendo-chart>
  * ```
  */
 export class PanesComponent extends CollectionComponent {

package/esm2020/chart/series.component.mjs

@@ -14,26 +14,16 @@ import * as i1 from "../common/configuration.service";
 import * as i2 from "../common/collection.service";
 import * as i3 from "../common/tooltip-template.service";
 /**
- * A collection of one or more series items.
+ * A collection of one or more series items. [See example](slug:series_chart_charts).
  *
  * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-chart>
- *       <kendo-chart-series>
- *         <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
- *         </kendo-chart-series-item>
- *       </kendo-chart-series>
- *     </kendo-chart>
- *   `
- * })
- * class AppComponent {
- * }
- *
+ * ```html
+ * <kendo-chart>
+ *   <kendo-chart-series>
+ *     <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
+ *     </kendo-chart-series-item>
+ *   </kendo-chart-series>
+ * </kendo-chart>
  * ```
  */
 export class SeriesComponent extends CollectionComponent {

package/esm2020/chart/subtitle.component.mjs

@@ -12,63 +12,10 @@ import * as i1 from "../common/configuration.service";
  * ([see example]({% slug title_chart_charts %})).
  *
  * @example
- * ```ts-preview
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-chart [categoryAxis]="{ categories: categories }">
- *            <kendo-chart-title text="Gross domestic product growth"></kendo-chart-title>
- *            <kendo-chart-subtitle text="/GDP annual %/"></kendo-chart-subtitle>
- *            <kendo-chart-legend
- *              position="bottom"
- *              orientation="horizontal"
- *              align="end"
- *              background="rgba(255, 0, 0, 0.1)"
- *              [border]="borderOptions"
- *              [margin]="10"
- *              [padding]="10"
- *              [width]="150"
- *              [offsetX]="11"
- *              [offsetY]="-103"
- *              [reverse]="true"
- *              [visible]="isVisible"
- *              ></kendo-chart-legend>
- *            <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
- *            <kendo-chart-series>
- *                <kendo-chart-series-item *ngFor="let item of series"
- *                    type="line" style="smooth" [data]="item.data" [name]="item.name">
- *                </kendo-chart-series-item>
- *            </kendo-chart-series>
- *        </kendo-chart>
- *        <br /><br />
- *        <button kendoButton (click)="isVisible=!isVisible">Toggle Legend</button>
- *    `
- * })
- * export class AppComponent {
- *  public isVisible = true;
- *  public borderOptions = {
- *    color: "rgba(255, 0, 0, 0.8)",
- *    dashType: 'dash',
- *    width: 2
- *  };
- *
- * public series: any[] = [{
- *   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]
- * }];
- *  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
- * }
+ * ```html
+ * <kendo-chart [categoryAxis]="{ categories: categories }">
+ *     <kendo-chart-subtitle text="/GDP annual %/"></kendo-chart-subtitle>
+ * </kendo-chart>
  * ```
  */
 export class SubtitleComponent extends SettingsComponent {

package/esm2020/chart/title.component.mjs

@@ -12,62 +12,11 @@ import * as i1 from "../common/configuration.service";
  * ([see example]({% slug title_chart_charts %})).
  *
  * @example
- * ```ts-preview
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-chart [categoryAxis]="{ categories: categories }">
- *            <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
- *            <kendo-chart-legend
- *              position="bottom"
- *              orientation="horizontal"
- *              align="end"
- *              background="rgba(255, 0, 0, 0.1)"
- *              [border]="borderOptions"
- *              [margin]="10"
- *              [padding]="10"
- *              [width]="150"
- *              [offsetX]="11"
- *              [offsetY]="-103"
- *              [reverse]="true"
- *              [visible]="isVisible"
- *              ></kendo-chart-legend>
- *            <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
- *            <kendo-chart-series>
- *                <kendo-chart-series-item *ngFor="let item of series"
- *                    type="line" style="smooth" [data]="item.data" [name]="item.name">
- *                </kendo-chart-series-item>
- *            </kendo-chart-series>
- *        </kendo-chart>
- *        <br /><br />
- *        <button kendoButton (click)="isVisible=!isVisible">Toggle Legend</button>
- *    `
- * })
- * export class AppComponent {
- *  public isVisible = true;
- *  public borderOptions = {
- *    color: "rgba(255, 0, 0, 0.8)",
- *    dashType: 'dash',
- *    width: 2
- *  };
- *
- * public series: any[] = [{
- *   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]
- * }];
- *  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
- * }
+ * ```html
+ * <kendo-chart [categoryAxis]="{ categories: categories }">
+ *     <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
+ *     ...
+ * </kendo-chart>
  * ```
  */
 export class TitleComponent extends SettingsComponent {

package/esm2020/chart/value-axis.component.mjs

@@ -15,32 +15,12 @@ import * as i2 from "../common/collection.service";
  * A collection of one or more value axis configuration components.
  *
  * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-chart>
- *       <kendo-chart-value-axis>
- *         <kendo-chart-value-axis-item>
- *         </kendo-chart-value-axis-item>
- *         <kendo-chart-value-axis-item name="secondAxis">
- *         </kendo-chart-value-axis-item>
- *       </kendo-chart-value-axis>
- *       <kendo-chart-series>
- *         <kendo-chart-series-item type="line" [data]="[1, 2, 3]">
- *         </kendo-chart-series-item>
- *         <kendo-chart-series-item type="line" [data]="[0.1, 0.2, 0.3]"
- *                                  axis="secondAxis">
- *         </kendo-chart-series-item>
- *       </kendo-chart-series>
- *     </kendo-chart>
- *   `
- * })
- * class AppComponent {
- * }
- *
+ * ```html
+ * <kendo-chart>
+ *     <kendo-chart-value-axis>
+ *         ....
+ *     </kendo-chart-value-axis>
+ * </kendo-chart>
  * ```
  */
 export class ValueAxisComponent extends CollectionComponent {
@@ -58,7 +38,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [CollectionService],
                     selector: 'kendo-chart-value-axis',
-                    template: ''
+                    template: '',
                 }]
         }], ctorParameters: function () { return [{ type: i1.ConfigurationService }, { type: i2.CollectionService }]; }, propDecorators: { children: [{
                 type: ContentChildren,

package/esm2020/chart-breadcrumb.component.mjs

@@ -5,6 +5,7 @@
 import { Component, Input, ViewChild, isDevMode } from '@angular/core';
 import { BreadCrumbComponent } from '@progress/kendo-angular-navigation';
 import { ChartComponent } from './index';
+import { Subscription } from 'rxjs';
 import { homeIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-navigation";
@@ -24,16 +25,18 @@ export class ChartBreadcrumbComponent {
          * (homeIcon is imported from '@progress/kendo-svg-icons')
          */
         this.rootItem = { icon: 'home', svgIcon: homeIcon, title: 'Home' };
+        this.subscription = new Subscription();
     }
     ngOnInit() {
         this.items = [this.rootItem];
         if (this.chart) {
-            this.subscription = this.chart.drilldown.subscribe((e) => {
-                this.items = [...this.items, { text: e.point.category.toString() }];
-            });
+            this.subscription.add(this.chart.drilldown.subscribe(this.onDrilldown.bind(this)));
+            this.subscription.add(this.chart.drilldownLevelChange.subscribe(this.onDrilldownLevelChange.bind(this)));
         }
         else if (isDevMode()) {
-            console.warn('Chart Breadcrumb: No Chart instance supplied. Navigation is inactive.');
+            throw new Error('Chart Breadcrumb: No Chart instance supplied. Please add a reference using the "chart" attribute. For example: \n' +
+                '<kendo-chart-breadcrumb [chart]="instance" />\n' +
+                '<kendo-chart #instance>');
         }
     }
     ngOnChanges(changes) {
@@ -52,8 +55,12 @@ export class ChartBreadcrumbComponent {
      * @hidden
      */
     onItemClick(target) {
-        const level = this.items.findIndex(item => item === target);
-        this.chart.drilldownLevel = level;
+        this.chart.drilldownLevel = this.items.findIndex(item => item === target);
+    }
+    onDrilldown(e) {
+        this.items = [...this.items, { text: e.point.category.toString() }];
+    }
+    onDrilldownLevelChange(level) {
         this.items = this.items.slice(0, level + 1);
     }
 }

package/esm2020/chart.component.mjs

@@ -128,10 +128,7 @@ export class ChartComponent {
          */
         this.noteLeave = new EventEmitter();
         /**
-         * Fires when a pane is rendered because the Chart:
-         * * Is rendered.
-         * * Performs panning or zooming.
-         * * Is exported with different options.
+         * Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options.
          * The event is used to render custom visuals in the panes.
          */
         this.paneRender = new EventEmitter();
@@ -158,25 +155,19 @@ export class ChartComponent {
         /**
          * Fires when the user modifies the selection.
          *
-         * The range units are:
-         * - Generic axis—Category index (0-based).
-         * - Date axis—Date instance.
+         * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
          */
         this.select = new EventEmitter();
         /**
          * Fires when the user completes the modification of the selection.
          *
-         * The range units are:
-         * - Generic axis—Category index (0-based).
-         * - Date axis—Date instance.
+         * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
          */
         this.selectEnd = new EventEmitter();
         /**
          * Fires when the user starts modifying the axis selection.
          *
-         * The range units are:
-         * - Generic axis—Category index (0-based).
-         * - Date axis—Date instance.
+         * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
          */
         this.selectStart = new EventEmitter();
         /**
@@ -228,27 +219,7 @@ export class ChartComponent {
          * that the component redraws its content when the size of its container changes.
          * Defaults to `10`. To disable the automatic resizing, set it to `0`.
          *
-         * @example
-         * ```ts
-         * _@Component({
-         *     selector: 'my-app',
-         *     template: `
-         *         <kendo-chart [resizeRateLimit]="2">
-         * <!--                 ^^^^^^^^^^^^^^^^^^^^^^
-         *       Will update the size of the Chart up to two times a second.
-         *       Resize the example pane or window to try it out.
-         * -->
-         *          <kendo-chart-series>
-         *            <kendo-chart-series-item [data]="seriesData">
-         *           </kendo-chart-series-item>
-         *         </kendo-chart-series>
-         *       </kendo-chart>
-         *   `
-         * })
-         * export class AppComponent {
-         *    seriesData: number[] = [1, 2, 3, 5];
-         * }
-         * ```
+         * @default 10
          */
         this.resizeRateLimit = 10;
         this.theme = null;
@@ -453,17 +424,7 @@ export class ChartComponent {
     /**
      * Highlights the series points or the segments of a Pie, Donut, or Funnel charts.
      *
-     * See [Series Highlight]({% slug serieshighlight_chart_charts %}) for more details.
-     *
-     * In the following example, the callback is evaluated for each data point.
-     * If the function returns `true`, the point is highlighted.
-     *
-     * {% meta height:500 %}
-     * {% embed_file elements/highlight/api/app.component.ts preview %}
-     * {% embed_file shared/app.module.ts hidden %}
-     * {% embed_file shared/main.ts hidden %}
-     * {% endmeta %}
-     *
+     * See [Series Highlight]({% slug serieshighlight_chart_charts %}) for more details (with an [example](slug:serieshighlight_chart_charts#toc-toggling-the-highlight-with-code)).
      * @param show - A Boolean value that indicates whether the highlight is shown or hidden.
      * @param filter - A string that represents the series or category name, an object with the series and category name, or a function which will be called for each point. The function should return `true` for the points for which the highlight is toggled.
      */

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-charts',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1688655729,
-    version: '13.2.0-develop.5',
+    publishDate: 1689237063,
+    version: '13.2.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };