Skip to content

Commit

Permalink
fix: fixing various issues with drawing
Browse files Browse the repository at this point in the history 
Offsetting the edge indicator coordinates by half a pixel.
Reducing edge indicator stroke width to 1.
Fixing props for markers.
  • Loading branch information
@markmcdowell
markmcdowell committed Sep 6, 2019
1 parent abcd953 commit 357227c
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 136 deletions.
1 change: 1 addition & 0 deletions packages/react-financial-charts-examples/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"start": "webpack-dev-server --progress --config webpack.config.js"
},
"dependencies": {
"d3-dsv": "^1.1.1",
"d3-format": "^1.2.1",
"d3-scale": "^3.1.0",
"d3-time-format": "^2.1.3",
Expand Down
152 changes: 43 additions & 109 deletions packages/react-financial-charts-examples/src/components/responsiveStockChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,59 @@
import { tsvParse } from "d3-dsv";
import { timeParse } from "d3-time-format";
import * as React from "react";
import AutoSizer from "react-virtualized-auto-sizer";
import { IOHLCData } from "../stores";
import StockChart from "./stockChart";

export class ResponsiveStockChart extends React.Component {
const parseDate = timeParse("%Y-%m-%d");

function parseData(parse) {
return function (d) {
d.date = parse(d.date);
d.open = +d.open;
d.high = +d.high;
d.low = +d.low;
d.close = +d.close;
d.volume = +d.volume;

return d;
};
}

interface ResponsiveStockChartState {
data?: IOHLCData[];
}

export class ResponsiveStockChart extends React.Component<{}, ResponsiveStockChartState> {

public componentDidMount() {
fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv")
.then((response) => response.text())
.then((data) => tsvParse(data, parseData(parseDate)))
.then((data) => {
this.setState({
data,
});
})
.catch((error) => {
// tslint:disable-next-line: no-console
console.error(error);
});
}

public render() {

const data = [
{
close: 1.10294,
high: 1.10301,
low: 1.10286,
open: 1.10291,
time: new Date(1567715580000),
},
{
close: 1.10292,
high: 1.10297,
low: 1.10287,
open: 1.10294,
time: new Date(1567715640000),
},
{
close: 1.10291,
high: 1.10299,
low: 1.10285,
open: 1.10293,
time: new Date(1567715700000),
},
{
close: 1.10292,
high: 1.10296,
low: 1.10282,
open: 1.10291,
time: new Date(1567715760000),
},
{
close: 1.10293,
high: 1.10298,
low: 1.10288,
open: 1.10288,
time: new Date(1567715820000),
},
{
close: 1.10289,
high: 1.10294,
low: 1.10286,
open: 1.10288,
time: new Date(1567715880000),
},
{
close: 1.10293,
high: 1.10295,
low: 1.10283,
open: 1.10288,
time: new Date(1567715940000),
},
{
close: 1.10288,
high: 1.10299,
low: 1.10287,
open: 1.10293,
time: new Date(1567716000000),
},
{
close: 1.10292,
high: 1.10302,
low: 1.10286,
open: 1.1029,
time: new Date(1567716060000),
},
{
close: 1.10295,
high: 1.10295,
low: 1.10282,
open: 1.10293,
time: new Date(1567716120000),
},
{
close: 1.10286,
high: 1.10298,
low: 1.10283,
open: 1.10297,
time: new Date(1567716180000),
},
{
close: 1.10294,
high: 1.10296,
low: 1.10286,
open: 1.10289,
time: new Date(1567716240000),
},
{
close: 1.10289,
high: 1.10296,
low: 1.10284,
open: 1.10294,
time: new Date(1567716300000),
},
{
close: 1.10285,
high: 1.10302,
low: 1.10285,
open: 1.10289,
time: new Date(1567716360000),
},
{
close: 1.10281,
high: 1.10285,
low: 1.10281,
open: 1.10284,
time: new Date(1567716420000),
},
];
if (this.state == null) {
return <div>Loading...</div>;
}

return (
<div style={{ flex: "1 1 auto" }}>
<AutoSizer>
{({ height, width }) => {
return (
<StockChart
data={data}
data={this.state.data}
height={height}
width={width} />
);
Expand Down
38 changes: 26 additions & 12 deletions packages/react-financial-charts-examples/src/components/stockChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { format } from "d3-format";
import { scaleTime } from "d3-scale";
import { timeFormat } from "d3-time-format";
import * as React from "react";
import { Chart, ChartCanvas } from "react-financial-charts";
import { XAxis, YAxis } from "react-financial-charts/lib/axes";
import { CrossHairCursor, EdgeIndicator, MouseCoordinateX, MouseCoordinateY } from "react-financial-charts/lib/coordinates";
import { CandlestickSeries } from "react-financial-charts/lib/series";
import { last } from "react-financial-charts/lib/utils";
import { discontinuousTimeScaleProviderBuilder } from "react-financial-charts/lib/scale";
import { BarSeries, CandlestickSeries } from "react-financial-charts/lib/series";
import { IOHLCData } from "../stores";
import withDimensions from "./withDimensions";

Expand All @@ -21,18 +20,26 @@ class StockChart extends React.Component<StockChartProps> {
public render() {

const {
data,
data: initialData,
height,
ratio,
width,
} = this.props;

const xAccessor = (d: IOHLCData) => d.time;
const xScaleProvider = discontinuousTimeScaleProviderBuilder()
.inputDateAccessor((d) => d.date);

const {
data,
xScale,
xAccessor,
displayXAccessor,
} = xScaleProvider(initialData);

const start = xAccessor(last(data));
const end = xAccessor(data[0]);
const start = xAccessor(data[data.length - 1]);
const end = xAccessor(data[Math.max(0, data.length - 100)]);
const xExtents = [start, end];
const yExtents = [(d: IOHLCData) => [d.high, d.low]];

const margin = { left: 32, right: 70, top: 32, bottom: 32 };
const gridWidth = width - margin.left - margin.right;
const gridHeight = height - margin.top - margin.bottom;
Expand All @@ -45,12 +52,19 @@ class StockChart extends React.Component<StockChartProps> {
margin={margin}
type="hybrid"
data={data}
displayXAccessor={xAccessor}
displayXAccessor={displayXAccessor}
seriesName="Data"
xScale={scaleTime()}
xScale={xScale}
xAccessor={xAccessor}
xExtents={xExtents}>
<Chart id={1} yExtents={yExtents}>
<Chart
id={1}
height={gridHeight / 2}
origin={(w, h) => [0, h - (gridHeight / 2)]}
yExtents={(d: IOHLCData) => d.volume}>
<BarSeries yAccessor={(d: IOHLCData) => d.volume} />
</Chart>
<Chart id={2} yExtents={(d) => [d.high, d.low]}>
<XAxis
innerTickSize={-1 * gridHeight}
axisAt="bottom"
Expand All @@ -62,7 +76,7 @@ class StockChart extends React.Component<StockChartProps> {
axisAt="right"
orient="right"
ticks={5} />
<CandlestickSeries width={8} />
<CandlestickSeries />
<MouseCoordinateX
at="bottom"
orient="bottom"
Expand Down
3 changes: 2 additions & 1 deletion packages/react-financial-charts-examples/src/stores/iOHLCData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ export interface IOHLCData {
readonly high: number;
readonly low: number;
readonly open: number;
readonly time: Date;
readonly date: Date;
readonly volume: number;
}
2 changes: 1 addition & 1 deletion packages/react-financial-charts/src/coordinates/EdgeCoordinateV3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ export function drawOnCanvas(ctx, props) {
if (rectRadius) {
roundRect(ctx, x, y, rectWidth, rectHeight, 3);
} else {
ctx.rect(x, y, rectWidth, rectHeight);
ctx.rect(x + 0.5, y + 0.5, rectWidth, rectHeight);
}

ctx.fill();
Expand Down
2 changes: 1 addition & 1 deletion packages/react-financial-charts/src/coordinates/EdgeIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
opacity: 1,
stroke: noop,
strokeOpacity: 1,
strokeWidth: 3,
strokeWidth: 1,
lineStroke: "#000000",
lineOpacity: 1,
lineStrokeDasharray: "ShortDot",
Expand Down
2 changes: 0 additions & 2 deletions packages/react-financial-charts/src/series/BarSeries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,8 @@ export class BarSeries extends React.Component<BarSeriesProps> {
<GenericChartComponent
clip={clip}
svgDraw={this.renderSVG}

canvasToDraw={getAxisCanvas}
canvasDraw={this.drawOnCanvas}

drawOn={["pan"]}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-financial-charts/src/series/CircleMarker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { functor, hexToRGBA } from "../utils";

interface CircleProps {
stroke?: string;
fill: string;
opacity: number;
fill?: string;
opacity?: number;
point: {
x: number,
y: number,
Expand Down
8 changes: 5 additions & 3 deletions packages/react-financial-charts/src/series/StackedBarSeries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class StackedBarSeries extends React.Component<StackedBarSeriesProps> {
baseAt: (xScale, yScale/* , d*/) => head(yScale.range()),
direction: "up",
className: "bar",
stroke: true,
stroke: false,
fill: "#4682B4",
opacity: 0.5,
width: plotDataLengthBarWidth,
Expand Down Expand Up @@ -176,8 +176,10 @@ export function drawOnCanvas2(props, ctx, bars) {
if (d.width <= 1) {
ctx.fillRect(d.x - 0.5, d.y, 1, d.height);
} else {
ctx.fillRect(d.x, d.y, d.width, d.height);
if (stroke) { ctx.strokeRect(d.x, d.y, d.width, d.height); }
ctx.fillRect(d.x + 0.5, d.y + 0.5, d.width, d.height);
if (stroke) {
ctx.strokeRect(d.x, d.y, d.width, d.height);
}
}

});
Expand Down
10 changes: 5 additions & 5 deletions packages/react-financial-charts/src/series/TriangleMarker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import * as React from "react";
import { functor, hexToRGBA } from "../utils";

interface TriangleProps {
direction: "top" | "bottom" | "left" | "right" | "hide";
stroke: string | any; // func
fill: string | any;
opacity: number;
direction?: "top" | "bottom" | "left" | "right" | "hide";
stroke?: string | any; // func
fill?: string | any;
opacity?: number;
point: {
x: number,
y: number,
datum: any,
};
className?: string;
strokeWidth?: number;
width: number | any; // func
width?: number | any; // func
}

export class Triangle extends React.Component<TriangleProps> {
Expand Down

0 comments on commit 357227c

Please sign in to comment.