From 8107946cb15d3ea5d63f212c30fbaccbcef7f3f1 Mon Sep 17 00:00:00 2001
From: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>
Date: Wed, 16 Jul 2025 02:16:39 +0530
Subject: [PATCH] feat: added click data utils for uplot and pie charts

---
 .../QueryTable/Drilldown/drilldownUtils.tsx   | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx b/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
index ab1c78c3c440..52cb83d2d106 100644
--- a/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
@@ -1,4 +1,6 @@
+import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import cloneDeep from 'lodash-es/cloneDeep';
 import {
@@ -146,3 +148,63 @@ export const getAggregateColumnHeader = (
 		aggregations: aggregationExpressions.join(', '),
 	};
 };
+
+const getFiltersFromMetric = (metric: any): FilterData[] =>
+	Object.keys(metric).map((key) => ({
+		filterKey: key,
+		filterValue: metric[key],
+		operator: OPERATORS['='],
+	}));
+
+export const getUplotClickData = ({
+	uplotData,
+}: {
+	uplotData: any[];
+}): {
+	coord: { x: number; y: number };
+	record: { queryName: string; filters: FilterData[] };
+} | null => {
+	const [, , , , metric, queryData, absoluteMouseX, absoluteMouseY] = uplotData;
+	console.log('args', uplotData);
+	console.log('on Click', {
+		uplotData,
+		absoluteMouseX,
+		absoluteMouseY,
+	});
+
+	if (!queryData?.queryName || !metric) {
+		return null;
+	}
+
+	const record = {
+		queryName: queryData.queryName,
+		filters: getFiltersFromMetric(metric),
+	};
+
+	console.log('CLICKED DATA: ', record);
+
+	return {
+		coord: {
+			x: absoluteMouseX,
+			y: absoluteMouseY,
+		},
+		record,
+	};
+};
+
+export const getPieChartClickData = (
+	arc: PieArcDatum<{
+		label: string;
+		value: string;
+		color: string;
+		record: any;
+	}>,
+): { queryName: string; filters: FilterData[] } | null => {
+	console.log('arc ->', arc.data);
+	const { metric, queryName } = arc.data.record;
+	if (!queryName || !metric) return null;
+	return {
+		queryName,
+		filters: getFiltersFromMetric(metric), // TODO: add where clause query as well.
+	};
+};