Skip to content

Commit

Permalink
feat(pie): improve internal props naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@plouc
plouc committed Nov 4, 2020
1 parent 055e477 commit ed176a9
Show file tree
Hide file tree
Showing 8 changed files with 98 additions and 102 deletions.
21 changes: 10 additions & 11 deletions packages/pie/src/Pie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,15 @@ const Pie = ({
if (layers.includes('slices')) {
layerById.slices = (
<g key="slices" transform={`translate(${centerX},${centerY})`}>
{dataWithArc.map(arc => (
{dataWithArc.map(datumWithArc => (
<PieSlice
key={arc.id}
data={arc}
path={arcGenerator(arc.arc)}
color={arc.color}
fill={arc.fill ? arc.fill : arc.color}
key={datumWithArc.id}
datum={datumWithArc}
path={arcGenerator(datumWithArc.arc)}
color={datumWithArc.color}
fill={datumWithArc.fill ? datumWithArc.fill : datumWithArc.color}
borderWidth={borderWidth}
borderColor={borderColor(arc)}
borderColor={borderColor(datumWithArc)}
tooltipFormat={tooltipFormat}
tooltip={tooltip}
onClick={onClick}
Expand All @@ -153,7 +153,7 @@ const Pie = ({
layerById.radialLabels = (
<g key="radialLabels" transform={`translate(${centerX},${centerY})`}>
<PieRadialLabels
arcs={dataWithArc}
dataWithArc={dataWithArc}
radius={radius}
label={getRadialLabel}
skipAngle={radialLabelsSkipAngle}
Expand All @@ -173,7 +173,7 @@ const Pie = ({
layerById.sliceLabels = (
<g key="sliceLabels" transform={`translate(${centerX},${centerY})`}>
<PieSliceLabels
arcs={dataWithArc}
dataWithArc={dataWithArc}
radius={radius}
innerRadius={innerRadius}
theme={theme}
Expand All @@ -191,9 +191,8 @@ const Pie = ({
key="legends"
width={innerWidth}
height={innerHeight}
arcs={dataWithArc}
dataWithArc={dataWithArc}
legends={legends}
theme={theme}
/>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/pie/src/PieCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const PieCanvas = ({
ctx.lineWidth = borderWidth

arcGenerator(arc.arc)

ctx.fill()

if (borderWidth > 0) {
Expand Down
11 changes: 4 additions & 7 deletions packages/pie/src/PieLegends.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,26 @@
*/
import React from 'react'
import PropTypes from 'prop-types'
import { themePropType } from '@nivo/core'
import { LegendPropShape, BoxLegendSvg } from '@nivo/legends'
import { arcPropType } from './props'
import { datumWithArcPropType } from './props'

export default function PieLegends(props) {
const { width, height, legends, theme, arcs } = props
const { width, height, legends, dataWithArc } = props

return legends.map((legend, i) => (
<BoxLegendSvg
key={i}
{...legend}
containerWidth={width}
containerHeight={height}
data={arcs}
theme={theme}
data={dataWithArc}
/>
))
}

PieLegends.propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
arcs: PropTypes.arrayOf(arcPropType).isRequired,
dataWithArc: PropTypes.arrayOf(datumWithArcPropType).isRequired,
legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
theme: themePropType.isRequired,
}
8 changes: 4 additions & 4 deletions packages/pie/src/PieRadialLabels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import { line } from 'd3-shape'
import { textPropsByEngine, useTheme } from '@nivo/core'
import { arcPropType } from './props'
import { datumWithArcPropType } from './props'
import { computeRadialLabels } from './compute'

const lineGenerator = line()
.x(d => d.x)
.y(d => d.y)

const PieRadialLabels = ({
arcs,
dataWithArc,
label,
radius,
skipAngle,
Expand All @@ -32,7 +32,7 @@ const PieRadialLabels = ({
}) => {
const theme = useTheme()

const labels = computeRadialLabels(arcs, {
const labels = computeRadialLabels(dataWithArc, {
getLabel: label,
radius,
skipAngle,
Expand Down Expand Up @@ -67,7 +67,7 @@ const PieRadialLabels = ({
}

PieRadialLabels.propTypes = {
arcs: PropTypes.arrayOf(arcPropType).isRequired,
dataWithArc: PropTypes.arrayOf(datumWithArcPropType).isRequired,
label: PropTypes.func.isRequired,
skipAngle: PropTypes.number.isRequired,
radius: PropTypes.number.isRequired,
Expand Down
20 changes: 10 additions & 10 deletions packages/pie/src/PieSlice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import { BasicTooltip, useTooltip } from '@nivo/tooltip'
import { arcPropType } from './props'
import { datumWithArcPropType } from './props'

const PieSlice = ({
data,
datum,
path,
color,
fill,
Expand All @@ -29,43 +29,43 @@ const PieSlice = ({
const handleTooltip = e =>
showTooltipFromEvent(
<BasicTooltip
id={data.label || data.id}
value={data.formattedValue}
id={datum.label || datum.id}
value={datum.formattedValue}
enableChip
color={color}
format={tooltipFormat}
renderContent={
typeof tooltip === 'function' ? tooltip.bind(null, { color, ...data }) : null
typeof tooltip === 'function' ? tooltip.bind(null, { color, ...datum }) : null
}
/>,
e
)
const handleMouseEnter = e => {
onMouseEnter(data, e)
onMouseEnter(datum, e)
handleTooltip(e)
}
const handleMouseLeave = e => {
onMouseLeave(data, e)
onMouseLeave(datum, e)
hideTooltip(e)
}

return (
<path
key={data.id}
key={datum.id}
d={path}
fill={fill}
strokeWidth={borderWidth}
stroke={borderColor}
onMouseEnter={handleMouseEnter}
onMouseMove={handleTooltip}
onMouseLeave={handleMouseLeave}
onClick={() => onClick(data, event)}
onClick={() => onClick(datum, event)}
/>
)
}

PieSlice.propTypes = {
data: arcPropType.isRequired,
datum: datumWithArcPropType.isRequired,

path: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
Expand Down
20 changes: 10 additions & 10 deletions packages/pie/src/PieSliceLabels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { midAngle, positionFromAngle, labelsThemePropType } from '@nivo/core'
import { arcPropType } from './props'
import { datumWithArcPropType } from './props'

const sliceStyle = {
pointerEvents: 'none',
}

export default class PieSliceLabels extends Component {
static propTypes = {
arcs: PropTypes.arrayOf(arcPropType).isRequired,
dataWithArc: PropTypes.arrayOf(datumWithArcPropType).isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
skipAngle: PropTypes.number.isRequired,
radius: PropTypes.number.isRequired,
Expand All @@ -33,19 +33,19 @@ export default class PieSliceLabels extends Component {
}

render() {
const { arcs, label, radius, skipAngle, innerRadius, textColor, theme } = this.props
const { dataWithArc, label, radius, skipAngle, innerRadius, textColor, theme } = this.props

const centerRadius = innerRadius + (radius - innerRadius) / 2

return arcs
.filter(arc => skipAngle === 0 || arc.arc.angleDeg > skipAngle)
.map(arc => {
const angle = midAngle(arc.arc) - Math.PI / 2
return dataWithArc
.filter(datumWithArc => skipAngle === 0 || datumWithArc.arc.angleDeg > skipAngle)
.map(datumWithArc => {
const angle = midAngle(datumWithArc.arc) - Math.PI / 2
const position = positionFromAngle(angle, centerRadius)

return (
<g
key={arc.id}
key={datumWithArc.id}
transform={`translate(${position.x}, ${position.y})`}
style={sliceStyle}
>
Expand All @@ -54,10 +54,10 @@ export default class PieSliceLabels extends Component {
dominantBaseline="central"
style={{
...theme.labels.text,
fill: textColor(arc, theme),
fill: textColor(datumWithArc, theme),
}}
>
{label(arc)}
{label(datumWithArc)}
</text>
</g>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/pie/src/props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { noop, radiansToDegrees } from '@nivo/core'
import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors'
import { LegendPropShape } from '@nivo/legends'

export const arcPropType = PropTypes.shape({
export const datumWithArcPropType = PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
value: PropTypes.number.isRequired,
formattedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
Expand Down
Loading

0 comments on commit ed176a9

Please sign in to comment.