Merge pull request #1402 from FlowFuse/1396-v1180-ui-chart-group-tool…

…tips-in-highy-populated-charts Added interaction mode to 'nearest' to fixed cluttered tooltips
FlowFuse · Oct 21, 2024 · 782c463 · 782c463
2 parents 747e337 + 266cdeb
commit 782c463
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
@@ -25,7 +25,8 @@ export default {
             chart: null,
             hasData: false,
             histogram: [], // populate later for bins per series
-            chartUpdateDebounceTimeout: null
+            chartUpdateDebounceTimeout: null,
+            tooltipDataset: []
         }
     },
     computed: {
@@ -224,10 +225,21 @@ export default {
                             }
                             return true
                         },
-                        filter: (tooltipItem) => {
+                        filter: (tooltipItem, tooltipIndex) => {
                             if (this.props.chartType === 'histogram') {
                                 // don't show tooltips for empty data points
                                 return tooltipItem.parsed.y !== undefined && tooltipItem.parsed.y > 0
+                            } else if (this.props.chartType === 'line') {
+                                if (tooltipIndex === 0) {
+                                    // first element in the loop
+                                    this.tooltipDataset = []
+                                }
+                                if (this.tooltipDataset.indexOf(tooltipItem.datasetIndex) === -1) {
+                                    this.tooltipDataset.push(tooltipItem.datasetIndex)
+                                    return true
+                                } else {
+                                    return false
+                                }
                             }
                             return true
                         }