@progress/kendo-charts 1.21.0 → 1.23.0-dev.202201120958

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

@@ -0,0 +1,167 @@
+import {
+    geometry as g,
+    drawing as d
+} from '@progress/kendo-drawing';
+
+import {
+    Class,
+    defined,
+    isFunction,
+    getter,
+    setDefaultOptions
+} from '../../common';
+
+import {
+    ShapeLayer
+} from './shape';
+
+import {
+    Location
+} from '../location';
+
+export class BubbleLayer extends ShapeLayer {
+    _readData() {
+        const data = this.options.data || [];
+        return data;
+    }
+
+    _load(data) {
+        this._data = data;
+        this.surface.clear();
+
+        if (data.length === 0) {
+            return;
+        }
+
+        let options = this.options;
+        let getValue = getter(options.valueField);
+
+        let newData = data.slice(0);
+        newData.sort(function(a, b) {
+            return getValue(b) - getValue(a);
+        });
+
+        let scaleType = this._scaleType();
+        let scale;
+        let getLocation = getter(this.options.locationField);
+
+        for (let i = 0; i < newData.length; i++) {
+            let dataItem = newData[i];
+            let location = getLocation(dataItem);
+            let value = getValue(dataItem);
+
+            if (defined(location) && defined(value)) {
+                if (!scale) {
+                    scale = new scaleType([
+                        0,
+                        value
+                    ], [
+                        options.minSize,
+                        options.maxSize
+                    ]);
+                }
+
+                location = Location.create(location);
+
+                let center = this.map.locationToView(location);
+                let size = scale.map(value);
+                let symbol = this._createSymbol({
+                    center: center,
+                    size: size,
+                    style: options.style,
+                    dataItem: dataItem,
+                    location: location
+                });
+
+                symbol.dataItem = dataItem;
+                symbol.location = location;
+                symbol.value = value;
+
+                this._drawSymbol(symbol);
+            }
+        }
+    }
+
+    _scaleType() {
+        let scale = this.options.scale;
+
+        if (isFunction(scale)) {
+            return scale;
+        }
+
+        return Scales[scale];
+    }
+
+    _createSymbol(args) {
+        let symbol = this.options.symbol;
+
+        if (!isFunction(symbol)) {
+            symbol = Symbols[symbol];
+        }
+
+        return symbol(args);
+    }
+
+    _drawSymbol(shape) {
+        let args = {
+            layer: this,
+            shape: shape
+        };
+
+        let cancelled = this.map.trigger('shapeCreated', args);
+
+        if (!cancelled) {
+            this.surface.draw(shape);
+        }
+    }
+}
+
+setDefaultOptions(BubbleLayer, {
+    // autoBind: true,
+    locationField: 'location',
+    valueField: 'value',
+    minSize: 0,
+    maxSize: 100,
+    scale: 'sqrt',
+    symbol: 'circle',
+    // ensure bubble layers are displayed over tile and shape layers
+    zIndex: 200
+});
+
+class SqrtScale extends Class {
+    constructor(domain, range) {
+        super();
+
+        this._domain = domain;
+        this._range = range;
+
+        let domainRange = Math.sqrt(domain[1]) - Math.sqrt(domain[0]);
+        let outputRange = range[1] - range[0];
+
+        this._ratio = outputRange / domainRange;
+    }
+
+    map(value) {
+        let rel = (Math.sqrt(value) - Math.sqrt(this._domain[0])) * this._ratio;
+        return this._range[0] + rel;
+    }
+}
+
+let Scales = {
+    sqrt: SqrtScale
+};
+
+let Symbols = {
+    circle: function(args) {
+        let geo = new g.Circle(args.center, args.size / 2);
+        return new d.Circle(geo, args.style);
+    },
+
+    square: function(args) {
+        let path = new d.Path(args.style);
+        let halfSize = args.size / 2;
+        let center = args.center;
+        path.moveTo(center.x - halfSize, center.y - halfSize).lineTo(center.x + halfSize, center.y - halfSize).lineTo(center.x + halfSize, center.y + halfSize).lineTo(center.x - halfSize, center.y + halfSize).close();
+        return path;
+    }
+};

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

