{{#> layout}}
{{! Teal wash behind the plot area (Figma "Bar Back Total") }}
{{! Factor bar: Figma anchors the gradient to each bar's own width, so bounding-box
units reproduce all nine bars from one definition. }}
{{! Total bar: Figma runs the gradient 194 % of the fill height up from the foot of
the bar, i.e. from bounding-box y = 1 to y = 1 − 1.94, so the visible tip keeps
the same tone at every score. }}
{{! Shadow of the white 0 % baseline (offset right, soft blur) }}
{{! Same treatment under the foot of the total bar }}
{{! ===================== Plot area wash ===================== }}
{{! ===================== Raw-score boxes ===================== }}
{{#each items as |item|}}
{{item.mark}}
{{/each}}
{{! ===================== Gridlines (10 % … 100 %) ===================== }}
{{! ===================== Bar tracks ===================== }}
{{#each items as |item|}}
{{bar 400 16 (object tl=0 bl=0 tr=2 br=2) (toRad 0) fill="black" fill-opacity="0.04"}}
{{/each}}
{{! ===================== Bars + percentage inside the tip ===================== }}
{{#each items as |item|}}
{{#if item.width}}{{bar item.width 16 (object tl=0 bl=0 tr=2 br=2) (toRad 0) fill="url(#jssBar)"}}{{/if}}
٪ {{item.pct}}
{{/each}}
{{! ===================== Factor names ===================== }}
{{#each items as |item|}}
{{item.title}}
{{/each}}
{{! ===================== White shadowed 0 % baseline ===================== }}
{{! ===================== Axis labels ===================== }}
0
٪ 50
٪ 100
نمره خام
از 20
{{! ===================== Total score column ===================== }}
{{bar 18 350 (object tl=2 tr=2 bl=0 br=0) (toRad 0) fill="#F1F5F9"}}
{{#if total.height}}
{{bar 18 total.height (object tl=2 tr=2 bl=0 br=0) (toRad 0) fill="url(#jssTotal)"}}
{{/if}}
{{! Readout travelling with the tip of the bar }}
٪ {{total.pct}}
{{total.mark}} از {{total.max}}
{{! Column title, reading bottom-up along the bar }}
نمره کل رضایت شغلی
{{! Foot of the total bar }}
٪ 100
{{/layout}}