From a967a18347be6b8ad11d50da579911c9bd2f97ee Mon Sep 17 00:00:00 2001
From: Mark McDowell <mark.mcdowell@reactivemarkets.com>
Date: Sat, 29 Aug 2020 16:55:47 +0100
Subject: [PATCH] fix(core): correcting bar width with continuous scales

The bar width is now calculated based on the distance between the
first and last data points.
---
 packages/core/src/utils/barWidth.ts           | 38 +++++++------------
 .../stories/src/features/scales/Scales.tsx    |  8 +---
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/utils/barWidth.ts b/packages/core/src/utils/barWidth.ts
index ea98f24aa..1c491a489 100644
--- a/packages/core/src/utils/barWidth.ts
+++ b/packages/core/src/utils/barWidth.ts
@@ -1,5 +1,5 @@
 import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
-import { head } from ".";
+import { first, last } from ".";
 
 /**
  * Bar width is based on the amount of items in the plot data and the distance between the first and last of those
@@ -10,45 +10,35 @@ import { head } from ".";
  */
 export const plotDataLengthBarWidth = <T>(
     props: { widthRatio: number },
-    moreProps: { xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>; plotData: T[] },
+    moreProps: {
+        xAccessor: (datum: T) => number | Date;
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        plotData: T[];
+    },
 ): number => {
     const { widthRatio } = props;
-    const { xScale } = moreProps;
+    const { xAccessor, xScale, plotData } = moreProps;
 
     const [l, r] = xScale.range();
 
-    const totalWidth = Math.abs(r - l);
-
     if (xScale.invert != null) {
         const [dl, dr] = xScale.domain();
         if (typeof dl === "number" && typeof dr === "number") {
+            const totalWidth = Math.abs(r - l);
+
             const width = totalWidth / Math.abs(dl - dr);
 
             return width * widthRatio;
         }
 
-        return 1;
+        const width = xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)));
+
+        return (width / plotData.length) * widthRatio * 0.7;
     }
 
+    const totalWidth = Math.abs(r - l);
+
     const width = totalWidth / xScale.domain().length;
 
     return width * widthRatio;
 };
-
-/**
- * Generates a width function that calculates the bar width based on the given time interval.
- * @param interval a d3-time time interval.
- * @return {Function} the width function.
- */
-export const timeIntervalBarWidth = (interval: any) => {
-    return function <T>(
-        props: { widthRatio: number },
-        moreProps: { xScale: ScaleContinuousNumeric<number, number>; xAccessor: any; plotData: T[] },
-    ) {
-        const { widthRatio } = props;
-        const { xScale, xAccessor, plotData } = moreProps;
-
-        const first = xAccessor(head(plotData));
-        return Math.abs(xScale(interval.offset(first, 1)) - xScale(first)) * widthRatio;
-    };
-};
diff --git a/packages/stories/src/features/scales/Scales.tsx b/packages/stories/src/features/scales/Scales.tsx
index 88e7bdb98..fd0491ea6 100644
--- a/packages/stories/src/features/scales/Scales.tsx
+++ b/packages/stories/src/features/scales/Scales.tsx
@@ -1,7 +1,7 @@
 import { format } from "d3-format";
 import { scaleTime, ScaleContinuousNumeric } from "d3-scale";
 import * as React from "react";
-import { Chart, ChartCanvas, XAxis, YAxis, AreaSeries, withDeviceRatio, withSize } from "react-financial-charts";
+import { Chart, ChartCanvas, XAxis, YAxis, CandlestickSeries, withDeviceRatio, withSize } from "react-financial-charts";
 import { IOHLCData, withOHLCData } from "../../data";
 
 interface ChartProps {
@@ -39,7 +39,7 @@ class Scales extends React.Component<ChartProps> {
                 xExtents={xExtents}
             >
                 <Chart id={1} yExtents={this.yExtents} yScale={yScale}>
-                    <AreaSeries yAccessor={this.yAccessor} />
+                    <CandlestickSeries />
                     <XAxis />
                     <YAxis tickFormat={format(".2f")} />
                 </Chart>
@@ -47,10 +47,6 @@ class Scales extends React.Component<ChartProps> {
         );
     }
 
-    private readonly yAccessor = (data: IOHLCData) => {
-        return data.close;
-    };
-
     private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     };