feat(stack): make line areas stack in front of each other visibly #152

plouc · Apr 5, 2018 · 8ec91a6 · 8ec91a6
1 parent 50d6fd5
commit 8ec91a6
Showing 1 changed file with 34 additions and 28 deletions.
diff --git a/packages/nivo-line/src/LineAreas.js b/packages/nivo-line/src/LineAreas.js
@@ -25,15 +25,18 @@ const LineAreas = ({
     if (animate !== true) {
         return (
             <g>
-                {lines.map(({ id, color: areaColor, points }) => (
-                    <path
-                        key={id}
-                        d={areaGenerator(points)}
-                        fill={areaColor}
-                        fillOpacity={areaOpacity}
-                        strokeWidth={0}
-                    />
-                ))}
+                {lines
+                    .slice(0)
+                    .reverse()
+                    .map(({ id, color: areaColor, points }) => (
+                        <path
+                            key={id}
+                            d={areaGenerator(points)}
+                            fill={areaColor}
+                            fillOpacity={areaOpacity}
+                            strokeWidth={0}
+                        />
+                    ))}
             </g>
         )
     }
@@ -45,25 +48,28 @@ const LineAreas = ({
 
     return (
         <g>
-            {lines.map(({ id, color: areaColor, points }) => (
-                <SmartMotion
-                    key={id}
-                    style={spring => ({
-                        d: spring(areaGenerator(points), springConfig),
-                        fill: spring(areaColor, springConfig),
-                    })}
-                >
-                    {style => (
-                        <path
-                            key={id}
-                            d={style.d}
-                            fill={areaColor}
-                            fillOpacity={areaOpacity}
-                            strokeWidth={0}
-                        />
-                    )}
-                </SmartMotion>
-            ))}
+            {lines
+                .slice(0)
+                .reverse()
+                .map(({ id, color: areaColor, points }) => (
+                    <SmartMotion
+                        key={id}
+                        style={spring => ({
+                            d: spring(areaGenerator(points), springConfig),
+                            fill: spring(areaColor, springConfig),
+                        })}
+                    >
+                        {style => (
+                            <path
+                                key={id}
+                                d={style.d}
+                                fill={areaColor}
+                                fillOpacity={areaOpacity}
+                                strokeWidth={0}
+                            />
+                        )}
+                    </SmartMotion>
+                ))}
         </g>
     )
 }