feat(line): fix slices spacing & add support for y axis

plouc · May 3, 2019 · d56881b · d56881b
1 parent d47d5cb
commit d56881b
Show file tree

Hide file tree

Showing 30 changed files with 639 additions and 538 deletions.
diff --git a/packages/line/index.d.ts b/packages/line/index.d.ts
@@ -12,6 +12,7 @@ import { OrdinalColorsInstruction } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { Scale, ScaleFunc } from '@nivo/scales'
 import { AxisProps } from '@nivo/axes'
+import { CrosshairType } from '@nivo/tooltip'
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
@@ -128,11 +129,18 @@ declare module '@nivo/line' {
         markers?: CartesianMarkerProps[]
 
         isInteractive?: boolean
+
         debugMesh?: boolean
-        enableStackTooltip?: boolean
-        tooltip?: (data: LineSliceData) => React.ReactNode
+
+        enableSlices?: 'x' | 'y' | false
+        debugSlices?: boolean
+        sliceTooltip?: (data: LineSliceData) => React.ReactNode
+
         tooltipFormat?: TooltipFormatter | string
 
+        enableCrosshair?: boolean
+        crosshairType?: CrosshairType
+
         legends?: LegendProps[]
     }
 

diff --git a/packages/line/src/LineAreas.js → packages/line/src/Areas.js b/packages/line/src/LineAreas.js → packages/line/src/Areas.js
@@ -10,7 +10,7 @@ import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { useMotionConfig, SmartMotion, blendModePropType } from '@nivo/core'
 
