Add ranking

frontend/src/Components/Treemap.js

@@ -101,7 +101,7 @@ function Treemap({ width, height, data }){
         .append("text")
             .attr("x", 0)
             .attr("y", 14)    // +20 to adjust position (lower)
-            .text("Three group leaders and 14 employees")
+            .text("What's hot in Cryptocurrency world")
             .attr("font-size", "19px")
             .attr("fill",  "grey" )
     }

frontend/src/Views/CoinStat.css

@@ -6,6 +6,5 @@
   background: #dadada;
   border-radius: 5px;
   transition: all .3s;
-  justify-content: left;
 
 }

frontend/src/Views/CoinStat.js

@@ -61,15 +61,20 @@ export class CoinStat extends Component {
           height: 200,
           width: 200
         }} />
+        </div>
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
         <PieChart
         viewBoxSize = {700,700}
         reveal = {100}
   data={[
-    { title: 'Positive', value: this.state.pos_perc, color: '#82dd55' },
-    { title: 'Negative', value: this.state.neg_perc, color: '#E23636' },
+    { title: 'Positive', value: 0.1, color: '#82dd55' },
+    { title: 'Negative', value: 0.008, color: '#E23636' },
   ]}
 />
-        </div>
+</div>
         </Container>
         </div>
     </div>

frontend/src/Views/Ranking.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {Component} from 'react'
 //import Box from '@mui/material/Box';
 //import { styled } from '@mui/material/styles';
 //import Paper from '@mui/material/Paper';
@@ -7,7 +8,7 @@ import Header from '../Components/Header';
 import Treemap from '../Components/Treemap';
 
 //const heights = [500, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
-const dataset = {"children":[{"name":"boss","children":[{"name":"mister_a","group":"A","value":28,"colname":"level3"},{"name":"mister_b","group":"A","value":19,"colname":"level3"},{"name":"mister_c","group":"C","value":18,"colname":"level3"},{"name":"mister_d","group":"C","value":19,"colname":"level3"}],"colname":"level2"},{"name":"boss2","children":[{"name":"mister_e","group":"C","value":14,"colname":"level3"},{"name":"mister_f","group":"A","value":11,"colname":"level3"},{"name":"mister_g","group":"B","value":15,"colname":"level3"},{"name":"mister_h","group":"B","value":16,"colname":"level3"}],"colname":"level2"},{"name":"boss3","children":[{"name":"mister_i","group":"B","value":10,"colname":"level3"},{"name":"mister_j","group":"A","value":13,"colname":"level3"},{"name":"mister_k","group":"A","value":13,"colname":"level3"},{"name":"mister_l","group":"D","value":25,"colname":"level3"},{"name":"mister_m","group":"D","value":16,"colname":"level3"},{"name":"mister_n","group":"D","value":28,"colname":"level3"}],"colname":"level2"}],"name":"CEO"};
+const dataset = {"children":[{"name":"Bitcoin","children":[{"name":"tweets","group":"A","value":1000,"colname":"level3"}]},{"name":"Ethereum","children":[{"name":"tweets","group":"A","value":100,"colname":"level3"}]},{"name":"Zcash","children":[{"name":"tweets","group":"A","value":50,"colname":"level3"}]},{"name":"Tether","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"TRON","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"Steem","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"neo","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"Dash","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"BNB","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]},{"name":"Cardano","children":[{"name":"tweets","group":"A","value":200,"colname":"level3"}]}],"name":"CEO"};
 /*
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -18,7 +19,13 @@ const Item = styled(Paper)(({ theme }) => ({
   justifyContent: 'center',
 }));
 */
-export default function BasicMasonry() {
+export class Ranking extends Component {
+  componentDidMount() {
+    fetch('https://localhost:62241/Search/ranking')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
   return (
       <div>
     <Header/>
@@ -28,8 +35,10 @@ export default function BasicMasonry() {
         alignItems:'center',
         height: '100vh'
         }}>
-    <Treemap width={600} height={400} data={dataset} />
+    <Treemap width={800} height={500} data={dataset} />
     </div>
     </div>
   );
+      }
 }
+export default Ranking;