added modul chart-race-react

package-lock.json

@@ -2688,6 +2688,11 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
+    "chart-race-react": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/chart-race-react/-/chart-race-react-1.0.2.tgz",
+      "integrity": "sha512-bt2kleFnU3dx3uPQRFMDIfshAdRxSsEsLpioNt8tm7pgGGuDV8bU1cvbbP51HpGnO1Yqv8XShxnI70B4glZOBg=="
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -3925,6 +3930,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+      "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -4223,6 +4233,25 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+      "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "csstype": "^2.6.7"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.7.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.1.tgz",
+          "integrity": "sha512-SQ0sS7KUJDvgCI2cpZG0nJygO6002oTbhgSuw4WcocsnbxLwL5Q8I3fqbJdyBAc3uFrWZiR2JomseuxSuci3SQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "dom-serializer": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
@@ -10521,6 +10550,17 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "chart-race-react": "^1.0.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.2.0",
+    "react-transition-group": "^4.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,8 +1,37 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import BarChart from 'chart-race-react';
+
+
+//const data = {"apple": "2", "banana": "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">
@@ -20,6 +49,37 @@ function App() {
         </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>
   );
 }