From d50c6854d99d1cb64ac213a4db34a53899defa2d Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 6 Dec 2021 22:07:50 +0000
Subject: [PATCH] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 demo/components/sidenav.js |  6 ++++-
 demo/pages/bar.md          | 30 +++++++++++++--------
 demo/pages/stacked-bar.md  | 53 +++++++++++++++++++++++++-------------
 3 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/demo/components/sidenav.js b/demo/components/sidenav.js
index 87471a5..d6a2e2f 100644
--- a/demo/components/sidenav.js
+++ b/demo/components/sidenav.js
@@ -92,7 +92,11 @@ const Sidenav = ({ active, expanded }) => {
               </Box>
               <Box sx={{ my: [2] }}>
                 {contents[d].map((e) => {
-                  const normalizedName =  e.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
+                  const normalizedName = e.replace(
+                    /[A-Z]/g,
+                    (match, offset) =>
+                      (offset > 0 ? '-' : '') + match.toLowerCase()
+                  )
                   return (
                     <Link
                       key={e}
diff --git a/demo/pages/bar.md b/demo/pages/bar.md
index 617659f..033dcbc 100644
--- a/demo/pages/bar.md
+++ b/demo/pages/bar.md
@@ -10,14 +10,16 @@ import {
   Bar,
 } from '@carbonplan/charts'
 
-export const data = Array(11).fill(null).map((_, i) => [i, (i + 1) * 9])
+export const data = Array(11)
+  .fill(null)
+  .map((_, i) => [i, (i + 1) * 9])
 
 # Bar
 
 This is a simple bar chart.
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -31,7 +33,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -47,7 +49,7 @@ This is a simple bar chart.
 ### Horizontal bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -59,7 +61,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -73,7 +75,7 @@ This is a simple bar chart.
 ### Floating bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -85,7 +87,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -99,24 +101,30 @@ This is a simple bar chart.
 ### Multiple colors
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <Bar data={data} color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])} />
+      <Bar
+        data={data}
+        color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])}
+      />
     </Plot>
   </Chart>
 </Box>
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <Bar data={data} color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])} />
+      <Bar
+        data={data}
+        color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])}
+      />
     </Plot>
   </Chart>
 </Box>
diff --git a/demo/pages/stacked-bar.md b/demo/pages/stacked-bar.md
index 02416fd..2fad3d4 100644
--- a/demo/pages/stacked-bar.md
+++ b/demo/pages/stacked-bar.md
@@ -10,15 +10,18 @@ import {
   StackedBar,
 } from '@carbonplan/charts'
 
-export const data = Array(11).fill(null).map((_, i) => [i, 0, (i + 1) * 2, (i + 1) * 5, (i + 1) * 9])
-export const getRandomColor = () => ['pink', 'red', 'orange', 'yellow', 'green'][Math.floor(Math.random() * 5)]
+export const data = Array(11)
+  .fill(null)
+  .map((_, i) => [i, 0, (i + 1) * 2, (i + 1) * 5, (i + 1) * 9])
+export const getRandomColor = () =>
+  ['pink', 'red', 'orange', 'yellow', 'green'][Math.floor(Math.random() * 5)]
 
 # StackedBar
 
 This is a simple bar chart.
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -32,7 +35,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -48,7 +51,7 @@ This is a simple bar chart.
 ### Horizontal bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -60,7 +63,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -74,24 +77,30 @@ This is a simple bar chart.
 ### Floating bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data.map(([x, zero, ...yValues]) => [x, ...yValues])} color={'purple'} />
+      <StackedBar
+        data={data.map(([x, zero, ...yValues]) => [x, ...yValues])}
+        color={'purple'}
+      />
     </Plot>
   </Chart>
 </Box>
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data.map(([x, zero, ...yValues]) => [x, ...yValues])} color={'purple'} />
+      <StackedBar
+        data={data.map(([x, zero, ...yValues]) => [x, ...yValues])}
+        color={'purple'}
+      />
     </Plot>
   </Chart>
 </Box>
@@ -102,7 +111,7 @@ This is a simple bar chart.
 #### Custom stack colors
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -114,7 +123,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -126,29 +135,37 @@ This is a simple bar chart.
 ```
 
 #### Completely customized colors
+
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data} color={data.map((d) => d.slice(2).map((_, i) => getRandomColor()))} />
+      <StackedBar
+        data={data}
+        color={data.map((d) => d.slice(2).map((_, i) => getRandomColor()))}
+      />
     </Plot>
   </Chart>
 </Box>
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data} color={data.map((d) => d.slice(2).map(() => getRandomColor()))} />
+      <StackedBar
+        data={data}
+        color={data.map((d) => d.slice(2).map(() => getRandomColor()))}
+      />
     </Plot>
   </Chart>
 </Box>
 ```
 
-
-export default ({ children }) => <Section name='stacked-bar'>{children}</Section>
+export default ({ children }) => (
+  <Section name='stacked-bar'>{children}</Section>
+)