@progress/kendo-charts 2.9.0 → 2.10.0-develop.2

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

@@ -4,11 +4,19 @@ import { INITIAL_ANIMATION_DURATION, 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];
+            }
+        }
+
         const bbox = element.bbox();
 
         if (bbox) {

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

@@ -6,6 +6,10 @@ 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 center = this.center = this.element.bbox().center();
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, center)

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

@@ -3,9 +3,16 @@ 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);
     }
 

package/dist/es/chart/animations/easingMap.js

@@ -0,0 +1,8 @@
+export const easingMap = {
+    swing: [0.3583, 0, 0.6422, 1],
+    linear: [0, 0, 1, 1],
+    ease: [0.25, 0.1, 0.25, 1],
+    "ease-in": [0.42, 0, 1, 1],
+    "ease-out": [0, 0, 0.58, 1],
+    "ease-in-out": [0.42, 0, 0.58, 1]
+};

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

@@ -6,6 +6,10 @@ 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;
+        }
         this.fadeTo = this.element.opacity();
         this.element.opacity(0);
     }

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

@@ -6,6 +6,10 @@ 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;
+        }
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, this.options.center)
         );

package/dist/es/chart/chart.js

@@ -366,11 +366,15 @@ class Chart {
         model.renderVisual();
 
         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);
+                    element.animation.options = Object.assign({}, element.animation.options, loading, {motionConfig, motion});
                     element.animation.setup();
                 }
             });
@@ -2311,6 +2315,9 @@ function triggerPaneRender(panes) {
 
 setDefaultOptions(Chart, {
     renderAs: "",
+    motion: {
+        enabled: false,
+    },
     chartArea: {},
     legend: {
         visible: true,

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

@@ -51,6 +51,42 @@ const getSeriesColors = (element) => {
     return result;
 };
 
+const parseToMS = (value) => {
+    // Handle CSS time values (e.g., "200ms", "0.5s", ".3s")
+    if (typeof value === 'string' && value.endsWith('ms')) {
+        return parseFloat(value);
+    } else if (typeof value === 'string' && value.endsWith('s')) {
+        return parseFloat(value) * 1000;
+    }
+    return parseFloat(value);
+};
+
+function parseCubicBezier(input) {
+    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];
+    }
+}
+
 // -----------------------------------------------------------------------------
 // CSS Variable Groups (shared + component specific)
 // -----------------------------------------------------------------------------
@@ -84,7 +120,11 @@ const chartVariables = {
     notesBg: "--kendo-chart-notes-bg",
     notesBorder: "--kendo-chart-notes-border",
     notesLines: "--kendo-chart-notes-lines",
-    inactive: "--kendo-chart-inactive"
+    inactive: "--kendo-chart-inactive",
+    initialAnimationDuration: '--kendo-duration-steady',
+    fadeInAnimationDuration: '--kendo-duration-rapid',
+    elasticEasing: '--kendo-easing-elastic',
+    linearEasing: '--kendo-easing-linear',
 };
 
 // Sankey-specific variables (in addition to shared)
@@ -252,6 +292,13 @@ 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)),
+    };
+
     return {
         axisDefaults: {
             crosshair: {
@@ -329,6 +376,7 @@ export const chartTheme = (element) => {
             title: {
                 font: paneTitleFont(element),
             }
-        }
+        },
+        motion
     };
 };

package/dist/es/qrcode/encodings/encoders/utf8-encoder.js

@@ -7,7 +7,8 @@ import { getVersion } from '../utils/index';
 const BYTE = "byte";
 
 export class Utf8Encoder {
-    constructor() {
+    constructor(options = {}) {
+        this.includeBOM = options.includeBOM !== undefined ? options.includeBOM : true;
         this.initProperties();
 
         this.mode = DataModeInstances[this.encodingMode];
@@ -39,7 +40,7 @@ export class Utf8Encoder {
     }
 
     encode(str) {
-        let result = this.utfBOM;
+        let result = this.includeBOM ? this.utfBOM : "";
 
         for (let i = 0; i < str.length; i++) {
             result += this.encodeCharacter(str.charCodeAt(i));

package/dist/es/qrcode/encodings/encoding.js

@@ -539,7 +539,8 @@ export function calculateDarkModulesRatioScore(darkModules, total) {
 
 export function createQRCodeDataEncoder(encoding) {
     if (encoding && encoding.toLowerCase().indexOf("utf_8") >= 0) {
-        return new Utf8Encoder();
+        const includeBOM = encoding.toLowerCase().indexOf("no_bom") < 0;
+        return new Utf8Encoder({ includeBOM });
     }
 
     return new IsoEncoder();

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

@@ -4,11 +4,19 @@ import { INITIAL_ANIMATION_DURATION, 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];
+            }
+        }
+
         const bbox = element.bbox();
 
         if (bbox) {

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

@@ -6,6 +6,10 @@ 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 center = this.center = this.element.bbox().center();
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, center)

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

@@ -3,9 +3,16 @@ 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);
     }
 

package/dist/es2015/chart/animations/easingMap.js

@@ -0,0 +1,8 @@
+export const easingMap = {
+    swing: [0.3583, 0, 0.6422, 1],
+    linear: [0, 0, 1, 1],
+    ease: [0.25, 0.1, 0.25, 1],
+    "ease-in": [0.42, 0, 1, 1],
+    "ease-out": [0, 0, 0.58, 1],
+    "ease-in-out": [0.42, 0, 0.58, 1]
+};

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

@@ -6,6 +6,10 @@ 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;
+        }
         this.fadeTo = this.element.opacity();
         this.element.opacity(0);
     }

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

@@ -6,6 +6,10 @@ 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;
+        }
         this.element.transform(geom.transform()
             .scale(START_SCALE, START_SCALE, this.options.center)
         );

