feat: update nivo

olros · Nov 19, 2023 · 77e1e87 · 77e1e87 · vercel · Nov 19, 2023
1 parent c741169
commit 77e1e87
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 96 deletions.
diff --git a/web/app/components/nivo/ResponsiveBar.tsx b/web/app/components/nivo/ResponsiveBar.tsx
@@ -0,0 +1,9 @@
+import { BarDatum, ResponsiveBar, ResponsiveBarSvgProps } from '@nivo/bar';
+import { useIsClient } from '~/hooks/useIsClient';
+
+const ResponsiveBarBox = <RawDatum extends BarDatum>(props: ResponsiveBarSvgProps<RawDatum>) => {
+  const isClient = useIsClient();
+  return <>{isClient && <ResponsiveBar {...props} />}</>;
+};
+
+export default ResponsiveBarBox;
diff --git a/web/app/components/nivo/ResponsiveLine.tsx b/web/app/components/nivo/ResponsiveLine.tsx
@@ -0,0 +1,9 @@
+import { ResponsiveLine, LineSvgProps } from '@nivo/line';
+import { useIsClient } from '~/hooks/useIsClient';
+
+const ResponsiveLineBox = (props: LineSvgProps) => {
+  const isClient = useIsClient();
+  return <>{isClient && <ResponsiveLine {...props} />}</>;
+};
+
+export default ResponsiveLineBox;
diff --git a/web/app/components/statistics/HoursOfTheDay.tsx b/web/app/components/statistics/HoursOfTheDay.tsx
@@ -1,9 +1,10 @@
 import { Box, Card, Typography, useTheme } from '@mui/joy';
