[@mantine/charts] Add support for nested properties in dataKey (#5886)

* [@mantine/core] Combobox: Add onClose prop to Combobox component

* call both close handlers

* undo formatting

* format code

* Refactor Combobox component to use onDropdownClose callback

* Fix: `SegmentedControl` design breaks when inside a modal

* remove unused code

* remove unused code

* Fix: Chart legend not displaying values when they are nested

* Fix: add return type for `updateChartLegendPayload` & `updateChartTooltipPayload`

* undo code changes for `SegmentedControl` component

* format code

packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx

@@ -13,8 +13,23 @@ import { ChartSeries } from '../types';
 import { getSeriesLabels } from '../utils';
 import classes from './ChartLegend.module.css';
 
+function updateChartLegendPayload(payload: Record<string, any>[]): Record<string, any>[] {
+  return payload.map((item) => {
+    const newDataKey = item.dataKey.split('.').pop();
+    return {
+      ...item,
+      dataKey: newDataKey,
+      payload: {
+        ...item.payload,
+        name: newDataKey,
+        dataKey: newDataKey,
+      },
+    };
+  });
+}
+
 export function getFilteredChartLegendPayload(payload: Record<string, any>[]) {
-  return payload.filter((item) => item.color !== 'none');
+  return updateChartLegendPayload(payload.filter((item) => item.color !== 'none'));
 }
 
 export type ChartLegendStylesNames = 'legendItem' | 'legendItemColor' | 'legendItemName' | 'legend';

packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx

@@ -15,8 +15,20 @@ import { ChartSeries } from '../types';
 import { getSeriesLabels } from '../utils';
 import classes from './ChartTooltip.module.css';
 
+function updateChartTooltipPayload(payload: Record<string, any>[]): Record<string, any>[] {
+  return payload.map((item) => {
+    const newDataKey = item.name.split('.').pop();
+    return {
+      ...item,
+      name: newDataKey,
+    };
+  });
+}
+
 export function getFilteredChartTooltipPayload(payload: Record<string, any>[], segmentId?: string) {
-  const duplicatesFilter = payload.filter((item) => item.fill !== 'none' || !item.color);
+  const duplicatesFilter = updateChartTooltipPayload(
+    payload.filter((item) => item.fill !== 'none' || !item.color)
+  );
 
   if (!segmentId) {
     return duplicatesFilter;