@progress/kendo-charts 1.20.0-dev.202110131408 → 1.20.0-dev.202111081615

package/dist/es2015/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';
@@ -651,12 +652,13 @@ class Chart extends Class {
                 this._gestureDistance = e.distance;
                 const args = { delta: scaleDelta, axisRanges: axisRanges(this._plotArea.axes), originalEvent: e };
                 if (this._zooming || !this.trigger(ZOOM_START, args)) {
+                    const coords = this._eventCoordinates(e);
 
                     if (!this._zooming) {
                         this._zooming = true;
                     }
 
-                    const ranges = args.axisRanges = mousewheelZoom.updateRanges(scaleDelta);
+                    const ranges = args.axisRanges = mousewheelZoom.updateRanges(scaleDelta, coords);
                     if (ranges && !this.trigger(ZOOM, args)) {
                         mousewheelZoom.zoom();
                     }
@@ -787,6 +789,12 @@ class Chart extends Class {
         }
     }
 
+    _mousewheelZoomRate() {
+        const zoomable = this.options.zoomable;
+        const mousewheel = (zoomable || {}).mousewheel || {};
+        return valueOrDefault(mousewheel.rate, MOUSEWHEEL_ZOOM_RATE);
+    }
+
     _mousewheel(e) {
         const delta = mousewheelDelta(e);
         const mousewheelZoom = this._mousewheelZoom;
@@ -811,7 +819,7 @@ class Chart extends Class {
                     clearTimeout(this._mwTimeout);
                 }
 
-                args.axisRanges = mousewheelZoom.updateRanges(delta);
+                args.axisRanges = mousewheelZoom.updateRanges(delta, coords);
                 if (args.axisRanges && !this.trigger(ZOOM, args)) {
                     mousewheelZoom.zoom();
                 }
@@ -844,7 +852,7 @@ class Chart extends Class {
                     const currentAxis = axes[i];
                     const axisName = currentAxis.options.name;
                     if (axisName) {
-                        ranges[axisName] = currentAxis.scaleRange(-totalDelta);
+                        ranges[axisName] = currentAxis.scaleRange(-totalDelta * this._mousewheelZoomRate(), coords);
                     }
                 }
 

package/dist/es2015/chart/constants.js

@@ -94,6 +94,7 @@ const OUTSIDE_END = "outsideEnd";
 
 const MOUSEWHEEL = "DOMMouseScroll mousewheel";
 const MOUSEWHEEL_DELAY = 150;
+const 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/es2015/chart/pan-and-zoom/mousewheel-zoom.js

@@ -9,10 +9,12 @@ class MousewheelZoom extends Class {
         super();
 
         this.chart = chart;
-        this.options = deepExtend({}, this.options, options);
+        this.options = deepExtend({
+            rate: 0.3
+        }, this.options, options);
     }
 
-    updateRanges(delta) {
+    updateRanges(delta, coords) {
         const lock = (this.options.lock || "").toLowerCase();
         const axisRanges = [];
         const axes = this.chart._plotArea.axes;
@@ -22,7 +24,7 @@ class MousewheelZoom extends Class {
             const vertical = axis.options.vertical;
 
             if (!(lock === X && !vertical) && !(lock === Y && vertical) && axis.zoomRange) {
-                const range = axis.zoomRange(-delta);
+                const range = axis.zoomRange(-delta * this.options.rate, coords);
 
                 if (range) {
                     axisRanges.push({
@@ -55,4 +57,4 @@ class MousewheelZoom extends Class {
     }
 }
 
-export default MousewheelZoom;
+export default MousewheelZoom;

package/dist/es2015/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';
 
@@ -542,6 +542,45 @@ class Selection extends Class {
         }
     }
 
+    zoom(delta, coords) {
+        const options = this.options;
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const from = this._index(options.from);
+        const to = this._index(options.to);
+        let range = { from: from, to: to };
+        const oldRange = deepExtend({}, range);
+
+        const { reverse } = this.categoryAxis.options;
+        const origin = X + (reverse ? '2' : '1');
+        const lineBox = this.categoryAxis.lineBox();
+        const relative = Math.abs(lineBox[origin] - coords[X]);
+        const size = lineBox.width();
+        const position = round(relative / size, 2);
+        const minDelta = round(position * delta);
+        const 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;
+        }
+    }
+
     trigger(name, args) {
         return (this.observer || this.chart).trigger(name, args);
     }

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

@@ -1,16 +1,13 @@
-import { drawing } from '@progress/kendo-drawing';
-
 export default function mousewheelDelta(e) {
     let 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/es2015/core/axis.js

@@ -818,6 +818,34 @@ class Axis extends ChartElement {
         };
     }
 
+    lineInfo() {
+        const { vertical, reverse } = this.options;
+        const lineBox = this.lineBox();
+        const lineSize = vertical ? lineBox.height() : lineBox.width();
+        const axis = vertical ? Y : X;
+        const axisDir = (vertical ? -1 : 1) * (reverse ? -1 : 1);
+        const startEdge = axisDir === 1 ? 1 : 2;
+        const axisOrigin = axis + startEdge.toString();
+        const lineStart = lineBox[axisOrigin];
+
+        return {
+            axis,
+            axisOrigin,
+            axisDir,
+            lineBox,
+            lineSize,
+            lineStart
+        };
+    }
+
+    pointOffset(point) {
+        const { axis, axisDir, axisOrigin, lineBox, lineSize } = this.lineInfo();
+        const relative = axisDir > 0 ? point[axis] - lineBox[axisOrigin] : lineBox[axisOrigin] - point[axis];
+        const offset = relative / lineSize;
+
+        return offset;
+    }
+
     labelsBetweenTicks() {
         return !this.options.justified;
     }

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

@@ -6,6 +6,7 @@ import { defined, isNumber, last, limitValue, round, setDefaultOptions, valueOrD
 import { dateEquals } from '../date-utils';
 
 const MIN_CATEGORY_POINTS_RANGE = 0.01;
+const MIN_CATEGORY_RANGE = 0.1;
 
 function indexOf(value, arr) {
     if (value instanceof Date) {
@@ -375,27 +376,32 @@ class CategoryAxis extends Axis {
         };
     }
 
-    zoomRange(rate) {
+    scaleRange(scale, cursor) {
+        const position = Math.abs(this.pointOffset(cursor));
         const rangeIndices = this.totalRangeIndices();
-        const { min: totalMin, max: totalMax } = this.totalRange();
-        const min = limitValue(rangeIndices.min + rate, totalMin, totalMax);
-        const max = limitValue(rangeIndices.max - rate, totalMin, totalMax);
-
-        if (max - min > 0) {
-            return {
-                min: min,
-                max: max
-            };
+        const delta = (rangeIndices.max - rangeIndices.min) * Math.min(1, scale);
+        const minDelta = position * delta;
+        const maxDelta = (1 - position) * delta;
+        const min = rangeIndices.min + minDelta;
+        let max = rangeIndices.max - maxDelta;
+
+        if (max - min < MIN_CATEGORY_RANGE) {
+            max = min + MIN_CATEGORY_RANGE;
         }
+
+        return {
+            min: min,
+            max: max
+        };
     }
 
-    scaleRange(scale) {
-        const range = this.options.categories.length;
-        const delta = scale * range;
+    zoomRange(scale, cursor) {
+        const { min: totalMin, max: totalMax } = this.totalRange();
+        const 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/es2015/core/date-category-axis.js

@@ -459,30 +459,6 @@ class DateCategoryAxis extends CategoryAxis {
         return range;
     }
 
-    scaleRange(delta) {
-        let rounds = Math.abs(delta);
-        let result = this.range();
-        let { min: from, max: to } = result;
-
-        if (from && to) {
-            while (rounds--) {
-                const range = dateDiff(from, to);
-                const 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;
-    }
-
     labelsRange() {
         return {
             min: this.options.labels.skip,
@@ -541,18 +517,24 @@ class DateCategoryAxis extends CategoryAxis {
         };
     }
 
-    zoomRange(delta) {
+    scaleRange(scale, cursor) {
         if (this.isEmpty()) {
-            return null;
+            return {};
         }
 
         const options = this.options;
         const fit = options.userSetBaseUnit === FIT;
         const totalLimits = this.dataRange.total();
         const { min: rangeMin, max: rangeMax } = this.dataRange.displayRange();
-        let { weekStartDay, baseUnit, baseUnitStep } = this.dataRange.options;
-        let min = addDuration(rangeMin, delta * baseUnitStep, baseUnit, weekStartDay);
-        let max = addDuration(rangeMax, -delta * baseUnitStep, baseUnit, weekStartDay);
+
+        const position = Math.abs(this.pointOffset(cursor));
+        const delta = (rangeMax - rangeMin) * scale;
+        const minDelta = Math.round(position * delta);
+        const maxDelta = Math.round((1 - position) * delta);
+
+        let { baseUnit } = this.dataRange.options;
+        let min = new Date(rangeMin.getTime() + minDelta);
+        let max = new Date(rangeMax.getTime() - maxDelta);
 
         if (fit) {
             const { autoBaseUnitSteps, maxDateGroups } = options;
@@ -594,13 +576,6 @@ class DateCategoryAxis extends 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,
@@ -611,6 +586,22 @@ class DateCategoryAxis extends CategoryAxis {
         }
     }
 
+    zoomRange(scale, cursor) {
+        const totalLimits = this.dataRange.total();
+        const 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;
+    }
+
     range() {
         return this.dataRange.displayRange();
     }

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

@@ -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';
 
+const MIN_VALUE_RANGE = 1000;
+
 class DateValueAxis extends Axis {
     constructor(seriesMin, seriesMax, axisOptions, chartService) {
         const min = toDate(seriesMin);
@@ -120,23 +122,22 @@ class DateValueAxis extends Axis {
         return new AxisLabel(date, text, index, null, labelOptions);
     }
 
-    translateRange(delta, exact) {
+    translateRange(delta) {
         const options = this.options;
-        const baseUnit = options.baseUnit;
-        const weekStartDay = options.weekStartDay || 0;
         const lineBox = this.lineBox();
-        const size = options.vertical ? lineBox.height() : lineBox.width();
+        const { vertical, reverse } = options;
+        const size = vertical ? lineBox.height() : lineBox.width();
         const range = this.range();
         const scale = size / dateDiff(range.max, range.min);
-        const offset = round(delta / scale, DEFAULT_PRECISION) * (options.reverse ? -1 : 1);
-        let from = addTicks(options.min, offset);
-        let to = addTicks(options.max, offset);
 
-        if (!exact) {
-            from = addDuration(from, 0, baseUnit, weekStartDay);
-            to = addDuration(to, 0, baseUnit, weekStartDay);
+        let offset = round(delta / scale, DEFAULT_PRECISION);
+        if ((vertical || reverse) && !(vertical && reverse )) {
+            offset = -offset;
         }
 
+        let from = addTicks(options.min, offset);
+        let to = addTicks(options.max, offset);
+
         return {
             min: from,
             max: to,
@@ -144,25 +145,6 @@ class DateValueAxis extends Axis {
         };
     }
 
-    scaleRange(delta) {
-        let { min: from, max: to } = this.options;
-        let rounds = Math.abs(delta);
-
-        while (rounds--) {
-            const range = dateDiff(from, to);
-            const 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 };
-    }
-
     shouldRenderNote(value) {
         const range = this.range();
 
@@ -193,16 +175,34 @@ class DateValueAxis extends Axis {
         };
     }
 
-    zoomRange(delta) {
-        const range = this.scaleRange(delta);
-        const min = toDate(limitValue(toTime(range.min), this.totalMin, this.totalMax));
-        const max = toDate(limitValue(toTime(range.max), this.totalMin, this.totalMax));
+    scaleRange(scale, cursor) {
+        const position = Math.abs(this.pointOffset(cursor));
+        const delta = (this.options.max - this.options.min) * Math.min(1, scale);
+        const minDelta = position * delta;
+        const maxDelta = (1 - position) * delta;
+        const min = toDate(toTime(this.options.min) + minDelta);
+        let 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
         };
     }
+
+    zoomRange(scale, cursor) {
+        const range = this.scaleRange(scale, cursor);
+        const min = toDate(limitValue(toTime(range.min), this.totalMin, this.totalMax));
+        const max = toDate(limitValue(toTime(range.max), this.totalMin, this.totalMax));
+
+        return {
+            min,
+            max
+        };
+    }
 }
 
 function timeUnits(delta) {

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

@@ -11,6 +11,7 @@ import { DEFAULT_PRECISION, BLACK, X, Y } from '../common/constants';
 import { deepExtend, defined, inArray, limitValue, round, setDefaultOptions } from '../common';
 
 const DEFAULT_MAJOR_UNIT = 10;
+const MIN_VALUE_RANGE = 1e-6;
 
 class LogarithmicAxis extends Axis {
     constructor(seriesMin, seriesMax, options, chartService) {
@@ -126,16 +127,6 @@ class LogarithmicAxis extends Axis {
         return { min: options.min, max: options.max };
     }
 
-    scaleRange(delta) {
-        const base = this.options.majorUnit;
-        const offset = -delta;
-
-        return {
-            min: Math.pow(base, this.logMin - offset),
-            max: Math.pow(base, this.logMax + offset)
-        };
-    }
-
     translateRange(delta) {
         const { options, logMin, logMax } = this;
         const { reverse, vertical, majorUnit: base } = options;
@@ -296,21 +287,33 @@ class LogarithmicAxis extends Axis {
         };
     }
 
-    zoomRange(delta) {
-        const { options, totalMin, totalMax } = this;
-        const newRange = this.scaleRange(delta);
-        const min = limitValue(newRange.min, totalMin, totalMax);
-        const max = limitValue(newRange.max, totalMin, totalMax);
-        const base = options.majorUnit;
-        const acceptOptionsRange = max > min && options.min && options.max && (round(log(options.max, base) - log(options.min, base), DEFAULT_PRECISION) < 1);
-        const acceptNewRange = !(options.min === totalMin && options.max === totalMax) && round(log(max, base) - log(min, base), DEFAULT_PRECISION) >= 1;
-
-        if (acceptOptionsRange || acceptNewRange) {
-            return {
-                min: min,
-                max: max
-            };
+    scaleRange(scale, cursor) {
+        const { majorUnit: base } = this.options;
+        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 min = Math.pow(base, logMin + position * delta);
+        let max = Math.pow(base, logMax - (1 - position) * delta);
+
+        if (max - min < MIN_VALUE_RANGE) {
+            max = min + MIN_VALUE_RANGE;
         }
+
+        return {
+            min: min,
+            max: max
+        };
+    }
+
+    zoomRange(scale, cursor) {
+        const range = this.scaleRange(scale, cursor);
+        const { totalMin, totalMax } = this;
+
+        return {
+            min: limitValue(range.min, totalMin, totalMax),
+            max: limitValue(range.max, totalMin, totalMax)
+        };
     }
 
     _minorIntervalOptions(power) {
@@ -398,8 +401,8 @@ function throwNegativeValuesError() {
     throw new Error("Non positive values cannot be used for a logarithmic axis");
 }
 
-function log(y, x) {
-    return Math.log(y) / Math.log(x);
+function log(x, base) {
+    return Math.log(x) / Math.log(base);
 }
 
 setDefaultOptions(LogarithmicAxis, {

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

@@ -194,16 +194,6 @@ class NumericAxis extends Axis {
         };
     }
 
-    scaleRange(delta) {
-        const options = this.options;
-        const offset = -delta * options.majorUnit;
-
-        return {
-            min: options.min - offset,
-            max: options.max + offset
-        };
-    }
-
     labelsCount() {
         return this.getDivisions(this.options.majorUnit);
     }
@@ -240,18 +230,32 @@ class NumericAxis extends Axis {
         }
     }
 
-    zoomRange(delta) {
-        const { totalMin, totalMax } = this;
-        const newRange = this.scaleRange(delta);
-        const min = limitValue(newRange.min, totalMin, totalMax);
-        const max = limitValue(newRange.max, totalMin, totalMax);
+    scaleRange(scale, cursor) {
+        const position = Math.abs(this.pointOffset(cursor));
+        const delta = (this.options.max - this.options.min) * Math.min(1, scale);
+        const minDelta = position * delta;
+        const maxDelta = (1 - position) * delta;
+        const min = this.options.min + minDelta;
+        let max = this.options.max - maxDelta;
 
-        if (this.isValidRange(min, max)) {
-            return {
-                min: min,
-                max: max
-            };
+        if (max - min < MIN_VALUE_RANGE) {
+            max = min + MIN_VALUE_RANGE;
         }
+
+        return {
+            min: min,
+            max: max
+        };
+    }
+
+    zoomRange(scale, cursor) {
+        const { totalMin, totalMax } = this;
+        const range = this.scaleRange(scale, cursor);
+
+        return {
+            min: limitValue(range.min, totalMin, totalMax),
+            max: limitValue(range.max, totalMin, totalMax)
+        };
     }
 
     isValidRange(min, max) {

package/dist/es2015/stock/navigator.js

@@ -260,6 +260,7 @@ class Navigator extends Class {
 
         const fromIx = mainAxis.categoryIndex(selection.options.from);
         const toIx = mainAxis.categoryIndex(selection.options.to);
+        const coords = this.chart._eventCoordinates(e.originalEvent);
 
         e.originalEvent.preventDefault();
 
@@ -268,11 +269,11 @@ class Navigator extends Class {
         }
 
         if (toIx - fromIx > 1) {
-            selection.expand(delta);
+            selection.zoom(delta, coords);
             this.readSelection();
         } else {
             axis.options.min = select.from;
-            select.from = axis.scaleRange(-e.delta).min;
+            select.from = axis.scaleRange(-e.delta * this.chart._mousewheelZoomRate(), coords).min;
         }
 
         if (liveDrag) {