@progress/kendo-charts 1.19.1 → 1.20.0-dev.202111121622

package/dist/es/chart/chart.js

@@ -22,12 +22,13 @@ import { ChartPane, ChartPlotArea, findAxisByName } from './api-elements';
 
 import { X, Y, VALUE, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SERIES_OPACITY } from '../common/constants';
 import { addClass, Class, setDefaultOptions, deepExtend, defined, find, isObject, isFunction, elementSize, elementOffset,
-         elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, last, round, HashMap } from '../common';
+         elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, last, round,
+         HashMap, valueOrDefault } from '../common';
 
 import { dateComparer } from '../date-utils';
 
 import { DRAG_START, DRAG, DRAG_END, ZOOM_START, ZOOM, ZOOM_END, SELECT_START, SELECT, SELECT_END, PLOT_AREA_HOVER, PLOT_AREA_LEAVE,
-    RENDER, CATEGORY, PIE, DONUT, FUNNEL, COLUMN, MOUSEWHEEL, MOUSEWHEEL_DELAY, SHOW_TOOLTIP, SERIES_HOVER } from './constants';
+    RENDER, CATEGORY, PIE, DONUT, FUNNEL, COLUMN, MOUSEWHEEL, MOUSEWHEEL_DELAY, MOUSEWHEEL_ZOOM_RATE, SHOW_TOOLTIP, SERIES_HOVER } from './constants';
 
 import './animations';
 import './register-charts';
