Style/colours

src/app/insights/components/AreaChart.tsx

@@ -1,5 +1,6 @@
 import PlotlyChart from "@/ui/shared/PlotlyChart";
 import { Insight } from "./InsightsDisplay";
+import moodColours from "./moodColours.json";
 
 interface MoodAreaChartProps {
   dataArray: Insight[];
@@ -14,6 +15,8 @@ export default function MoodAreaChart({
   endOfRange,
   selectedButton,
 }: MoodAreaChartProps) {
+  const width = screen.width * 0.85;
+
   if (!dataArray || dataArray.length === 0) {
     return <div>No data available for the graph.</div>;
   }
@@ -62,6 +65,7 @@ export default function MoodAreaChart({
       fill: "tonexty",
       name: mood,
       stackgroup: "one",
+      fillcolor: moodColours[mood as keyof typeof moodColours] || "#FFFFFF",
       line: { shape: "spline" },
     };
   });
@@ -93,8 +97,8 @@ export default function MoodAreaChart({
           <PlotlyChart
             data={traces as Plotly.Data[]}
             layout={{
-              width: 350,
-              height: 350,
+              width: width,
+              height: width,
               margin: {
                 l: 10,
                 r: 10,

src/app/insights/components/LineGraph.tsx

@@ -21,6 +21,8 @@ export default function LineGraph({
   endOfRange,
   selectedButton,
 }: LineGraphProps) {
+  const width = screen.width * 0.85;
+
   if (!dataArray || dataArray.length === 0) {
     return <div>No data available for the graph.</div>;
   }
@@ -51,6 +53,28 @@ export default function LineGraph({
     }));
   };
 
+  const aggregateDataByDay = (
+    data: number[],
+    timestamps: string[]
+  ): AggregatedData[] => {
+    const dailyData: { [key: string]: number[] } = {};
+
+    timestamps.forEach((timestamp, index) => {
+      const date = new Date(timestamp);
+      const dayKey = date.toISOString().split("T")[0];
+
+      if (!dailyData[dayKey]) {
+        dailyData[dayKey] = [];
+      }
+      dailyData[dayKey].push(data[index]);
+    });
+
+    return Object.entries(dailyData).map(([dayKey, values]) => ({
+      timestamp: new Date(dayKey).toISOString(),
+      value: values.reduce((sum, val) => sum + val, 0) / values.length,
+    }));
+  };
+
   const sortedData = [...dataArray].sort(
     (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
   );
@@ -66,9 +90,16 @@ export default function LineGraph({
         aggregated.map((d) => d.timestamp),
         aggregated.map((d) => d.value),
       ];
+    } else if (selectedButton === "week" || selectedButton === "month") {
+      const aggregated = aggregateDataByDay(values, xAxis);
+      return [
+        aggregated.map((d) => d.timestamp),
+        aggregated.map((d) => d.value),
+      ];
     }
     return [xAxis, values];
   };
+
   const [dopamineX, dopamineY] = processData(
     sortedData.map((entry) => entry.neurotransmitters.dopamine)
   );
@@ -128,32 +159,32 @@ export default function LineGraph({
                 y: dopamineY,
                 type: "scatter",
                 mode: "lines",
-                marker: { color: "green" },
-                line: { shape: "spline", width: 3 },
+                marker: { color: "#893FFC" },
+                line: { shape: "linear", width: 3 },
                 name: "Urgent",
               },
               {
                 x: serotoninX,
                 y: serotoninY,
                 type: "scatter",
                 mode: "lines",
-                marker: { color: "blue" },
-                line: { shape: "spline", width: 3 },
+                marker: { color: "#D3A107" },
+                line: { shape: "linear", width: 3 },
                 name: "Effortful",
               },
               {
                 x: adrenalineX,
                 y: adrenalineY,
                 type: "scatter",
                 mode: "lines",
-                marker: { color: "red" },
-                line: { shape: "spline", width: 3 },
+                marker: { color: "#6FDC8C" },
+                line: { shape: "linear", width: 3 },
                 name: "Worthwile",
               },
             ]}
             layout={{
-              width: 350,
-              height: 350,
+              width: width,
+              height: width,
               margin: {
                 l: 10,
                 r: 10,

src/app/insights/components/StreamGraph.tsx

@@ -1,5 +1,6 @@
 import PlotlyChart from "@/ui/shared/PlotlyChart";
 import { Insight } from "./InsightsDisplay";
+import moodColours from "./moodColours.json";
 
 interface MoodStreamGraphProps {
   dataArray: Insight[];
@@ -14,6 +15,8 @@ export default function MoodStreamGraph({
   endOfRange,
   selectedButton,
 }: MoodStreamGraphProps) {
+  const width = screen.width * 0.85;
+
   if (!dataArray || dataArray.length === 0) {
     return <div>No data available for the graph.</div>;
   }
@@ -69,7 +72,7 @@ export default function MoodStreamGraph({
       fill: "tonexty",
       name: mood,
       stackgroup: "one",
-      fillcolor: "auto",
+      fillcolor: moodColours[mood as keyof typeof moodColours] || "#FFFFFF",
       orientation: "v",
       stackgaps: "interpolate",
       line: { shape: "spline" },
@@ -125,8 +128,9 @@ export default function MoodStreamGraph({
         <PlotlyChart
           data={traces as Plotly.Data[]}
           layout={{
-            width: 350,
-            height: 350,
+            autosize: true,
+            width: width,
+            height: width,
             margin: {
               l: 10,
               r: 10,

src/app/insights/components/moodColours.json

@@ -0,0 +1,10 @@
+{
+  "interest": "#D3A107",
+  "guilt": "#4689FF",
+  "freeze": "#FF7EB5",
+  "fight/flight": "#FA4E56",
+  "joy": "#FF8833",
+  "content": "#09BDB9",
+  "relief": "#6FDC8C",
+  "distress": "#33B1FF"
+}