initial communication with api, pie char and treemap

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@devexpress/dx-react-chart-material-ui": "^2.7.6",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.5",
@@ -12,10 +13,12 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "d3": "^7.3.0",
+    "react-minimal-pie-chart": "^8.2.0",
+    "react-multi-carousel": "^2.6.5",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-simply-carousel": "^5.1.4",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.3"
   },

frontend/src/Components/Carousel

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import Carousel from "react-simply-carousel";
+
+export class CarouselCrypto extends Component {
+  state = {
+    activeSlideIndex: 0,
+  };
+
+  setActiveSlideIndex = (newActiveSlideIndex) => {
+    this.setState({
+      activeSlideIndex: newActiveSlideIndex,
+    });
+  };
+
+  render() {
+    return (
+      <Carousel
+        activeSlideIndex={this.state.activeSlideIndex}
+        onRequestChange={this.setActiveSlideIndex}
+        itemsToShow={3}
+        itemsToScroll={3}
+      >
+        <div style={{ width: 300, height: 300 }}>slide 0</div>
+        <div style={{ width: 300, height: 300 }}>slide 1</div>
+        <div style={{ width: 300, height: 300 }}>slide 2</div>
+        <div style={{ width: 300, height: 300 }}>slide 3</div>
+        <div style={{ width: 300, height: 300 }}>slide 4</div>
+        <div style={{ width: 300, height: 300 }}>slide 5</div>
+        <div style={{ width: 300, height: 300 }}>slide 6</div>
+        <div style={{ width: 300, height: 300 }}>slide 7</div>
+        <div style={{ width: 300, height: 300 }}>slide 8</div>
+        <div style={{ width: 300, height: 300 }}>slide 9</div>
+      </Carousel>
+    );
+  }
+}
+export default CarouselCrypto

frontend/src/Components/Treemap.js

@@ -0,0 +1,120 @@
+import * as d3 from 'd3';
+import React, { useRef, useEffect } from 'react';
+
+function Treemap({ width, height, data }){
+    const ref = useRef();
+
+    useEffect(() => {
+        const svg = d3.select(ref.current)
+            .attr("width", width)
+            .attr("height", height)
+            .style("border", "1px solid black")
+    }, []);
+
+    useEffect(() => {
+        draw();
+    }, [data]);
+
+    const draw = () => {
+        const svg = d3.select(ref.current);
+
+        // Give the data to this cluster layout:
+        var root = d3.hierarchy(data).sum(function(d){ return d.value});
+
+        // initialize treemap
+        d3.treemap()
+            .size([width, height])
+            .paddingTop(28)
+            .paddingRight(7)
+            .paddingInner(3)
+            (root);
+        
+        const color = d3.scaleOrdinal()
+            .domain(["boss1", "boss2", "boss3"])
+            .range([ "#402D54", "#D18975", "#8FD175"]);
+
+        const opacity = d3.scaleLinear()
+            .domain([10, 30])
+            .range([.5,1]);
+
+
+        // Select the nodes
+        var nodes = svg
+                    .selectAll("rect")
+                    .data(root.leaves())
+
+        // draw rectangles
+        nodes.enter()
+            .append("rect")
+            .attr('x', function (d) { return d.x0; })
+            .attr('y', function (d) { return d.y0; })
+            .attr('width', function (d) { return d.x1 - d.x0; })
+            .attr('height', function (d) { return d.y1 - d.y0; })
+            .style("stroke", "black")
+            .style("fill", function(d){ return color(d.parent.data.name)} )
+            .style("opacity", function(d){ return opacity(d.data.value)})
+
+        nodes.exit().remove()
+
+        // select node titles
+        var nodeText = svg
+            .selectAll("text")
+            .data(root.leaves())
+
+        // add the text
+        nodeText.enter()
+            .append("text")
+            .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
+            .attr("y", function(d){ return d.y0+20})    // +20 to adjust position (lower)
+            .text(function(d){ return d.data.name.replace('mister_','') })
+            .attr("font-size", "19px")
+            .attr("fill", "white")
+        
+        // select node titles
+        var nodeVals = svg
+            .selectAll("vals")
+            .data(root.leaves())  
+
+        // add the values
+        nodeVals.enter()
+            .append("text")
+            .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
+            .attr("y", function(d){ return d.y0+35})    // +20 to adjust position (lower)
+            .text(function(d){ return d.data.value })
+            .attr("font-size", "11px")
+            .attr("fill", "white")
+    
+        // add the parent node titles
+        svg
+        .selectAll("titles")
+        .data(root.descendants().filter(function(d){return d.depth==1}))
+        .enter()
+        .append("text")
+            .attr("x", function(d){ return d.x0})
+            .attr("y", function(d){ return d.y0+21})
+            .text(function(d){ return d.data.name })
+            .attr("font-size", "19px")
+            .attr("fill",  function(d){ return color(d.data.name)} )
+    
+        // Add the chart heading
+        svg
+        .append("text")
+            .attr("x", 0)
+            .attr("y", 14)    // +20 to adjust position (lower)
+            .text("Three group leaders and 14 employees")
+            .attr("font-size", "19px")
+            .attr("fill",  "grey" )
+    }
+
+
+    return (
+        <div className="chart">
+            <svg ref={ref}>
+            </svg>
+        </div>
+        
+    )
+
+}
+
+export default Treemap;

