Skip to content

Commit

Permalink
feat(line): use theme values for line slice tooltip (#1471)
Browse files Browse the repository at this point in the history
  • Loading branch information
fpammer authored Apr 22, 2021
1 parent a1a1241 commit 0f67123
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 11 deletions.
1 change: 1 addition & 0 deletions packages/core/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ declare module '@nivo/core' {
chip: Partial<React.CSSProperties>
table: Partial<React.CSSProperties>
tableCell: Partial<React.CSSProperties>
tableCellValue: Partial<React.CSSProperties>
}
annotations: {
text: Partial<React.CSSProperties>
Expand Down
3 changes: 3 additions & 0 deletions packages/core/src/theming/defaultTheme.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ export const defaultTheme = {
tableCell: {
padding: '3px 5px',
},
tableCellValue: {
fontWeight: 'bold',
},
},
crosshair: {
line: {
Expand Down
18 changes: 7 additions & 11 deletions packages/line/src/SliceTooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,21 @@
*/
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { TableTooltip } from '@nivo/tooltip'

const Chip = ({ color }) => (
<span style={{ display: 'block', width: '12px', height: '12px', background: color }} />
)

Chip.propTypes = {
color: PropTypes.string.isRequired,
}
import { useTheme } from '@nivo/core'
import { Chip, TableTooltip } from '@nivo/tooltip'

const SliceTooltip = ({ slice, axis }) => {
const theme = useTheme()
const otherAxis = axis === 'x' ? 'y' : 'x'

return (
<TableTooltip
rows={slice.points.map(point => [
<Chip key="chip" color={point.serieColor} />,
<Chip key="chip" color={point.serieColor} style={theme.tooltip.chip} />,
point.serieId,
<strong key="value">{point.data[`${otherAxis}Formatted`]}</strong>,
<span key="value" style={theme.tooltip.tableCellValue}>
{point.data[`${otherAxis}Formatted`]}
</span>,
])}
/>
)
Expand Down

0 comments on commit 0f67123

Please sign in to comment.