{#-----------------constants---------------------------#}
{% set titleHeight = 48 %}
{% set textHeight = 24 %}
{% set textWidth = 128 %}
{% set gap = 12 %}
{% set iconSize = 48 %}
{% set groupGap = 24 %}

{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, 'tx-..-(\d+)-value') %}
{% set n = values|length %}
{% set groupHeight = [iconSize, textHeight*3+gap]|max %}
{% set height = titleHeight + 3*gap + n*(groupHeight+gap) %}
{% set width  = (iconSize+gap)*10 + gap + iconSize + gap + textWidth %}



{#-------------svg starts here-------------------------#}
<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
	<g id="layered-gauge-jinja-v1--family">
		<g id="lines">
          {% for i in range(n) %}
          	{% set top = titleHeight+2*gap + i*(groupHeight+gap) %}
          	{% for j in range(10) %}
	          	{% set chari = 'abcdefghij'[i] %}
          		{% set charj = 'abcdefghij'[j] %}
          		{# add gray icon in all positions #}
          		<g id="ic-cc-{{chari}}{{charj}}" transform="translate({{j*(iconSize+gap)}},{{top}})">
          			<path id="rect" d="M 0 0 h {{iconSize}} v {{iconSize}} h -{{iconSize}} Z" fill="#33DE7B" fill-opacity="0.1"/>
          		</g>
          		{# add indexed icon if j within value range  #}
          		{% set roundedValue = 10*((values[i]/10)|round(0)) %}
          		{% if  roundedValue/10 >= j+1 %}
          		{{roundedValue}}
          		
          		<g id="ic-cc-{{i+1}}{{charj}}" transform="translate({{j*(iconSize+gap)}},{{top}})">
          			<path id="rect" d="M 0 0 h {{iconSize}} v {{iconSize}} h -{{iconSize}} Z" fill="#33DE7B" fill-opacity="0.1"/>
          		</g>
          		{% endif %}
          	{% endfor %}
          {% endfor %}
		</g>
		{% for i in range(n) %}
        	{% set top = titleHeight+2*gap + i*(groupHeight+gap) %}
			<g id="tx-cc-{{i+1}}-value" transform="translate({{10*(iconSize+gap)+gap}}, {{top}})">
				<path id="rect" fill="#ff000055" d="M 0 0 h {{iconSize}} v {{iconSize}} h -{{iconSize}} Z" />
              			<text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="36" font-weight="bold" letter-spacing="0em"><tspan y="24">Value</tspan></text>
			</g>
          	<g id="tx-lb-{{i+1}}-label" transform="translate({{11*(iconSize+gap)+gap}}, {{top}})">
				<path id="rect" fill="#ff000055" d="M 0 0 h {{textWidth}} v {{textHeight}} h -{{textWidth}} Z" />
			</g>
          	<g id="tx-lt-{{i+1}}-label2" transform="translate({{11*(iconSize+gap)+gap}}, {{top+textHeight}})">
				<path id="rect" fill="#ff000055" d="M 0 0 h {{textWidth}} v {{2*textHeight}} h -{{textWidth}} Z" />
              			<text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="12" font-weight="thin" letter-spacing="0em"><tspan></tspan></text>
			</g>

      	{% endfor %}		
		{# title #}
		<g id="tx-cb-title" transform="translate({{width/2}}, 0)">
			<path id="rect_title" fill="#ff000055" d="M -300 0 h 600 v {{titleHeight}} h -600 Z" />
			<text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="36" font-weight="bold" letter-spacing="0em"><tspan y="24">Title</tspan></text>
		</g>
      </g>
</svg>

{#
Test Data

{
    "tx-xx-title": {"text": "Literacy rates by states"},
  "tx-xx-1-value": {"text": "98%"},
  "tx-xx-1-label": {"text":"Kerala"},
  "tx-xx-1-label2": {"text":"English is primary language of education"},
  "tx-xx-2-value": {"text": "88%"},
  "tx-xx-2-label": {"text":"Delhi"},
  "tx-xx-2-label2": {"text":"Capital city "},
  "tx-xx-3-value": {"text": "43%"},
"ic-xx-1a": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-aa": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1b": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ab": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1c": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ac": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1d": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ad": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1e": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ae": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1f": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-af": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1g": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ag": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1h": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ah": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1i": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ai": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-1j": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-aj": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2a": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ba": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2b": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bb": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2c": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bc": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2d": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bd": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2e": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-be": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2f": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bf": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2g": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bg": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2h": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bh": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2i": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bi": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-2j": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-bj": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3a": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ca": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3b": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-cb": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3c": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-cc": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3d": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-cd": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3e": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ce": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3f": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-cf": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3g": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-cg": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3h": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ch": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3i": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-ci": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-3j": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-cj": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4a": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-da": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4b": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-db": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4c": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-dc": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4d": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-dd": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4e": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-de": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4f": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-df": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4g": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-dg": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4h": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-dh": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4i": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-di": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-4j": {"icon": {"file": "user2", "name": "body", "list": "custom"}},
"ic-xx-dj": {"icon": {"file": "user2", "name": "body", "list": "custom"}}

}
#}