fix: add axis label rotation and truncation options in latency insights dashboard (#9834)

### **PR Type**
Enhancement


___

### **Description**
- Add axis label rotation option

- Add axis label truncation width option


___



<details> <summary><h3> File Walkthrough</h3></summary>

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>useLatencyInsightsDashboard.ts</strong><dd><code>Add
axis label rotation & truncation</code>&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/composables/useLatencyInsightsDashboard.ts

<ul><li>Added <code>axis_label_rotate</code> property to chart
config<br> <li> Added <code>axis_label_truncate_width</code> property to
chart config</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9834/files#diff-960dec4a653d7c079157499a2473d0e87bd8b61463e1c3f633e7682ba763a4b1">+2/-0</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___

web/src/composables/useLatencyInsightsDashboard.ts

@@ -367,6 +367,8 @@ export function useLatencyInsightsDashboard() {
           label_option: {
             rotate: 45,
           },
+          axis_label_rotate: 30,
+          axis_label_truncate_width: 80,
           color: isComparisonMode ? {
             mode: "palette-classic-by-series",
             fixedColor: ["#ffc107", "#1976d2"],

web/src/utils/dashboard/convertDataIntoUnitValue.ts

@@ -1824,8 +1824,11 @@ export const calculateRotatedLabelBottomSpace = (
     // Only add if totalNeeded exceeds a reasonable base (e.g., 40px)
     return Math.max(0, Math.ceil(totalNeededSpace - 40));
   } else {
-    // Without axis name, just add enough space for labels plus a margin
-    // verticalHeight already includes the diagonal extent
-    return Math.max(0, Math.ceil(verticalHeight - 15)); // Assuming ~15px is already available
+    // Without axis name, containLabel: true in grid config handles the space automatically
+    // for rotated labels. No additional bottom spacing is needed because:
+    // 1. containLabel: true makes ECharts automatically expand grid to fit labels
+    // 2. The grid.bottom value already provides base spacing
+    // 3. Adding extra space here causes unnecessary whitespace
+    return 10; // Let ECharts handle it with containLabel
   }
 };

web/src/utils/dashboard/convertSQLData.ts

@@ -1068,6 +1068,7 @@ export const convertSQLData = async (
     },
     tooltip: {
       trigger: "axis",
+      confine: true,
       textStyle: {
         color: store.state.theme === "dark" ? "#fff" : "#000",
         fontSize: 12,