diff --git a/components/cards/ChartCard.js b/components/cards/ChartCard.js
new file mode 100644
index 0000000..15702b9
--- /dev/null
+++ b/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 (
+
+
+ {quantityType?.physicalQuantity || "-"}
+
+
+
+
+
+
+ Measured by {peripheral?.name || "-"}
+
+
+ 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
+ }
+ ]
+ }}
+ />
+
+
+ )
+}
+
+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);
\ No newline at end of file
diff --git a/components/cards/InformationCard.js b/components/cards/InformationCard.js
index 345ae3c..40e474f 100644
--- a/components/cards/InformationCard.js
+++ b/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 (
-
- {headline}
- {details}
-
+ <>
+
+ {headline}
+ {details}
+
+ {serial ?
+
+ : null}
+
);
}
@@ -34,6 +41,10 @@ InformationCard.propTypes = {
* details of hte information
*/
details: PropTypes.string,
+ /**
+ * Serial of the kit
+ */
+ serial: PropTypes.string
};
InformationCard.defaultProps = {
diff --git a/components/cards/KitCard.js b/components/cards/KitCard.js
index 7deafaf..41329ec 100644
--- a/components/cards/KitCard.js
+++ b/components/cards/KitCard.js
@@ -48,7 +48,7 @@ export default function KitCard(props) {
{props.kit.name}
-
+
diff --git a/components/cards/PeripheralCard.js b/components/cards/PeripheralCard.js
index 7f645e0..af65075 100644
--- a/components/cards/PeripheralCard.js
+++ b/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`
diff --git a/package-lock.json b/package-lock.json
index 37f529f..2bda6f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5441,15 +5441,6 @@
"resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
"integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
},
- "bufferutil": {
- "version": "4.0.5",
- "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.5.tgz",
- "integrity": "sha512-HTm14iMQKK2FjFLRTM5lAVcyaUzOnqbPtesFIvREgXpJHdQm8bWS+GkQgIkfaBYRHuCnea7w8UVNfwiAQhlr9A==",
- "optional": true,
- "requires": {
- "node-gyp-build": "^4.3.0"
- }
- },
"builtin-status-codes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -5652,6 +5643,11 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
+ "chart.js": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.6.0.tgz",
+ "integrity": "sha512-iOzzDKePL+bj+ccIsVAgWQehCXv8xOKGbaU2fO/myivH736zcx535PGJzQGanvcSGVOqX6yuLZsN3ygcQ35UgQ=="
+ },
"chokidar": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -5699,11 +5695,6 @@
"safe-buffer": "^5.0.1"
}
},
- "circular-json": {
- "version": "0.5.9",
- "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.5.9.tgz",
- "integrity": "sha512-4ivwqHpIFJZBuhN3g/pEcdbnGUywkBblloGbkglyloVjjR3uT6tieI89MVOfbP2tHX5sgb01FuLgAOzebNlJNQ=="
- },
"class-utils": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -7092,11 +7083,6 @@
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
},
- "eventemitter3": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
- "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
- },
"events": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz",
@@ -10600,12 +10586,6 @@
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
},
- "node-gyp-build": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
- "integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
- "optional": true
- },
"node-html-parser": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.3.1.tgz",
@@ -11882,6 +11862,11 @@
"prop-types": "^15.6.2"
}
},
+ "react-chartjs-2": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.3.0.tgz",
+ "integrity": "sha512-4Mt0SR2aiUbWi/4762odRBYSnbNKSs4HWc0o3IW43py5bMfmfpeZU95w6mbvtuLZH/M3GsPJMU8DvDc+5U9blQ=="
+ },
"react-color": {
"version": "2.18.1",
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz",
@@ -15293,15 +15278,6 @@
"object-assign": "^4.1.1"
}
},
- "utf-8-validate": {
- "version": "5.0.7",
- "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.7.tgz",
- "integrity": "sha512-vLt1O5Pp+flcArHGIyKEQq883nBt8nN8tVBcoL0qUXj2XT1n7p70yGIq2VK98I5FdZ1YHc0wk/koOnHjnXWk1Q==",
- "optional": true,
- "requires": {
- "node-gyp-build": "^4.3.0"
- }
- },
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
@@ -15370,7 +15346,8 @@
"uuid": {
"version": "8.3.1",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.1.tgz",
- "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg=="
+ "integrity": "sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==",
+ "dev": true
},
"vary": {
"version": "1.1.2",
@@ -15826,11 +15803,6 @@
"typedarray-to-buffer": "^3.1.5"
}
},
- "ws": {
- "version": "7.5.5",
- "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
- "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
- },
"x-is-string": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
@@ -15888,4 +15860,4 @@
"dev": true
}
}
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 1492188..3336e8c 100644
--- a/package.json
+++ b/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"
}
-}
\ No newline at end of file
+}
diff --git a/pages/dashboard/[serial].js b/pages/dashboard/[serial].js
deleted file mode 100644
index bec021f..0000000
--- a/pages/dashboard/[serial].js
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from "styled-components";
-import PageLayout from "../../components/layouts/PageLayout";
-import { getLoggedUser, useAuth } from "../../providers/Auth";
-import { getFullKit, getKitMeasures, getUserDetails, getUserMemberships } from "../../services/data-api";
-
-function Dashboard({ }) {
- const { user, isLogged } = useAuth();
-
- return (
-
-
- );
-}
-
-export async function getServerSideProps(ctx) {
- let mainKit = null;
- const user = getLoggedUser(ctx.req.headers.cookie);
-
- let completeUser = null;
- let memberships = null;
-
- if (user) {
- completeUser = await getUserDetails(user.username);
- memberships = await getUserMemberships(user.username);
-
- if (Array.isArray(memberships) && memberships[0]?.kit) {
- const kit = await getFullKit(memberships[0].kit.serial);
- kit.measures = await getKitMeasures(memberships[0].kit.serial, {});
- mainKit = kit;
- }
- }
-
- return {
- props: {
- mainKit: mainKit,
- },
- };
-}
-
-export default Dashboard;
diff --git a/pages/kit/[serial].js b/pages/kit/[serial].js
new file mode 100644
index 0000000..6fec507
--- /dev/null
+++ b/pages/kit/[serial].js
@@ -0,0 +1,105 @@
+import { Formik } from "formik";
+import { useRouter } from "next/router";
+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 { 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";
+
+const Row = styled.div`
+ display: flex;
+ width: fit-content;
+ align-items: center;
+ margin-top: 1.5rem;
+`
+
+const PeripheralCardsContainer = styled.div`
+ align-self: flex-start;
+ display: grid;
+ gap: 1.5rem;
+ width: 100%;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr) );
+ margin-bottom: 1.5rem;
+`;
+
+const ChartsCardsContainer = styled.div`
+ align-self: flex-start;
+ display: grid;
+ gap: 1.5rem;
+ width: 100%;
+ margin-bottom: 1.5rem;
+ grid-template-columns: repeat(auto-fit, minmax(700px, 1fr) );
+`;
+
+
+function Kit({ kit, otherKits }) {
+ const { user, isLogged } = useAuth();
+ const router = useRouter();
+ const { currentTab, Tabs } = useTabs(["Overview", "Details"]);
+
+ useEffect(() => {
+ measurementsStore.setSerial(kit.serial);
+ }, [])
+
+ return (
+
+
+
+ {/* { }}>
+
+ */}
+
+
+
+ {kit.config?.peripherals?.map(peripheral => {
+ peripheral.measures = kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
+ return peripheral.details.expectedQuantityTypes?.map((quantityType, i) => {
+ return
+ })
+ })}
+
+
+
+
+ {kit.config?.peripherals?.map(peripheral => {
+ peripheral.measures = kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
+ return peripheral.details.expectedQuantityTypes?.map((quantityType, i) => {
+ return
+ })
+ })}
+
+
+
+ );
+}
+
+export async function getServerSideProps(context) {
+
+ const kit = await getFullKit(context.params.serial);
+ kit.measures = await getKitMeasures(context.params.serial, {});
+ const otherKits = await getKits();
+
+ return {
+ props: {
+ kit,
+ otherKits
+ },
+ };
+}
+
+export default Kit;
diff --git a/pages/map.js b/pages/map.js
index 0e7357e..ab880db 100644
--- a/pages/map.js
+++ b/pages/map.js
@@ -67,6 +67,7 @@ export default function Map({ kits }) {
) : (