Skip to content

Commit

Permalink
feat(treemap): use @nivo/colors for inherited colors
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Apr 17, 2019
1 parent 53ffed9 commit 4b5e65b
Show file tree
Hide file tree
Showing 8 changed files with 35 additions and 54 deletions.
11 changes: 5 additions & 6 deletions packages/treemap/src/enhance.js
View file
Expand Up @@ -20,10 +20,9 @@ import {
getAccessorFor,
getLabelGenerator,
treeMapTileFromProp,
getInheritedColorGenerator,
bindDefs,
} from '@nivo/core'
import { getOrdinalColorScale } from '@nivo/colors'
import { getOrdinalColorScale, getInheritedColorGenerator } from '@nivo/colors'
import * as props from './props'

const computeNodePath = (node, getIdentity) =>
Expand All @@ -43,14 +42,14 @@ const commonEnhancers = [
withPropsOnChange(['identity'], ({ identity }) => ({
getIdentity: getAccessorFor(identity),
})),
withPropsOnChange(['borderColor'], ({ borderColor }) => ({
getBorderColor: getInheritedColorGenerator(borderColor),
withPropsOnChange(['borderColor', 'theme'], ({ borderColor, theme }) => ({
getBorderColor: getInheritedColorGenerator(borderColor, theme),
})),
withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
getLabel: getLabelGenerator(label, labelFormat),
})),
withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
getLabelTextColor: getInheritedColorGenerator(labelTextColor),
withPropsOnChange(['labelTextColor', 'theme'], ({ labelTextColor, theme }) => ({
getLabelTextColor: getInheritedColorGenerator(labelTextColor, theme),
})),
withPropsOnChange(
['width', 'height', 'tile', 'innerPadding', 'outerPadding'],
Expand Down
28 changes: 9 additions & 19 deletions packages/treemap/src/props.js
View file
Expand Up @@ -8,16 +8,14 @@
*/
import PropTypes from 'prop-types'
import { noop, treeMapTilePropType, defsPropTypes } from '@nivo/core'
import { ordinalColorsPropType, colorPropertyAccessorPropType } from '@nivo/colors'
import {
ordinalColorsPropType,
colorPropertyAccessorPropType,
inheritedColorPropType,
} from '@nivo/colors'
import TreeMapNode from './TreeMapNode'
import TreeMapHtmlNode from './TreeMapHtmlNode'

/*—————————————————————————————————————————————————————————————————————————————
Prop types
—————————————————————————————————————————————————————————————————————————————*/

const commonPropTypes = {
// data
// `root` managed by `withHierarchy()` HOC
Expand All @@ -35,18 +33,16 @@ const commonPropTypes = {
innerPadding: PropTypes.number.isRequired,
outerPadding: PropTypes.number.isRequired,

// labels
enableLabel: PropTypes.bool.isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
labelFormat: PropTypes.string,
labelSkipSize: PropTypes.number.isRequired,
labelTextColor: inheritedColorPropType.isRequired,
orientLabel: PropTypes.bool.isRequired,

// border
borderWidth: PropTypes.number.isRequired,
borderColor: PropTypes.any.isRequired,
borderColor: inheritedColorPropType.isRequired,

// interactivity
isInteractive: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
tooltip: PropTypes.func,
Expand All @@ -68,12 +64,6 @@ export const TreeMapCanvasPropTypes = {
pixelRatio: PropTypes.number.isRequired,
}

/*—————————————————————————————————————————————————————————————————————————————
Default props
—————————————————————————————————————————————————————————————————————————————*/

const commonDefaultProps = {
identity: 'id',

Expand All @@ -86,14 +76,14 @@ const commonDefaultProps = {
enableLabel: true,
label: 'id',
labelSkipSize: 0,
labelTextColor: 'inherit:darker(1)',
labelTextColor: { from: 'color', modifiers: [['darker', 1]] },
orientLabel: true,

innerPadding: 0,
outerPadding: 0,

borderWidth: 0,
borderColor: 'inherit',
borderColor: { from: 'color' },

isInteractive: true,
onClick: noop,
Expand Down
4 changes: 1 addition & 3 deletions website/src/data/components/treemap/mapper.js
View file
Expand Up @@ -6,14 +6,12 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
import { settingsMapper, mapInheritedColor } from '../../../lib/settings'
import { settingsMapper } from '../../../lib/settings'

export default settingsMapper({
label: value => {
if (value === `d => \`\${d.name} (\${d.loc})\``) return d => `${d.name} (${d.loc})`
return value
},
labelFormat: (value, settings) => (settings.label === 'loc' ? value : undefined),
borderColor: mapInheritedColor,
labelTextColor: mapInheritedColor,
})
14 changes: 4 additions & 10 deletions website/src/data/components/treemap/props.js
View file
Expand Up @@ -180,14 +180,11 @@ const props = [
key: 'borderColor',
scopes: '*',
help: 'Method to compute border color.',
type: 'string | Function',
type: 'string | object | Function',
required: false,
defaultValue: defaults.borderColor,
controlType: 'color',
controlType: 'inheritedColor',
group: 'Style',
controlOptions: {
withCustomColor: true,
},
},
...defsProperties(['TreeMap']),
{
Expand Down Expand Up @@ -245,13 +242,10 @@ const props = [
key: 'labelTextColor',
scopes: '*',
help: 'Method to compute label text color.',
type: 'string | Function',
type: 'string | object | Function',
required: false,
controlType: 'color',
controlType: 'inheritedColor',
group: 'Labels',
controlOptions: {
withCustomColor: true,
},
},
{
key: 'isInteractive',
Expand Down
8 changes: 4 additions & 4 deletions website/src/pages/treemap/api.js
View file
Expand Up @@ -42,8 +42,8 @@ const TreeMapApi = () => {
label: 'loc',
labelFormat: '.0s',
labelTextColor: {
type: 'inherit:darker',
gamma: 0.6,
from: 'color',
modifiers: [['darker', 0.6]],
},
orientLabels: true,

Expand All @@ -52,8 +52,8 @@ const TreeMapApi = () => {

borderWidth: 1,
borderColor: {
type: 'inherit:darker',
gamma: 0.3,
from: 'color',
modifiers: [['darker', 0.3]],
},
identity: 'name',
value: 'loc',
Expand Down
8 changes: 4 additions & 4 deletions website/src/pages/treemap/canvas.js
View file
Expand Up @@ -38,17 +38,17 @@ const initialProperties = {
labelFormat: '.0s',
labelSkipSize: 18,
labelTextColor: {
type: 'inherit:darker',
gamma: 1.6,
from: 'color',
modifiers: [['darker', 1.6]],
},
orientLabel: true,

colors: { scheme: 'red_blue' },
colorBy: 'name',
borderWidth: 0,
borderColor: {
type: 'inherit:darker',
gamma: 0.8,
from: 'color',
modifiers: [['darker', 0.8]],
},

isInteractive: true,
Expand Down
8 changes: 4 additions & 4 deletions website/src/pages/treemap/html.js
View file
Expand Up @@ -35,17 +35,17 @@ const initialProperties = {
labelFormat: '.0s',
labelSkipSize: 12,
labelTextColor: {
type: 'inherit:darker',
gamma: 1.2,
from: 'color',
modifiers: [['darker', 1.2]],
},
orientLabel: true,

colors: { scheme: 'red_yellow_blue' },
colorBy: 'depth',
borderWidth: 0,
borderColor: {
type: 'inherit:darker',
gamma: 0.3,
from: 'color',
modifiers: [['darker', 0.3]],
},

animate: true,
Expand Down
8 changes: 4 additions & 4 deletions website/src/pages/treemap/index.js
View file
Expand Up @@ -35,17 +35,17 @@ const initialProperties = {
labelFormat: '.0s',
labelSkipSize: 12,
labelTextColor: {
type: 'inherit:darker',
gamma: 1.2,
from: 'color',
modifiers: [['darker', 1.2]],
},
orientLabel: true,

colors: { scheme: 'nivo' },
colorBy: 'depth',
borderWidth: 0,
borderColor: {
type: 'inherit:darker',
gamma: 0.3,
from: 'color',
modifiers: [['darker', 0.3]],
},

animate: true,
Expand Down

0 comments on commit 4b5e65b

Please sign in to comment.