fix: prevent mobile admin chart crashes (#69)

Co-authored-by: Ajit Kumar <dellevenjack@gmail>

Author: deadlyjack

client/lib/dashboardCharts.js

@@ -0,0 +1,74 @@
+function hasFinitePosition(element) {
+  return Number.isFinite(element?.x) && Number.isFinite(element?.y);
+}
+
+export function drawDoughnutPercentLabels(chart, total) {
+  const { ctx } = chart;
+  const dataset = chart.data.datasets[0];
+  const meta = chart.getDatasetMeta(0);
+
+  ctx.save();
+  try {
+    ctx.font = 'bold 14px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    for (const [index, arc] of meta.data.entries()) {
+      const value = Number(dataset.data[index]);
+      const isVisible = typeof chart.getDataVisibility !== 'function' || chart.getDataVisibility(index);
+      if (!Number.isFinite(value) || value === 0 || !isVisible || arc?.hidden || typeof arc?.tooltipPosition !== 'function') continue;
+
+      const position = arc.tooltipPosition(true);
+      if (!hasFinitePosition(position)) continue;
+
+      const percentage = Math.round((value / total) * 100);
+      ctx.fillStyle = '#ffffff';
+      ctx.shadowColor = 'rgba(0,0,0,0.6)';
+      ctx.shadowBlur = 3;
+      ctx.fillText(`${percentage}%`, position.x, position.y);
+      ctx.shadowBlur = 0;
+    }
+  } finally {
+    ctx.restore();
+  }
+}
+
+export function drawBarValueLabels(chart, formatValue) {
+  const { ctx } = chart;
+
+  ctx.save();
+  try {
+    ctx.font = 'bold 11px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'bottom';
+    ctx.fillStyle = '#ffffff';
+    ctx.shadowColor = 'rgba(0,0,0,0.5)';
+    ctx.shadowBlur = 2;
+
+    for (const [datasetIndex, dataset] of chart.data.datasets.entries()) {
+      const meta = chart.getDatasetMeta(datasetIndex);
+      const isVisible = typeof chart.isDatasetVisible !== 'function' || chart.isDatasetVisible(datasetIndex);
+      if (!isVisible || meta.hidden) continue;
+
+      for (const [index, bar] of meta.data.entries()) {
+        const value = Number(dataset.data[index]);
+        if (!Number.isFinite(value) || value === 0 || bar?.hidden || !hasFinitePosition(bar)) continue;
+        ctx.fillText(formatValue(value), bar.x, bar.y - 2);
+      }
+    }
+
+    ctx.shadowBlur = 0;
+  } finally {
+    ctx.restore();
+  }
+}
+
+export function createChartSafely({ createChart, previousChart, onError }) {
+  try {
+    previousChart?.destroy();
+    return createChart();
+  } catch (error) {
+    onError(error);
+    return null;
+  }
+}

client/pages/admin/index.js

@@ -8,6 +8,7 @@ import Input from 'components/input';
 import Tabs from 'components/tabs';
 import Reactive from 'html-tag-js/reactive';
 import Ref from 'html-tag-js/ref';
+import { createChartSafely, drawBarValueLabels, drawDoughnutPercentLabels } from 'lib/dashboardCharts';
 import { convertInrToUsd, formatCompactNumber, formatCompactUsd, formatExactNumber, formatExactUsd } from 'lib/formatNumber';
 import { getLoggedInUser } from 'lib/helpers';
 import moment from 'moment';
@@ -453,28 +454,46 @@ function Dashboard() {
         </div>,
       );
 
-      initChart(revenueCanvas, lineChartConfig(analytics.monthlyRevenue, 'Revenue (INR)', '#22c55e', true));
-      initChart(paymentsCanvas, lineChartConfig(analytics.monthlyPayments, 'Payments (INR)', '#3b82f6', true));
-      initChart(topDevCanvas, horizontalBarChartConfig(analytics.topDevelopers, 'name', 'total'));
-      initChart(providerStatusCanvas, providerStatusChartConfig(analytics.providerStatus));
-      initChart(paymentStatusCanvas, doughnutChartConfig(analytics.paymentStatus, 'status', 'count'));
-      initChart(editorCanvas, doughnutChartConfig(analytics.editorDistribution, 'editor', 'count'));
-    } catch {
+      initChart(revenueCanvas, () => lineChartConfig(analytics.monthlyRevenue, 'Revenue (INR)', '#22c55e', true), 'Monthly Revenue');
+      initChart(paymentsCanvas, () => lineChartConfig(analytics.monthlyPayments, 'Payments (INR)', '#3b82f6', true), 'Monthly Payments');
+      initChart(topDevCanvas, () => horizontalBarChartConfig(analytics.topDevelopers, 'name', 'total'), 'Top Developers');
+      initChart(providerStatusCanvas, () => providerStatusChartConfig(analytics.providerStatus), 'Orders by Provider and Status');
+      initChart(paymentStatusCanvas, () => doughnutChartConfig(analytics.paymentStatus, 'status', 'count'), 'Payment Status');
+      initChart(editorCanvas, () => doughnutChartConfig(analytics.editorDistribution, 'editor', 'count'), 'Editor Distribution');
+    } catch (error) {
+      console.error('Failed to load dashboard data', error);
       ref.innerHTML = '<div class="error">Failed to load dashboard data</div>';
     }
   })();
 
   return <div ref={ref} className='admin-dashboard' />;
 }
 
