@progress/kendo-charts 2.7.3-develop.2 → 2.8.0-develop.2

package/dist/es2015/chart/line-chart/line-point.js

@@ -7,19 +7,22 @@ import NoteMixin from '../mixins/note-mixin';
 import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, BORDER_BRIGHTNESS, TOOLTIP_OFFSET, ABOVE, BELOW, CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 
 import { WHITE, CIRCLE, CENTER, TOP, BOTTOM, LEFT, HIGHLIGHT_ZINDEX } from '../../common/constants';
-import { deepExtend, defined, getTemplate, getAriaTemplate, valueOrDefault, getSpacing } from '../../common';
-import guid from '../../core/utils/guid';
+import { deepExtend, getTemplate, getAriaTemplate, valueOrDefault, getSpacing } from '../../common';
+import elementId from '../../core/utils/element-id';
 import unclipBox from '../utils/unclip-box';
 
 class LinePoint extends ChartElement {
     constructor(value, options) {
-        super();
+        super(options);
 
         this.value = value;
-        this.options = Object.assign({}, options);
         this.aboveAxis = valueOrDefault(this.options.aboveAxis, true);
         this.tooltipTracking = true;
-        this._id = guid();
+        this._id = elementId();
+    }
+
+    initOptions(options) {
+        this.options = Object.assign({}, options);
     }
 
     render() {
@@ -56,15 +59,13 @@ class LinePoint extends ChartElement {
 
     createLabelElement(options) {
         return new TextBox(this.getLabelText(options),
-            deepExtend({
-                align: CENTER,
+            Object.assign({}, {align: CENTER,
                 vAlign: CENTER,
-                margin: {
-                    left: 5,
-                    right: 5
-                },
-                zIndex: valueOrDefault(options.zIndex, this.series.zIndex)
-            }, options),
+                zIndex: valueOrDefault(options.zIndex, this.series.zIndex)},
+                options,
+                {margin: Object.assign({}, {left: 5,
+                    right: 5},
+                    options.margin)}),
             this.pointData()
         );
     }
@@ -95,9 +96,9 @@ class LinePoint extends ChartElement {
     markerBorder() {
         const options = this.options.markers;
         const background = options.background;
-        const border = deepExtend({ color: this.color }, options.border);
+        const border = Object.assign({}, {color: this.color}, options.border);
 
-        if (!defined(border.color)) {
+        if (border.color === undefined) {
             border.color = new Color(background).brightness(BORDER_BRIGHTNESS).toHex();
         }
 
@@ -120,9 +121,8 @@ class LinePoint extends ChartElement {
             zIndex: valueOrDefault(options.zIndex, this.series.zIndex),
             animation: options.animation,
             visual: options.visual,
-            accessibilityOptions: deepExtend({
-                ariaLabel: this.getAriaLabelText(this.options.labels)
-            }, this.options.accessibility)
+            accessibilityOptions: Object.assign({}, {ariaLabel: this.getAriaLabelText(this.options.labels)},
+                this.options.accessibility)
         }, {
             dataItem: this.dataItem,
             value: this.value,
@@ -370,7 +370,7 @@ class LinePoint extends ChartElement {
     }
 
     getIndex() {
-        return defined(this.categoryIx) ? this.categoryIx : this.pointIx;
+        return this.categoryIx !== undefined ? this.categoryIx : this.pointIx;
     }
 }
 

package/dist/es2015/chart/mixins/accessibility-attributes-mixin.js

@@ -1,14 +1,13 @@
 import addAccessibilityAttributesToVisual from "../../core/utils/add-accessibility-attributes-to-visual";
-import { deepExtend, getAriaTemplate } from "../../common";
+import { getAriaTemplate } from "../../common";
 import guid from '../../core/utils/guid';
 
 const AccessibilityAttributesMixin = {
     addAccessibilityAttributesToVisual: function() {
         this._id = this._id || guid();
 
-        const accessibilityOptions = deepExtend({
-            ariaLabel: this.getAriaLabelText()
-        }, this.options.accessibility);
+        const accessibilityOptions = Object.assign({}, {ariaLabel: this.getAriaLabelText()},
+            this.options.accessibility);
 
         addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
     },

package/dist/es2015/chart/mixins/clip-animation-mixin.js

@@ -7,13 +7,14 @@ import { defined } from '../../common';
 const ClipAnimationMixin = {
     createAnimation: function() {
         const root = this.getRoot();
-        if (root && (root.options || {}).transitions !== false) {
-            const box = root.size();
+        const transitions = ((root && root.options) || {}).transitions;
+        if (root && transitions !== false) {
+            const box = (this.parent && this.parent.clipBox) || root.size();
             const clipPath = draw.Path.fromRect(box.toRect());
+            const loading = (transitions && transitions !== true) ? transitions.loading : transitions;
             this.visual.clip(clipPath);
-            this.animation = new ClipAnimation(clipPath, {
-                box: box
-            });
+            this.animation = new ClipAnimation(clipPath, Object.assign({}, {box: box},
+                loading));
             if (anyHasZIndex(this.options.series)) {
                 this._setChildrenAnimation(clipPath);
             }

package/dist/es2015/chart/mixins/line-chart-mixin.js

@@ -2,7 +2,6 @@ import { ZERO, INTERPOLATE } from '../constants';
 
 import { Point } from '../../core';
 import { MAX_VALUE } from '../../common/constants';
-import { defined } from '../../common';
 
 const LineChartMixin = {
     renderSegments: function() {
@@ -70,7 +69,7 @@ const LineChartMixin = {
         for (let i = 0; i < allPoints.length; i++) {
             const point = allPoints[i];
 
-            if (point && defined(point.value) && point.value !== null && point.visible !== false) {
+            if (point && point.value !== undefined && point.value !== null && point.visible !== false) {
                 const pointBox = point.box;
                 const pointDistance = pointBox.center().distanceTo(target);
 

package/dist/es2015/chart/mixins/note-mixin.js

@@ -1,12 +1,11 @@
 import { Note } from '../../core';
-import { defined } from '../../common';
 
 const NoteMixin = {
     createNote: function() {
         const options = this.options.notes;
         const text = this.noteText || options.label.text;
 
-        if (options.visible !== false && defined(text) && text !== null) {
+        if (options.visible !== false && text !== undefined && text !== null) {
             this.note = new Note({
                 value: this.value,
                 text: text,

package/dist/es2015/chart/pan-and-zoom/mousewheel-zoom.js

@@ -2,7 +2,7 @@
 import toChartAxisRanges from './to-chart-axis-ranges';
 
 import { X, Y } from '../../common/constants';
-import { Class, deepExtend } from '../../common';
+import { deepExtend } from '../../common';
 import { limitValue } from '../../drawing-utils';
 
 // Limit the zoom rate between 1% and 90% per mousewheel event.
@@ -11,10 +11,8 @@ const MIN_RATE = 0.01;
 const MAX_RATE = 0.9;
 const DEFAULT_RATE = 0.3;
 
-class MousewheelZoom extends Class {
+class MousewheelZoom {
     constructor(chart, options) {
-        super();
-
         this.chart = chart;
         this.options = deepExtend({
             rate: DEFAULT_RATE

package/dist/es2015/chart/pan-and-zoom/pannable.js

@@ -2,12 +2,10 @@ import acceptKey from './accept-key';
 import toChartAxisRanges from './to-chart-axis-ranges';
 
 import { X, Y } from '../../common/constants';
-import { Class, deepExtend } from '../../common';
+import { deepExtend } from '../../common';
 
-class Pannable extends Class {
+class Pannable {
     constructor(plotArea, options) {
-        super();
-
         this.plotArea = plotArea;
         this.options = deepExtend({}, this.options, options);
     }

package/dist/es2015/chart/pan-and-zoom/zoom-selection.js

@@ -2,12 +2,10 @@ import acceptKey from './accept-key';
 import toChartAxisRanges from './to-chart-axis-ranges';
 
 import { X, Y } from '../../common/constants';
-import { Class, deepExtend, elementStyles, elementOffset, defined } from '../../common';
+import { deepExtend, elementStyles, elementOffset, defined } from '../../common';
 
-class ZoomSelection extends Class {
+class ZoomSelection {
     constructor(chart, options) {
-        super();
-
         this.chart = chart;
         this.options = deepExtend({}, this.options, options);
         this.createElement();

package/dist/es2015/chart/plotarea/categorical-plotarea.js

@@ -288,11 +288,11 @@ class CategoricalPlotArea extends PlotAreaBase {
                 category = parseDateCategory(category, srcData[idx], this.chartService.intl);
             }
 
-            if (!defined(category)) {
+            if (category === undefined) {
                 category = srcCategories[idx];
             }
 
-            if (defined(category) && category !== null) {
+            if (category !== undefined && category !== null) {
                 const categoryIx = categoryAxis.totalIndex(category);
                 result[categoryIx] = result[categoryIx] || { items: [], category: category };
                 result[categoryIx].items.push(idx);

package/dist/es2015/chart/plotarea/plotarea-factory.js

@@ -1,12 +1,8 @@
 import filterSeriesByType from '../utils/filter-series-by-type';
-import { Class } from '../../common';
 import { TRENDLINE_SERIES } from '../constants';
 
-class PlotAreaFactory extends Class {
-
+class PlotAreaFactory {
     constructor() {
-        super();
-
         this._registry = [];
     }
 

package/dist/es2015/chart/selection.js

@@ -5,7 +5,7 @@ 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, eventCoordinates, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
+import { addClass, removeClass, eventCoordinates, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
 const ZOOM_ACCELERATION = 3;
@@ -29,10 +29,8 @@ function closestHandle(element) {
     return current;
 }
 
-class Selection extends Class {
+class Selection {
     constructor(chart, categoryAxis, options, observer) {
-        super();
-
         const chartElement = chart.element;
 
         this.options = deepExtend({}, this.options, options);

package/dist/es2015/chart/series-binder.js

@@ -1,12 +1,8 @@
 import getField from './utils/get-field';
 import { VALUE } from '../common/constants';
-import { Class, defined } from '../common';
-
-class SeriesBinder extends Class {
 
+class SeriesBinder {
     constructor() {
-        super();
-
         this._valueFields = {};
         this._otherFields = {};
         this._nullValue = {};
@@ -39,7 +35,7 @@ class SeriesBinder extends Class {
 
     bindPoint(series, pointIx, item) {
         const data = series.data;
-        const pointData = defined(item) ? item : data[pointIx];
+        const pointData = item !== undefined ? item : data[pointIx];
         const result = { valueFields: { value: pointData } };
         const valueFields = this.valueFields(series);
         const otherFields = this._otherFields[series.type];
@@ -47,7 +43,7 @@ class SeriesBinder extends Class {
 
         if (pointData === null) {
             value = this._nullValue[series.type];
-        } else if (!defined(pointData)) {
+        } else if (pointData === undefined) {
             value = this._undefinedValue[series.type];
         } else if (Array.isArray(pointData)) {
             const fieldData = pointData.slice(valueFields.length);
@@ -61,7 +57,7 @@ class SeriesBinder extends Class {
             fields = this._bindFromObject(pointData, otherFields, srcPointFields);
         }
 
-        if (defined(value)) {
+        if (value !== undefined) {
             if (valueFields.length === 1) {
                 result.valueFields.value = value[valueFields[0]];
             } else {

package/dist/es2015/chart/tooltip/base-tooltip.js

@@ -1,12 +1,10 @@
 import { Color } from '@progress/kendo-drawing';
 
-import { Class, defined, deepExtend, setDefaultOptions, valueOrDefault, getSpacing, styleValue } from '../../common';
+import { defined, deepExtend, setDefaultOptions, valueOrDefault, getSpacing, styleValue } from '../../common';
 import { SHOW_TOOLTIP, HIDE_TOOLTIP } from '../constants';
 
-class BaseTooltip extends Class {
+class BaseTooltip {
     constructor(chartService, options) {
-        super();
-
         this.chartService = chartService;
         this.options = deepExtend({}, this.options, options);
     }

package/dist/es2015/common/getter.js

@@ -1,5 +1,3 @@
-import { drawing } from '@progress/kendo-drawing';
-
 const FIELD_REGEX = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
 const getterCache = {};
 
@@ -14,7 +12,7 @@ export default function getter(field) {
 
     const fields = [];
     field.replace(FIELD_REGEX, function(match, index, indexAccessor, field) {
-        fields.push(drawing.util.defined(index) ? index : (indexAccessor || field));
+        fields.push(index !== undefined ? index : (indexAccessor || field));
     });
 
     getterCache[field] = function(obj) {

package/dist/es2015/common/grep.js

@@ -1,11 +1,2 @@
-export default function grep(array, callback) {
-    const length = array.length;
-    const result = [];
-    for (let idx = 0; idx < length; idx++) {
-        if (callback(array[idx])) {
-            result .push(array[idx]);
-        }
-    }
-
-    return result;
-}
+const grep = (array, callback) => array.filter(callback);
+export default grep;

package/dist/es2015/common/in-array.js

@@ -1,5 +1,5 @@
 export default function inArray(value, array) {
     if (array) {
-        return array.indexOf(value) !== -1;
+        return array.includes(value);
     }
 }

package/dist/es2015/common/observable.js

@@ -1,5 +1,3 @@
-import { Class } from '../drawing-utils';
-
 const STRING = "string";
 const FUNCTION = "function";
 
@@ -11,9 +9,8 @@ let isDefaultPrevented = function() {
     return this._defaultPrevented === true;
 };
 
-export default class Observable extends Class {
+export default class Observable {
     constructor() {
-        super();
         this._events = {};
     }
 

package/dist/es2015/common/user-events.js

@@ -1,4 +1,3 @@
-import { Class } from '../drawing-utils';
 import { applyEventMap, eventMap } from './event-map';
 import { on, off } from './event-utils';
 import getSupportedFeatures from './get-supported-features';
@@ -83,9 +82,8 @@ function getTouches(e) {
 
     return touches;
 }
-class TouchAxis extends Class {
+class TouchAxis {
     constructor(axis, location) {
-        super();
         let that = this;
 
         that.support = getSupportedFeatures();
@@ -124,10 +122,8 @@ class TouchAxis extends Class {
     }
 }
 
-class Touch extends Class {
+class Touch {
     constructor(userEvents, target, touchInfo) {
-        super();
-
         extend(this, {
             x: new TouchAxis('X', touchInfo.location),
             y: new TouchAxis('Y', touchInfo.location),

package/dist/es2015/core/box.js

@@ -2,13 +2,11 @@ import { geometry as geom } from '@progress/kendo-drawing';
 
 import Point from './point';
 
-import { X, Y, TOP, BOTTOM, LEFT, RIGHT, CENTER, WIDTH, HEIGHT } from '../common/constants';
-import { Class, defined, getSpacing, inArray, isArray, rad } from '../common';
+import { X, Y, TOP, BOTTOM, LEFT, RIGHT, CENTER } from '../common/constants';
+import { getSpacing, isArray, rad } from '../common';
 
-class Box extends Class {
+class Box {
     constructor(x1, y1, x2, y2) {
-        super();
-
         this.x1 = x1 || 0;
         this.y1 = y1 || 0;
         this.x2 = x2 || 0;
@@ -41,12 +39,12 @@ class Box extends Class {
         const height = this.height();
         const width = this.width();
 
-        if (defined(x)) {
+        if (x !== undefined) {
             this.x1 = x;
             this.x2 = this.x1 + width;
         }
 
-        if (defined(y)) {
+        if (y !== undefined) {
             this.y1 = y;
             this.y2 = this.y1 + height;
         }
@@ -217,20 +215,40 @@ class Box extends Class {
     }
 
     align(targetBox, axis, alignment) {
-        const c1 = axis + 1;
-        const c2 = axis + 2;
-        const sizeFunc = axis === X ? WIDTH : HEIGHT;
-        const size = this[sizeFunc]();
-
-        if (inArray(alignment, [ LEFT, TOP ])) {
-            this[c1] = targetBox[c1];
-            this[c2] = this[c1] + size;
-        } else if (inArray(alignment, [ RIGHT, BOTTOM ])) {
-            this[c2] = targetBox[c2];
-            this[c1] = this[c2] - size;
+        if (axis === X) {
+            this.alignX(targetBox, alignment);
+        } else {
+            this.alignY(targetBox, alignment);
+        }
+
+        return this;
+    }
+
+    alignX(targetBox, alignment) {
+        const width = this.width();
+        if (alignment === LEFT) {
+            this.x1 = targetBox.x1;
+            this.x2 = this.x1 + width;
+        } else if (alignment === RIGHT) {
+            this.x2 = targetBox.x2;
+            this.x1 = this.x2 - width;
         } else if (alignment === CENTER) {
-            this[c1] = targetBox[c1] + (targetBox[sizeFunc]() - size) / 2;
-            this[c2] = this[c1] + size;
+            this.x1 = targetBox.x1 + (targetBox.width() - width) / 2;
+            this.x2 = this.x1 + width;
+        }
+    }
+
+    alignY(targetBox, alignment) {
+        const height = this.height();
+        if (alignment === TOP) {
+            this.y1 = targetBox.y1;
+            this.y2 = this.y1 + height;
+        } else if (alignment === BOTTOM) {
+            this.y2 = targetBox.y2;
+            this.y1 = this.y2 - height;
+        } else if (alignment === CENTER) {
+            this.y1 = targetBox.y1 + (targetBox.height() - height) / 2;
+            this.y2 = this.y1 + height;
         }
     }
 }

package/dist/es2015/core/category-axis.js

@@ -2,7 +2,7 @@ import Axis from './axis';
 import AxisLabel from './axis-label';
 
 import { BLACK, COORD_PRECISION, DEFAULT_PRECISION, X, Y } from '../common/constants';
-import { defined, isNumber, last, limitValue, round, setDefaultOptions, valueOrDefault, HashMap } from '../common';
+import { isNumber, last, limitValue, round, setDefaultOptions, valueOrDefault, HashMap } from '../common';
 import { dateEquals } from '../date-utils';
 
 const MIN_CATEGORY_POINTS_RANGE = 0.01;
@@ -10,14 +10,7 @@ const MIN_CATEGORY_RANGE = 0.1;
 
 function indexOf(value, arr) {
     if (value instanceof Date) {
-        const length = arr.length;
-        for (let idx = 0; idx < length; idx++) {
-            if (dateEquals(arr[idx], value)) {
-                return idx;
-            }
-        }
-
-        return -1;
+        return arr.findIndex((item) => dateEquals(item, value));
     }
 
     return arr.indexOf(value);
@@ -43,8 +36,8 @@ class CategoryAxis extends Axis {
 
     initUserOptions(options) {
         const categories = options.categories || [];
-        const definedMin = defined(options.min);
-        const definedMax = defined(options.max);
+        const definedMin = options.min !== undefined;
+        const definedMax = options.max !== undefined;
         options.srcCategories = options.categories = categories;
 
         if ((definedMin || definedMax) && categories.length) {
@@ -259,7 +252,7 @@ class CategoryAxis extends Axis {
         const { axis: valueAxis, lineStart } = this.lineInfo();
 
         const slotBox = box.clone();
-        const singleSlot = !defined(to);
+        const singleSlot = to === undefined;
 
         const start = valueOrDefault(from, 0);
         let end = valueOrDefault(to, start);

package/dist/es2015/core/chart-element.js

@@ -1,14 +1,16 @@
 import { drawing as draw } from '@progress/kendo-drawing';
 
 import { WHITE } from '../common/constants';
-import { Class, deepExtend, defined, valueOrDefault, autoTextColor } from '../common';
+import { deepExtend, valueOrDefault, autoTextColor } from '../common';
 
-class ChartElement extends Class {
+class ChartElement {
     constructor(options) {
-        super();
-
         this.children = [];
 
+        this.initOptions(options);
+    }
+
+    initOptions(options) {
         this.options = deepExtend({}, this.options, this.initUserOptions(options));
     }
 
@@ -137,7 +139,7 @@ class ChartElement extends Class {
 
         if (childVisual.options.noclip) {
             this.clipRoot().visual.append(childVisual);
-        } else if (defined(childVisual.options.zIndex)) {
+        } else if (childVisual.options.zIndex !== undefined) {
             this.stackRoot().stackVisual(childVisual);
         } else if (this.isStackRoot) {
             this.stackVisual(childVisual);
@@ -261,7 +263,7 @@ class ChartElement extends Class {
                 highlight = this._highlight = this.createHighlight(highlightOptions);
             }
 
-            if (!defined(highlight.options.zIndex)) {
+            if (highlight.options.zIndex === undefined) {
                 highlight.options.zIndex = valueOrDefault(options.zIndex, this.options.zIndex);
             }
 

package/dist/es2015/core/curve-processor.js

@@ -1,16 +1,13 @@
 import { geometry as geom } from '@progress/kendo-drawing';
 
 import { X, Y } from '../common/constants';
-import { Class, last, round } from '../common';
+import { last, round } from '../common';
 
 const WEIGHT = 0.333;
 const EXTREMUM_ALLOWED_DEVIATION = 0.01;
 
-class CurveProcessor extends Class {
-
+class CurveProcessor {
     constructor(closed) {
-        super();
-
         this.closed = closed;
     }
 

package/dist/es2015/core/point.js

@@ -1,10 +1,8 @@
 import { COORD_PRECISION } from '../common/constants';
-import { Class, rad, round } from '../common';
+import { rad, round } from '../common';
 
-class Point extends Class {
+class Point {
     constructor(x, y) {
-        super();
-
         this.x = x || 0;
         this.y = y || 0;
     }

package/dist/es2015/core/ring.js

@@ -1,13 +1,10 @@
 import Box from './box';
 import Point from './point';
 import { COORD_PRECISION, MAX_VALUE, MIN_VALUE } from '../common/constants';
-import { Class, clockwise, rad, round } from '../common';
-
-class Ring extends Class {
+import { clockwise, rad, round } from '../common';
 
+class Ring {
     constructor(center, innerRadius, radius, startAngle, angle) {
-        super();
-
         this.center = center;
         this.innerRadius = innerRadius;
         this.radius = radius;

package/dist/es2015/core/shape-builder.js

@@ -1,9 +1,8 @@
 import { geometry as geom, drawing as draw } from '@progress/kendo-drawing';
-import { Class } from '../common';
 
 const DIRECTION_ANGLE = 0.001; //any value that will make the endAngle bigger than the start angle will work here.
 
-class ShapeBuilder extends Class {
+class ShapeBuilder {
     createRing(sector, options) {
         const startAngle = sector.startAngle + 180;
         let endAngle = sector.angle + startAngle;

package/dist/es2015/core/utils/element-id.js

@@ -0,0 +1,5 @@
+let elId = 1;
+
+export default function elementId() {
+    return "kchart" + elId++;
+}