Skip to content

Commit

Permalink
feat: add themes and theme insertion points
Browse files Browse the repository at this point in the history
  • Loading branch information
pacholoamit committed May 15, 2024
1 parent bf1262c commit e0d4ba2
Show file tree
Hide file tree
Showing 12 changed files with 134 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/features/metrics/components/disks/disk.stats-ring.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const DiskStatsRing: React.FC = ({}) => {
const label = `Disk ${disk?.data?.at(-1)?.name}`;

return (
<StatsRing color={other.charts.statsArea.disk} Icon={IconCpu2} stats={stats} label={label} progress={progress} />
<StatsRing color={other.charts.statsRing.disk} Icon={IconCpu2} stats={stats} label={label} progress={progress} />
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import Card from "@/components/card";
import AreaChart, { useAreaChartState } from "@/components/area-chart";
import useServerEventsContext from "@/hooks/useServerEventsContext";
import { useEffect } from "react";
import { useMantineTheme } from "@mantine/core";

// TODO: Remove Luxon and ChartJS
// TODO: Make timestamp work automatically
// TODO: fix time

const GlobalCpuAreaChart: React.FC = ({}) => {
const { globalCpu } = useServerEventsContext();
const { other } = useMantineTheme();
const [chartOptions, setChartOptions] = useAreaChartState({
title: {
text: "CPU Usage",
Expand All @@ -34,13 +36,7 @@ const GlobalCpuAreaChart: React.FC = ({}) => {
name: "CPU Usage",
type: "area",
data: globalCpu.map((cpu) => [cpu.timestamp, cpu.usage]),
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "rgba(255, 99, 132, 1)"],
[1, "rgba(255, 99, 132, 0.45)"],
],
},
color: other.charts.area.globalCpu.color,
},
],
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const GlobalCpuStatsRing: React.FC = ({}) => {
const progress = globalCpu.at(-1)?.usage || 0;
const stats = React.useMemo(() => fromNumberToPercentageString(progress), [progress]);

return <StatsRing color={other.charts.statsArea.cpu} Icon={IconCpu} stats={stats} label="CPU" progress={progress} />;
return <StatsRing color={other.charts.statsRing.cpu} Icon={IconCpu} stats={stats} label="CPU" progress={progress} />;
};

export default GlobalCpuStatsRing;
10 changes: 3 additions & 7 deletions src/features/metrics/components/memory/memory.area-chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import formatBytes from "@/features/metrics/utils/format-bytes";
import AreaChart, { useAreaChartState } from "@/components/area-chart";
import useServerEventsContext from "@/hooks/useServerEventsContext";
import { useEffect } from "react";
import { useMantineTheme } from "@mantine/core";

const MemoryAreaChart: React.FC = ({}) => {
const { memory } = useServerEventsContext();
const { other } = useMantineTheme();
const [chartOptions, setChartOptions] = useAreaChartState({
title: {
text: "Ram Usage",
Expand All @@ -31,13 +33,7 @@ const MemoryAreaChart: React.FC = ({}) => {
name: "RAM Usage",
type: "area",
data: memory.map((mem) => [mem.timestamp, mem.used]),
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "rgba(10, 167, 147, 1)"],
[1, "rgba(10, 167, 147, 0.45)"],
],
},
color: other.charts.area.memory.color,
},
],
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const MemoryStatsRing: React.FC = ({}) => {
const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);

return (
<StatsRing color={other.charts.statsArea.memory} Icon={IconCpu2} stats={stats} label="Memory" progress={progress} />
<StatsRing color={other.charts.statsRing.memory} Icon={IconCpu2} stats={stats} label="Memory" progress={progress} />
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import AreaChart, { useAreaChartState } from "@/components/area-chart";
import useServerEventsContext from "@/hooks/useServerEventsContext";
import { useEffect, useState } from "react";
import { SeriesOptionsType } from "highcharts";
import { useMantineTheme } from "@mantine/core";

// TODO: Remove Luxon and ChartJS
// TODO: Make timestamp work automatically
// TODO: fix time

const NetworksAreaChart: React.FC = ({}) => {
const { networks } = useServerEventsContext();
const { other } = useMantineTheme();
const [chartOptions, setChartOptions] = useAreaChartState({
title: {
text: "Network Received",
Expand Down Expand Up @@ -40,12 +42,11 @@ const NetworksAreaChart: React.FC = ({}) => {
name: `${network.id}`,
type: "area",
data: network.data.map((net) => [net.timestamp, net.received]),
color: other.charts.area.networkReceived.color,
})),
});
}, [JSON.stringify(networks)]);



return (
<Card style={{ height: "450px" }}>
<AreaChart options={chartOptions} />
Expand Down
10 changes: 3 additions & 7 deletions src/features/metrics/components/swap/swap.area-chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import formatBytes from "@/features/metrics/utils/format-bytes";
import AreaChart, { useAreaChartState } from "@/components/area-chart";
import useServerEventsContext from "@/hooks/useServerEventsContext";
import { useEffect } from "react";
import { useMantineTheme } from "@mantine/core";

const SwapAreaChart: React.FC = ({}) => {
const { swap } = useServerEventsContext();
const { other } = useMantineTheme();
const [chartOptions, setChartOptions] = useAreaChartState({
title: {
text: "Swap Memory Usage",
Expand All @@ -31,13 +33,7 @@ const SwapAreaChart: React.FC = ({}) => {
name: "Swap Usage",
type: "area",
data: swap.map((swap) => [swap.timestamp, swap.used]),
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "rgba(53, 162, 235, 0.45)"],
[1, "rgba(53, 162, 235)"],
],
},
color: other.charts.area.swap.color,
},
],
});
Expand Down
2 changes: 1 addition & 1 deletion src/features/metrics/components/swap/swap.stats-ring.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const SwapStatsRing: React.FC = ({}) => {
const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]);

