Quick chart performance tweak

grantmakers · Dec 22, 2024 · fadf607 · fadf607
1 parent 8895927
commit fadf607
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/apps/web/src/lib/components/profiles/charts/BarGrantsSnapshot.svelte b/apps/web/src/lib/components/profiles/charts/BarGrantsSnapshot.svelte
@@ -2,7 +2,7 @@
   import { onMount, onDestroy } from 'svelte';
   import type { Chart } from 'chart.js';
 
-  let { rawData }: { rawData: RawData } = $props();
+  let { rawData, grantCount }: { rawData: RawData; grantCount: number } = $props();
 
   type RawData = {
     [key: string]: number;
@@ -16,6 +16,21 @@
     displayRange: string;
   }
 
+  interface TicksConfig {
+    stepSize?: number;
+    maxTicksLimit: number;
+  }
+
+  const ticksConfig: TicksConfig = {
+    stepSize: 1,
+    maxTicksLimit: 5,
+  };
+  // Chart.js will generate an unlimited amount of ticks if stepSize set to 1
+  // Causes a performance hit, and a console warning, when the number of ticks is over 1k
+  if (grantCount > 5) {
+    delete ticksConfig.stepSize;
+  }
+
   function prepareAndReduceChartData(rawData: RawData): GrantRange[] {
     const consolidatedData: { [range: string]: number } = {
       '<$500': 0,
@@ -140,10 +155,7 @@
             grid: {
               display: false,
             },
-            ticks: {
-              maxTicksLimit: 5,
-              stepSize: 1,
-            },
+            ticks: ticksConfig,
           },
           y: {
             position: 'left',

diff --git a/apps/web/src/lib/components/profiles/grants/GrantsSummaryBox.svelte b/apps/web/src/lib/components/profiles/grants/GrantsSummaryBox.svelte
@@ -144,7 +144,7 @@
   {:else if grantsFacets && grantsFacets[0].grant_count > 0}
     <h2 class="mt-4 text-sm font-bold text-slate-700">Grant Clusters</h2>
     <div class="w-full">
-      <BarGrantsSnapshot rawData={grantsFacets[0].facets.amount} />
+      <BarGrantsSnapshot rawData={grantsFacets[0].facets.amount} {grantCount} />
     </div>
   {:else}
     <div class="mt-4 opacity-30">