adding chart

Signed-off-by: Guilherme Deusdará <[email protected]>

components/Chart/index.js

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from "react";
+
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts/highcharts.src.js";
+import HighchartsExporting from "highcharts/modules/exporting";
+import regression from "regression";
+
+const chart = ({ data, label, isByYear }) => {
+  const [chartOptions, setChartOptions] = useState({})
+
+  const generateChart = (list, label) => {
+    let data_points = [];
+    let info_points = [];
+
+    for (let index = 0; index < list.length; index++) {
+      const element = list[index];
+      let x, y;
+      x = isByYear ? element.year : Math.log10(element.hardware_burden);
+      y = 1 / (1 - element.accuracy);
+
+      const point = [x, y];
+
+      data_points.push(point);
+
+      const info = {
+        type: "scatter",
+        data: [point],
+        showInLegend: false,
+        name: element.model,
+        marker: {
+          symbol: "circle",
+          radius: 3,
+          states: {
+            hover: {
+              enabled: true
+            }
+          }
+        }
+      };
+      info_points.push(info);
+    }
+
+    const result = regression.linear(data_points);
+    result.points.sort((a, b) => a[1] - b[1]);
+    console.log("regression", result);
+
+    const chart = {
+      chart: {
+        height: 500
+      },
+      plotOptions: {
+        scatter: {
+          dataLabels: {
+            enabled: false,
+            format: "{series.name}"
+          },
+          enableMouseTracking: true,
+          color: "#073b4c",
+          tooltip: {
+            headerFormat: "<b>{series.name}</b><br>",
+            pointFormatter: function () {
+              console.log("Format", this);
+              let y = (1 - 1 / this.y) * 100;
+              y = Math.round(y * 100) / 100;
+              let x = Math.round(this.x * 100) / 100;
+              return `${label}: ${y}% - ${isByYear ? `Year: ${x}` : `Computation: 10e+${x}`} `;
+            }
+          }
+        },
+        line: {
+          color: "#00b4d8"
+        }
+      },
+
+      series: [
+        ...info_points,
+        {
+          type: "line",
+          showInLegend: true,
+          name: result.string
+            .replace("x", isByYear ? " Year" : " log(Computation)")
+            .replace("+ -", " - ")
+            .replace("y", "1 / Error"),
+          data: [result.points[0], result.points[result.points.length - 1]],
+          marker: {
+            enabled: false
+          },
+          states: {
+            hover: {
+              lineWidth: 2
+            }
+          },
+          enableMouseTracking: true
+        }
+      ],
+
+      legend: {
+        layout: "vertical",
+        align: "center",
+        verticalAlign: "top"
+      },
+
+      title: {
+        text: ""
+      },
+      xAxis: {
+        title: {
+          text: isByYear ? 'YEAR' : "COMPUTATION (HARDWARE BURDEN)",
+          margin: 20,
+          style: {
+            color: "#333",
+            fontWeight: "bold",
+            fontSize: "18px",
+            fontFamily: "Trebuchet MS, Verdana, sans-serif"
+          }
+        },
+        tickInterval: 1,
+        labels: {
+          style: {
+            fontSize: 13
+          },
+          formatter: function () {
+            return isByYear ? this.value : "10e+" + this.value;
+          }
+        }
+      },
+      yAxis: {
+        title: {
+          text: label,
+          margin: 20,
+          style: {
+            color: "#333",
+            fontWeight: "bold",
+            fontSize: "18px",
+            fontFamily: "Trebuchet MS, Verdana, sans-serif"
+          }
+        },
+        labels: {
+          style: {
+            fontSize: 13
+          },
+          formatter: function () {
+            let label = (1 - 1 / this.value) * 100;
+            return `${parseInt(label)}%`;
+          }
+        }
+      }
+    };
+    setChartOptions(chart);
+  };
+
+  useEffect(() => {
+    generateChart(data, label);
+  }, [data, label, isByYear])
+
+
+  if (typeof Highcharts === "object") {
+    HighchartsExporting(Highcharts);
+  }
+
+  return (
+    <HighchartsReact
+      highcharts={Highcharts}
+      options={chartOptions}
+    />
+  );
+}
+export default chart;
+

containers/Home/index.js

@@ -1,10 +1,97 @@
+import React, { useState } from "react";
 
 import Head from "next/head";
 import { Container } from "./styles.js";
 import NavBar from "../../components/NavBar";
 import Wave from "../../components/Wave";
