mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-17 20:05:24 +02:00
3ca5afd49f
* feat: update dependencies and enhance UI components in Dokploy - Updated various package versions in pnpm-lock.yaml to improve compatibility and performance, including React and Tailwind CSS. - Modified components.json to change the styling to "radix-nova" and added new properties for icon library and menu color. - Refactored multiple components to use updated class names for better styling consistency and responsiveness. - Removed unused Radix UI components from package.json to streamline dependencies. - Adjusted layout and styling in several dashboard components for improved user experience and visual appeal. - Enhanced tooltip and form item components for better accessibility and usability. * refactor: enhance UI components in HandleCertificate and SidebarLogo - Updated the HandleCertificate component to improve dialog content height and textarea styling for better usability. - Adjusted the SidebarLogo component layout to enhance alignment and spacing, ensuring a more consistent appearance across the sidebar. - Implemented responsive design adjustments to textarea elements, preventing overflow and improving user experience. * refactor: improve UI consistency and styling across dashboard components - Updated Card components in ShowDeployments, ShowSchedules, and ShowVolumeBackups to remove unnecessary border styles for a cleaner look. - Enhanced TabsList components in ShowProviderForm and ShowProviderFormCompose by adding a variant for improved visual distinction. - Adjusted spacing in AdvancedEnvironmentSelector for better layout and readability. - Removed redundant border classes in Service component for a more streamlined design. * [autofix.ci] apply automated fixes * chore: update package dependencies and refactor email rendering - Upgraded React and React DOM to version 19.2.7 across multiple packages for improved performance and compatibility. - Updated TSX to version 4.22.4 in various package.json files. - Refactored email rendering from `renderAsync` to `render` in notification utilities and email templates for consistency. - Adjusted Tailwind configuration usage in email templates to utilize a centralized configuration file. These changes enhance the overall stability and maintainability of the codebase. * refactor: update badge variants across dashboard components - Changed badge variant from "outline-solid" to "outline" in multiple components including columns, show-domains, and various deployment tables for consistency in styling. - Updated button variants in billing and project templates to align with the new badge styling. - Enhanced input components to support password generation and error messaging, improving user experience. These changes streamline the UI and ensure a cohesive design across the application. * refactor: clean up calendar component imports and structure - Removed redundant imports of icons from lucide-react and streamlined the import statements for better readability. - Adjusted the placement of type imports to enhance code organization. These changes improve the maintainability and clarity of the calendar component. * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import { format } from "date-fns";
|
|
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
|
import {
|
|
type ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
|
|
|
interface Props {
|
|
accumulativeData: DockerStatsJSON["disk"];
|
|
diskTotal: number;
|
|
}
|
|
|
|
const chartConfig = {
|
|
usedGb: {
|
|
label: "Used (GB)",
|
|
color: "hsl(var(--chart-3))",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export const DockerDiskChart = ({ accumulativeData, diskTotal }: Props) => {
|
|
const transformedData = accumulativeData.map((item, index) => ({
|
|
time: item.time,
|
|
name: `Point ${index + 1}`,
|
|
usedGb: +item.value.diskUsage,
|
|
totalGb: +item.value.diskTotal,
|
|
}));
|
|
|
|
return (
|
|
<ChartContainer config={chartConfig} className="mt-4 h-40 w-full">
|
|
<AreaChart
|
|
data={transformedData}
|
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
|
>
|
|
<defs>
|
|
<linearGradient id="fillDiskUsed" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="5%"
|
|
stopColor="var(--color-usedGb)"
|
|
stopOpacity={0.8}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="var(--color-usedGb)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid vertical={false} />
|
|
<YAxis
|
|
domain={[0, diskTotal]}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickFormatter={(value) => `${value} GB`}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={
|
|
<ChartTooltipContent
|
|
labelFormatter={(_, payload) => {
|
|
const time = payload?.[0]?.payload?.time;
|
|
return time ? format(new Date(time), "PPpp") : "";
|
|
}}
|
|
formatter={(value) => {
|
|
return [`${value} GB`, "Used"];
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="usedGb"
|
|
stroke="var(--color-usedGb)"
|
|
fill="url(#fillDiskUsed)"
|
|
strokeWidth={2}
|
|
/>
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
);
|
|
};
|