Commit f633be4

authored

fixed tooltip for pie chart (#192)

1 parent 4e1ac22 commit f633be4Copy full SHA for f633be4

File tree

2 files changed

-13

lines changed

packages/grafana-ui/src/components/Portal
- Portal.tsx
public/app/plugins/panel/piechart
- PieChart.tsx

2 files changed

-13

lines changed

`‎packages/grafana-ui/src/components/Portal/Portal.tsx`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ interface Props {`
`13`	`13`	`forwardedRef?: React.ForwardedRef<HTMLDivElement>;`
`14`	`14`	`}`
`15`	`15`
`16`		`-export function Portal(props: PropsWithChildren<Props>) {`
	`16`	`+export const Portal: React.FC<PropsWithChildren<Props>>=(props)=> {`
`17`	`17`	`const { children, className, root, forwardedRef } = props;`
`18`	`18`	`const theme = useTheme2();`
`19`	`19`	`const node = useRef<HTMLDivElement \| null>(null);`

`‎public/app/plugins/panel/piechart/PieChart.tsx`

Lines changed: 6 additions & 12 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { localPoint } from '@visx/event';`
`3`	`3`	`import { RadialGradient } from '@visx/gradient';`
`4`	`4`	`import { Group } from '@visx/group';`
`5`	`5`	`import Pie, { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';`
`6`		`-import { useTooltip,useTooltipInPortal } from '@visx/tooltip';`
	`6`	`+import { useTooltip } from '@visx/tooltip';`
`7`	`7`	`import { UseTooltipParams } from '@visx/tooltip/lib/hooks/useTooltip';`
`8`	`8`	`import { useCallback } from 'react';`
`9`	`9`	`import * as React from 'react';`
`@@ -60,10 +60,6 @@ export const PieChart = ({`
`60`	`60`	`const componentInstanceId = useComponentInstanceId('PieChart');`
`61`	`61`	`const styles = useStyles2(getStyles);`
`62`	`62`	`const tooltip = useTooltip<SeriesTableRowProps[]>();`
`63`		`- const { containerRef, TooltipInPortal } = useTooltipInPortal({`
`64`		`- detectBounds: true,`
`65`		`- scroll: true,`
`66`		`- });`
`67`	`63`
`68`	`64`	`const filteredFieldDisplayValues = fieldDisplayValues.filter(filterDisplayItems);`
`69`	`65`
`@@ -85,7 +81,7 @@ export const PieChart = ({`
`85`	`81`
`86`	`82`	`return (`
`87`	`83`	`<div className={styles.container}>`
`88`		`- <svg width={layout.size} height={layout.size} ref={containerRef}style={{ overflow: 'visible' }}>`
	`84`	`+ <svg width={layout.size} height={layout.size} style={{ overflow: 'visible' }}>`
`89`	`85`	`<Group top={layout.position} left={layout.position}>`
`90`	`86`	`{colors.map((color) => {`
`91`	`87`	`return (`
`@@ -169,16 +165,14 @@ export const PieChart = ({`
`169`	`165`	`</Group>`
`170`	`166`	`</svg>`
`171`	`167`	`{showTooltip ? (`
`172`		`- <TooltipInPortal`
	`168`	`+ <div`
`173`	`169`	`key={Math.random()}`
`174`		`- top={tooltip.tooltipTop}`
	`170`	`+ style={{ position: 'absolute', top: layout.position,`
	`171`	`+ left: layout.position, zIndex: 9999 }}`
`175`	`172`	`className={styles.tooltipPortal}`
`176`		`- left={tooltip.tooltipLeft}`
`177`		`- unstyled={true}`
`178`		`- applyPositionStyle={true}`
`179`	`173`	`>`
`180`	`174`	`<SeriesTable series={tooltip.tooltipData!} />`
`181`		`- </TooltipInPortal>`
	`175`	`+ </div>`
`182`	`176`	`) : null}`
`183`	`177`	`</div>`
`184`	`178`	`);`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit f633be4

File tree

2 files changed

2 files changed

`‎packages/grafana-ui/src/components/Portal/Portal.tsx`

`‎public/app/plugins/panel/piechart/PieChart.tsx`

0 commit comments