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

package/dist/es/qrcode/qrcode.js

@@ -0,0 +1,403 @@
+import {
+    geometry as geom,
+    drawing as draw
+} from '@progress/kendo-drawing';
+
+import {
+    Class,
+    addClass,
+    setDefaultOptions,
+    deepExtend
+} from '../common';
+
+import { Box } from '../core';
+import { encodeData } from './encodings/encoding';
+import { extend } from './utils';
+
+var round = Math.round;
+var crossPattern = [[0, 1], [1, 1], [1, 2], [2, 2], [2, 1], [3, 1], [3, 0], [2, 0], [2, -1], [1, -1], [1, 0]];
+var squarePattern = [[0, 1], [1, 1], [1, 0]];
+
+var QRCodeDefaults = {
+    DEFAULT_SIZE: 200,
+    QUIET_ZONE_LENGTH: 4,
+    DEFAULT_ERROR_CORRECTION_LEVEL: "L",
+    DEFAULT_BACKGROUND: "#fff",
+    DEFAULT_DARK_MODULE_COLOR: "#000",
+    MIN_BASE_UNIT_SIZE: 1,
+    DEFAULT_LOGO_SIZE: 7
+};
+
+var QRCode = (function (Class) {
+    function QRCode(element, options) {
+        Class.call(this);
+
+        this.options = deepExtend({}, this.options, options);
+        this.element = element;
+        this.wrapper = this.element;
+
+        this._initElement();
+        this._initSurface();
+
+        this.setOptions(options);
+    }
+
+    if ( Class ) QRCode.__proto__ = Class;
+    QRCode.prototype = Object.create( Class && Class.prototype );
+    QRCode.prototype.constructor = QRCode;
+
+    QRCode.prototype.destroy = function destroy () {
+        this._destroySurface();
+    };
+
+    QRCode.prototype._initElement = function _initElement () {
+        addClass(this.element, "k-qrcode");
+        this.element.style.display = "block";
+    };
+
+    QRCode.prototype._initSurface = function _initSurface () {
+        var ref = this;
+        var options = ref.options;
+        var surface = ref.surface;
+
+        if (!surface || surface.options.type !== options.renderAs) {
+            this._destroySurface();
+            this._initSurfaceElement();
+            this.surface = this._createSurface();
+        }
+    };
+
+    QRCode.prototype._createSurface = function _createSurface () {
+        return draw.Surface.create(this.surfaceElement, {
+            type: this.options.renderAs
+        });
+    };
+
+    QRCode.prototype._destroySurface = function _destroySurface () {
+        if (this.surface) {
+            this.surface.destroy();
+            this.surface = null;
+            this._destroySurfaceElement();
+        }
+    };
+
+    QRCode.prototype._initSurfaceElement = function _initSurfaceElement () {
+        if (!this.surfaceElement) {
+            this.surfaceElement = document.createElement('div');
+            this.surfaceElement.style.position = "relative";
+            this.element.appendChild(this.surfaceElement);
+        }
+    };
+
+    QRCode.prototype._destroySurfaceElement = function _destroySurfaceElement () {
+        if (this.surfaceElement && this.surfaceElement.parentNode) {
+            this.surfaceElement.parentNode.removeChild(this.surfaceElement);
+            this.surfaceElement = null;
+        }
+    };
+
+    QRCode.prototype.redraw = function redraw () {
+        var size = this._getSize();
+
+        this.surface.clear();
+
+        this.surface.setSize({
+            width: size,
+            height: size
+        });
+
+        this.createVisual();
+
+        this.surface.draw(this.visual);
+    };
+
+    QRCode.prototype.getSize = function getSize () {
+        var element = this.element;
+        var elementWidth = element.clientWidth;
+        var elementHeight = element.clientHeight;
+        var size = { width: 0, height: 0 };
+
+        if (elementWidth > 0) {
+            size.width = elementWidth;
+        }
+
+        if (elementHeight) {
+            size.height = elementHeight;
+        }
+
+        return size;
+    };
+
+    QRCode.prototype._resize = function _resize () {
+        this.redraw();
+    };
+
+    QRCode.prototype.createVisual = function createVisual () {
+        this.visual = this._render();
+    };
+
+    QRCode.prototype.exportVisual = function exportVisual () {
+        return this._render();
+    };
+
+    QRCode.prototype._render = function _render () {
+        var value = this._value,
+            baseUnit,
+            border = this.options.border || {},
+            padding = this.options.padding || 0,
+            borderWidth = border.width || 0,
+            quietZoneSize,
+            matrix,
+            size,
+            dataSize,
+            contentSize;
+
+        border.width = borderWidth;
+
+        var visual = new draw.Group();
+
+        if (value) {
+            matrix = encodeData(value, this.options.errorCorrection, this.options.encoding);
+            size = this._getSize();
+            contentSize = size - 2 * (borderWidth + padding);
+            baseUnit = this._calculateBaseUnit(contentSize, matrix.length);
+            dataSize = matrix.length * baseUnit;
+            quietZoneSize = borderWidth + padding + (contentSize - dataSize) / 2;
+
+            visual.append(this._renderBackground(size, border));
+            visual.append(this._renderMatrix(matrix, baseUnit, quietZoneSize));
+
+            if (this._hasCustomLogo()) {
+                visual.append(this._renderLogo(size, baseUnit));
+            } else if (this._isSwiss()) {
+                visual.append(this._renderSwissCode(size, baseUnit));
+            }
+        }
+
+        return visual;
+    };
+
+    QRCode.prototype._renderLogo = function _renderLogo (qrSize, baseUnit) {
+        var image;
+        var imageRect;
+        var center = round(qrSize / 2);
+        var logoSize = this._getLogoSize(baseUnit * QRCodeDefaults.DEFAULT_LOGO_SIZE);
+        var logoUrl = this.options.overlay.imageUrl;
+        var position = {
+            x: center - logoSize.width / 2,
+            y: center - logoSize.height / 2
+        };
+
+        imageRect = new geom.Rect(
+            new geom.Point(position.x, position.y),
+            new geom.Size(logoSize.width, logoSize.height)
+        );
+
+        image = new draw.Image(logoUrl, imageRect);
+
+        return image;
+    };
+
+    QRCode.prototype._renderSwissCode = function _renderSwissCode (qrSize, baseUnit) {
+        var logoSize = this._getLogoSize(baseUnit * QRCodeDefaults.DEFAULT_LOGO_SIZE);
+        logoSize = Math.max(logoSize.width, logoSize.height);
+        var crossSize = logoSize / 4;
+        var crossOffset = crossSize / 2;
+        var center = qrSize / 2;
+        var start = {};
+        var visual = new draw.Group();
+
+        start.x = start.y = Math.ceil(center - baseUnit - logoSize / 2);
+        visual.append(this._renderShape(start, Math.ceil(logoSize + baseUnit * 2), squarePattern, "#fff"));
+
+        start.x = start.y = center - logoSize / 2;
+        visual.append(this._renderShape(start, logoSize, squarePattern, this.options.color));
+
+        start.x = center + crossOffset - logoSize / 2;
+        start.y = center + crossOffset + crossSize - logoSize / 2;
+        visual.append(this._renderShape(start, crossSize, crossPattern, "#fff"));
+
+        return visual;
+    };
+
+    QRCode.prototype._renderShape = function _renderShape (start, step, pattern, color) {
+        var path = new draw.MultiPath({
+            fill: {
+                color: color
+            },
+            stroke: null
+        });
+
+        path.moveTo(start.x, start.y);
+
+        for (var i = 0; i < pattern.length; i++) {
+            path.lineTo(start.x + step * pattern[i][0], start.y + step * pattern[i][1]);
+        }
+
+        path.close();
+
+        return path;
+    };
+
+    QRCode.prototype._getSize = function _getSize () {
+        var size;
+
+        if (this.options.size) {
+            size = parseInt(this.options.size, 10);
+        } else {
+            var element = this.element;
+            var min = Math.min(element.clientWidth, element.clientHeight);
+
+            if (min > 0) {
+                size = min;
+            } else {
+                size = QRCodeDefaults.DEFAULT_SIZE;
+            }
+        }
+
+        return size;
+    };
+
+    QRCode.prototype._calculateBaseUnit = function _calculateBaseUnit (size, matrixSize) {
+        var baseUnit = Math.floor(size / matrixSize);
+
+        if (baseUnit < QRCodeDefaults.MIN_BASE_UNIT_SIZE) {
+            throw new Error("Insufficient size.");
+        }
+
+        if (baseUnit * matrixSize >= size &&
+            baseUnit - 1 >= QRCodeDefaults.MIN_BASE_UNIT_SIZE) {
+            baseUnit--;
+        }
+
+        return baseUnit;
+    };
+
+    QRCode.prototype._renderMatrix = function _renderMatrix (matrix, baseUnit, quietZoneSize) {
+        var path = new draw.MultiPath({
+            fill: {
+                color: this.options.color
+            },
+            stroke: null
+        });
+
+        for (var row = 0; row < matrix.length; row++) {
+            var y = quietZoneSize + row * baseUnit;
+            var column = 0;
+
+            while (column < matrix.length) {
+                while (matrix[row][column] === 0 && column < matrix.length) {
+                    column++;
+                }
+
+                if (column < matrix.length) {
+                    var x = column;
+                    while (matrix[row][column] === 1) {
+                        column++;
+                    }
+
+                    var x1 = round(quietZoneSize + x * baseUnit);
+                    var y1 = round(y);
+                    var x2 = round(quietZoneSize + column * baseUnit);
+                    var y2 = round(y + baseUnit);
+
+                    path.moveTo(x1, y1)
+                        .lineTo(x1, y2)
+                        .lineTo(x2, y2)
+                        .lineTo(x2, y1)
+                        .close();
+                }
+            }
+        }
+
+        return path;
+    };
+
+    QRCode.prototype._renderBackground = function _renderBackground (size, border) {
+        var box = new Box(0, 0, size, size).unpad(border.width / 2);
+        var background = draw.Path.fromRect(box.toRect(), {
+            fill: {
+                color: this.options.background
+            },
+            stroke: {
+                color: border.color,
+                width: border.width
+            }
+        });
+
+        return background;
+    };
+
+    QRCode.prototype.setOptions = function setOptions (options) {
+        var newOptions = options || {};
+        this.options = extend(this.options, newOptions);
+
+        if (options.value !== undefined) {
+            this._value = String(this.options.value);
+        }
+
+        this.redraw();
+    };
+
+    QRCode.prototype.value = function value (value$1) {
+        if (value$1 === undefined) {
+            return this._value;
+        }
+
+        this._value = String(value$1);
+
+        this.redraw();
+    };
+
+    QRCode.prototype._hasCustomLogo = function _hasCustomLogo () {
+        return Boolean(this.options.overlay.imageUrl);
+    };
+
+    QRCode.prototype._isSwiss = function _isSwiss () {
+        return this.options.overlay.type === "swiss";
+    };
+
+    QRCode.prototype._getLogoSize = function _getLogoSize (defautLogoSize) {
+        var width = this.options.overlay.width;
+        var height = this.options.overlay.height;
+
+        if (!width && !height) {
+            width = height = defautLogoSize;
+        } else if (width && !height) {
+            height = width;
+        } else if (!width && height) {
+            width = height;
+        }
+
+        return {
+            width: width,
+            height: height
+        };
+    };
+
+    return QRCode;
+}(Class));
+
+setDefaultOptions(QRCode, {
+    name: "QRCode",
+    renderAs: "svg",
+    encoding: "ISO_8859_1",
+    value: "",
+    errorCorrection: QRCodeDefaults.DEFAULT_ERROR_CORRECTION_LEVEL,
+    background: QRCodeDefaults.DEFAULT_BACKGROUND,
+    color: QRCodeDefaults.DEFAULT_DARK_MODULE_COLOR,
+    size: "",
+    padding: 0,
+    border: {
+        color: "",
+        width: 0
+    },
+    overlay: {
+        type: "image",
+        imageUrl: "",
+        width: 0,
+        height: 0
+    }
+});
+
+export default QRCode;

