@progress/kendo-charts 1.20.0-dev.202111111633 → 1.20.0-dev.202111251025

package/dist/es/chart/chart.js

@@ -1193,8 +1193,9 @@ var Chart = (function (Class) {
         for (var i = 0; i < elements.length; i++) {
             var element = elements[i];
             var currSeries = element.series || series;
+            var shouldHighlight = currSeries && (currSeries.highlight || {}).visible;
 
-            if (currSeries && element.visual) {
+            if (shouldHighlight && element.visual) {
                 var opacity = series ? series.opacity : element.series.opacity;
                 if (currSeries !== activeSeries || reset) {
                     element.visual.opacity(reset ? 1 : opacity);

package/dist/es/chart/pan-and-zoom/mousewheel-zoom.js

@@ -3,6 +3,13 @@ import toChartAxisRanges from './to-chart-axis-ranges';
 
 import { X, Y } from '../../common/constants';
 import { Class, deepExtend } from '../../common';
+import { limitValue } from '../../drawing-utils';
+
+// Limit the zoom rate between 1% and 90% per mousewheel event.
+// At zoom rates close to 100% the axis range quickly becomes 0.
+var MIN_RATE = 0.01;
+var MAX_RATE = 0.9;
+var DEFAULT_RATE = 0.3;
 
 var MousewheelZoom = (function (Class) {
     function MousewheelZoom(chart, options) {
@@ -10,7 +17,7 @@ var MousewheelZoom = (function (Class) {
 
         this.chart = chart;
         this.options = deepExtend({
-            rate: 0.3
+            rate: DEFAULT_RATE
         }, this.options, options);
     }
 
@@ -30,7 +37,8 @@ var MousewheelZoom = (function (Class) {
             var vertical = axis.options.vertical;
 
             if (!(lock === X && !vertical) && !(lock === Y && vertical) && axis.zoomRange) {
-                var range = axis.zoomRange(-delta * this$1.options.rate, coords);
+                var rate = limitValue(this$1.options.rate, MIN_RATE, MAX_RATE);
+                var range = axis.zoomRange(-delta * rate, coords);
 
                 if (range) {
                     axisRanges.push({

package/dist/es/common/mousewheel-delta.js

@@ -1,8 +1,20 @@
+import { support } from '@progress/kendo-drawing';
+
+var browser = support.browser || {};
+
 export default function mousewheelDelta(e) {
     var delta = 0;
 
     if (e.wheelDelta) {
         delta = -e.wheelDelta / 120;
+
+        if (browser.webkit) {
+            // Webkit browsers scale the delta by twice the device resolution.
+            // Possibly related to https://bugs.webkit.org/show_bug.cgi?id=196339
+            //
+            // Low device resolutions (e.g. zoom-out to 30%) also behave strangely.
+            delta = delta / (2 * Math.max(window.devicePixelRatio, 0.625));
+        }
     } else if (e.detail) {
         delta = e.detail / 3;
     }

package/dist/es/core/axis.js

@@ -907,6 +907,26 @@ var Axis = (function (ChartElement) {
         return offset;
     };
 
+    // Computes the axis range change (delta) for a given scale factor.
+    // The delta is subtracted from the axis range:
+    //   * delta > 0 reduces the axis range (zoom-in)
+    //   * delta < 0 expands the axis range (zoom-out)
+    Axis.prototype.scaleToDelta = function scaleToDelta (rawScale, range) {
+        // Scale >= 1 would result in axis range of 0.
+        // Scale <= -1 would reverse the scale direction.
+        var MAX_SCALE = 0.999;
+        var scale = limitValue(rawScale, -MAX_SCALE, MAX_SCALE);
+
+        var delta;
+        if (scale > 0) {
+            delta = range * Math.min(1, scale);
+        } else {
+            delta = range - (range / (1 + scale));
+        }
+
+        return delta;
+    };
+
     Axis.prototype.labelsBetweenTicks = function labelsBetweenTicks () {
         return !this.options.justified;
     };

package/dist/es/core/category-axis.js

@@ -445,7 +445,8 @@ var CategoryAxis = (function (Axis) {
     CategoryAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
         var position = Math.abs(this.pointOffset(cursor));
         var rangeIndices = this.totalRangeIndices();
-        var delta = (rangeIndices.max - rangeIndices.min) * Math.min(1, scale);
+        var range = rangeIndices.max - rangeIndices.min;
+        var delta = this.scaleToDelta(scale, range);
         var minDelta = position * delta;
         var maxDelta = (1 - position) * delta;
         var min = rangeIndices.min + minDelta;
@@ -455,7 +456,6 @@ var CategoryAxis = (function (Axis) {
             max = min + MIN_CATEGORY_RANGE;
         }
 
-
         return {
             min: min,
             max: max

package/dist/es/core/date-category-axis.js

@@ -544,7 +544,8 @@ var DateCategoryAxis = (function (CategoryAxis) {
         var rangeMax = ref.max;
 
         var position = Math.abs(this.pointOffset(cursor));
-        var delta = (rangeMax - rangeMin) * scale;
+        var range = rangeMax - rangeMin;
+        var delta = this.scaleToDelta(scale, range);
         var minDelta = Math.round(position * delta);
         var maxDelta = Math.round((1 - position) * delta);
 

package/dist/es/core/date-value-axis.js

@@ -180,7 +180,8 @@ var DateValueAxis = (function (Axis) {
 
     DateValueAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
         var position = Math.abs(this.pointOffset(cursor));
-        var delta = (this.options.max - this.options.min) * Math.min(1, scale);
+        var range = this.options.max - this.options.min;
+        var delta = this.scaleToDelta(scale, range);
         var minDelta = position * delta;
         var maxDelta = (1 - position) * delta;
         var min = toDate(toTime(this.options.min) + minDelta);

package/dist/es/core/logarithmic-axis.js

@@ -313,7 +313,8 @@ var LogarithmicAxis = (function (Axis) {
         var logMin = log(this.options.min, base);
         var logMax = log(this.options.max, base);
         var position = Math.abs(this.pointOffset(cursor));
-        var delta = (logMax - logMin) * Math.min(1, scale);
+        var range = logMax - logMin;
+        var delta = this.scaleToDelta(scale, range);
         var min = Math.pow(base, logMin + position * delta);
         var max = Math.pow(base, logMax - (1 - position) * delta);
 

package/dist/es/core/numeric-axis.js

@@ -215,11 +215,12 @@ var NumericAxis = (function (Axis) {
 
     NumericAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
         var position = Math.abs(this.pointOffset(cursor));
-        var delta = (this.options.max - this.options.min) * Math.min(1, scale);
+        var range = this.options.max - this.options.min;
+        var delta = this.scaleToDelta(scale, range);
         var minDelta = position * delta;
         var maxDelta = (1 - position) * delta;
-        var min = this.options.min + minDelta;
-        var max = this.options.max - maxDelta;
+        var min = round(this.options.min + minDelta, DEFAULT_PRECISION);
+        var max = round(this.options.max - maxDelta, DEFAULT_PRECISION);
 
         if (max - min < MIN_VALUE_RANGE) {
             max = min + MIN_VALUE_RANGE;

package/dist/es2015/chart/chart.js

@@ -1164,8 +1164,9 @@ class Chart extends Class {
         for (let i = 0; i < elements.length; i++) {
             const element = elements[i];
             const currSeries = element.series || series;
+            const shouldHighlight = currSeries && (currSeries.highlight || {}).visible;
 
-            if (currSeries && element.visual) {
+            if (shouldHighlight && element.visual) {
                 const opacity = series ? series.opacity : element.series.opacity;
                 if (currSeries !== activeSeries || reset) {
                     element.visual.opacity(reset ? 1 : opacity);

package/dist/es2015/chart/pan-and-zoom/mousewheel-zoom.js

@@ -3,6 +3,13 @@ import toChartAxisRanges from './to-chart-axis-ranges';
 
 import { X, Y } from '../../common/constants';
 import { Class, deepExtend } from '../../common';
+import { limitValue } from '../../drawing-utils';
+
+// Limit the zoom rate between 1% and 90% per mousewheel event.
+// At zoom rates close to 100% the axis range quickly becomes 0.
+const MIN_RATE = 0.01;
+const MAX_RATE = 0.9;
+const DEFAULT_RATE = 0.3;
 
 class MousewheelZoom extends Class {
     constructor(chart, options) {
@@ -10,7 +17,7 @@ class MousewheelZoom extends Class {
 
         this.chart = chart;
         this.options = deepExtend({
-            rate: 0.3
+            rate: DEFAULT_RATE
         }, this.options, options);
     }
 
@@ -24,7 +31,8 @@ class MousewheelZoom extends Class {
             const vertical = axis.options.vertical;
 
             if (!(lock === X && !vertical) && !(lock === Y && vertical) && axis.zoomRange) {
-                const range = axis.zoomRange(-delta * this.options.rate, coords);
+                const rate = limitValue(this.options.rate, MIN_RATE, MAX_RATE);
+                const range = axis.zoomRange(-delta * rate, coords);
 
                 if (range) {
                     axisRanges.push({

package/dist/es2015/common/mousewheel-delta.js

@@ -1,8 +1,20 @@
+import { support } from '@progress/kendo-drawing';
+
+const browser = support.browser || {};
+
 export default function mousewheelDelta(e) {
     let delta = 0;
 
     if (e.wheelDelta) {
         delta = -e.wheelDelta / 120;
+
+        if (browser.webkit) {
+            // Webkit browsers scale the delta by twice the device resolution.
+            // Possibly related to https://bugs.webkit.org/show_bug.cgi?id=196339
+            //
+            // Low device resolutions (e.g. zoom-out to 30%) also behave strangely.
+            delta = delta / (2 * Math.max(window.devicePixelRatio, 0.625));
+        }
     } else if (e.detail) {
         delta = e.detail / 3;
     }

package/dist/es2015/core/axis.js

@@ -857,6 +857,26 @@ class Axis extends ChartElement {
         return offset;
     }
 
+    // Computes the axis range change (delta) for a given scale factor.
+    // The delta is subtracted from the axis range:
+    //   * delta > 0 reduces the axis range (zoom-in)
+    //   * delta < 0 expands the axis range (zoom-out)
+    scaleToDelta(rawScale, range) {
+        // Scale >= 1 would result in axis range of 0.
+        // Scale <= -1 would reverse the scale direction.
+        const MAX_SCALE = 0.999;
+        const scale = limitValue(rawScale, -MAX_SCALE, MAX_SCALE);
+
+        let delta;
+        if (scale > 0) {
+            delta = range * Math.min(1, scale);
+        } else {
+            delta = range - (range / (1 + scale));
+        }
+
+        return delta;
+    }
+
     labelsBetweenTicks() {
         return !this.options.justified;
     }

package/dist/es2015/core/category-axis.js

@@ -410,7 +410,8 @@ class CategoryAxis extends Axis {
     scaleRange(scale, cursor) {
         const position = Math.abs(this.pointOffset(cursor));
         const rangeIndices = this.totalRangeIndices();
-        const delta = (rangeIndices.max - rangeIndices.min) * Math.min(1, scale);
+        const range = rangeIndices.max - rangeIndices.min;
+        const delta = this.scaleToDelta(scale, range);
         const minDelta = position * delta;
         const maxDelta = (1 - position) * delta;
         const min = rangeIndices.min + minDelta;
@@ -420,7 +421,6 @@ class CategoryAxis extends Axis {
             max = min + MIN_CATEGORY_RANGE;
         }
 
-
         return {
             min: min,
             max: max

package/dist/es2015/core/date-category-axis.js

@@ -528,7 +528,8 @@ class DateCategoryAxis extends CategoryAxis {
         const { min: rangeMin, max: rangeMax } = this.dataRange.displayRange();
 
         const position = Math.abs(this.pointOffset(cursor));
-        const delta = (rangeMax - rangeMin) * scale;
+        const range = rangeMax - rangeMin;
+        const delta = this.scaleToDelta(scale, range);
         const minDelta = Math.round(position * delta);
         const maxDelta = Math.round((1 - position) * delta);
 

package/dist/es2015/core/date-value-axis.js

@@ -172,7 +172,8 @@ class DateValueAxis extends Axis {
 
     scaleRange(scale, cursor) {
         const position = Math.abs(this.pointOffset(cursor));
-        const delta = (this.options.max - this.options.min) * Math.min(1, scale);
+        const range = this.options.max - this.options.min;
+        const delta = this.scaleToDelta(scale, range);
         const minDelta = position * delta;
         const maxDelta = (1 - position) * delta;
         const min = toDate(toTime(this.options.min) + minDelta);

package/dist/es2015/core/logarithmic-axis.js

@@ -268,7 +268,8 @@ class LogarithmicAxis extends Axis {
         const logMin = log(this.options.min, base);
         const logMax = log(this.options.max, base);
         const position = Math.abs(this.pointOffset(cursor));
-        const delta = (logMax - logMin) * Math.min(1, scale);
+        const range = logMax - logMin;
+        const delta = this.scaleToDelta(scale, range);
         const min = Math.pow(base, logMin + position * delta);
         let max = Math.pow(base, logMax - (1 - position) * delta);
 

package/dist/es2015/core/numeric-axis.js

@@ -197,11 +197,12 @@ class NumericAxis extends Axis {
 
     scaleRange(scale, cursor) {
         const position = Math.abs(this.pointOffset(cursor));
-        const delta = (this.options.max - this.options.min) * Math.min(1, scale);
+        const range = this.options.max - this.options.min;
+        const delta = this.scaleToDelta(scale, range);
         const minDelta = position * delta;
         const maxDelta = (1 - position) * delta;
-        const min = this.options.min + minDelta;
-        let max = this.options.max - maxDelta;
+        const min = round(this.options.min + minDelta, DEFAULT_PRECISION);
+        let max = round(this.options.max - maxDelta, DEFAULT_PRECISION);
 
         if (max - min < MIN_VALUE_RANGE) {
             max = min + MIN_VALUE_RANGE;

package/dist/npm/barcode.d.ts

@@ -1,5 +1,136 @@
+import { Group } from '@progress/kendo-drawing';
+import { Border, Margin, Padding, RenderMode } from './field-types';
+
+/**
+ * Supported symbologies (encodings) for the Barcode component.
+ */
+export type BarcodeType =
+    'EAN8' | 'EAN13' | 'UPCE' | 'UPCA' | 'Code11' | 'Code39' | 'Code39Extended' |
+    'Code93' | 'Code93Extended' | 'Code128' | 'Code128A' | 'Code128B' | 'Code128C' |
+    'GS1-128' | 'MSImod10' | 'MSImod11' | 'MSImod1010' | 'MSImod1110' | 'POSTNET' |
+    'ean8' | 'ean13' | 'upce' | 'upca' | 'code11' | 'code39' | 'code39extended' |
+    'code93' | 'code93extended' | 'code128' | 'code128a' | 'code128b' | 'code128c' |
+    'gs1-128' | 'msimod10' | 'msimod11' | 'msimod1010' | 'msimod1110' | 'postnet';
+
+/**
+ * The Barcode text label configuration.
+ */
+export interface BarcodeText {
+    /**
+     * The color of the text. Any valid CSS color string will work here, including hex and rgb.
+     *
+     * @default "black"
+     */
+    color?: string;
+
+    /**
+     * The font of the text.
+     *
+     * @default "16px Consolas, Monaco, Sans Mono, monospace, sans-serif"
+     */
+    font?: string;
+
+    /**
+     * The margin of the text. A numeric value sets all margins.
+     *
+     * @default 0
+     */
+    margin?: Margin | number;
+
+    /**
+     * A flag indicating of the Barcode text label is visible.
+     *
+     * If set to false the barcode will not display the value as a text below the barcode lines.
+     *
+     * @default true
+     */
+    visible?: boolean;
+}
+
+/**
+ * The Barcode configuration options.
+ */
+export interface BarcodeOptions {
+    /**
+     * The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
+     *
+     * @default "white"
+     */
+    background?: string;
+
+    /**
+     * The border of the Barcode.
+     */
+    border?: Border;
+
+    /**
+     * If set to `true`, the Barcode will display the checksum digit next to the value in the text area.
+     *
+     * @default true
+     */
+    checksum?: boolean;
+
+    /**
+     * The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
+     *
+     * @default "black"
+     */
+    color?: string;
+
+    /**
+     * The height of the Barcode in pixels.
+     *
+     * @default 100
+     */
+    height?: number;
+
+    /**
+     * The padding of the barcode. A numeric value sets all paddings.
+     *
+     * @default 0
+     */
+    padding?: Padding | number;
+
+    /**
+     * Sets the preferred rendering mode of the Barcode.
+     *
+     * The supported values are:
+     * * "canvas" - renders the component as a Canvas element.
+     * * "svg" - renders the component as an inline SVG document.
+     *
+    * @default "svg"
+     */
+    renderAs?: RenderMode;
+
+    /**
+     * The Barcode text label configuration.
+     */
+    text?: BarcodeText;
+
+    /**
+      * The symbology (encoding) the Barcode will use.
+      *
+      * @default "Code39"
+      */
+    type: BarcodeType;
+
+    /**
+     * The value of the Barcode.
+     */
+    value: number | string;
+
+    /**
+     * The width of the Barcode in pixels.
+     *
+     * @default 300
+     */
+    width?: number;
+}
+
 export class Barcode {
-    constructor(element: any, options: any);
+    constructor(element: Element, options: BarcodeOptions);
+
     public redraw(): void;
-    public setOptions(options: any): void;
+    public setOptions(options: BarcodeOptions): void;
+    public exportVisual(): Group;
 }

package/dist/npm/core.d.ts

@@ -4,4 +4,4 @@ export class DateCategoryAxis {
 
 export class DateValueAxis {
     public options: any;
-}
+}

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

@@ -0,0 +1,21 @@
+import { DashType } from './dash-type';
+
+/**
+ * The appearance settings for the border lines.
+ */
+export interface Border {
+  /**
+   * 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.
+   */
+  dashType?: DashType;
+
+  /**
+   * The width of the border line in pixels.
+   */
+  width?: number;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * The dash line type.
+ */
+export type DashType =
+  'dash' | 'dashDot' | 'dot' |
+  'longDash' | 'longDashDot' | 'longDashDotDot' |
+  'solid';

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

@@ -0,0 +1,24 @@
+/**
+ * The margin size for each side.
+ */
+export interface Margin {
+  /**
+   * The top margin in pixels.
+   */
+  top?: number;
+
+  /**
+   * The right margin in pixels.
+   */
+  right?: number;
+
+  /**
+   * The bottom margin in pixels.
+   */
+  bottom?: number;
+
+  /**
+   * The left margin in pixels.
+   */
+  left?: number;
+}

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

@@ -0,0 +1,7 @@
+import { Margin } from './margin.interface';
+
+/**
+ * The padding size for each side.
+ */
+export interface Padding extends Margin {
+}

package/dist/npm/field-types/render-mode.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sets the rendering mode of the component.
+ *
+ * The supported values are:
+ * * "canvas" - renders the component as a Canvas element.
+ * * "svg" - renders the component as an inline SVG document.
+ */
+export type RenderMode = 'svg' | 'canvas';

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

@@ -0,0 +1,5 @@
+export { Border } from './field-types/border.interface';
+export { DashType } from './field-types/dash-type';
+export { Margin } from './field-types/margin.interface';
+export { Padding } from './field-types/padding.interface';
+export { RenderMode } from './field-types/render-mode';

package/dist/npm/main.d.ts

@@ -7,5 +7,6 @@ export * from './gauges';
 export * from './barcode';
 export * from './qrcode';
 export * from './common';
+export * from './field-types'
 
 export function chartBaseTheme(): any;