rrag · martfhill · Jan 7, 2022
diff --git a/examples/CandleStickChartWithAnnotation/public/favicon.ico b/examples/CandleStickChartWithAnnotation/public/favicon.ico
diff --git a/examples/CandleStickChartWithAnnotation/src/Chart.js b/examples/CandleStickChartWithAnnotation/src/Chart.js
@@ -1,132 +1,155 @@
-
 import React from "react";
 import PropTypes from "prop-types";
 
 import { format } from "d3-format";
 import { timeFormat } from "d3-time-format";
 
 import { ChartCanvas, Chart } from "react-stockcharts";
-import {
-	CandlestickSeries,
-	LineSeries,
-} from "react-stockcharts/lib/series";
+import { CandlestickSeries, LineSeries } from "react-stockcharts/lib/series";
 import { XAxis, YAxis } from "react-stockcharts/lib/axes";
 import {
-	CrossHairCursor,
-	EdgeIndicator,
-	CurrentCoordinate,
-	MouseCoordinateX,
-	MouseCoordinateY,
+  CrossHairCursor,
+  EdgeIndicator,
+  CurrentCoordinate,
+  MouseCoordinateX,
+  MouseCoordinateY
 } from "react-stockcharts/lib/coordinates";
 
-import { LabelAnnotation, Label, Annotate } from "react-stockcharts/lib/annotation";
+import {
+  LabelAnnotation,
+  Label,
+  Annotate
+} from "react-stockcharts/lib/annotation";
 import { discontinuousTimeScaleProvider } from "react-stockcharts/lib/scale";
-import { OHLCTooltip, MovingAverageTooltip } from "react-stockcharts/lib/tooltip";
+import {
+  OHLCTooltip,
+  MovingAverageTooltip
+} from "react-stockcharts/lib/tooltip";
 import { ema } from "react-stockcharts/lib/indicator";
 import { fitWidth } from "react-stockcharts/lib/helper";
 import { last } from "react-stockcharts/lib/utils";
 
 class CandleStickChartWithAnnotation extends React.Component {
-	render() {
-		const annotationProps = {
-			fontFamily: "Glyphicons Halflings",
-			fontSize: 20,
-			fill: "#060F8F",
-			opacity: 0.8,
-			text: "\ue182",
-			y: ({ yScale }) => yScale.range()[0],
-			onClick: console.log.bind(console),
-			tooltip: d => timeFormat("%B")(d.date),
-			// onMouseOver: console.log.bind(console),
-		};
-
-		const margin = { left: 80, right: 80, top: 30, bottom: 50 };
-		const height = 400;
-		const { type, data: initialData, width, ratio } = this.props;
-
-		const [yAxisLabelX, yAxisLabelY] = [
-			width - margin.left - 40,
-			(height - margin.top - margin.bottom) / 2
-		];
-
-		const xScaleProvider = discontinuousTimeScaleProvider
-			.inputDateAccessor(d => d.date);
-		const {
-			data,
-			xScale,
-			xAccessor,
-			displayXAccessor,
-		} = xScaleProvider(initialData);
-
-		const start = xAccessor(last(data));
-		const end = xAccessor(data[Math.max(0, data.length - 150)]);
-		const xExtents = [start, end];
-
-		return (
-			<ChartCanvas height={height}
-					ratio={ratio}
-					width={width}
-					margin={margin}
-					type={type}
-					seriesName="MSFT"
-					data={data}
-					xScale={xScale}
-					xAccessor={xAccessor}
-					displayXAccessor={displayXAccessor}
-					xExtents={xExtents}>
-
-				<Label x={(width - margin.left - margin.right) / 2} y={30}
-					fontSize="30" text="Chart title here" />
-
-				<Chart id={1}
-						yExtents={[d => [d.high, d.low]]}
-						padding={{ top: 10, bottom: 20 }}>
-					<XAxis axisAt="bottom" orient="bottom"/>
-					<MouseCoordinateX
-						at="bottom"
-						orient="bottom"
-						displayFormat={timeFormat("%Y-%m-%d")} />
-					<MouseCoordinateY
-						at="right"
-						orient="right"
-						displayFormat={format(".2f")} />
-
-					<Label x={(width - margin.left - margin.right) / 2} y={height - 45}
-						fontSize="12" text="XAxis Label here" />
-
-					<YAxis axisAt="right" orient="right" ticks={5} />
-
-					<Label x={yAxisLabelX} y={yAxisLabelY}
-						rotate={-90}
-						fontSize="12" text="YAxis Label here" />
-
-					<CandlestickSeries />
-					<EdgeIndicator itemType="last" orient="right" edgeAt="right"
-						yAccessor={d => d.close} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"}/>
-
-					<OHLCTooltip origin={[-40, 0]}/>
-
-					<Annotate with={LabelAnnotation}
-						when={d => d.date.getDate() === 1 /* some condition */}
-						usingProps={annotationProps} />
-
-				</Chart>
-				<CrossHairCursor strokeDasharray="LongDashDot" />
-
-			</ChartCanvas>
-		);
-	}
+  render() {
+    const annotationProps = {
+      fontFamily: "Glyphicons Halflings",
+      fontSize: 20,
+      fill: "#060F8F",
+      opacity: 0.8,
+      text: "\ue182",
+      y: ({ yScale }) => yScale.range()[0],
+      onClick: console.log.bind(console),
+      tooltip: (d) => timeFormat("%B")(d.date)
+      // onMouseOver: console.log.bind(console),
+    };
+
+    const margin = { left: 80, right: 80, top: 30, bottom: 50 };
+    const height = 500;
+    const { type, data: initialData, width, ratio } = this.props;
+
+    const [yAxisLabelX, yAxisLabelY] = [
+      width - margin.left - 40,
+      (height - margin.top - margin.bottom) / 2
+    ];
+
+    const xScaleProvider = discontinuousTimeScaleProvider.inputDateAccessor(
+      (d) => d.date
+    );
+    const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(
+      initialData
+    );
+
+    const start = xAccessor(last(data));
+    const end = xAccessor(data[Math.max(0, data.length - 150)]);
+    const xExtents = [start, end];
+    console.log(last(data));
+    return (
+      <ChartCanvas
+        height={height}
+        ratio={ratio}
+        width={width}
+        margin={margin}
+        type={type}
+        seriesName="MSFT"
+        data={data}
+        xScale={xScale}
+        xAccessor={xAccessor}
+        displayXAccessor={displayXAccessor}
+        xExtents={xExtents}
+      >
+        <Label
+          x={(width - margin.left - margin.right) / 2}
+          y={30}
+          fontSize="20"
+          text="ETHUSDT"
+        />
+
+        <Chart
+          id={1}
+          yExtents={[(d) => [d.high, d.low]]}
+          padding={{ top: 10, bottom: 20 }}
+        >
+          <XAxis axisAt="bottom" orient="bottom" />
+          <MouseCoordinateX
+            at="bottom"
+            orient="bottom"
+            displayFormat={timeFormat("%Y-%m-%d")}
+          />
+          <MouseCoordinateY
+            at="right"
+            orient="right"
+            displayFormat={format(".2f")}
+          />
+
+          <Label
+            x={(width - margin.left - margin.right) / 2}
+            y={height - 45}
+            fontSize="12"
+            text="XAxis Label here"
+          />
+
+          <YAxis axisAt="right" orient="right" ticks={5} />
+
+          <Label
+            x={yAxisLabelX}
+            y={yAxisLabelY}
+            rotate={-90}
+            fontSize="12"
+            text="Price"
+          />
+
+          <CandlestickSeries />
+          <EdgeIndicator
+            itemType="last"
+            orient="right"
+            edgeAt="right"
+            yAccessor={(d) => d.close}
+            fill={(d) => (d.close > d.open ? "#6BA583" : "#FF0000")}
+          />
+
+          <OHLCTooltip origin={[-40, 0]} />
+
+          <Annotate
+            with={LabelAnnotation}
+            when={(d) => d.date.getDate() === 1 /* some condition */}
+            usingProps={annotationProps}
+          />
+        </Chart>
+        <CrossHairCursor strokeDasharray="LongDashDot" />
+      </ChartCanvas>
+    );
+  }
 }
 
 CandleStickChartWithAnnotation.propTypes = {
-	data: PropTypes.array.isRequired,
-	width: PropTypes.number.isRequired,
-	ratio: PropTypes.number.isRequired,
-	type: PropTypes.oneOf(["svg", "hybrid"]).isRequired,
+  data: PropTypes.array.isRequired,
+  width: PropTypes.number.isRequired,
+  ratio: PropTypes.number.isRequired,
+  type: PropTypes.oneOf(["svg", "hybrid"]).isRequired
 };
 
 CandleStickChartWithAnnotation.defaultProps = {
-	type: "svg",
+  type: "svg"
 };
 
 CandleStickChartWithAnnotation = fitWidth(CandleStickChartWithAnnotation);

