Skip to content

Commit

Permalink
feat(theming): fix tooltip theming
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Aug 23, 2017
1 parent aa5c847 commit 9385dd6
Show file tree
Hide file tree
Showing 15 changed files with 64 additions and 28 deletions.
8 changes: 3 additions & 5 deletions src/Nivo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,6 @@ export const defaultTheme = {
},
tooltip: {
container: {
display: 'flex',
alignItems: 'center',
background: 'white',
color: 'inherit',
fontSize: 'inherit',
Expand All @@ -60,10 +58,10 @@ export const defaultTheme = {
},
basic: {
whiteSpace: 'pre',
display: 'flex',
alignItems: 'center',
},
table: {
fontSize: 'inherit',
},
table: {},
tableCell: {
padding: '3px 5px',
},
Expand Down
2 changes: 2 additions & 0 deletions src/components/charts/bar/Bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const Bar = ({
{...style}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
theme={theme}
/>
)}
</g>}
Expand All @@ -127,6 +128,7 @@ const Bar = ({
{...d}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
theme={theme}
/>
)
}
Expand Down
7 changes: 6 additions & 1 deletion src/components/charts/bar/BarItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import PropTypes from 'prop-types'
import pure from 'recompose/pure'
import BasicTooltip from '../../tooltip/BasicTooltip'

const BarItem = ({ data, x, y, width, height, color, showTooltip, hideTooltip }) => {
const BarItem = ({ data, x, y, width, height, color, showTooltip, hideTooltip, theme }) => {
const handleTooltip = e =>
showTooltip(
<BasicTooltip
id={`${data.id} - ${data.indexValue}`}
value={data.value}
enableChip={true}
color={color}
theme={theme}
/>,
e
)
Expand Down Expand Up @@ -54,6 +55,10 @@ BarItem.propTypes = {

showTooltip: PropTypes.func.isRequired,
hideTooltip: PropTypes.func.isRequired,

theme: PropTypes.shape({
tooltip: PropTypes.shape({}).isRequired,
}).isRequired,
}

export default pure(BarItem)
3 changes: 2 additions & 1 deletion src/components/charts/bubble/Bubble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const createNodes = ({
getLabel,
labelSkipRadius,
getLabelTextColor,
}) => (nodes, { showTooltip, hideTooltip }) => {
}) => (nodes, { showTooltip, hideTooltip, theme }) => {
const renderedNodes = []

nodes.filter(node => node.style.r > 0).forEach(node => {
Expand All @@ -36,6 +36,7 @@ const createNodes = ({
value={node.data.value}
enableChip={true}
color={node.style.color}
theme={theme}
/>,
e
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/charts/bubble/BubblePlaceholders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const BubblePlaceholders = ({
? () => zoomToNode(node.path)
: noop,
})),
{ showTooltip, hideTooltip }
{ showTooltip, hideTooltip, theme }
)
)
)}
Expand Down Expand Up @@ -223,7 +223,7 @@ const BubblePlaceholders = ({

return interpolatedStyle
}),
{ showTooltip, hideTooltip }
{ showTooltip, hideTooltip, theme }
)
)
}}
Expand Down
1 change: 1 addition & 0 deletions src/components/charts/pie/Pie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ const Pie = ({
value={d.data.value}
enableChip={true}
color={d.data.color}
theme={theme}
/>,
e
)
Expand Down
1 change: 1 addition & 0 deletions src/components/charts/stream/Stream.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ const Stream = ({
fillOpacity={fillOpacity}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
theme={theme}
{...motionProps}
/>
<Axes
Expand Down
14 changes: 12 additions & 2 deletions src/components/charts/stream/StreamLayers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const StreamLayers = ({
showTooltip,
hideTooltip,

theme,

// motion
animate,
motionStiffness,
Expand All @@ -29,7 +31,10 @@ const StreamLayers = ({
<g>
{layers.map(({ id, path, color }, i) => {
const handleTooltip = e =>
showTooltip(<BasicTooltip id={id} enableChip={true} color={color} />, e)
showTooltip(
<BasicTooltip id={id} enableChip={true} color={color} theme={theme} />,
e
)
return (
<path
key={i}
Expand All @@ -55,7 +60,10 @@ const StreamLayers = ({
<g>
{layers.map(({ id, path, color }, i) => {
const handleTooltip = e =>
showTooltip(<BasicTooltip id={id} enableChip={true} color={color} />, e)
showTooltip(
<BasicTooltip id={id} enableChip={true} color={color} theme={theme} />,
e
)
return (
<SmartMotion
key={i}
Expand All @@ -82,6 +90,8 @@ const StreamLayers = ({
StreamLayers.propTypes = {
fillOpacity: PropTypes.number.isRequired,

theme: PropTypes.object.isRequired,

// motion
...motionPropTypes,
}
Expand Down
1 change: 1 addition & 0 deletions src/components/charts/sunburst/Sunburst.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const Sunburst = ({
borderColor={borderColor}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
theme={theme}
/>
)}
</g>
Expand Down
4 changes: 3 additions & 1 deletion src/components/charts/sunburst/SunburstArc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,22 @@ SunburstArc.propTypes = {
borderColor: PropTypes.string.isRequired,
showTooltip: PropTypes.func.isRequired,
hideTooltip: PropTypes.func.isRequired,
theme: PropTypes.object.isRequired,
}

const enhance = compose(
withPropsOnChange(['node', 'arcGenerator'], ({ node, arcGenerator }) => ({
path: arcGenerator(node),
})),
withPropsOnChange(['node', 'showTooltip'], ({ node, showTooltip }) => ({
withPropsOnChange(['node', 'showTooltip', 'theme'], ({ node, showTooltip, theme }) => ({
showTooltip: e => {
showTooltip(
<BasicTooltip
id={node.data.id}
enableChip={true}
color={node.data.color}
value={`${node.data.percentage.toFixed(2)}%`}
theme={theme}
/>,
e
)
Expand Down
3 changes: 2 additions & 1 deletion src/components/charts/treemap/TreeMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const createNodesRenderer = ({
orientLabels,
labelSkipSize,
getLabelTextColor,
}) => (nodes, { showTooltip, hideTooltip }) =>
}) => (nodes, { showTooltip, hideTooltip, theme }) =>
nodes.map(node => {
const hasLabel =
enableLabels &&
Expand All @@ -47,6 +47,7 @@ const createNodesRenderer = ({
labelTextColor={getLabelTextColor({ ...node.data, color: node.style.color })}
showTooltip={showTooltip}
hideTooltip={hideTooltip}
theme={theme}
/>
)
})
Expand Down
14 changes: 11 additions & 3 deletions src/components/charts/treemap/TreeMapNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,25 @@ TreeMapNode.propTypes = {

showTooltip: PropTypes.func.isRequired,
hideTooltip: PropTypes.func.isRequired,

theme: PropTypes.object.isRequired,
}

const enhance = compose(
withPropsOnChange(['orientLabel', 'width', 'height'], ({ orientLabel, width, height }) => ({
labelRotation: orientLabel && height > width ? -90 : 0,
})),
withPropsOnChange(
['id', 'value', 'dataColor', 'showTooltip'],
({ id, value, dataColor, showTooltip }) => {
['id', 'value', 'dataColor', 'showTooltip', 'theme'],
({ id, value, dataColor, showTooltip, theme }) => {
const tooltip = (
<BasicTooltip id={id} value={value} enableChip={true} color={dataColor} />
<BasicTooltip
id={id}
value={value}
enableChip={true}
color={dataColor}
theme={theme}
/>
)

return {
Expand Down
4 changes: 2 additions & 2 deletions src/components/charts/treemap/TreeMapPlaceholders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const TreeMapPlaceholders = ({
},
}
}),
{ showTooltip, hideTooltip }
{ showTooltip, hideTooltip, theme }
)
)
)
Expand Down Expand Up @@ -187,7 +187,7 @@ const TreeMapPlaceholders = ({
},
}
}),
{ showTooltip, hideTooltip }
{ showTooltip, hideTooltip, theme }
)
)}
</TransitionMotion>
Expand Down
16 changes: 8 additions & 8 deletions src/components/tooltip/BasicTooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ const chipStyle = { marginRight: 7 }

const BasicTooltip = ({ id, value, enableChip, color, theme }) =>
<div style={theme.tooltip.container}>
{enableChip && <Chip color={color} style={chipStyle} />}
{value !== undefined
? <span style={theme.tooltip.basic}>
{id}: <strong>{value}</strong>
</span>
: <span style={theme.tooltip.basic}>
{id}
</span>}
<div style={theme.tooltip.basic}>
{enableChip && <Chip color={color} style={chipStyle} />}
{value !== undefined
? <span>
{id}: <strong>{value}</strong>
</span>
: id}
</div>
</div>

BasicTooltip.propTypes = {
Expand Down
10 changes: 8 additions & 2 deletions src/components/tooltip/TableTooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const TableTooltip = ({ title, rows, theme }) => {
if (!rows.length) return null

return (
<div>
<div style={theme.tooltip.container}>
{title && title}
<table style={{ ...tableStyle, ...theme.tooltip.table }}>
<tbody>
Expand All @@ -41,7 +41,13 @@ const TableTooltip = ({ title, rows, theme }) => {
TableTooltip.propTypes = {
title: PropTypes.node,
rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.node)).isRequired,
theme: PropTypes.object.isRequired,
theme: PropTypes.shape({
tooltip: PropTypes.shape({
container: PropTypes.object.isRequired,
table: PropTypes.object.isRequired,
tableCell: PropTypes.object.isRequired,
}).isRequired,
}).isRequired,
}

TableTooltip.defaultProps = {}
Expand Down

0 comments on commit 9385dd6

Please sign in to comment.