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.
markmcdowell · Aug 29, 2020 · a967a18 · a967a18
1 parent 99664ba
commit a967a18
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 30 deletions.
diff --git 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
@@ -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,18 +39,14 @@ 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>
             </ChartCanvas>
         );
     }
 
-    private readonly yAccessor = (data: IOHLCData) => {
-        return data.close;
-    };
-
     private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     };