Refactor database credentials and user permissions; update UI components for better usability and accessibility

- Changed default MariaDB password in docker-compose.yml from 'SE3112' to '3112'.
- Added user creation and permissions for 'wago' in the MariaDB initialization script.
- Updated unit options in App.jsx to include a digital/bool option.
- Enhanced LoginScreen component to support inline display and improved error handling.
- Improved point filtering logic in PointLibrary and adjusted default unit handling.
- Refined authentication checks for dashboard and admin permissions.
- Simplified API calls by removing unnecessary token checks.
- Enhanced TrendChart component with better data handling and formatting.
- Updated CSS styles for improved layout and responsiveness in trend views and sidebar.

web/src/components/TrendChart.jsx

@@ -57,6 +57,11 @@ function getAnalogDomain(rows, visibleSeries) {
   return [min - padding, max + padding];
 }
 
+function formatTrendNumber(value) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric.toFixed(2) : "--";
+}
+
 export default function TrendChart({
   result,
   title = "Trendansicht",
@@ -112,15 +117,6 @@ export default function TrendChart({
   const yDomain = zoomDomain?.y || baseYDomain;
   const hasFocusSelection = selectedKeys.length > 0 && selectedKeys.length < series.length;
 
-  if (!rows.length) {
-    return (
-      <div className={compact ? "panel chart-panel compact-chart empty-state" : "panel chart-panel empty-state"}>
-        <h3>{title}</h3>
-        <p>Keine Daten im gewählten Zeitraum.</p>
-      </div>
-    );
-  }
-
   const mapDragToDomain = (clientX, clientY) => {
     const rect = wrapperRef.current?.getBoundingClientRect();
     if (!rect) {
@@ -343,6 +339,15 @@ export default function TrendChart({
     await exportGraphic();
   };
 
+  if (!rows.length) {
+    return (
+      <div className={compact ? "panel chart-panel compact-chart empty-state" : "panel chart-panel empty-state"}>
+        <h3>{title}</h3>
+        <p>Keine Daten im gewählten Zeitraum.</p>
+      </div>
+    );
+  }
+
   return (
     <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">
@@ -378,7 +383,7 @@ export default function TrendChart({
             </>
           ) : 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}
+          {allowFocusMode ? <button className="ghost-button" type="button" onClick={onToggleExpanded}>{expanded ? "Normalansicht" : "Vollbild"}</button> : null}
         </div>
       </div>
 
@@ -400,7 +405,7 @@ export default function TrendChart({
                 minTickGap={28}
                 stroke="var(--muted)"
               />
-              {analogSeries.length ? <YAxis yAxisId="analog" stroke="var(--muted)" domain={yDomain} width={52} /> : null}
+              {analogSeries.length ? <YAxis yAxisId="analog" stroke="var(--muted)" domain={yDomain} width={52} tickFormatter={formatTrendNumber} /> : null}
               {digitalSeries.length ? (
                 <YAxis
                   yAxisId="digital"
@@ -414,6 +419,7 @@ export default function TrendChart({
               ) : null}
               <Tooltip
                 labelFormatter={(value) => new Date(value).toLocaleString("de-DE")}
+                formatter={(value, name) => [formatTrendNumber(value), name]}
                 contentStyle={{
                   background: "var(--surface-strong)",
                   border: "1px solid var(--border-strong)",