fix(dashboard): per-segment stacked bar animation and zero-value border-radius fix

- Freeze base at cumulative position so each bar segment starts from its own section's left edge
- Animate x from cumulative pixel position via chart.scales.x.getPixelForValue for simultaneous per-segment growth
- Use lastNonZeroIndex/firstNonZeroIndex for border-radius to handle zero-value segments

Author: b-l-i-n-d

assets/src/js/frontend/dashboard/pages/instructor/home-charts.ts

@@ -142,17 +142,45 @@ const getCSSProperty = (element: HTMLElement, propertyName: string): string => {
   return getComputedStyle(element).getPropertyValue(propertyName).trim();
 };
 
-const getAnimationConfig = (): { duration: 0 } | undefined => {
+const shouldReduceMotion = (): boolean => {
   const wrapper = document.querySelector('[data-tutor-theme]') || document.documentElement;
   const motion = wrapper.getAttribute('data-tutor-motion');
+  return (
+    motion === 'reduce' ||
+    ((!motion || motion === 'auto') && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+  );
+};
 
-  if (motion === 'reduce') {
+const getAnimationConfig = (): { duration: 0 } | undefined => {
+  if (shouldReduceMotion()) {
     return { duration: 0 };
   }
-  if ((!motion || motion === 'auto') && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+  return undefined;
+};
+
+const getCompletionChartAnimation = (): { duration: 0 } | Record<string, unknown> => {
+  if (shouldReduceMotion()) {
     return { duration: 0 };
   }
-  return undefined;
+
+  return {
+    base: { duration: 0 },
+    x: {
+      from: (ctx: Record<string, unknown>) => {
+        const chart = ctx.chart as {
+          scales: { x: { getPixelForValue: (v: number) => number } };
+          data: { datasets: Array<{ data: Array<number> }> };
+        };
+        const dataIndex = ctx.dataIndex as number;
+        const datasetIndex = ctx.datasetIndex as number;
+        let cumulative = 0;
+        for (let i = 0; i < datasetIndex; i++) {
+          cumulative += chart.data.datasets[i].data[dataIndex] || 0;
+        }
+        return chart.scales.x.getPixelForValue(cumulative);
+      },
+    },
+  };
 };
 
 const createChart = (canvas: HTMLCanvasElement, config: ChartConfiguration): void => {
@@ -792,6 +820,9 @@ export const courseCompletionChart = (data: CourseCompletionChartData) => ({
     const chartColors = [colors.enrolled, colors.completed, colors.in_progress, colors.inactive, colors.cancelled];
     const dataKeys: CourseCompletionChartDataKey[] = ['enrolled', 'completed', 'in_progress', 'inactive', 'cancelled'];
 
+    const lastNonZeroIndex = chartData.reduce((last, value, i) => (value > 0 ? i : last), -1);
+    const firstNonZeroIndex = chartData.findIndex((value) => value > 0);
+
     return {
       type: 'bar',
       data: {
@@ -801,20 +832,29 @@ export const courseCompletionChart = (data: CourseCompletionChartData) => ({
           backgroundColor: chartColors[index],
           barThickness: CHART_CONFIG.bar.thickness,
           borderRadius: {
-            bottomLeft: index === 0 ? CHART_CONFIG.bar.borderRadius : 0,
-            topLeft: index === 0 ? CHART_CONFIG.bar.borderRadius : 0,
-            bottomRight: index === chartData.length - 1 ? CHART_CONFIG.bar.borderRadius : 0,
-            topRight: index === chartData.length - 1 ? CHART_CONFIG.bar.borderRadius : 0,
+            bottomLeft: index === (firstNonZeroIndex > -1 ? firstNonZeroIndex : 0) ? CHART_CONFIG.bar.borderRadius : 0,
+            topLeft: index === (firstNonZeroIndex > -1 ? firstNonZeroIndex : 0) ? CHART_CONFIG.bar.borderRadius : 0,
+            bottomRight:
+              index === (lastNonZeroIndex > -1 ? lastNonZeroIndex : chartData.length - 1)
+                ? CHART_CONFIG.bar.borderRadius
+                : 0,
+            topRight:
+              index === (lastNonZeroIndex > -1 ? lastNonZeroIndex : chartData.length - 1)
+                ? CHART_CONFIG.bar.borderRadius
+                : 0,
           },
           borderSkipped: false,
           borderWidth: {
-            right: index === chartData.length - 1 ? 0 : CHART_CONFIG.bar.borderWidth,
+            right:
+              index === (lastNonZeroIndex > -1 ? lastNonZeroIndex : chartData.length - 1)
+                ? 0
+                : CHART_CONFIG.bar.borderWidth,
           },
           borderColor: getCSSProperty(this.$refs.canvas, '--tutor-surface-l1'),
         })),
       },
       options: {
-        animation: getAnimationConfig(),
+        animation: getCompletionChartAnimation(),
         indexAxis: 'y',
         responsive: CHART_CONFIG.common.responsive,
         maintainAspectRatio: false,