chore(dashboardAPI): center tank via canvas scale constraint + bigger labels
Per Grafana Canvas docs, the correct way to make elements stay centered
and stretch with panel size is to set 'constraint: { horizontal: scale,
vertical: scale }' on every element AND use margin-style placement
(top + bottom + left + right, all as percentages of the panel) instead
of pixel-based 'top + left + width + height'.
This commit:
- Adds 'constraint: scale/scale' to every canvas element.
- Converts all placements to percentage margins. Hardcoded canvas
geometry (tank, zones, threshold lines, header, footer) uses literal
percentages; per-basin geometry (yp_*, ty_*, etc.) is precomputed in
_templateVarsForNode and emitted as percent values from the substitution.
- Adds derived 'zb_*', 'yb_*', 'tyb_*' substitution vars for bottom
margins of zones, lines, and labels respectively.
- Splits name/value labels left/right of tank centre with a visible gap
between them (was touching) and bumps font size 11 -> 14 for readability.
Result: at any panel/viewport size the tank fills the card with equal
left/right margins (~2.5%) and equal top/bottom margins (~5.26%) for
rim/floor captions, no letterboxing or right-side padding.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
@@ -227,14 +227,15 @@
|
||||
"root": {
|
||||
"name": "Basin",
|
||||
"type": "frame",
|
||||
"placement": { "left": 0, "top": 0, "width": 400, "height": 760 },
|
||||
"placement": { "left": 0, "top": 0, "right": 0, "bottom": 0 },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "dark-green" } },
|
||||
"elements": [
|
||||
{
|
||||
"name": "Zone Spill",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": 40, "left": 10, "width": 380, "height": {{h_spill}} },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": 5.26, "left": 2.5, "right": 2.5, "bottom": {{zb_spill}} },
|
||||
"background": { "color": { "fixed": "rgba(229, 67, 67, 0.18)" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "" } }
|
||||
@@ -242,7 +243,8 @@
|
||||
{
|
||||
"name": "Zone HighSafety",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_overflow}}, "left": 10, "width": 380, "height": {{h_highSafety}} },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_overflow}}, "left": 2.5, "right": 2.5, "bottom": {{zb_highSafety}} },
|
||||
"background": { "color": { "fixed": "rgba(242, 165, 67, 0.16)" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "" } }
|
||||
@@ -250,7 +252,8 @@
|
||||
{
|
||||
"name": "Zone Operating",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_highSafety}}, "left": 10, "width": 380, "height": {{h_operating}} },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_highSafety}}, "left": 2.5, "right": 2.5, "bottom": {{zb_operating}} },
|
||||
"background": { "color": { "fixed": "rgba(95, 179, 122, 0.14)" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "" } }
|
||||
@@ -258,7 +261,8 @@
|
||||
{
|
||||
"name": "Zone Dead",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_outflow}}, "left": 10, "width": 380, "height": {{h_dead}} },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_outflow}}, "left": 2.5, "right": 2.5, "bottom": {{zb_dead}} },
|
||||
"background": { "color": { "fixed": "rgba(128, 128, 128, 0.20)" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "" } }
|
||||
@@ -266,7 +270,8 @@
|
||||
{
|
||||
"name": "Tank Outline",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": 40, "left": 10, "width": 380, "height": 680 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": 5.26, "left": 2.5, "right": 2.5, "bottom": 5.27 },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "#8a8a8a" }, "width": 2 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "" } }
|
||||
@@ -274,122 +279,138 @@
|
||||
{
|
||||
"name": "Line Overflow",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_overflow}}, "left": 10, "width": 380, "height": 1 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_overflow}}, "left": 2.5, "right": 2.5, "bottom": {{yb_overflow}} },
|
||||
"background": { "color": { "fixed": "#e54343" } },
|
||||
"border": { "color": { "fixed": "#e54343" }, "width": 0 }
|
||||
},
|
||||
{
|
||||
"name": "Line HighSafety",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_highSafety}}, "left": 10, "width": 380, "height": 1 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_highSafety}}, "left": 2.5, "right": 2.5, "bottom": {{yb_highSafety}} },
|
||||
"background": { "color": { "fixed": "#f2a543" } },
|
||||
"border": { "color": { "fixed": "#f2a543" }, "width": 0 }
|
||||
},
|
||||
{
|
||||
"name": "Line Inflow",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_inflow}}, "left": 10, "width": 380, "height": 1 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_inflow}}, "left": 2.5, "right": 2.5, "bottom": {{yb_inflow}} },
|
||||
"background": { "color": { "fixed": "#5fb37a" } },
|
||||
"border": { "color": { "fixed": "#5fb37a" }, "width": 0 }
|
||||
},
|
||||
{
|
||||
"name": "Line DryRun",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_dryRun}}, "left": 10, "width": 380, "height": 1 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_dryRun}}, "left": 2.5, "right": 2.5, "bottom": {{yb_dryRun}} },
|
||||
"background": { "color": { "fixed": "#5b9bd5" } },
|
||||
"border": { "color": { "fixed": "#5b9bd5" }, "width": 0 }
|
||||
},
|
||||
{
|
||||
"name": "Line Outflow",
|
||||
"type": "rectangle",
|
||||
"placement": { "top": {{y_outflow}}, "left": 10, "width": 380, "height": 1 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{y_outflow}}, "left": 2.5, "right": 2.5, "bottom": {{yb_outflow}} },
|
||||
"background": { "color": { "fixed": "#bfbfbf" } },
|
||||
"border": { "color": { "fixed": "#bfbfbf" }, "width": 0 }
|
||||
},
|
||||
{
|
||||
"name": "Label Overflow Name",
|
||||
"type": "text",
|
||||
"placement": { "top": {{ty_overflow}}, "left": 115, "width": 95, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_overflow}}, "left": 15, "right": 53, "bottom": {{tyb_overflow}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 11, "align": "right", "valign": "middle" }
|
||||
"config": { "text": { "mode": "fixed", "fixed": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 14, "align": "right", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Label HighSafety Name",
|
||||
"type": "text",
|
||||
"placement": { "top": {{ty_highSafety}}, "left": 115, "width": 95, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_highSafety}}, "left": 15, "right": 53, "bottom": {{tyb_highSafety}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "highSafety" }, "color": { "fixed": "#cf7e20" }, "size": 11, "align": "right", "valign": "middle" }
|
||||
"config": { "text": { "mode": "fixed", "fixed": "highSafety" }, "color": { "fixed": "#cf7e20" }, "size": 14, "align": "right", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Label Inflow Name",
|
||||
"type": "text",
|
||||
"placement": { "top": {{ty_inflow}}, "left": 115, "width": 95, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_inflow}}, "left": 15, "right": 53, "bottom": {{tyb_inflow}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 11, "align": "right", "valign": "middle" }
|
||||
"config": { "text": { "mode": "fixed", "fixed": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 14, "align": "right", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Label DryRun Name",
|
||||
"type": "text",
|
||||
"placement": { "top": {{ty_dryRun}}, "left": 115, "width": 95, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_dryRun}}, "left": 15, "right": 53, "bottom": {{tyb_dryRun}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 11, "align": "right", "valign": "middle" }
|
||||
"config": { "text": { "mode": "fixed", "fixed": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 14, "align": "right", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Label Outflow Name",
|
||||
"type": "text",
|
||||
"placement": { "top": {{ty_outflow}}, "left": 115, "width": 95, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_outflow}}, "left": 15, "right": 53, "bottom": {{tyb_outflow}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 11, "align": "right", "valign": "middle" }
|
||||
"config": { "text": { "mode": "fixed", "fixed": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 14, "align": "right", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Value Overflow",
|
||||
"type": "metric-value",
|
||||
"placement": { "top": {{ty_overflow}}, "left": 215, "width": 80, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_overflow}}, "left": 53, "right": 12, "bottom": {{tyb_overflow}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 11, "align": "left", "valign": "middle" }
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 14, "align": "left", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Value HighSafety",
|
||||
"type": "metric-value",
|
||||
"placement": { "top": {{ty_highSafety}}, "left": 215, "width": 80, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_highSafety}}, "left": 53, "right": 12, "bottom": {{tyb_highSafety}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "highVolumeSafetyLevel" }, "color": { "fixed": "#cf7e20" }, "size": 11, "align": "left", "valign": "middle" }
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "highVolumeSafetyLevel" }, "color": { "fixed": "#cf7e20" }, "size": 14, "align": "left", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Value Inflow",
|
||||
"type": "metric-value",
|
||||
"placement": { "top": {{ty_inflow}}, "left": 215, "width": 80, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_inflow}}, "left": 53, "right": 12, "bottom": {{tyb_inflow}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 11, "align": "left", "valign": "middle" }
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 14, "align": "left", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Value DryRun",
|
||||
"type": "metric-value",
|
||||
"placement": { "top": {{ty_dryRun}}, "left": 215, "width": 80, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_dryRun}}, "left": 53, "right": 12, "bottom": {{tyb_dryRun}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 11, "align": "left", "valign": "middle" }
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 14, "align": "left", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Value Outflow",
|
||||
"type": "metric-value",
|
||||
"placement": { "top": {{ty_outflow}}, "left": 215, "width": 80, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": {{ty_outflow}}, "left": 53, "right": 12, "bottom": {{tyb_outflow}} },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 11, "align": "left", "valign": "middle" }
|
||||
"config": { "text": { "mode": "field", "fixed": "", "field": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 14, "align": "left", "valign": "middle" }
|
||||
},
|
||||
{
|
||||
"name": "Header Rim",
|
||||
"type": "text",
|
||||
"placement": { "top": 20, "left": 10, "width": 380, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": 2.63, "left": 2.5, "right": 2.5, "bottom": 95.26 },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "rim ({{heightBasin}} m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" }
|
||||
@@ -397,7 +418,8 @@
|
||||
{
|
||||
"name": "Footer Floor",
|
||||
"type": "text",
|
||||
"placement": { "top": 724, "left": 10, "width": 380, "height": 16 },
|
||||
"constraint": { "horizontal": "scale", "vertical": "scale" },
|
||||
"placement": { "top": 95.26, "left": 2.5, "right": 2.5, "bottom": 2.63 },
|
||||
"background": { "color": { "fixed": "transparent" } },
|
||||
"border": { "color": { "fixed": "transparent" }, "width": 0 },
|
||||
"config": { "text": { "mode": "fixed", "fixed": "floor (0.00 m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" }
|
||||
|
||||
Reference in New Issue
Block a user