package/dist/es2015/chart/chart.js

@@ -366,11 +366,15 @@ class Chart {
         model.renderVisual();
 
         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);
+                    element.animation.options = Object.assign({}, element.animation.options, loading, {motionConfig, motion});
                     element.animation.setup();
                 }
             });
@@ -2311,6 +2315,9 @@ function triggerPaneRender(panes) {
 
 setDefaultOptions(Chart, {
     renderAs: "",
+    motion: {
+        enabled: false,
+    },
     chartArea: {},
     legend: {
         visible: true,

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

@@ -51,6 +51,42 @@ const getSeriesColors = (element) => {
     return result;
 };
 
+const parseToMS = (value) => {
+    // Handle CSS time values (e.g., "200ms", "0.5s", ".3s")
+    if (typeof value === 'string' && value.endsWith('ms')) {
+        return parseFloat(value);
+    } else if (typeof value === 'string' && value.endsWith('s')) {
+        return parseFloat(value) * 1000;
+    }
+    return parseFloat(value);
+};
+
+function parseCubicBezier(input) {
+    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];
+    }
+}
+
 // -----------------------------------------------------------------------------
 // CSS Variable Groups (shared + component specific)
 // -----------------------------------------------------------------------------
@@ -84,7 +120,11 @@ const chartVariables = {
     notesBg: "--kendo-chart-notes-bg",
     notesBorder: "--kendo-chart-notes-border",
     notesLines: "--kendo-chart-notes-lines",
-    inactive: "--kendo-chart-inactive"
+    inactive: "--kendo-chart-inactive",
+    initialAnimationDuration: '--kendo-duration-steady',
+    fadeInAnimationDuration: '--kendo-duration-rapid',
+    elasticEasing: '--kendo-easing-elastic',
+    linearEasing: '--kendo-easing-linear',
 };
 
 // Sankey-specific variables (in addition to shared)
@@ -252,6 +292,13 @@ 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)),
+    };
+
     return {
         axisDefaults: {
             crosshair: {
@@ -329,6 +376,7 @@ export const chartTheme = (element) => {
             title: {
                 font: paneTitleFont(element),
             }
-        }
+        },
+        motion
     };
 };

package/dist/es2015/qrcode/encodings/encoders/utf8-encoder.js

@@ -7,7 +7,8 @@ import { getVersion } from '../utils/index';
 const BYTE = "byte";
 
 export class Utf8Encoder {
-    constructor() {
+    constructor(options = {}) {
+        this.includeBOM = options.includeBOM !== undefined ? options.includeBOM : true;
         this.initProperties();
 
         this.mode = DataModeInstances[this.encodingMode];
@@ -39,7 +40,7 @@ export class Utf8Encoder {
     }
 
     encode(str) {
-        let result = this.utfBOM;
+        let result = this.includeBOM ? this.utfBOM : "";
 
         for (let i = 0; i < str.length; i++) {
             result += this.encodeCharacter(str.charCodeAt(i));

package/dist/es2015/qrcode/encodings/encoding.js

@@ -539,7 +539,8 @@ export function calculateDarkModulesRatioScore(darkModules, total) {
 
 export function createQRCodeDataEncoder(encoding) {
     if (encoding && encoding.toLowerCase().indexOf("utf_8") >= 0) {
-        return new Utf8Encoder();
+        const includeBOM = encoding.toLowerCase().indexOf("no_bom") < 0;
+        return new Utf8Encoder({ includeBOM });
     }
 
     return new IsoEncoder();