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

package/fesm2015/progress-kendo-angular-charts.mjs

@@ -11,7 +11,7 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { DateCategoryAxis, DateValueAxis, DomEventsBuilder as DomEventsBuilder$1, InstanceObserver, chartBaseTheme, Chart, StockChart, Sparkline } from '@progress/kendo-charts';
 import { exportImage, exportSVG } from '@progress/kendo-drawing';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
+import { Subject, BehaviorSubject, combineLatest, Subscription } from 'rxjs';
 import { auditTime, tap } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-popup';
 import { PopupService, POPUP_CONTAINER, PopupModule } from '@progress/kendo-angular-popup';
@@ -1858,8 +1858,8 @@ 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/'
 };
 
@@ -1907,26 +1907,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined }, { type: ConfigurationService }, { type: CollectionService }]; } });
 
 /**
- * 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>
  * ```
  */
 class SeriesComponent extends CollectionComponent {
@@ -2443,10 +2433,7 @@ 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();
@@ -2473,25 +2460,19 @@ class ChartComponent {
         /**
          * 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.
          */
         this.select = new EventEmitter();
         /**
          * 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.
          */
         this.selectEnd = new EventEmitter();
         /**
          * 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.
          */
         this.selectStart = new EventEmitter();
         /**
@@ -2543,27 +2524,7 @@ 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;
@@ -2768,17 +2729,7 @@ 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.
      */
@@ -4072,57 +4023,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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>
  * ```
  */
 class PaneComponent extends CollectionItemComponent {
@@ -4235,38 +4145,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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>
  * ```
  */
 class PanesComponent extends CollectionComponent {
@@ -5133,63 +5019,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ([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>
  * ```
  */
 class SubtitleComponent extends SettingsComponent {
@@ -5234,62 +5067,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ([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>
  * ```
  */
 class TitleComponent extends SettingsComponent {
@@ -5451,32 +5233,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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>
  * ```
  */
 class ValueAxisComponent extends CollectionComponent {
@@ -5494,7 +5256,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: ConfigurationService }, { type: CollectionService }]; }, propDecorators: { children: [{
                 type: ContentChildren,
@@ -6670,16 +6432,18 @@ 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) {
@@ -6698,8 +6462,12 @@ 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);
     }
 }