From d76e096b5d5b996f3c1d97d68cab8adec16958a4 Mon Sep 17 00:00:00 2001 From: aoirint Date: Fri, 5 Dec 2025 23:56:23 +0900 Subject: [PATCH 1/5] chore(deps): install @mui/material-nextjs --- package.json | 1 + pnpm-lock.yaml | 31 +++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/package.json b/package.json index bb58ae3..1999dbe 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@emotion/styled": "11.14.1", "@mui/icons-material": "7.3.6", "@mui/material": "7.3.6", + "@mui/material-nextjs": "7.3.6", "@types/node": "24.10.1", "@types/react": "19.2.7", "@types/react-dom": "19.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 029ef3c..f24ee71 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: '@mui/material': specifier: 7.3.6 version: 7.3.6(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.1))(@types/react@19.2.7)(react@19.2.1))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1) + '@mui/material-nextjs': + specifier: 7.3.6 + version: 7.3.6(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.1))(@types/react@19.2.7)(next@16.0.7(@babel/core@7.28.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1) '@types/node': specifier: 24.10.1 version: 24.10.1 @@ -1149,6 +1152,24 @@ packages: '@types/react': optional: true + '@mui/material-nextjs@7.3.6': + resolution: {integrity: sha512-2fP1QyBRY9rT02/ykNw0yz9aAWy5ZVp+YzkLEqio9VTkIYkon/xSUQX7PfHLOWUbKlkwoKtCQOjsvrYtSOyKnQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@emotion/cache': ^11.11.0 + '@emotion/react': ^11.11.4 + '@emotion/server': ^11.11.0 + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + next: ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/cache': + optional: true + '@emotion/server': + optional: true + '@types/react': + optional: true + '@mui/material@7.3.6': resolution: {integrity: sha512-R4DaYF3dgCQCUAkr4wW1w26GHXcf5rCmBRHVBuuvJvaGLmZdD8EjatP80Nz5JCw0KxORAzwftnHzXVnjR8HnFw==} engines: {node: '>=14.0.0'} @@ -3859,6 +3880,16 @@ snapshots: optionalDependencies: '@types/react': 19.2.7 + '@mui/material-nextjs@7.3.6(@emotion/cache@11.14.0)(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.1))(@types/react@19.2.7)(next@16.0.7(@babel/core@7.28.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)': + dependencies: + '@babel/runtime': 7.28.4 + '@emotion/react': 11.14.0(@types/react@19.2.7)(react@19.2.1) + next: 16.0.7(@babel/core@7.28.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1) + react: 19.2.1 + optionalDependencies: + '@emotion/cache': 11.14.0 + '@types/react': 19.2.7 + '@mui/material@7.3.6(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.1))(@types/react@19.2.7)(react@19.2.1))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)': dependencies: '@babel/runtime': 7.28.4 From fc9fdf33357232b0c4d0568d89836affc1587817 Mon Sep 17 00:00:00 2001 From: aoirint Date: Sat, 6 Dec 2025 00:00:38 +0900 Subject: [PATCH 2/5] chore: app router --- biome.json | 2 +- codegen.ts | 4 +- pages/_app.tsx | 85 ----------- public/vercel.svg | 4 - src/app/apollo-provider.tsx | 46 ++++++ {public => src/app}/favicon.ico | Bin {styles => src/app}/globals.css | 0 src/app/init-client.ts | 35 +++++ src/app/layout.tsx | 43 ++++++ src/app/login.tsx | 5 + src/app/page.tsx | 5 + .../components/app_bar/account_menu_icon.tsx | 4 +- .../components/app_bar/anonymous_app_bar.tsx | 0 .../components/app_bar/config_menu_icon.tsx | 0 .../components/app_bar/main_app_bar.tsx | 0 {lib => src}/components/chart/co2_chart.tsx | 0 .../components/chart/humidity_chart.tsx | 0 {lib => src}/components/chart/light_chart.tsx | 0 .../components/chart/temperature_chart.tsx | 0 .../components/chart/traffic_chart.tsx | 0 .../components/drawer/main_drawer.tsx | 0 .../components/login-form.tsx | 10 +- pages/index.tsx => src/components/monitor.tsx | 24 ++- .../components/smoke_ping_chart_image.tsx | 0 {pages => src}/getMonitor.graphql | 0 {lib => src/lib}/auth.ts | 0 {lib => src/lib}/graphql-types.ts | 0 src/theme.ts | 14 ++ styles/Home.module.css | 138 ------------------ tsconfig.json | 33 ++++- 30 files changed, 196 insertions(+), 256 deletions(-) delete mode 100644 pages/_app.tsx delete mode 100644 public/vercel.svg create mode 100644 src/app/apollo-provider.tsx rename {public => src/app}/favicon.ico (100%) rename {styles => src/app}/globals.css (100%) create mode 100644 src/app/init-client.ts create mode 100644 src/app/layout.tsx create mode 100644 src/app/login.tsx create mode 100644 src/app/page.tsx rename {lib => src}/components/app_bar/account_menu_icon.tsx (94%) rename {lib => src}/components/app_bar/anonymous_app_bar.tsx (100%) rename {lib => src}/components/app_bar/config_menu_icon.tsx (100%) rename {lib => src}/components/app_bar/main_app_bar.tsx (100%) rename {lib => src}/components/chart/co2_chart.tsx (100%) rename {lib => src}/components/chart/humidity_chart.tsx (100%) rename {lib => src}/components/chart/light_chart.tsx (100%) rename {lib => src}/components/chart/temperature_chart.tsx (100%) rename {lib => src}/components/chart/traffic_chart.tsx (100%) rename {lib => src}/components/drawer/main_drawer.tsx (100%) rename pages/login.tsx => src/components/login-form.tsx (89%) rename pages/index.tsx => src/components/monitor.tsx (90%) rename {lib => src}/components/smoke_ping_chart_image.tsx (100%) rename {pages => src}/getMonitor.graphql (100%) rename {lib => src/lib}/auth.ts (100%) rename {lib => src/lib}/graphql-types.ts (100%) create mode 100644 src/theme.ts delete mode 100644 styles/Home.module.css diff --git a/biome.json b/biome.json index a3e6442..fcbc1d9 100644 --- a/biome.json +++ b/biome.json @@ -13,7 +13,7 @@ "!.next", "!dist", "!build", - "!lib/graphql-types.ts" + "!src/lib/graphql-types.ts" ] }, "formatter": { diff --git a/codegen.ts b/codegen.ts index 957a70e..de55255 100644 --- a/codegen.ts +++ b/codegen.ts @@ -9,10 +9,10 @@ const config: CodegenConfig = { }, }, }, - documents: "pages/**/*.graphql", + documents: "src/**/*.graphql", ignoreNoDocuments: true, generates: { - "./lib/graphql-types.ts": { + "./src/lib/graphql-types.ts": { plugins: [ "typescript", "typescript-operations", diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 7799e29..0000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import "../styles/globals.css" - -import { - ApolloClient, - ApolloProvider, - createHttpLink, - InMemoryCache, -} from "@apollo/client" -import { setContext } from "@apollo/client/link/context" -import { - Chart, - Colors, - Legend, - LinearScale, - LineElement, - PointElement, - TimeScale, - Tooltip, -} from "chart.js" -import dayjs from "dayjs" -import dayjsTimezone from "dayjs/plugin/timezone" -import dayjsUtc from "dayjs/plugin/utc" -import type { AppProps } from "next/app" -import "chartjs-adapter-luxon" - -import { CssBaseline, createTheme, ThemeProvider } from "@mui/material" - -import { getToken } from "../lib/auth" - -// Setup dayjs -dayjs.extend(dayjsUtc) -dayjs.extend(dayjsTimezone) - -// Setup Chart.js -Chart.register( - LinearScale, - PointElement, - LineElement, - Tooltip, - Legend, - TimeScale, - Colors, -) - -// Dark color -Chart.defaults.borderColor = "#444c56" -Chart.defaults.color = "#adbac7" - -// Setup Apollo client -const httpLink = createHttpLink({ - uri: `${process.env.NEXT_PUBLIC_HASURA_URL}/v1/graphql`, -}) - -const authLink = setContext((_, { headers }) => { - const token = getToken() - return { - headers: { - ...headers, - authorization: token ? `Bearer ${token}` : "", - }, - } -}) - -const apolloClient = new ApolloClient({ - link: authLink.concat(httpLink), - cache: new InMemoryCache(), -}) - -// Setup Material UI -const darkTheme = createTheme({ - palette: { - mode: "dark", - }, -}) - -export default function App({ Component, pageProps }: AppProps) { - return ( - - - - - - - ) -} diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/src/app/apollo-provider.tsx b/src/app/apollo-provider.tsx new file mode 100644 index 0000000..fb1e0a3 --- /dev/null +++ b/src/app/apollo-provider.tsx @@ -0,0 +1,46 @@ +"use client" + +import { + ApolloClient, + ApolloProvider, + createHttpLink, + InMemoryCache, +} from "@apollo/client" +import { setContext } from "@apollo/client/link/context" +import "chartjs-adapter-luxon" + +import { type ReactNode, useMemo } from "react" +import { getToken } from "../lib/auth" + +function createApolloClient() { + const httpLink = createHttpLink({ + uri: `${process.env.NEXT_PUBLIC_HASURA_URL}/v1/graphql`, + }) + + const authLink = setContext((_, { headers }) => { + const token = getToken() + return { + headers: { + ...headers, + authorization: token ? `Bearer ${token}` : "", + }, + } + }) + + return new ApolloClient({ + link: authLink.concat(httpLink), + cache: new InMemoryCache(), + }) +} + +export interface ApolloProviderClientProps { + children: ReactNode +} + +export default function ApolloProviderClient({ + children, +}: ApolloProviderClientProps) { + const client = useMemo(() => createApolloClient(), []) + + return {children} +} diff --git a/public/favicon.ico b/src/app/favicon.ico similarity index 100% rename from public/favicon.ico rename to src/app/favicon.ico diff --git a/styles/globals.css b/src/app/globals.css similarity index 100% rename from styles/globals.css rename to src/app/globals.css diff --git a/src/app/init-client.ts b/src/app/init-client.ts new file mode 100644 index 0000000..0ce1f41 --- /dev/null +++ b/src/app/init-client.ts @@ -0,0 +1,35 @@ +"use client" + +import { + Chart, + Colors, + Legend, + LinearScale, + LineElement, + PointElement, + TimeScale, + Tooltip, +} from "chart.js" +import dayjs from "dayjs" +import dayjsTimezone from "dayjs/plugin/timezone" +import dayjsUtc from "dayjs/plugin/utc" +import "chartjs-adapter-luxon" + +// Setup dayjs +dayjs.extend(dayjsUtc) +dayjs.extend(dayjsTimezone) + +// Setup Chart.js +Chart.register( + LinearScale, + PointElement, + LineElement, + Tooltip, + Legend, + TimeScale, + Colors, +) + +// Dark color +Chart.defaults.borderColor = "#444c56" +Chart.defaults.color = "#adbac7" diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..3badc37 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,43 @@ +import CssBaseline from "@mui/material/CssBaseline" +import { ThemeProvider } from "@mui/material/styles" +import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter" +import type { Metadata } from "next" +import { Noto_Sans_JP } from "next/font/google" +import "./globals.css" +import "./init-client" + +import { InitColorSchemeScript } from "@mui/material" +import theme from "../theme" +import ApolloProviderClient from "./apollo-provider" + +const notoSansJp = Noto_Sans_JP({ + weight: ["300", "400", "500", "700"], + preload: false, + display: "swap", + variable: "--font-noto-sans-jp", +}) + +export const metadata: Metadata = { + title: "Harmonica", + description: "Harmonica Web Dashboard", +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + + + + + + {children} + + + + + ) +} diff --git a/src/app/login.tsx b/src/app/login.tsx new file mode 100644 index 0000000..5fcd0ee --- /dev/null +++ b/src/app/login.tsx @@ -0,0 +1,5 @@ +import LoginForm from "../components/login-form" + +export default function LoginPage() { + return +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..b370386 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,5 @@ +import Monitor from "../components/monitor" + +export default function Home() { + return +} diff --git a/lib/components/app_bar/account_menu_icon.tsx b/src/components/app_bar/account_menu_icon.tsx similarity index 94% rename from lib/components/app_bar/account_menu_icon.tsx rename to src/components/app_bar/account_menu_icon.tsx index cb3e566..521b75a 100644 --- a/lib/components/app_bar/account_menu_icon.tsx +++ b/src/components/app_bar/account_menu_icon.tsx @@ -1,9 +1,9 @@ import { useApolloClient } from "@apollo/client" import AccountCircleIcon from "@mui/icons-material/AccountCircle" import { Box, IconButton, Menu, MenuItem } from "@mui/material" -import { useRouter } from "next/router" +import { useRouter } from "next/navigation" import { useState } from "react" -import { setToken } from "../../auth" +import { setToken } from "../../lib/auth" export default function AccountMenuIcon() { const apolloClient = useApolloClient() diff --git a/lib/components/app_bar/anonymous_app_bar.tsx b/src/components/app_bar/anonymous_app_bar.tsx similarity index 100% rename from lib/components/app_bar/anonymous_app_bar.tsx rename to src/components/app_bar/anonymous_app_bar.tsx diff --git a/lib/components/app_bar/config_menu_icon.tsx b/src/components/app_bar/config_menu_icon.tsx similarity index 100% rename from lib/components/app_bar/config_menu_icon.tsx rename to src/components/app_bar/config_menu_icon.tsx diff --git a/lib/components/app_bar/main_app_bar.tsx b/src/components/app_bar/main_app_bar.tsx similarity index 100% rename from lib/components/app_bar/main_app_bar.tsx rename to src/components/app_bar/main_app_bar.tsx diff --git a/lib/components/chart/co2_chart.tsx b/src/components/chart/co2_chart.tsx similarity index 100% rename from lib/components/chart/co2_chart.tsx rename to src/components/chart/co2_chart.tsx diff --git a/lib/components/chart/humidity_chart.tsx b/src/components/chart/humidity_chart.tsx similarity index 100% rename from lib/components/chart/humidity_chart.tsx rename to src/components/chart/humidity_chart.tsx diff --git a/lib/components/chart/light_chart.tsx b/src/components/chart/light_chart.tsx similarity index 100% rename from lib/components/chart/light_chart.tsx rename to src/components/chart/light_chart.tsx diff --git a/lib/components/chart/temperature_chart.tsx b/src/components/chart/temperature_chart.tsx similarity index 100% rename from lib/components/chart/temperature_chart.tsx rename to src/components/chart/temperature_chart.tsx diff --git a/lib/components/chart/traffic_chart.tsx b/src/components/chart/traffic_chart.tsx similarity index 100% rename from lib/components/chart/traffic_chart.tsx rename to src/components/chart/traffic_chart.tsx diff --git a/lib/components/drawer/main_drawer.tsx b/src/components/drawer/main_drawer.tsx similarity index 100% rename from lib/components/drawer/main_drawer.tsx rename to src/components/drawer/main_drawer.tsx diff --git a/pages/login.tsx b/src/components/login-form.tsx similarity index 89% rename from pages/login.tsx rename to src/components/login-form.tsx index 669f44e..359835b 100644 --- a/pages/login.tsx +++ b/src/components/login-form.tsx @@ -1,16 +1,18 @@ +"use client" + import { Box, Button, Container, TextField } from "@mui/material" import Head from "next/head" -import { useRouter } from "next/router" +import { useRouter } from "next/navigation" import { useEffect } from "react" import { Controller, useForm } from "react-hook-form" import { hasToken, setToken } from "../lib/auth" -import AnonymousAppBar from "../lib/components/app_bar/anonymous_app_bar" +import AnonymousAppBar from "./app_bar/anonymous_app_bar" -interface LoginValues { +export interface LoginValues { token: string } -export default function LoginPage() { +export default function LoginForm() { const router = useRouter() const { control, handleSubmit } = useForm({ defaultValues: { diff --git a/pages/index.tsx b/src/components/monitor.tsx similarity index 90% rename from pages/index.tsx rename to src/components/monitor.tsx index 9b7d749..f16f3db 100644 --- a/pages/index.tsx +++ b/src/components/monitor.tsx @@ -1,3 +1,5 @@ +"use client" + import assert from "node:assert" import { Box, @@ -8,19 +10,18 @@ import { Typography, } from "@mui/material" import dayjs from "dayjs" -import Head from "next/head" -import { useRouter } from "next/router" +import { useRouter } from "next/navigation" import { useEffect, useState } from "react" import { hasToken } from "../lib/auth" -import MainAppBar from "../lib/components/app_bar/main_app_bar" -import Co2Chart from "../lib/components/chart/co2_chart" -import HumidityChart from "../lib/components/chart/humidity_chart" -import LightChart from "../lib/components/chart/light_chart" -import TemperatureChart from "../lib/components/chart/temperature_chart" -import SmokePingChartImage from "../lib/components/smoke_ping_chart_image" +import MainAppBar from "../components/app_bar/main_app_bar" +import Co2Chart from "../components/chart/co2_chart" +import HumidityChart from "../components/chart/humidity_chart" +import LightChart from "../components/chart/light_chart" +import TemperatureChart from "../components/chart/temperature_chart" import { useGetMonitorQuery } from "../lib/graphql-types" +import SmokePingChartImage from "../components/smoke_ping_chart_image" -export default function HomePage() { +export default function Monitor() { const router = useRouter() const smokePingNames = @@ -141,11 +142,6 @@ export default function HomePage() { return (
- - Harmonica - - - Date: Sat, 6 Dec 2025 00:07:40 +0900 Subject: [PATCH 3/5] fix: dayjs, chart.js init --- src/app/apollo-provider.tsx | 1 - src/app/layout.tsx | 1 - src/components/chart/co2_chart.tsx | 2 +- src/components/chart/humidity_chart.tsx | 2 +- src/components/chart/light_chart.tsx | 2 +- src/components/chart/temperature_chart.tsx | 2 +- src/components/chart/traffic_chart.tsx | 2 +- src/components/monitor.tsx | 6 +++--- src/components/smoke_ping_chart_image.tsx | 2 +- src/{app/init-client.ts => lib/chartjs.ts} | 13 +++---------- src/lib/dayjs.ts | 9 +++++++++ tsconfig.json | 14 +++----------- 12 files changed, 24 insertions(+), 32 deletions(-) rename src/{app/init-client.ts => lib/chartjs.ts} (60%) create mode 100644 src/lib/dayjs.ts diff --git a/src/app/apollo-provider.tsx b/src/app/apollo-provider.tsx index fb1e0a3..2fe7605 100644 --- a/src/app/apollo-provider.tsx +++ b/src/app/apollo-provider.tsx @@ -7,7 +7,6 @@ import { InMemoryCache, } from "@apollo/client" import { setContext } from "@apollo/client/link/context" -import "chartjs-adapter-luxon" import { type ReactNode, useMemo } from "react" import { getToken } from "../lib/auth" diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3badc37..3821c21 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,7 +4,6 @@ import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter" import type { Metadata } from "next" import { Noto_Sans_JP } from "next/font/google" import "./globals.css" -import "./init-client" import { InitColorSchemeScript } from "@mui/material" import theme from "../theme" diff --git a/src/components/chart/co2_chart.tsx b/src/components/chart/co2_chart.tsx index f0dc183..750d311 100644 --- a/src/components/chart/co2_chart.tsx +++ b/src/components/chart/co2_chart.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material" -import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" +import type { ChartOptions } from "@/lib/chartjs" interface Co2DataPoint { value: number diff --git a/src/components/chart/humidity_chart.tsx b/src/components/chart/humidity_chart.tsx index ba57da4..746705e 100644 --- a/src/components/chart/humidity_chart.tsx +++ b/src/components/chart/humidity_chart.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material" -import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" +import type { ChartOptions } from "@/lib/chartjs" interface HumidityDataPoint { value: number diff --git a/src/components/chart/light_chart.tsx b/src/components/chart/light_chart.tsx index acf4393..d93bc83 100644 --- a/src/components/chart/light_chart.tsx +++ b/src/components/chart/light_chart.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material" -import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" +import type { ChartOptions } from "@/lib/chartjs" interface LightDataPoint { value: number diff --git a/src/components/chart/temperature_chart.tsx b/src/components/chart/temperature_chart.tsx index 56e22fe..e598557 100644 --- a/src/components/chart/temperature_chart.tsx +++ b/src/components/chart/temperature_chart.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material" -import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" +import type { ChartOptions } from "@/lib/chartjs" interface TemperatureDataPoint { value: number diff --git a/src/components/chart/traffic_chart.tsx b/src/components/chart/traffic_chart.tsx index 31a8bb9..53af6a6 100644 --- a/src/components/chart/traffic_chart.tsx +++ b/src/components/chart/traffic_chart.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material" -import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" +import type { ChartOptions } from "@/lib/chartjs" interface TrafficDataPoint { value: number diff --git a/src/components/monitor.tsx b/src/components/monitor.tsx index f16f3db..2f001f0 100644 --- a/src/components/monitor.tsx +++ b/src/components/monitor.tsx @@ -9,17 +9,17 @@ import { Toolbar, Typography, } from "@mui/material" -import dayjs from "dayjs" import { useRouter } from "next/navigation" import { useEffect, useState } from "react" -import { hasToken } from "../lib/auth" +import dayjs from "@/lib/dayjs" import MainAppBar from "../components/app_bar/main_app_bar" import Co2Chart from "../components/chart/co2_chart" import HumidityChart from "../components/chart/humidity_chart" import LightChart from "../components/chart/light_chart" import TemperatureChart from "../components/chart/temperature_chart" -import { useGetMonitorQuery } from "../lib/graphql-types" import SmokePingChartImage from "../components/smoke_ping_chart_image" +import { hasToken } from "../lib/auth" +import { useGetMonitorQuery } from "../lib/graphql-types" export default function Monitor() { const router = useRouter() diff --git a/src/components/smoke_ping_chart_image.tsx b/src/components/smoke_ping_chart_image.tsx index 680b53a..9711735 100644 --- a/src/components/smoke_ping_chart_image.tsx +++ b/src/components/smoke_ping_chart_image.tsx @@ -1,6 +1,6 @@ import { Box } from "@mui/material" -import dayjs from "dayjs" import Image from "next/image" +import dayjs from "@/lib/dayjs" interface SmokePingChartImageProps { smokePingUrl: string diff --git a/src/app/init-client.ts b/src/lib/chartjs.ts similarity index 60% rename from src/app/init-client.ts rename to src/lib/chartjs.ts index 0ce1f41..c0e00da 100644 --- a/src/app/init-client.ts +++ b/src/lib/chartjs.ts @@ -1,5 +1,3 @@ -"use client" - import { Chart, Colors, @@ -10,14 +8,6 @@ import { TimeScale, Tooltip, } from "chart.js" -import dayjs from "dayjs" -import dayjsTimezone from "dayjs/plugin/timezone" -import dayjsUtc from "dayjs/plugin/utc" -import "chartjs-adapter-luxon" - -// Setup dayjs -dayjs.extend(dayjsUtc) -dayjs.extend(dayjsTimezone) // Setup Chart.js Chart.register( @@ -33,3 +23,6 @@ Chart.register( // Dark color Chart.defaults.borderColor = "#444c56" Chart.defaults.color = "#adbac7" + +export default Chart +export type { ChartOptions } from "chart.js" diff --git a/src/lib/dayjs.ts b/src/lib/dayjs.ts new file mode 100644 index 0000000..47e80dd --- /dev/null +++ b/src/lib/dayjs.ts @@ -0,0 +1,9 @@ +import dayjs from "dayjs" +import dayjsTimezone from "dayjs/plugin/timezone" +import dayjsUtc from "dayjs/plugin/utc" + +// Setup dayjs +dayjs.extend(dayjsUtc) +dayjs.extend(dayjsTimezone) + +export default dayjs diff --git a/tsconfig.json b/tsconfig.json index b575f7d..19c51c8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "ES2017", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -23,9 +19,7 @@ } ], "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] } }, "include": [ @@ -35,7 +29,5 @@ ".next/types/**/*.ts", ".next/dev/types/**/*.ts" ], - "exclude": [ - "node_modules" - ] + "exclude": ["node_modules"] } From 513457ea4db240e99b098295a0f0e49e20168264 Mon Sep 17 00:00:00 2001 From: aoirint Date: Sat, 6 Dec 2025 00:13:23 +0900 Subject: [PATCH 4/5] fix: time scale not registered --- src/components/chart/co2_chart.tsx | 4 +++- src/components/chart/humidity_chart.tsx | 4 +++- src/components/chart/light_chart.tsx | 4 +++- src/components/chart/temperature_chart.tsx | 4 +++- src/components/chart/traffic_chart.tsx | 4 +++- src/lib/chartjs.ts | 1 - 6 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/chart/co2_chart.tsx b/src/components/chart/co2_chart.tsx index 750d311..aa3d380 100644 --- a/src/components/chart/co2_chart.tsx +++ b/src/components/chart/co2_chart.tsx @@ -1,6 +1,8 @@ import { Box } from "@mui/material" +import "@/lib/chartjs" + +import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" -import type { ChartOptions } from "@/lib/chartjs" interface Co2DataPoint { value: number diff --git a/src/components/chart/humidity_chart.tsx b/src/components/chart/humidity_chart.tsx index 746705e..9b8589f 100644 --- a/src/components/chart/humidity_chart.tsx +++ b/src/components/chart/humidity_chart.tsx @@ -1,6 +1,8 @@ import { Box } from "@mui/material" +import "@/lib/chartjs" + +import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" -import type { ChartOptions } from "@/lib/chartjs" interface HumidityDataPoint { value: number diff --git a/src/components/chart/light_chart.tsx b/src/components/chart/light_chart.tsx index d93bc83..b6186e0 100644 --- a/src/components/chart/light_chart.tsx +++ b/src/components/chart/light_chart.tsx @@ -1,6 +1,8 @@ import { Box } from "@mui/material" +import "@/lib/chartjs" + +import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" -import type { ChartOptions } from "@/lib/chartjs" interface LightDataPoint { value: number diff --git a/src/components/chart/temperature_chart.tsx b/src/components/chart/temperature_chart.tsx index e598557..804f03b 100644 --- a/src/components/chart/temperature_chart.tsx +++ b/src/components/chart/temperature_chart.tsx @@ -1,6 +1,8 @@ import { Box } from "@mui/material" +import "@/lib/chartjs" + +import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" -import type { ChartOptions } from "@/lib/chartjs" interface TemperatureDataPoint { value: number diff --git a/src/components/chart/traffic_chart.tsx b/src/components/chart/traffic_chart.tsx index 53af6a6..99fe1cc 100644 --- a/src/components/chart/traffic_chart.tsx +++ b/src/components/chart/traffic_chart.tsx @@ -1,6 +1,8 @@ import { Box } from "@mui/material" +import "@/lib/chartjs" + +import type { ChartOptions } from "chart.js" import { type ChartProps, Line } from "react-chartjs-2" -import type { ChartOptions } from "@/lib/chartjs" interface TrafficDataPoint { value: number diff --git a/src/lib/chartjs.ts b/src/lib/chartjs.ts index c0e00da..dd522a3 100644 --- a/src/lib/chartjs.ts +++ b/src/lib/chartjs.ts @@ -25,4 +25,3 @@ Chart.defaults.borderColor = "#444c56" Chart.defaults.color = "#adbac7" export default Chart -export type { ChartOptions } from "chart.js" From 00927baf62d5c19c2ef2a05c48707c99eac20a22 Mon Sep 17 00:00:00 2001 From: aoirint Date: Sat, 6 Dec 2025 00:17:34 +0900 Subject: [PATCH 5/5] fix: This method is not implemented: Check that a complete date adapter is provided. --- src/lib/chartjs.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/chartjs.ts b/src/lib/chartjs.ts index dd522a3..509180e 100644 --- a/src/lib/chartjs.ts +++ b/src/lib/chartjs.ts @@ -8,6 +8,7 @@ import { TimeScale, Tooltip, } from "chart.js" +import "chartjs-adapter-luxon" // Setup Chart.js Chart.register(