@progress/kendo-charts 1.27.1 → 1.28.0-dev.202303070933

package/dist/es/chart/constants.js

@@ -92,7 +92,7 @@ var INSIDE_END = "insideEnd";
 var INSIDE_BASE = "insideBase";
 var OUTSIDE_END = "outsideEnd";
 
-var MOUSEWHEEL = "DOMMouseScroll mousewheel";
+var MOUSEWHEEL = "wheel";
 var MOUSEWHEEL_DELAY = 150;
 var MOUSEWHEEL_ZOOM_RATE = 0.3;
 

package/dist/es/chart/selection.js

@@ -5,16 +5,16 @@ import { DateCategoryAxis, Point } from '../core';
 import { MOUSEWHEEL_DELAY, MOUSEWHEEL, SELECT_START, SELECT, SELECT_END } from './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 { addClass, Class, removeClass, eventCoordinates, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
 var ZOOM_ACCELERATION = 3;
 var SELECTOR_HEIGHT_ADJUST = 0.1;
 
-function createDiv(className) {
+function createDiv(classNames) {
     var element = document.createElement("div");
-    if (className) {
-        element.className = className;
+    if (classNames) {
+        element.className = classNames;
     }
 
     return element;
@@ -65,7 +65,7 @@ var Selection = (function (Class) {
 
     Selection.prototype.createElements = function createElements () {
         var options = this.options;
-        var wrapper = this.wrapper = createDiv("k-selector");
+        var wrapper = this.wrapper = createDiv("k-selector k-pointer-events-none");
         elementStyles(wrapper, {
             top: options.offset.top,
             left: options.offset.left,
@@ -73,18 +73,21 @@ var Selection = (function (Class) {
             height: options.height,
             direction: 'ltr'
         });
-        var selection = this.selection = createDiv("k-selection");
-        this.leftMask = createDiv("k-mask");
-        this.rightMask = createDiv("k-mask");
+
+        var selection = this.selection = createDiv("k-selection k-pointer-events-none");
+
+        this.leftMask = createDiv("k-mask k-pointer-events-none");
+        this.rightMask = createDiv("k-mask k-pointer-events-none");
 
         wrapper.appendChild(this.leftMask);
         wrapper.appendChild(this.rightMask);
         wrapper.appendChild(selection);
 
-        selection.appendChild(createDiv("k-selection-bg"));
+        var body = this.body = createDiv("k-selection-bg k-pointer-events-none");
+        selection.appendChild(body);
 
-        var leftHandle = this.leftHandle = createDiv("k-handle k-left-handle");
-        var rightHandle = this.rightHandle = createDiv("k-handle k-right-handle");
+        var leftHandle = this.leftHandle = createDiv("k-handle k-left-handle k-pointer-events-auto");
+        var rightHandle = this.rightHandle = createDiv("k-handle k-right-handle k-pointer-events-auto");
         leftHandle.appendChild(createDiv());
         rightHandle.appendChild(createDiv());
 
@@ -119,10 +122,10 @@ var Selection = (function (Class) {
 
         if (this.options.mousewheel !== false) {
             this._mousewheelHandler = this._mousewheel.bind(this);
-            bindEvents(this.wrapper, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
+            bindEvents(this.chartElement, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
         }
 
-        this._domEvents = DomEventsBuilder.create(this.wrapper, {
+        this._domEvents = DomEventsBuilder.create(this.chartElement, {
             stopPropagation: true, // applicable for the jQuery UserEvents
             start: this._start.bind(this),
             move: this._move.bind(this),
@@ -184,9 +187,10 @@ var Selection = (function (Class) {
 
         if (this.wrapper) {
             if (this._mousewheelHandler) {
-                unbindEvents(this.wrapper, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
+                unbindEvents(this.chartElement, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
                 this._mousewheelHandler = null;
             }
+
             this.chartElement.removeChild(this.wrapper);
             this.wrapper = null;
         }
@@ -201,18 +205,35 @@ var Selection = (function (Class) {
         };
     };
 
+    Selection.prototype._pointInPane = function _pointInPane (x, y) {
+        var paneBox = this.categoryAxis.pane.box;
+        var modelCoords = this.chart._toModelCoordinates(x, y);
+        return paneBox.containsPoint(modelCoords);
+    };
+
     Selection.prototype._start = function _start (e) {
         var options = this.options;
         var target = eventElement(e);
-
         if (this._state || !target) {
             return;
         }
 
+        var coords = eventCoordinates(e);
+        var inPane = this._pointInPane(coords.x, coords.y);
+        if (!inPane) {
+            return;
+        }
+
+        var handle = closestHandle(target);
+        var bodyRect = this.body.getBoundingClientRect();
+        var inBody = !handle && coords.x >= bodyRect.x && coords.x <= bodyRect.x + bodyRect.width &&
+                       coords.y >= bodyRect.y && coords.y <= bodyRect.y + bodyRect.height;
+
         this.chart._unsetActivePoint();
         this._state = {
-            moveTarget: closestHandle(target) || target,
+            moveTarget: handle,
             startLocation: e.x ? e.x.location : 0,
+            inBody: inBody,
             range: {
                 from: this._index(options.from),
                 to: this._index(options.to)
@@ -263,14 +284,14 @@ var Selection = (function (Class) {
         var scale = elementStyles(this.wrapper, "width").width / (categoryAxis.categoriesCount() - 1);
         var offset = Math.round(delta / scale) * (reverse ? -1 : 1);
 
-        if (!target) {
+        if (!target && !state.inBody) {
             return;
         }
 
-        var leftHandle = hasClasses(target, "k-left-handle");
-        var rightHandle = hasClasses(target, "k-right-handle");
+        var leftHandle = target && hasClasses(target, "k-left-handle");
+        var rightHandle = target && hasClasses(target, "k-right-handle");
 
-        if (hasClasses(target, "k-selection k-selection-bg")) {
+        if (state.inBody) {
             range.from = Math.min(
                 Math.max(min, from - offset),
                 max - span
@@ -349,6 +370,7 @@ var Selection = (function (Class) {
         range.to = Math.min(range.from + span, max);
 
         this._start(e);
+
         if (this._state) {
             this._state.range = range;
             this.trigger(SELECT, this._rangeEventArgs(range));
@@ -361,7 +383,7 @@ var Selection = (function (Class) {
 
         var delta = mousewheelDelta(e);
 
-        this._start({ target: this.selection });
+        this._start(e);
 
         if (this._state) {
             var range = this._state.range;
@@ -399,6 +421,12 @@ var Selection = (function (Class) {
 
     Selection.prototype._gesturestart = function _gesturestart (e) {
         var options = this.options;
+        var touch = e.touches[0];
+        var inPane = this._pointInPane(touch.pageX, touch.pageY);
+
+        if (!inPane) {
+            return;
+        }
 
         this._state = {
             range: {
@@ -423,6 +451,10 @@ var Selection = (function (Class) {
     };
 
     Selection.prototype._gesturechange = function _gesturechange (e) {
+        if (!this._state) {
+            return;
+        }
+
         var ref = this;
         var chart = ref.chart;
         var state = ref._state;

package/dist/es/common/has-classes.js

@@ -2,9 +2,9 @@ export default function hasClasses(element, classNames) {
     if (element.className) {
         var names = classNames.split(" ");
         for (var idx = 0; idx < names.length; idx++) {
-            if (element.className.indexOf(names[idx]) !== -1) {
+            if (element.className.indexOf && element.className.indexOf(names[idx]) !== -1) {
                 return true;
             }
         }
     }
-}
+}

package/dist/es/map/layers/marker.js

@@ -9,21 +9,23 @@ import {
 
 import { Layer } from './layer';
 import { Location } from '../location';
-
 import {
     proxy,
     on,
     off,
     toHyphens,
-    toPixels
+    toPixels,
+    convertToHtml
 } from '../utils';
+import TemplateService from '../../services/template-service';
 
 var CLICK = "click";
 var MOUSE_ENTER = "mouseenter";
 var MOUSE_LEAVE = "mouseleave";
 
 var extend = Object.assign;
-var MARKER_CLASS = ".k-marker";
+var MARKER_CLASS_NAME = "k-marker";
+var MARKER_CLASS = "." + MARKER_CLASS_NAME;
 
 export var MarkerLayer = (function (Layer) {
     function MarkerLayer(map, options) {
@@ -153,11 +155,9 @@ export var MarkerLayer = (function (Layer) {
     };
 
     MarkerLayer.prototype._markerClick = function _markerClick (e) {
-        var marker = e.target._kendoNode;
+        var marker = e.currentTarget._kendoNode;
 
         var args = {
-            // marker: $(e.target).data('kendoMarker'),
-            // marker: e.target.getAttribute("data-kendoMarker"),
             layer: this,
             layerIndex: this._layerIndex(),
             marker: marker,
@@ -198,7 +198,8 @@ setDefaultOptions(MarkerLayer, {
     zIndex: 1000,
     autoBind: true,
     locationField: 'location',
-    titleField: 'title'
+    titleField: 'title',
+    template: ""
 });
 
 export var Marker = (function (Class) {
@@ -276,9 +277,17 @@ export var Marker = (function (Class) {
         if (!this.element) {
             var options = this.options;
             var layer = this.layer;
-
             var element = document.createElement('span');
-            addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            addClass(element, MARKER_CLASS_NAME);
+
+            if (this.options.template) {
+                var templateFn = this._compileTemplate(this.options.template);
+                var templateHtml = templateFn(this.dataItem);
+                var templateElement = convertToHtml(templateHtml);
+                element.appendChild(templateElement);
+            } else {
+                addClass(element, 'k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            }
 
             if (options.title) {
                 element.setAttribute("title", options.title);
@@ -337,6 +346,13 @@ export var Marker = (function (Class) {
         return args;
     };
 
+    Marker.prototype._compileTemplate = function _compileTemplate (template) {
+        return TemplateService.compile(template, {
+            paramName: "dataItem",
+            useWithBlock: false
+        });
+    };
+
     Marker.create = function create (arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

package/dist/es/map/map.js

@@ -60,13 +60,13 @@ import {
 import {
     removeChildren,
     setDefaultEvents,
-    toHyphens,
     proxy,
     now,
     on,
     off,
     getSupportedFeatures,
-    convertToHtml
+    convertToHtml,
+    renderPos
 } from './utils';
 
 import {
@@ -100,20 +100,6 @@ var layersMap = {
 };
 layersMap[MARKER] = MarkerLayer;
 
-function renderPos(pos) {
-    var result = [];
-
-    if (pos) {
-        var parts = toHyphens(pos).split("-");
-
-        for (var i = 0; i < parts.length; i++) {
-            result.push("k-pos-" + parts[i]);
-        }
-    }
-
-    return result.join(" ");
-}
-
 var Map = (function (Observable) {
     function Map(element, options, themeOptions, context) {
         if ( options === void 0 ) options = {};

package/dist/es/map/utils.js

@@ -445,4 +445,18 @@ export var now = function () {
 
 export var noop = function () {};
 
+export var renderPos = function (pos) {
+    var result = [];
+
+    if (pos) {
+        var parts = toHyphens(pos).split("-");
+
+        for (var i = 0; i < parts.length; i++) {
+            result.push("k-pos-" + parts[i]);
+        }
+    }
+
+    return result.join(" ");
+};
+
 /* eslint-enable arrow-body-style */

package/dist/es/services/template-service.js

@@ -10,8 +10,8 @@ TemplateService.register = function register (userImplementation) {
     current = userImplementation;
 };
 
-TemplateService.compile = function compile (template) {
-    return current.compile(template);
+TemplateService.compile = function compile (template, options) {
+    return current.compile(template, options);
 };
 
 export default TemplateService;

package/dist/es/stock/stock-chart.js

@@ -189,7 +189,10 @@ setDefaultOptions(StockChart, {
                 visible: false
             },
             tooltip: {
-                visible: true
+                visible: false
+            },
+            highlight: {
+                visible: false
             },
             line: {
                 width: 2
@@ -206,4 +209,4 @@ setDefaultOptions(StockChart, {
     }
 });
 
-export default StockChart;
+export default StockChart;

package/dist/es2015/chart/constants.js

@@ -92,7 +92,7 @@ const INSIDE_END = "insideEnd";
 const INSIDE_BASE = "insideBase";
 const OUTSIDE_END = "outsideEnd";
 
-const MOUSEWHEEL = "DOMMouseScroll mousewheel";
+const MOUSEWHEEL = "wheel";
 const MOUSEWHEEL_DELAY = 150;
 const MOUSEWHEEL_ZOOM_RATE = 0.3;
 

package/dist/es2015/chart/selection.js

@@ -5,16 +5,16 @@ import { DateCategoryAxis, Point } from '../core';
 import { MOUSEWHEEL_DELAY, MOUSEWHEEL, SELECT_START, SELECT, SELECT_END } from './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 { addClass, Class, removeClass, eventCoordinates, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
 const ZOOM_ACCELERATION = 3;
 const SELECTOR_HEIGHT_ADJUST = 0.1;
 
-function createDiv(className) {
+function createDiv(classNames) {
     const element = document.createElement("div");
-    if (className) {
-        element.className = className;
+    if (classNames) {
+        element.className = classNames;
     }
 
     return element;
@@ -61,7 +61,7 @@ class Selection extends Class {
 
     createElements() {
         const options = this.options;
-        const wrapper = this.wrapper = createDiv("k-selector");
+        const wrapper = this.wrapper = createDiv("k-selector k-pointer-events-none");
         elementStyles(wrapper, {
             top: options.offset.top,
             left: options.offset.left,
@@ -69,18 +69,21 @@ class Selection extends Class {
             height: options.height,
             direction: 'ltr'
         });
-        const selection = this.selection = createDiv("k-selection");
-        this.leftMask = createDiv("k-mask");
-        this.rightMask = createDiv("k-mask");
+
+        const selection = this.selection = createDiv("k-selection k-pointer-events-none");
+
+        this.leftMask = createDiv("k-mask k-pointer-events-none");
+        this.rightMask = createDiv("k-mask k-pointer-events-none");
 
         wrapper.appendChild(this.leftMask);
         wrapper.appendChild(this.rightMask);
         wrapper.appendChild(selection);
 
-        selection.appendChild(createDiv("k-selection-bg"));
+        const body = this.body = createDiv("k-selection-bg k-pointer-events-none");
+        selection.appendChild(body);
 
-        const leftHandle = this.leftHandle = createDiv("k-handle k-left-handle");
-        const rightHandle = this.rightHandle = createDiv("k-handle k-right-handle");
+        const leftHandle = this.leftHandle = createDiv("k-handle k-left-handle k-pointer-events-auto");
+        const rightHandle = this.rightHandle = createDiv("k-handle k-right-handle k-pointer-events-auto");
         leftHandle.appendChild(createDiv());
         rightHandle.appendChild(createDiv());
 
@@ -113,12 +116,12 @@ class Selection extends Class {
     bindEvents() {
         if (this.options.mousewheel !== false) {
             this._mousewheelHandler = this._mousewheel.bind(this);
-            bindEvents(this.wrapper, {
+            bindEvents(this.chartElement, {
                 [ MOUSEWHEEL ]: this._mousewheelHandler
             });
         }
 
-        this._domEvents = DomEventsBuilder.create(this.wrapper, {
+        this._domEvents = DomEventsBuilder.create(this.chartElement, {
             stopPropagation: true, // applicable for the jQuery UserEvents
             start: this._start.bind(this),
             move: this._move.bind(this),
@@ -174,11 +177,12 @@ class Selection extends Class {
 
         if (this.wrapper) {
             if (this._mousewheelHandler) {
-                unbindEvents(this.wrapper, {
+                unbindEvents(this.chartElement, {
                     [ MOUSEWHEEL ]: this._mousewheelHandler
                 });
                 this._mousewheelHandler = null;
             }
+
             this.chartElement.removeChild(this.wrapper);
             this.wrapper = null;
         }
@@ -193,18 +197,35 @@ class Selection extends Class {
         };
     }
 
+    _pointInPane(x, y) {
+        const paneBox = this.categoryAxis.pane.box;
+        const modelCoords = this.chart._toModelCoordinates(x, y);
+        return paneBox.containsPoint(modelCoords);
+    }
+
     _start(e) {
         const options = this.options;
         const target = eventElement(e);
-
         if (this._state || !target) {
             return;
         }
 
+        const coords = eventCoordinates(e);
+        const inPane = this._pointInPane(coords.x, coords.y);
+        if (!inPane) {
+            return;
+        }
+
+        const handle = closestHandle(target);
+        const bodyRect = this.body.getBoundingClientRect();
+        const inBody = !handle && coords.x >= bodyRect.x && coords.x <= bodyRect.x + bodyRect.width &&
+                       coords.y >= bodyRect.y && coords.y <= bodyRect.y + bodyRect.height;
+
         this.chart._unsetActivePoint();
         this._state = {
-            moveTarget: closestHandle(target) || target,
+            moveTarget: handle,
             startLocation: e.x ? e.x.location : 0,
+            inBody,
             range: {
                 from: this._index(options.from),
                 to: this._index(options.to)
@@ -251,14 +272,14 @@ class Selection extends Class {
         const scale = elementStyles(this.wrapper, "width").width / (categoryAxis.categoriesCount() - 1);
         const offset = Math.round(delta / scale) * (reverse ? -1 : 1);
 
-        if (!target) {
+        if (!target && !state.inBody) {
             return;
         }
 
-        const leftHandle = hasClasses(target, "k-left-handle");
-        const rightHandle = hasClasses(target, "k-right-handle");
+        const leftHandle = target && hasClasses(target, "k-left-handle");
+        const rightHandle = target && hasClasses(target, "k-right-handle");
 
-        if (hasClasses(target, "k-selection k-selection-bg")) {
+        if (state.inBody) {
             range.from = Math.min(
                 Math.max(min, from - offset),
                 max - span
@@ -335,6 +356,7 @@ class Selection extends Class {
         range.to = Math.min(range.from + span, max);
 
         this._start(e);
+
         if (this._state) {
             this._state.range = range;
             this.trigger(SELECT, this._rangeEventArgs(range));
@@ -345,7 +367,7 @@ class Selection extends Class {
     _mousewheel(e) {
         let delta = mousewheelDelta(e);
 
-        this._start({ target: this.selection });
+        this._start(e);
 
         if (this._state) {
             const range = this._state.range;
@@ -383,6 +405,12 @@ class Selection extends Class {
 
     _gesturestart(e) {
         const options = this.options;
+        const touch = e.touches[0];
+        const inPane = this._pointInPane(touch.pageX, touch.pageY);
+
+        if (!inPane) {
+            return;
+        }
 
         this._state = {
             range: {
@@ -407,6 +435,10 @@ class Selection extends Class {
     }
 
     _gesturechange(e) {
+        if (!this._state) {
+            return;
+        }
+
         const { chart, _state: state, options, categoryAxis } = this;
         const range = state.range;
         const p0 = chart._toModelCoordinates(e.touches[0].x.location).x;

package/dist/es2015/common/has-classes.js

@@ -2,9 +2,9 @@ export default function hasClasses(element, classNames) {
     if (element.className) {
         const names = classNames.split(" ");
         for (let idx = 0; idx < names.length; idx++) {
-            if (element.className.indexOf(names[idx]) !== -1) {
+            if (element.className.indexOf && element.className.indexOf(names[idx]) !== -1) {
                 return true;
             }
         }
     }
-}
+}

package/dist/es2015/map/layers/marker.js

@@ -9,21 +9,23 @@ import {
 
 import { Layer } from './layer';
 import { Location } from '../location';
-
 import {
     proxy,
     on,
     off,
     toHyphens,
-    toPixels
+    toPixels,
+    convertToHtml
 } from '../utils';
+import TemplateService from '../../services/template-service';
 
 const CLICK = "click";
 const MOUSE_ENTER = "mouseenter";
 const MOUSE_LEAVE = "mouseleave";
 
 const extend = Object.assign;
-const MARKER_CLASS = ".k-marker";
+const MARKER_CLASS_NAME = "k-marker";
+const MARKER_CLASS = "." + MARKER_CLASS_NAME;
 
 export class MarkerLayer extends Layer {
     constructor(map, options) {
@@ -141,11 +143,9 @@ export class MarkerLayer extends Layer {
     }
 
     _markerClick(e) {
-        const marker = e.target._kendoNode;
+        const marker = e.currentTarget._kendoNode;
 
         let args = {
-            // marker: $(e.target).data('kendoMarker'),
-            // marker: e.target.getAttribute("data-kendoMarker"),
             layer: this,
             layerIndex: this._layerIndex(),
             marker: marker,
@@ -184,7 +184,8 @@ setDefaultOptions(MarkerLayer, {
     zIndex: 1000,
     autoBind: true,
     locationField: 'location',
-    titleField: 'title'
+    titleField: 'title',
+    template: ""
 });
 
 export class Marker extends Class {
@@ -258,9 +259,17 @@ export class Marker extends Class {
         if (!this.element) {
             let options = this.options;
             let layer = this.layer;
-
-            const element = document.createElement('span');
-            addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            let element = document.createElement('span');
+            addClass(element, MARKER_CLASS_NAME);
+
+            if (this.options.template) {
+                const templateFn = this._compileTemplate(this.options.template);
+                const templateHtml = templateFn(this.dataItem);
+                const templateElement = convertToHtml(templateHtml);
+                element.appendChild(templateElement);
+            } else {
+                addClass(element, 'k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+            }
 
             if (options.title) {
                 element.setAttribute("title", options.title);
@@ -319,6 +328,13 @@ export class Marker extends Class {
         return args;
     }
 
+    _compileTemplate(template) {
+        return TemplateService.compile(template, {
+            paramName: "dataItem",
+            useWithBlock: false
+        });
+    }
+
     static create(arg, defaults) {
         if (arg instanceof Marker) {
             return arg;