Better styles, better colors

Author: tannerlinsley

.gitignore

@@ -25,3 +25,4 @@ yarn-debug.log*
 yarn-error.log*
 .history
 stats.html
+size-plugin.json

size-plugin.json

@@ -35,7 +35,7 @@ const defaultProps = {
   getR: d => (Array.isArray(d) ? d[2] : d.radius || d.r),
   getPrimaryAxisID: s => s.primaryAxisID,
   getSecondaryAxisID: s => s.secondaryAxisID,
-  getSeriesStyle: series => ({ color: series.originalSeries.color }),
+  getSeriesStyle: () => ({}),
   getDatumStyle: () => ({}),
   getSeriesOrder: d => d,
   onHover: () => {},
@@ -65,7 +65,7 @@ export default function Chart({
   getR,
   getPrimaryAxisID,
   getSecondaryAxisID,
-  getSeriesStyle,
+  getSeriesStyle: getSeriesStyleOriginal,
   getDatumStyle,
   onClick,
   onFocus,
@@ -256,6 +256,14 @@ export default function Chart({
     primaryAxes,
   ])
 
+  const getSeriesStyle = React.useCallback(
+    (series, ...args) => ({
+      color: series.originalSeries.color,
+      ...getSeriesStyleOriginal(series, ...args),
+    }),
+    [getSeriesStyleOriginal]
+  )
+
   // Decorate the chartState with computed values (or ones we just
   // want to pass down through context)
   const chartState = React.useMemo(

src/components/Chart.js

@@ -6,20 +6,25 @@ import {
   groupingSingle,
   groupingSeries,
   groupingPrimary,
-  groupingSecondary
+  groupingSecondary,
 } from '../../utils/Constants'
 
 const defaultColors = [
-  '#4ab5eb',
-  '#fc6868',
-  '#DECF3F',
-  '#60BD68',
+  '#ff3465',
+  '#ff5454',
+  '#ff7b3e',
   '#FAA43A',
-  '#c63b89',
-  '#1aaabe',
+  '#ffd000',
+  '#C8DE2B',
+  '#97d114',
+  '#34ce70',
+  '#3cada4',
+  '#14b4d3',
+  '#048cd4',
+  '#3447f1',
   '#734fe9',
-  '#1828bd',
-  '#cd82ad'
+  '#cd82ad',
+  '#c63b89',
 ]
 
 export default ({
@@ -30,7 +35,7 @@ export default ({
   yKey,
   xAxes,
   xKey,
-  grouping
+  grouping,
 }) => {
   // Make stackData
   return React.useMemo(() => {
@@ -50,7 +55,7 @@ export default ({
       series.datums.forEach(datum => {
         scaleTotals[axisIndex][datum.primary] = {
           negative: 0,
-          positive: 0
+          positive: 0,
         }
       })
     })
@@ -79,7 +84,7 @@ export default ({
             secondaryAxis,
             xValue: d[xKey],
             yValue: d[yKey],
-            baseValue: 0
+            baseValue: 0,
           }
           if (secondaryAxis.stacked) {
             const start = scaleTotals[secondaryAxisIndex][d.primary]
@@ -117,7 +122,7 @@ export default ({
             }
           }
           return datum
-        })
+        }),
       }
     })
 
@@ -165,7 +170,7 @@ export default ({
           primaryAxis,
           secondaryAxis,
           xAxis,
-          yAxis
+          yAxis,
         })
 
         return result || d
@@ -236,7 +241,7 @@ export default ({
         )
       }
       const result = series.Component.buildStyles(series, {
-        defaultColors
+        defaultColors,
       })
 
       return result || series
@@ -251,6 +256,6 @@ export default ({
     xKey,
     yKey,
     xAxes,
-    yAxes
+    yAxes,
   ])
 }

src/components/pipeline/useStackData.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { area, line } from '../../d3'
 //
 
+import ChartContext from '../utils/ChartContext'
 import Utils from '../utils/Utils'
 import { curveLinear } from '../utils/Curves'
 
@@ -10,16 +11,21 @@ import useDatumStyle from '../hooks/useDatumStyle'
 
 import Path from '../primitives/Path'
 import Line from '../primitives/Line'
+import Circle from '../primitives/Circle'
 
 const defaultAreaStyle = {
   strokeWidth: 0,
 }
 
-const lineDefaultStyle = {
-  strokeWidth: 3,
+const defaultLineStyle = {
+  strokeWidth: 2,
 }
 
-export default function Area({ series, showOrphans, curve }) {
+const circleDefaultStyle = {
+  r: 1.5,
+}
+
+export default function Area({ series, showOrphans, showPoints, curve }) {
   const areaFn = React.useMemo(
     () =>
       area()
@@ -40,10 +46,12 @@ export default function Area({ series, showOrphans, curve }) {
         .curve(curve),
     [curve]
   )
+
   const areaPath = React.useMemo(() => areaFn(series.datums), [
     areaFn,
     series.datums,
   ])
+
   const linePath = React.useMemo(() => lineFn(series.datums), [
     lineFn,
     series.datums,
@@ -56,15 +64,14 @@ export default function Area({ series, showOrphans, curve }) {
     style: {
       ...defaultAreaStyle,
       ...style,
-      ...style.line,
       ...style.area,
     },
   }
 
   const linePathProps = {
     d: linePath,
     style: {
-      ...defaultAreaStyle,
+      ...defaultLineStyle,
       ...style,
       ...style.line,
       fill: 'none',
@@ -89,12 +96,26 @@ export default function Area({ series, showOrphans, curve }) {
             />
           )
         })}
+      {showPoints &&
+        series.datums.map((datum, i) => {
+          return (
+            <Point
+              {...{
+                key: i,
+                datum,
+                style,
+              }}
+            />
+          )
+        })}
     </g>
   )
 }
 
 Area.defaultProps = {
   showOrphans: true,
+  showLine: true,
+  showPoints: true,
   curve: curveLinear,
 }
 
@@ -168,7 +189,7 @@ const OrphanLine = function OrphanLine({ datum, style, all, index }) {
     x2: !datum || Number.isNaN(datum.x) ? null : datum.x,
     y2: !datum || Number.isNaN(datum.y) ? null : datum.y,
     style: {
-      ...lineDefaultStyle,
+      ...defaultLineStyle,
       ...style,
       ...style.line,
       ...dataStyle,
@@ -182,3 +203,43 @@ const OrphanLine = function OrphanLine({ datum, style, all, index }) {
 
   return <Line {...lineProps} />
 }
+
+function Point({ datum, style }) {
+  const [, setChartState] = React.useContext(ChartContext)
+
+  const dataStyle = useDatumStyle(datum)
+
+  const circleProps = {
+    x: datum ? datum.x : undefined,
+    y: datum ? datum.y : undefined,
+    style: {
+      ...circleDefaultStyle,
+      ...style,
+      ...style.circle,
+      ...dataStyle,
+      ...dataStyle.circle,
+    },
+    onMouseEnter: React.useCallback(
+      e =>
+        setChartState(state => ({
+          ...state,
+          element: datum,
+        })),
+      [datum, setChartState]
+    ),
+    onMouseLeave: React.useCallback(
+      e =>
+        setChartState(state => ({
+          ...state,
+          element: null,
+        })),
+      [setChartState]
+    ),
+  }
+
+  if (!datum.defined) {
+    return null
+  }
+
+  return <Circle {...circleProps} />
+}