added kit page

components/cards/ChartCard.js

@@ -0,0 +1,101 @@
+import { observer } from 'mobx-react-lite';
+import { Line } from 'react-chartjs-2';
+import styled from 'styled-components';
+import propTypes from "prop-types";
+import Theme from '../../styles/theme';
+import useTabs from '../../utils/useTabs';
+
+const Container = styled.div`
+    padding: 1.5rem;
+    border-radius: ${props => props.theme.radiusMin};
+    background: ${props => props.theme.darkLight};
+`
+
+const Row = styled.div`
+    display: flex;
+    align-items: center;
+`
+
+const RowCenter = styled(Row)`
+    justify-content: space-between;
+    margin-top: 1.5rem;
+`
+
+const Type = styled.h4`
+`
+
+const MeasuredByType = styled.p`
+    font-style: italic;
+    align-self: flex-end;
+`
+
+const NoWrap = styled.p`
+    white-space: nowrap;
+`
+
+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)
+
+    return (
+        <Container>
+            <Row>
+                <Type>{quantityType?.physicalQuantity || "-"}</Type>
+            </Row>
+
+            <RowCenter>
+                <div style={{ marginBottom: "-1.5rem" }}>
+                    <Tabs noMargin />
+                </div>
+                <MeasuredByType>Measured by {peripheral?.name || "-"}</MeasuredByType>
+            </RowCenter>
+
+            <Line
+                labels={["Minimum", "Average", "Maximum"]}
+                redraw={true}
+                data={{
+                    datasets: [
+                        {
+                            label: "Minimum",
+                            data: measurements
+                                .map(measurement => measurement.values.minimum),
+                            fill: true,
+                            backgroundColor: Theme.primaryTransparent,
+                        },
+                        {
+                            label: "Average",
+                            data: measurements
+                                .map(measurement => measurement.values.average),
+                            fill: true,
+                            backgroundColor: Theme.primarySemiTransparent
+                        },
+                        {
+                            label: "Maximum",
+                            data: measurements
+                                .map(measurement => measurement.values.maximum),
+                            fill: true,
+                            backgroundColor: Theme.primary
+                        }
+                    ]
+                }}
+            />
+
+        </Container>
+    )
+}
+
+ChartCard.propTypes = {
+    color: propTypes.string,
+    expectedQuantityType: propTypes.number.isRequired,
+    peripheral: propTypes.object.isRequired,
+    measurements: propTypes.array.isRequired
+};
+
+ChartCard.defaultProps = {
+    color: Theme.greyDark,
+    peripheral: {},
+    measurements: []
+};
+
+export default observer(ChartCard);

components/cards/InformationCard.js

@@ -1,7 +1,9 @@
 import PropTypes from "prop-types";
 import React from "react";
+import Link from "next/link";
 import styled from "styled-components";
 import Card from "./Card";
+import Button from "../Button";
 
 const Container = styled(Card)`
   && {
@@ -16,12 +18,17 @@ const Headline = styled.h4`
   margin: 0 0 1rem 0;
 `;
 
-export default function InformationCard({ className, headline, details }) {
+export default function InformationCard({ className, headline, details, serial }) {
   return (
-    <Container className={className}>
-      <Headline>{headline}</Headline>
-      <p>{details}</p>
-    </Container>
+    <>
+      <Container className={className}>
+        <Headline>{headline}</Headline>
+        <p>{details}</p>
+      </Container>
+      {serial ? <Link href={"/kit/" + serial}>
+        <Button label={"Go to kit page"} />
+      </Link> : null}
+    </>
   );
 }
 
@@ -34,6 +41,10 @@ InformationCard.propTypes = {
    * details of hte information
    */
   details: PropTypes.string,
+  /**
+   * Serial of the kit
+   */
+  serial: PropTypes.string
 };
 
 InformationCard.defaultProps = {

components/cards/KitCard.js

@@ -48,7 +48,7 @@ export default function KitCard(props) {
 
         <TopContainer>
           <h3>{props.kit.name}</h3>
-          <Link passHref href={`/dashboard/${props.kit.serial}`}>
+          <Link passHref href={`/kit/${props.kit.serial}`}>
             <Button color={"secondary"} inverted label="Open dashboard" />
           </Link>
         </TopContainer>

components/cards/PeripheralCard.js

@@ -7,7 +7,7 @@ import { useContext } from "react";
 import { measurementCtx } from "../../stores/measurements";
 
 const Container = styled.div`
-    background: ${props => props.theme.dark};
+    background: ${props => props.color || props.theme.dark};
     padding: 1rem 1.5rem;
     border-radius: ${props => props.theme.radiusMin};
     display: flex;
@@ -36,6 +36,7 @@ const Unit = styled.h3`
 
 const PerifName = styled.p`
     margin-bottom: 1.5rem;
+    align-self: center;
 `
 
 const TimeSince = styled.p`

package.json

@@ -10,6 +10,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "chart.js": "^3.6.0",
     "cookie": "^0.4.1",
     "date-fns": "^2.15.0",
     "formik": "^2.1.7",
@@ -20,6 +21,7 @@
     "moment": "^2.29.1",
     "next": "9.5.4",
     "react": "16.13.1",
+    "react-chartjs-2": "^3.3.0",
     "react-cookie": "^4.0.3",
     "react-dom": "16.13.1",
     "react-dropzone": "^11.0.2",
@@ -41,4 +43,4 @@
     "babel-plugin-styled-components": "^1.11.1",
     "prop-types": "^15.7.2"
   }
-}
+}