Refactor: Complete rewrite of api-metrics widget with beautiful Chart.js charts

- Replaced makeDataset with custom createTimeSeriesData for hourly grouping
- Added vibrant colors with smooth curved lines (tension: 0.4)
- Implemented proper Chart.js time series format { x, y }
- Fixed status_code string to number conversion
- API Error Distribution now only shows POST, PUT, DELETE (no GET)
- Added beautiful hover effects and animations
- Improved chart styling with better colors and fills
- Removed unnecessary chartLabels (not needed for time series)
- Better responsive layout with fixed height charts
- Cleaner, more maintainable code structure

Author: roncodes

addon/components/widget/api-metrics.hbs

@@ -1,20 +1,39 @@
 <ContentPanel @title={{t "developers.component.widget.api-metrics.title"}} @open={{or @open true}} @wrapperClass="bordered-classic">
-    <div class="grid grid-cols-1 md:grid-cols-2">
-        <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.api-requests"}}</h4>
-            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.apiRequestData}} @options={{this.chartOptions}} />
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-gray-200 dark:bg-gray-800">
+        <div class="bg-white dark:bg-gray-900 p-5">
+            <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                {{t "developers.component.widget.api-metrics.api-requests"}}
+            </h4>
+            <div class="h-64">
+                <Chart @type="line" @datasets={{this.apiRequestData}} @options={{this.chartOptions}} />
+            </div>
         </div>
-        <div class="w-full border-b border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.api-error"}}</h4>
-            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.apiErrorDistributionData}} @options={{this.chartOptions}} />
+        
+        <div class="bg-white dark:bg-gray-900 p-5">
+            <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                {{t "developers.component.widget.api-metrics.api-error"}}
+            </h4>
+            <div class="h-64">
+                <Chart @type="line" @datasets={{this.apiErrorDistributionData}} @options={{this.chartOptions}} />
+            </div>
         </div>
-        <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.webhooks"}}</h4>
-            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.webhookRequestData}} @options={{this.chartOptions}} />
+        
+        <div class="bg-white dark:bg-gray-900 p-5">
+            <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                {{t "developers.component.widget.api-metrics.webhooks"}}
+            </h4>
+            <div class="h-64">
+                <Chart @type="line" @datasets={{this.webhookRequestData}} @options={{this.chartOptions}} />
+            </div>
         </div>
-        <div class="w-full border-b border-gray-200 dark:border-gray-900">
-            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.webhooks-response"}}</h4>
-            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
+        
+        <div class="bg-white dark:bg-gray-900 p-5">
+            <h4 class="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                {{t "developers.component.widget.api-metrics.webhooks-response"}}
+            </h4>
+            <div class="h-64">
+                <Chart @type="line" @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
+            </div>
         </div>
     </div>
-</ContentPanel>
+</ContentPanel>