frontend/src/Views/CoinStat.css

@@ -0,0 +1,11 @@
+.innerSpace
+{
+  width: 1200px;
+  height: 350px;
+  margin: auto;
+  background: #dadada;
+  border-radius: 5px;
+  transition: all .3s;
+  justify-content: left;
+
+}

frontend/src/Views/CoinStat.js

@@ -1,4 +1,4 @@
-import './Home.css';
+import './CoinStat.css';
 import Header from '../Components/Header'
 import Container from '@mui/material/Container';
 import AutoComplete from '../Components/AutoComplete'
@@ -18,12 +18,18 @@ import waluta10 from '../Assets/11.png';
 import ranking from '../Assets/ranking_vs.png';
 import logo from '../Assets/logo.png';
 import {useNavigate} from 'react-router-dom';
-import {useCallback} from 'react';
+import {useCallback, Component} from 'react';
 import { Link } from "react-router-dom";
+import { PieChart } from 'react-minimal-pie-chart';
 
 
-
-const CoinStat = () => {
+export class CoinStat extends Component {
+  componentDidMount() {
+    fetch('https://localhost:62241/Search/analise/eth')
+      .then((res) => res.json())
+      .then((json) => this.setState({ pos: json.results }));
+  }
+  render() {
   return (
     <div>
       <Header/>
@@ -44,10 +50,32 @@ const CoinStat = () => {
       ))}
     </ImageList>
     </div>
-
+    <div className = 'innerSpace'>
+      <Container maxWidth="xl">
+        <div style={{
+        display: 'flex',
+        justifyContent: 'left'
+        }}>
+      <img src={waluta1} alt='currentVal' style={{
+          borderWidth: 5,
+          height: 200,
+          width: 200
+        }} />
+        <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' },
+  ]}
+/>
+        </div>
+        </Container>
+        </div>
     </div>
   );
 }
+}
 const itemData = [
     {
       img: waluta1,

frontend/src/Views/Home.js

@@ -1,7 +1,7 @@
 import './Home.css';
 import Header from '../Components/Header'
 import Container from '@mui/material/Container';
-import AutoComplete from '../Components/AutoComplete'
+//import CarouselCrypto from '../Components/Carousel'
 //import DatePicker from '../components/DatePicker'
 import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
@@ -20,10 +20,31 @@ import logo from '../Assets/logo.png';
 import {useNavigate} from 'react-router-dom';
 import {useCallback} from 'react';
 import { Link } from "react-router-dom";
-
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
 
 
 const Home = () => {
+  const responsive = {
+    superLargeDesktop: {
+      // the naming can be any, depends on you.
+      breakpoint: { max: 4000, min: 3000 },
+      items: 5
+    },
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 3
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 2
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1
+    }
+  };
+  
   return (
     <div>
         <Header/>
@@ -37,7 +58,19 @@ const Home = () => {
         display: 'flex',
         justifyContent: 'center'
         }}>
-      <ImageList sx={{ width: '75vw', height: 200 }} cols={10} rowHeight={164}>
+          <Carousel responsive={responsive}>
+  <div>
+          <img
+            src={`${waluta1}?w=164&h=164&fit=crop&auto=format`}
+            srcSet={`${waluta2}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            alt={'title'}
+            loading="lazy"
+          />
+</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+  <div>Item 4</div>
+</Carousel>;<ImageList sx={{ width: '70vw', height: 200 }} cols={10} rowHeight={164}>
       {itemData.map((item) => (
         <Link to="/coinstat">
         <ImageListItem key={item.img}>

frontend/src/Views/Ranking.js

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import Paper from '@mui/material/Paper';
-import Masonry from '@mui/lab/Masonry';
+//import Box from '@mui/material/Box';
+//import { styled } from '@mui/material/styles';
+//import Paper from '@mui/material/Paper';
+//import Masonry from '@mui/lab/Masonry';
 import Header from '../Components/Header';
+import Treemap from '../Components/Treemap';
 
-const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
-
+//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 Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.palette.text.secondary,
@@ -15,7 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
 }));
-
+*/
 export default function BasicMasonry() {
   return (
       <div>
@@ -26,15 +28,7 @@ export default function BasicMasonry() {
         alignItems:'center',
         height: '100vh'
         }}>
-    <Box sx={{ width: 500, minHeight: 393 }}>
-      <Masonry columns={4} spacing={1}>
-        {heights.map((height, index) => (
-          <Item key={index} sx={{ height }}>
-            {index + 1}
-          </Item>
-        ))}
-      </Masonry>
-    </Box>
+    <Treemap width={600} height={400} data={dataset} />
     </div>
     </div>
   );

frontend/src/Views/temp

@@ -0,0 +1,14 @@
+<ImageList sx={{ width: '70vw', height: 200 }} cols={10} rowHeight={164}>
+      {itemData.map((item) => (
+        <Link to="/coinstat">
+        <ImageListItem key={item.img}>
+          <img
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
+            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            alt={item.title}
+            loading="lazy"
+          />
+        </ImageListItem>
+        </Link>
+      ))}
+    </ImageList>