feat(bar): fix tooltip position when triggering it from focus

plouc · Aug 14, 2021 · 8c139c3 · 8c139c3
1 parent 57406d0
commit 8c139c3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/packages/bar/src/BarItem.tsx b/packages/bar/src/BarItem.tsx
@@ -73,8 +73,7 @@ export const BarItem = <RawDatum extends BarDatum>({
 
     // extra handlers to allow keyboard navigation
     const handleFocus = useCallback(() => {
-        console.log(bar)
-        showTooltipAt(renderTooltip(), [bar.x, bar.y])
+        showTooltipAt(renderTooltip(), [bar.absX + bar.width / 2, bar.absY])
     }, [showTooltipAt, renderTooltip, bar])
     const handleBlur = useCallback(() => {
         hideTooltip()

diff --git a/packages/bar/src/compute/grouped.ts b/packages/bar/src/compute/grouped.ts
@@ -1,8 +1,8 @@
-import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
+import { Margin } from '@nivo/core'
 import { OrdinalColorScale } from '@nivo/colors'
-import { Scale, ScaleBand } from '@nivo/scales'
+import { Scale, ScaleBand, computeScale } from '@nivo/scales'
+import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
 import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
-import { computeScale } from '@nivo/scales'
 
 type Params<RawDatum, XScaleInput, YScaleInput> = {
     data: RawDatum[]
@@ -14,6 +14,7 @@ type Params<RawDatum, XScaleInput, YScaleInput> = {
     keys: string[]
     xScale: XScaleInput extends string ? ScaleBand<XScaleInput> : Scale<XScaleInput, number>
     yScale: YScaleInput extends string ? ScaleBand<YScaleInput> : Scale<YScaleInput, number>
+    margin: Margin
 }
 
 const gt = (value: number, other: number) => value > other
@@ -39,6 +40,7 @@ const generateVerticalGroupedBars = <RawDatum extends Record<string, unknown>>(
         keys,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, string, number>,
     barWidth: number,
     reverse: boolean,
@@ -73,6 +75,8 @@ const generateVerticalGroupedBars = <RawDatum extends Record<string, unknown>>(
                 data: barData,
                 x,
                 y,
+                absX: margin.left + x,
+                absY: margin.top + y,
                 width: barWidth,
                 height: barHeight,
                 color: getColor(barData),
@@ -98,6 +102,7 @@ const generateHorizontalGroupedBars = <RawDatum extends Record<string, unknown>>
         innerPadding = 0,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, number, string>,
     barHeight: number,
     reverse: boolean,
@@ -132,6 +137,8 @@ const generateHorizontalGroupedBars = <RawDatum extends Record<string, unknown>>
                 data: barData,
                 x,
                 y,
+                absX: margin.left + x,
+                absY: margin.top + y,
                 width: barWidth,
                 height: barHeight,
                 color: getColor(barData),
@@ -178,6 +185,7 @@ export const generateGroupedBars = <RawDatum extends BarDatum>({
     getColor: OrdinalColorScale<ComputedDatum<RawDatum>>
     getIndex: (datum: RawDatum) => string
     getTooltipLabel: (datum: ComputedDatum<RawDatum>) => string
+    margin: Margin
     hiddenIds?: string[]
 }) => {
     const keys = props.keys.filter(key => !hiddenIds.includes(key))

diff --git a/packages/bar/src/compute/stacked.ts b/packages/bar/src/compute/stacked.ts
@@ -1,7 +1,8 @@
-import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
+import { Margin } from '@nivo/core'
 import { OrdinalColorScale } from '@nivo/colors'
 import { Scale, ScaleBand, computeScale } from '@nivo/scales'
 import { Series, SeriesPoint, stack, stackOffsetDiverging } from 'd3-shape'
+import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
 import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
 
 type StackDatum<RawDatum> = SeriesPoint<RawDatum>
@@ -15,6 +16,7 @@ type Params<RawDatum, XScaleInput, YScaleInput> = {
     stackedData: Series<RawDatum, string>[]
     xScale: XScaleInput extends string ? ScaleBand<XScaleInput> : Scale<XScaleInput, number>
     yScale: YScaleInput extends string ? ScaleBand<YScaleInput> : Scale<YScaleInput, number>
+    margin: Margin
 }
 
 const flattenDeep = <T>(arr: T[]): T =>
@@ -36,6 +38,7 @@ const generateVerticalStackedBars = <RawDatum extends Record<string, unknown>>(
         stackedData,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, string, number>,
     barWidth: number,
     reverse: boolean
@@ -68,6 +71,8 @@ const generateVerticalStackedBars = <RawDatum extends Record<string, unknown>>(
                 data: barData,
                 x,
                 y,
+                absX: margin.left + x,
+                absY: margin.top + y,
                 width: barWidth,
                 height: barHeight,
                 color: getColor(barData),
@@ -92,6 +97,7 @@ const generateHorizontalStackedBars = <RawDatum extends Record<string, unknown>>
         stackedData,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, number, string>,
     barHeight: number,
     reverse: boolean
@@ -124,6 +130,8 @@ const generateHorizontalStackedBars = <RawDatum extends Record<string, unknown>>
                 data: barData,
                 x,
                 y,
+                absX: margin.left + x,
+                absY: margin.top + y,
                 width: barWidth,
                 height: barHeight,
                 color: getColor(barData),
@@ -170,6 +178,7 @@ export const generateStackedBars = <RawDatum extends BarDatum>({
     getColor: OrdinalColorScale<ComputedDatum<RawDatum>>
     getIndex: (datum: RawDatum) => string
     getTooltipLabel: (datum: ComputedDatum<RawDatum>) => string
+    margin: Margin
     hiddenIds?: string[]
 }) => {
     const keys = props.keys.filter(key => !hiddenIds.includes(key))

diff --git a/packages/bar/src/hooks.ts b/packages/bar/src/hooks.ts
@@ -8,7 +8,6 @@ import {
     ComputedBarDatumWithValue,
     LegendData,
     BarLegendProps,
-    ComputedBarDatum,
 } from './types'
 import { defaultProps } from './props'
 import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
@@ -29,6 +28,7 @@ export const useBar = <RawDatum extends BarDatum>({
     data,
     minValue = defaultProps.minValue,
     maxValue = defaultProps.maxValue,
+    margin,
     width,
     height,
     padding = defaultProps.padding,
@@ -113,6 +113,7 @@ export const useBar = <RawDatum extends BarDatum>({
         hiddenIds,
         formatValue,
         getTooltipLabel,
+        margin,
     })
 
     const barsWithValue = useMemo(

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
@@ -52,6 +52,8 @@ export type ComputedBarDatum<RawDatum> = {
     data: ComputedDatum<RawDatum>
     x: number
     y: number
+    absX: number
+    absY: number
     width: number
     height: number
     color: string