From 874301445a7b25991b36df4d8c4c691b7db5e740 Mon Sep 17 00:00:00 2001
From: Konstantinos Markopoulos <konst.markopoulos@gmail.com>
Date: Fri, 25 Oct 2024 12:00:51 +0300
Subject: [PATCH] Add temperature change card in site dashboard

---
 packages/website/src/assets/caret.svg         |   1 +
 .../SiteDetails/TemperatureChange/index.tsx   | 152 ++++++++++++++++++
 .../website/src/common/SiteDetails/index.tsx  |  26 ++-
 3 files changed, 171 insertions(+), 8 deletions(-)
 create mode 100644 packages/website/src/assets/caret.svg
 create mode 100644 packages/website/src/common/SiteDetails/TemperatureChange/index.tsx

diff --git a/packages/website/src/assets/caret.svg b/packages/website/src/assets/caret.svg
new file mode 100644
index 000000000..c214f8e4b
--- /dev/null
+++ b/packages/website/src/assets/caret.svg
@@ -0,0 +1 @@
+<svg width="46" height="40" viewBox="0 0 46 40" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 39.5H11H35H45.5L24 0.5L0.5 39.5Z" /></svg>
diff --git a/packages/website/src/common/SiteDetails/TemperatureChange/index.tsx b/packages/website/src/common/SiteDetails/TemperatureChange/index.tsx
new file mode 100644
index 000000000..4b43ef697
--- /dev/null
+++ b/packages/website/src/common/SiteDetails/TemperatureChange/index.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  createStyles,
+  Grid,
+  Theme,
+  Typography,
+  WithStyles,
+  withStyles,
+} from '@material-ui/core';
+import cls from 'classnames';
+import red from '@material-ui/core/colors/red';
+import UpdateInfo from 'common/UpdateInfo';
+import { colors } from 'layout/App/theme';
+import { DailyData, LatestDataASSofarValue } from 'store/Sites/types';
+import { toRelativeTime } from 'helpers/dates';
+import { ReactComponent as Caret } from 'assets/caret.svg';
+import { styles as incomingStyles } from '../styles';
+
+const TemperatureChangeComponent = ({
+  data,
+  dailyData,
+  classes,
+}: TemperatureChangeProps) => {
+  const { satelliteTemperature } = data;
+  const lastWeekData = dailyData.slice(0, 7);
+  const temperatureChange =
+    lastWeekData[0].satelliteTemperature - lastWeekData[6].satelliteTemperature;
+  const avgTemp =
+    lastWeekData.reduce((acc, curr) => acc + curr.satelliteTemperature, 0) / 7;
+
+  const increased = temperatureChange >= 0;
+  const relativeTime =
+    satelliteTemperature?.timestamp &&
+    toRelativeTime(satelliteTemperature.timestamp);
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader
+        className={classes.header}
+        title={
+          <Grid container>
+            <Grid item>
+              <Typography
+                className={classes.cardTitle}
+                color="textSecondary"
+                variant="h6"
+              >
+                7-DAYS CHANGE
+              </Typography>
+            </Grid>
+          </Grid>
+        }
+      />
+      <CardContent className={classes.content}>
+        <Box className={classes.cardContent}>
+          <Box
+            className={cls(
+              classes.tempContainer,
+              increased ? classes.tempIncreased : classes.tempDecreased,
+            )}
+          >
+            <Caret
+              className={cls(classes.icon, { [classes.rotate]: !increased })}
+            />
+            <Typography variant="h1" className={classes.temperatureChange}>
+              {increased ? '+' : ''}
+              {temperatureChange.toFixed(1)}°C
+            </Typography>
+          </Box>
+          <Box>
+            <Typography
+              className={classes.temperature}
+              color="textSecondary"
+              variant="h4"
+            >
+              {avgTemp.toFixed(1)}°C
+            </Typography>
+            <Typography color="textSecondary" variant="h6">
+              AVERAGE 7-DAYS TEMP
+            </Typography>
+          </Box>
+        </Box>
+        <UpdateInfo
+          relativeTime={relativeTime}
+          timeText="Last data received"
+          live
+          frequency="hourly"
+        />
+      </CardContent>
+    </Card>
+  );
+};
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...incomingStyles,
+    root: {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: colors.backgroundGray,
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      padding: 0,
+    },
+    cardContent: {
+      margin: 'auto',
+    },
+    temperatureChange: {
+      fontWeight: 500,
+    },
+    tempContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    },
+    tempIncreased: {
+      color: red[500],
+    },
+    tempDecreased: {
+      color: theme.palette.primary.main,
+    },
+    icon: {
+      fill: 'currentColor',
+      fontSize: '52px',
+    },
+    rotate: {
+      transform: 'rotate(180deg)',
+    },
+    temperature: {
+      fontSize: 24,
+      fontWeight: 500,
+    },
+  });
+
+interface IncomingTemperatureChangeProps {
+  data: LatestDataASSofarValue;
+  dailyData: DailyData[];
+}
+
+type TemperatureChangeProps = WithStyles<typeof styles> &
+  IncomingTemperatureChangeProps;
+
+export const TemperatureChange = withStyles(styles)(TemperatureChangeComponent);
diff --git a/packages/website/src/common/SiteDetails/index.tsx b/packages/website/src/common/SiteDetails/index.tsx
index fdd00f8b4..cbee12b3d 100644
--- a/packages/website/src/common/SiteDetails/index.tsx
+++ b/packages/website/src/common/SiteDetails/index.tsx
@@ -26,6 +26,7 @@ import {
   forecastDataSelector,
   latestDataRequest,
   latestDataSelector,
+  siteDetailsSelector,
   siteTimeSeriesDataRangeSelector,
   spotterPositionRequest,
   spotterPositionSelector,
@@ -42,7 +43,7 @@ import Map from './Map';
 import SketchFab from './SketchFab';
 import FeaturedMedia from './FeaturedMedia';
 import Satellite from './Satellite';
-import Sensor from './Sensor';
+// import Sensor from './Sensor';
 import CoralBleaching from './CoralBleaching';
 import Waves from './Waves';
 import OceanSenseMetrics from './OceanSenseMetrics';
@@ -54,6 +55,7 @@ import WaterSamplingCard from './WaterSampling';
 import { styles as incomingStyles } from './styles';
 import LoadingSkeleton from '../LoadingSkeleton';
 import playIcon from '../../assets/play-icon.svg';
+import { TemperatureChange } from './TemperatureChange';
 
 const acceptHUIInterval = Interval.fromDateTimes(
   DateTime.now().minus({ years: 2 }),
@@ -125,6 +127,7 @@ const SiteDetails = ({
   const latestData = useSelector(latestDataSelector);
   const forecastData = useSelector(forecastDataSelector);
   const timeSeriesRange = useSelector(siteTimeSeriesDataRangeSelector);
+  const siteDetails = useSelector(siteDetailsSelector);
   const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
   const [lng, lat] = site?.polygon ? getMiddlePoint(site.polygon) : [];
   const isLoading = !site;
@@ -183,17 +186,24 @@ const SiteDetails = ({
             maxMonthlyMean={site.maxMonthlyMean}
           />,
           (() => {
-            if ((hasHUIData || hasSondeData) && !hasSpotterData) {
-              return <CoralBleaching data={latestDataAsSofarValues} />;
-            }
-
+            // TODO: Conditionally render temperature change card
             return (
-              <Sensor
-                depth={site.depth}
-                id={site.id}
+              <TemperatureChange
                 data={latestDataAsSofarValues}
+                dailyData={siteDetails?.dailyData ?? []}
               />
             );
+            // if ((hasHUIData || hasSondeData) && !hasSpotterData) {
+            //   return <CoralBleaching data={latestDataAsSofarValues} />;
+            // }
+
+            // return (
+            //   <Sensor
+            //     depth={site.depth}
+            //     id={site.id}
+            //     data={latestDataAsSofarValues}
+            //   />
+            // );
           })(),
           (() => {
             if (hasHUIData) {