return (
<StatsRing color={other.charts.statsArea.swap} Icon={IconCpu2} stats={stats} label="Swap" progress={progress} />
<StatsRing color={other.charts.statsRing.swap} Icon={IconCpu2} stats={stats} label="Swap" progress={progress} />
);
};

Expand Down
20 changes: 11 additions & 9 deletions src/features/settings/pages/settings.page.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import React from "react";
import AutoStartSettingsView from "@/features/settings/views/autostart.view";
import GeneralSettingsView from "@/features/settings/views/general.view";
import AboutView from "@/features/settings/views/about.view";
import PageWrapper from "@/components/page-wrapper";
import Card from "@/components/card";

import { Icon24Hours, IconGitBranch } from "@tabler/icons-react";
import { Center, Container, Grid, NavLink } from "@mantine/core";
import { IconGitBranch, IconSettings2 } from "@tabler/icons-react";
import { Center, Grid, NavLink } from "@mantine/core";
import { useState } from "react";

const settings = [
{ icon: Icon24Hours, label: "General", view: <AutoStartSettingsView /> },
{
icon: IconGitBranch,
label: "About",
view: <AboutView />,
},
{ icon: IconSettings2, label: "General", view: <GeneralSettingsView /> },

// TODO: FIX responsiveness
// {
// icon: IconGitBranch,
// label: "About",
// view: <AboutView />,
// },
];

const SettingsPage = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { autostart } from "@/lib";
import { useTheme } from "@/hooks/useTheme";
import { THEME_OPTION } from "../../../providers/theme.provider";

