Fixed design issues

DanielWTE · Apr 9, 2024 · c9e4121 · c9e4121
1 parent 76642ea
commit c9e4121
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -5,7 +5,7 @@ import { timeframes } from "@/config/timeframes";
 import { useGetData } from "@/hooks/data/getData";
 import TimeframeSelection from "@/components/timeframe";
 import { EnergyPriceChart, EnergyPriceChartSkeleton } from "@/components/charts/energyPriceChart";
-import ZoneVisual from "@/components/zoneVisualization";
+import { ZoneVisual, ZoneVisualSkeleton } from "@/components/zoneVisualization";
 
 export default function Main() {
   const [timeframe, setTimeframe] = useState(timeframes[1].value);
@@ -16,7 +16,7 @@ export default function Main() {
   });
 
   const [energyData, setEnergyData] = useState([]);
-  const [clarifications, setClarifications] = useState({ low: [], mid: [], high: [] });
+  const [clarifications, setClarifications] = useState([]);
 
   useEffect(() => {
     if (getDataResult) {
@@ -45,17 +45,21 @@ export default function Main() {
             <hr className="mt-4" />
             <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
               <div className="grid grid-cols-1 gap-4 mt-4">
-                <div className="bg-white overflow-hidden shadow rounded-lg">
+                <div className="bg-white overflow-hidden shadow rounded-lg p-4">
                   <h1 className="text-xl font-bold text-center p-4">Energy Prices Over Time</h1>
                   {getDataLoading && energyData.length === 0 ? (
                     <EnergyPriceChartSkeleton />
                   ) : (
                     <EnergyPriceChart data={energyData} />
                   )}
                 </div>
-                <div className="bg-white overflow-hidden shadow rounded-lg">
+                <div className="bg-white overflow-hidden shadow rounded-lg p-4">
                   <h1 className="text-xl font-bold text-center p-4">Zone Clarifications</h1>
-                  <ZoneVisual dataClarification={clarifications} />
+                  {getDataLoading && clarifications.length === 0 ? (
+                    <ZoneVisualSkeleton />
+                  ) : (
+                    <ZoneVisual dataClarification={clarifications} timeFrame={timeframe} />
+                  )}
                 </div>
               </div>
             </div>

diff --git a/components/timeframe.tsx b/components/timeframe.tsx
@@ -4,7 +4,7 @@ function Button({label, value, selected, setSelected}: ({label: string, value: s
     return (
         <button
             type="button"
-            className={`relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 transition-all ${selected ? 'bg-slate-200' : ''}`}
+            className={`relative inline-flex items-center rounded-md ${selected ? 'bg-slate-200' : 'bg-white'} px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 transition-all`}
             onClick={() => setSelected(value)}
         >
             {label}

diff --git a/components/zoneVisualization.tsx b/components/zoneVisualization.tsx
@@ -1,6 +1,16 @@
 import React from 'react';
 
-const ZoneVisual: React.FC<{ dataClarification: any }> = ({ dataClarification }) => {
+export const ZoneVisual: React.FC<{ dataClarification: any, timeFrame: string }> = ({ dataClarification, timeFrame }) => {
+
+    if (!dataClarification) {
+        return <div className="text-center text-gray-500">No data available</div>;
+    }
+
+    const availableTimeframes = ['tommorow', 'today', 'yesterday'];
+
+    if (!availableTimeframes.includes(timeFrame)) {
+        return <div className="text-center text-gray-500">Zone Clarifications are only available for today, yesterday and tommorow</div>;
+    }
 
     const allClarifications = [] as any;
 
@@ -51,9 +61,9 @@ const ZoneVisual: React.FC<{ dataClarification: any }> = ({ dataClarification })
 
         return (
             <div key={index} className="flex flex-col items-center">
-                <div key={index} className={`p-4 ${gradient} text-white text-center mx-1 my-2 shadow-lg rounded-lg border border-gray-200 hover:border-gray-400 transition-all duration-300 ease-in-out cursor-pointer`}
+                <div key={index} className={`p-4 ${gradient} text-white text-center mx-3 my-2 shadow-lg rounded-lg border border-gray-200 hover:border-gray-400 transition-all duration-300 ease-in-out cursor-pointer`}
                     title={`Time: ${clarification.date}`}>
-                    {(clarification.date.split('T')[1]).split('.')[0]}
+                    {(clarification.date.split('T')[1].split('.')[0]).split(':')[0]}:00
                 </div>
                 <div className="text-center text-sm text-gray-500">{clarification.value.toFixed(2)} ct/kWh</div>
             </div>
@@ -67,4 +77,14 @@ const ZoneVisual: React.FC<{ dataClarification: any }> = ({ dataClarification })
     );
 };
 
-export default ZoneVisual;
+export const ZoneVisualSkeleton: React.FC = () => {
+    return (
+        <div className="flex justify-center items-center flex-wrap">
+            {[...Array(24)].map((_, index) => (
+                <div key={index} className="p-4 bg-gray-200 text-slate-400 text-center mx-3 my-2 shadow-lg rounded-lg border border-gray-200 hover:border-gray-400 transition-all duration-300 ease-in-out cursor-pointer animate-pulse">
+                    {index.toString().padStart(2, '0')}:00
+                </div>
+            ))}
+        </div>
+    );
+}