feat(scan): use bar chart for Volume to match sibling stats

Volume was rendering as an area/line chart while Transactions, Buyers,
and Sellers used bars on the same screen. Switches Volume to bars on
the home overview, server origin, recipient activity, and facilitator
activity views (and matching loading skeletons). On the home overview
Volume now follows chartMode like its siblings (bars per-bucket, area
cumulative); the StatRow type alias keeps an eslint-disable since it
must satisfy ChartData<T extends Record<string, number>>.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: fmhall

apps/scan/src/app/(app)/(home)/(overview)/_components/stats/charts.tsx

@@ -12,6 +12,7 @@ import { convertTokenAmount, formatTokenAmount } from '@/lib/token';
 import type { ChartData, ChartItems } from '@/components/ui/charts/chart/types';
 import { useChain } from '@/app/(app)/_contexts/chain/hook';
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type StatRow = {
   transactions: number;
   totalAmount: number;
@@ -64,8 +65,7 @@ export const OverallCharts = () => {
     };
   });
 
-  // Per-bucket uses bars for counts (transactions/buyers/sellers) and an area
-  // for volume. Cumulative uses areas for everything since the line is
+  // Per-bucket uses bars; cumulative uses areas since the line is
   // monotonically increasing.
   const isCumulative = chartMode === 'cumulative';
   const buildItems = (dataKey: keyof StatRow): ChartItems<StatRow> =>
@@ -79,6 +79,7 @@ export const OverallCharts = () => {
           bars: [{ dataKey, color: 'var(--color-primary)' }],
         };
   const txItems = buildItems('transactions');
+  const volumeItems = buildItems('totalAmount');
   const buyersItems = buildItems('buyers');
   const sellersItems = buildItems('sellers');
 
@@ -109,10 +110,7 @@ export const OverallCharts = () => {
       <OverallStatsCard
         title="Volume"
         value={formatTokenAmount(BigInt(overallStats.total_amount))}
-        items={{
-          type: 'area',
-          areas: [{ dataKey: 'totalAmount', color: 'var(--color-primary)' }],
-        }}
+        items={volumeItems}
         data={chartData}
         tooltipRows={[
           {
@@ -181,7 +179,7 @@ export const LoadingOverallCharts = () => {
   return (
     <>
       <LoadingOverallStatsCard type="bar" title="Transactions" />
-      <LoadingOverallStatsCard type="area" title="Volume" />
+      <LoadingOverallStatsCard type="bar" title="Volume" />
       <LoadingOverallStatsCard type="bar" title="Buyers" />
       <LoadingOverallStatsCard type="bar" title="Sellers" />
     </>

apps/scan/src/app/(app)/facilitator/[id]/(overview)/_components/activity/charts.tsx

@@ -96,8 +96,8 @@ export const ActivityCharts: React.FC<Props> = ({ facilitatorId }) => {
             amount: formatTokenAmount(BigInt(overallStats.total_amount)),
           },
           items: {
-            type: 'area',
-            areas: [
+            type: 'bar',
+            bars: [
               {
                 dataKey: 'total_amount',
                 color: 'var(--color-primary)',
@@ -165,7 +165,7 @@ export const LoadingActivityCharts = () => {
     <LoadingMultiCharts
       tabs={[
         { type: 'bar', label: 'Transactions' },
-        { type: 'area', label: 'Volume' },
+        { type: 'bar', label: 'Volume' },
         { type: 'bar', label: 'Buyers' },
       ]}
     />

apps/scan/src/app/(app)/recipient/[address]/(overview)/_components/activity/charts.tsx

@@ -100,8 +100,8 @@ export const ActivityCharts: React.FC<Props> = ({ address }) => {
             amount: formatTokenAmount(BigInt(overallStats.total_amount)),
           },
           items: {
-            type: 'area',
-            areas: [
+            type: 'bar',
+            bars: [
               {
                 dataKey: 'total_amount',
                 color: 'var(--color-primary)',
@@ -169,7 +169,7 @@ export const LoadingActivityCharts = () => {
     <LoadingMultiCharts
       tabs={[
         { type: 'bar', label: 'Transactions' },
-        { type: 'area', label: 'Volume' },
+        { type: 'bar', label: 'Volume' },
         { type: 'bar', label: 'Buyers' },
       ]}
     />

apps/scan/src/app/(app)/server/[id]/(overview)/_components/activity/index.tsx

@@ -108,8 +108,8 @@ export const OriginActivity: React.FC<Props> = ({ originId }) => {
         title="Volume"
         value={formatTokenAmount(BigInt(overallStats.total_amount))}
         items={{
-          type: 'area',
-          areas: [{ dataKey: 'totalAmount', color: 'var(--color-primary)' }],
+          type: 'bar',
+          bars: [{ dataKey: 'totalAmount', color: 'var(--color-primary)' }],
         }}
         data={chartData}
         tooltipRows={[
@@ -160,7 +160,7 @@ export const LoadingOriginActivity = () => {
   return (
     <OriginActivityContainer>
       <LoadingOverallStatsCard type="bar" title="Transactions" />
-      <LoadingOverallStatsCard type="area" title="Volume" />
+      <LoadingOverallStatsCard type="bar" title="Volume" />
       <LoadingOverallStatsCard type="bar" title="Buyers" />
     </OriginActivityContainer>
   );