feat(line): add support for tooltip on line component

plouc · Aug 12, 2017 · ccdb2e6 · ccdb2e6
1 parent 9faae31
commit ccdb2e6
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 50 deletions.
diff --git a/src/components/charts/line/Line.js b/src/components/charts/line/Line.js
@@ -8,7 +8,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { merge, isEqual } from 'lodash'
+import { sortBy } from 'lodash'
 import { line } from 'd3-shape'
 import compose from 'recompose/compose'
 import pure from 'recompose/pure'
@@ -33,11 +33,11 @@ import LineSlices from './LineSlices'
 import LineMarkers from './LineMarkers'
 
 const Line = ({
-    data,
     lines,
     lineGenerator,
     xScale,
     yScale,
+    slices,
 
     // dimensions
     margin,
@@ -67,7 +67,6 @@ const Line = ({
 
     // theming
     theme,
-    colors,
 
     // motion
     animate,
@@ -82,25 +81,6 @@ const Line = ({
         motionStiffness,
     }
 
-    let markers = null
-    if (enableMarkers === true) {
-        markers = (
-            <LineMarkers
-                lines={lines}
-                size={markersSize}
-                color={getInheritedColorGenerator(markersColor)}
-                borderWidth={markersBorderWidth}
-                borderColor={getInheritedColorGenerator(markersBorderColor)}
-                enableLabel={enableMarkersLabel}
-                label={markersLabel}
-                labelFormat={markersLabelFormat}
-                labelYOffset={markersLabelYOffset}
-                theme={theme}
-                {...motionProps}
-            />
-        )
-    }
-
     return (
         <Container isInteractive={isInteractive}>
             {({ showTooltip, hideTooltip }) =>
@@ -126,16 +106,27 @@ const Line = ({
                         {...motionProps}
                     />
                     <LineLines lines={lines} lineGenerator={lineGenerator} {...motionProps} />
-                    {false &&
+                    {isInteractive &&
                         <LineSlices
-                            data={data}
-                            xScale={xScale}
+                            slices={slices}
                             height={height}
                             showTooltip={showTooltip}
                             hideTooltip={hideTooltip}
-                            colors={colors}
                         />}
-                    {markers}
+                    {enableMarkers &&
+                        <LineMarkers
+                            lines={lines}
+                            size={markersSize}
+                            color={getInheritedColorGenerator(markersColor)}
+                            borderWidth={markersBorderWidth}
+                            borderColor={getInheritedColorGenerator(markersBorderColor)}
+                            enableLabel={enableMarkersLabel}
+                            label={markersLabel}
+                            labelFormat={markersLabelFormat}
+                            labelYOffset={markersLabelYOffset}
+                            theme={theme}
+                            {...motionProps}
+                        />}
                 </SvgWrapper>}
         </Container>
     )
@@ -159,6 +150,9 @@ Line.propTypes = {
     curve: curvePropType.isRequired,
     lineGenerator: PropTypes.func.isRequired,
 
+    lines: PropTypes.array.isRequired,
+    slices: PropTypes.array.isRequired,
+
     xScale: PropTypes.func.isRequired,
     yScale: PropTypes.func.isRequired,
 
@@ -268,7 +262,25 @@ const enhance = compose(
                 lines = generateLines(data, xScale, yScale, getColor)
             }
 
-            return { lines }
+            const slices = xScale.domain().map((id, i) => {
+                let points = sortBy(
+                    lines.map(line => ({
+                        id: line.id,
+                        value: line.points[i].value,
+                        y: line.points[i].y,
+                        color: line.color,
+                    })),
+                    'y'
+                )
+
+                return {
+                    id,
+                    x: xScale(id),
+                    points,
+                }
+            })
+
+            return { lines, slices }
         }
     ),
     pure

diff --git a/src/components/charts/line/LineSlices.js b/src/components/charts/line/LineSlices.js
@@ -7,23 +7,40 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
+import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
 import LineSlicesItem from './LineSlicesItem'
 
-const LineSlices = ({ data, xScale, height, showTooltip, hideTooltip }) => {
-    return (
-        <g>
-            {data[0].data.map(({ x }) =>
-                <LineSlicesItem
-                    key={x}
-                    x={xScale(x)}
-                    height={height}
-                    showTooltip={showTooltip}
-                    hideTooltip={hideTooltip}
-                />
-            )}
-        </g>
-    )
+const LineSlices = ({ slices, height, showTooltip, hideTooltip }) =>
+    <g>
+        {slices.map(slice =>
+            <LineSlicesItem
+                key={slice.id}
+                slice={slice}
+                height={height}
+                showTooltip={showTooltip}
+                hideTooltip={hideTooltip}
+            />
+        )}
+    </g>
+
+LineSlices.propTypes = {
+    slices: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            x: PropTypes.number.isRequired,
+            points: PropTypes.arrayOf(
+                PropTypes.shape({
+                    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+                    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+                    color: PropTypes.string.isRequired,
+                })
+            ).isRequired,
+        })
+    ).isRequired,
+    height: PropTypes.number.isRequired,
+    showTooltip: PropTypes.func.isRequired,
+    hideTooltip: PropTypes.func.isRequired,
 }
 
 export default pure(LineSlices)
diff --git a/src/components/charts/line/LineSlicesItem.js b/src/components/charts/line/LineSlicesItem.js
@@ -19,12 +19,11 @@ export default class LineSlicesItem extends PureComponent {
 
     handleMouseEnter = e => {
         this.setState({ isHover: true })
-        this.props.showTooltip(
+
+        const { slice, showTooltip } = this.props
+        showTooltip(
             <TableTooltip
-                rows={[
-                    [<Chip color="#F00" />, 'a', 'cool'],
-                    [<Chip color="#F0F" />, 'b', 'not cool'],
-                ]}
+                rows={slice.points.map(p => [<Chip color={p.color} />, p.id, p.value])}
             />,
             e
         )
@@ -36,19 +35,19 @@ export default class LineSlicesItem extends PureComponent {
     }
 
     render() {
-        const { x, height } = this.props
+        const { slice, height } = this.props
         const { isHover } = this.state
 
         return (
-            <g transform={`translate(${x}, 0)`}>
+            <g transform={`translate(${slice.x}, 0)`}>
                 {isHover &&
                     <line
                         x1={0}
                         x2={0}
                         y1={0}
                         y2={height}
                         stroke="#000"
-                        strokeOpacity={0.5}
+                        strokeOpacity={0.35}
                         strokeWidth={1}
                     />}
                 <rect

diff --git a/src/lib/charts/line/index.js b/src/lib/charts/line/index.js
@@ -79,6 +79,7 @@ export const generateLines = (data, xScale, yScale, color) =>
         return {
             id,
             color: color(serie),
+            data: serie,
             points: serieData.map(d =>
                 Object.assign({}, d, {
                     value: d.y,
@@ -109,6 +110,7 @@ export const generateStackedLines = (data, xScale, yScale, color) =>
             {
                 id,
                 color: color(serie),
+                data: serie,
                 points: serieData
                     .map((d, i) => {
                         if (!previousPoints) {