Skip to content

Commit

Permalink
feat(theming): improve theming
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Sep 4, 2018
1 parent dc7b37f commit c7e7a9f
Show file tree
Hide file tree
Showing 48 changed files with 45,522 additions and 43,761 deletions.
141 changes: 72 additions & 69 deletions README.md
View file

Large diffs are not rendered by default.

88,738 changes: 45,145 additions & 43,593 deletions branding/nivo-charts-icons.ai
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions packages/bar/src/Bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ const Bar = ({
label: getLabel(bar.data),
labelColor: getLabelTextColor(baseProps, theme),
borderColor: getBorderColor(baseProps),
theme,
})
})}
</g>
Expand All @@ -235,6 +236,7 @@ const Bar = ({
shouldRenderLabel: shouldRenderLabel(d),
labelColor: getLabelTextColor(d, theme),
borderColor: getBorderColor(d),
theme,
})
)
}
Expand Down Expand Up @@ -294,6 +296,7 @@ const Bar = ({
containerWidth={width}
containerHeight={height}
data={legendData}
theme={theme}
/>
)
})}
Expand Down
3 changes: 3 additions & 0 deletions packages/bar/src/BarItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ const BarItem = ({
hideTooltip,
onClick,
tooltip,

theme,
}) => {
const handleTooltip = e => showTooltip(tooltip, e)

Expand All @@ -58,6 +60,7 @@ const BarItem = ({
textAnchor="middle"
alignmentBaseline="central"
style={{
...theme.labels,
pointerEvents: 'none',
fill: labelColor,
}}
Expand Down
3 changes: 3 additions & 0 deletions packages/calendar/src/Calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const Calendar = ({
className="nivo_calendar_month_legend"
transform={transform}
textAnchor="middle"
style={theme.labels}
>
{monthLegend(month.year, month.month, month.date)}
</text>
Expand All @@ -141,6 +142,7 @@ const Calendar = ({
className="nivo_calendar_year_legend"
transform={transform}
textAnchor="middle"
style={theme.labels}
>
{yearLegend(year.year)}
</text>
Expand All @@ -160,6 +162,7 @@ const Calendar = ({
containerWidth={width}
containerHeight={height}
data={legendData}
theme={theme}
/>
)
})}
Expand Down
1 change: 1 addition & 0 deletions packages/chord/src/Chord.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ const Chord = ({
containerWidth={width}
containerHeight={height}
data={legendData}
theme={theme}
/>
))}
</SvgWrapper>
Expand Down
12 changes: 10 additions & 2 deletions packages/chord/src/ChordLabels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,11 @@ const ChordLabels = ({
transform={`translate(${textProps.x}, ${textProps.y}) rotate(${
textProps.rotate
})`}
style={{ pointerEvents: 'none', fill: color }}
style={{
...theme.labels,
pointerEvents: 'none',
fill: color,
}}
textAnchor={textProps.align}
alignmentBaseline={textProps.baseline}
>
Expand Down Expand Up @@ -82,7 +86,11 @@ const ChordLabels = ({
transform={`translate(${textProps.x}, ${textProps.y}) rotate(${
textProps.rotate
})`}
style={{ pointerEvents: 'none', fill: color }}
style={{
...theme.labels,
pointerEvents: 'none',
fill: color,
}}
textAnchor={textProps.align}
alignmentBaseline={textProps.baseline}
>
Expand Down
2 changes: 2 additions & 0 deletions packages/circle-packing/src/Bubble.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const Bubble = ({
labelTextColor: getLabelTextColor(node),
},
handlers: getHandlers(node, showTooltip, hideTooltip),
theme,
})
)}
</g>
Expand Down Expand Up @@ -120,6 +121,7 @@ const Bubble = ({
labelTextColor: getLabelTextColor(style),
},
handlers: getHandlers(node, showTooltip, hideTooltip),
theme,
})
})}
</g>
Expand Down
5 changes: 4 additions & 1 deletion packages/circle-packing/src/BubbleNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
*/
import React from 'react'
import PropTypes from 'prop-types'
import { themePropType } from '@nivo/core'

const BubbleNode = ({ node, style, handlers }) => {
const BubbleNode = ({ node, style, handlers, theme }) => {
if (style.r <= 0) return null

return (
Expand All @@ -26,6 +27,7 @@ const BubbleNode = ({ node, style, handlers }) => {
textAnchor="middle"
alignmentBaseline="central"
style={{
...theme.labels,
fill: style.labelTextColor,
pointerEvents: 'none',
}}
Expand All @@ -50,6 +52,7 @@ BubbleNode.propTypes = {
labelTextColor: PropTypes.string.isRequired,
}).isRequired,
handlers: PropTypes.object.isRequired,
theme: themePropType.isRequired,
}

export default BubbleNode
9 changes: 4 additions & 5 deletions packages/core/src/components/axes/Axes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import PropTypes from 'prop-types'
import isEqual from 'lodash/isEqual'
import shouldUpdate from 'recompose/shouldUpdate'
import { motionPropTypes } from '../../props'
import { axisThemePropType } from '../../theming'
import Axis, { axisPropType } from './Axis'

const horizontalPositions = ['top', 'bottom']
Expand Down Expand Up @@ -69,22 +70,20 @@ const Axes = ({
}

Axes.propTypes = {
// generic
xScale: PropTypes.func.isRequired,
yScale: PropTypes.func.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,

// axes
top: axisPropType,
right: axisPropType,
bottom: axisPropType,
left: axisPropType,

// theming
theme: PropTypes.object.isRequired,
theme: PropTypes.shape({
axis: axisThemePropType.isRequired,
}).isRequired,

// motion
...motionPropTypes,
}

Expand Down
27 changes: 16 additions & 11 deletions packages/core/src/components/axes/Axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { TransitionMotion, spring } from 'react-motion'
import { withMotion } from '../../hocs'
import { motionPropTypes } from '../../props'
import { computeAxisTicks } from '../../lib/cartesian/axes'
import { axisThemePropType } from '../../theming'
import AxisTick from './AxisTick'

const axisPositions = ['top', 'right', 'bottom', 'left']
Expand All @@ -37,7 +38,6 @@ export const axisPropType = PropTypes.shape({
tickRotation: PropTypes.number,
format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

// legend
legend: PropTypes.node,
legendPosition: PropTypes.oneOf(legendPositions),
legendOffset: PropTypes.number,
Expand All @@ -56,33 +56,27 @@ const willLeave = springConfig => ({ style: { x, y } }) => ({
})

const Axis = ({
// generic
scale,
width,
height,
position: _position,

// ticks
tickValues,
tickSize,
tickPadding,
tickRotation,
format,

// legend
legend: _legend,
legendPosition,
legendOffset,

// theming
theme,

// motion
animate,
motionStiffness,
motionDamping,

// interactivity
onClick,
}) => {
const { x, y, ticks, textAlign, textBaseline } = computeAxisTicks({
Expand All @@ -96,14 +90,17 @@ const Axis = ({
tickRotation,
})

const isHorizontal = ['top', 'bottom'].includes(_position)
const isVertical = !isHorizontal

let legend = null
if (_legend !== undefined) {
let legendX = 0
let legendY = 0
let legendRotation = 0
let textAnchor

if (['left', 'right'].includes(_position)) {
if (isVertical) {
legendRotation = -90
legendX = legendOffset
if (legendPosition === 'start') {
Expand All @@ -130,10 +127,9 @@ const Axis = ({

legend = (
<text
fill={theme.axis.legendColor}
transform={`translate(${legendX}, ${legendY}) rotate(${legendRotation})`}
textAnchor={textAnchor}
style={{ fontSize: theme.axis.legendFontSize }}
style={theme.axis.legend}
>
{_legend}
</text>
Expand Down Expand Up @@ -215,6 +211,13 @@ const Axis = ({
<g transform={`translate(${x},${y})`}>
{legend}
{tickElements}
<line
style={theme.axis.domain}
x1={0}
x2={isHorizontal ? width : 0}
y1={0}
y2={isHorizontal ? 0 : height}
/>
</g>
)
}
Expand All @@ -240,7 +243,9 @@ Axis.propTypes = {
legendPosition: PropTypes.oneOf(legendPositions).isRequired,
legendOffset: PropTypes.number.isRequired,

theme: PropTypes.object.isRequired,
theme: PropTypes.shape({
axis: axisThemePropType.isRequired,
}).isRequired,

onClick: PropTypes.func,

Expand Down
12 changes: 6 additions & 6 deletions packages/core/src/components/axes/AxisTick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
*/
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { axisThemePropType } from '../../theming'

export default class AxisTick extends Component {
static propTypes = {
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])
.isRequired,
format: PropTypes.func,
theme: PropTypes.object.isRequired,
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
lineX: PropTypes.number.isRequired,
Expand All @@ -26,6 +26,9 @@ export default class AxisTick extends Component {
opacity: PropTypes.number.isRequired,
rotate: PropTypes.number.isRequired,
onClick: PropTypes.func,
theme: PropTypes.shape({
axis: axisThemePropType.isRequired,
}).isRequired,
}

static defaultProps = {
Expand Down Expand Up @@ -67,15 +70,12 @@ export default class AxisTick extends Component {
{...(onClick ? { onClick: e => onClick(e, value) } : {})}
style={gStyle}
>
<line x1={0} x2={lineX} y1={0} y2={lineY} stroke={theme.axis.tickColor} />
<line x1={0} x2={lineX} y1={0} y2={lineY} style={theme.axis.ticks.line} />
<text
alignmentBaseline={textBaseline}
textAnchor={textAnchor}
transform={`translate(${textX},${textY}) rotate(${rotate})`}
style={{
fill: theme.axis.textColor,
fontSize: theme.axis.fontSize,
}}
style={theme.axis.ticks.text}
>
{value}
</text>
Expand Down
3 changes: 0 additions & 3 deletions packages/core/src/defaults/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,3 @@ export const defaultMargin = {
bottom: 0,
left: 0,
}

// theming
export * from './theme'
2 changes: 1 addition & 1 deletion packages/core/src/hocs/withTheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import compose from 'recompose/compose'
import setPropTypes from 'recompose/setPropTypes'
import withPropsOnChange from 'recompose/withPropsOnChange'
import merge from 'lodash/merge'
import { defaultTheme } from '../defaults'
import { defaultTheme } from '../theming'

/**
* This HOC watch theme prop change
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ export * from './lib/interactivity'
export * from './lib/canvas/axes'
export * from './lib/defs'
export * from './lib/bridge'
export * from './theming'
export * from './defaults'
Loading

0 comments on commit c7e7a9f

Please sign in to comment.