mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 08:09:22 +00:00
ktx-vaidehi
cd00d5b06c
### **PR Type** Enhancement, Bug fix ___ ### **Description** - Add "Color by series" UI and schema - Apply custom series colors in charts - Emit and wire series data for config - Improve autocomplete filtering robustness ___ ### Diagram Walkthrough ```mermaid flowchart LR UI["ConfigPanel adds ColorBySeries UI"] -- "saves mappings" --> Schema["color.colorBySeries in panel schema"] Charts["PanelSchemaRenderer emits series data"] -- "series-data-update" --> Pages["Visualize/Metrics/AddPanel pages"] Pages -- "pass seriesData" --> UI Colors["applySeriesColorMappings + getSeriesColor"] -- "resolve colors" --> ECharts["ECharts series options"] ``` <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><details><summary>13 files</summary><table> <tr> <td><strong>mod.rs</strong><dd><code>Add colorBySeries schema and struct</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-da49585bbcb02bf0f737bb68739ebc248edd15c7ad9427c0e68f7728bb4a8c17">+14/-0</a> </td> </tr> <tr> <td><strong>PanelSchemaRenderer.vue</strong><dd><code>Emit series data updates to parents</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+6/-0</a> </td> </tr> <tr> <td><strong>ColorBySeries.vue</strong><dd><code>New Color by series config entrypoint</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-2783259507b45f0b3664d9be68ca236690bbbf151472da3fa8b552d230af5b3f">+126/-0</a> </td> </tr> <tr> <td><strong>ColorBySeriesPopUp.vue</strong><dd><code>New popup to map series to colors</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-8b4dce28a203ce7e70550d6437f16e7661d5a4ecaf336de3450a8dc7fbe5e27a">+385/-0</a> </td> </tr> <tr> <td><strong>ConfigPanel.vue</strong><dd><code>Integrate ColorBySeries and accept panelData</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-c3a6e64dff02b58bb7cdc3f0668990b41ff41544b4c5e991bbcd989ad4bba3f8">+5/-3</a> </td> </tr> <tr> <td><strong>VisualizeLogsQuery.vue</strong><dd><code>Wire series-data-update and pass to ConfigPanel</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-979b01d943d58c5d70faeeac5948b7f02f0b2392a12b84ef07ba7f7393ab0261">+34/-7</a> </td> </tr> <tr> <td><strong>Index.vue</strong><dd><code>Capture series data and pass to ConfigPanel</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-a6734928ea4dcb5244e90de5a16fe6f5cafa95ccf58430ac7b548a065daf3d61">+11/-0</a> </td> </tr> <tr> <td><strong>AddPanel.vue</strong><dd><code>Capture panel series data for config</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+11/-1</a> </td> </tr> <tr> <td><strong>useDashboardPanel.ts</strong><dd><code>Add defaults for mappings and colorBySeries</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-fbba1700750053b9eaf38ddd30dab84531bc44131c795ebb713811e4930cd7cb">+2/-0</a> </td> </tr> <tr> <td><strong>colorPalette.ts</strong><dd><code>Prefer custom colorBySeries mapping</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-30ac812743f2388c4061647fac5e9f413bfe561f1fc5d4f6f7be82fce73f2840">+11/-0</a> </td> </tr> <tr> <td><strong>convertDataIntoUnitValue.ts</strong><dd><code>Add applySeriesColorMappings helper</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-14c6fe442ef231566ec411f9e0262cdd24ec912fc67b9154eec743282ab7211a">+82/-0</a> </td> </tr> <tr> <td><strong>convertPromQLData.ts</strong><dd><code>Apply mapped colors to PromQL charts</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-68d70ba6c622911d48cdb567940dc404a4a6468b86c6d24fb54e5f1d8aa5ca2a">+9/-0</a> </td> </tr> <tr> <td><strong>convertSQLData.ts</strong><dd><code>Apply mapped colors to SQL charts</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-88c0e865040a20b2c8bb7d77e7f6bd187a5b07c1645c120223bc9d59603752c3">+13/-1</a> </td> </tr> </table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>1 files</summary><table> <tr> <td><strong>CommonAutoComplete.vue</strong><dd><code>Fix watch comma and cleanup</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-35f59b61336a5ba3f5933f6803e8e2cc84ced59c3f0bea25f370bb2e3d21849b">+1/-2</a> </td> </tr> </table></details></td></tr><tr><td><strong>Bug fix</strong></td><td><details><summary>1 files</summary><table> <tr> <td><strong>useSearchInputUsingRegex.ts</strong><dd><code>Guard nulls in option filtering</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/7941/files#diff-f901991c2e465430e9b2434405852ac225ff94f5adfcfeb0ad0e80fdaadd0f4b">+6/-2</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___