RnD/dashboardAPI
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(dashboardAPI): inline basin labels — tank fills card width

Browse Source 
Tank visual now fills the Canvas card edge-to-edge instead of leaving
horizontal padding for external name + value label columns. Each
threshold's name and value sit INSIDE the tank near its line ('overflow-
Level  3.22 m', 'highSafety  3.16 m', etc.), right-aligned at the tank's
inner right edge.

Tank rectangle, zone tints, threshold lines, header rim, and footer floor
all widen from left:80 width:200 → left:10 width:380 to fill the frame.
Label colors darkened slightly (e.g. #e54343 → #c92020) to keep contrast
against the semi-transparent zone tint backgrounds.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-05-28 10:59:31 +02:00
parent 70151e52ec
commit 3cd749bf37
1 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
config/pumpingStation.json
View File

@@ -234,7 +234,7 @@
{ {
"name": "Zone Spill", "name": "Zone Spill",
"type": "rectangle", "type": "rectangle",
"placement": { "top": 20, "left": 80, "width": 200, "height": {{h_spill}} }, "placement": { "top": 20, "left": 10, "width": 380, "height": {{h_spill}} },
"background": { "color": { "fixed": "rgba(229, 67, 67, 0.18)" } }, "background": { "color": { "fixed": "rgba(229, 67, 67, 0.18)" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "" } } "config": { "text": { "mode": "fixed", "fixed": "" } }
@@ -242,7 +242,7 @@
{ {
"name": "Zone HighSafety", "name": "Zone HighSafety",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_overflow}}, "left": 80, "width": 200, "height": {{h_highSafety}} }, "placement": { "top": {{y_overflow}}, "left": 10, "width": 380, "height": {{h_highSafety}} },
"background": { "color": { "fixed": "rgba(242, 165, 67, 0.16)" } }, "background": { "color": { "fixed": "rgba(242, 165, 67, 0.16)" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "" } } "config": { "text": { "mode": "fixed", "fixed": "" } }
@@ -250,7 +250,7 @@
{ {
"name": "Zone Operating", "name": "Zone Operating",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_highSafety}}, "left": 80, "width": 200, "height": {{h_operating}} }, "placement": { "top": {{y_highSafety}}, "left": 10, "width": 380, "height": {{h_operating}} },
"background": { "color": { "fixed": "rgba(95, 179, 122, 0.14)" } }, "background": { "color": { "fixed": "rgba(95, 179, 122, 0.14)" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "" } } "config": { "text": { "mode": "fixed", "fixed": "" } }
@@ -258,7 +258,7 @@
{ {
"name": "Zone Dead", "name": "Zone Dead",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_outflow}}, "left": 80, "width": 200, "height": {{h_dead}} }, "placement": { "top": {{y_outflow}}, "left": 10, "width": 380, "height": {{h_dead}} },
"background": { "color": { "fixed": "rgba(128, 128, 128, 0.20)" } }, "background": { "color": { "fixed": "rgba(128, 128, 128, 0.20)" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "" } } "config": { "text": { "mode": "fixed", "fixed": "" } }
@@ -266,7 +266,7 @@
{ {
"name": "Tank Outline", "name": "Tank Outline",
"type": "rectangle", "type": "rectangle",
"placement": { "top": 20, "left": 80, "width": 200, "height": 520 }, "placement": { "top": 20, "left": 10, "width": 380, "height": 520 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "#8a8a8a" }, "width": 2 }, "border": { "color": { "fixed": "#8a8a8a" }, "width": 2 },
"config": { "text": { "mode": "fixed", "fixed": "" } } "config": { "text": { "mode": "fixed", "fixed": "" } }
@@ -274,122 +274,122 @@
{ {
"name": "Line Overflow", "name": "Line Overflow",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_overflow}}, "left": 80, "width": 200, "height": 1 }, "placement": { "top": {{y_overflow}}, "left": 10, "width": 380, "height": 1 },
"background": { "color": { "fixed": "#e54343" } }, "background": { "color": { "fixed": "#e54343" } },
"border": { "color": { "fixed": "#e54343" }, "width": 0 } "border": { "color": { "fixed": "#e54343" }, "width": 0 }
}, },
{ {
"name": "Line HighSafety", "name": "Line HighSafety",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_highSafety}}, "left": 80, "width": 200, "height": 1 }, "placement": { "top": {{y_highSafety}}, "left": 10, "width": 380, "height": 1 },
"background": { "color": { "fixed": "#f2a543" } }, "background": { "color": { "fixed": "#f2a543" } },
"border": { "color": { "fixed": "#f2a543" }, "width": 0 } "border": { "color": { "fixed": "#f2a543" }, "width": 0 }
}, },
{ {
"name": "Line Inflow", "name": "Line Inflow",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_inflow}}, "left": 80, "width": 200, "height": 1 }, "placement": { "top": {{y_inflow}}, "left": 10, "width": 380, "height": 1 },
"background": { "color": { "fixed": "#5fb37a" } }, "background": { "color": { "fixed": "#5fb37a" } },
"border": { "color": { "fixed": "#5fb37a" }, "width": 0 } "border": { "color": { "fixed": "#5fb37a" }, "width": 0 }
}, },
{ {
"name": "Line DryRun", "name": "Line DryRun",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_dryRun}}, "left": 80, "width": 200, "height": 1 }, "placement": { "top": {{y_dryRun}}, "left": 10, "width": 380, "height": 1 },
"background": { "color": { "fixed": "#5b9bd5" } }, "background": { "color": { "fixed": "#5b9bd5" } },
"border": { "color": { "fixed": "#5b9bd5" }, "width": 0 } "border": { "color": { "fixed": "#5b9bd5" }, "width": 0 }
}, },
{ {
"name": "Line Outflow", "name": "Line Outflow",
"type": "rectangle", "type": "rectangle",
"placement": { "top": {{y_outflow}}, "left": 80, "width": 200, "height": 1 }, "placement": { "top": {{y_outflow}}, "left": 10, "width": 380, "height": 1 },
"background": { "color": { "fixed": "#bfbfbf" } }, "background": { "color": { "fixed": "#bfbfbf" } },
"border": { "color": { "fixed": "#bfbfbf" }, "width": 0 } "border": { "color": { "fixed": "#bfbfbf" }, "width": 0 }
}, },
{ {
"name": "Label Overflow Name", "name": "Label Overflow Name",
"type": "text", "type": "text",
"placement": { "top": {{ty_overflow}}, "left": 4, "width": 76, "height": 16 }, "placement": { "top": {{ty_overflow}}, "left": 180, "width": 140, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "overflowLevel" }, "color": { "fixed": "#e54343" }, "size": 11, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 11, "align": "right", "valign": "middle" }
}, },
{ {
"name": "Label HighSafety Name", "name": "Label HighSafety Name",
"type": "text", "type": "text",
"placement": { "top": {{ty_highSafety}}, "left": 0, "width": 80, "height": 16 }, "placement": { "top": {{ty_highSafety}}, "left": 180, "width": 140, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "highSafe" }, "color": { "fixed": "#f2a543" }, "size": 11, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "highSafety" }, "color": { "fixed": "#cf7e20" }, "size": 11, "align": "right", "valign": "middle" }
}, },
{ {
"name": "Label Inflow Name", "name": "Label Inflow Name",
"type": "text", "type": "text",
"placement": { "top": {{ty_inflow}}, "left": 4, "width": 76, "height": 16 }, "placement": { "top": {{ty_inflow}}, "left": 180, "width": 140, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "inflowLevel" }, "color": { "fixed": "#5fb37a" }, "size": 11, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 11, "align": "right", "valign": "middle" }
}, },
{ {
"name": "Label DryRun Name", "name": "Label DryRun Name",
"type": "text", "type": "text",
"placement": { "top": {{ty_dryRun}}, "left": 4, "width": 76, "height": 16 }, "placement": { "top": {{ty_dryRun}}, "left": 180, "width": 140, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "dryRunLevel" }, "color": { "fixed": "#5b9bd5" }, "size": 11, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 11, "align": "right", "valign": "middle" }
}, },
{ {
"name": "Label Outflow Name", "name": "Label Outflow Name",
"type": "text", "type": "text",
"placement": { "top": {{ty_outflow}}, "left": 4, "width": 76, "height": 16 }, "placement": { "top": {{ty_outflow}}, "left": 180, "width": 140, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "outflowLevel" }, "color": { "fixed": "#bfbfbf" }, "size": 11, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 11, "align": "right", "valign": "middle" }
}, },
{ {
"name": "Value Overflow", "name": "Value Overflow",
"type": "metric-value", "type": "metric-value",
"placement": { "top": {{ty_overflow}}, "left": 286, "width": 90, "height": 16 }, "placement": { "top": {{ty_overflow}}, "left": 323, "width": 65, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "overflowLevel" }, "color": { "fixed": "#e54343" }, "size": 11, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 11, "align": "left", "valign": "middle" }
}, },
{ {
"name": "Value HighSafety", "name": "Value HighSafety",
"type": "metric-value", "type": "metric-value",
"placement": { "top": {{ty_highSafety}}, "left": 286, "width": 90, "height": 16 }, "placement": { "top": {{ty_highSafety}}, "left": 323, "width": 65, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "highVolumeSafetyLevel" }, "color": { "fixed": "#f2a543" }, "size": 11, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "highVolumeSafetyLevel" }, "color": { "fixed": "#cf7e20" }, "size": 11, "align": "left", "valign": "middle" }
}, },
{ {
"name": "Value Inflow", "name": "Value Inflow",
"type": "metric-value", "type": "metric-value",
"placement": { "top": {{ty_inflow}}, "left": 286, "width": 90, "height": 16 }, "placement": { "top": {{ty_inflow}}, "left": 323, "width": 65, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "inflowLevel" }, "color": { "fixed": "#5fb37a" }, "size": 11, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 11, "align": "left", "valign": "middle" }
}, },
{ {
"name": "Value DryRun", "name": "Value DryRun",
"type": "metric-value", "type": "metric-value",
"placement": { "top": {{ty_dryRun}}, "left": 286, "width": 90, "height": 16 }, "placement": { "top": {{ty_dryRun}}, "left": 323, "width": 65, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "dryRunLevel" }, "color": { "fixed": "#5b9bd5" }, "size": 11, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 11, "align": "left", "valign": "middle" }
}, },
{ {
"name": "Value Outflow", "name": "Value Outflow",
"type": "metric-value", "type": "metric-value",
"placement": { "top": {{ty_outflow}}, "left": 286, "width": 90, "height": 16 }, "placement": { "top": {{ty_outflow}}, "left": 323, "width": 65, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "outflowLevel" }, "color": { "fixed": "#bfbfbf" }, "size": 11, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 11, "align": "left", "valign": "middle" }
}, },
{ {
"name": "Header Rim", "name": "Header Rim",
"type": "text", "type": "text",
"placement": { "top": 2, "left": 80, "width": 200, "height": 16 }, "placement": { "top": 2, "left": 10, "width": 380, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "rim ({{heightBasin}} m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "rim ({{heightBasin}} m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" }
@@ -397,7 +397,7 @@
{ {
"name": "Footer Floor", "name": "Footer Floor",
"type": "text", "type": "text",
"placement": { "top": 542, "left": 80, "width": 200, "height": 16 }, "placement": { "top": 542, "left": 10, "width": 380, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "floor (0.00 m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "floor (0.00 m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" }