@@ -0,0 +1,134 @@
+import {
+    Class,
+    addClass,
+    deepExtend,
+    defined
+} from '../../common';
+
+import {
+    Extent
+} from './../extent';
+
+import {
+    getSupportedFeatures
+} from '../utils';
+
+export class Layer extends Class {
+    constructor(map, options) {
+        super();
+
+        this.support = getSupportedFeatures();
+
+        this._initOptions(options);
+        this.map = map;
+
+        let element = document.createElement("div");
+        addClass(element, "k-layer");
+        element.style.zIndex = this.options.zIndex;
+        element.style.opacity = this.options.opacity;
+
+        this.element = element;
+
+        map.scrollElement.appendChild(this.element);
+
+        this._beforeReset = this._beforeReset.bind(this);
+        this._reset = this._reset.bind(this);
+        this._resize = this._resize.bind(this);
+        this._panEnd = this._panEnd.bind(this);
+
+        this._activate();
+        this._updateAttribution();
+    }
+
+    destroy() {
+        this._deactivate();
+    }
+
+    _initOptions(options) {
+        this.options = deepExtend({}, this.options, options);
+    }
+
+    show() {
+        this.reset();
+        this._activate();
+        this._applyExtent(true);
+    }
+
+    hide() {
+        this._deactivate();
+        this._setVisibility(false);
+    }
+
+    reset() {
+        this._beforeReset();
+        this._reset();
+    }
+
+    _reset() {
+        this._applyExtent();
+    }
+
+    _beforeReset() {
+
+    }
+
+    _resize() {
+
+    }
+
+    _panEnd() {
+        this._applyExtent();
+    }
+
+    _applyExtent() {
+        let options = this.options;
+        let zoom = this.map.zoom();
+        let matchMinZoom = !defined(options.minZoom) || zoom >= options.minZoom;
+        let matchMaxZoom = !defined(options.maxZoom) || zoom <= options.maxZoom;
+        let extent = Extent.create(options.extent);
+        let inside = !extent || extent.overlaps(this.map.extent());
+
+        this._setVisibility(matchMinZoom && matchMaxZoom && inside);
+    }
+
+    _setVisibility(visible) {
+        this.element.style.display = visible ? '' : 'none';
+    }
+
+    _activate() {
+        let map = this.map;
+
+        this._deactivate();
+
+        map.bind('beforeReset', this._beforeReset);
+        map.bind('reset', this._reset);
+        map.bind('resize', this._resize);
+        map.bind('panEnd', this._panEnd);
+    }
+
+    _deactivate() {
+        let map = this.map;
+
+        map.unbind('beforeReset', this._beforeReset);
+        map.unbind('reset', this._reset);
+        map.unbind('resize', this._resize);
+        map.unbind('panEnd', this._panEnd);
+    }
+
+    _updateAttribution() {
+        const attribution = this.map.attribution;
+
+        if (attribution) {
+            attribution.add(this.options.attribution);
+        }
+    }
+
+    _readData() {
+        const data = this.options.data || [];
+        return data;
+    }
+
+    _hasData() {
+        return this._data && this._data.length > 0;
+    }
+}

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

