123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import React from 'react';
- import logo from './logo.svg';
- import './App.css';
- import BarChart from 'chart-race-react';
- //const data = {"apple": "2", "ELENA": "5", "orange": "2", "yoghurt": "3", "pinguin": "1", "blub": "5"}
- const data = ['apple', 'banana', 'orange', 'yoghurt', 'pinguin', 'blub'].reduce((res, item) => ({...res, ...{[item]: Array(20).fill(0).map(_ => Math.floor(20 * Math.random()))}}), {});
- const randomColor = () => {
- return `rgb(${255 * Math.random()}, ${255 * Math.random()}, ${255})`;
- }
- const len = data[Object.keys(data)[0]].length;
- const keys = Object.keys(data);
- const colors = keys.reduce((res, item) => ({
- ...res,
- ...{ [item]: randomColor() }
- }), {});
- const labels = keys.reduce((res, item, idx) => {
- return{
- ...res,
- ...{[item]: (
- <div style={{textAlign:"center",}}>
- <div>{item}</div>
- </div>
- )}
- }}, {});
- const time = Array(20).fill(0).map((itm, idx) => idx + 1);
- function App() {
-
- 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>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- <h1>Test</h1>
- <div style={{width: "500px"}}>
- <BarChart
- start={true}
- data={data}
- timeline={time}
- labels={labels}
- colors={colors}
- len={len}
- timeout={400}
- delay={1000}
- timelineStyle={{
- textAlign: "center",
- fontSize: "50px",
- color: "rgb(148, 148, 148)",
- marginBottom: "100px"
- }}
- textBoxStyle={{
- textAlign: "right",
- color: "rgb(133, 131, 131)",
- fontSize: "30px",
- }}
- barStyle={{
- height: "60px",
- marginTop: "10px",
- borderRadius: "10px",
- }}
- width={[15, 75, 10]}
- maxItems={5}
- />
- </div>
- <h1>Test</h1>
- </div>
- );
- }
- export default App;
|