Merge pull request #45 from SoopSASM/feature/add-components

Modify all components code based on socket data format
Samsung · Oct 2, 2022 · bcb11a6 · bcb11a6
2 parents 82e9c64 + 55efbb6
commit bcb11a6
Show file tree

Hide file tree

Showing 18 changed files with 342 additions and 313 deletions.
diff --git a/dashboard/src/components/SoopChart/SoopBarChart.js b/dashboard/src/components/SoopChart/SoopBarChart.js
@@ -24,16 +24,14 @@ const SoopBarChart = () => {
     "rgba(255, 135, 66, 1)",
   ];
   const exampleData = {
-    node: {
-      title: "bar timeseries chart",
-      chartType: "bar",
-      legend: true,
-      blankLabel: "no data",
-      xAxisFormat: "HH:mm:ss",
-      yMin: 0,
-      yMax: 5,
-      isTimeSeriesData: true,
-    },
+    title: "bar timeseries chart",
+    chartType: "bar",
+    legend: true,
+    blankLabel: "no data",
+    xAxisFormat: "HH:mm:ss",
+    yMin: 0,
+    yMax: 5,
+    isTimeSeries: true,
     id: "노드의 id",
     states: {
       // TODO: nontime 버전
@@ -91,11 +89,11 @@ const SoopBarChart = () => {
   const [chartOptions, setChartOptions] = useState({});
 
   // const timeSeries = Date.now();
-  // const timeseriesToDateMoment = moment(timeSeries).format(exampleData.node.xAxisFormat);
+  // const timeseriesToDateMoment = moment(timeSeries).format( exampleData.xAxisFormat);
   // console.log("moment 변환", timeseriesToDateMoment);
 
   useEffect(() => {
-    if (!exampleData.node.isTimeSeriesData) {
+    if (!exampleData.isTimeSeries) {
       const currentChartData = {
         labels: Object.keys(exampleData.states),
         datasets: [
@@ -129,7 +127,7 @@ const SoopBarChart = () => {
           // 제목 변경
           title: {
             display: true,
-            text: exampleData.node.title,
+            text: exampleData.title,
             color: fontColor.light,
             font: {
               family: "Pretendard-Bold",
@@ -138,7 +136,7 @@ const SoopBarChart = () => {
           },
           // 범례 변경
           legend: {
-            display: exampleData.node.legend,
+            display: exampleData.legend,
             labels: {
               font: {
                 family: "Pretendard-Regular",
@@ -151,8 +149,8 @@ const SoopBarChart = () => {
         // 축 변경
         scales: {
           y: {
-            min: exampleData.node.yMin,
-            max: exampleData.node.yMax,
+            min: exampleData.yMin,
+            max: exampleData.yMax,
             ticks: {
               font: {
                 family: "Pretendard-Light",
@@ -177,7 +175,7 @@ const SoopBarChart = () => {
     } else {
       const currentDatasetsLabel = Object.keys(exampleData.states);
       const currentLabels = exampleData.states[currentDatasetsLabel[0]].map(data =>
-        moment(data.time).format(exampleData.node.xAxisFormat),
+        moment(data.time).format(exampleData.xAxisFormat),
       );
       const currentDatasets = Object.keys(exampleData.states).map((key, idx) => {
         return {
@@ -199,7 +197,7 @@ const SoopBarChart = () => {
           // 제목 변경
           title: {
             display: true,
-            text: exampleData.node.title,
+            text: exampleData.title,
             color: fontColor.light,
             font: {
               family: "Pretendard-Bold",
@@ -208,7 +206,7 @@ const SoopBarChart = () => {
           },
           // 범례 변경
           legend: {
-            display: exampleData.node.legend,
+            display: exampleData.legend,
             labels: {
               font: {
                 family: "Pretendard-Regular",
@@ -221,8 +219,8 @@ const SoopBarChart = () => {
         // 축 변경
         scales: {
           y: {
-            min: exampleData.node.yMin,
-            max: exampleData.node.yMax,
+            min: exampleData.yMin,
+            max: exampleData.yMax,
             ticks: {
               font: {
                 family: "Pretendard-Light",

diff --git a/dashboard/src/components/SoopChart/SoopLineChart.js b/dashboard/src/components/SoopChart/SoopLineChart.js
@@ -26,20 +26,18 @@ const SoopLineChart = () => {
     "rgba(255, 135, 66, 0.8)",
   ];
   const exampleData = {
-    node: {
-      title: "bar timeseries chart",
-      chartType: "bar",
-      legend: true,
-      blankLabel: "no data",
-      xAxisFormat: "HH:mm:ss",
-      yMin: 0,
-      yMax: 10,
-      isTimeSeriesData: true,
-    },
+    title: "bar timeseries chart",
+    chartType: "bar",
+    legend: true,
+    blankLabel: "no data",
+    xAxisFormat: "HH:mm:ss",
+    yMin: 0,
+    yMax: 10,
+    isTimeSeriesData: true,
     id: "노드의 id",
     states: {
       냉장고: [
-        { value: 1, time: 1664544739836 },
+        { value: 9, time: 1664544739836 },
         { value: 2, time: 1664545142444 },
         { value: 3, time: 1664545186484 },
         { value: 6, time: 1664545206079 },
@@ -88,7 +86,7 @@ const SoopLineChart = () => {
   useEffect(() => {
     const currentDatasetsLabel = Object.keys(exampleData.states);
     const currentLabels = exampleData.states[currentDatasetsLabel[0]].map(data =>
-      moment(data.time).format(exampleData.node.xAxisFormat),
+      moment(data.time).format(exampleData.xAxisFormat),
     );
     const currentDatasets = Object.keys(exampleData.states).map((key, idx) => {
       return {
@@ -111,7 +109,7 @@ const SoopLineChart = () => {
         // 제목 변경
         title: {
           display: true,
-          text: exampleData.node.title,
+          text: exampleData.title,
           color: fontColor.light,
           font: {
             family: "Pretendard-Bold",
@@ -120,7 +118,7 @@ const SoopLineChart = () => {
         },
         // 범례 변경
         legend: {
-          display: exampleData.node.legend,
+          display: exampleData.legend,
           labels: {
             font: {
               family: "Pretendard-Regular",
@@ -133,8 +131,8 @@ const SoopLineChart = () => {
       // 축 변경
       scales: {
         y: {
-          min: exampleData.node.yMin,
-          max: exampleData.node.yMax,
+          min: exampleData.yMin,
+          max: exampleData.yMax,
           ticks: {
             font: {
               family: "Pretendard-Light",

diff --git a/dashboard/src/components/SoopChart/SoopPieChart.js b/dashboard/src/components/SoopChart/SoopPieChart.js
@@ -1,23 +1,21 @@
 import React, { useState, useEffect } from "react";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import { Pie } from "react-chartjs-2";
-import styled from "styled-components";
 import { fontSize, fontColor } from "../../assets/DesignOption";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 // FIXME: width, height 둘 중 작은 것을 기준으로 제작이 되게!!
+// FIXME: width, height 둘 중 작은 것을 기준으로 제작이 되게!!
 
 // FIXME: props로 넘어오게 될 것.
 // FIXME: 나중에 받을 때 {node, states}로 구조분해할당받기
 const SoopPieChart = () => {
   const exampleData = {
-    node: {
-      title: "pie chart",
-      chartType: "pie",
-      cutout: 0,
-      legend: true,
-      blankLabel: "no data",
-    },
+    title: "pie chart",
+    chartType: "pie",
+    cutout: 0,
+    legend: true,
+    blankLabel: "no data",
     id: "노드의 id",
     states: {
       냉장고: [{ value: 1 }],
@@ -67,7 +65,7 @@ const SoopPieChart = () => {
         // 제목 변경
         title: {
           display: true,
-          text: exampleData.node.title,
+          text: exampleData.title,
           color: fontColor.light,
           font: {
             family: "Pretendard-Bold",
@@ -76,7 +74,7 @@ const SoopPieChart = () => {
         },
         //범례 변경
         legend: {
-          display: exampleData.node.legend,
+          display: exampleData.legend,
           // position: "top",
           labels: {
             font: {

diff --git a/dashboard/src/components/SoopDropdown.js b/dashboard/src/components/SoopDropdown.js
@@ -21,19 +21,19 @@ const DropdownContainer = styled.div`
   box-sizing: border-box;
 `;
 
-const SoopDropdown = ({ node, states }) => {
+const SoopDropdown = node => {
   const [selectedOption, setSelectedOption] = useState("");
   const [currentOptions, setCurrentOptions] = useState([]);
   const [currentLabel, setCurrentLabel] = useState("");
-  console.log(node);
   const exampleData = {
-    node: {
-      label: "dropdown라벨",
-      tooltip: "dropdown node",
-      placeholder: "Select option",
-      option: { option1: "value1", option2: "value2" },
-    },
-    states: {},
+    label: "dropdown라벨",
+    tooltip: "툴팁",
+    options: [
+      { label: "val1", value: "0", type: "str" },
+      { label: "val2", value: "1", type: "str" },
+      { label: "val3", value: "2", type: "str" },
+    ],
+    states: [{}],
   };
 
   const onChange = e => {
@@ -43,12 +43,11 @@ const SoopDropdown = ({ node, states }) => {
   };
 
   useEffect(() => {
-    console.log("리액트 드롭다운 컴포넌트 결과: ", node, states);
     const optionsArray = node.options.map(opt => {
       return opt.label;
     });
-    if (Array.isArray(states) && states[0]) {
-      setSelectedOption(states[0].key);
+    if (Array.isArray(node.states) && states[0]) {
+      setSelectedOption(node.states[0].key);
     }
     setCurrentOptions(optionsArray);
     setCurrentLabel(node.label);

diff --git a/dashboard/src/components/SoopGauge.js b/dashboard/src/components/SoopGauge.js
@@ -22,25 +22,37 @@ const GaugeContainer = styled.div`
 
 const SoopGauge = () => {
   // FIXME: 넘겨받은 데이터에 따라서 return되는 component가 다르다
-  const type = "liquid";
+  const type = "gauge";
 
   switch (type) {
     case "gauge":
       return (
         <GaugeContainer>
-          <SoopNormalGauge />
+          (
+          <GaugeContainer>
+            <SoopNormalGauge />
+          </GaugeContainer>
+          )
         </GaugeContainer>
       );
     case "donut":
       return (
         <GaugeContainer>
-          <SoopDonutGauge />
+          (
+          <GaugeContainer>
+            <SoopDonutGauge />
+          </GaugeContainer>
+          )
         </GaugeContainer>
       );
     case "liquid":
       return (
         <GaugeContainer>
-          <SoopLiquidGauge />
+          (
+          <GaugeContainer>
+            <SoopLiquidGauge />
+          </GaugeContainer>
+          )
         </GaugeContainer>
       );
   }