mirror of
https://github.com/Dokploy/dokploy.git
synced 2026-07-17 03:45:28 +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>
104 lines
2.5 KiB
TypeScript
104 lines
2.5 KiB
TypeScript
import { format } from "date-fns";
|
|
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts";
|
|
import {
|
|
type ChartConfig,
|
|
ChartContainer,
|
|
ChartLegend,
|
|
ChartLegendContent,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
import type { DockerStatsJSON } from "./show-free-container-monitoring";
|
|
|
|
interface Props {
|
|
accumulativeData: DockerStatsJSON["block"];
|
|
}
|
|
|
|
const chartConfig = {
|
|
readMb: {
|
|
label: "Read (MB)",
|
|
color: "hsl(var(--chart-1))",
|
|
},
|
|
writeMb: {
|
|
label: "Write (MB)",
|
|
color: "hsl(var(--chart-2))",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export const DockerBlockChart = ({ accumulativeData }: Props) => {
|
|
const transformedData = accumulativeData.map((item, index) => ({
|
|
time: item.time,
|
|
name: `Point ${index + 1}`,
|
|
readMb: item.value.readMb,
|
|
writeMb: item.value.writeMb,
|
|
}));
|
|
|
|
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="fillBlockRead" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="5%"
|
|
stopColor="var(--color-readMb)"
|
|
stopOpacity={0.8}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="var(--color-readMb)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</linearGradient>
|
|
<linearGradient id="fillBlockWrite" x1="0" y1="0" x2="0" y2="1">
|
|
<stop
|
|
offset="5%"
|
|
stopColor="var(--color-writeMb)"
|
|
stopOpacity={0.8}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="var(--color-writeMb)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid vertical={false} />
|
|
<YAxis tickLine={false} axisLine={false} />
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={
|
|
<ChartTooltipContent
|
|
labelFormatter={(_, payload) => {
|
|
const time = payload?.[0]?.payload?.time;
|
|
return time ? format(new Date(time), "PPpp") : "";
|
|
}}
|
|
formatter={(value, name) => {
|
|
const label = name === "readMb" ? "Read" : "Write";
|
|
return [`${value} MB`, label];
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="readMb"
|
|
stroke="var(--color-readMb)"
|
|
fill="url(#fillBlockRead)"
|
|
strokeWidth={2}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="writeMb"
|
|
stroke="var(--color-writeMb)"
|
|
fill="url(#fillBlockWrite)"
|
|
strokeWidth={2}
|
|
/>
|
|
<ChartLegend content={<ChartLegendContent />} />
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
);
|
|
};
|