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

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: {
@@ -276,6 +323,12 @@ export const chartTheme = (element) => {
                 font: defaultFont(element),
             }
         },
+        categoryAxis: {
+            highlight: {
+                color: "#8C9FD9",
+                opacity: 0.15
+            }
+        },
         chartArea: {
             background: chartBg,
         },
@@ -329,6 +382,7 @@ export const chartTheme = (element) => {
             title: {
                 font: paneTitleFont(element),
             }
-        }
+        },
+        motion
     };
 };