+import Chart from '../../components/Chart'
+import {
+  imagenet,
+  mscoco,
+  squad1_1,
+  conll2003,
+  wmt2014_enfr,
+  wmt2014_enge
+} from '../../data'
+
 
 export default function Home() {
+  const [data, setData] = useState(imagenet)
+  const [label, setLabel] = useState("TOP 1")
+  const [buttons, setButtons] = useState([{
+    label: 'Imagenet',
+    onPress: () => {}
+  }])
+
+  const tabs = [
+    {
+      label: 'Image Classification',
+      onSelect: () => {
+        setData(imagenet)
+        setLabel("TOP 1")
+        setButtons([{
+          label: 'Imagenet',
+          onPress: () => {}
+        }])
+      }
+    },
+    {
+      label: 'Object Detection',
+      onSelect: () => {
+        setData(mscoco)
+        setLabel("BOX AP")
+        setButtons([{
+          label: 'MS COCO',
+          onPress: () => {}
+        }])
+      }
+    },
+    {
+      label: 'Question Answering',
+      onSelect: () => {
+        setData(squad1_1)
+        setLabel("F1 SCORE")
+        setButtons([{
+          label: 'SQUAD 1.1',
+          onPress: () => {}
+        }])
+      }
+    },
+    {
+      label: 'Named Entity Recognition',
+      onSelect: () => {
+        setData(conll2003)
+        setLabel("F1 SCORE")
+        setButtons([{
+          label: 'Conll 2003',
+          onPress: () => {}
+        }])
+      }
+    },
+    {
+      label: 'Machine Translation',
+      onSelect: () => {
+        setData(wmt2014_enfr)
+        setLabel("BLEU")
+        setButtons([
+          {
+            label: 'WMT 2014 EN-FR',
+            onPress: () => {
+              setData(wmt2014_enfr)
+              setLabel("BLEU")
+            }
+          }, {
+            label: 'WMT 2014 EN-GE',
+            onPress: () => {
+              setData(wmt2014_enge)
+              setLabel("BLEU")
+            }
+          },
+      ])
+      }
+    },
+  ]
+
   return (
     <div>
       <Head>
@@ -14,7 +101,9 @@ export default function Home() {
       </Head>
       <NavBar />
       <Wave />
-      <Container></Container>
+      <Container>
+        <Chart data={data} label={label} />
+      </Container>
 
       <footer></footer>
     </div>

containers/Home/styles.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  background: gray;
+  background: white;
   font-size: 2rem;
   height: 100vh;
 `;

data/conll2003_data.js

@@ -0,0 +1,94 @@
+export default [
+  {
+    index: 2,
+    year: 2018,
+    model: "BERT Large",
+    hardware_burden: 62208000000.0,
+    accuracy: 0.928
+  },
+  {
+    index: 3,
+    year: 2018,
+    model: "BERT Base",
+    hardware_burden: 62208000000.0,
+    accuracy: 0.924
+  },
+  {
+    index: 4,
+    year: 2018,
+    model: "CRF + AutoEncoder",
+    hardware_burden: 192672000.0,
+    accuracy: 0.9189
+  },
+  {
+    index: 5,
+    year: 2018,
+    model: "Neural-CRF+AE",
+    hardware_burden: 192672000.0,
+    accuracy: 0.9229
+  },
+  {
+    index: 6,
+    year: 2019,
+    model: "I-DARTS + Flair",
+    hardware_burden: 162720000.0,
+    accuracy: 0.9347
+  },
+  {
+    index: 8,
+    year: 2019,
+    model: "CNN Large + fine-tune",
+    hardware_burden: 1563840000000.0,
+    accuracy: 0.935
+  },
+  {
+    index: 11,
+    year: 2019,
+    model: "Flair embeddings + Pooling",
+    hardware_burden: 2594592000.0,
+    accuracy: 0.9318
+  },
+  {
+    index: 20,
+    year: 2018,
+    model: "LD-Net (9, origin)",
+    hardware_burden: 227781.6,
+    accuracy: 0.9203
+  },
+  {
+    index: 25,
+    year: 2018,
+    model: "LSTM with dynamic skip",
+    hardware_burden: 318681360.0,
+    accuracy: 0.9156
+  },
+  {
+    index: 29,
+    year: 2017,
+    model: "LM-LSTM-CRF",
+    hardware_burden: 191592000.0,
+    accuracy: 0.9171
+  },
+  {
+    index: 30,
+    year: 2016,
+    model: "Ma and Hovy",
+    hardware_burden: 192672000.0,
+    accuracy: 0.9121
+  },
+  {
+    index: 36,
+    year: 2015,
+    model:
+      "NER and entity linking model (JERL+candidate+mutual+linking; Luo et al, 2015)",
+    hardware_burden: 2587200.0,
+    accuracy: 0.912
+  },
+  {
+    index: 38,
+    year: 2009,
+    model: "Averaged Perceptron UIUC (Ratinov and Roth,2009)",
+    hardware_burden: 2245320.0,
+    accuracy: 0.908
+  }
+];