feat(website): add doc for bar label + fix stories links

plouc · Mar 22, 2019 · 223c5e5 · 223c5e5
1 parent 16253fa
commit 223c5e5
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 140 deletions.
diff --git a/packages/circle-packing/src/BubbleCanvas.js b/packages/circle-packing/src/BubbleCanvas.js
@@ -92,13 +92,15 @@ class BubbleCanvas extends Component {
             this.ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
 
             // draw labels on top
-            nodes.filter(({ r }) => r > labelSkipRadius).forEach(node => {
-                const label = getLabel(node)
-                const labelTextColor = getLabelTextColor(node)
-
-                this.ctx.fillStyle = labelTextColor
-                this.ctx.fillText(label, node.x, node.y)
-            })
+            nodes
+                .filter(({ r }) => r > labelSkipRadius)
+                .forEach(node => {
+                    const label = getLabel(node)
+                    const labelTextColor = getLabelTextColor(node)
+
+                    this.ctx.fillStyle = labelTextColor
+                    this.ctx.fillText(label, node.x, node.y)
+                })
         }
     }
 

diff --git a/packages/generators/src/sankey.js b/packages/generators/src/sankey.js
@@ -7,19 +7,23 @@ import { names } from './sets'
 const availableNodes = names.map(name => ({ id: name }))
 
 const getNodeTargets = (id, links, currentPath) => {
-    const targets = links.filter(({ source }) => source === id).map(({ target }) => {
-        if (target === id) {
-            throw new Error(`[sankey] a node cannot be linked on itself:\n  link: ${id} —> ${id}`)
-        }
-        if (currentPath && currentPath.includes(target)) {
-            throw new Error(
-                `[sankey] found cyclic dependency:\n  link: ${currentPath.join(
-                    ' —> '
-                )} —> ${target}`
-            )
-        }
-        return target
-    })
+    const targets = links
+        .filter(({ source }) => source === id)
+        .map(({ target }) => {
+            if (target === id) {
+                throw new Error(
+                    `[sankey] a node cannot be linked on itself:\n  link: ${id} —> ${id}`
+                )
+            }
+            if (currentPath && currentPath.includes(target)) {
+                throw new Error(
+                    `[sankey] found cyclic dependency:\n  link: ${currentPath.join(
+                        ' —> '
+                    )} —> ${target}`
+                )
+            }
+            return target
+        })
 
     return targets.reduce(
         (acc, targetId) =>

diff --git a/packages/pie/src/PieSlicesLabels.js b/packages/pie/src/PieSlicesLabels.js
@@ -39,28 +39,30 @@ export default class PieSlicesLabels extends Component {
 
         return (
             <Fragment>
-                {arcs.filter(arc => skipAngle === 0 || arc.angleDeg > skipAngle).map(arc => {
-                    const angle = midAngle(arc) - Math.PI / 2
-                    const position = positionFromAngle(angle, centerRadius)
+                {arcs
+                    .filter(arc => skipAngle === 0 || arc.angleDeg > skipAngle)
+                    .map(arc => {
+                        const angle = midAngle(arc) - Math.PI / 2
+                        const position = positionFromAngle(angle, centerRadius)
 
-                    return (
-                        <g
-                            key={arc.data.id}
-                            transform={`translate(${position.x}, ${position.y})`}
-                            style={sliceStyle}
-                        >
-                            <text
-                                textAnchor="middle"
-                                style={{
-                                    ...theme.labels.text,
-                                    fill: textColor(arc.data, theme),
-                                }}
+                        return (
+                            <g
+                                key={arc.data.id}
+                                transform={`translate(${position.x}, ${position.y})`}
+                                style={sliceStyle}
                             >
-                                {label(arc.data)}
-                            </text>
-                        </g>
-                    )
-                })}
+                                <text
+                                    textAnchor="middle"
+                                    style={{
+                                        ...theme.labels.text,
+                                        fill: textColor(arc.data, theme),
+                                    }}
+                                >
+                                    {label(arc.data)}
+                                </text>
+                            </g>
+                        )
+                    })}
             </Fragment>
         )
     }

diff --git a/packages/pie/src/compute.js b/packages/pie/src/compute.js
@@ -26,39 +26,41 @@ export const computeRadialLabels = (
         textXOffset,
     }
 ) =>
-    arcs.filter(arc => skipAngle === 0 || arc.angleDeg > skipAngle).map(arc => {
-        const angle = absoluteAngleRadians(midAngle(arc) - Math.PI / 2)
-        const positionA = positionFromAngle(angle, radius + linkOffset)
-        const positionB = positionFromAngle(angle, radius + linkOffset + linkDiagonalLength)
+    arcs
+        .filter(arc => skipAngle === 0 || arc.angleDeg > skipAngle)
+        .map(arc => {
+            const angle = absoluteAngleRadians(midAngle(arc) - Math.PI / 2)
+            const positionA = positionFromAngle(angle, radius + linkOffset)
+            const positionB = positionFromAngle(angle, radius + linkOffset + linkDiagonalLength)
 
-        let positionC
-        let labelPosition
-        let textAlign
+            let positionC
+            let labelPosition
+            let textAlign
 
-        if (
-            absoluteAngleDegrees(radiansToDegrees(angle)) < 90 ||
-            absoluteAngleDegrees(radiansToDegrees(angle)) >= 270
-        ) {
-            positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y }
-            labelPosition = {
-                x: positionB.x + linkHorizontalLength + textXOffset,
-                y: positionB.y,
+            if (
+                absoluteAngleDegrees(radiansToDegrees(angle)) < 90 ||
+                absoluteAngleDegrees(radiansToDegrees(angle)) >= 270
+            ) {
+                positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y }
+                labelPosition = {
+                    x: positionB.x + linkHorizontalLength + textXOffset,
+                    y: positionB.y,
+                }
+                textAlign = 'left'
+            } else {
+                positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y }
+                labelPosition = {
+                    x: positionB.x - linkHorizontalLength - textXOffset,
+                    y: positionB.y,
+                }
+                textAlign = 'right'
             }
-            textAlign = 'left'
-        } else {
-            positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y }
-            labelPosition = {
-                x: positionB.x - linkHorizontalLength - textXOffset,
-                y: positionB.y,
-            }
-            textAlign = 'right'
-        }
 
-        return {
-            arc,
-            text: getLabel(arc.data),
-            position: labelPosition,
-            align: textAlign,
-            line: [positionA, positionB, positionC],
-        }
-    })
+            return {
+                arc,
+                text: getLabel(arc.data),
+                position: labelPosition,
+                align: textAlign,
+                line: [positionA, positionB, positionC],
+            }
+        })
diff --git a/packages/scales/src/compute.js b/packages/scales/src/compute.js
@@ -48,16 +48,16 @@ export const computeXYScalesForSeries = (_series, xScaleSpec, yScaleSpec, width,
                             ? null
                             : xScale(d.data.xStacked)
                         : d.data.x === null
-                            ? null
-                            : xScale(d.data.x),
+                        ? null
+                        : xScale(d.data.x),
                 y:
                     yScale.stacked === true
                         ? d.data.yStacked === null
                             ? null
                             : yScale(d.data.yStacked)
                         : d.data.y === null
-                            ? null
-                            : yScale(d.data.y),
+                        ? null
+                        : yScale(d.data.y),
             }
         })
     })