-import { ResponsiveBar } from '@nivo/bar';
-import { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 
 import type { getTopHours } from './loaders';
 
+const ResponsiveBar = lazy(() => import('~/components/nivo/ResponsiveBar'));
+
 export type Hour = Awaited<ReturnType<typeof getTopHours>>[number];
 
 export type HoursOfTheDayProps = {
@@ -13,8 +14,8 @@ export type HoursOfTheDayProps = {
 export const HoursOfTheDay = ({ topHours }: HoursOfTheDayProps) => {
   const theme = useTheme();
   return (
-    <Suspense fallback={null}>
-      <Box sx={{ position: 'relative', height: 400 }}>
+    <Box sx={{ position: 'relative', height: 400 }}>
+      <Suspense fallback={null}>
         <ResponsiveBar
           ariaLabel='Hours of the day'
           axisLeft={{ tickSize: 15 }}
@@ -27,13 +28,15 @@ export const HoursOfTheDay = ({ topHours }: HoursOfTheDayProps) => {
           margin={{ top: 0, right: 20, bottom: 20, left: 35 }}
           padding={0.05}
           theme={{
-            textColor: theme.palette.text.primary,
             axis: {
               domain: { line: { stroke: theme.palette.background.level1 } },
             },
             grid: {
               line: { stroke: theme.palette.background.level1 },
             },
+            text: {
+              fill: theme.palette.text.primary,
+            },
           }}
           tooltip={({ value }) => (
             <Typography component={Card} fontSize='md' fontWeight='bold'>
@@ -42,7 +45,7 @@ export const HoursOfTheDay = ({ topHours }: HoursOfTheDayProps) => {
           )}
           valueScale={{ type: 'linear' }}
         />
-      </Box>
-    </Suspense>
+      </Suspense>
+    </Box>
   );
 };
diff --git a/web/app/components/statistics/PageviewsTrend.tsx b/web/app/components/statistics/PageviewsTrend.tsx
@@ -1,9 +1,10 @@
 import { Box, Card, Typography, useTheme } from '@mui/joy';
-import { ResponsiveLine } from '@nivo/line';
-import { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 
 import type { getPageViewsTrend } from './loaders';
 
+const ResponsiveLine = lazy(() => import('~/components/nivo/ResponsiveLine'));
+
 export type PageviewsTrendProps = {
   pageViews: Awaited<ReturnType<typeof getPageViewsTrend>>;
   dateGte: string;
@@ -13,8 +14,8 @@ export type PageviewsTrendProps = {
 export const PageviewsTrend = ({ pageViews, dateGte, dateLte }: PageviewsTrendProps) => {
   const theme = useTheme();
   return (
-    <Suspense fallback={null}>
-      <Box sx={{ position: 'relative', height: 400 }}>
+    <Box sx={{ position: 'relative', height: 400 }}>
+      <Suspense fallback={null}>
         <ResponsiveLine
           axisBottom={{
             format: '%b %d',
@@ -72,7 +73,6 @@ export const PageviewsTrend = ({ pageViews, dateGte, dateLte }: PageviewsTrendPr
             </Card>
           )}
           theme={{
-            textColor: theme.palette.text.primary,
             axis: {
               domain: { line: { stroke: theme.palette.background.level1 } },
             },
@@ -82,6 +82,9 @@ export const PageviewsTrend = ({ pageViews, dateGte, dateLte }: PageviewsTrendPr
             legends: {
               text: { fill: theme.palette.text.primary },
             },
+            text: {
+              fill: theme.palette.text.primary,
+            },
           }}
           xFormat='time:%Y-%m-%d'
           xScale={{
@@ -94,7 +97,7 @@ export const PageviewsTrend = ({ pageViews, dateGte, dateLte }: PageviewsTrendPr
           }}
           yScale={{ type: 'linear' }}
         />
-      </Box>
-    </Suspense>
+      </Suspense>
+    </Box>
   );
 };
diff --git a/web/app/components/statistics/VisitorsTrend.tsx b/web/app/components/statistics/VisitorsTrend.tsx
@@ -1,9 +1,10 @@
 import { Box, Card, Typography, useTheme } from '@mui/joy';
-import { ResponsiveLine } from '@nivo/line';
-import { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 
 import type { getPageVisitorsTrend } from './loaders';
 
+const ResponsiveLine = lazy(() => import('~/components/nivo/ResponsiveLine'));
+
 export type VisitorsTrendProps = {
   pageVisitorsTrend: Awaited<ReturnType<typeof getPageVisitorsTrend>>;
   dateGte: string;
@@ -13,8 +14,8 @@ export type VisitorsTrendProps = {
 export const VisitorsTrend = ({ pageVisitorsTrend, dateGte, dateLte }: VisitorsTrendProps) => {
   const theme = useTheme();
   return (
-    <Suspense fallback={null}>
-      <Box sx={{ position: 'relative', height: 400 }}>
+    <Box sx={{ position: 'relative', height: 400 }}>
+      <Suspense fallback={null}>
         <ResponsiveLine
           axisBottom={{
             format: '%b %d',
@@ -72,7 +73,6 @@ export const VisitorsTrend = ({ pageVisitorsTrend, dateGte, dateLte }: VisitorsT
             </Card>
           )}
           theme={{
-            textColor: theme.palette.text.primary,
             axis: {
               domain: { line: { stroke: theme.palette.background.level1 } },
             },
@@ -82,6 +82,9 @@ export const VisitorsTrend = ({ pageVisitorsTrend, dateGte, dateLte }: VisitorsT
             legends: {
               text: { fill: theme.palette.text.primary },
             },
+            text: {
+              fill: theme.palette.text.primary,
+            },
           }}
           xFormat='time:%Y-%m-%d'
           xScale={{
@@ -94,7 +97,7 @@ export const VisitorsTrend = ({ pageVisitorsTrend, dateGte, dateLte }: VisitorsT
           }}
           yScale={{ type: 'linear' }}
         />
-      </Box>
-    </Suspense>
+      </Suspense>
+    </Box>
   );
 };
diff --git a/web/package.json b/web/package.json
@@ -23,9 +23,9 @@
     "@fontsource/public-sans": "^5.0.15",
     "@mui/joy": "^5.0.0-beta.15",
     "@neondatabase/serverless": "^0.6.0",
-    "@nivo/bar": "^0.83.0",
-    "@nivo/core": "^0.83.0",
-    "@nivo/line": "^0.83.0",
+    "@nivo/bar": "^0.83.1",
+    "@nivo/core": "^0.83.1",
+    "@nivo/line": "^0.83.1",
     "@olros/stats": "^2.2.1",
     "@prisma/adapter-neon": "^5.5.2",
     "@prisma/client": "^5.6.0",