-function initChart(canvasRef, config) {
+function initChart(canvasRef, createConfig, label) {
   let instance = null;
   canvasRef.onref = () => {
-    if (instance) instance.destroy();
-    instance = new Chart(canvasRef.el, config);
+    instance = createChartSafely({
+      previousChart: instance,
+      createChart: () => new Chart(canvasRef.el, createConfig()),
+      onError: (error) => {
+        console.error(`Failed to render ${label} chart`, error);
+        showChartFallback(canvasRef.el);
+      },
+    });
   };
 }
 
+function showChartFallback(canvas) {
+  const container = canvas?.parentElement;
+  if (!container) return;
+
+  const message = document.createElement('div');
+  message.className = 'chart-error';
+  message.textContent = 'Chart unavailable';
+  container.classList.add('chart-container--error');
+  container.replaceChildren(message);
+}
+
 function lineChartConfig(rows, label, color = '#3b82f6', currency = false) {
   const months = [];
   const now = new Date();
@@ -552,26 +571,7 @@ function doughnutChartConfig(rows, labelKey, valueKey) {
       {
         id: 'doughnutPercentLabels',
         afterDatasetsDraw(chart) {
-          const { ctx, data: chartData } = chart;
-          const dataset = chartData.datasets[0];
-          const meta = chart.getDatasetMeta(0);
-          ctx.save();
-          ctx.font = 'bold 14px sans-serif';
-          ctx.textAlign = 'center';
-          ctx.textBaseline = 'middle';
-          for (let i = 0; i < dataset.data.length; i++) {
-            const value = dataset.data[i];
-            if (value === 0) continue;
-            const pct = Math.round((value / total) * 100);
-            const arc = meta.data[i];
-            const { x, y } = arc.tooltipPosition(true);
-            ctx.fillStyle = '#ffffff';
-            ctx.shadowColor = 'rgba(0,0,0,0.6)';
-            ctx.shadowBlur = 3;
-            ctx.fillText(`${pct}%`, x, y);
-            ctx.shadowBlur = 0;
-          }
-          ctx.restore();
+          drawDoughnutPercentLabels(chart, total);
         },
       },
     ],
@@ -693,25 +693,7 @@ function providerStatusChartConfig(rows) {
       {
         id: 'barValueLabels',
         afterDatasetsDraw(chart) {
-          const { ctx } = chart;
-          ctx.save();
-          ctx.font = 'bold 11px sans-serif';
-          ctx.textAlign = 'center';
-          ctx.textBaseline = 'bottom';
-          ctx.fillStyle = '#ffffff';
-          ctx.shadowColor = 'rgba(0,0,0,0.5)';
-          ctx.shadowBlur = 2;
-          for (const ds of chart.data.datasets) {
-            const meta = chart.getDatasetMeta(chart.data.datasets.indexOf(ds));
-            for (let i = 0; i < ds.data.length; i++) {
-              const value = ds.data[i];
-              if (!value) continue;
-              const { x, y } = meta.data[i];
-              ctx.fillText(formatCompactNumber(value), x, y - 2);
-            }
-          }
-          ctx.shadowBlur = 0;
-          ctx.restore();
+          drawBarValueLabels(chart, formatCompactNumber);
         },
       },
     ],

client/pages/admin/style.scss

@@ -125,6 +125,17 @@
       height: 280px;
       min-height: 0;
 
+      &.chart-container--error {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .chart-error {
+        color: rgba(255, 255, 255, 0.5);
+        font-size: 0.85em;
+      }
+
       &.chart-container--small {
         height: 230px;
       }

tests/unit/dashboard-charts.test.js

@@ -0,0 +1,145 @@
+import { createChartSafely, drawBarValueLabels, drawDoughnutPercentLabels } from '../../client/lib/dashboardCharts';
+
+function createContext() {
+  return {
+    save: vi.fn(),
+    restore: vi.fn(),
+    fillText: vi.fn(),
+  };
+}
+
+function createArc(x, y, options = {}) {
+  return {
+    hidden: false,
+    tooltipPosition: vi.fn(() => ({ x, y })),
+    ...options,
+  };
+}
+
+describe('dashboard chart labels', () => {
+  it('draws percentage labels for complete doughnut metadata', () => {
+    const ctx = createContext();
+    const chart = {
+      ctx,
+      data: { datasets: [{ data: [25, 75] }] },
+      getDatasetMeta: () => ({ data: [createArc(10, 20), createArc(30, 40)] }),
+      getDataVisibility: () => true,
+    };
+
+    drawDoughnutPercentLabels(chart, 100);
+
+    expect(ctx.fillText).toHaveBeenNthCalledWith(1, '25%', 10, 20);
+    expect(ctx.fillText).toHaveBeenNthCalledWith(2, '75%', 30, 40);
+    expect(ctx.restore).toHaveBeenCalledOnce();
+  });
+
+  it('ignores missing, hidden, zero, and non-finite doughnut elements', () => {
+    const ctx = createContext();
+    const chart = {
+      ctx,
+      data: { datasets: [{ data: [20, 30, 0, Number.NaN, 50] }] },
+      getDatasetMeta: () => ({
+        data: [createArc(10, 20), undefined, createArc(30, 40), createArc(50, 60), createArc(70, 80, { hidden: true })],
+      }),
+      getDataVisibility: () => true,
+    };
+
+    expect(() => drawDoughnutPercentLabels(chart, 100)).not.toThrow();
+    expect(ctx.fillText).toHaveBeenCalledOnce();
+    expect(ctx.fillText).toHaveBeenCalledWith('20%', 10, 20);
+    expect(ctx.restore).toHaveBeenCalledOnce();
+  });
+
+  it('handles empty rendered metadata without drawing labels', () => {
+    const doughnutContext = createContext();
+    const barContext = createContext();
+
+    expect(() =>
+      drawDoughnutPercentLabels(
+        {
+          ctx: doughnutContext,
+          data: { datasets: [{ data: [] }] },
+          getDatasetMeta: () => ({ data: [] }),
+        },
+        1,
+      ),
+    ).not.toThrow();
+    expect(() =>
+      drawBarValueLabels(
+        {
+          ctx: barContext,
+          data: { datasets: [] },
+          getDatasetMeta: () => ({ data: [], hidden: false }),
+        },
+        String,
+      ),
+    ).not.toThrow();
+
+    expect(doughnutContext.fillText).not.toHaveBeenCalled();
+    expect(barContext.fillText).not.toHaveBeenCalled();
+    expect(doughnutContext.restore).toHaveBeenCalledOnce();
+    expect(barContext.restore).toHaveBeenCalledOnce();
+  });
+
+  it('handles empty and partially materialized bar metadata', () => {
+    const ctx = createContext();
+    const chart = {
+      ctx,
+      data: {
+        datasets: [{ data: [1_000, 2_000] }, { data: [3_000] }],
+      },
+      getDatasetMeta: (index) => (index === 0 ? { data: [{ x: 12, y: 24 }], hidden: false } : { data: [], hidden: false }),
+      isDatasetVisible: () => true,
+    };
+
+    expect(() => drawBarValueLabels(chart, (value) => `${value / 1_000}K`)).not.toThrow();
+    expect(ctx.fillText).toHaveBeenCalledOnce();
+    expect(ctx.fillText).toHaveBeenCalledWith('1K', 12, 22);
+    expect(ctx.restore).toHaveBeenCalledOnce();
+  });
+
+  it('always restores canvas state when element positioning fails', () => {
+    const ctx = createContext();
+    const chart = {
+      ctx,
+      data: { datasets: [{ data: [100] }] },
+      getDatasetMeta: () => ({
+        data: [
+          createArc(0, 0, {
+            tooltipPosition: () => {
+              throw new Error('position failed');
+            },
+          }),
+        ],
+      }),
+      getDataVisibility: () => true,
+    };
+
+    expect(() => drawDoughnutPercentLabels(chart, 100)).toThrow('position failed');
+    expect(ctx.restore).toHaveBeenCalledOnce();
+  });
+});
+
+describe('dashboard chart initialization', () => {
+  it('contains one chart failure so another chart can still initialize', () => {
+    const onError = vi.fn();
+    const error = new Error('chart failed');
+
+    const failedChart = createChartSafely({
+      createChart: () => {
+        throw error;
+      },
+      onError,
+    });
+    const workingChart = { id: 'working-chart' };
+    const initializedChart = createChartSafely({
+      createChart: () => workingChart,
+      onError,
+    });
+
+    expect(failedChart).toBeNull();
+    expect(initializedChart).toBe(workingChart);
+    expect(onError).toHaveBeenCalledOnce();
+    expect(onError).toHaveBeenCalledWith(error);
+  });
+});