| import React from 'react'; |
| import { isCompleteFieldDef } from 'encodable'; |
| import { uniqBy } from 'lodash'; |
| import { Tooltip } from '@vx/tooltip'; |
| import { TooltipFrame, TooltipTable } from '@superset-ui/core'; |
| import { ChoroplethMapChannelOutputs, ChoroplethMapEncoder } from './Encoder'; |
| |
| export type MapDataPoint = Omit<ChoroplethMapChannelOutputs, 'tooltip'> & { |
| datum: Record<string, unknown>; |
| }; |
| |
| export type MapTooltipProps = { |
| top?: number; |
| left?: number; |
| encoder: ChoroplethMapEncoder; |
| tooltipData?: MapDataPoint; |
| }; |
| |
| export default function MapTooltip({ encoder, left, top, tooltipData }: MapTooltipProps) { |
| if (!tooltipData) { |
| return null; |
| } |
| |
| const { channels } = encoder; |
| const { key, fill, stroke, strokeWidth, opacity, tooltip } = channels; |
| const { datum } = tooltipData; |
| |
| const tooltipRows = [ |
| { key: 'key', keyColumn: key.getTitle(), valueColumn: key.formatDatum(datum) }, |
| ]; |
| |
| [fill, stroke, opacity, strokeWidth].forEach(channel => { |
| if (isCompleteFieldDef<string | number>(channel.definition)) { |
| tooltipRows.push({ |
| key: channel.name as string, |
| keyColumn: channel.getTitle(), |
| valueColumn: channel.formatDatum(datum), |
| }); |
| } |
| }); |
| |
| tooltip.forEach(g => { |
| tooltipRows.push({ |
| key: `${g.name}`, |
| keyColumn: g.getTitle(), |
| valueColumn: g.formatDatum(datum), |
| }); |
| }); |
| |
| return ( |
| <Tooltip top={top} left={left}> |
| <TooltipFrame> |
| <TooltipTable data={uniqBy(tooltipRows, row => row.keyColumn)} /> |
| </TooltipFrame> |
| </Tooltip> |
| ); |
| } |