package/dist/es/qrcode/utils.js

@@ -0,0 +1,28 @@
+export var extend = Object.assign;
+
+export function splitInto(str, chunkLength) {
+    var result = [];
+    var idx = 0;
+
+    while (idx < str.length) {
+        result.push(str.substring(idx, idx + chunkLength));
+        idx += chunkLength;
+    }
+
+    return result;
+}
+
+export function toBitsString(value, length) {
+    var bitString = Number(value).toString(2);
+
+    if (bitString.length < length) {
+        bitString = new Array(length - bitString.length + 1).join(0) + bitString;
+    }
+
+    return bitString;
+}
+
+export function toDecimal(value) {
+    return parseInt(value, 2);
+}
+

package/dist/es/qrcode.js

@@ -0,0 +1 @@
+export { default as QRCode } from './qrcode/qrcode';

package/dist/es/stock/navigator.js

@@ -286,6 +286,7 @@ var Navigator = (function (Class) {
 
         var fromIx = mainAxis.categoryIndex(selection.options.from);
         var toIx = mainAxis.categoryIndex(selection.options.to);
+        var coords = this.chart._eventCoordinates(e.originalEvent);
 
         e.originalEvent.preventDefault();
 
@@ -294,11 +295,11 @@ var Navigator = (function (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) {

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);
                     }
                 }
 
@@ -1156,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/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,45 @@ class Axis extends ChartElement {
         };
     }
 
+    lineDir() {
+        /*
+         * Axis line direction:
+         *   * Vertical: up.
+         *   * Horizontal: right.
+         */
+
+        const { vertical, reverse } = this.options;
+        return (vertical ? -1 : 1) * (reverse ? -1 : 1);
+    }
+
+    lineInfo() {
+        const { vertical } = this.options;
+        const lineBox = this.lineBox();
+        const lineSize = vertical ? lineBox.height() : lineBox.width();
+        const axis = vertical ? Y : X;
+        const axisDir = this.lineDir();
+        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;
     }