fix: Display only the plot data inside the plot tooltip #1836 (#1841)

h2oai · Feb 27, 2023 · af4d2ee · af4d2ee
1 parent f4b6ea8
commit af4d2ee
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/ui/src/plot.tsx b/ui/src/plot.tsx
@@ -588,6 +588,7 @@ const
     return mark
   },
   refactorData = (ds: any[], marks: MarkExt[]): any[] => {
+    ds.forEach((d, idx) => d.idx = idx)
     for (const m of marks) {
       if (m.x_scale === 'time') {
         for (const { x_field, x0_field } of marks) {
@@ -1039,22 +1040,19 @@ export interface Visualization {
 const tooltipContainer = document.createElement('div')
 tooltipContainer.className = 'g2-tooltip'
 
-const PlotTooltip = ({ items }: { items: TooltipItem[] }) =>
+const PlotTooltip = ({ items, originalItems }: { items: TooltipItem[], originalItems: any[] }) =>
   <>
     {items.map(({ data, mappingData, color }: TooltipItem) =>
-      Object.keys(data).map((item, idx) =>
-        <li key={idx} className="g2-tooltip-list-item" data-index={idx} style={{ display: 'flex', alignItems: 'center', marginBottom: 4 }}>
+      Object.keys(originalItems[data.idx]).map((itemKey, idx) => {
+        const item = originalItems[data.idx][itemKey]
+        return <li key={idx} className="g2-tooltip-list-item" data-index={idx} style={{ display: 'flex', alignItems: 'center', marginBottom: 4 }}>
           <span style={{ backgroundColor: mappingData?.color || color }} className="g2-tooltip-marker" />
           <span style={{ display: 'inline-flex', flex: 1, justifyContent: 'space-between' }}>
-            <span style={{ marginRight: 16 }}>{item}:</span>
-            <span>
-              {(Array.isArray(data[item]) ? data[item] : [data[item]]).map((val: any, idx: number) => {
-                const value = val instanceof Date ? val.toISOString().split('T')[0] : val
-                return idx > 0 ? ` - ${value}` : value
-              })}
-            </span>
+            <span style={{ marginRight: 16 }}>{itemKey}:</span>
+            <span>{(item instanceof Date ? item.toISOString().split('T')[0] : item)}</span>
           </span>
         </li>
+      }
       )
     )}
   </>
@@ -1068,6 +1066,7 @@ export const
       currentChart = React.useRef<Chart | null>(null),
       currentPlot = React.useRef<Plot | null>(null),
       themeWatchRef = React.useRef<Disposable | null>(null),
+      originalDataRef = React.useRef<any[]>([]),
       checkDimensionsPostInit = (w: F, h: F) => { // Safari fix
         const el = container.current
         if (!el) return
@@ -1092,6 +1091,7 @@ export const
           data = refactorData(raw_data, plot.marks),
           { Chart } = await import('@antv/g2'),
           chart = plot.marks ? new Chart(makeChart(el, space, plot.marks, model.interactions || [])) : null
+        originalDataRef.current = unpack<any[]>(model.data)
         currentPlot.current = plot
         if (chart) {
           chart.tooltip({
@@ -1105,7 +1105,7 @@ export const
               },
             },
             customContent: (_title, items) => {
-              ReactDOM.render(<PlotTooltip items={items} />, tooltipContainer)
+              ReactDOM.render(<PlotTooltip items={items} originalItems={originalDataRef.current} />, tooltipContainer)
               return tooltipContainer
             }
           })
@@ -1155,8 +1155,8 @@ export const
       const
         raw_data = unpack<any[]>(model.data),
         data = refactorData(raw_data, currentPlot.current.marks)
+      originalDataRef.current = unpack<any[]>(model.data)
       currentChart.current.changeData(data)
-
     }, [currentChart, currentPlot, model])
 
     const