Bergasha
26d12d9fad
The chart card and its outer widget shell both had overflow:visible, letting chart lines bleed past their rounded borders into neighboring widgets. Compact-mode charts also stretched to fill the widget's full resized height instead of staying compact like other widgets. Additionally, the history used to build the chart needs 2+ points to render a line - it started empty and only got its first real point on the next poll (up to 30s later), so the chart would flash between a single-value fallback and the actual graph. Both the initial render and the first state update now seed with the current value duplicated, so a flat line renders immediately with no flicker.
95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import type { AriaRole, CSSProperties, PropsWithChildren, Ref } from "react";
|
|
import type { CardProps } from "@mantine/core";
|
|
import { Badge, Card } from "@mantine/core";
|
|
import combineClasses from "clsx";
|
|
|
|
import type { WidgetKind } from "@homarr/definitions";
|
|
import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
|
|
|
|
import classes from "./widget-card-shell.module.css";
|
|
|
|
const getOverflow = (kind: WidgetKind, hasCustomCssClasses: boolean): CSSProperties => {
|
|
if (kind === "iframe" || kind === "assistant") return { overflowX: "hidden", overflowY: "hidden" };
|
|
if (hasCustomCssClasses) return {};
|
|
return { overflowX: "hidden", overflowY: "auto" };
|
|
};
|
|
|
|
interface WidgetCardShellProps extends PropsWithChildren<Omit<CardProps, "className" | "styles">> {
|
|
kind: WidgetKind;
|
|
advancedOptions: BoardItemAdvancedOptions;
|
|
opacity: number;
|
|
className?: string;
|
|
innerRef?: Ref<HTMLDivElement>;
|
|
id?: string;
|
|
role?: AriaRole;
|
|
"aria-label"?: string;
|
|
"data-advanced-focus-surface"?: boolean;
|
|
"data-grid-item-content"?: boolean;
|
|
}
|
|
|
|
export const WidgetCardShell = ({
|
|
kind,
|
|
advancedOptions,
|
|
opacity,
|
|
className,
|
|
innerRef,
|
|
children,
|
|
...cardProps
|
|
}: WidgetCardShellProps) => (
|
|
<Card
|
|
{...cardProps}
|
|
ref={innerRef}
|
|
className={combineClasses(
|
|
classes.card,
|
|
kind === "iframe" && classes.iframe,
|
|
`${kind}-wrapper`,
|
|
"board-grid-item-content",
|
|
advancedOptions.customCssClasses.join(" "),
|
|
className,
|
|
)}
|
|
styles={{
|
|
root: {
|
|
"--opacity": opacity,
|
|
"--border-color": advancedOptions.borderColor || undefined,
|
|
containerType: "size",
|
|
...getOverflow(kind, advancedOptions.customCssClasses.length > 0),
|
|
} as CSSProperties,
|
|
}}
|
|
>
|
|
{children}
|
|
</Card>
|
|
);
|
|
|
|
interface WidgetTitleBadgeProps {
|
|
advancedOptions: BoardItemAdvancedOptions;
|
|
opacity: number;
|
|
radius: CardProps["radius"];
|
|
}
|
|
|
|
export const WidgetTitleBadge = ({ advancedOptions, opacity, radius }: WidgetTitleBadgeProps) => {
|
|
if (!advancedOptions.title?.trim()) return null;
|
|
|
|
return (
|
|
<Badge
|
|
pos="absolute"
|
|
style={{ zIndex: "var(--mantine-z-index-app)" }}
|
|
top={2}
|
|
left={16}
|
|
size="xs"
|
|
radius={radius}
|
|
styles={{
|
|
root: {
|
|
"--border-color": advancedOptions.borderColor || undefined,
|
|
"--opacity": opacity,
|
|
} as CSSProperties,
|
|
}}
|
|
className={classes.title}
|
|
c="var(--mantine-color-text)"
|
|
>
|
|
{advancedOptions.title}
|
|
</Badge>
|
|
);
|
|
};
|