-const LineAreas = memo(({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
+const Areas = memo(({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
     const { animate, springConfig } = useMotionConfig()
 
     if (animate !== true) {
@@ -64,10 +64,10 @@ const LineAreas = memo(({ areaGenerator, areaOpacity, areaBlendMode, lines }) =>
     )
 })
 
-LineAreas.displayName = 'LineAreas'
-LineAreas.propTypes = {
+Areas.displayName = 'Areas'
+Areas.propTypes = {
     areaOpacity: PropTypes.number.isRequired,
     areaBlendMode: blendModePropType.isRequired,
 }
 
-export default LineAreas
+export default Areas
diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
@@ -12,13 +12,13 @@ import { useInheritedColor } from '@nivo/colors'
 import { Axes, Grid } from '@nivo/axes'
 import { BoxLegendSvg } from '@nivo/legends'
 import { Crosshair } from '@nivo/tooltip'
-import { useLine, useLinePoints } from './hooks'
+import { useLine } from './hooks'
 import { LinePropTypes, LineDefaultProps } from './props'
-import LineAreas from './LineAreas'
-import LineLines from './LineLines'
-import LineSlices from './LineSlices'
-import LinePoints from './LinePoints'
-import LineMesh from './LineMesh'
+import Areas from './Areas'
+import Lines from './Lines'
+import Slices from './Slices'
+import Points from './Points'
+import Mesh from './Mesh'
 
 const Line = props => {
     const {
@@ -67,16 +67,20 @@ const Line = props => {
         legends,
 
         isInteractive,
+
         useMesh,
         debugMesh,
+
         onMouseEnter,
         onMouseMove,
         onMouseLeave,
         onClick,
+
         tooltip,
-        tooltipFormat,
-        enableStackTooltip,
-        stackTooltip,
+
+        enableSlices,
+        debugSlices,
+        sliceTooltip,
 
         enableCrosshair,
         crosshairType,
@@ -88,33 +92,28 @@ const Line = props => {
         partialMargin
     )
 
-    const { lineGenerator, areaGenerator, series, xScale, yScale, slices } = useLine({
+    const { lineGenerator, areaGenerator, series, xScale, yScale, slices, points } = useLine({
         data,
         xScale: xScaleSpec,
+        xFormat,
         yScale: yScaleSpec,
+        yFormat,
         width: innerWidth,
         height: innerHeight,
         colors,
         curve,
         areaBaselineValue,
-    })
-
-    const points = useLinePoints({
-        isEnabled:
-            enablePoints === true ||
-            (isInteractive === true && useMesh === true && enableStackTooltip !== true),
-        series,
-        xFormat,
-        yFormat,
-        color: pointColor,
-        borderColor: pointBorderColor,
+        pointColor,
+        pointBorderColor,
+        enableSlices,
     })
 
     const theme = useTheme()
     const getPointColor = useInheritedColor(pointColor, theme)
     const getPointBorderColor = useInheritedColor(pointBorderColor, theme)
 
     const [currentPoint, setCurrentPoint] = useState(null)
+    const [currentSlice, setCurrentSlice] = useState(null)
 
     const legendData = series
         .map(line => ({
@@ -164,12 +163,7 @@ const Line = props => {
         ),
         areas: null,
         lines: (
-            <LineLines
-                key="lines"
-                lines={series}
-                lineGenerator={lineGenerator}
-                lineWidth={lineWidth}
-            />
+            <Lines key="lines" lines={series} lineGenerator={lineGenerator} lineWidth={lineWidth} />
         ),
         slices: null,
         points: null,
@@ -189,7 +183,7 @@ const Line = props => {
 
     if (enableArea) {
         layerById.areas = (
-            <LineAreas
+            <Areas
                 key="areas"
                 areaGenerator={areaGenerator}
                 areaOpacity={areaOpacity}
@@ -199,21 +193,24 @@ const Line = props => {
         )
     }
 
-    if (isInteractive && enableStackTooltip) {
+    if (isInteractive && enableSlices !== false) {
         layerById.slices = (
-            <LineSlices
+            <Slices
                 key="slices"
                 slices={slices}
+                axis={enableSlices}
+                debug={debugSlices}
                 height={innerHeight}
-                tooltip={stackTooltip}
-                tooltipFormat={tooltipFormat}
+                tooltip={sliceTooltip}
+                current={currentSlice}
+                setCurrent={setCurrentSlice}
             />
         )
     }
 
     if (enablePoints) {
         layerById.points = (
-            <LinePoints
+            <Points
                 key="points"
                 points={points}
                 symbol={pointSymbol}
@@ -229,22 +226,36 @@ const Line = props => {
         )
     }
 
-    if (isInteractive && enableCrosshair && currentPoint) {
-        layerById.crosshair = (
-            <Crosshair
-                key="crosshair"
-                width={innerWidth}
-                height={innerHeight}
-                x={currentPoint.x}
-                y={currentPoint.y}
-                type={crosshairType}
-            />
-        )
+    if (isInteractive && enableCrosshair) {
+        if (currentPoint !== null) {
+            layerById.crosshair = (
+                <Crosshair
+                    key="crosshair"
+                    width={innerWidth}
+                    height={innerHeight}
+                    x={currentPoint.x}
+                    y={currentPoint.y}
+                    type={crosshairType}
+                />
+            )
+        }
+        if (currentSlice !== null) {
+            layerById.crosshair = (
+                <Crosshair
+                    key="crosshair"
+                    width={innerWidth}
+                    height={innerHeight}
+                    x={currentSlice.x}
+                    y={currentSlice.y}
+                    type={enableSlices}
+                />
+            )
+        }
     }
 
-    if (isInteractive && useMesh && !enableStackTooltip) {
+    if (isInteractive && useMesh && enableSlices === false) {
         layerById.mesh = (
-            <LineMesh
+            <Mesh
                 key="mesh"
                 points={points}
                 width={innerWidth}

diff --git a/packages/line/src/LineCanvas.js b/packages/line/src/LineCanvas.js
@@ -19,7 +19,7 @@ import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
 import { useVoronoiMesh, renderVoronoiToCanvas, renderVoronoiCellToCanvas } from '@nivo/voronoi'
 import { LineCanvasPropTypes, LineCanvasDefaultProps } from './props'
-import { useLine, useLinePoints } from './hooks'
+import { useLine } from './hooks'
 
 const LineCanvas = ({
     width,
@@ -75,7 +75,7 @@ const LineCanvas = ({
     const theme = useTheme()
     const [currentPoint, setCurrentPoint] = useState(null)
 
-    const { lineGenerator, areaGenerator, series, xScale, yScale } = useLine({
+    const { lineGenerator, areaGenerator, series, xScale, yScale, points } = useLine({
         data,
         xScale: xScaleSpec,
         yScale: yScaleSpec,
@@ -84,8 +84,9 @@ const LineCanvas = ({
         colors,
         curve,
         areaBaselineValue,
+        pointColor,
+        pointBorderColor,
     })
-    const points = useLinePoints({ series, pointColor, pointBorderColor })
 
     const { delaunay, voronoi } = useVoronoiMesh({
         points,

diff --git a/packages/line/src/LinePoints.js b/packages/line/src/LinePoints.js