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

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) {
@@ -244,13 +245,44 @@ class CategoryAxis extends Axis {
         return positions.slice(startIndex, endIndex + 1);
     }
 
+    lineInfo() {
+        const { vertical, reverse } = this.options;
+        const lineBox = this.lineBox();
+        const lineSize = vertical ? lineBox.height() : lineBox.width();
+        const axis = vertical ? Y : X;
+        const axisDir = 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
+        };
+    }
+
+    lineDir() {
+        /*
+         *  Category axis line direction:
+         *    * Vertical: down.
+         *    * Horizontal: right.
+         */
+
+        const { reverse } = this.options;
+        return reverse ? -1 : 1;
+    }
+
     // TODO: Rename to slotBox, valueSlot, slotByIndex?
     getSlot(from, to, limit) {
         const options = this.options;
-        const { reverse, justified, vertical } = options;
+        const { reverse, justified } = options;
         const { scale, box, min } = this.scaleOptions();
-        const valueAxis = vertical ? Y : X;
-        const lineStart = box[valueAxis + (reverse ? 2 : 1)];
+        const { axis: valueAxis, lineStart } = this.lineInfo();
+
         const slotBox = box.clone();
         const singleSlot = !defined(to);
 
@@ -375,27 +407,33 @@ 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

@@ -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';
 
+const MIN_VALUE_RANGE = 1000;
+
 class DateValueAxis extends Axis {
     constructor(seriesMin, seriesMax, axisOptions, chartService) {
         const min = toDate(seriesMin);
@@ -57,14 +59,9 @@ class DateValueAxis extends Axis {
 
     getTickPositions(step) {
         const options = this.options;
-        const vertical = options.vertical;
-        const lineBox = this.lineBox();
-        const dir = (vertical ? -1 : 1) * (options.reverse ? -1 : 1);
-        const startEdge = dir === 1 ? 1 : 2;
-        const start = lineBox[(vertical ? Y : X) + startEdge];
+        const { axisDir: dir, lineSize, lineStart: start } = this.lineInfo();
         const divisions = this.getDivisions(step);
         const timeRange = dateDiff(options.max, options.min);
-        const lineSize = vertical ? lineBox.height() : lineBox.width();
         const scale = lineSize / timeRange;
         const weekStartDay = options.weekStartDay || 0;
 
@@ -120,23 +117,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 +140,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 +170,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

@@ -7,10 +7,11 @@ import createAxisTick from './utils/create-axis-tick';
 import createAxisGridLine from './utils/create-axis-grid-line';
 import limitCoordinate from './utils/limit-coordinate';
 
-import { DEFAULT_PRECISION, BLACK, X, Y } from '../common/constants';
-import { deepExtend, defined, inArray, limitValue, round, setDefaultOptions } from '../common';
+import { DEFAULT_PRECISION, BLACK } from '../common/constants';
+import { deepExtend, defined, inArray, limitValue, round, setDefaultOptions, valueOrDefault } from '../common';
 
 const DEFAULT_MAJOR_UNIT = 10;
+const MIN_VALUE_RANGE = 1e-6;
 
 class LogarithmicAxis extends Axis {
     constructor(seriesMin, seriesMax, options, chartService) {
@@ -52,64 +53,40 @@ class LogarithmicAxis extends Axis {
 
     getSlot(a, b, limit) {
         const { options, logMin, logMax } = this;
-        const { reverse, vertical, majorUnit: base } = options;
-        const valueAxis = vertical ? Y : X;
-        const lineBox = this.lineBox();
-        const lineStart = lineBox[valueAxis + (reverse ? 2 : 1)];
-        const lineSize = vertical ? lineBox.height() : lineBox.width();
-        const dir = reverse ? -1 : 1;
-        const step = dir * (lineSize / (logMax - logMin));
-        const slotBox = new Box(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
-        let start = a;
-        let end = b;
-
-        if (!defined(start)) {
-            start = end || 1;
-        }
-
-        if (!defined(end)) {
-            end = start || 1;
-        }
+        const { majorUnit: base, min, max } = options;
+        const { axis, axisDir, lineBox, lineSize, lineStart } = this.lineInfo();
+        const step = axisDir * (lineSize / (logMax - logMin));
+        let start = valueOrDefault(a, b || 1);
+        let end = valueOrDefault(b, a || 1);
 
         if (start <= 0 || end <= 0) {
             return null;
         }
 
         if (limit) {
-            start = Math.max(Math.min(start, options.max), options.min);
-            end = Math.max(Math.min(end, options.max), options.min);
+            start = limitValue(start, min, max);
+            end = limitValue(end, min, max);
         }
 
         start = log(start, base);
         end = log(end, base);
 
-        let p1, p2;
+        const p1 = Math.min(start, end) - logMin;
+        const p2 = Math.max(start, end) - logMin;
 
-        if (vertical) {
-            p1 = logMax - Math.max(start, end);
-            p2 = logMax - Math.min(start, end);
-        } else {
-            p1 = Math.min(start, end) - logMin;
-            p2 = Math.max(start, end) - logMin;
-        }
-
-        slotBox[valueAxis + 1] = limitCoordinate(lineStart + step * (reverse ? p2 : p1));
-        slotBox[valueAxis + 2] = limitCoordinate(lineStart + step * (reverse ? p1 : p2));
+        const slotBox = new Box(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
+        slotBox[axis + 1] = limitCoordinate(lineStart + step * (axisDir > 0 ? p1 : p2));
+        slotBox[axis + 2] = limitCoordinate(lineStart + step * (axisDir > 0 ? p2 : p1));
 
         return slotBox;
     }
 
     getValue(point) {
         const { options, logMin, logMax } = this;
-        const { reverse, vertical, majorUnit: base } = options;
-        const lineBox = this.lineBox();
-        const dir = vertical === reverse ? 1 : -1;
-        const startEdge = dir === 1 ? 1 : 2;
-        const lineSize = vertical ? lineBox.height() : lineBox.width();
+        const { majorUnit: base } = options;
+        const { axis, axisDir, lineStart, lineSize } = this.lineInfo();
         const step = ((logMax - logMin) / lineSize);
-        const valueAxis = vertical ? Y : X;
-        const lineStart = lineBox[valueAxis + startEdge];
-        const offset = dir * (point[valueAxis] - lineStart);
+        const offset = axisDir * (point[axis] - lineStart);
         const valueOffset = offset * step;
 
         if (offset < 0 || offset > lineSize) {
@@ -126,16 +103,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;
@@ -236,7 +203,7 @@ class LogarithmicAxis extends Axis {
     }
 
     traverseMajorTicksPositions(callback, tickOptions) {
-        const { lineStart, step } = this._lineOptions();
+        const { lineStart, step } = this.lineInfo();
         const { logMin, logMax } = this;
 
         for (let power = Math.ceil(logMin) + tickOptions.skip; power <= logMax; power += tickOptions.step) {
@@ -247,7 +214,7 @@ class LogarithmicAxis extends Axis {
 
     traverseMinorTicksPositions(callback, tickOptions) {
         const { min, max, minorUnit, majorUnit: base } = this.options;
-        const { lineStart, step } = this._lineOptions();
+        const { lineStart, step } = this.lineInfo();
         const { logMin, logMax } = this;
         const start = Math.floor(logMin);
 
@@ -296,21 +263,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) {
@@ -326,21 +305,11 @@ class LogarithmicAxis extends Axis {
         };
     }
 
-    _lineOptions() {
-        const { reverse, vertical } = this.options;
-        const valueAxis = vertical ? Y : X;
-        const lineBox = this.lineBox();
-        const dir = vertical === reverse ? 1 : -1;
-        const startEdge = dir === 1 ? 1 : 2;
-        const lineSize = vertical ? lineBox.height() : lineBox.width();
-        const step = dir * (lineSize / (this.logMax - this.logMin));
-        const lineStart = lineBox[valueAxis + startEdge];
+    lineInfo() {
+        const info = super.lineInfo();
+        info.step = info.axisDir * (info.lineSize / (this.logMax - this.logMin));
 
-        return {
-            step: step,
-            lineStart: lineStart,
-            lineBox: lineBox
-        };
+        return info;
     }
 }
 
@@ -398,8 +367,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, {