chart borders/axis + readme up

GunnarPDX · Nov 3, 2020 · 0dc41e1 · 0dc41e1
1 parent 0844da6
commit 0dc41e1
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,7 @@
 # Nice Charts
+
+![examples preview](https://github.com/GunnarPDX/Nice-Charts/blob/master/preview.png?raw=true)
+
 These are some slick financial charts I made with react-vis and vx-charts/visx. More on the way soon!
 
 react-vis: https://github.com/uber/react-vis
@@ -9,24 +12,24 @@ vx/visx: https://github.com/airbnb/visx
 ### Correlation Matrix
 `src/charts/MatrixChart.jsx`
 
-![correlation matrix img](https://github.com/GunnarPDX/correlation-matrix-chart/blob/master/correlation-matrix.png?raw=true)
+![correlation matrix img](https://github.com/GunnarPDX/Nice-Charts/blob/master/correlation-matrix.png?raw=true)
 
 
 ### Price Chart
 `src/charts/PriceChart.jsx`
 `src/charts/AreaChart.jsx`
 
-![correlation matrix img](https://github.com/GunnarPDX/correlation-matrix-chart/blob/master/price-chart.png?raw=true)
+![price chart img](https://github.com/GunnarPDX/Nice-Charts/blob/master/price-chart.png?raw=true)
 
 
 ### Order Book
 `src/charts/OrderBookChart.jsx`
 
-![correlation matrix img](https://github.com/GunnarPDX/correlation-matrix-chart/blob/master/order-book.png?raw=true)
+![order book chart img](https://github.com/GunnarPDX/Nice-Charts/blob/master/order-book.png?raw=true)
 
 
 ### Candlesticks
 `src/charts/CandlestickChart.jsx`
 
-![correlation matrix img](https://github.com/GunnarPDX/correlation-matrix-chart/blob/master/candlesticks.png?raw=true)
+![candlestick chart img](https://github.com/GunnarPDX/Nice-Charts/blob/master/candlesticks.png?raw=true)
 
diff --git a/preview.png b/preview.png
diff --git a/src/charts/CandlestickChart.jsx b/src/charts/CandlestickChart.jsx
@@ -44,13 +44,19 @@ export default withTooltip(() => {
     const margin = {
         top: 0,
         left: 0,
-        right: 50,
-        bottom: 80
+        right: 60,
+        bottom: 40
     };
 
     const width = 700;
     const height = 400;
 
+    const xMin = margin.left;
+    const xMax = width - margin.right - 5;
+    const yMin = margin.top;
+    const yMax = height - margin.bottom;
+
+
     const xScale = scaleBand({
         range: [0, width - 5 - margin.right],
         domain: quotes.map(b => b.date),
@@ -73,7 +79,7 @@ export default withTooltip(() => {
     });
 
     return (
-        <div style={{float: 'left', marginTop: 40}}>
+        <div style={{float: 'left'}}>
             <svg width={width} height={height}>
                 <LinearGradient
                     id="green-fill"
@@ -100,7 +106,7 @@ export default withTooltip(() => {
                 <Group top={margin.top} left={margin.left}>
 
                     <GridRows
-                        width={width - 5 - margin.right}
+                        width={width - margin.right}
                         height={height}
                         scale={yScale}
                         strokeDasharray={2.5}
@@ -174,25 +180,29 @@ export default withTooltip(() => {
                 <AxisRight
                     left={width - margin.right}
                     scale={yScale}
-                    hideAxisLine
-                    hideTickStroke
+                    //hideAxisLine
+                    stroke={'var(--light-blue)'}
+                    //hideTickStroke
+                    tickStroke={'var(--light-blue)'}
                     hideZero
                     tickFormat={formatPrice}
-                    tickLength={0}
+                    //tickLength={0}
                     tickLabelProps={() => ({
                         fill: 'var(--light-blue)',
                         fontSize: 11,
                         fontWeight: 600,
                         textAnchor: 'start',
                         dy: '0.33em',
-                        dx: '-0.3em',
+                        dx: '0.33em',
                     })}
                 />
                 <AxisBottom
                     top={height - margin.bottom}
                     scale={timeScale}
-                    hideAxisLine
-                    hideTickStroke
+                    //hideAxisLine
+                    stroke={'var(--light-blue)'}
+                    //hideTickStroke
+                    tickStroke={'var(--light-blue)'}
                     hideZero
                     numTicks={width > 520 ? 7 : 4}
                     tickFormat={formatTime}
@@ -204,6 +214,15 @@ export default withTooltip(() => {
                         dy: '0.1em',
                     })}
                 />
+
+
+                <line x1={xMax + 5} x2={xMax + 5} y1={0} y2={yMax} stroke={'var(--light-blue'} />
+                {/*
+                <line x1={width} x2={width} y1={0} y2={yMax} stroke={'var(--light-blue'} />
+                */}
+                <line x1={xMin} x2={xMin} y1={0} y2={yMax} stroke={'var(--light-blue'} />
+                <line x1={xMin} x2={xMax + 5} y1={0} y2={0} stroke={'var(--light-blue'} />
+
             </svg>
 
         </div>

diff --git a/src/charts/ConvergenceChart.jsx b/src/charts/ConvergenceChart.jsx
diff --git a/src/charts/OrderBookChart.jsx b/src/charts/OrderBookChart.jsx
@@ -179,7 +179,8 @@ export default withTooltip(({width, height, margin = { top: 0, right: 0, bottom:
                     left={margin.left}
                     scale={volumeScale}
                     numTicks={height > 300 ? 10 : 5}
-                    stroke={'var(--light-blue)'}
+                    hideAxisLine
+                    //stroke={'var(--light-blue)'}
                     tickStroke={'var(--light-blue)'}
                     tickLabelProps={() => ({
                         fill: 'var(--light-blue)',
@@ -207,6 +208,10 @@ export default withTooltip(({width, height, margin = { top: 0, right: 0, bottom:
                     })}
                 />
 
+                <line x1={xMax} x2={xMax} y1={0} y2={yMax} stroke={'var(--light-blue'} />
+                <line x1={xMin} x2={xMin} y1={0} y2={yMax} stroke={'var(--light-blue'} />
+                <line x1={xMin} x2={xMax} y1={0} y2={0} stroke={'var(--light-blue'} />
+
             </svg>
         </div>
     );