From a12a12d71a51a0666370bdf60b26b0471be25edd Mon Sep 17 00:00:00 2001 From: Marty <63034149+martfhill@users.noreply.github.com> Date: Sat, 8 Jan 2022 06:51:14 +1100 Subject: [PATCH] initial commit --- .../public/favicon.ico | Bin 24838 -> 151 bytes .../src/Chart.js | 235 ++++++++++-------- .../src/index.js | 45 ++-- .../src/utils.js | 35 +-- 4 files changed, 168 insertions(+), 147 deletions(-) diff --git a/examples/CandleStickChartWithAnnotation/public/favicon.ico b/examples/CandleStickChartWithAnnotation/public/favicon.ico index 5c125de5d897c1ff5692a656485b3216123dcd89..a5683aea9c15bc78bf9204194db27ecd2a5ed8b0 100644 GIT binary patch literal 151 zcmXwxI~Ia45CBgE8;kf}l zBWYDM(Lw>UmWn^P?JJiPbZDB!UZ&nScSc8!sXffL>;07*OW1m2+YbH-3>e+YqY5p< a@AeQ4_ZX9+N{X;Qr&S0%zJyY&4}1aJjWzTD literal 24838 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 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 ( - - - - ); - } + 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 ( + + + ); + } } 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 index c1947809..fe05507c 100644 --- 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
Loading...
- } - return ( - - {type => } - - ) - } + componentDidMount() { + getData().then((data) => { + this.setState({ data }); + // console.log({ data }) + }); + } + render() { + if (this.state == null) { + return
Loading...
; + } + return ( + + {(type) => } + + ); + } } -render( - , - document.getElementById("root") -); +render(, document.getElementById("root")); diff --git a/examples/CandleStickChartWithAnnotation/src/utils.js b/examples/CandleStickChartWithAnnotation/src/utils.js index 114bf1ce..1a137192 100644 --- 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; }