Final polish: Increase chart heights and improve duration fill

1. Increased all chart heights from h-96 (384px) to h-[28rem] (448px)
2. Changed duration chart fill from 'true' to 'origin' for proper rendering
3. Increased backgroundColor opacity from 0.15 to 0.2 for better visibility

Charts now have more vertical space and duration chart has visible fill.

Author: roncodes

addon/components/widget/api-metrics.hbs

@@ -4,7 +4,7 @@
             <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-96">
+            <div class="h-[28rem]">
                 <Chart @type="line" @datasets={{this.apiRequestData}} @options={{this.chartOptions}} />
             </div>
         </div>
@@ -13,7 +13,7 @@
             <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-96">
+            <div class="h-[28rem]">
                 <Chart @type="line" @datasets={{this.apiErrorDistributionData}} @options={{this.chartOptions}} />
             </div>
         </div>
@@ -22,7 +22,7 @@
             <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-96">
+            <div class="h-[28rem]">
                 <Chart @type="line" @datasets={{this.webhookRequestData}} @options={{this.chartOptions}} />
             </div>
         </div>
@@ -31,7 +31,7 @@
             <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-96">
+            <div class="h-[28rem]">
                 <Chart @type="line" @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
             </div>
         </div>

addon/components/widget/api-metrics.js

@@ -283,10 +283,10 @@ export default class WidgetApiMetricsComponent extends Component {
                         {
                             label: this.intl.t('developers.component.widget.api-metrics.duration-ms'),
                             data,
-                            backgroundColor: 'rgba(168, 85, 247, 0.15)',
+                            backgroundColor: 'rgba(168, 85, 247, 0.2)',
                             borderColor: 'rgb(168, 85, 247)',
                             borderWidth: 3,
-                            fill: true,
+                            fill: 'origin',
                             tension: 0.4,
                             pointRadius: showPoints ? 3 : 0,
                             pointBackgroundColor: 'rgb(168, 85, 247)',