feat(line): add ability to toggle serie via legend item (#1555)

plouc · Jun 2, 2021 · 463d380 · 463d380
1 parent 4e8280d
commit 463d380
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 29 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -77,6 +77,13 @@ declare module '@nivo/core' {
             line: Partial<React.CSSProperties>
         }
         legends: {
+            hidden: {
+                symbol: Partial<{
+                    fill: string
+                    opacity: number
+                }>
+                text: Partial<React.CSSProperties>
+            }
             text: Partial<React.CSSProperties>
         }
         labels: {
@@ -129,6 +136,10 @@ declare module '@nivo/core' {
                 line: Partial<CompleteTheme['grid']['line']>
             }>
             legends: Partial<{
+                hidden: Partial<{
+                    symbol: CompleteTheme['legends']['hidden']['symbol']
+                    text: CompleteTheme['legends']['hidden']['text']
+                }>
                 text: Partial<CompleteTheme['legends']['text']>
             }>
             labels: Partial<{

diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
@@ -38,6 +38,16 @@ export const defaultTheme = {
         },
     },
     legends: {
+        hidden: {
+            symbol: {
+                fill: '#333333',
+                opacity: 0.6,
+            },
+            text: {
+                fill: '#333333',
+                opacity: 0.6,
+            },
+        },
         text: {},
     },
     labels: {

diff --git a/packages/core/src/theming/propTypes.js b/packages/core/src/theming/propTypes.js
@@ -44,6 +44,13 @@ export const gridThemePropType = PropTypes.shape({
 })
 
 export const legendsThemePropType = PropTypes.shape({
+    hidden: PropTypes.shape({
+        symbol: PropTypes.shape({
+            fill: PropTypes.string.isRequired,
+            opacity: PropTypes.number,
+        }).isRequired,
+        text: PropTypes.shape({ ...textProps, opacity: PropTypes.number }).isRequired,
+    }).isRequired,
     text: PropTypes.shape({ ...textProps }).isRequired,
 })
 

diff --git a/packages/legends/src/svg/BoxLegendSvg.tsx b/packages/legends/src/svg/BoxLegendSvg.tsx
@@ -32,6 +32,7 @@ export const BoxLegendSvg = ({
     onClick,
     onMouseEnter,
     onMouseLeave,
+    toggleSerie,
 
     effects,
 }: BoxLegendSvgProps) => {
@@ -78,6 +79,7 @@ export const BoxLegendSvg = ({
             onClick={onClick}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
+            toggleSerie={typeof toggleSerie === 'boolean' ? undefined : toggleSerie}
         />
     )
 }
diff --git a/packages/legends/src/svg/LegendSvg.tsx b/packages/legends/src/svg/LegendSvg.tsx
@@ -30,6 +30,7 @@ export const LegendSvg = ({
     onClick,
     onMouseEnter,
     onMouseLeave,
+    toggleSerie,
 }: LegendSvgProps) => {
     const { padding } = computeDimensions({
         itemCount: data.length,
@@ -67,6 +68,7 @@ export const LegendSvg = ({
                     onClick={onClick}
                     onMouseEnter={onMouseEnter}
                     onMouseLeave={onMouseLeave}
+                    toggleSerie={toggleSerie}
                 />
             ))}
         </g>

diff --git a/packages/legends/src/svg/LegendSvgItem.tsx b/packages/legends/src/svg/LegendSvgItem.tsx
@@ -41,6 +41,7 @@ export const LegendSvgItem = ({
     onClick,
     onMouseEnter,
     onMouseLeave,
+    toggleSerie,
 
     effects,
 }: LegendSvgItemProps) => {
@@ -93,7 +94,7 @@ export const LegendSvgItem = ({
         height,
     })
 
-    const isInteractive = [onClick, onMouseEnter, onMouseLeave].some(
+    const isInteractive = [onClick, onMouseEnter, onMouseLeave, toggleSerie].some(
         handler => handler !== undefined
     )
 
@@ -115,6 +116,7 @@ export const LegendSvgItem = ({
                 }}
                 onClick={event => {
                     onClick?.(data, event)
+                    toggleSerie?.(data.id)
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
@@ -127,6 +129,7 @@ export const LegendSvgItem = ({
                 fill: data.fill ?? data.color ?? 'black',
                 borderWidth: style.symbolBorderWidth ?? symbolBorderWidth,
                 borderColor: style.symbolBorderColor ?? symbolBorderColor,
+                ...(data.hidden ? theme.legends.hidden.symbol : undefined),
             })}
             <text
                 textAnchor={labelAnchor}
@@ -136,6 +139,7 @@ export const LegendSvgItem = ({
                     dominantBaseline: labelAlignment,
                     pointerEvents: 'none',
                     userSelect: 'none',
+                    ...(data.hidden ? theme.legends.hidden.text : undefined),
                 }}
                 x={labelX}
                 y={labelY}

diff --git a/packages/legends/src/svg/symbols/SymbolCircle.tsx b/packages/legends/src/svg/symbols/SymbolCircle.tsx
@@ -6,6 +6,7 @@ export const SymbolCircle = ({
     y,
     size,
     fill,
+    opacity = 1,
     borderWidth = 0,
     borderColor = 'transparent',
 }: SymbolProps) => {
@@ -15,6 +16,7 @@ export const SymbolCircle = ({
             cx={x + size / 2}
             cy={y + size / 2}
             fill={fill}
+            opacity={opacity}
             strokeWidth={borderWidth}
             stroke={borderColor}
             style={{

diff --git a/packages/legends/src/svg/symbols/SymbolDiamond.tsx b/packages/legends/src/svg/symbols/SymbolDiamond.tsx
@@ -6,6 +6,7 @@ export const SymbolDiamond = ({
     y,
     size,
     fill,
+    opacity = 1,
     borderWidth = 0,
     borderColor = 'transparent',
 }: SymbolProps) => {
@@ -20,6 +21,7 @@ export const SymbolDiamond = ({
                     L${size / 2} 0
                 `}
                 fill={fill}
+                opacity={opacity}
                 strokeWidth={borderWidth}
                 stroke={borderColor}
                 style={{

diff --git a/packages/legends/src/svg/symbols/SymbolSquare.tsx b/packages/legends/src/svg/symbols/SymbolSquare.tsx
@@ -6,6 +6,7 @@ export const SymbolSquare = ({
     y,
     size,
     fill,
+    opacity = 1,
     borderWidth = 0,
     borderColor = 'transparent',
 }: SymbolProps) => {
@@ -14,6 +15,7 @@ export const SymbolSquare = ({
             x={x}
             y={y}
             fill={fill}
+            opacity={opacity}
             strokeWidth={borderWidth}
             stroke={borderColor}
             width={size}

diff --git a/packages/legends/src/svg/symbols/SymbolTriangle.tsx b/packages/legends/src/svg/symbols/SymbolTriangle.tsx
@@ -6,6 +6,7 @@ export const SymbolTriangle = ({
     y,
     size,
     fill,
+    opacity = 1,
     borderWidth = 0,
     borderColor = 'transparent',
 }: SymbolProps) => {
@@ -19,6 +20,7 @@ export const SymbolTriangle = ({
                 L${size / 2} 0
             `}
                 fill={fill}
+                opacity={opacity}
                 strokeWidth={borderWidth}
                 stroke={borderColor}
                 style={{

diff --git a/packages/legends/src/svg/symbols/types.ts b/packages/legends/src/svg/symbols/types.ts
@@ -4,6 +4,7 @@ export type SymbolProps = {
     y: number
     size: number
     fill: string
+    opacity?: number
     borderWidth?: number
     borderColor?: string
 }
diff --git a/packages/legends/src/types.ts b/packages/legends/src/types.ts
@@ -31,7 +31,9 @@ type InteractivityProps = Partial<
     Record<
         'onClick' | 'onMouseEnter' | 'onMouseLeave',
         (datum: Datum, event: React.MouseEvent<SVGRectElement>) => void
-    >
+    > & {
+        toggleSerie: (id: Datum['id']) => void
+    }
 >
 
 export type LegendAnchor =
@@ -56,6 +58,7 @@ export type LegendItemDirection =
 export type Datum = {
     id: string | number
     label: string | number
+    hidden?: boolean
     color?: string
     fill?: string
 }
@@ -81,15 +84,20 @@ export type LegendProps = {
     translateX?: number
     translateY?: number
     anchor: LegendAnchor
+    toggleSerie?: boolean
 } & CommonLegendProps &
     BoxLegendSymbolProps &
-    InteractivityProps
+    Omit<InteractivityProps, 'toggleSerie'>
 
 export type BoxLegendSvgProps = {
     containerWidth: number
     containerHeight: number
-} & LegendProps &
-    Required<Pick<LegendProps, 'data'>>
+} & Omit<LegendProps, 'toggleSerie'> &
+    Required<Pick<LegendProps, 'data'>> &
+    Omit<InteractivityProps, 'toggleSerie'> &
+    Partial<{
+        toggleSerie: boolean | InteractivityProps['toggleSerie']
+    }>
 
 export type LegendSvgProps = {
     x: number

diff --git a/packages/legends/tests/svg/__snapshots__/LegendSvgItem.test.tsx.snap b/packages/legends/tests/svg/__snapshots__/LegendSvgItem.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`should support bottom-to-top direction 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -81,6 +82,7 @@ exports[`should support bottom-to-top direction justified 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -137,6 +139,7 @@ exports[`should support left-to-right direction 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -193,6 +196,7 @@ exports[`should support left-to-right direction justified 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -249,6 +253,7 @@ exports[`should support right-to-left direction 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -305,6 +310,7 @@ exports[`should support right-to-left direction justified 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -361,6 +367,7 @@ exports[`should support top-to-bottom direction 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={
@@ -417,6 +424,7 @@ exports[`should support top-to-bottom direction justified 1`] = `
   <rect
     fill="red"
     height={16}
+    opacity={1}
     stroke="transparent"
     strokeWidth={0}
     style={

diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
@@ -103,7 +103,17 @@ const Line = props => {
         partialMargin
     )
 
-    const { lineGenerator, areaGenerator, series, xScale, yScale, slices, points } = useLine({
+    const {
+        legendData,
+        toggleSerie,
+        lineGenerator,
+        areaGenerator,
+        series,
+        xScale,
+        yScale,
+        slices,
+        points,
+    } = useLine({
         data,
         xScale: xScaleSpec,
         xFormat,
@@ -126,18 +136,6 @@ const Line = props => {
     const [currentPoint, setCurrentPoint] = useState(null)
     const [currentSlice, setCurrentSlice] = useState(null)
 
-    const legendData = useMemo(
-        () =>
-            series
-                .map(line => ({
-                    id: line.id,
-                    label: line.id,
-                    color: line.color,
-                }))
-                .reverse(),
-        [series]
-    )
-
     const layerById = {
         grid: (
             <Grid
@@ -192,6 +190,7 @@ const Line = props => {
                 containerHeight={innerHeight}
                 data={legend.data || legendData}
                 theme={theme}
+                toggleSerie={legend.toggleSerie ? toggleSerie : undefined}
             />
         )),
     }