diff --git a/examples/CandleStickChartWithAnnotation/src/index.js b/examples/CandleStickChartWithAnnotation/src/index.js
@@ -1,30 +1,27 @@
-
-import React from 'react';
-import { render } from 'react-dom';
-import Chart from './Chart';
-import { getData } from "./utils"
+import React from "react";
+import { render } from "react-dom";
+import Chart from "./Chart";
+import { getData } from "./utils";
 
 import { TypeChooser } from "react-stockcharts/lib/helper";
 
 class ChartComponent extends React.Component {
-	componentDidMount() {
-		getData().then(data => {
-			this.setState({ data })
-		})
-	}
-	render() {
-		if (this.state == null) {
-			return <div>Loading...</div>
-		}
-		return (
-			<TypeChooser>
-				{type => <Chart type={type} data={this.state.data} />}
-			</TypeChooser>
-		)
-	}
+  componentDidMount() {
+    getData().then((data) => {
+      this.setState({ data });
+      // console.log({ data })
+    });
+  }
+  render() {
+    if (this.state == null) {
+      return <div>Loading...</div>;
+    }
+    return (
+      <TypeChooser>
+        {(type) => <Chart type={type} data={this.state.data} />}
+      </TypeChooser>
+    );
+  }
 }
 
-render(
-	<ChartComponent />,
-	document.getElementById("root")
-);
+render(<ChartComponent />, document.getElementById("root"));
diff --git a/examples/CandleStickChartWithAnnotation/src/utils.js b/examples/CandleStickChartWithAnnotation/src/utils.js
@@ -1,26 +1,27 @@
-
-
-import { tsvParse, csvParse } from  "d3-dsv";
+import { tsvParse, csvParse } from "d3-dsv";
 import { timeParse } from "d3-time-format";
 
 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;
-	};
+  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;
+    // console.log(d)
+    return d;
+  };
 }
 
 const parseDate = timeParse("%Y-%m-%d");
 
 export function getData() {
-	const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv")
-		.then(response => response.text())
-		.then(data => tsvParse(data, parseData(parseDate)))
-	return promiseMSFT;
+  const promiseMSFT = fetch(
+    "https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv"
+  )
+    .then((response) => response.text())
+    .then((data) => tsvParse(data, parseData(parseDate)));
+
+  return promiseMSFT;
 }