diff --git a/packages/stream/src/Stream.js b/packages/stream/src/Stream.js
@@ -162,18 +162,17 @@ const Stream = ({
                                 {...motionProps}
                             />
                         ))}
-                    {isInteractive &&
-                        enableStackTooltip && (
-                            <StreamSlices
-                                slices={slices}
-                                height={height}
-                                showTooltip={showTooltip}
-                                hideTooltip={hideTooltip}
-                                theme={theme}
-                                getTooltipValue={getTooltipValue}
-                                getTooltipLabel={getTooltipLabel}
-                            />
-                        )}
+                    {isInteractive && enableStackTooltip && (
+                        <StreamSlices
+                            slices={slices}
+                            height={height}
+                            showTooltip={showTooltip}
+                            hideTooltip={hideTooltip}
+                            theme={theme}
+                            getTooltipValue={getTooltipValue}
+                            getTooltipLabel={getTooltipLabel}
+                        />
+                    )}
                     {legends.map((legend, i) => {
                         const legendData = enhancedLayers
                             .map(l => ({

diff --git a/packages/sunburst/src/Sunburst.js b/packages/sunburst/src/Sunburst.js
@@ -61,18 +61,20 @@ const Sunburst = ({
             {({ showTooltip, hideTooltip }) => (
                 <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} theme={theme}>
                     <g transform={`translate(${centerX}, ${centerY})`}>
-                        {nodes.filter(node => node.depth > 0).map((node, i) => (
-                            <SunburstArc
-                                key={i}
-                                node={node}
-                                arcGenerator={arcGenerator}
-                                borderWidth={borderWidth}
-                                borderColor={borderColor}
-                                showTooltip={showTooltip}
-                                hideTooltip={hideTooltip}
-                                theme={theme}
-                            />
-                        ))}
+                        {nodes
+                            .filter(node => node.depth > 0)
+                            .map((node, i) => (
+                                <SunburstArc
+                                    key={i}
+                                    node={node}
+                                    arcGenerator={arcGenerator}
+                                    borderWidth={borderWidth}
+                                    borderColor={borderColor}
+                                    showTooltip={showTooltip}
+                                    hideTooltip={hideTooltip}
+                                    theme={theme}
+                                />
+                            ))}
                     </g>
                 </SvgWrapper>
             )}

diff --git a/packages/treemap/src/TreeMapCanvas.js b/packages/treemap/src/TreeMapCanvas.js
@@ -76,20 +76,22 @@ class TreeMapCanvas extends Component {
             this.ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
 
             // draw labels on top
-            nodes.filter(({ label }) => label !== undefined).forEach(node => {
-                const labelTextColor = getLabelTextColor(node)
+            nodes
+                .filter(({ label }) => label !== undefined)
+                .forEach(node => {
+                    const labelTextColor = getLabelTextColor(node)
 
-                const rotate = orientLabel && node.height > node.width
+                    const rotate = orientLabel && node.height > node.width
 
-                this.ctx.save()
-                this.ctx.translate(node.x + node.width / 2, node.y + node.height / 2)
-                this.ctx.rotate(degreesToRadians(rotate ? -90 : 0))
+                    this.ctx.save()
+                    this.ctx.translate(node.x + node.width / 2, node.y + node.height / 2)
+                    this.ctx.rotate(degreesToRadians(rotate ? -90 : 0))
 
-                this.ctx.fillStyle = labelTextColor
-                this.ctx.fillText(node.label, 0, 0)
+                    this.ctx.fillStyle = labelTextColor
+                    this.ctx.fillText(node.label, 0, 0)
 
-                this.ctx.restore()
-            })
+                    this.ctx.restore()
+                })
         }
     }
 

diff --git a/packages/voronoi/src/Mesh.js b/packages/voronoi/src/Mesh.js
@@ -99,8 +99,9 @@ class Mesh extends Component {
         return (
             <g ref={this.setRectRef}>
                 {debug && <path d={voronoiPath} stroke="red" strokeWidth={0.5} opacity={0.75} />}
-                {index !== null &&
-                    debug && <path fill="red" opacity={0.25} d={voronoi.renderCell(index)} />}
+                {index !== null && debug && (
+                    <path fill="red" opacity={0.25} d={voronoi.renderCell(index)} />
+                )}
                 <rect
                     width={width}
                     height={height}

diff --git a/website/src/components/ChartTabs.js b/website/src/components/ChartTabs.js
@@ -106,14 +106,13 @@ export default class ChartTabs extends Component {
                     )}
                 </div>
                 {content}
-                {currentTab === 'chart' &&
-                    nodeCount !== undefined && (
-                        <span className="chart-tabs__node-count">
-                            <strong>{nodeCount}</strong>
-                            &nbsp;
-                            {nodeCountWording}
-                        </span>
-                    )}
+                {currentTab === 'chart' && nodeCount !== undefined && (
+                    <span className="chart-tabs__node-count">
+                        <strong>{nodeCount}</strong>
+                        &nbsp;
+                        {nodeCountWording}
+                    </span>
+                )}
             </div>
         )
     }

diff --git a/website/src/components/Stories.js b/website/src/components/Stories.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
+import snakeCase from 'lodash/kebabCase'
 import PropTypes from 'prop-types'
 import VisitIcon from 'react-icons/lib/md/keyboard-arrow-right'
 import config from '../config'
 import CollapsibleCard from './CollapsibleCard'
 
 const buildStoryLink = ({ kind, story }) =>
-    `${config.storybookUrl}?selectedKind=${encodeURIComponent(
-        kind
-    )}&selectedStory=${encodeURIComponent(story)}`
+    `${config.storybookUrl}?path=/story/${encodeURIComponent(
+        kind.toLowerCase()
+    )}--${encodeURIComponent(snakeCase(story))}`
 
 export default class Stories extends Component {
     static propTypes = {

diff --git a/website/src/components/charts/bar/props.js b/website/src/components/charts/bar/props.js
@@ -323,6 +323,26 @@ export default [
         controlType: 'switch',
         controlGroup: 'Labels',
     },
+    {
+        key: 'label',
+        scopes: '*',
+        description: (
+            <div>
+                Define how bar labels are computed. By default it will use the bar's value. It
+                accepts a string which will be used to access a specific bar data property, such as{' '}
+                <code className="code-string">'value'</code> or{' '}
+                <code className="code-string">'id'</code>. You can also use a funtion if you want to
+                add more logic, this function will receive the current bar's data and must return
+                the computed label which, depending on the context, should return a string or an svg
+                element (Bar) or a string (BarCanvas). For example let's say you want to use a label
+                with both the id and the value, you can achieve this with{' '}
+                <code>{`label={d => \`\${d.id}: \${d.value}\`}`}</code>.
+            </div>
+        ),
+        type: '{string|Function}',
+        required: false,
+        default: defaults.label,
+    },
     {
         key: 'labelFormat',
         scopes: '*',