style: responsive detail card

DefGuard · Oct 12, 2023 · b5bd61e · b5bd61e
1 parent e555553
commit b5bd61e
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 52 deletions.
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -78,7 +78,7 @@
         "closable": true,
         "title": "Defguard",
         "width": 992,
-        "minWidth": 360,
+        "minWidth": 650,
         "minHeight": 450
       }
     ]

diff --git a/src/pages/client/components/LocationUsageChart/LocationUsageChart.tsx b/src/pages/client/components/LocationUsageChart/LocationUsageChart.tsx
@@ -1,7 +1,10 @@
+import './style.scss';
+
 import dayjs from 'dayjs';
 import { sortBy } from 'lodash-es';
 import { useMemo } from 'react';
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { Bar, BarChart, XAxis, YAxis } from 'recharts';
 
 import { NetworkSpeed } from '../../../../shared/defguard-ui/components/Layout/NetworkSpeed/NetworkSpeed';
 import { NetworkDirection } from '../../../../shared/defguard-ui/components/Layout/NetworkSpeed/types';
@@ -10,8 +13,6 @@ import { LocationStats } from '../../types';
 
 interface LocationUsageProps {
   data: LocationStats[];
-  width?: number;
-  height?: number;
   hideX?: boolean;
   barSize?: number;
   barGap?: number;
@@ -39,8 +40,6 @@ const totalUploadDownload = (data: LocationStats[]): number[] => {
 
 export const LocationUsageChart = ({
   data,
-  height = 300,
-  width = 900,
   hideX = false,
   barSize = 5,
   barGap = 2,
@@ -49,6 +48,9 @@ export const LocationUsageChart = ({
   const [totalUpload, totalDownload] = useMemo(() => totalUploadDownload(data), [data]);
   const getFormattedData = useMemo(() => parseStatsForCharts(data), [data]);
   const { colors } = useTheme();
+
+  if (!data.length) return null;
+
   return (
     <div className="location-usage">
       <div className="summary">
@@ -60,37 +62,41 @@ export const LocationUsageChart = ({
           <NetworkSpeed speedValue={totalUpload} direction={NetworkDirection.UPLOAD} />
         </>
       </div>
-      <ResponsiveContainer width="95%" height={height}>
-        <BarChart
-          data={getFormattedData}
-          margin={{ bottom: 0, left: 0, right: 0, top: 0 }}
-          barSize={barSize}
-          barGap={barGap}
-        >
-          <XAxis
-            dataKey="collected_at"
-            scale="time"
-            type="number"
-            height={heightX}
-            width={width}
-            axisLine={{ stroke: colors.surfaceDefaultModal }}
-            tickLine={{ stroke: colors.surfaceDefaultModal }}
-            hide={hideX}
-            padding={{ left: 0, right: 0 }}
-            tick={{ fontSize: 10, color: '#000000' }}
-            tickFormatter={formatXTick}
-            domain={['dataMin', 'dataMax']}
-            interval={'preserveEnd'}
-          />
-          <YAxis
-            hide={true}
-            domain={['dataMin', 'dataMax']}
-            padding={{ top: 0, bottom: 0 }}
-          />
-          <Bar dataKey="download" fill={colors.surfaceMainPrimary} />
-          <Bar dataKey="upload" fill={colors.textAlert} />
-        </BarChart>
-      </ResponsiveContainer>
+      <AutoSizer>
+        {(size) => (
+          <BarChart
+            width={size.width}
+            height={size.height}
+            data={getFormattedData}
+            margin={{ bottom: 0, left: 0, right: 0, top: 0 }}
+            barSize={barSize}
+            barGap={barGap}
+          >
+            <XAxis
+              dataKey="collected_at"
+              scale="time"
+              type="number"
+              height={heightX}
+              width={size.width}
+              axisLine={{ stroke: colors.surfaceDefaultModal }}
+              tickLine={{ stroke: colors.surfaceDefaultModal }}
+              hide={hideX}
+              padding={{ left: 0, right: 0 }}
+              tick={{ fontSize: 10, color: '#000000' }}
+              tickFormatter={formatXTick}
+              domain={['dataMin', 'dataMax']}
+              interval={'preserveEnd'}
+            />
+            <YAxis
+              hide={true}
+              domain={['dataMin', 'dataMax']}
+              padding={{ top: 0, bottom: 0 }}
+            />
+            <Bar dataKey="download" fill={colors.surfaceMainPrimary} />
+            <Bar dataKey="upload" fill={colors.textAlert} />
+          </BarChart>
+        )}
+      </AutoSizer>
     </div>
   );
 };

diff --git a/src/pages/client/components/LocationUsageChart/style.scss b/src/pages/client/components/LocationUsageChart/style.scss
@@ -0,0 +1,21 @@
+@use '@scssutils' as *;
+
+.location-usage {
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: 1fr;
+  width: 100%;
+  row-gap: 8px;
+
+  & > .summary {
+    grid-row: 1;
+    grid-column: 1;
+    width: 100%;
+  }
+
+  & > .chart-wrapper {
+    grid-row: 2;
+    grid-column: 1;
+    width: 100%;
+  }
+}
diff --git a/...es/client/components/LocationsList/components/LocationsDetailView/LocationsDetailView.tsx b/...es/client/components/LocationsList/components/LocationsDetailView/LocationsDetailView.tsx
@@ -3,7 +3,9 @@ import './style.scss';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 import { error } from 'tauri-plugin-log-api';
+import { useBreakpoint } from 'use-breakpoint';
 
+import { deviceBreakpoints } from '../../../../../../shared/constants';
 import { Card } from '../../../../../../shared/defguard-ui/components/Layout/Card/Card';
 import { CardTabs } from '../../../../../../shared/defguard-ui/components/Layout/CardTabs/CardTabs';
 import { CardTabsData } from '../../../../../../shared/defguard-ui/components/Layout/CardTabs/types';
@@ -31,6 +33,7 @@ const findLocationById = (
 const { getLocationStats, getLastConnection, getConnectionHistory } = clientApi;
 
 export const LocationsDetailView = ({ locations }: Props) => {
+  const { breakpoint } = useBreakpoint(deviceBreakpoints);
   const [activeLocationId, setActiveLocationId] = useState<number>(locations[0].id);
   const statsFilter = useClientStore((state) => state.statsFilter);
 
@@ -81,18 +84,28 @@ export const LocationsDetailView = ({ locations }: Props) => {
       <Card className="detail-card">
         <div className="header">
           <LocationCardTitle location={findLocationById(locations, activeLocationId)} />
-          <LocationCardInfo
-            location={findLocationById(locations, activeLocationId)}
-            connection={lastConnection}
-          />
+          {breakpoint === 'desktop' && (
+            <LocationCardInfo
+              location={findLocationById(locations, activeLocationId)}
+              connection={lastConnection}
+            />
+          )}
           <LocationCardConnectButton
             location={findLocationById(locations, activeLocationId)}
           />
         </div>
-        {locationStats ? (
-          <LocationUsageChart height={200} barSize={4} data={locationStats} />
+        {breakpoint !== 'desktop' && (
+          <div className="info">
+            <LocationCardInfo
+              location={findLocationById(locations, activeLocationId)}
+              connection={lastConnection}
+            />
+          </div>
+        )}
+        {locationStats && locationStats.length ? (
+          <LocationUsageChart barSize={4} data={locationStats} />
         ) : null}
-        {connectionHistory ? (
+        {connectionHistory && connectionHistory.length ? (
           <LocationConnectionHistory connections={connectionHistory} />
         ) : null}
       </Card>

diff --git a/src/pages/client/components/LocationsList/components/LocationsDetailView/style.scss b/src/pages/client/components/LocationsList/components/LocationsDetailView/style.scss
@@ -2,7 +2,9 @@
 
 @mixin list-layout {
   display: inline-grid;
-  grid-template-columns: minmax(180px, 25%) repeat(3, 1fr) auto; // Adjust for larger screens.
+  grid-template-columns: minmax(180px, 25%) repeat(3, 1fr) auto;
+
+  // Adjust for larger screens.
 
   & > * {
     grid-row: 1;
@@ -11,18 +13,35 @@
 
 #locations-detail-view {
   & > .card {
-    & > h2 {
-      @include typography(app-welcome-1);
-      color: var(--text-body-primary);
+    display: flex;
+    flex-flow: column;
+    row-gap: 20px;
+    padding: 20px;
+    min-height: 50vh;
+    border-top-left-radius: 0;
+
+    @include media-breakpoint-up(lg) {
+      min-height: 600px;
     }
-    padding: 2rem 2rem;
+
     & > .header {
       display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
       justify-content: space-between;
+      width: 100%;
+      row-gap: 20px;
     }
-    border-top-left-radius: 0;
-    height: 800px;
-    width: 90%;
+
+    & > .info {
+      display: flex;
+      flex-flow: row wrap;
+      column-gap: 10px;
+      row-gap: 20px;
+      align-items: center;
+      justify-content: space-between;
+    }
+
     & > .location-usage {
       display: flex;
       flex-direction: column;