From 23aa0749b2fe0740366f52b5ec6d754a184f3c07 Mon Sep 17 00:00:00 2001
From: ktx-abhay <141122205+ktx-abhay@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:25:15 +0530
Subject: [PATCH] fix: dashboard tooltip and drilldown issue (#2783)
- fix: view panel drilldown issue for same tab.
- fix: on legend click, show only one series.
- fix: for add panel page, chart tooltip not working.
---
web/src/components/dashboards/PanelSchemaRenderer.vue | 4 +++-
web/src/components/dashboards/panels/ChartRenderer.vue | 5 ++++-
web/src/components/dashboards/viewPanel/ViewPanel.vue | 8 +++++++-
web/src/utils/dashboard/convertPromQLData.ts | 1 +
web/src/utils/dashboard/convertSQLData.ts | 7 +++++++
web/src/views/Dashboards/RenderDashboardCharts.vue | 6 +++++-
6 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/web/src/components/dashboards/PanelSchemaRenderer.vue b/web/src/components/dashboards/PanelSchemaRenderer.vue
index 470b5037d2..0d6dc34914 100644
--- a/web/src/components/dashboards/PanelSchemaRenderer.vue
+++ b/web/src/components/dashboards/PanelSchemaRenderer.vue
@@ -370,7 +370,9 @@ export default defineComponent({
});
const hideDrilldownPopUp = () => {
- drilldownPopUpRef.value.style.display = "none";
+ if (drilldownPopUpRef.value) {
+ drilldownPopUpRef.value.style.display = "none";
+ }
};
// drilldown
diff --git a/web/src/components/dashboards/panels/ChartRenderer.vue b/web/src/components/dashboards/panels/ChartRenderer.vue
index fee93b2475..c721dcd1b1 100644
--- a/web/src/components/dashboards/panels/ChartRenderer.vue
+++ b/web/src/components/dashboards/panels/ChartRenderer.vue
@@ -167,8 +167,11 @@ export default defineComponent({
// get legend
const legendOption = chart?.getOption()?.legend[0];
- // set options with selected object
if (legendOption) {
+ // set selected array
+ legendOption.selected = params.selected;
+
+ // set options with selected object
chart?.setOption({ legend: [legendOption] });
}
};
diff --git a/web/src/components/dashboards/viewPanel/ViewPanel.vue b/web/src/components/dashboards/viewPanel/ViewPanel.vue
index 7a7aa3d9f2..92f3206f35 100644
--- a/web/src/components/dashboards/viewPanel/ViewPanel.vue
+++ b/web/src/components/dashboards/viewPanel/ViewPanel.vue
@@ -88,6 +88,7 @@
:width="6"
@error="handleChartApiError"
@updated:data-zoom="onDataZoom"
+ @update:initialVariableValues="onUpdateInitialVariableValues"
data-test="dashboard-viewpanel-panel-schema-renderer"
/>
@@ -153,7 +154,7 @@ export default defineComponent({
type: Object,
},
},
- emits: ["closePanel"],
+ emits: ["closePanel", "update:initialVariableValues"],
setup(props, { emit }) {
// This will be used to copy the chart data to the chart renderer component
// This will deep copy the data object without reactivity and pass it on to the chart renderer
@@ -412,6 +413,10 @@ export default defineComponent({
return { value: variableObj };
};
+ const onUpdateInitialVariableValues = (...args: any[]) => {
+ emit("update:initialVariableValues", ...args);
+ };
+
return {
t,
updateDateTime,
@@ -433,6 +438,7 @@ export default defineComponent({
histogramFields,
onDataZoom,
getInitialVariablesData,
+ onUpdateInitialVariableValues,
};
},
});
diff --git a/web/src/utils/dashboard/convertPromQLData.ts b/web/src/utils/dashboard/convertPromQLData.ts
index 1dd2245029..cd48e03805 100644
--- a/web/src/utils/dashboard/convertPromQLData.ts
+++ b/web/src/utils/dashboard/convertPromQLData.ts
@@ -132,6 +132,7 @@ export const convertPromQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
diff --git a/web/src/utils/dashboard/convertSQLData.ts b/web/src/utils/dashboard/convertSQLData.ts
index 8c5a226743..c3b25e0870 100644
--- a/web/src/utils/dashboard/convertSQLData.ts
+++ b/web/src/utils/dashboard/convertSQLData.ts
@@ -249,6 +249,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
@@ -517,6 +518,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
@@ -645,6 +647,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
@@ -695,6 +698,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
@@ -867,6 +871,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
@@ -1243,6 +1248,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
@@ -1367,6 +1373,7 @@ export const convertSQLData = (
// show tooltip for hovered panel only for other we only need axis so just return empty string
if (
hoveredSeriesState?.value &&
+ panelSchema.id &&
hoveredSeriesState?.value?.panelId != panelSchema.id
)
return "";
diff --git a/web/src/views/Dashboards/RenderDashboardCharts.vue b/web/src/views/Dashboards/RenderDashboardCharts.vue
index b0beed2f58..960cac2a01 100644
--- a/web/src/views/Dashboards/RenderDashboardCharts.vue
+++ b/web/src/views/Dashboards/RenderDashboardCharts.vue
@@ -88,7 +88,7 @@ along with this program. If not, see .
-
+
.
:initialVariableValues="variablesData"
@close-panel="() => (showViewPanel = false)"
:class="store.state.theme == 'dark' ? 'dark-mode' : 'bg-white'"
+ @update:initial-variable-values="updateInitialVariableValues"
/>
@@ -329,6 +330,9 @@ export default defineComponent({
// update initial variable values using the variable value selector ref
const updateInitialVariableValues = async (...args: any) => {
+ // if view panel is open then close it
+ showViewPanel.value = false;
+
// first, refresh the dashboard
refreshDashboard();
// then, update the initial variable values