V4/remove grid (#748)

* Add ChartPageDiv. Remove Grids * lint * add histogram back * grid on overview * lint
transitmatters · Jul 16, 2023 · 9b8db55 · 9b8db55
1 parent e2f9c84
commit 9b8db55
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 87 deletions.
diff --git a/common/components/charts/ChartPageDiv.tsx b/common/components/charts/ChartPageDiv.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ChartPageDivProps {
+  children: React.ReactNode;
+}
+
+export const ChartPageDiv: React.FC<ChartPageDivProps> = ({ children }) => {
+  return <div className="flex w-full max-w-7xl flex-col gap-4 md:gap-8">{children}</div>;
+};
diff --git a/common/components/widgets/Widget.tsx b/common/components/widgets/Widget.tsx
@@ -8,7 +8,7 @@ interface WidgetPageProps {
 
 export const WidgetPage: React.FC<WidgetPageProps> = ({ children }) => {
   return (
-    <div className={classNames('flex w-full flex-1 flex-col gap-y-2 lg:p-0')}>
+    <div className={classNames('flex w-full flex-1 flex-col items-center gap-y-2 lg:p-0')}>
       {children}
       <BusDataNotice />
     </div>

diff --git a/modules/dashboard/Overview.tsx b/modules/dashboard/Overview.tsx
@@ -17,13 +17,11 @@ export function Overview() {
   const isHeavyRailLine = line ? HEAVY_RAIL_LINES.includes(line) : false;
   return (
     <PageWrapper pageTitle={'Overview'}>
-      <div className="flex flex-col pt-2">
-        <div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
-          {tab === 'Subway' && <SpeedWidget />}
-          {tab === 'Subway' && <ServiceWidget />}
-          <RidershipWidget />
-          {tab === 'Subway' && isHeavyRailLine && <SlowZonesWidget />}
-        </div>
+      <div className="grid w-full grid-cols-1 gap-4 md:gap-8 xl:grid-cols-2">
+        {tab === 'Subway' && <SpeedWidget />}
+        {tab === 'Subway' && <ServiceWidget />}
+        <RidershipWidget />
+        {tab === 'Subway' && isHeavyRailLine && <SlowZonesWidget />}
       </div>
     </PageWrapper>
   );

diff --git a/modules/ridership/RidershipDetails.tsx b/modules/ridership/RidershipDetails.tsx
@@ -5,6 +5,7 @@ import { PageWrapper } from '../../common/layouts/PageWrapper';
 import { Layout } from '../../common/layouts/layoutTypes';
 import { RIDERSHIP_KEYS } from '../../common/types/lines';
 import { ChartPlaceHolder } from '../../common/components/graphics/ChartPlaceHolder';
+import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { WidgetDiv } from '../../common/components/widgets/WidgetDiv';
 import { SPEED_RANGE_PARAM_MAP } from '../speed/constants/speeds';
 import { WidgetTitle } from '../dashboard/WidgetTitle';
@@ -32,24 +33,26 @@ export function RidershipDetails() {
 
   return (
     <PageWrapper pageTitle={'Ridership'}>
-      <WidgetDiv>
-        <WidgetTitle title="Weekday ridership" />
+      <ChartPageDiv>
+        <WidgetDiv>
+          <WidgetTitle title="Weekday ridership" />
 
-        {ridership.data && ridershipDataReady ? (
-          <RidershipGraphWrapper
-            data={ridership.data}
-            config={config}
-            startDate={startDate}
-            endDate={endDate}
-            line={line}
-            busRoute={busRoute}
-          />
-        ) : (
-          <div className="relative flex h-full">
-            <ChartPlaceHolder query={ridership} />
-          </div>
-        )}
-      </WidgetDiv>
+          {ridership.data && ridershipDataReady ? (
+            <RidershipGraphWrapper
+              data={ridership.data}
+              config={config}
+              startDate={startDate}
+              endDate={endDate}
+              line={line}
+              busRoute={busRoute}
+            />
+          ) : (
+            <div className="relative flex h-full">
+              <ChartPlaceHolder query={ridership} />
+            </div>
+          )}
+        </WidgetDiv>
+      </ChartPageDiv>
     </PageWrapper>
   );
 }

diff --git a/modules/service/ServiceDetails.tsx b/modules/service/ServiceDetails.tsx
@@ -9,6 +9,7 @@ import { Layout } from '../../common/layouts/layoutTypes';
 import { PageWrapper } from '../../common/layouts/PageWrapper';
 import { getSpeedGraphConfig } from '../speed/constants/speeds';
 import { WidgetDiv } from '../../common/components/widgets/WidgetDiv';
+import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { useDeliveredTripMetrics } from '../../common/api/hooks/tripmetrics';
 import { WidgetTitle } from '../dashboard/WidgetTitle';
 import { ServiceGraphWrapper } from './ServiceGraphWrapper';
@@ -52,44 +53,42 @@ export function ServiceDetails() {
 
   return (
     <PageWrapper pageTitle={'Service'}>
-      <div className="flex flex-col">
-        <div className="relative flex flex-col gap-4">
-          <WidgetDiv>
-            <WidgetTitle title="Daily round trips" />
-            {serviceDataReady ? (
-              <ServiceGraphWrapper
-                data={tripsData.data}
-                predictedData={predictedData}
-                config={config}
-                startDate={startDate}
-                endDate={endDate}
-              />
-            ) : (
-              <div className="relative flex h-full">
-                <ChartPlaceHolder query={tripsData} />
-              </div>
-            )}
-          </WidgetDiv>
-          <WidgetDiv>
-            <WidgetTitle title={`Service delivered`} subtitle={`Compared to ${comparison}`} />
-            {serviceDataReady ? (
-              <PercentageServiceGraphWrapper
-                data={tripsData.data}
-                predictedData={predictedData}
-                config={config}
-                startDate={startDate}
-                endDate={endDate}
-                comparison={comparison}
-                setComparison={setComparison}
-              />
-            ) : (
-              <div className="relative flex h-full">
-                <ChartPlaceHolder query={tripsData} />
-              </div>
-            )}
-          </WidgetDiv>
-        </div>
-      </div>
+      <ChartPageDiv>
+        <WidgetDiv>
+          <WidgetTitle title="Daily round trips" />
+          {serviceDataReady ? (
+            <ServiceGraphWrapper
+              data={tripsData.data}
+              predictedData={predictedData}
+              config={config}
+              startDate={startDate}
+              endDate={endDate}
+            />
+          ) : (
+            <div className="relative flex h-full">
+              <ChartPlaceHolder query={tripsData} />
+            </div>
+          )}
+        </WidgetDiv>
+        <WidgetDiv>
+          <WidgetTitle title={`Service delivered`} subtitle={`Compared to ${comparison}`} />
+          {serviceDataReady ? (
+            <PercentageServiceGraphWrapper
+              data={tripsData.data}
+              predictedData={predictedData}
+              config={config}
+              startDate={startDate}
+              endDate={endDate}
+              comparison={comparison}
+              setComparison={setComparison}
+            />
+          ) : (
+            <div className="relative flex h-full">
+              <ChartPlaceHolder query={tripsData} />
+            </div>
+          )}
+        </WidgetDiv>
+      </ChartPageDiv>{' '}
     </PageWrapper>
   );
 }

diff --git a/modules/slowzones/SlowZonesDetails.tsx b/modules/slowzones/SlowZonesDetails.tsx
@@ -16,6 +16,7 @@ import { WidgetDiv } from '../../common/components/widgets/WidgetDiv';
 import type { Direction } from '../../common/types/dataPoints';
 import { ButtonGroup } from '../../common/components/general/ButtonGroup';
 import { PageWrapper } from '../../common/layouts/PageWrapper';
+import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { Layout } from '../../common/layouts/layoutTypes';
 import { SlowZonesSegmentsWrapper } from './SlowZonesSegmentsWrapper';
 import { TotalSlowTimeWrapper } from './TotalSlowTimeWrapper';
@@ -55,7 +56,7 @@ export function SlowZonesDetails() {
 
   return (
     <PageWrapper pageTitle={'Slow zones'}>
-      <div className="flex flex-col gap-4">
+      <ChartPageDiv>
         <WidgetDiv>
           <WidgetTitle title="Total slow time" />
           <div className="relative flex flex-col">
@@ -115,7 +116,7 @@ export function SlowZonesDetails() {
             )}
           </div>
         </div>
-      </div>
+      </ChartPageDiv>
     </PageWrapper>
   );
 }

diff --git a/modules/slowzones/SystemSlowZonesDetails.tsx b/modules/slowzones/SystemSlowZonesDetails.tsx
@@ -11,6 +11,7 @@ import { Layout } from '../../common/layouts/layoutTypes';
 import { filterAllSlow, formatSegments } from '../../common/utils/slowZoneUtils';
 import { useBreakpoint } from '../../common/hooks/useBreakpoint';
 import { ButtonGroup } from '../../common/components/general/ButtonGroup';
+import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import type { Direction } from '../../common/types/dataPoints';
 import { TotalSlowTime } from './charts/TotalSlowTime';
 import { LineSegments } from './charts/LineSegments';
@@ -46,7 +47,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
 
   return (
     <PageWrapper pageTitle={'Slow zones'}>
-      <div className="flex flex-col gap-4">
+      <ChartPageDiv>
         <WidgetDiv>
           <WidgetTitle title="Total slow time" />
           <div className="relative flex flex-col">
@@ -100,7 +101,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
             </div>
           </div>
         </div>
-      </div>
+      </ChartPageDiv>
     </PageWrapper>
   );
 }

diff --git a/modules/speed/SpeedDetails.tsx b/modules/speed/SpeedDetails.tsx
@@ -7,6 +7,7 @@ import { useDelimitatedRoute } from '../../common/utils/router';
 import { ChartPlaceHolder } from '../../common/components/graphics/ChartPlaceHolder';
 import { Layout } from '../../common/layouts/layoutTypes';
 import { PageWrapper } from '../../common/layouts/PageWrapper';
+import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { useDeliveredTripMetrics } from '../../common/api/hooks/tripmetrics';
 import { getSpeedGraphConfig } from './constants/speeds';
 import { SpeedDetailsWrapper } from './SpeedDetailsWrapper';
@@ -35,22 +36,20 @@ export function SpeedDetails() {
 
   return (
     <PageWrapper pageTitle={'Speed'}>
-      <div className="flex flex-col">
-        <div className="relative flex flex-col gap-4">
-          {speedReady ? (
-            <SpeedDetailsWrapper
-              data={speeds.data}
-              config={config}
-              startDate={startDate}
-              endDate={endDate}
-            />
-          ) : (
-            <div className="relative flex h-full">
-              <ChartPlaceHolder query={speeds} />
-            </div>
-          )}
-        </div>
-      </div>
+      <ChartPageDiv>
+        {speedReady ? (
+          <SpeedDetailsWrapper
+            data={speeds.data}
+            config={config}
+            startDate={startDate}
+            endDate={endDate}
+          />
+        ) : (
+          <div className="relative flex h-full">
+            <ChartPlaceHolder query={speeds} />
+          </div>
+        )}
+      </ChartPageDiv>
     </PageWrapper>
   );
 }

diff --git a/modules/tripexplorer/SubwayTripGraphs.tsx b/modules/tripexplorer/SubwayTripGraphs.tsx
@@ -45,7 +45,7 @@ export const SubwayTripGraphs: React.FC<SubwayTripGraphsProps> = ({
   const location = getLocationDetails(fromStation, toStation);
 
   return (
-    <div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
+    <>
       {aggregate ? (
         <>
           <WidgetDiv>
@@ -166,6 +166,6 @@ export const SubwayTripGraphs: React.FC<SubwayTripGraphsProps> = ({
           </WidgetDiv>
         </>
       )}
-    </div>
+    </>
   );
 };
diff --git a/modules/tripexplorer/TripExplorer.tsx b/modules/tripexplorer/TripExplorer.tsx
@@ -5,6 +5,7 @@ import { AlertNotice } from '../../common/components/alerts/AlertNotice';
 import { SameDayNotice } from '../../common/components/notices/SameDayNotice';
 import { TerminusNotice } from '../../common/components/notices/TerminusNotice';
 import { PageWrapper } from '../../common/layouts/PageWrapper';
+import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { Layout } from '../../common/layouts/layoutTypes';
 import { useDelimitatedRoute } from '../../common/utils/router';
 import { getParentStationForStopId } from '../../common/utils/stations';
@@ -33,12 +34,12 @@ export const TripExplorer = () => {
   }
   return (
     <PageWrapper pageTitle={'Trips'}>
-      <div className="flex flex-col gap-4">
+      <ChartPageDiv>
         {alertsForModal?.length ? <AlertNotice /> : null}
         <TripGraphs fromStation={fromStation} toStation={toStation} />
         <SameDayNotice />
         <TerminusNotice toStation={toStation} fromStation={fromStation} />
-      </div>
+      </ChartPageDiv>
     </PageWrapper>
   );
 };