Initial commit

components/charts/radar.tsx

@@ -0,0 +1,113 @@
+'use client';
+import { google } from 'googleapis';
+import { Ethics, Scale } from '../../types/stellaris';
+import { Radar } from 'react-chartjs-2'
+import { ArcElement, Chart as ChartJS, Filler, LineElement, PointElement, PolarAreaController, RadialLinearScale } from 'chart.js';
+import useSWR from 'swr';
+
+const fetcher = async (url:any) => await fetch(url).then((res) => res.json());
+
+export const RadarChart = () => {
+  const {data: tmpData} = useSWR('/api',fetcher);
+  
+  const parseData = (data: Array<Array<any>>) => {
+    let parsedData = [
+      new Ethics.ega([{ type: Scale.fanatic, value: data[0][0] }, { type: Scale.fanatic, value: data[0][1] }]), // 0
+      new Ethics.aut([{ type: Scale.fanatic, value: data[1][0] }, { type: Scale.fanatic, value: data[1][1] }]), // 1
+      new Ethics.mil([{ type: Scale.fanatic, value: data[2][0] }, { type: Scale.fanatic, value: data[2][1] }]), // 2
+      new Ethics.pac([{ type: Scale.fanatic, value: data[3][0] }, { type: Scale.fanatic, value: data[3][1] }]), // 3
+      new Ethics.pho([{ type: Scale.fanatic, value: data[4][0] }, { type: Scale.fanatic, value: data[4][1] }]), // 4
+      new Ethics.phi([{ type: Scale.fanatic, value: data[5][0] }, { type: Scale.fanatic, value: data[5][1] }]), // 5
+      new Ethics.com([{ type: Scale.fanatic, value: data[6][0] }, { type: Scale.fanatic, value: data[6][1] }]), // 6
+      new Ethics.coo([{ type: Scale.fanatic, value: data[7][0] }, { type: Scale.fanatic, value: data[7][1] }]), // 7
+      new Ethics.eli([{ type: Scale.fanatic, value: data[8][0] }, { type: Scale.fanatic, value: data[8][1] }]), // 8
+      new Ethics.plu([{ type: Scale.fanatic, value: data[9][0] }, { type: Scale.fanatic, value: data[9][1] }]), // 9
+      new Ethics.mat([{ type: Scale.fanatic, value: data[10][0] }, { type: Scale.fanatic, value: data[10][1] }]), // 10
+      new Ethics.spi([{ type: Scale.fanatic, value: data[11][0] }, { type: Scale.fanatic, value: data[11][1] }]), // 11
+      new Ethics.eco([{ type: Scale.fanatic, value: data[12][0] }, { type: Scale.fanatic, value: data[12][1] }]), // 12
+      new Ethics.ind([{ type: Scale.fanatic, value: data[13][0] }, { type: Scale.fanatic, value: data[13][1] }]), // 13
+    ];
+    return parsedData;
+  }
+  let ethicsData;
+  let data;
+  let tEntries = 0;
+  let scaleLimit = 0;
+  
+
+  if (tmpData) {
+    let sheetData = tmpData.sheetData
+    console.log(sheetData);
+    ethicsData = parseData(sheetData);
+    data = {
+      labels: [ ethicsData[0].getKey(), ethicsData[2].getKey(), ethicsData[4].getKey(), ethicsData[6].getKey(), ethicsData[8].getKey(), ethicsData[10].getKey(), ethicsData[12].getKey(), 
+                ethicsData[1].getKey(), ethicsData[3].getKey(), ethicsData[5].getKey(), ethicsData[7].getKey(), ethicsData[9].getKey(), ethicsData[11].getKey(), ethicsData[13].getKey()],
+      datasets: [{
+        data: [ ethicsData[0].sum(), ethicsData[2].sum(), ethicsData[4].sum(), ethicsData[6].sum(), ethicsData[8].sum(), ethicsData[10].sum(), ethicsData[12].sum(), 
+                ethicsData[1].sum(), ethicsData[3].sum(), ethicsData[5].sum(), ethicsData[7].sum(), ethicsData[9].sum(), ethicsData[11].sum(), ethicsData[13].sum()],
+        fill: true,
+        backgroundColor: '#254A6FAA',
+        borderColor: '#356A9F',
+        radius: 0
+      }]
+    };
+
+
+  ethicsData.forEach(elem => {
+    tEntries = tEntries + elem.entries();
+    if (elem.sum() > scaleLimit) {
+      scaleLimit = elem.sum() + 1;
+    }
+  });
+  }
+  else {
+    data = {
+      labels: [],
+      datasets: [{
+        data: [],
+        fill: true,
+        backgroundColor: '#254A6FAA',
+        borderColor: '#356A9F',
+        radius: 0
+      }]
+    }
+  }
+  
+
+
+  const config = {
+    type: 'radar',
+    data: data,
+    options: {
+      elements: {
+        line: {
+          borderWidth: 3
+        }
+      },
+      scales: {
+        r: {
+          max: scaleLimit,
+          min: 0,
+          ticks: {
+            display: false
+          },
+          grid: {
+            color: 'grey'
+          },
+          angleLines: {
+            color: 'grey'
+          }
+        }
+      }
+    },
+  };
+
+  ChartJS.register(PolarAreaController, RadialLinearScale, PointElement, LineElement, ArcElement, Filler)
+
+  return (
+    <div className="chart-container w-screen h-screen p-2">
+      <Radar {...config} />
+    </div>
+  );
+};
+