const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
}
]
},
plugins: [
[new MiniCssExtractPlugin()],
resolve: {
extensions: ['.js', '.scss']
}
}import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Tabs, Tab, Panel } from '@bumaga/tabs'
import axios from 'axios';
import ApexCharts from 'apexcharts'
import ReactApexChart from 'react-apexcharts'
var labelFormatter = function (value) {
var val = Math.abs(value)
if (val >= 1000000) {
val = (val / 1000000).toFixed(1) + ' M';
}
return val;
}
var data = [{
x: 1994,
y: 2543763
},
{
x: 1995,
y: 4486659
},
{
x: 1996,
y: 7758386
},
{
x: 1997,
y: 12099221
},
{
x: 1998,
y: 18850762
},
{
x: 1999,
y: 28153765
},
{
x: 2000,
y: 41479495
},
{
x: 2001,
y: 50229224
},
{
x: 2002,
y: 66506501
},
{
x: 2003,
y: 78143598
},
{
x: 2004,
y: 91332777
},
{
x: 2005,
y: 103010128
},
{
x: 2006,
y: 116291681
},
{
x: 2007,
y: 137322698
},
{
x: 2008,
y: 157506752
},
{
x: 2009,
y: 176640381
},
{
x: 2010,
y: 202320297
},
{
x: 2011,
y: 223195735
},
{
x: 2012,
y: 249473624
},
{
x: 2013,
y: 272842810
},
{
x: 2014,
y: 295638556
},
{
x: 2015,
y: 318599615
},
{
x: 2070,
y: 342497123
}
]
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
y_axe:"open",
series: [{
name: "Bitcoin",
data: data
}, {
name: "Etherium",
data: data.reverse()
}],
options: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Logarithmic Scale',
align: 'left'
},
xaxis: {
type: 'datetime',
title: {
text: 'Time'
}
},
yaxis: {
type: '',
title: {
text: 'Time'
}
}/*[
{
min: 1000000,
max: 500000000,
tickAmount: 4,
logarithmic: true,
seriesName: 'Bitcoin',
labels: {
formatter: labelFormatter
},
title: {
text: 'Open'
}
},
{
min: 1000000,
max: 500000000,
opposite: true,
tickAmount: 4,
seriesName: 'Etherium',
labels: {
formatter: labelFormatter
},
title: {
text: 'Open'
}
}
]*/
},
};
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
}
function App() {
axios.get('https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=100&api_key=045d4d548b18401b4c3228075a6fda30de3cda3c7efbb79ce3a5552cc0c1668b')
.then(res => {
const cryptos = res.data;
//console.log(cryptos);
data=res.data.Data.map(e => { return { x: e.time, y: e.open }});
console.log("data", data);
//this.setState({cryptos: cryptos});
})
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Tabs>
<div>
<Tab><button>Tab 1</button></Tab>
<Tab><button>Tab 2</button></Tab>
<Tab><button>Tab 3</button></Tab>
</div>
<Panel>
<label style={{position:'absolute'}}>
Y Axis:
<select value={this.state.y_axis} onChange={this.handleYaxisChange}>
<option value="Open">Open</option>
<option value="High">High</option>
<option value="Low">Low</option>
<option value="Close">Close</option>
<option value="All">All</option>
</select>
</label>
<p><ApexChart/></p></Panel>
<Panel><p>Panel 2</p></Panel>
<Panel><p>panel 3</p></Panel>
</Tabs>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Hello, Curly brackets!
</a>
</header>
</div>
);
}
export default App;