@progress/kendo-charts 2.10.0-develop.3 → 2.10.0

package/dist/es/chart/animations/bar-chart-animation.js

@@ -1,21 +1,14 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
-
-import { INITIAL_ANIMATION_DURATION, BAR, START_SCALE } from '../constants';
-
+import { BAR, START_SCALE } from '../constants';
 import { X, Y } from '../../common/constants';
 import { interpolateValue, setDefaultOptions } from '../../common';
-import { easingMap } from './easingMap';
 
 class BarChartAnimation extends draw.Animation {
-
     setup() {
         const { element, options } = this;
-        if (options.motion && options.motion.enabled) {
-            options.motion.duration = options.motionConfig.initialDuration;
-            if (options.easing && easingMap[options.easing]) {
-                options.motion.easing = easingMap[options.easing];
-            }
-        }
+
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig[options.easing] || [];
 
         const bbox = element.bbox();
 
@@ -50,7 +43,7 @@ class BarChartAnimation extends draw.Animation {
 }
 
 setDefaultOptions(BarChartAnimation, {
-    duration: INITIAL_ANIMATION_DURATION
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(BAR, BarChartAnimation);

package/dist/es/chart/animations/bubble-animation.js

@@ -1,15 +1,14 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
-
 import { START_SCALE, BUBBLE } from '../constants';
 
 import { setDefaultOptions } from '../../common';
 
 class BubbleAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.initialDuration;
-            this.options.motion.easing = this.options.motionConfig.elasticEasing;
-        }
+        const options = this.options;
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig.easeOutElastic || [];
+
         const center = this.center = this.element.bbox().center();
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, center)
@@ -24,7 +23,7 @@ class BubbleAnimation extends draw.Animation {
 }
 
 setDefaultOptions(BubbleAnimation, {
-    easing: "easeOutElastic"
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(BUBBLE, BubbleAnimation);

package/dist/es/chart/animations/clip-animation.js

@@ -1,19 +1,14 @@
 import { drawing as draw } from '@progress/kendo-drawing';
-
-import { INITIAL_ANIMATION_DURATION } from '../constants';
-
 import { interpolateValue, setDefaultOptions } from '../../common';
-import { easingMap } from './easingMap';
 
 class ClipAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.initialDuration;
-            if (this.options.easing && easingMap[this.options.easing]) {
-                this.options.motion.easing = easingMap[this.options.easing];
-            }
-        }
-        this._setEnd(this.options.box.x1);
+        const options = this.options;
+
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig[options.easing] || [];
+
+        this._setEnd(options.box.x1);
     }
 
     step(pos) {
@@ -35,7 +30,7 @@ class ClipAnimation extends draw.Animation {
 }
 
 setDefaultOptions(ClipAnimation, {
-    duration: INITIAL_ANIMATION_DURATION
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register("clip", ClipAnimation);

package/dist/es/chart/animations/fade-in-animation.js

@@ -1,15 +1,14 @@
 import { drawing as draw } from '@progress/kendo-drawing';
-
 import { FADEIN } from '../constants';
 
 import { setDefaultOptions } from '../../common';
 
 class FadeInAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.fadeInDuration;
-            this.options.motion.easing = this.options.motionConfig.linearEasing;
-        }
+        const options = this.options;
+        options.duration = options.duration === undefined ? options.motionConfig.rapid : options.duration;
+        options.easing = options.motionConfig.linear || [];
+
         this.fadeTo = this.element.opacity();
         this.element.opacity(0);
     }
@@ -20,8 +19,7 @@ class FadeInAnimation extends draw.Animation {
 }
 
 setDefaultOptions(FadeInAnimation, {
-    duration: 200,
-    easing: "linear"
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(FADEIN, FadeInAnimation);

package/dist/es/chart/animations/pie-animation.js

@@ -1,15 +1,15 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 
-import { START_SCALE, INITIAL_ANIMATION_DURATION, PIE } from '../constants';
+import { START_SCALE, PIE } from '../constants';
 
 import { setDefaultOptions } from '../../common';
 
 class PieAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.initialDuration;
-            this.options.motion.easing = this.options.motionConfig.elasticEasing;
-        }
+        const options = this.options;
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig.easeOutElastic || [];
+
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, this.options.center)
         );
@@ -23,8 +23,7 @@ class PieAnimation extends draw.Animation {
 }
 
 setDefaultOptions(PieAnimation, {
-    easing: "easeOutElastic",
-    duration: INITIAL_ANIMATION_DURATION
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(PIE, PieAnimation);

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

@@ -1,7 +1,7 @@
 import ScatterChart from '../scatter-charts/scatter-chart';
 import Bubble from './bubble';
 
-import { INITIAL_ANIMATION_DURATION, BUBBLE } from '../constants';
+import { BUBBLE, INITIAL_ANIMATION_DURATION } from '../constants';
 
 import { MIN_VALUE, CIRCLE } from '../../common/constants';
 import { deepExtend, isFunction, setDefaultOptions, valueOrDefault } from '../../common';
@@ -34,10 +34,12 @@ class BubbleChart extends ScatterChart {
     createPoint(value, fields) {
         const series = fields.series;
         const pointsCount = series.data.length;
-        const delay = fields.pointIx * (INITIAL_ANIMATION_DURATION / pointsCount);
+        const motion = this.chartService.chart ? this.chartService.chart.options.motion : { steady: INITIAL_ANIMATION_DURATION };
+        const initialDuration = motion.steady;
+        const delay = fields.pointIx * (initialDuration / pointsCount);
         const animationOptions = {
             delay: delay,
-            duration: INITIAL_ANIMATION_DURATION - delay,
+            duration: initialDuration - delay,
             type: BUBBLE
         };
 
@@ -52,7 +54,7 @@ class BubbleChart extends ScatterChart {
             labels: {
                 animation: {
                     delay: delay,
-                    duration: INITIAL_ANIMATION_DURATION - delay
+                    duration: initialDuration - delay
                 }
             }
         }, this.pointOptions(series, fields.seriesIx), {

package/dist/es/chart/chart.js

@@ -367,14 +367,12 @@ class Chart {
 
         const transitions = this.options.transitions;
         const motionConfig = this.options.motion || {};
-        const motion = {
-            enabled: motionConfig.enabled
-        };
         if (transitions !== false) {
             model.traverse(function(element) {
                 if (element.animation) {
-                    const loading = (transitions && transitions !== true) ? transitions.loading : transitions;
-                    element.animation.options = Object.assign({}, element.animation.options, loading, {motionConfig, motion});
+                    element.animation.options = Object.assign({}, element.animation.options,
+                        {duration: undefined,
+                        motionConfig: Object.assign({}, motionConfig)});
                     element.animation.setup();
                 }
             });
@@ -2402,9 +2400,7 @@ function triggerPaneRender(panes) {
 
 setDefaultOptions(Chart, {
     renderAs: "",
-    motion: {
-        enabled: false,
-    },
+    motion: {},
     chartArea: {},
     legend: {
         visible: true,

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

@@ -11,10 +11,10 @@ const ClipAnimationMixin = {
         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, Object.assign({}, {box: box},
-                loading));
+            this.animation = new ClipAnimation(clipPath, {
+                box: box
+            });
             if (anyHasZIndex(this.options.series)) {
                 this._setChildrenAnimation(clipPath);
             }

package/dist/es/chart/theme/load-theme.js

@@ -62,29 +62,12 @@ const parseToMS = (value) => {
 };
 
 function parseCubicBezier(input) {
-    const s = input.trim();
+    const s = (input || "").trim();
     const m = s.match(
         /cubic-bezier\s*\(\s*([+-]?\d*\.?\d+)\s*,\s*([+-]?\d*\.?\d+)\s*,\s*([+-]?\d*\.?\d+)\s*,\s*([+-]?\d*\.?\d+)\s*\)\s*/i
     );
 
-    return m ? [Number(m[1]), Number(m[2]), Number(m[3]), Number(m[4])] : [0, 0, 1, 1];
-}
-
-function parseEasing(input) {
-    switch (input) {
-        case "linear":
-            return [0, 0, 1, 1];
-        case "ease":
-            return [0.25, 0.1, 0.25, 1];
-        case "ease-in":
-            return [0.42, 0, 1, 1];
-        case "ease-out":
-            return [0, 0, 0.58, 1];
-        case "ease-in-out":
-            return [0.42, 0, 0.58, 1];
-        default:
-            return input ? parseCubicBezier(input) : [0, 0, 1, 1];
-    }
+    return m ? [Number(m[1]), Number(m[2]), Number(m[3]), Number(m[4])] : null;
 }
 
 // -----------------------------------------------------------------------------
@@ -123,8 +106,9 @@ const chartVariables = {
     inactive: "--kendo-chart-inactive",
     initialAnimationDuration: '--kendo-duration-steady',
     fadeInAnimationDuration: '--kendo-duration-rapid',
-    elasticEasing: '--kendo-easing-elastic',
+    elasticEasing: '--kendo-easing-stretchy',
     linearEasing: '--kendo-easing-linear',
+    swingEasing: '--kendo-easing-standard',
 };
 
 // Sankey-specific variables (in addition to shared)
@@ -293,10 +277,11 @@ export const chartTheme = (element) => {
     });
 
     const motion = {
-        initialDuration: parseToMS(getProp(element, vars.initialAnimationDuration)),
-        fadeInDuration: parseToMS(getProp(element, vars.fadeInAnimationDuration)),
-        elasticEasing: parseEasing(getProp(element, vars.elasticEasing)),
-        linearEasing: parseEasing(getProp(element, vars.linearEasing)),
+        steady: parseToMS(getProp(element, vars.initialAnimationDuration)) || 600,
+        rapid: parseToMS(getProp(element, vars.fadeInAnimationDuration)) || 200,
+        easeOutElastic: parseCubicBezier(getProp(element, vars.elasticEasing)) || [0.07, 1.81, 0.3, 0.81],
+        linear: parseCubicBezier(getProp(element, vars.linearEasing)) || [0, 0, 1, 1],
+        swing: parseCubicBezier(getProp(element, vars.swingEasing)) || [0.42, 0, 0.58, 1]
     };
 
     return {

package/dist/es2015/chart/animations/bar-chart-animation.js

@@ -1,21 +1,14 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
-
-import { INITIAL_ANIMATION_DURATION, BAR, START_SCALE } from '../constants';
-
+import { BAR, START_SCALE } from '../constants';
 import { X, Y } from '../../common/constants';
 import { interpolateValue, setDefaultOptions } from '../../common';
-import { easingMap } from './easingMap';
 
 class BarChartAnimation extends draw.Animation {
-
     setup() {
         const { element, options } = this;
-        if (options.motion && options.motion.enabled) {
-            options.motion.duration = options.motionConfig.initialDuration;
-            if (options.easing && easingMap[options.easing]) {
-                options.motion.easing = easingMap[options.easing];
-            }
-        }
+
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig[options.easing] || [];
 
         const bbox = element.bbox();
 
@@ -50,7 +43,7 @@ class BarChartAnimation extends draw.Animation {
 }
 
 setDefaultOptions(BarChartAnimation, {
-    duration: INITIAL_ANIMATION_DURATION
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(BAR, BarChartAnimation);

package/dist/es2015/chart/animations/bubble-animation.js

@@ -1,15 +1,14 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
-
 import { START_SCALE, BUBBLE } from '../constants';
 
 import { setDefaultOptions } from '../../common';
 
 class BubbleAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.initialDuration;
-            this.options.motion.easing = this.options.motionConfig.elasticEasing;
-        }
+        const options = this.options;
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig.easeOutElastic || [];
+
         const center = this.center = this.element.bbox().center();
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, center)
@@ -24,7 +23,7 @@ class BubbleAnimation extends draw.Animation {
 }
 
 setDefaultOptions(BubbleAnimation, {
-    easing: "easeOutElastic"
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(BUBBLE, BubbleAnimation);

package/dist/es2015/chart/animations/clip-animation.js

@@ -1,19 +1,14 @@
 import { drawing as draw } from '@progress/kendo-drawing';
-
-import { INITIAL_ANIMATION_DURATION } from '../constants';
-
 import { interpolateValue, setDefaultOptions } from '../../common';
-import { easingMap } from './easingMap';
 
 class ClipAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.initialDuration;
-            if (this.options.easing && easingMap[this.options.easing]) {
-                this.options.motion.easing = easingMap[this.options.easing];
-            }
-        }
-        this._setEnd(this.options.box.x1);
+        const options = this.options;
+
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig[options.easing] || [];
+
+        this._setEnd(options.box.x1);
     }
 
     step(pos) {
@@ -35,7 +30,7 @@ class ClipAnimation extends draw.Animation {
 }
 
 setDefaultOptions(ClipAnimation, {
-    duration: INITIAL_ANIMATION_DURATION
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register("clip", ClipAnimation);

package/dist/es2015/chart/animations/fade-in-animation.js

@@ -1,15 +1,14 @@
 import { drawing as draw } from '@progress/kendo-drawing';
-
 import { FADEIN } from '../constants';
 
 import { setDefaultOptions } from '../../common';
 
 class FadeInAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.fadeInDuration;
-            this.options.motion.easing = this.options.motionConfig.linearEasing;
-        }
+        const options = this.options;
+        options.duration = options.duration === undefined ? options.motionConfig.rapid : options.duration;
+        options.easing = options.motionConfig.linear || [];
+
         this.fadeTo = this.element.opacity();
         this.element.opacity(0);
     }
@@ -20,8 +19,7 @@ class FadeInAnimation extends draw.Animation {
 }
 
 setDefaultOptions(FadeInAnimation, {
-    duration: 200,
-    easing: "linear"
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(FADEIN, FadeInAnimation);

package/dist/es2015/chart/animations/pie-animation.js

@@ -1,15 +1,15 @@
 import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 
-import { START_SCALE, INITIAL_ANIMATION_DURATION, PIE } from '../constants';
+import { START_SCALE, PIE } from '../constants';
 
 import { setDefaultOptions } from '../../common';
 
 class PieAnimation extends draw.Animation {
     setup() {
-        if (this.options.motion && this.options.motion.enabled) {
-            this.options.motion.duration = this.options.motionConfig.initialDuration;
-            this.options.motion.easing = this.options.motionConfig.elasticEasing;
-        }
+        const options = this.options;
+        options.duration = options.duration === undefined ? options.motionConfig.steady : options.duration;
+        options.easing = options.motionConfig.easeOutElastic || [];
+
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, this.options.center)
         );
@@ -23,8 +23,7 @@ class PieAnimation extends draw.Animation {
 }
 
 setDefaultOptions(PieAnimation, {
-    easing: "easeOutElastic",
-    duration: INITIAL_ANIMATION_DURATION
+    motionConfig: {}
 });
 
 draw.AnimationFactory.current.register(PIE, PieAnimation);

package/dist/es2015/chart/bubble-chart/bubble-chart.js

@@ -1,7 +1,7 @@
 import ScatterChart from '../scatter-charts/scatter-chart';
 import Bubble from './bubble';
 
-import { INITIAL_ANIMATION_DURATION, BUBBLE } from '../constants';
+import { BUBBLE, INITIAL_ANIMATION_DURATION } from '../constants';
 
 import { MIN_VALUE, CIRCLE } from '../../common/constants';
 import { deepExtend, isFunction, setDefaultOptions, valueOrDefault } from '../../common';
@@ -34,10 +34,12 @@ class BubbleChart extends ScatterChart {
     createPoint(value, fields) {
         const series = fields.series;
         const pointsCount = series.data.length;
-        const delay = fields.pointIx * (INITIAL_ANIMATION_DURATION / pointsCount);
+        const motion = this.chartService.chart ? this.chartService.chart.options.motion : { steady: INITIAL_ANIMATION_DURATION };
+        const initialDuration = motion.steady;
+        const delay = fields.pointIx * (initialDuration / pointsCount);
         const animationOptions = {
             delay: delay,
-            duration: INITIAL_ANIMATION_DURATION - delay,
+            duration: initialDuration - delay,
             type: BUBBLE
         };
 
@@ -52,7 +54,7 @@ class BubbleChart extends ScatterChart {
             labels: {
                 animation: {
                     delay: delay,
-                    duration: INITIAL_ANIMATION_DURATION - delay
+                    duration: initialDuration - delay
                 }
             }
         }, this.pointOptions(series, fields.seriesIx), {

package/dist/es2015/chart/chart.js

@@ -367,14 +367,12 @@ class Chart {
 
         const transitions = this.options.transitions;
         const motionConfig = this.options.motion || {};
-        const motion = {
-            enabled: motionConfig.enabled
-        };
         if (transitions !== false) {
             model.traverse(function(element) {
                 if (element.animation) {
-                    const loading = (transitions && transitions !== true) ? transitions.loading : transitions;
-                    element.animation.options = Object.assign({}, element.animation.options, loading, {motionConfig, motion});
+                    element.animation.options = Object.assign({}, element.animation.options,
+                        {duration: undefined,
+                        motionConfig: Object.assign({}, motionConfig)});
                     element.animation.setup();
                 }
             });
@@ -2402,9 +2400,7 @@ function triggerPaneRender(panes) {
 
 setDefaultOptions(Chart, {
     renderAs: "",
-    motion: {
-        enabled: false,
-    },
+    motion: {},
     chartArea: {},
     legend: {
         visible: true,

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

@@ -11,10 +11,10 @@ const ClipAnimationMixin = {
         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, Object.assign({}, {box: box},
-                loading));
+            this.animation = new ClipAnimation(clipPath, {
+                box: box
+            });
             if (anyHasZIndex(this.options.series)) {
                 this._setChildrenAnimation(clipPath);
             }

package/dist/es2015/chart/theme/load-theme.js

@@ -62,29 +62,12 @@ const parseToMS = (value) => {
 };
 
 function parseCubicBezier(input) {
-    const s = input.trim();
+    const s = (input || "").trim();
     const m = s.match(
         /cubic-bezier\s*\(\s*([+-]?\d*\.?\d+)\s*,\s*([+-]?\d*\.?\d+)\s*,\s*([+-]?\d*\.?\d+)\s*,\s*([+-]?\d*\.?\d+)\s*\)\s*/i
     );
 
-    return m ? [Number(m[1]), Number(m[2]), Number(m[3]), Number(m[4])] : [0, 0, 1, 1];
-}
-
-function parseEasing(input) {
-    switch (input) {
-        case "linear":
-            return [0, 0, 1, 1];
-        case "ease":
-            return [0.25, 0.1, 0.25, 1];
-        case "ease-in":
-            return [0.42, 0, 1, 1];
-        case "ease-out":
-            return [0, 0, 0.58, 1];
-        case "ease-in-out":
-            return [0.42, 0, 0.58, 1];
-        default:
-            return input ? parseCubicBezier(input) : [0, 0, 1, 1];
-    }
+    return m ? [Number(m[1]), Number(m[2]), Number(m[3]), Number(m[4])] : null;
 }
 
 // -----------------------------------------------------------------------------
@@ -123,8 +106,9 @@ const chartVariables = {
     inactive: "--kendo-chart-inactive",
     initialAnimationDuration: '--kendo-duration-steady',
     fadeInAnimationDuration: '--kendo-duration-rapid',
-    elasticEasing: '--kendo-easing-elastic',
+    elasticEasing: '--kendo-easing-stretchy',
     linearEasing: '--kendo-easing-linear',
+    swingEasing: '--kendo-easing-standard',
 };
 
 // Sankey-specific variables (in addition to shared)
@@ -293,10 +277,11 @@ export const chartTheme = (element) => {
     });
 
     const motion = {
-        initialDuration: parseToMS(getProp(element, vars.initialAnimationDuration)),
-        fadeInDuration: parseToMS(getProp(element, vars.fadeInAnimationDuration)),
-        elasticEasing: parseEasing(getProp(element, vars.elasticEasing)),
-        linearEasing: parseEasing(getProp(element, vars.linearEasing)),
+        steady: parseToMS(getProp(element, vars.initialAnimationDuration)) || 600,
+        rapid: parseToMS(getProp(element, vars.fadeInAnimationDuration)) || 200,
+        easeOutElastic: parseCubicBezier(getProp(element, vars.elasticEasing)) || [0.07, 1.81, 0.3, 0.81],
+        linear: parseCubicBezier(getProp(element, vars.linearEasing)) || [0, 0, 1, 1],
+        swing: parseCubicBezier(getProp(element, vars.swingEasing)) || [0.42, 0, 0.58, 1]
     };
 
     return {