@progress/kendo-charts 1.23.6 → 1.24.0-dev.202205250919

package/dist/es/map/constants.js

@@ -0,0 +1,2 @@
+export var SHOW_TOOLTIP = 'showTooltip';
+export var HIDE_TOOLTIP = 'hideTooltip';

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

@@ -125,6 +125,26 @@ export var BubbleLayer = (function (ShapeLayer) {
         }
     };
 
+    BubbleLayer.prototype._tooltipContext = function _tooltipContext (shape) {
+        return {
+            type: 'bubble',
+            className: 'k-map-bubble-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location,
+            value: shape.value
+        };
+    };
+
+    BubbleLayer.prototype._tooltipAnchor = function _tooltipAnchor (e) {
+        var shape = e.element;
+        var center = shape.bbox().center();
+
+        return {
+            top: center.y,
+            left: center.x
+        };
+    };
+
     return BubbleLayer;
 }(ShapeLayer));
 

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

@@ -241,12 +241,9 @@ export var Marker = (function (Class) {
     Marker.prototype.showAt = function showAt (point) {
         this.render();
 
-        this.element.style.left = toPixels(Math.round(point.x));
-        this.element.style.top = toPixels(Math.round(point.y));
-
-        if (this.tooltip && this.tooltip.popup) {
-            this.tooltip.popup._position();
-        }
+        this._anchor = { left: Math.round(point.x), top: Math.round(point.y) };
+        this.element.style.left = toPixels(this._anchor.left);
+        this.element.style.top = toPixels(this._anchor.top);
     };
 
     Marker.prototype.hide = function hide () {
@@ -254,10 +251,6 @@ export var Marker = (function (Class) {
             this.element.remove();
             this.element = null;
         }
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
     };
 
     Marker.prototype.bindEvents = function bindEvents () {
@@ -292,7 +285,7 @@ export var Marker = (function (Class) {
 
             var attributes = options.attributes || {};
             Object.keys(attributes).forEach(function(key) {
-                element.setAttributett(key, attributes[key]);
+                element.setAttribute(key, attributes[key]);
             });
 
             element._kendoNode = this;
@@ -305,14 +298,26 @@ export var Marker = (function (Class) {
             }
 
             this.bindEvents();
-
-            this.renderTooltip();
         }
     };
 
     Marker.prototype._mouseEnter = function _mouseEnter (e) {
         var args = this._createEventArgs(e);
         this.layer._markerMouseEnter(args);
+
+        this.layer.map._tooltip.show({
+            top: this._anchor.top - this.element.offsetHeight,
+            left: this._anchor.left
+        }, this._tooltipContext());
+    };
+
+    Marker.prototype._tooltipContext = function _tooltipContext () {
+        return {
+            type: 'marker',
+            className: 'k-map-marker-tooltip',
+            title: this.options.title,
+            location: this.location()
+        };
     };
 
     Marker.prototype._mouseLeave = function _mouseLeave (e) {
@@ -329,9 +334,6 @@ export var Marker = (function (Class) {
         return args;
     };
 
-    Marker.prototype.renderTooltip = function renderTooltip () {
-    };
-
     Marker.create = function create (arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

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

@@ -45,10 +45,9 @@ export var ShapeLayer = (function (Layer) {
 
         this._click = this._handler('shapeClick');
         this.surface.bind('click', this._click);
-        this._mouseenter = this._handler('shapeMouseEnter');
-        this.surface.bind('mouseenter', this._mouseenter);
         this._mouseleave = this._handler('shapeMouseLeave');
         this.surface.bind('mouseleave', this._mouseleave);
+        this.surface.bind('mouseenter', this._mouseenter.bind(this));
     }
 
     if ( Layer ) ShapeLayer.__proto__ = Layer;
@@ -202,24 +201,55 @@ export var ShapeLayer = (function (Layer) {
         }
     };
 
-    ShapeLayer.prototype._handler = function _handler (event) {
-        var layer = this;
+    ShapeLayer.prototype._eventArgs = function _eventArgs (e) {
+        return {
+            layer: this,
+            layerIndex: (this.map.layers || []).indexOf(this),
+            shape: e.element,
+            shapeIndex: (this._data || []).indexOf(e.element.dataItem),
+            originalEvent: e.originalEvent
+        };
+    };
+
+    ShapeLayer.prototype._handler = function _handler (eventName) {
+        var this$1 = this;
 
-        return function(e) {
+        return function (e) {
             if (e.element) {
-                var args = {
-                    layer: layer,
-                    layerIndex: (layer.map.layers || []).indexOf(layer),
-                    shape: e.element,
-                    shapeIndex: (layer._data || []).indexOf(e.element.dataItem),
-                    originalEvent: e.originalEvent
-                };
-
-                layer.map.trigger(event, args);
+                this$1.map.trigger(eventName, this$1._eventArgs(e));
             }
         };
     };
 
+    ShapeLayer.prototype._mouseenter = function _mouseenter (e) {
+        if (!e.element) {
+            return;
+        }
+
+        this.map.trigger('shapeMouseEnter', this._eventArgs(e));
+
+        var shape = e.element;
+        var anchor = this._tooltipAnchor(e);
+        this.map._tooltip.show(anchor, this._tooltipContext(shape));
+    };
+
+    ShapeLayer.prototype._tooltipContext = function _tooltipContext (shape) {
+        return {
+            type: 'shape',
+            className: 'k-map-shape-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location
+        };
+    };
+
+    ShapeLayer.prototype._tooltipAnchor = function _tooltipAnchor (e) {
+        var cursor = this.map.eventOffset(e.originalEvent);
+        return {
+            top: cursor.y,
+            left: cursor.x
+        };
+    };
+
     ShapeLayer.prototype._activate = function _activate () {
         Layer.prototype._activate.call(this);
         this._panHandler = proxy(this._pan, this);
@@ -350,6 +380,7 @@ var GeoJsonLoader = (function (Class) {
     GeoJsonLoader.prototype._loadPolygon = function _loadPolygon (container, rings, dataItem) {
         var shape = this._buildPolygon(rings);
         shape.dataItem = dataItem;
+        shape.location = this.locator.viewToLocation(shape.bbox().center());
         return this._loadShape(container, shape);
     };
 

package/dist/es/map/map.js

@@ -11,7 +11,8 @@ import {
     limitValue,
     deepExtend,
     elementOffset,
-    isArray
+    isArray,
+    round
 } from '../common';
 
 import {
@@ -38,6 +39,8 @@ import {
     Extent
 } from './extent';
 
+import { Tooltip } from './tooltip/tooltip';
+
 import {
     TileLayer
 } from './layers/tile';
@@ -117,7 +120,6 @@ var Map = (function (Observable) {
 
         Observable.call(this);
 
-
         this._init(element, options, themeOptions, context);
     }
 
@@ -130,6 +132,10 @@ var Map = (function (Observable) {
 
         this.scroller.destroy();
 
+        if (this._tooltip) {
+            this._tooltip.destroy();
+        }
+
         if (this.navigator) {
             this.navigator.destroy();
         }
@@ -176,6 +182,7 @@ var Map = (function (Observable) {
 
         this._viewOrigin = this._getOrigin();
 
+        this._tooltip = this._createTooltip();
         this._initScroller();
         this._initMarkers();
         this._initControls();
@@ -637,6 +644,10 @@ var Map = (function (Observable) {
         return layer;
     };
 
+    Map.prototype._createTooltip = function _createTooltip () {
+        return new Tooltip(this.widgetService, this.options.tooltip);
+    };
+
     /* eslint-disable arrow-body-style */
     Map.prototype._initMarkers = function _initMarkers () {
         var markerLayers = (this.options.layers || []).filter(function (x) {
@@ -663,6 +674,9 @@ var Map = (function (Observable) {
         origin.y += offset.y;
         this._scrollOffset = offset;
 
+        this._tooltip.offset = offset;
+        this._tooltip.hide();
+
         this._setOrigin(this.layerToLocation(origin));
 
         this.trigger('pan', {
@@ -732,6 +746,7 @@ var Map = (function (Observable) {
         this._viewOrigin = this._getOrigin(true);
 
         this._resetScroller();
+        this._tooltip.hide();
 
         this.trigger('beforeReset');
         this.trigger('reset');
@@ -803,6 +818,7 @@ var Map = (function (Observable) {
         }
 
         var cursor = this.eventOffset(e);
+        this._tooltip.hide();
 
         this.trigger('click', {
             originalEvent: e,
@@ -853,6 +869,15 @@ var Map = (function (Observable) {
         }
     };
 
+    Map.prototype._toDocumentCoordinates = function _toDocumentCoordinates (point) {
+        var offset = elementOffset(this.element);
+
+        return {
+            left: round(point.x + offset.left),
+            top: round(point.y + offset.top)
+        };
+    };
+
     return Map;
 }(Observable));
 

package/dist/es/map/tooltip/tooltip.js

@@ -0,0 +1,73 @@
+import { Class, deepExtend, setDefaultOptions } from '../../common';
+import { SHOW_TOOLTIP, HIDE_TOOLTIP } from '../constants';
+
+export var Tooltip = (function (Class) {
+    function Tooltip(widgetService, options) {
+        Class.call(this);
+
+        this.widgetService = widgetService;
+        this.options = deepExtend({}, this.options, options);
+        this.offset = { x: 0, y: 0 };
+    }
+
+    if ( Class ) Tooltip.__proto__ = Class;
+    Tooltip.prototype = Object.create( Class && Class.prototype );
+    Tooltip.prototype.constructor = Tooltip;
+
+    var prototypeAccessors = { anchor: { configurable: true } };
+
+    Tooltip.prototype.show = function show (anchor, args) {
+        if (this.location === args.location) {
+            return;
+        }
+
+        this.anchor = anchor;
+        this.location = args.location;
+
+        this.widgetService.notify(SHOW_TOOLTIP,
+            Object.assign({ anchor: this.anchor }, args)
+        );
+
+        this.visible = true;
+    };
+
+    Tooltip.prototype.hide = function hide () {
+        if (this.widgetService) {
+            this.widgetService.notify(HIDE_TOOLTIP);
+        }
+
+        this.visible = false;
+        this.location = null;
+    };
+
+    prototypeAccessors.anchor.get = function () {
+        return this._anchor;
+    };
+
+    prototypeAccessors.anchor.set = function (anchor) {
+        var documentPoint = this.widgetService.widget._toDocumentCoordinates({
+            x: anchor.left - this.offset.x,
+            y: anchor.top - this.offset.y
+        });
+
+        this._anchor = {
+            left: documentPoint.left,
+            top: documentPoint.top
+        };
+    };
+
+    Tooltip.prototype.destroy = function destroy () {
+        this.widgetService = null;
+    };
+
+    Object.defineProperties( Tooltip.prototype, prototypeAccessors );
+
+    return Tooltip;
+}(Class));
+
+setDefaultOptions(Tooltip, {
+    border: {
+        width: 1
+    },
+    opacity: 1
+});

package/dist/es2015/map/constants.js

@@ -0,0 +1,2 @@
+export const SHOW_TOOLTIP = 'showTooltip';
+export const HIDE_TOOLTIP = 'hideTooltip';

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

@@ -114,6 +114,26 @@ export class BubbleLayer extends ShapeLayer {
             this.surface.draw(shape);
         }
     }
+
+    _tooltipContext(shape) {
+        return {
+            type: 'bubble',
+            className: 'k-map-bubble-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location,
+            value: shape.value
+        };
+    }
+
+    _tooltipAnchor(e) {
+        const shape = e.element;
+        const center = shape.bbox().center();
+
+        return {
+            top: center.y,
+            left: center.x
+        };
+    }
 }
 
 setDefaultOptions(BubbleLayer, {

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

@@ -223,12 +223,9 @@ export class Marker extends Class {
     showAt(point) {
         this.render();
 
-        this.element.style.left = toPixels(Math.round(point.x));
-        this.element.style.top = toPixels(Math.round(point.y));
-
-        if (this.tooltip && this.tooltip.popup) {
-            this.tooltip.popup._position();
-        }
+        this._anchor = { left: Math.round(point.x), top: Math.round(point.y) };
+        this.element.style.left = toPixels(this._anchor.left);
+        this.element.style.top = toPixels(this._anchor.top);
     }
 
     hide() {
@@ -236,10 +233,6 @@ export class Marker extends Class {
             this.element.remove();
             this.element = null;
         }
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
     }
 
     bindEvents() {
@@ -274,7 +267,7 @@ export class Marker extends Class {
 
             const attributes = options.attributes || {};
             Object.keys(attributes).forEach(function(key) {
-                element.setAttributett(key, attributes[key]);
+                element.setAttribute(key, attributes[key]);
             });
 
             element._kendoNode = this;
@@ -287,14 +280,26 @@ export class Marker extends Class {
             }
 
             this.bindEvents();
-
-            this.renderTooltip();
         }
     }
 
     _mouseEnter(e) {
         const args = this._createEventArgs(e);
         this.layer._markerMouseEnter(args);
+
+        this.layer.map._tooltip.show({
+            top: this._anchor.top - this.element.offsetHeight,
+            left: this._anchor.left
+        }, this._tooltipContext());
+    }
+
+    _tooltipContext() {
+        return {
+            type: 'marker',
+            className: 'k-map-marker-tooltip',
+            title: this.options.title,
+            location: this.location()
+        };
     }
 
     _mouseLeave(e) {
@@ -311,9 +316,6 @@ export class Marker extends Class {
         return args;
     }
 
-    renderTooltip() {
-    }
-
     static create(arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

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

@@ -45,10 +45,9 @@ export class ShapeLayer extends Layer {
 
         this._click = this._handler('shapeClick');
         this.surface.bind('click', this._click);
-        this._mouseenter = this._handler('shapeMouseEnter');
-        this.surface.bind('mouseenter', this._mouseenter);
         this._mouseleave = this._handler('shapeMouseLeave');
         this.surface.bind('mouseleave', this._mouseleave);
+        this.surface.bind('mouseenter', this._mouseenter.bind(this));
     }
 
     destroy() {
@@ -194,24 +193,53 @@ export class ShapeLayer extends Layer {
         }
     }
 
-    _handler(event) {
-        let layer = this;
+    _eventArgs(e) {
+        return {
+            layer: this,
+            layerIndex: (this.map.layers || []).indexOf(this),
+            shape: e.element,
+            shapeIndex: (this._data || []).indexOf(e.element.dataItem),
+            originalEvent: e.originalEvent
+        };
+    }
 
-        return function(e) {
+    _handler(eventName) {
+        return (e) => {
             if (e.element) {
-                let args = {
-                    layer: layer,
-                    layerIndex: (layer.map.layers || []).indexOf(layer),
-                    shape: e.element,
-                    shapeIndex: (layer._data || []).indexOf(e.element.dataItem),
-                    originalEvent: e.originalEvent
-                };
-
-                layer.map.trigger(event, args);
+                this.map.trigger(eventName, this._eventArgs(e));
             }
         };
     }
 
+    _mouseenter(e) {
+        if (!e.element) {
+            return;
+        }
+
+        this.map.trigger('shapeMouseEnter', this._eventArgs(e));
+
+        const shape = e.element;
+        const anchor = this._tooltipAnchor(e);
+        this.map._tooltip.show(anchor, this._tooltipContext(shape));
+    }
+
+    _tooltipContext(shape) {
+        return {
+            type: 'shape',
+            className: 'k-map-shape-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location
+        };
+    }
+
+    _tooltipAnchor(e) {
+        const cursor = this.map.eventOffset(e.originalEvent);
+        return {
+            top: cursor.y,
+            left: cursor.x
+        };
+    }
+
     _activate() {
         super._activate();
         this._panHandler = proxy(this._pan, this);
@@ -334,6 +362,7 @@ class GeoJsonLoader extends Class {
     _loadPolygon(container, rings, dataItem) {
         let shape = this._buildPolygon(rings);
         shape.dataItem = dataItem;
+        shape.location = this.locator.viewToLocation(shape.bbox().center());
         return this._loadShape(container, shape);
     }
 

package/dist/es2015/map/map.js

@@ -11,7 +11,8 @@ import {
     limitValue,
     deepExtend,
     elementOffset,
-    isArray
+    isArray,
+    round
 } from '../common';
 
 import {
@@ -38,6 +39,8 @@ import {
     Extent
 } from './extent';
 
+import { Tooltip } from './tooltip/tooltip';
+
 import {
     TileLayer
 } from './layers/tile';
@@ -113,13 +116,16 @@ class Map extends Observable {
     constructor(element, options = {}, themeOptions = {}, context = {}) {
         super();
 
-
         this._init(element, options, themeOptions, context);
     }
 
     destroy() {
         this.scroller.destroy();
 
+        if (this._tooltip) {
+            this._tooltip.destroy();
+        }
+
         if (this.navigator) {
             this.navigator.destroy();
         }
@@ -162,6 +168,7 @@ class Map extends Observable {
 
         this._viewOrigin = this._getOrigin();
 
+        this._tooltip = this._createTooltip();
         this._initScroller();
         this._initMarkers();
         this._initControls();
@@ -609,6 +616,10 @@ class Map extends Observable {
         return layer;
     }
 
+    _createTooltip() {
+        return new Tooltip(this.widgetService, this.options.tooltip);
+    }
+
     /* eslint-disable arrow-body-style */
     _initMarkers() {
         const markerLayers = (this.options.layers || []).filter(x => {
@@ -635,6 +646,9 @@ class Map extends Observable {
         origin.y += offset.y;
         this._scrollOffset = offset;
 
+        this._tooltip.offset = offset;
+        this._tooltip.hide();
+
         this._setOrigin(this.layerToLocation(origin));
 
         this.trigger('pan', {
@@ -704,6 +718,7 @@ class Map extends Observable {
         this._viewOrigin = this._getOrigin(true);
 
         this._resetScroller();
+        this._tooltip.hide();
 
         this.trigger('beforeReset');
         this.trigger('reset');
@@ -775,6 +790,7 @@ class Map extends Observable {
         }
 
         let cursor = this.eventOffset(e);
+        this._tooltip.hide();
 
         this.trigger('click', {
             originalEvent: e,
@@ -824,6 +840,15 @@ class Map extends Observable {
             }
         }
     }
+
+    _toDocumentCoordinates(point) {
+        const offset = elementOffset(this.element);
+
+        return {
+            left: round(point.x + offset.left),
+            top: round(point.y + offset.top)
+        };
+    }
 }
 
 setDefaultOptions(Map, {