Use warmer colors for bucket's overview chart (#2329)

quiltdata · Sep 7, 2021 · 66bc5cc · 66bc5cc
1 parent bbb37b8
commit 66bc5cc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/catalog/app/components/StackedAreaChart/StackedAreaChart.js b/catalog/app/components/StackedAreaChart/StackedAreaChart.js
@@ -5,6 +5,15 @@ import * as M from '@material-ui/core'
 import * as SVG from 'utils/SVG'
 import usePrevious from 'utils/usePrevious'
 
+const useStyles = M.makeStyles({
+  root: {
+    opacity: 0.8,
+    '&:hover': {
+      opacity: 1,
+    },
+  },
+})
+
 export default function MultiSparkline({
   data, // PT.arrayOf(PT.arrayOf(PT.number)).isRequired,
   onCursor,
@@ -31,6 +40,7 @@ export default function MultiSparkline({
   boxProps,
   ...props
 }) {
+  const classes = useStyles()
   const stacked = React.useMemo(
     () =>
       R.pipe(
@@ -109,6 +119,7 @@ export default function MultiSparkline({
 
   return (
     <M.Box
+      className={classes.root}
       component="svg"
       viewBox={`0 0 ${width} ${height}`}
       onMouseLeave={handleLeave}

diff --git a/catalog/app/containers/Bucket/Overview.js b/catalog/app/containers/Bucket/Overview.js
@@ -36,20 +36,18 @@ const RODA_BUCKET = 'quilt-open-data-bucket'
 const MAX_EXTS = 7
 // must have length >= MAX_EXTS
 const COLOR_MAP = [
-  '#6996ff',
-  M.colors.blue[300],
-  M.colors.teal.A200,
-  M.colors.lightGreen[300],
-  M.colors.amber[300],
-  M.colors.deepOrange[300],
-  M.colors.pink[300],
-  M.colors.purple[300],
-  M.colors.indigo[300],
-  M.colors.cyan[300],
-  M.colors.green[300],
-  M.colors.lime[300],
-  M.colors.yellow[300],
-  M.colors.brown[300],
+  '#8ad3cb',
+  '#d7ce69',
+  '#bfbadb',
+  '#f4806c',
+  '#83b0d1',
+  '#b2de67',
+  '#bc81be',
+  '#f0b5d3',
+  '#7ba39f',
+  '#9894ad',
+  '#be7265',
+  '#94ad6b',
 ]
 
 function mkKeyedPool(pool) {