@@ -664,12 +665,13 @@ var Chart = (function (Class) {
                 this._gestureDistance = e.distance;
                 var args = { delta: scaleDelta, axisRanges: axisRanges(this._plotArea.axes), originalEvent: e };
                 if (this._zooming || !this.trigger(ZOOM_START, args)) {
+                    var coords = this._eventCoordinates(e);
 
                     if (!this._zooming) {
                         this._zooming = true;
                     }
 
-                    var ranges = args.axisRanges = mousewheelZoom.updateRanges(scaleDelta);
+                    var ranges = args.axisRanges = mousewheelZoom.updateRanges(scaleDelta, coords);
                     if (ranges && !this.trigger(ZOOM, args)) {
                         mousewheelZoom.zoom();
                     }
@@ -802,6 +804,12 @@ var Chart = (function (Class) {
         }
     };
 
+    Chart.prototype._mousewheelZoomRate = function _mousewheelZoomRate () {
+        var zoomable = this.options.zoomable;
+        var mousewheel = (zoomable || {}).mousewheel || {};
+        return valueOrDefault(mousewheel.rate, MOUSEWHEEL_ZOOM_RATE);
+    };
+
     Chart.prototype._mousewheel = function _mousewheel (e) {
         var this$1 = this;
 
@@ -828,7 +836,7 @@ var Chart = (function (Class) {
                     clearTimeout(this._mwTimeout);
                 }
 
-                args.axisRanges = mousewheelZoom.updateRanges(delta);
+                args.axisRanges = mousewheelZoom.updateRanges(delta, coords);
                 if (args.axisRanges && !this.trigger(ZOOM, args)) {
                     mousewheelZoom.zoom();
                 }
@@ -861,7 +869,7 @@ var Chart = (function (Class) {
                     var currentAxis = axes[i];
                     var axisName = currentAxis.options.name;
                     if (axisName) {
-                        ranges[axisName] = currentAxis.scaleRange(-totalDelta);
+                        ranges[axisName] = currentAxis.scaleRange(-totalDelta * this$1._mousewheelZoomRate(), coords);
                     }
                 }
 
@@ -1185,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/constants.js

@@ -94,6 +94,7 @@ var OUTSIDE_END = "outsideEnd";
 
 var MOUSEWHEEL = "DOMMouseScroll mousewheel";
 var MOUSEWHEEL_DELAY = 150;
+var MOUSEWHEEL_ZOOM_RATE = 0.3;
 
 export {
     INITIAL_ANIMATION_DURATION, FADEIN,
@@ -115,7 +116,8 @@ export {
     LOGARITHMIC, DRAG, DRAG_START, DRAG_END, ZOOM_START, ZOOM, ZOOM_END,
     SELECT_START, SELECT, SELECT_END, PANE_RENDER, GAP,
     DONUT, INSIDE_END, INSIDE_BASE, OUTSIDE_END,
-    MOUSEWHEEL, MOUSEWHEEL_DELAY, SHOW_TOOLTIP, HIDE_TOOLTIP,
+    MOUSEWHEEL, MOUSEWHEEL_DELAY, MOUSEWHEEL_ZOOM_RATE,
+    SHOW_TOOLTIP, HIDE_TOOLTIP,
     EQUALLY_SPACED_SERIES, ABOVE, BELOW,
     HEATMAP
 };

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

@@ -9,14 +9,18 @@ var MousewheelZoom = (function (Class) {
         Class.call(this);
 
         this.chart = chart;
-        this.options = deepExtend({}, this.options, options);
+        this.options = deepExtend({
+            rate: 0.3
+        }, this.options, options);
     }
 
     if ( Class ) MousewheelZoom.__proto__ = Class;
     MousewheelZoom.prototype = Object.create( Class && Class.prototype );
     MousewheelZoom.prototype.constructor = MousewheelZoom;
 
-    MousewheelZoom.prototype.updateRanges = function updateRanges (delta) {
+    MousewheelZoom.prototype.updateRanges = function updateRanges (delta, coords) {
+        var this$1 = this;
+
         var lock = (this.options.lock || "").toLowerCase();
         var axisRanges = [];
         var axes = this.chart._plotArea.axes;
@@ -26,7 +30,7 @@ var MousewheelZoom = (function (Class) {
             var vertical = axis.options.vertical;
 
             if (!(lock === X && !vertical) && !(lock === Y && vertical) && axis.zoomRange) {
-                var range = axis.zoomRange(-delta);
+                var range = axis.zoomRange(-delta * this$1.options.rate, coords);
 
                 if (range) {
                     axisRanges.push({
@@ -61,4 +65,4 @@ var MousewheelZoom = (function (Class) {
     return MousewheelZoom;
 }(Class));
 
-export default MousewheelZoom;
+export default MousewheelZoom;

package/dist/es/chart/selection.js

@@ -4,7 +4,7 @@ import { DateCategoryAxis, Point } from '../core';
 
 import { MOUSEWHEEL_DELAY, MOUSEWHEEL, SELECT_START, SELECT, SELECT_END } from './constants';
 
-import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE } from '../common/constants';
+import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE, X } from '../common/constants';
 import { addClass, Class, removeClass, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
@@ -564,6 +564,46 @@ var Selection = (function (Class) {
         }
     };
 
+    Selection.prototype.zoom = function zoom (delta, coords) {
+        var options = this.options;
+        var min = this._index(options.min);
+        var max = this._index(options.max);
+        var from = this._index(options.from);
+        var to = this._index(options.to);
+        var range = { from: from, to: to };
+        var oldRange = deepExtend({}, range);
+
+        var ref = this.categoryAxis.options;
+        var reverse = ref.reverse;
+        var origin = X + (reverse ? '2' : '1');
+        var lineBox = this.categoryAxis.lineBox();
+        var relative = Math.abs(lineBox[origin] - coords[X]);
+        var size = lineBox.width();
+        var position = round(relative / size, 2);
+        var minDelta = round(position * delta);
+        var maxDelta = round((1 - position) * delta);
+
+        if (this._state) {
+            range = this._state.range;
+        }
+
+        range.from = limitValue(
+            limitValue(from - minDelta, 0, to - 1),
+            min, max
+        );
+
+        range.to = limitValue(
+            limitValue(to + maxDelta, range.from + 1, max),
+            min,
+            max
+        );
+
+        if (range.from !== oldRange.from || range.to !== oldRange.to) {
+            this.set(range.from, range.to);
+            return true;
+        }
+    };
+
     Selection.prototype.trigger = function trigger (name, args) {
         return (this.observer || this.chart).trigger(name, args);
     };

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

@@ -1,16 +1,13 @@
-import { drawing } from '@progress/kendo-drawing';
-
 export default function mousewheelDelta(e) {
     var delta = 0;
 
     if (e.wheelDelta) {
         delta = -e.wheelDelta / 120;
-        delta = delta > 0 ? Math.ceil(delta) : Math.floor(delta);
+    } else if (e.detail) {
+        delta = e.detail / 3;
     }
 
-    if (e.detail) {
-        delta = drawing.util.round(e.detail / 3);
-    }
+    delta = delta > 0 ? Math.ceil(delta) : Math.floor(delta);
 
     return delta;
-}
+}

package/dist/es/core/axis.js

@@ -860,6 +860,53 @@ var Axis = (function (ChartElement) {
         };
     };
 
+    Axis.prototype.lineDir = function lineDir () {
+        /*
+         * Axis line direction:
+         *   * Vertical: up.
+         *   * Horizontal: right.
+         */
+
+        var ref = this.options;
+        var vertical = ref.vertical;
+        var reverse = ref.reverse;
+        return (vertical ? -1 : 1) * (reverse ? -1 : 1);
+    };
+
+    Axis.prototype.lineInfo = function lineInfo () {
+        var ref = this.options;
+        var vertical = ref.vertical;
+        var lineBox = this.lineBox();
+        var lineSize = vertical ? lineBox.height() : lineBox.width();
+        var axis = vertical ? Y : X;
+        var axisDir = this.lineDir();
+        var startEdge = axisDir === 1 ? 1 : 2;
+        var axisOrigin = axis + startEdge.toString();
+        var lineStart = lineBox[axisOrigin];
+
+        return {
+            axis: axis,
+            axisOrigin: axisOrigin,
+            axisDir: axisDir,
+            lineBox: lineBox,
+            lineSize: lineSize,
+            lineStart: lineStart
+        };
+    };
+
+    Axis.prototype.pointOffset = function pointOffset (point) {
+        var ref = this.lineInfo();
+        var axis = ref.axis;
+        var axisDir = ref.axisDir;
+        var axisOrigin = ref.axisOrigin;
+        var lineBox = ref.lineBox;
+        var lineSize = ref.lineSize;
+        var relative = axisDir > 0 ? point[axis] - lineBox[axisOrigin] : lineBox[axisOrigin] - point[axis];
+        var offset = relative / lineSize;
+
+        return offset;
+    };
+
     Axis.prototype.labelsBetweenTicks = function labelsBetweenTicks () {
         return !this.options.justified;
     };

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

@@ -6,6 +6,7 @@ import { defined, isNumber, last, limitValue, round, setDefaultOptions, valueOrD
 import { dateEquals } from '../date-utils';
 
 var MIN_CATEGORY_POINTS_RANGE = 0.01;
+var MIN_CATEGORY_RANGE = 0.1;
 
 function indexOf(value, arr) {
     if (value instanceof Date) {
@@ -263,18 +264,53 @@ var CategoryAxis = (function (Axis) {
         return positions.slice(startIndex, endIndex + 1);
     };
 
+    CategoryAxis.prototype.lineInfo = function lineInfo () {
+        var ref = this.options;
+        var vertical = ref.vertical;
+        var reverse = ref.reverse;
+        var lineBox = this.lineBox();
+        var lineSize = vertical ? lineBox.height() : lineBox.width();
+        var axis = vertical ? Y : X;
+        var axisDir = reverse ? -1 : 1;
+        var startEdge = axisDir === 1 ? 1 : 2;
+        var axisOrigin = axis + startEdge.toString();
+        var lineStart = lineBox[axisOrigin];
+
+        return {
+            axis: axis,
+            axisOrigin: axisOrigin,
+            axisDir: axisDir,
+            lineBox: lineBox,
+            lineSize: lineSize,
+            lineStart: lineStart
+        };
+    };
+
+    CategoryAxis.prototype.lineDir = function lineDir () {
+        /*
+         *  Category axis line direction:
+         *    * Vertical: down.
+         *    * Horizontal: right.
+         */
+
+        var ref = this.options;
+        var reverse = ref.reverse;
+        return reverse ? -1 : 1;
+    };
+
     // TODO: Rename to slotBox, valueSlot, slotByIndex?
     CategoryAxis.prototype.getSlot = function getSlot (from, to, limit) {
         var options = this.options;
         var reverse = options.reverse;
         var justified = options.justified;
-        var vertical = options.vertical;
         var ref = this.scaleOptions();
         var scale = ref.scale;
         var box = ref.box;
         var min = ref.min;
-        var valueAxis = vertical ? Y : X;
-        var lineStart = box[valueAxis + (reverse ? 2 : 1)];
+        var ref$1 = this.lineInfo();
+        var valueAxis = ref$1.axis;
+        var lineStart = ref$1.lineStart;
+
         var slotBox = box.clone();
         var singleSlot = !defined(to);
 
@@ -406,29 +442,35 @@ var CategoryAxis = (function (Axis) {
         };
     };
 
-    CategoryAxis.prototype.zoomRange = function zoomRange (rate) {
+    CategoryAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
+        var position = Math.abs(this.pointOffset(cursor));
         var rangeIndices = this.totalRangeIndices();
-        var ref = this.totalRange();
-        var totalMin = ref.min;
-        var totalMax = ref.max;
-        var min = limitValue(rangeIndices.min + rate, totalMin, totalMax);
-        var max = limitValue(rangeIndices.max - rate, totalMin, totalMax);
-
-        if (max - min > 0) {
-            return {
-                min: min,
-                max: max
-            };
+        var delta = (rangeIndices.max - rangeIndices.min) * Math.min(1, scale);
+        var minDelta = position * delta;
+        var maxDelta = (1 - position) * delta;
+        var min = rangeIndices.min + minDelta;
+        var max = rangeIndices.max - maxDelta;
+
+        if (max - min < MIN_CATEGORY_RANGE) {
+            max = min + MIN_CATEGORY_RANGE;
         }
+
+
+        return {
+            min: min,
+            max: max
+        };
     };
 
-    CategoryAxis.prototype.scaleRange = function scaleRange (scale) {
-        var range = this.options.categories.length;
-        var delta = scale * range;
+    CategoryAxis.prototype.zoomRange = function zoomRange (scale, cursor) {
+        var ref = this.totalRange();
+        var totalMin = ref.min;
+        var totalMax = ref.max;
+        var range = this.scaleRange(scale, cursor);
 
         return {
-            min: -delta,
-            max: range + delta
+            min: limitValue(range.min, totalMin, totalMax),
+            max: limitValue(range.max, totalMin, totalMax)
         };
     };
 

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

@@ -471,31 +471,6 @@ var DateCategoryAxis = (function (CategoryAxis) {
         return range;
     };
 
-    DateCategoryAxis.prototype.scaleRange = function scaleRange (delta) {
-        var rounds = Math.abs(delta);
-        var result = this.range();
-        var from = result.min;
-        var to = result.max;
-
-        if (from && to) {
-            while (rounds--) {
-                var range = dateDiff(from, to);
-                var step = Math.round(range * 0.1);
-                if (delta < 0) {
-                    from = addTicks(from, step);
-                    to = addTicks(to, -step);
-                } else {
-                    from = addTicks(from, -step);
-                    to = addTicks(to, step);
-                }
-            }
-
-            result = { min: from, max: to };
-        }
-
-        return result;
-    };
-
     DateCategoryAxis.prototype.labelsRange = function labelsRange () {
         return {
             min: this.options.labels.skip,
@@ -556,9 +531,9 @@ var DateCategoryAxis = (function (CategoryAxis) {
         };
     };
 
-    DateCategoryAxis.prototype.zoomRange = function zoomRange (delta) {
+    DateCategoryAxis.prototype.scaleRange = function scaleRange (scale, cursor) {
         if (this.isEmpty()) {
-            return null;
+            return {};
         }
 
         var options = this.options;
@@ -567,12 +542,16 @@ var DateCategoryAxis = (function (CategoryAxis) {
         var ref = this.dataRange.displayRange();
         var rangeMin = ref.min;
         var rangeMax = ref.max;
+
+        var position = Math.abs(this.pointOffset(cursor));
+        var delta = (rangeMax - rangeMin) * scale;
+        var minDelta = Math.round(position * delta);
+        var maxDelta = Math.round((1 - position) * delta);
+
         var ref$1 = this.dataRange.options;
-        var weekStartDay = ref$1.weekStartDay;
         var baseUnit = ref$1.baseUnit;
-        var baseUnitStep = ref$1.baseUnitStep;
-        var min = addDuration(rangeMin, delta * baseUnitStep, baseUnit, weekStartDay);
-        var max = addDuration(rangeMax, -delta * baseUnitStep, baseUnit, weekStartDay);
+        var min = new Date(rangeMin.getTime() + minDelta);
+        var max = new Date(rangeMax.getTime() - maxDelta);
 
         if (fit) {
             var autoBaseUnitSteps = options.autoBaseUnitSteps;
@@ -615,13 +594,6 @@ var DateCategoryAxis = (function (CategoryAxis) {
             }
         }
 
-        if (min < totalLimits.min) {
-            min = totalLimits.min;
-        }
-        if (max > totalLimits.max) {
-            max = totalLimits.max;
-        }
-
         if (min && max && dateDiff(max, min) > 0) {
             return {
                 min: min,
@@ -632,6 +604,22 @@ var DateCategoryAxis = (function (CategoryAxis) {
         }
     };
 
+    DateCategoryAxis.prototype.zoomRange = function zoomRange (scale, cursor) {
+        var totalLimits = this.dataRange.total();
+        var range = this.scaleRange(scale, cursor);
+
+        if (range) {
+            if (range.min < totalLimits.min) {
+                range.min = totalLimits.min;
+            }
+            if (range.max > totalLimits.max) {
+                range.max = totalLimits.max;
+            }
+        }
+
+        return range;
+    };
+
     DateCategoryAxis.prototype.range = function range () {
         return this.dataRange.displayRange();
     };

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

@@ -3,7 +3,7 @@ import NumericAxis from './numeric-axis';
 import AxisLabel from './axis-label';
 import { DateLabelFormats } from './constants';
 
-import { BLACK, DATE, COORD_PRECISION, DEFAULT_PRECISION, X, Y } from '../common/constants';
+import { BLACK, DATE, COORD_PRECISION, DEFAULT_PRECISION } from '../common/constants';
 import { setDefaultOptions, deepExtend, limitValue, round } from '../common';
 
 import autoMajorUnit from './utils/auto-major-unit';
@@ -12,6 +12,8 @@ import ceil from './utils/ceil';
 import { toDate, toTime, floorDate, ceilDate, duration, addDuration, addTicks, dateDiff, absoluteDateDiff, dateComparer, parseDate, parseDates, firstDay } from '../date-utils';
 import { HOURS, DAYS, WEEKS, MONTHS, YEARS, TIME_PER_DAY, TIME_PER_WEEK, TIME_PER_MONTH, TIME_PER_YEAR, TIME_PER_UNIT } from '../date-utils/constants';
 
+var MIN_VALUE_RANGE = 1000;
+
 var DateValueAxis = (function (Axis) {
     function DateValueAxis(seriesMin, seriesMax, axisOptions, chartService) {
         var min = toDate(seriesMin);
@@ -61,14 +63,12 @@ var DateValueAxis = (function (Axis) {
 
     DateValueAxis.prototype.getTickPositions = function getTickPositions (step) {
         var options = this.options;
-        var vertical = options.vertical;
-        var lineBox = this.lineBox();
-        var dir = (vertical ? -1 : 1) * (options.reverse ? -1 : 1);
-        var startEdge = dir === 1 ? 1 : 2;
-        var start = lineBox[(vertical ? Y : X) + startEdge];
+        var ref = this.lineInfo();
+        var dir = ref.axisDir;
+        var lineSize = ref.lineSize;
+        var start = ref.lineStart;
         var divisions = this.getDivisions(step);
         var timeRange = dateDiff(options.max, options.min);
-        var lineSize = vertical ? lineBox.height() : lineBox.width();
         var scale = lineSize / timeRange;
         var weekStartDay = options.weekStartDay || 0;
 
@@ -124,23 +124,23 @@ var DateValueAxis = (function (Axis) {
         return new AxisLabel(date, text, index, null, labelOptions);
     };
 
-    DateValueAxis.prototype.translateRange = function translateRange (delta, exact) {
+    DateValueAxis.prototype.translateRange = function translateRange (delta) {
         var options = this.options;
-        var baseUnit = options.baseUnit;
-        var weekStartDay = options.weekStartDay || 0;
         var lineBox = this.lineBox();
-        var size = options.vertical ? lineBox.height() : lineBox.width();
+        var vertical = options.vertical;
+        var reverse = options.reverse;
+        var size = vertical ? lineBox.height() : lineBox.width();
         var range = this.range();
         var scale = size / dateDiff(range.max, range.min);
-        var offset = round(delta / scale, DEFAULT_PRECISION) * (options.reverse ? -1 : 1);
-        var from = addTicks(options.min, offset);
-        var to = addTicks(options.max, offset);
 
-        if (!exact) {
-            from = addDuration(from, 0, baseUnit, weekStartDay);
-            to = addDuration(to, 0, baseUnit, weekStartDay);
+        var offset = round(delta / scale, DEFAULT_PRECISION);
+        if ((vertical || reverse) && !(vertical && reverse )) {
+            offset = -offset;
         }
 
+        var from = addTicks(options.min, offset);
+        var to = addTicks(options.max, offset);
+
         return {
             min: from,
             max: to,
@@ -148,27 +148,6 @@ var DateValueAxis = (function (Axis) {
         };
     };
 
-    DateValueAxis.prototype.scaleRange = function scaleRange (delta) {
-        var ref = this.options;
-        var from = ref.min;
-        var to = ref.max;
-        var rounds = Math.abs(delta);
-
-        while (rounds--) {
-            var range = dateDiff(from, to);
-            var step = Math.round(range * 0.1);
-            if (delta < 0) {
-                from = addTicks(from, step);
-                to = addTicks(to, -step);
-            } else {
-                from = addTicks(from, -step);
-                to = addTicks(to, step);
-            }
-        }
-
-        return { min: from, max: to };
-    };
-
     DateValueAxis.prototype.shouldRenderNote = function shouldRenderNote (value) {
         var range = this.range();
 
@@ -199,8 +178,26 @@ var DateValueAxis = (function (Axis) {
         };
     };
 
-    DateValueAxis.prototype.zoomRange = function zoomRange (delta) {
-        var range = this.scaleRange(delta);
+    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 minDelta = position * delta;
+        var maxDelta = (1 - position) * delta;
+        var min = toDate(toTime(this.options.min) + minDelta);
+        var max = toDate(toTime(this.options.max) - maxDelta);
+
+        if (max - min < MIN_VALUE_RANGE) {
+            max = toDate(toTime(min) + MIN_VALUE_RANGE);
+        }
+
+        return {
+            min: min,
+            max: max
+        };
+    };
+
+    DateValueAxis.prototype.zoomRange = function zoomRange (scale, cursor) {
+        var range = this.scaleRange(scale, cursor);
         var min = toDate(limitValue(toTime(range.min), this.totalMin, this.totalMax));
         var max = toDate(limitValue(toTime(range.max), this.totalMin, this.totalMax));