update
This commit is contained in:
jhartworks
+4
-3
@@ -9,13 +9,14 @@
|
||||
"preview": "vite preview --host 0.0.0.0 --port 4173"
|
||||
},
|
||||
"dependencies": {
|
||||
"jspdf": "^2.5.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"recharts": "^2.15.1"
|
||||
"recharts": "^2.15.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"vite": "^6.0.7"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
+1250
-320
File diff suppressed because it is too large
Load Diff
+69
-33
@@ -1,50 +1,86 @@
|
||||
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:18080/api";
|
||||
function resolveServiceUrl(explicitEnv, fallbackPort, suffix = "") {
|
||||
const explicit = String(explicitEnv || "").trim();
|
||||
if (explicit) {
|
||||
return explicit.replace(/\/$/, "") + suffix;
|
||||
}
|
||||
|
||||
async function request(path, options = {}) {
|
||||
const response = await fetch(API_URL + path, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(options.token ? { Authorization: "Bearer " + options.token } : {}),
|
||||
...options.headers,
|
||||
},
|
||||
if (typeof window !== "undefined") {
|
||||
const { protocol, hostname } = window.location;
|
||||
return `${protocol}//${hostname}:${fallbackPort}${suffix}`;
|
||||
}
|
||||
|
||||
return `http://localhost:${fallbackPort}${suffix}`;
|
||||
}
|
||||
|
||||
const API_URL = resolveServiceUrl(import.meta.env.VITE_API_URL, import.meta.env.VITE_API_PORT || "18080", "/api");
|
||||
const COLLECTOR_URL = resolveServiceUrl(import.meta.env.VITE_COLLECTOR_URL, import.meta.env.VITE_COLLECTOR_PORT || "18110");
|
||||
|
||||
async function request(baseUrl, path, options = {}) {
|
||||
const headers = {
|
||||
...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
const isJsonBody = options.body !== undefined && !(options.body instanceof FormData);
|
||||
if (isJsonBody) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
}
|
||||
|
||||
const response = await fetch(baseUrl + path, {
|
||||
headers,
|
||||
method: options.method || "GET",
|
||||
body: options.body ? JSON.stringify(options.body) : undefined,
|
||||
body: options.body === undefined ? undefined : isJsonBody ? JSON.stringify(options.body) : options.body,
|
||||
});
|
||||
|
||||
if (response.status === 204) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || "Request failed.");
|
||||
throw new Error(data.error || "Anfrage fehlgeschlagen.");
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const apiRequest = (path, options) => request(API_URL, path, options);
|
||||
const collectorRequest = (path, options) => request(COLLECTOR_URL, path, options);
|
||||
|
||||
export const api = {
|
||||
login: (body) => request("/auth/login", { method: "POST", body }),
|
||||
me: (token) => request("/auth/me", { token }),
|
||||
health: () => request("/health"),
|
||||
getIsps: (token) => request("/isps", { token }),
|
||||
getAliases: (token, isp) => request("/isps/" + isp + "/aliases", { token }),
|
||||
saveAliases: (token, isp, body) =>
|
||||
request("/isps/" + isp + "/aliases", { method: "PUT", token, body }),
|
||||
importSql: (token, body) => request("/admin/import-sql", { method: "POST", token, body }),
|
||||
getUsers: (token) => request("/users", { token }),
|
||||
createUser: (token, body) => request("/users", { method: "POST", token, body }),
|
||||
updateUser: (token, id, body) => request("/users/" + id, { method: "PATCH", token, body }),
|
||||
getSelections: (token) => request("/selections", { token }),
|
||||
createSelection: (token, body) => request("/selections", { method: "POST", token, body }),
|
||||
updateSelection: (token, id, body) => request("/selections/" + id, { method: "PUT", token, body }),
|
||||
deleteSelection: (token, id) => request("/selections/" + id, { method: "DELETE", token }),
|
||||
queryTrends: (token, body) => request("/trends/query", { method: "POST", token, body }),
|
||||
latestValues: (token, body) => request("/points/latest", { method: "POST", token, body }),
|
||||
getDashboard: (token) => request("/dashboard", { token }),
|
||||
saveDashboard: (token, body) => request("/dashboard", { method: "PUT", token, body }),
|
||||
loadDashboardData: (token, body) => request("/dashboard/data", { method: "POST", token, body }),
|
||||
getPreferences: (token) => request("/preferences", { token }),
|
||||
savePreferences: (token, body) => request("/preferences", { method: "PUT", token, body }),
|
||||
login: (body) => apiRequest("/auth/login", { method: "POST", body }),
|
||||
me: (token) => apiRequest("/auth/me", { token }),
|
||||
changePassword: (token, body) => apiRequest("/auth/change-password", { method: "POST", token, body }),
|
||||
health: () => apiRequest("/health"),
|
||||
getIsps: (token) => apiRequest("/isps", { token }),
|
||||
getAliases: (token, isp) => apiRequest(`/isps/${isp}/aliases`, { token }),
|
||||
saveAliases: (token, isp, body) => apiRequest(`/isps/${isp}/aliases`, { method: "PUT", token, body }),
|
||||
createTrendTable: (token, body) => apiRequest("/trend-tables", { method: "POST", token, body }),
|
||||
normalizeAliasMetadata: (token, body) => apiRequest("/admin/normalize-alias-metadata", { method: "POST", token, body }),
|
||||
importSql: (token, body) => apiRequest("/admin/import-sql", { method: "POST", token, body }),
|
||||
getUsers: (token) => apiRequest("/users", { token }),
|
||||
createUser: (token, body) => apiRequest("/users", { method: "POST", token, body }),
|
||||
updateUser: (token, id, body) => apiRequest(`/users/${id}`, { method: "PATCH", token, body }),
|
||||
getSelections: (token) => apiRequest("/selections", { token }),
|
||||
createSelection: (token, body) => apiRequest("/selections", { method: "POST", token, body }),
|
||||
updateSelection: (token, id, body) => apiRequest(`/selections/${id}`, { method: "PUT", token, body }),
|
||||
deleteSelection: (token, id) => apiRequest(`/selections/${id}`, { method: "DELETE", token }),
|
||||
queryTrends: (token, body) => apiRequest("/trends/query", { method: "POST", token, body }),
|
||||
latestValues: (token, body) => apiRequest("/points/latest", { method: "POST", token, body }),
|
||||
getDashboard: (token) => apiRequest("/dashboard", { token }),
|
||||
saveDashboard: (token, body) => apiRequest("/dashboard", { method: "PUT", token, body }),
|
||||
loadDashboardData: (token, body) => apiRequest("/dashboard/data", { method: "POST", token, body }),
|
||||
getPreferences: (token) => apiRequest("/preferences", { token }),
|
||||
savePreferences: (token, body) => apiRequest("/preferences", { method: "PUT", token, body }),
|
||||
getCollectorCapabilities: () => collectorRequest("/capabilities"),
|
||||
getCollectorSources: () => collectorRequest("/sources"),
|
||||
getCollectorDatapoints: (sourceId = "") => collectorRequest(sourceId ? `/datapoints?sourceId=${encodeURIComponent(sourceId)}` : "/datapoints"),
|
||||
createCollectorSource: (body) => collectorRequest("/sources", { method: "POST", body }),
|
||||
updateCollectorSource: (id, body) => collectorRequest(`/sources/${id}`, { method: "PUT", body }),
|
||||
deleteCollectorSource: (id) => collectorRequest(`/sources/${id}`, { method: "DELETE" }),
|
||||
importModbusCsv: (body) => collectorRequest("/imports/modbus-csv", { method: "POST", body }),
|
||||
importKnxXml: (body) => collectorRequest("/imports/knx-xml", { method: "POST", body }),
|
||||
scanOpcua: (body) => collectorRequest("/scan/opcua", { method: "POST", body }),
|
||||
scanBacnet: (body) => collectorRequest("/scan/bacnet", { method: "POST", body }),
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
export default function Gauge({ value, min = 0, max = 100, label, unit, timestamp }) {
|
||||
const safeMin = Number.isFinite(Number(min)) ? Number(min) : 0;
|
||||
const safeMax = Number.isFinite(Number(max)) ? Number(max) : 100;
|
||||
const safeValue = Number.isFinite(Number(value)) ? Number(value) : safeMin;
|
||||
@@ -9,6 +9,7 @@ export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
const cy = 110;
|
||||
const x = cx + Math.cos(radians) * 72;
|
||||
const y = cy + Math.sin(radians) * 72;
|
||||
const timestampLabel = timestamp ? new Date(timestamp).toLocaleString("de-DE") : "Aktueller Wert";
|
||||
|
||||
return (
|
||||
<div className="gauge-card">
|
||||
@@ -20,6 +21,7 @@ export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
/>
|
||||
<circle cx="110" cy="110" r="7" className="gauge-center" />
|
||||
</svg>
|
||||
<div className="gauge-current">Aktuell</div>
|
||||
<div className="gauge-value">
|
||||
<span>{Number.isFinite(safeValue) ? safeValue.toFixed(2) : "--"}</span>
|
||||
<small>{unit}</small>
|
||||
@@ -29,7 +31,7 @@ export default function Gauge({ value, min = 0, max = 100, label, unit }) {
|
||||
<span>{safeMin}</span>
|
||||
<span>{safeMax}</span>
|
||||
</div>
|
||||
<div className="gauge-stamp">{timestampLabel}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,93 +1,445 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { jsPDF } from "jspdf";
|
||||
import * as XLSX from "xlsx";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
ReferenceArea,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
|
||||
const COLORS = ["#2563eb", "#dc2626", "#1d4ed8", "#b91c1c", "#3b82f6", "#ef4444"];
|
||||
function downloadBlob(filename, blob) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export default function TrendChart({ result, title = "Trendansicht" }) {
|
||||
const hostRef = useRef(null);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
function quoteCell(value) {
|
||||
return `"${String(value ?? "").replaceAll('"', '""')}"`;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const onChange = () => {
|
||||
setIsFullscreen(document.fullscreenElement === hostRef.current);
|
||||
};
|
||||
function buildRandomColor(index) {
|
||||
const hue = Math.round((Math.random() * 360 + index * 41) % 360);
|
||||
const saturation = 72 + (index % 3) * 4;
|
||||
const lightness = 46 + (index % 4) * 3;
|
||||
return `hsl(${hue} ${saturation}% ${lightness}%)`;
|
||||
}
|
||||
|
||||
document.addEventListener("fullscreenchange", onChange);
|
||||
return () => document.removeEventListener("fullscreenchange", onChange);
|
||||
}, []);
|
||||
export default function TrendChart({
|
||||
result,
|
||||
title = "Trendansicht",
|
||||
expanded = false,
|
||||
onToggleExpanded,
|
||||
csvDelimiter = ";",
|
||||
onCsvDelimiterChange,
|
||||
allowExports = true,
|
||||
allowFocusMode = true,
|
||||
compact = false,
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const chartHostRef = useRef(null);
|
||||
const [selectedKeys, setSelectedKeys] = useState([]);
|
||||
const [dragBox, setDragBox] = useState(null);
|
||||
const [zoomDomain, setZoomDomain] = useState(null);
|
||||
const [exportFormat, setExportFormat] = useState("csv");
|
||||
const [transparentBackground, setTransparentBackground] = useState(false);
|
||||
|
||||
if (!result?.rows?.length) {
|
||||
const series = useMemo(() => {
|
||||
const fallbackColors = [];
|
||||
return (result?.series || []).map((item, index) => ({
|
||||
...item,
|
||||
color: item.color || (fallbackColors[index] ||= buildRandomColor(index)),
|
||||
name: `${item.displayName} · ${item.alias}${item.unit ? ` (${item.unit})` : ""}`,
|
||||
}));
|
||||
}, [result]);
|
||||
|
||||
const rows = useMemo(() => (result?.rows || []).map((row) => ({
|
||||
...row,
|
||||
timestampMs: new Date(row.timestamp).getTime(),
|
||||
})), [result]);
|
||||
|
||||
const visibleSeries = selectedKeys.length ? series.filter((item) => selectedKeys.includes(item.key)) : series;
|
||||
|
||||
const baseXDomain = useMemo(() => {
|
||||
if (!rows.length) {
|
||||
return [0, 1];
|
||||
}
|
||||
return [rows[0].timestampMs, rows[rows.length - 1].timestampMs];
|
||||
}, [rows]);
|
||||
|
||||
const baseYDomain = useMemo(() => {
|
||||
const values = [];
|
||||
rows.forEach((row) => {
|
||||
visibleSeries.forEach((item) => {
|
||||
const value = row[item.key];
|
||||
if (Number.isFinite(value)) {
|
||||
values.push(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (!values.length) {
|
||||
return [0, 1];
|
||||
}
|
||||
|
||||
const min = Math.min(...values);
|
||||
const max = Math.max(...values);
|
||||
if (min === max) {
|
||||
return [min - 1, max + 1];
|
||||
}
|
||||
|
||||
const padding = (max - min) * 0.08;
|
||||
return [min - padding, max + padding];
|
||||
}, [rows, visibleSeries]);
|
||||
|
||||
const xDomain = zoomDomain?.x || baseXDomain;
|
||||
const yDomain = zoomDomain?.y || baseYDomain;
|
||||
const hasFocusSelection = selectedKeys.length > 0 && selectedKeys.length < series.length;
|
||||
|
||||
if (!rows.length) {
|
||||
return (
|
||||
<div className="panel chart-panel empty-state">
|
||||
<div className={compact ? "panel chart-panel compact-chart empty-state" : "panel chart-panel empty-state"}>
|
||||
<h3>{title}</h3>
|
||||
<p>Keine Daten im gewaehlten Zeitraum.</p>
|
||||
<p>Keine Daten im gewählten Zeitraum.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const rows = result.rows.map((row) => ({
|
||||
...row,
|
||||
timestampLabel: new Date(row.timestamp).toLocaleString("de-DE"),
|
||||
}));
|
||||
const mapDragToDomain = (clientX, clientY) => {
|
||||
const rect = wrapperRef.current?.getBoundingClientRect();
|
||||
if (!rect) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const toggleFullscreen = async () => {
|
||||
if (!hostRef.current) {
|
||||
const xRatio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
||||
const yRatio = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
|
||||
const xValue = xDomain[0] + (xDomain[1] - xDomain[0]) * xRatio;
|
||||
const yValue = yDomain[1] - (yDomain[1] - yDomain[0]) * yRatio;
|
||||
|
||||
return {
|
||||
xValue,
|
||||
yValue,
|
||||
xPixel: clientX - rect.left,
|
||||
yPixel: clientY - rect.top,
|
||||
};
|
||||
};
|
||||
|
||||
const handleMouseDown = (event) => {
|
||||
if (event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
const mapped = mapDragToDomain(event.clientX, event.clientY);
|
||||
if (!mapped) {
|
||||
return;
|
||||
}
|
||||
setDragBox({ start: mapped, end: mapped });
|
||||
};
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (!dragBox) {
|
||||
return;
|
||||
}
|
||||
const mapped = mapDragToDomain(event.clientX, event.clientY);
|
||||
if (!mapped) {
|
||||
return;
|
||||
}
|
||||
setDragBox((current) => current ? { ...current, end: mapped } : current);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (!dragBox) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (document.fullscreenElement === hostRef.current) {
|
||||
await document.exitFullscreen();
|
||||
const deltaX = Math.abs(dragBox.end.xPixel - dragBox.start.xPixel);
|
||||
const deltaY = Math.abs(dragBox.end.yPixel - dragBox.start.yPixel);
|
||||
if (deltaX < 12 || deltaY < 12) {
|
||||
setDragBox(null);
|
||||
return;
|
||||
}
|
||||
|
||||
await hostRef.current.requestFullscreen();
|
||||
setZoomDomain({
|
||||
x: [Math.min(dragBox.start.xValue, dragBox.end.xValue), Math.max(dragBox.start.xValue, dragBox.end.xValue)],
|
||||
y: [Math.min(dragBox.start.yValue, dragBox.end.yValue), Math.max(dragBox.start.yValue, dragBox.end.yValue)],
|
||||
});
|
||||
setDragBox(null);
|
||||
};
|
||||
|
||||
const resetZoom = () => {
|
||||
setZoomDomain(null);
|
||||
};
|
||||
|
||||
const clearFocus = () => {
|
||||
setSelectedKeys([]);
|
||||
};
|
||||
|
||||
const handleLegendClick = (event, key) => {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
setSelectedKeys((current) => current.includes(key) ? current.filter((item) => item !== key) : current.concat(key));
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedKeys((current) => current.length === 1 && current[0] === key ? [] : [key]);
|
||||
};
|
||||
|
||||
const buildTabularRows = () => rows.map((row) => {
|
||||
const item = {
|
||||
Zeitstempel: new Date(row.timestampMs).toLocaleString("de-DE"),
|
||||
ISO: new Date(row.timestampMs).toISOString(),
|
||||
};
|
||||
series.forEach((entry) => {
|
||||
item[entry.name] = row[entry.key] ?? "";
|
||||
});
|
||||
return item;
|
||||
});
|
||||
|
||||
const exportCsv = () => {
|
||||
const headers = ["timestamp"].concat(series.map((entry) => entry.name));
|
||||
const lines = [headers]
|
||||
.concat(rows.map((row) => [
|
||||
new Date(row.timestampMs).toISOString(),
|
||||
...series.map((entry) => row[entry.key] ?? ""),
|
||||
]))
|
||||
.map((line) => line.map((cell) => quoteCell(cell)).join(csvDelimiter));
|
||||
downloadBlob("trend-export.csv", new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" }));
|
||||
};
|
||||
|
||||
const exportXlsx = () => {
|
||||
const worksheet = XLSX.utils.json_to_sheet(buildTabularRows());
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Trend");
|
||||
XLSX.writeFile(workbook, "trend-export.xlsx");
|
||||
};
|
||||
|
||||
const getSvgMarkup = (transparent = false) => {
|
||||
const svg = chartHostRef.current?.querySelector("svg");
|
||||
if (!svg) {
|
||||
throw new Error("SVG für Export nicht gefunden.");
|
||||
}
|
||||
|
||||
const clone = svg.cloneNode(true);
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const width = Math.max(900, Math.round(rect.width));
|
||||
const height = Math.max(360, Math.round(rect.height));
|
||||
clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
clone.setAttribute("width", String(width));
|
||||
clone.setAttribute("height", String(height));
|
||||
clone.setAttribute("viewBox", `0 0 ${width} ${height}`);
|
||||
|
||||
if (!transparent) {
|
||||
const background = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||||
background.setAttribute("x", "0");
|
||||
background.setAttribute("y", "0");
|
||||
background.setAttribute("width", String(width));
|
||||
background.setAttribute("height", String(height));
|
||||
background.setAttribute("fill", "#ffffff");
|
||||
clone.insertBefore(background, clone.firstChild);
|
||||
}
|
||||
|
||||
return new XMLSerializer().serializeToString(clone);
|
||||
};
|
||||
|
||||
const svgToImage = async (type = "png", transparent = false) => {
|
||||
const svgMarkup = getSvgMarkup(transparent && type === "png");
|
||||
const svgBlob = new Blob([svgMarkup], { type: "image/svg+xml;charset=utf-8" });
|
||||
const url = URL.createObjectURL(svgBlob);
|
||||
const image = new Image();
|
||||
const rect = chartHostRef.current?.getBoundingClientRect();
|
||||
const width = Math.max(1200, Math.round(rect?.width || 1200));
|
||||
const height = Math.max(expanded ? 720 : 420, Math.round(rect?.height || 420));
|
||||
|
||||
const dataUrl = await new Promise((resolve, reject) => {
|
||||
image.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const context = canvas.getContext("2d");
|
||||
if (!transparent) {
|
||||
context.fillStyle = "#ffffff";
|
||||
context.fillRect(0, 0, width, height);
|
||||
}
|
||||
context.drawImage(image, 0, 0, width, height);
|
||||
URL.revokeObjectURL(url);
|
||||
resolve(canvas.toDataURL(type === "jpg" ? "image/jpeg" : "image/png", 0.95));
|
||||
};
|
||||
image.onerror = reject;
|
||||
image.src = url;
|
||||
});
|
||||
|
||||
return dataUrl;
|
||||
};
|
||||
|
||||
const exportGraphic = async () => {
|
||||
if (exportFormat === "svg") {
|
||||
downloadBlob("trend-export.svg", new Blob([getSvgMarkup(transparentBackground)], { type: "image/svg+xml;charset=utf-8" }));
|
||||
return;
|
||||
}
|
||||
|
||||
if (exportFormat === "png" || exportFormat === "jpg") {
|
||||
const dataUrl = await svgToImage(exportFormat, exportFormat === "png" ? transparentBackground : false);
|
||||
const response = await fetch(dataUrl);
|
||||
const blob = await response.blob();
|
||||
downloadBlob(`trend-export.${exportFormat}`, blob);
|
||||
return;
|
||||
}
|
||||
|
||||
if (exportFormat === "pdf") {
|
||||
const dataUrl = await svgToImage("png", false);
|
||||
const image = new Image();
|
||||
await new Promise((resolve) => {
|
||||
image.onload = resolve;
|
||||
image.src = dataUrl;
|
||||
});
|
||||
const pdf = new jsPDF({ orientation: "landscape", unit: "pt", format: [image.width, image.height] });
|
||||
pdf.addImage(dataUrl, "PNG", 0, 0, image.width, image.height);
|
||||
pdf.save("trend-export.pdf");
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
if (exportFormat === "csv") {
|
||||
exportCsv();
|
||||
return;
|
||||
}
|
||||
if (exportFormat === "xlsx") {
|
||||
exportXlsx();
|
||||
return;
|
||||
}
|
||||
await exportGraphic();
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={hostRef} className="panel chart-panel">
|
||||
<div className="panel-header">
|
||||
<h3>{title}</h3>
|
||||
<button className="ghost-button" type="button" onClick={toggleFullscreen}>
|
||||
{isFullscreen ? "Zurueck" : "Vollbild"}
|
||||
</button>
|
||||
<div className={expanded ? "panel chart-panel focus-mode" : compact ? "panel chart-panel compact-chart" : "panel chart-panel"}>
|
||||
<div className="panel-header compact-header chart-toolbar">
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<p>Ziehen mit gedrückter Maustaste zoomt Zeit und Wertebereich gemeinsam.</p>
|
||||
</div>
|
||||
<div className="chart-actions">
|
||||
{allowExports ? (
|
||||
<>
|
||||
<select value={exportFormat} onChange={(event) => setExportFormat(event.target.value)}>
|
||||
<option value="csv">CSV</option>
|
||||
<option value="xlsx">XLSX</option>
|
||||
<option value="png">PNG</option>
|
||||
<option value="jpg">JPG</option>
|
||||
<option value="svg">SVG</option>
|
||||
<option value="pdf">PDF</option>
|
||||
</select>
|
||||
{exportFormat === "csv" ? (
|
||||
<select value={csvDelimiter} onChange={(event) => onCsvDelimiterChange?.(event.target.value)}>
|
||||
<option value=";">; Trennzeichen</option>
|
||||
<option value=",">, Trennzeichen</option>
|
||||
<option value="\t">Tab Trennzeichen</option>
|
||||
</select>
|
||||
) : null}
|
||||
{(exportFormat === "png" || exportFormat === "svg") ? (
|
||||
<label className="chart-check">
|
||||
<input type="checkbox" checked={transparentBackground} onChange={(event) => setTransparentBackground(event.target.checked)} />
|
||||
<span>Transparent</span>
|
||||
</label>
|
||||
) : null}
|
||||
<button className="ghost-button" type="button" onClick={handleExport}>Export</button>
|
||||
</>
|
||||
) : null}
|
||||
{zoomDomain ? <button className="ghost-button" type="button" onClick={resetZoom}>Zoom zurück</button> : null}
|
||||
{allowFocusMode ? <button className="ghost-button" type="button" onClick={onToggleExpanded}>{expanded ? "Normalansicht" : "Fokus"}</button> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart-wrapper">
|
||||
<ResponsiveContainer width="100%" height={isFullscreen ? 520 : 320}>
|
||||
<LineChart data={rows}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--grid)" />
|
||||
<XAxis dataKey="timestampLabel" minTickGap={30} stroke="var(--muted)" />
|
||||
<YAxis stroke="var(--muted)" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "var(--surface-strong)",
|
||||
border: "1px solid var(--border-strong)",
|
||||
borderRadius: 10,
|
||||
fontSize: 12,
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
{result.series.map((series, index) => (
|
||||
<Line
|
||||
key={series.key}
|
||||
type="monotone"
|
||||
dataKey={series.key}
|
||||
dot={false}
|
||||
strokeWidth={1.75}
|
||||
stroke={COLORS[index % COLORS.length]}
|
||||
name={series.displayName + " / " + series.alias + (series.unit ? " (" + series.unit + ")" : "")}
|
||||
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className={dragBox ? "chart-wrapper dragging" : "chart-wrapper"}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
>
|
||||
<div ref={chartHostRef} className="chart-host">
|
||||
<ResponsiveContainer width="100%" height={expanded ? 680 : compact ? 280 : 360}>
|
||||
<LineChart data={rows} margin={{ top: 8, right: 18, left: 0, bottom: 8 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--grid)" />
|
||||
<XAxis
|
||||
dataKey="timestampMs"
|
||||
type="number"
|
||||
scale="time"
|
||||
domain={xDomain}
|
||||
tickFormatter={(value) => new Date(value).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
|
||||
minTickGap={28}
|
||||
stroke="var(--muted)"
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
<YAxis stroke="var(--muted)" domain={yDomain} width={52} />
|
||||
<Tooltip
|
||||
labelFormatter={(value) => new Date(value).toLocaleString("de-DE")}
|
||||
contentStyle={{
|
||||
background: "var(--surface-strong)",
|
||||
border: "1px solid var(--border-strong)",
|
||||
borderRadius: 10,
|
||||
fontSize: 12,
|
||||
}}
|
||||
/>
|
||||
{dragBox ? (
|
||||
<ReferenceArea
|
||||
x1={Math.min(dragBox.start.xValue, dragBox.end.xValue)}
|
||||
x2={Math.max(dragBox.start.xValue, dragBox.end.xValue)}
|
||||
y1={Math.min(dragBox.start.yValue, dragBox.end.yValue)}
|
||||
y2={Math.max(dragBox.start.yValue, dragBox.end.yValue)}
|
||||
strokeOpacity={0.5}
|
||||
fillOpacity={0.12}
|
||||
fill="var(--brand-2)"
|
||||
/>
|
||||
) : null}
|
||||
{series.map((entry) => {
|
||||
const isolated = selectedKeys.length > 0 && !selectedKeys.includes(entry.key);
|
||||
return (
|
||||
<Line
|
||||
key={entry.key}
|
||||
type="monotone"
|
||||
dataKey={entry.key}
|
||||
dot={false}
|
||||
strokeWidth={selectedKeys.includes(entry.key) ? 2.35 : 1.8}
|
||||
stroke={entry.color}
|
||||
strokeOpacity={isolated ? 0.1 : 1}
|
||||
isAnimationActive={false}
|
||||
name={entry.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="legend-row">
|
||||
<div className="legend-grid">
|
||||
{series.map((entry) => {
|
||||
const dimmed = selectedKeys.length > 0 && !selectedKeys.includes(entry.key);
|
||||
const active = selectedKeys.includes(entry.key);
|
||||
return (
|
||||
<button
|
||||
key={entry.key}
|
||||
type="button"
|
||||
className={active ? "legend-item active" : dimmed ? "legend-item dimmed" : "legend-item"}
|
||||
onClick={(event) => handleLegendClick(event, entry.key)}
|
||||
>
|
||||
<span className="legend-swatch" style={{ background: entry.color }} />
|
||||
<span>{entry.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasFocusSelection ? (
|
||||
<div className="legend-side-actions">
|
||||
<button className="ghost-button" type="button" onClick={clearFocus}>Alle Werte</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
+521
-137
@@ -1,37 +1,43 @@
|
||||
:root {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f5f7fb;
|
||||
--bg: #f4f6fb;
|
||||
--bg-accent: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
|
||||
--surface: rgba(255, 255, 255, 0.92);
|
||||
--surface: rgba(255, 255, 255, 0.96);
|
||||
--surface-strong: #ffffff;
|
||||
--text: #18212f;
|
||||
--muted: #6c7688;
|
||||
--muted: #667085;
|
||||
--border: rgba(37, 99, 235, 0.1);
|
||||
--border-strong: rgba(37, 99, 235, 0.18);
|
||||
--border-strong: rgba(214, 40, 57, 0.24);
|
||||
--brand: #2563eb;
|
||||
--brand-2: #dc2626;
|
||||
--brand-2: #d62839;
|
||||
--danger: #b91c1c;
|
||||
--grid: rgba(37, 99, 235, 0.12);
|
||||
--grid: rgba(214, 40, 57, 0.11);
|
||||
--shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
|
||||
--radius: 14px;
|
||||
--sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 251, 255, 0.94) 100%);
|
||||
--sidebar-border: rgba(37, 99, 235, 0.08);
|
||||
--sidebar-accent: linear-gradient(180deg, var(--brand-2) 0%, #cf2d5c 55%, var(--brand) 100%);
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--bg: #0f1724;
|
||||
--bg-accent: linear-gradient(180deg, #101827 0%, #0c1420 100%);
|
||||
--surface: rgba(14, 22, 36, 0.95);
|
||||
--surface-strong: #121b2b;
|
||||
--bg: #0e1624;
|
||||
--bg-accent: linear-gradient(180deg, #101827 0%, #0b1320 100%);
|
||||
--surface: rgba(16, 24, 38, 0.96);
|
||||
--surface-strong: #121b2a;
|
||||
--text: #edf2f7;
|
||||
--muted: #93a0b5;
|
||||
--muted: #94a3b8;
|
||||
--border: rgba(96, 165, 250, 0.12);
|
||||
--border-strong: rgba(96, 165, 250, 0.22);
|
||||
--brand: #60a5fa;
|
||||
--brand-2: #f87171;
|
||||
--border-strong: rgba(248, 113, 113, 0.24);
|
||||
--brand: #4f8df7;
|
||||
--brand-2: #ef4444;
|
||||
--danger: #f87171;
|
||||
--grid: rgba(96, 165, 250, 0.16);
|
||||
--shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
|
||||
--grid: rgba(239, 68, 68, 0.15);
|
||||
--shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
|
||||
--sidebar-bg: linear-gradient(180deg, rgba(15, 23, 38, 0.98) 0%, rgba(10, 16, 28, 0.96) 100%);
|
||||
--sidebar-border: rgba(148, 163, 184, 0.12);
|
||||
--sidebar-accent: linear-gradient(180deg, #ef4444 0%, #dc3b68 55%, #4f8df7 100%);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -48,7 +54,7 @@ body {
|
||||
margin: 0;
|
||||
background: var(--bg-accent);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -70,28 +76,36 @@ textarea {
|
||||
background: var(--surface-strong);
|
||||
color: var(--text);
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
padding: 0.46rem 0.62rem;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--brand);
|
||||
border-color: var(--brand-2);
|
||||
box-shadow: 0 0 0 1px rgba(214, 40, 57, 0.18);
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
gap: 0.28rem;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
small,
|
||||
p,
|
||||
span {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.login-screen {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.25rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card,
|
||||
@@ -103,33 +117,34 @@ label {
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(100%, 340px);
|
||||
width: min(100%, 336px);
|
||||
border-radius: 18px;
|
||||
padding: 1rem;
|
||||
padding: 0.95rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.logo-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.logo-lockup img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 15px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--brand-2);
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -141,45 +156,173 @@ label {
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.chip,
|
||||
.icon-button {
|
||||
.icon-button,
|
||||
.legend-item {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--surface-strong);
|
||||
color: var(--text);
|
||||
padding: 0.5rem 0.7rem;
|
||||
padding: 0.42rem 0.64rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.ghost-button,
|
||||
.nav-button,
|
||||
.theme-option,
|
||||
.icon-button,
|
||||
.legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, var(--brand), var(--brand-2));
|
||||
background: linear-gradient(135deg, var(--brand-2) 0%, #b8275a 62%, var(--brand) 100%);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.nav-button,
|
||||
.theme-option,
|
||||
.icon-button {
|
||||
.icon-button,
|
||||
.legend-item {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-button.active,
|
||||
.theme-option.active {
|
||||
border-color: var(--brand-2);
|
||||
.theme-option.active,
|
||||
.legend-item.active {
|
||||
border-color: rgba(214, 40, 57, 0.35);
|
||||
color: var(--brand-2);
|
||||
background: rgba(214, 40, 57, 0.08);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.icon-button svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.icon-button.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
grid-template-columns: 188px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-shell.trend-focus {
|
||||
grid-template-columns: 72px 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding: 0.9rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
padding: 0.65rem 0.55rem 0.7rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 1rem;
|
||||
border-right: 1px solid var(--border);
|
||||
gap: 0.75rem;
|
||||
width: 188px;
|
||||
overflow: hidden;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
transition: width 160ms ease, padding 160ms ease;
|
||||
}
|
||||
|
||||
.sidebar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 5px;
|
||||
background: var(--sidebar-accent);
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
padding-inline: 0.35rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-top {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-brand-row {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .logo-lockup {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .logo-lockup img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-list {
|
||||
width: 100%;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-button {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sidebar-top {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.sidebar-footer,
|
||||
.user-card {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-row,
|
||||
.panel-header,
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.user-row,
|
||||
.stat-card,
|
||||
.chart-toolbar,
|
||||
.chart-actions,
|
||||
.view-strip,
|
||||
.alias-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-row,
|
||||
.panel-header,
|
||||
.view-strip {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-brand-row {
|
||||
padding: 0.12rem 0.08rem 0.52rem 0.15rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-list,
|
||||
@@ -188,57 +331,90 @@ label {
|
||||
.selection-chips,
|
||||
.latest-grid,
|
||||
.theme-toggle,
|
||||
.selection-actions,
|
||||
.topbar-actions {
|
||||
.view-meta,
|
||||
.wrap-tight,
|
||||
.chart-actions,
|
||||
.legend-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-footer,
|
||||
.nav-button {
|
||||
min-height: 34px;
|
||||
padding: 0.38rem 0.58rem;
|
||||
border-radius: 12px;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
|
||||
.user-card span,
|
||||
.panel p,
|
||||
.stat-time,
|
||||
.muted,
|
||||
.point-item span,
|
||||
.selection-card span {
|
||||
.selection-card span,
|
||||
.muted,
|
||||
.tiny-note {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0.9rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
.tiny-note {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
.sidebar-footer {
|
||||
align-self: end;
|
||||
padding-top: 0.45rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-logout {
|
||||
justify-self: start;
|
||||
border-radius: 999px;
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0.55rem 0.65rem 0.7rem;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
align-content: start;
|
||||
grid-auto-rows: max-content;
|
||||
}
|
||||
|
||||
.view-strip {
|
||||
padding: 0.02rem 0.08rem 0;
|
||||
}
|
||||
|
||||
.small-badge,
|
||||
.small-label,
|
||||
.point-tag,
|
||||
.alias-index {
|
||||
font-size: 10px;
|
||||
color: var(--brand-2);
|
||||
}
|
||||
|
||||
.topbar h1,
|
||||
.panel h3,
|
||||
.login-card h1 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grid.two,
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
gap: 0.6rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.grid.two {
|
||||
@@ -246,32 +422,47 @@ label {
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: var(--radius);
|
||||
padding: 0.8rem;
|
||||
padding: 0.64rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
gap: 0.58rem;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.7rem;
|
||||
align-items: center;
|
||||
.panel > .primary-button,
|
||||
.panel > .ghost-button {
|
||||
justify-self: start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 0;
|
||||
.login-card > .primary-button {
|
||||
width: 100%;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.compact-button {
|
||||
min-height: 30px;
|
||||
padding: 0.36rem 0.68rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.compact-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.compact-header p,
|
||||
.view-strip p {
|
||||
margin: 0.08rem 0 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
gap: 0.52rem;
|
||||
}
|
||||
|
||||
.span-two {
|
||||
@@ -283,96 +474,187 @@ label {
|
||||
.user-list,
|
||||
.selection-list {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
gap: 0.36rem;
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.stack-card,
|
||||
.user-row,
|
||||
.stat-card,
|
||||
.gauge-card {
|
||||
background: var(--surface-strong);
|
||||
.selection-list.compact,
|
||||
.source-list,
|
||||
.datapoint-preview .selection-list {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.point-item,
|
||||
.selection-card,
|
||||
.user-row,
|
||||
.stat-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
.alias-table {
|
||||
max-height: 560px;
|
||||
}
|
||||
|
||||
.stack-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.45rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.selection-card,
|
||||
.point-item,
|
||||
.user-row,
|
||||
.stat-card,
|
||||
.legend-item,
|
||||
.chip {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.source-card.active {
|
||||
border-color: rgba(214, 40, 57, 0.38);
|
||||
background: rgba(214, 40, 57, 0.08);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.selection-card,
|
||||
.point-item,
|
||||
.user-row,
|
||||
.stat-card {
|
||||
padding: 0.55rem 0.65rem;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.58rem;
|
||||
}
|
||||
|
||||
.selection-card {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.point-tag,
|
||||
.alias-index,
|
||||
.small-label {
|
||||
color: var(--brand-2);
|
||||
font-size: 11px;
|
||||
.point-copy,
|
||||
.user-copy {
|
||||
display: grid;
|
||||
gap: 0.06rem;
|
||||
}
|
||||
|
||||
.selection-chips {
|
||||
min-height: 42px;
|
||||
min-height: 0;
|
||||
gap: 0.34rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
text-align: left;
|
||||
background: rgba(37, 99, 235, 0.06);
|
||||
gap: 0.12rem;
|
||||
border-left: 3px solid var(--brand-2);
|
||||
min-width: 94px;
|
||||
padding: 0.34rem 0.42rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.chip strong,
|
||||
.point-copy strong,
|
||||
.selection-card strong,
|
||||
.user-card strong,
|
||||
.user-copy strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chip span {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.chart-panel {
|
||||
min-height: 390px;
|
||||
}
|
||||
|
||||
.chart-panel.focus-mode {
|
||||
min-height: calc(100vh - 1.2rem);
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.chart-panel:fullscreen {
|
||||
padding: 1rem;
|
||||
background: var(--surface-strong);
|
||||
.chart-wrapper.dragging {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.chart-host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.32rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chart-check input {
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.55rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.legend-grid {
|
||||
gap: 0.34rem;
|
||||
flex: 1 1 360px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
padding: 0.32rem 0.48rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.legend-item.dimmed {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.legend-side-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.legend-swatch {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.latest-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 12px;
|
||||
.stat-card,
|
||||
.gauge-card,
|
||||
.user-row {
|
||||
border: 1px solid var(--border);
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-card,
|
||||
.latest-card {
|
||||
border-left: 4px solid var(--brand-2);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem;
|
||||
font-size: 20px;
|
||||
gap: 0.32rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -381,12 +663,17 @@ label {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.value-stamp {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
|
||||
.gauge-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem;
|
||||
padding: 0.65rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
gap: 0.22rem;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
@@ -397,7 +684,7 @@ label {
|
||||
|
||||
.gauge-track {
|
||||
fill: none;
|
||||
stroke: rgba(37, 99, 235, 0.18);
|
||||
stroke: rgba(214, 40, 57, 0.16);
|
||||
stroke-width: 12;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
@@ -412,43 +699,60 @@ label {
|
||||
fill: var(--brand);
|
||||
}
|
||||
|
||||
.gauge-current {
|
||||
color: var(--brand-2);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
align-items: baseline;
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gauge-range {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.gauge-range,
|
||||
.gauge-label,
|
||||
.gauge-stamp {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.alias-row {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1.2fr 0.7fr 0.55fr 0.55fr;
|
||||
gap: 0.4rem;
|
||||
grid-template-columns: 92px 1.55fr 0.8fr 0.65fr 0.65fr 0.8fr;
|
||||
gap: 0.58rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-row {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
.alias-head {
|
||||
padding: 0 0.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.unit-field,
|
||||
.color-field {
|
||||
display: grid;
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
.color-field {
|
||||
grid-template-columns: 38px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-field input[type="color"] {
|
||||
padding: 0.12rem;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.error-box,
|
||||
.success-box {
|
||||
padding: 0.55rem 0.65rem;
|
||||
padding: 0.5rem 0.62rem;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -471,6 +775,66 @@ label {
|
||||
|
||||
.checkbox-field input {
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.file-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-button input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-section {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.admin-subnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.38rem;
|
||||
}
|
||||
|
||||
.admin-subnav .nav-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.protocol-panel,
|
||||
.protocol-block,
|
||||
.datapoint-preview {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.protocol-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.52rem;
|
||||
}
|
||||
|
||||
.protocol-block {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0.56rem;
|
||||
background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
|
||||
}
|
||||
|
||||
.inline-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 88px auto;
|
||||
gap: 0.36rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inline-fields.multi-line {
|
||||
grid-template-columns: minmax(0, 1fr) 88px auto;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -478,14 +842,34 @@ label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slim-empty {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.app-shell {
|
||||
.app-shell,
|
||||
.app-shell.trend-focus {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.sidebar.collapsed {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.grid.two,
|
||||
.form-grid,
|
||||
.alias-row {
|
||||
.alias-row,
|
||||
.protocol-grid,
|
||||
.inline-fields,
|
||||
.inline-fields.multi-line {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user