feat: enhance UI and functionality in various components

web/default/src/features/dashboard/index.tsx

@@ -35,6 +35,12 @@ const LazyModelCharts = lazy(() =>
   }))
 )
 
+const LazyConsumptionDistributionChart = lazy(() =>
+  import('./components/models/consumption-distribution-chart').then((m) => ({
+    default: m.ConsumptionDistributionChart,
+  }))
+)
+
 const LazyUserCharts = lazy(() =>
   import('./components/users/user-charts').then((m) => ({
     default: m.UserCharts,
@@ -163,6 +169,17 @@ export function Dashboard() {
                 </Suspense>
               </FadeIn>
               <FadeIn delay={0.1}>
+                <Suspense fallback={<ModelChartsFallback />}>
+                  <LazyConsumptionDistributionChart
+                    data={modelData}
+                    loading={dataLoading}
+                    timeGranularity={
+                      modelFilters.time_granularity || DEFAULT_TIME_GRANULARITY
+                    }
+                  />
+                </Suspense>
+              </FadeIn>
+              <FadeIn delay={0.15}>
                 <Suspense fallback={<ModelChartsFallback />}>
                   <LazyModelCharts
                     data={modelData}