const AutoStartSettingsView = () => {
const GeneralSettingsView = () => {
const [checked, setChecked] = useState(false);
const [loading, setLoading] = useState(true);
const checkAutoStart = async () => setChecked(await autostart.isEnabled());
Expand Down Expand Up @@ -37,22 +37,24 @@ const AutoStartSettingsView = () => {
<>
<Space h={"md"} />
<Grid gutter={"xl"}>
<Grid.Col span={12} style={{ fontSize: "1.2rem" }}>
<Switch checked={checked} onChange={onChange} label="Start on system startup" />
</Grid.Col>
<Grid.Col span={12} style={{ fontSize: "1.2rem" }}>
<Select
defaultValue={currentTheme}
label="Theme"
data={[
{ value: THEME_OPTION.SLATE, label: "Slate" },
{ value: THEME_OPTION.SHADCN, label: "Shadcn" },
{ value: THEME_OPTION.MIDNIGHT, label: "Midnight" },
{ value: THEME_OPTION.BUMBLEBEE, label: "Bumblebee" },
]}
onChange={(value) => setTheme(value as THEME_OPTION)}
/>
</Grid.Col>
<Grid.Col span={12} style={{ fontSize: "1.2rem" }}>
<Switch checked={checked} onChange={onChange} label="Start on system startup" />
</Grid.Col>
</Grid>
</>
);
};

export default AutoStartSettingsView;
export default GeneralSettingsView;
2 changes: 1 addition & 1 deletion src/layout/components/navbar-options.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const NavbarOption: React.FC<NavbarOptionProps> = (props) => {
return (
<UnstyledButton sx={sx} onClick={onClick}>
<Group position={position}>
<ThemeIcon variant="gradient">{icon}</ThemeIcon>
<ThemeIcon variant="outline">{icon}</ThemeIcon>
<MediaQuery smallerThan={"md"} styles={{ display: "none" }}>
<Text size={"sm"}>{label}</Text>
</MediaQuery>
Expand Down
104 changes: 98 additions & 6 deletions src/providers/theme.provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ interface ThemeProviderProps {
// other: {
// charts: {
// // Use DefaultMantineColor for the color
// statsArea: {
// statsRing: {
// cpu: "blue",
// memory: "cyan",
// swap: "red",
Expand Down Expand Up @@ -55,7 +55,7 @@ interface ThemeProviderProps {
// other: {
// charts: {
// // Use DefaultMantineColor for the color
// statsArea: {
// statsRing: {
// cpu: "white",
// memory: "white",
// swap: "white",
Expand All @@ -67,7 +67,8 @@ interface ThemeProviderProps {

export enum THEME_OPTION {
SLATE = "slate",
SHADCN = "shadcn",
MIDNIGHT = "midnight",
BUMBLEBEE = "bumblebee",
}

const themes: Record<THEME_OPTION, MantineThemeOverride> = {
Expand All @@ -91,18 +92,51 @@ const themes: Record<THEME_OPTION, MantineThemeOverride> = {
other: {
charts: {
// Use DefaultMantineColor for the color
statsArea: {
statsRing: {
cpu: "blue",
memory: "cyan",
swap: "red",
disk: "grape",
},
area: {
swap: {
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "rgba(53, 162, 235, 0.45)"],
[1, "rgba(53, 162, 235)"],
],
},
},
networkReceived: {
color: undefined, // Make it random
},
memory: {
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "rgba(10, 167, 147, 1)"],
[1, "rgba(10, 167, 147, 0.45)"],
],
},
},
globalCpu: {
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "rgba(255, 99, 132, 1)"],
[1, "rgba(255, 99, 132, 0.45)"],
],
},
},
},
},
},
},
[THEME_OPTION.SHADCN]: {
[THEME_OPTION.MIDNIGHT]: {
fontFamily: "Roboto, Arial, sans-serif",
colorScheme: "dark",
primaryColor: "gray",
colors: {
dark: [
"#C1C2C5",
Expand All @@ -120,12 +154,70 @@ const themes: Record<THEME_OPTION, MantineThemeOverride> = {
other: {
charts: {
// Use DefaultMantineColor for the color
statsArea: {
statsRing: {
cpu: "white",
memory: "white",
swap: "white",
disk: "white",
},
area: {
swap: {
color: "white",
},
networkReceived: {
color: "white", // Make it random
},
memory: {
color: "white",
},
globalCpu: {
color: "white",
},
},
},
},
},
[THEME_OPTION.BUMBLEBEE]: {
fontFamily: "Roboto, Arial, sans-serif",
colorScheme: "dark",
primaryColor: "yellow",
colors: {
dark: [
"#C1C2C5",
"#A6A7AB",
"#909296",
"#27272a",
"#27272a", // Card Borders
"#27272a", // Layout edges
"#09090b", // Card colors
"#09090b", // Background of layout
"#09090b", // Background
"#09090b",
],
},
other: {
charts: {
// Use DefaultMantineColor for the color
statsRing: {
cpu: "yellow",
memory: "yellow",
swap: "yellow",
disk: "yellow",
},
area: {
swap: {
color: "#fdd450",
},
networkReceived: {
color: "#fdd450", // Make it random
},
memory: {
color: "#fdd450",
},
globalCpu: {
color: "#fdd450",
},
},
},
},
},
Expand Down

0 comments on commit e0d4ba2

Please sign in to comment.