Fix: Chart height, webhook duration, sparse data visibility, and legend size

1. Increased chart height from h-64 to h-96 for better visibility
2. Fixed webhook duration conversion from seconds to milliseconds (* 1000)
3. Fixed API requests not showing by displaying individual points for sparse data (< 10 records)
4. Reduced legend circle size with pointStyleWidth: 8
5. Added pointBackgroundColor for visible points in sparse data

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-64">
+            <div class="h-96">
                 <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-64">
+            <div class="h-96">
                 <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-64">
+            <div class="h-96">
                 <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-64">
+            <div class="h-96">
                 <Chart @type="line" @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
             </div>
         </div>

addon/components/widget/api-metrics.js

@@ -13,12 +13,21 @@ export default class WidgetApiMetricsComponent extends Component {
 
     /**
      * Create time-series data from records grouped by hour
+     * For sparse data (< 10 records), show individual points instead of grouping
      */
     createTimeSeriesData(records, filterFn = () => true) {
         const filtered = records.filter(filterFn);
-        const grouped = {};
+        
+        // If we have very few records, don't group - show each one
+        if (filtered.length < 10) {
+            return filtered.map((record) => ({
+                x: new Date(record.created_at),
+                y: 1,
+            }));
+        }
 
-        // Group by hour
+        // For larger datasets, group by hour
+        const grouped = {};
         filtered.forEach((record) => {
             const timestamp = new Date(record.created_at);
             const hourKey = format(timestamp, 'yyyy-MM-dd HH:00:00');
@@ -61,6 +70,9 @@ export default class WidgetApiMetricsComponent extends Component {
                         return statusCode >= 400;
                     });
 
+                    // Show points if we have sparse data
+                    const showPoints = records.length < 10;
+
                     resolve([
                         {
                             label: this.intl.t('developers.component.widget.api-metrics.success-label'),
@@ -70,8 +82,9 @@ export default class WidgetApiMetricsComponent extends Component {
                             borderWidth: 3,
                             fill: true,
                             tension: 0.4,
-                            pointRadius: 0,
+                            pointRadius: showPoints ? 4 : 0,
                             pointHoverRadius: 6,
+                            pointBackgroundColor: 'rgb(16, 185, 129)',
                             pointHoverBackgroundColor: 'rgb(16, 185, 129)',
                             pointHoverBorderColor: '#fff',
                             pointHoverBorderWidth: 2,
@@ -84,8 +97,9 @@ export default class WidgetApiMetricsComponent extends Component {
                             borderWidth: 3,
                             fill: true,
                             tension: 0.4,
-                            pointRadius: 0,
+                            pointRadius: showPoints ? 4 : 0,
                             pointHoverRadius: 6,
+                            pointBackgroundColor: 'rgb(239, 68, 68)',
                             pointHoverBackgroundColor: 'rgb(239, 68, 68)',
                             pointHoverBorderColor: '#fff',
                             pointHoverBorderWidth: 2,
@@ -234,7 +248,7 @@ export default class WidgetApiMetricsComponent extends Component {
                 .then((webhookRequestLogs) => {
                     const data = webhookRequestLogs.toArray().map((req) => ({
                         x: new Date(req.created_at),
-                        y: req.duration || 0,
+                        y: (req.duration || 0) * 1000, // Convert seconds to milliseconds
                     }));
 
                     resolve([
@@ -277,6 +291,7 @@ export default class WidgetApiMetricsComponent extends Component {
                     labels: {
                         color: '#9CA3AF',
                         usePointStyle: true,
+                        pointStyleWidth: 8,
                         padding: 15,
                         font: {
                             size: 12,