added charts

AstroPlant · Nov 11, 2021 · b26062c · b26062c
1 parent 6f7b654
commit b26062c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/components/cards/ChallengeCard.js b/components/cards/ChallengeCard.js
@@ -37,7 +37,7 @@ export default function ChallengeCard(props) {
           <h3>Community Challenges</h3>
         </TitleRow>
         <ChallengeContent>
-          <p>Comming Soon...</p>
+          <p>Coming Soon...</p>
         </ChallengeContent>
       </Container>
     </WrapInLink>

diff --git a/components/cards/ChartCard.js b/components/cards/ChartCard.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import propTypes from "prop-types";
 import Theme from '../../styles/theme';
 import useTabs from '../../utils/useTabs';
+import moment from 'moment';
 
 const Container = styled.div`
     padding: 1.5rem;
@@ -33,10 +34,34 @@ const NoWrap = styled.p`
     white-space: nowrap;
 `
 
+const data = {
+    labels: ['1', '2', '3', '4', '5', '6'],
+    datasets: [
+        {
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            fill: false,
+            backgroundColor: 'rgb(255, 99, 132)',
+            borderColor: 'rgba(255, 99, 132, 0.2)',
+        },
+    ],
+};
+
+
 function ChartCard({ expectedQuantityType, peripheral, measurements }) {
     const { currentTab, Tabs } = useTabs(["1 hour", "3 hours", "1 day"]);
     const quantityType = peripheral.details.quantityTypes.find(quantityType => quantityType.id === expectedQuantityType);
-    console.log(measurements)
+
+    const min = measurements
+        .map(measurement => measurement.values.minimum.toFixed(2));
+
+    const max = measurements
+        .map(measurement => measurement.values.maximum.toFixed(2))
+
+    const average = measurements
+        .map(measurement => measurement.values.average.toFixed(2))
+
+    const labels = measurements.map(measurement => moment(measurement.datetimeEnd).format("HH:mm"))
 
     return (
         <Container>
@@ -52,30 +77,27 @@ function ChartCard({ expectedQuantityType, peripheral, measurements }) {
             </RowCenter>
 
             <Line
-                labels={["Minimum", "Average", "Maximum"]}
-                redraw={true}
+                options={{}}
                 data={{
+                    labels,
                     datasets: [
                         {
                             label: "Minimum",
-                            data: measurements
-                                .map(measurement => measurement.values.minimum),
+                            data: min,
                             fill: true,
-                            backgroundColor: Theme.primaryTransparent,
+                            backgroundColor: Theme.primary,
                         },
                         {
                             label: "Average",
-                            data: measurements
-                                .map(measurement => measurement.values.average),
+                            data: average,
                             fill: true,
                             backgroundColor: Theme.primarySemiTransparent
                         },
                         {
                             label: "Maximum",
-                            data: measurements
-                                .map(measurement => measurement.values.maximum),
+                            data: max,
                             fill: true,
-                            backgroundColor: Theme.primary
+                            backgroundColor: Theme.primaryTransparent
                         }
                     ]
                 }}

diff --git a/pages/kit/[serial].js b/pages/kit/[serial].js
@@ -4,14 +4,25 @@ import styled from "styled-components";
 import Grid from "../../components/grids/Grid";
 import PeripheralCard from "../../components/cards/PeripheralCard";
 import Select from "../../components/inputs/Select";
-import PageLayout from "../../components/layouts/PageLayout";
+import MainLayout from "../../components/layouts/MainLayout";
 import { useAuth } from "../../providers/Auth";
 import { getFullKit, getKitMeasures, getKits } from "../../services/data-api";
 import useTabs from "../../utils/useTabs";
 import Theme from "../../styles/theme";
 import { useEffect } from "react";
 import { measurementsStore } from "../../stores/measurements";
 import ChartCard from "../../components/cards/ChartCard";
+import Breaks from "../../utils/breakpoints";
+import dynamic from "next/dynamic";
+
+const NoSSRMapBuilder = dynamic(() => import("../../components/MapBuilder"), {
+    ssr: false,
+});
+
+const MapHolder = styled.div`
+    max-width: 600px;
+    max-height: 500px;
+`;
 
 const Row = styled.div`
     display: flex;
@@ -42,14 +53,15 @@ const ChartsCardsContainer = styled.div`
 function Kit({ kit, otherKits }) {
     const { user, isLogged } = useAuth();
     const router = useRouter();
-    const { currentTab, Tabs } = useTabs(["Overview", "Details"]);
+    const { currentTab, Tabs } = useTabs(["Overview"]);
 
     useEffect(() => {
         measurementsStore.setSerial(kit.serial);
     }, [])
 
     return (
-        <PageLayout
+        <MainLayout
+            pageTitle={kit.name}
             metaTitle={kit.name}
             metaDescription={kit.description}
         >
@@ -65,26 +77,36 @@ function Kit({ kit, otherKits }) {
                 </Formik> */}
             </Row>
 
-            <PeripheralCardsContainer>
-                {kit.config?.peripherals?.map(peripheral => {
-                    peripheral.measures = kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
-                    return peripheral.details.expectedQuantityTypes?.map((quantityType, i) => {
-                        return <PeripheralCard key={i} color={Theme.darkLight} peripheral={peripheral} expectedQuantityType={quantityType} />
-                    })
-                })}
-            </PeripheralCardsContainer>
-
-            <ChartsCardsContainer>
-
-                {kit.config?.peripherals?.map(peripheral => {
-                    peripheral.measures = kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
-                    return peripheral.details.expectedQuantityTypes?.map((quantityType, i) => {
-                        return <ChartCard key={i} peripheral={peripheral} measurements={peripheral.measures} expectedQuantityType={quantityType} />
-                    })
-                })}
-            </ChartsCardsContainer>
-
-        </PageLayout>
+            {currentTab === "Overview" ?
+                <>
+                    <PeripheralCardsContainer>
+                        {kit.config?.peripherals?.map(peripheral => {
+                            peripheral.measures = kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
+                            return peripheral.details.expectedQuantityTypes?.map((quantityType, i) => {
+                                return <PeripheralCard key={i} color={Theme.darkLight} peripheral={peripheral} expectedQuantityType={quantityType} />
+                            })
+                        })}
+                    </PeripheralCardsContainer>
+
+                    <ChartsCardsContainer>
+
+                        {kit.config?.peripherals?.map(peripheral => {
+                            peripheral.measures = kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
+                            return peripheral.details.expectedQuantityTypes?.map((quantityType, i) => {
+                                return <ChartCard key={i} peripheral={peripheral} measurements={peripheral.measures} expectedQuantityType={quantityType} />
+                            })
+                        })}
+                    </ChartsCardsContainer>
+                </>
+                : currentTab === "Details" ?
+                    <Grid fillHeight>
+                        <MapHolder>
+                            <NoSSRMapBuilder kits={[kit]} changeKit={() => { }} />
+                        </MapHolder>
+                    </Grid>
+                    : null}
+
+        </MainLayout>
     );
 }