@@ -0,0 +1,328 @@
+import {
+    Class,
+    addClass,
+    isArray,
+    getter,
+    deepExtend,
+    setDefaultOptions
+} from '../../common';
+
+import { Layer } from './layer';
+import { Location } from '../location';
+
+import {
+    proxy,
+    on,
+    off,
+    toHyphens,
+    toPixels
+} from '../utils';
+
+const CLICK = "click";
+const MOUSE_ENTER = "mouseenter";
+const MOUSE_LEAVE = "mouseleave";
+
+const extend = Object.assign;
+const MARKER_CLASS = ".k-marker";
+
+const doc = document;
+const math = Math;
+
+export class MarkerLayer extends Layer {
+    constructor(map, options) {
+        super(map, options);
+
+        this._markerClickHandler = proxy(this._markerClick, this);
+        on(this.element, CLICK, MARKER_CLASS, this._markerClickHandler);
+
+        this.items = [];
+
+        this._load(this._readData());
+    }
+
+    destroy() {
+        super.destroy();
+        off(this.element, CLICK, this._markerClickHandler);
+        this.clear();
+    }
+
+    add(args) {
+        if (isArray(args)) {
+            for (let i = 0; i < args.length; i++) {
+                this._addOne(args[i]);
+            }
+        } else {
+            return this._addOne(args);
+        }
+    }
+
+    remove(marker) {
+        marker.destroy();
+        let index = (this.items || []).indexOf(marker);
+
+        if (index > -1) {
+            this.items.splice(index, 1);
+        }
+    }
+
+    clear() {
+        for (let i = 0; i < this.items.length; i++) {
+            this.items[i].destroy();
+        }
+
+        this.items = [];
+    }
+
+    update(marker) {
+        let location = marker.location();
+
+        if (location) {
+            marker.showAt(this.map.locationToView(location));
+
+            let args = {
+                marker: marker,
+                layer: this
+            };
+
+            this.map.trigger('markerActivate', args);
+        }
+    }
+
+    _reset() {
+        super._reset();
+
+        let items = this.items;
+
+        for (let i = 0; i < items.length; i++) {
+            this.update(items[i]);
+        }
+    }
+
+    bind(options, dataItem) {
+        let marker = Marker.create(options, this.options);
+        marker.dataItem = dataItem;
+
+        let args = {
+            marker: marker,
+            layer: this
+        };
+
+        let cancelled = this.map.trigger('markerCreated', args);
+
+        if (!cancelled) {
+            this.add(marker);
+            return marker;
+        }
+    }
+
+    _addOne(arg) {
+        let marker = Marker.create(arg, this.options);
+        marker.addTo(this);
+        return marker;
+    }
+
+    _readData() {
+        const data = this.options.data || [];
+        return data;
+    }
+
+    _load(data) {
+        this._data = data;
+        this.clear();
+
+        let getLocation = getter(this.options.locationField);
+        let getTitle = getter(this.options.titleField);
+
+        for (let i = 0; i < data.length; i++) {
+            let dataItem = data[i];
+
+            this.bind({
+                location: getLocation(dataItem),
+                title: getTitle(dataItem)
+            }, dataItem);
+        }
+    }
+
+    _markerClick(e) {
+        const layers = this.map.layers || [];
+        const marker = e.target._kendoNode;
+
+        let args = {
+            // marker: $(e.target).data('kendoMarker'),
+            // marker: e.target.getAttribute("data-kendoMarker"),
+            layer: this,
+            layerIndex: layers.indexOf(this),
+            marker: marker,
+            markerIndex: (this.items || []).indexOf(marker),
+            originalEvent: e
+        };
+
+        this.map.trigger('markerClick', args);
+    }
+
+    _markerMouseEnter(e) {
+        const args = this._createMarkerEventArgs(e);
+        this.map.trigger("markerMouseEnter", args);
+    }
+
+    _markerMouseLeave(e) {
+        const args = this._createMarkerEventArgs(e);
+        this.map.trigger("markerMouseLeave", args);
+    }
+
+    _createMarkerEventArgs(e) {
+        const marker = e.marker;
+
+        let args = extend({}, {
+            layer: this,
+            layerIndex: this.map.layers.indexOf(this),
+            marker: marker,
+            markerIndex: (this.items || []).indexOf(marker)
+        }, e);
+
+        return args;
+    }
+}
+
+setDefaultOptions(MarkerLayer, {
+    zIndex: 1000,
+    autoBind: true,
+    dataSource: {},
+    locationField: 'location',
+    titleField: 'title'
+});
+
+export class Marker extends Class {
+    constructor(options) {
+        super();
+        this.options = options || {};
+    }
+
+    destroy() {
+        this.layer = null;
+        this.unbindEvents();
+        this.hide();
+    }
+
+    addTo(parent) {
+        this.layer = parent.markers || parent;
+        this.layer.items.push(this);
+        this.layer.update(this);
+    }
+
+    location(value) {
+        if (value) {
+            this.options.location = Location.create(value).toArray();
+
+            if (this.layer) {
+                this.layer.update(this);
+            }
+
+            return this;
+        }
+
+        return Location.create(this.options.location);
+    }
+
+    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();
+        }
+    }
+
+    hide() {
+        if (this.element) {
+            this.element.remove();
+            this.element = null;
+        }
+        if (this.tooltip) {
+            this.tooltip.destroy();
+            this.tooltip = null;
+        }
+    }
+
+    bindEvents() {
+        if (!this.element) {
+            return;
+        }
+
+        this._mouseEnterHandler = proxy(this._mouseEnter, this);
+        on(this.element, MOUSE_ENTER, MARKER_CLASS, this._mouseEnterHandler);
+        this._mouseLeaveHandler = proxy(this._mouseLeave, this);
+        on(this.element, MOUSE_LEAVE, MARKER_CLASS, this._mouseLeaveHandler);
+    }
+
+    unbindEvents() {
+        if (!this.element) {
+            return;
+        }
+
+        off(this.element, MOUSE_ENTER, this._mouseEnterHandler);
+        off(this.element, MOUSE_LEAVE, this._mouseLeaveHandler);
+    }
+
+    render() {
+        if (!this.element) {
+            let options = this.options;
+            let layer = this.layer;
+
+            const element = doc.createElement('span');
+            addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+
+            element.setAttribute("title", options.title);
+
+            const attributes = options.attributes || {};
+            Object.keys(attributes).forEach(function(key) {
+                element.setAttributett(key, attributes[key]);
+            });
+
+            element._kendoNode = this;
+            element.style.zIndex = options.zIndex;
+
+            this.element = element;
+
+            if (layer) {
+                layer.element.appendChild(this.element);
+            }
+
+            this.bindEvents();
+
+            this.renderTooltip();
+        }
+    }
+
+    _mouseEnter(e) {
+        const args = this._createEventArgs(e);
+        this.layer._markerMouseEnter(args);
+    }
+
+    _mouseLeave(e) {
+        const args = this._createEventArgs(e);
+        this.layer._markerMouseLeave(args);
+    }
+
+    _createEventArgs(e) {
+        let args = {
+            marker: this,
+            originalEvent: e
+        };
+
+        return args;
+    }
+
+    renderTooltip() {
+    }
+
+    static create(arg, defaults) {
+        if (arg instanceof Marker) {
+            return arg;
+        }
+
+        return new Marker(deepExtend({}, defaults, arg));
+    }
+}