feat(line): use theme values for line slice tooltip (#1471)

plouc · Apr 22, 2021 · 0f67123 · 0f67123
1 parent a1a1241
commit 0f67123
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -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>

diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
@@ -72,6 +72,9 @@ export const defaultTheme = {
         tableCell: {
             padding: '3px 5px',
         },
+        tableCellValue: {
+            fontWeight: 'bold',
+        },
     },
     crosshair: {
         line: {

diff --git a/packages/line/src/SliceTooltip.js b/packages/line/src/SliceTooltip.js
@@ -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>,
             ])}
         />
     )