@progress/kendo-charts 1.31.0 → 1.32.0

package/dist/es2015/chart/scatter-charts/scatter-chart.js

@@ -4,10 +4,8 @@ import ClipAnimationMixin from '../mixins/clip-animation-mixin';
 import ErrorRangeCalculator from '../error-bars/error-range-calculator';
 import ScatterErrorBar from '../error-bars/scatter-error-bar';
 import LinePoint from '../line-chart/line-point';
-import CategoricalChart from '../categorical-chart';
 
-import hasValue from '../utils/has-value';
-import evalOptions from '../utils/eval-options';
+import { hasValue, evalOptions } from '../utils';
 
 import { deepExtend, isNumber, isString, defined, isFunction, setDefaultOptions } from '../../common';
 import { X, Y, MIN_VALUE, MAX_VALUE } from '../../common/constants';
@@ -288,7 +286,7 @@ class ScatterChart extends ChartElement {
             }
 
             for (let pointIx = 0; pointIx < currentSeries.data.length; pointIx++) {
-                const { valueFields: value, fields } = this._bindPoint(currentSeries, seriesIx, pointIx);
+                const { valueFields: value, fields } = this.plotArea.bindPoint(currentSeries, pointIx);
 
                 callback(value, deepExtend({
                     pointIx: pointIx,
@@ -325,8 +323,6 @@ setDefaultOptions(ScatterChart, {
     },
     clip: true
 });
-deepExtend(ScatterChart.prototype, ClipAnimationMixin, {
-    _bindPoint: CategoricalChart.prototype._bindPoint
-});
+deepExtend(ScatterChart.prototype, ClipAnimationMixin);
 
 export default ScatterChart;

package/dist/es2015/chart/trendlines/calculate-moving-average.js

@@ -0,0 +1,42 @@
+import { MIN_MOVING_AVERAGE_PERIOD } from '../constants';
+
+function calculateMovingAverage(sourceValues, valueGetter, period) {
+    const averagePoints = [];
+    const values = [];
+    const start = Math.max(MIN_MOVING_AVERAGE_PERIOD, period) - 1;
+
+    let end = 0;
+    let sum = 0;
+
+    for (let i = 0; i < sourceValues.length; i++) {
+        const value = sourceValues[i];
+        const { xValue, yValue } = valueGetter(value);
+
+        if (isFinite(yValue) && yValue !== null) {
+            values.push(yValue);
+            sum += yValue;
+            end = Math.max(i, end);
+        } else {
+            values.push(null);
+        }
+
+        if (i >= start) {
+            const count = values.filter(value => value !== null).length;
+            const lastValue = values.shift() || 0;
+
+            if (count > 0) {
+                const average = sum / count;
+                averagePoints.push([xValue, average]);
+
+                sum -= lastValue;
+                continue;
+            }
+        }
+
+        averagePoints.push([xValue, null]);
+    }
+
+    return averagePoints.slice(0, end + 1);
+}
+
+export default calculateMovingAverage;

package/dist/es2015/chart/trendlines/calculate-slope.js

@@ -0,0 +1,35 @@
+function calculateSlope(sourceValues, valueGetter) {
+    let x = 0;
+    let y = 0;
+    let x2 = 0;
+    let xy = 0;
+    let count = 0;
+    let slope, intercept;
+    let xMin = Number.MAX_VALUE;
+    let xMax = Number.MIN_VALUE;
+
+    for (let i = 0; i < sourceValues.length; i++) {
+        const value = sourceValues[i];
+        const { xValue, yValue } = valueGetter(value);
+
+        if (isFinite(xValue) && xValue !== null && isFinite(yValue) && yValue !== null) {
+            xMin = Math.min(xValue, xMin);
+            xMax = Math.max(xValue, xMax);
+
+            count++;
+            x += xValue;
+            y += yValue;
+            x2 += Math.pow(xValue, 2);
+            xy += xValue * yValue;
+        }
+    }
+
+    if (count > 0) {
+        slope = (count * xy - x * y) / (count * x2 - Math.pow(x, 2));
+        intercept = (y - slope * x) / count;
+    }
+
+    return { slope, intercept, count, xMin, xMax };
+}
+
+export default calculateSlope;

package/dist/es2015/chart/trendlines/linear-trendline.js

@@ -0,0 +1,51 @@
+import calculateSlope from './calculate-slope';
+
+function linearTrendline(context) {
+    const {
+        options,
+        categoryAxis,
+        seriesValues
+    } = context;
+
+    const { data } = getData({ seriesValues, categoryAxis, options });
+    if (data) {
+        return Object.assign({}, options,
+
+            {type: 'line',
+            data,
+            categoryField: 'category',
+            field: 'value'});
+    }
+
+    return null;
+}
+
+const valueGetter = fieldName => ({ categoryIx, valueFields }) =>
+    ({ xValue: categoryIx + 1, yValue: valueFields[fieldName] });
+
+function getData({ seriesValues, categoryAxis, options }) {
+    const { slope, intercept, count } = calculateSlope(seriesValues(), valueGetter(options.field));
+
+    if (count > 0) {
+        const data = [];
+        const totalRange = categoryAxis.totalRangeIndices();
+        const currentRange = categoryAxis.currentRangeIndices();
+        const range = {
+            min: Math.floor(Math.max(currentRange.min - 1, totalRange.min)),
+            max: Math.ceil(Math.min(currentRange.max + 2, totalRange.max))
+        };
+
+        for (let i = range.min; i < range.max; i++) {
+            data[i] = {
+                category: categoryAxis.categoryAt(i, true),
+                value: slope * (i + 1) + intercept
+            };
+        }
+
+        return { data };
+    }
+
+    return { data: null };
+}
+
+export default linearTrendline;

package/dist/es2015/chart/trendlines/moving-average.js

@@ -0,0 +1,53 @@
+import { MIN_MOVING_AVERAGE_PERIOD } from '../constants';
+import calculateMovingAverage from './calculate-moving-average';
+
+function movingAverageTrendline(context) {
+    const { options } = context;
+
+    const { data } = getData(context);
+    if (data) {
+        return Object.assign({}, options,
+
+            {type: 'line',
+            data,
+            categoryField: 'category',
+            field: 'value'});
+    }
+
+    return null;
+}
+
+const valueGetter = fieldName => ({ categoryIx, valueFields }) =>
+    ({ xValue: categoryIx, yValue: valueFields[fieldName] });
+
+function calculatePoints({ options, categoryAxis, seriesValues }) {
+    const period = (options.trendline || {}).period || MIN_MOVING_AVERAGE_PERIOD;
+    const totalRange = categoryAxis.totalRangeIndices();
+    const currentRange = categoryAxis.currentRangeIndices();
+    const range = {
+        min: Math.floor(Math.max(currentRange.min - period, totalRange.min)),
+        max: Math.ceil(Math.min(currentRange.max + period + 2, totalRange.max))
+    };
+
+    return calculateMovingAverage(seriesValues(range), valueGetter(options.field), period);
+}
+
+function getData(context) {
+    const { categoryAxis } = context;
+    const points = calculatePoints(context);
+    const data = [];
+    points.forEach(([categoryIx, value]) => {
+        data[categoryIx] = {
+            category: categoryAxis.categoryAt(categoryIx, true),
+            value
+        };
+    });
+
+    if (data.length > 0) {
+        return { data };
+    }
+
+    return { data: null };
+}
+
+export default movingAverageTrendline;

package/dist/es2015/chart/trendlines/scatter-linear-trendline.js

@@ -0,0 +1,57 @@
+import autoMajorUnit from '../../core/utils/auto-major-unit';
+import { valueOrDefault } from '../../common';
+import calculateSlope from './calculate-slope';
+import scatterValueGetter from './scatter-value-getter';
+
+function scatterLinearTrendLine(context) {
+    const {
+        options,
+        seriesValues
+    } = context;
+
+    const data = getData({ seriesValues, options });
+    if (data) {
+        return Object.assign({}, options,
+
+            {type: 'scatterLine',
+            data});
+    }
+
+    return null;
+}
+
+function getData({ seriesValues, options }) {
+    let { slope, intercept, count, xMin, xMax } = calculateSlope(seriesValues(), scatterValueGetter(options.field));
+
+    if (count > 0) {
+        const data = [];
+        const forecast = (options.trendline || {}).forecast;
+        if (forecast) {
+            if (forecast.before > 0) {
+                xMin -= forecast.before;
+            }
+
+            if (forecast.after > 0) {
+                xMax += forecast.after;
+            }
+        }
+
+        const samplingInterval = (options.trendline || {}).samplingInterval;
+        let delta = valueOrDefault(samplingInterval,  autoMajorUnit(xMin, xMax) / 10);
+        if (samplingInterval <= 0) {
+            delta = xMax - xMin;
+        }
+
+        for (let x = xMin; x <= xMax; x += delta) {
+            data.push([ x,
+                slope * x + intercept
+            ]);
+        }
+
+        return data;
+    }
+
+    return null;
+}
+
+export default scatterLinearTrendLine;

package/dist/es2015/chart/trendlines/scatter-moving-average.js

@@ -0,0 +1,31 @@
+import calculateMovingAverage from './calculate-moving-average';
+import { MIN_MOVING_AVERAGE_PERIOD } from '../constants';
+import scatterValueGetter from './scatter-value-getter';
+
+function scatterMovingAverageTrendline(context) {
+    const { options } = context;
+
+    const data = getData(context);
+    if (data) {
+        return Object.assign({}, options,
+
+            {type: 'scatterLine',
+            data});
+    }
+
+    return null;
+}
+
+function getData({ options, seriesValues }) {
+    const period = (options.trendline || {}).period || MIN_MOVING_AVERAGE_PERIOD;
+    const range = { before: period, after: period };
+    const data = calculateMovingAverage(seriesValues(range), scatterValueGetter(options.field), period);
+
+    if (data.length > 0) {
+        return data;
+    }
+
+    return null;
+}
+
+export default scatterMovingAverageTrendline;

package/dist/es2015/chart/trendlines/scatter-trendline-registry.js

@@ -0,0 +1,9 @@
+import scatterLinearTrendLine from './scatter-linear-trendline';
+import scatterMovingAverageTrendline from './scatter-moving-average';
+import { TRENDLINE_LINEAR, TRENDLINE_MOVING_AVERAGE } from '../constants';
+
+const scatterRegistry = {};
+scatterRegistry[TRENDLINE_LINEAR] = scatterLinearTrendLine;
+scatterRegistry[TRENDLINE_MOVING_AVERAGE] = scatterMovingAverageTrendline;
+
+export default scatterRegistry;

package/dist/es2015/chart/trendlines/scatter-value-getter.js

@@ -0,0 +1,4 @@
+const scatterValueGetter = fieldName => ({ valueFields }) =>
+    ({ xValue: valueFields.x, yValue: valueFields[fieldName] });
+
+export default scatterValueGetter;

package/dist/es2015/chart/trendlines/trendline-factory.js

@@ -0,0 +1,10 @@
+function trendlineFactory(registry, type, context) {
+    const impl = registry[String(type)];
+    if (impl) {
+        return impl(context);
+    }
+
+    return null;
+}
+
+export default trendlineFactory;

package/dist/es2015/chart/trendlines/trendline-registry.js

@@ -0,0 +1,9 @@
+import linearTrendline from './linear-trendline';
+import movingAverageTrendline from './moving-average';
+import { TRENDLINE_LINEAR, TRENDLINE_MOVING_AVERAGE } from '../constants';
+
+const registry = {};
+registry[TRENDLINE_LINEAR] = linearTrendline;
+registry[TRENDLINE_MOVING_AVERAGE] = movingAverageTrendline;
+
+export default registry;

package/dist/es2015/chart/utils.js

@@ -15,5 +15,3 @@ export { default as isDateAxis } from './utils/is-date-axis';
 export { default as segmentVisible } from './utils/segment-visible';
 export { default as singleItemOrArray } from './utils/single-item-or-array';
 export { default as createOutOfRangePoints } from './utils/create-out-of-range-points';
-
-

package/dist/es2015/common/constants.js

@@ -16,6 +16,7 @@ export const FORMAT_REGEX = /\{\d+:?/;
 export const HEIGHT = "height";
 export const HIGHLIGHT_ZINDEX = 100;
 export const INSIDE = "inside";
+export const INHERIT = "inherit";
 export const LEFT = "left";
 export const MAX_VALUE = Number.MAX_VALUE;
 export const MIN_VALUE = -Number.MAX_VALUE;

package/dist/es2015/common/hash-map.js

@@ -1,18 +1,14 @@
-
+// TODO: Remove and replace with Map/WeakMap.
 export default class HashMap {
     constructor() {
-        this._map = {};
-    }
-
-    get(name) {
-        return this._map[this._key(name)];
+        this._map = new Map();
     }
 
-    set(name, value) {
-        this._map[this._key(name)] = value;
+    get(key) {
+        return this._map.get(key);
     }
 
-    _key(name) {
-        return name instanceof Date ? name.getTime() : name;
+    set(key, value) {
+        this._map.set(key, value);
     }
-}
+}

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

@@ -81,31 +81,6 @@ class CategoryAxis extends Axis {
         };
     }
 
-    totalRangeIndices(limit) {
-        const options = this.options;
-        let min = isNumber(options.min) ? options.min : 0;
-        let max;
-
-        if (isNumber(options.max)) {
-            max = options.max;
-        } else if (isNumber(options.min)) {
-            max = min + options.categories.length;
-        } else {
-            max = this.totalRange().max || 1;
-        }
-
-        if (limit) {
-            const totalRange = this.totalRange();
-            min = limitValue(min, 0, totalRange.max);
-            max = limitValue(max, 0, totalRange.max);
-        }
-
-        return {
-            min: min,
-            max: max
-        };
-    }
-
     range() {
         const options = this.options;
         const min = isNumber(options.min) ? options.min : 0;
@@ -409,7 +384,7 @@ class CategoryAxis extends Axis {
 
     scaleRange(scale, cursor) {
         const position = Math.abs(this.pointOffset(cursor));
-        const rangeIndices = this.totalRangeIndices();
+        const rangeIndices = this.limitedRangeIndices();
         const range = rangeIndices.max - rangeIndices.min;
         const delta = this.scaleToDelta(scale, range);
         const minDelta = position * delta;
@@ -446,7 +421,7 @@ class CategoryAxis extends Axis {
     labelsRange() {
         const options = this.options;
         const { justified, labels: labelOptions } = options;
-        let { min, max } = this.totalRangeIndices(true);
+        let { min, max } = this.limitedRangeIndices(true);
         const start = Math.floor(min);
 
         if (!justified) {
@@ -483,7 +458,7 @@ class CategoryAxis extends Axis {
     }
 
     shouldRenderNote(value) {
-        const range = this.totalRangeIndices();
+        const range = this.limitedRangeIndices();
 
         return Math.floor(range.min) <= value && value <= Math.ceil(range.max);
     }
@@ -516,7 +491,7 @@ class CategoryAxis extends Axis {
     }
 
     pan(delta) {
-        const range = this.totalRangeIndices(true);
+        const range = this.limitedRangeIndices(true);
         const { scale } = this.scaleOptions();
         const offset = round(delta / scale, DEFAULT_PRECISION);
         const totalRange = this.totalRange();
@@ -529,7 +504,7 @@ class CategoryAxis extends Axis {
     pointsRange(start, end) {
         const { reverse, vertical } = this.options;
         const valueAxis = vertical ? Y : X;
-        const range = this.totalRangeIndices(true);
+        const range = this.limitedRangeIndices(true);
         const { scale, box } = this.scaleOptions();
         const lineStart = box[valueAxis + (reverse ? 2 : 1)];
 
@@ -582,6 +557,38 @@ class CategoryAxis extends Axis {
         };
     }
 
+    limitedRangeIndices(totalLimit) {
+        const options = this.options;
+        let min = isNumber(options.min) ? options.min : 0;
+        let max;
+
+        if (isNumber(options.max)) {
+            max = options.max;
+        } else if (isNumber(options.min)) {
+            max = min + options.categories.length;
+        } else {
+            max = this.totalRange().max || 1;
+        }
+
+        if (totalLimit) {
+            const totalRange = this.totalRange();
+            min = limitValue(min, 0, totalRange.max);
+            max = limitValue(max, 0, totalRange.max);
+        }
+
+        return {
+            min: min,
+            max: max
+        };
+    }
+
+    totalRangeIndices() {
+        return {
+            min: 0,
+            max: this.totalRange().max || 1
+        };
+    }
+
     mapCategories() {
         if (!this._categoriesMap) {
             const map = this._categoriesMap = new HashMap();

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

@@ -20,7 +20,11 @@ const BASE_UNITS = [
 const FIT = "fit";
 
 
-function categoryRange(categories) {
+function categoryRange(categories, clearCache) {
+    if (clearCache) {
+        categories._range = undefined;
+    }
+
     let range = categories._range;
     if (!range) {
         range = categories._range = sparseArrayLimits(categories);
@@ -360,10 +364,22 @@ class DateCategoryAxis extends CategoryAxis {
         options.srcCategories = categories;
 
         if (categories.length > 0) {
-            const range = categoryRange(categories);
+            const range = categoryRange(categories, true);
             const maxDivisions = options.maxDivisions;
+            const safeOptions = initUnit(options);
+
+            const forecast = options._forecast;
+            if (forecast) {
+                if (forecast.before > 0) {
+                    range.min = addDuration(range.min, -forecast.before, safeOptions.baseUnit, safeOptions.weekStartDay);
+                }
+
+                if (forecast.after > 0) {
+                    range.max = addDuration(range.max, forecast.after, safeOptions.baseUnit, safeOptions.weekStartDay);
+                }
+            }
 
-            this.dataRange = new DateRange(range.min, range.max, initUnit(options));
+            this.dataRange = new DateRange(range.min, range.max, safeOptions);
 
             if (maxDivisions) {
                 const dataRange = this.dataRange.displayRange();
@@ -876,6 +892,14 @@ class DateCategoryAxis extends CategoryAxis {
         return this.dataRange.total();
     }
 
+    totalRangeIndices() {
+        const range = this.dataRange.total();
+        return {
+            min: this.dataRange.totalIndex(range.min),
+            max: this.dataRange.totalIndex(range.max)
+        };
+    }
+
     totalCount() {
         return this.dataRange.totalCount();
     }