├── .gitignore ├── README.md ├── examples ├── AreaChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── AreaChartWithYPercent │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── AreaChartWithZoomPan │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── BarChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── BubbleChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartForContinuousIntraDay │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartForDiscontinuousIntraDay │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartPanToLoadMore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithAnnotation │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithBollingerBandOverlay │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithBrush │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithCHMousePointer │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithClickHandlerCallback │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithCompare │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithDarkTheme │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithEdge │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithEquidistantChannel │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithFibonacciInteractiveIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithForceIndexIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithFullStochasticsIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithGannFan │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithHoverTooltip │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithInteractiveIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithInteractiveYCoordinate │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithMA │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithMACDIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithPriceMarkers │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithRSIIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithSAR │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickChartWithStandardDeviationChannel │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithText │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ ├── interactiveutils.js │ │ └── utils.js ├── CandleStickChartWithUpdatingData │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── CandleStickChartWithMACDIndicator.js │ │ ├── Chart.js │ │ ├── index.js │ │ ├── updatingDataWrapper.js │ │ └── utils.js ├── CandleStickChartWithZoomPan │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickStockScaleChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickStockScaleChartWithVolumeBarV1 │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickStockScaleChartWithVolumeBarV2 │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── CandleStickStockScaleChartWithVolumeBarV3 │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── GroupedBarChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── HeikinAshi │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── HorizontalBarChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── HorizontalStackedBarChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── Kagi │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── KagiWithUpdatingData │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── Kagi.js │ │ ├── index.js │ │ ├── updatingDataWrapper.js │ │ └── utils.js ├── LineAndScatterChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── LineAndScatterChartGrid │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── MovingAverageCrossOverAlgorithmV1 │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── MovingAverageCrossOverAlgorithmV2 │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── OHLCChartWithElderImpulseIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── OHLCChartWithElderRayIndicator │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── PointAndFigure │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── PointAndFigureWithUpdatingData │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── PointAndFigure.js │ │ ├── index.js │ │ ├── updatingDataWrapper.js │ │ └── utils.js ├── Renko │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── RenkoWithUpdatingData │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── Renko.js │ │ ├── index.js │ │ ├── updatingDataWrapper.js │ │ └── utils.js ├── StackedBarChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js ├── VolumeProfileBySessionChart │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Chart.js │ │ ├── index.js │ │ └── utils.js └── VolumeProfileChart │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── Chart.js │ ├── index.js │ └── utils.js ├── package-lock.json ├── package.json └── scripts ├── buildexamples.js ├── template ├── README.md └── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── templatePackage ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /examples/AreaChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/AreaChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/AreaChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/AreaChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/AreaChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/AreaChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/AreaChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/AreaChartWithYPercent/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/AreaChartWithYPercent/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/AreaChartWithYPercent/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/AreaChartWithYPercent/public/favicon.ico -------------------------------------------------------------------------------- /examples/AreaChartWithYPercent/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/AreaChartWithYPercent/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/AreaChartWithYPercent/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/AreaChartWithZoomPan/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/AreaChartWithZoomPan/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/AreaChartWithZoomPan/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/AreaChartWithZoomPan/public/favicon.ico -------------------------------------------------------------------------------- /examples/AreaChartWithZoomPan/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/AreaChartWithZoomPan/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/AreaChartWithZoomPan/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/BarChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/BarChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/BarChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/BarChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/BarChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/BarChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/BarChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | 20 | export function getData() { 21 | const promiseBarData = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/barData.json") 22 | .then(response => response.json()); 23 | return promiseBarData; 24 | } 25 | -------------------------------------------------------------------------------- /examples/BubbleChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/BubbleChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/BubbleChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/BubbleChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/BubbleChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/BubbleChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/BubbleChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | 20 | export function getData() { 21 | const promiseBubbleData = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/bubble.json") 22 | .then(response => response.json()); 23 | return promiseBubbleData; 24 | } 25 | -------------------------------------------------------------------------------- /examples/CandleStickChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartForContinuousIntraDay/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartForContinuousIntraDay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartForContinuousIntraDay/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartForContinuousIntraDay/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartForContinuousIntraDay/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartForContinuousIntraDay/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartForDiscontinuousIntraDay/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartForDiscontinuousIntraDay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartForDiscontinuousIntraDay/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartForDiscontinuousIntraDay/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartForDiscontinuousIntraDay/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartForDiscontinuousIntraDay/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartForDiscontinuousIntraDay/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | 20 | export function getData() { 21 | const promiseIntraDayDiscontinuous = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT_INTRA_DAY.tsv") 22 | .then(response => response.text()) 23 | .then(data => tsvParse(data, parseData(d => new Date(+d)))); 24 | return promiseIntraDayDiscontinuous; 25 | } 26 | -------------------------------------------------------------------------------- /examples/CandleStickChartPanToLoadMore/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartPanToLoadMore/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartPanToLoadMore/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartPanToLoadMore/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartPanToLoadMore/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartPanToLoadMore/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartPanToLoadMore/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithAnnotation/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithAnnotation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithAnnotation/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithAnnotation/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithAnnotation/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithAnnotation/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithAnnotation/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBollingerBandOverlay/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBollingerBandOverlay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBollingerBandOverlay/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithBollingerBandOverlay/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithBollingerBandOverlay/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBollingerBandOverlay/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBollingerBandOverlay/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBrush/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBrush/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBrush/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithBrush/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithBrush/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBrush/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithBrush/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCHMousePointer/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCHMousePointer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCHMousePointer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithCHMousePointer/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithCHMousePointer/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCHMousePointer/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCHMousePointer/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithClickHandlerCallback/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithClickHandlerCallback/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithClickHandlerCallback/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithClickHandlerCallback/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithClickHandlerCallback/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithClickHandlerCallback/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithClickHandlerCallback/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCompare/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCompare/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCompare/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithCompare/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithCompare/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCompare/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithCompare/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseCompare = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/comparison.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, d => { 25 | d = parseData(parseDate)(d); 26 | d.SP500Close = +d.SP500Close; 27 | d.AAPLClose = +d.AAPLClose; 28 | d.GEClose = +d.GEClose; 29 | return d; 30 | })); 31 | return promiseCompare; 32 | } 33 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithDarkTheme/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithDarkTheme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithDarkTheme/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithDarkTheme/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithDarkTheme/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithDarkTheme/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithDarkTheme/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEdge/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEdge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEdge/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithEdge/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithEdge/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEdge/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEdge/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEquidistantChannel/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEquidistantChannel/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithEquidistantChannel/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithEquidistantChannel/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEquidistantChannel/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithEquidistantChannel/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFibonacciInteractiveIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFibonacciInteractiveIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithFibonacciInteractiveIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithFibonacciInteractiveIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFibonacciInteractiveIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFibonacciInteractiveIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithForceIndexIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithForceIndexIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithForceIndexIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithForceIndexIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithForceIndexIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithForceIndexIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFullStochasticsIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFullStochasticsIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithFullStochasticsIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithFullStochasticsIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFullStochasticsIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithFullStochasticsIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithGannFan/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithGannFan/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithGannFan/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithGannFan/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithGannFan/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithGannFan/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithGannFan/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithHoverTooltip/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithHoverTooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithHoverTooltip/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithHoverTooltip/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithHoverTooltip/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithHoverTooltip/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithHoverTooltip/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithInteractiveIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveYCoordinate/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveYCoordinate/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithInteractiveYCoordinate/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveYCoordinate/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveYCoordinate/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithInteractiveYCoordinate/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMA/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMA/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMA/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithMA/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithMA/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMA/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMA/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMACDIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMACDIndicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMACDIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithMACDIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithMACDIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMACDIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithMACDIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithPriceMarkers/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithPriceMarkers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithPriceMarkers/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithPriceMarkers/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithPriceMarkers/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithPriceMarkers/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithPriceMarkers/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithRSIIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithRSIIndicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithRSIIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithRSIIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithRSIIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithRSIIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithRSIIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithSAR/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithSAR/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithSAR/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithSAR/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithSAR/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithSAR/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithSAR/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithStandardDeviationChannel/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithStandardDeviationChannel/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithStandardDeviationChannel/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithStandardDeviationChannel/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithStandardDeviationChannel/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithStandardDeviationChannel/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithText/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithText/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithText/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithText/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithText/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithText/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithText/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithUpdatingData/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/src/Chart.js: -------------------------------------------------------------------------------- 1 | 2 | import CandleStickChartWithMACDIndicator from "./CandleStickChartWithMACDIndicator"; 3 | import updatingDataWrapper from "./updatingDataWrapper"; 4 | 5 | const CandleStickChartWithUpdatingData = updatingDataWrapper(CandleStickChartWithMACDIndicator); 6 | 7 | export default CandleStickChartWithUpdatingData; 8 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithUpdatingData/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithZoomPan/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithZoomPan/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithZoomPan/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickChartWithZoomPan/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickChartWithZoomPan/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithZoomPan/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickChartWithZoomPan/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickStockScaleChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV1/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickStockScaleChartWithVolumeBarV1/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV1/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV1/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV2/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickStockScaleChartWithVolumeBarV2/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV2/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV2/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV3/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/CandleStickStockScaleChartWithVolumeBarV3/public/favicon.ico -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV3/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV3/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/CandleStickStockScaleChartWithVolumeBarV3/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/GroupedBarChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/GroupedBarChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/GroupedBarChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/GroupedBarChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/GroupedBarChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/GroupedBarChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/GroupedBarChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | 20 | export function getData() { 21 | const promiseBarData = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/groupedBarData.json") 22 | .then(response => response.json()); 23 | return promiseBarData; 24 | } 25 | -------------------------------------------------------------------------------- /examples/HeikinAshi/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/HeikinAshi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/HeikinAshi/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/HeikinAshi/public/favicon.ico -------------------------------------------------------------------------------- /examples/HeikinAshi/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/HeikinAshi/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/HeikinAshi/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/HorizontalBarChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/HorizontalBarChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/HorizontalBarChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/HorizontalBarChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/HorizontalBarChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/HorizontalBarChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/HorizontalBarChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | 20 | export function getData() { 21 | const promiseBarData = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/barData.json") 22 | .then(response => response.json()) 23 | .then(barData => barData.map(({ x, y }) => ({ x: y, y: x }))); 24 | 25 | return promiseBarData; 26 | } 27 | -------------------------------------------------------------------------------- /examples/HorizontalStackedBarChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/HorizontalStackedBarChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/HorizontalStackedBarChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/HorizontalStackedBarChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/HorizontalStackedBarChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/HorizontalStackedBarChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/HorizontalStackedBarChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | 20 | export function getData() { 21 | const promiseBarData = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/groupedBarData.json") 22 | .then(response => response.json()) 23 | .then(groupedBarData => { 24 | return groupedBarData.map(d => { 25 | return { 26 | y: d.x, 27 | x1: d.y1, 28 | x2: d.y2, 29 | x3: d.y3, 30 | x4: d.y4, 31 | }; 32 | }); 33 | }); 34 | return promiseBarData; 35 | } 36 | -------------------------------------------------------------------------------- /examples/Kagi/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/Kagi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/Kagi/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/Kagi/public/favicon.ico -------------------------------------------------------------------------------- /examples/Kagi/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/Kagi/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/Kagi/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/KagiWithUpdatingData/public/favicon.ico -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/src/Chart.js: -------------------------------------------------------------------------------- 1 | 2 | import Kagi from "./Kagi"; 3 | import updatingDataWrapper from "./updatingDataWrapper"; 4 | 5 | const KagiWithUpdatingData = updatingDataWrapper(Kagi); 6 | 7 | export default KagiWithUpdatingData; 8 | -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/KagiWithUpdatingData/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/LineAndScatterChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/LineAndScatterChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/LineAndScatterChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/LineAndScatterChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/LineAndScatterChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/LineAndScatterChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/LineAndScatterChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseCompare = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/comparison.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, d => { 25 | d = parseData(parseDate)(d); 26 | d.SP500Close = +d.SP500Close; 27 | d.AAPLClose = +d.AAPLClose; 28 | d.GEClose = +d.GEClose; 29 | return d; 30 | })); 31 | return promiseCompare; 32 | } 33 | -------------------------------------------------------------------------------- /examples/LineAndScatterChartGrid/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/LineAndScatterChartGrid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/LineAndScatterChartGrid/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/LineAndScatterChartGrid/public/favicon.ico -------------------------------------------------------------------------------- /examples/LineAndScatterChartGrid/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/LineAndScatterChartGrid/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/LineAndScatterChartGrid/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV1/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/MovingAverageCrossOverAlgorithmV1/public/favicon.ico -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV1/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV1/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV2/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/MovingAverageCrossOverAlgorithmV2/public/favicon.ico -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV2/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/MovingAverageCrossOverAlgorithmV2/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderImpulseIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderImpulseIndicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderImpulseIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/OHLCChartWithElderImpulseIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/OHLCChartWithElderImpulseIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderImpulseIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderImpulseIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderRayIndicator/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderRayIndicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderRayIndicator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/OHLCChartWithElderRayIndicator/public/favicon.ico -------------------------------------------------------------------------------- /examples/OHLCChartWithElderRayIndicator/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderRayIndicator/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/OHLCChartWithElderRayIndicator/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/PointAndFigure/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/PointAndFigure/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/PointAndFigure/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/PointAndFigure/public/favicon.ico -------------------------------------------------------------------------------- /examples/PointAndFigure/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/PointAndFigure/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/PointAndFigure/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/PointAndFigureWithUpdatingData/public/favicon.ico -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/src/Chart.js: -------------------------------------------------------------------------------- 1 | 2 | import PointAndFigure from "./PointAndFigure"; 3 | import updatingDataWrapper from "./updatingDataWrapper"; 4 | 5 | const PointAndFigureWithUpdatingData = updatingDataWrapper(PointAndFigure); 6 | 7 | export default PointAndFigureWithUpdatingData; 8 | -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/PointAndFigureWithUpdatingData/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/Renko/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/Renko/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/Renko/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/Renko/public/favicon.ico -------------------------------------------------------------------------------- /examples/Renko/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/Renko/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/Renko/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/RenkoWithUpdatingData/public/favicon.ico -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/src/Chart.js: -------------------------------------------------------------------------------- 1 | 2 | import Renko from "./Renko"; 3 | import updatingDataWrapper from "./updatingDataWrapper"; 4 | 5 | const RenkoWithUpdatingData = updatingDataWrapper(Renko); 6 | 7 | export default RenkoWithUpdatingData; 8 | -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/RenkoWithUpdatingData/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/StackedBarChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/StackedBarChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/StackedBarChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/StackedBarChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/StackedBarChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/StackedBarChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/StackedBarChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/VolumeProfileBySessionChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/VolumeProfileBySessionChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/VolumeProfileBySessionChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/VolumeProfileBySessionChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/VolumeProfileBySessionChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/VolumeProfileBySessionChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/VolumeProfileBySessionChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /examples/VolumeProfileChart/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/VolumeProfileChart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/VolumeProfileChart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/examples/VolumeProfileChart/public/favicon.ico -------------------------------------------------------------------------------- /examples/VolumeProfileChart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/VolumeProfileChart/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import Chart from './Chart'; 5 | import { getData } from "./utils" 6 | 7 | import { TypeChooser } from "react-stockcharts/lib/helper"; 8 | 9 | class ChartComponent extends React.Component { 10 | componentDidMount() { 11 | getData().then(data => { 12 | this.setState({ data }) 13 | }) 14 | } 15 | render() { 16 | if (this.state == null) { 17 | return
Loading...
18 | } 19 | return ( 20 | 21 | {type => } 22 | 23 | ) 24 | } 25 | } 26 | 27 | render( 28 | , 29 | document.getElementById("root") 30 | ); 31 | -------------------------------------------------------------------------------- /examples/VolumeProfileChart/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { tsvParse, csvParse } from "d3-dsv"; 4 | import { timeParse } from "d3-time-format"; 5 | 6 | function parseData(parse) { 7 | return function(d) { 8 | d.date = parse(d.date); 9 | d.open = +d.open; 10 | d.high = +d.high; 11 | d.low = +d.low; 12 | d.close = +d.close; 13 | d.volume = +d.volume; 14 | 15 | return d; 16 | }; 17 | } 18 | 19 | const parseDate = timeParse("%Y-%m-%d"); 20 | 21 | export function getData() { 22 | const promiseMSFT = fetch("https://cdn.rawgit.com/rrag/react-stockcharts/master/docs/data/MSFT.tsv") 23 | .then(response => response.text()) 24 | .then(data => tsvParse(data, parseData(parseDate))) 25 | return promiseMSFT; 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-examples2", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "publish": "node scripts/buildexamples.js", 8 | "updateTemplate": "cd scripts/templatePackage && npm run reinstall-deps", 9 | "push": "git add -A && git commit -m 'updating examples' && git push" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/rrag/react-stockcharts-examples2.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/rrag/react-stockcharts-examples2/issues" 19 | }, 20 | "homepage": "https://github.com/rrag/react-stockcharts-examples2#readme", 21 | "dependencies": { 22 | "fs-extra": "^4.0.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scripts/template/README.md: -------------------------------------------------------------------------------- 1 | ### Pre req 2 | node 6+ 3 | 4 | npm 3+ 5 | 6 | 7 | ``` 8 | $ git clone https://github.com/rrag/react-stockcharts-examples2 9 | $ cd examples/ 10 | 11 | $ npm install 12 | 13 | $ npm start # this should launch a browser with http://localhost:3000 14 | ``` 15 | -------------------------------------------------------------------------------- /scripts/template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rrag/react-stockcharts-examples2/7a01135b80dd4adcdec64ade378f9e13ca6f0367/scripts/template/public/favicon.ico -------------------------------------------------------------------------------- /scripts/template/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /scripts/templatePackage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-stockcharts-example2", 3 | "description": "Examples for react-stockcharts", 4 | "version": "0.0.24", 5 | "dependencies": { 6 | "d3-dsv": "^1.0.8", 7 | "d3-format": "^1.2.1", 8 | "d3-scale": "^1.0.7", 9 | "d3-time-format": "^2.1.1", 10 | "prop-types": "^15.6.0", 11 | "react": "^16.2.0", 12 | "react-bootstrap": "^0.31.5", 13 | "react-dom": "^16.2.0", 14 | "react-stockcharts": "^0.7.8", 15 | "shortid": "^2.2.8" 16 | }, 17 | "devDependencies": { 18 | "react-scripts": "^1.0.17" 19 | }, 20 | "scripts": { 21 | "reinstall-deps": "rm -rf node_modules package-lock.json && npm i", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | --------------------------------------------------------------------------------