{#-----------------constants---------------------------#}
{% set barGap = 24 %}
{% set barThickness = 96 %}
{% set barToValue = 6 %}
{% set arrowHead = 6 %}
{% set graphPadding = 48 %}

{#------calculate values from template elements--------#}
{% set values = elementsToValues(elements, '^tx-..-([1-9]\d*)-value$') %}
{% set n = values|length %}

{% set ns = namespace(cols=0, rows=1) %}
{% for k, v in elements %}
  {% set index = regex_group('^tx-..-([1-9]\d*)-value$', k) %}
  {% if index != null %}
    {% set i = index | int %}
    {% set ns.rows = [i % 10, ns.rows] | max %}
    {% set ns.cols = [i // 10, ns.cols] | max %}
  {% endif %}
{% endfor %}

{% set nbRows = ns.rows %}
{% set nbCols = ns.cols + 1 %}

{% set max_ns = namespace(maxValue = 1.0, sum = 0.0) %}
{% for i in range(nbCols) %}
  {% set max_ns.sum = 0.0 %}
	{% for j in range(nbRows) %}  			
    {% set index = i * 10 + j + 1 %}
	{% set value = valueSourceToValue(elements['tx-xx-' ~ index ~ '-value']) or 0.0 %}
    {% set max_ns.sum = max_ns.sum + value %}
  {% endfor %}
  {% set max_ns.maxValue = [max_ns.sum, max_ns.maxValue] | max %}
{% endfor %}

{% set maxValue = max_ns.maxValue %}

{% set height = 240 %}
{% set width  = barGap + (barThickness + barGap) * nbCols %}

{% set denominator = 100.0 %}
{% if 1.0 >= maxValue %}
  {% set denominator = 1.0 %}
{% endif %}
{% if maxValue > 100.0  %}
  {% set denominator = maxValue %}
{% endif %}

<svg xmlns="http://www.w3.org/2000/svg" width="{{width+2*graphPadding}}" height="{{height+2*graphPadding}}">
  <g id="stacked-bar-family" data-in="{{inValue}}">

    <path id="tx-ct-title" data-entity-classes="Title" transform="translate({{width/2 + graphPadding}}, {{height + 60 + graphPadding}})" fill="#ff00001a" d="M-200 0 h 400 v 48 h -400 Z"></path>
    <path id="tx-cb-y-label" data-entity-classes="Chart Axis" transform="translate({{graphPadding}}, {{graphPadding}})" fill="#ff00001a" d="M-120 -12 h240 v -48 h-240 Z"></path>
    <path id="tx-lc-x-label" data-entity-classes="Chart Axis" transform="translate({{width+graphPadding}}, {{height+graphPadding}})" fill="#ff00001a" d="M12 -24 h120 v 48 h-120 Z"></path>

  	{# bars #}
    {% set bar_ys = fill_array(nbCols, height) %}
    {% for j in range(nbRows) %}  			
  		<g id="g-{{j+1}}">
        {% for i in range(nbCols) %}
          {% set x = barGap + (barGap + barThickness) * i %}
          {% set index = i * 10 + j + 1 %}
          {% set value = valueSourceToValue(elements['tx-xx-' ~ index ~ '-value']) or 0.0 %}
          {% set barHeight = height * value / denominator | round(3) %}
          {% set barY = bar_ys[i] - barHeight %}
          <rect  data-entity-classes="FilledPart Chart" x="{{x+graphPadding}}" y="{{barY+graphPadding}}" width="{{barThickness}}" height="{{barHeight}}" fill="{{fillColor(j)}}" stroke="{{strokeColor(j)}}" />
          {{ update_array(bar_ys, i, barY) }}
		    {% endfor %}
      </g>
  	{% endfor %}


  	{# values #}
    {% set bar_ys = fill_array(nbCols, height) %}
    {% for j in range(nbRows) %}  			
  		<g id="g-{{j+1}}">
        {% for i in range(nbCols) %}
          {% set x = barGap + (barGap + barThickness) * i %}
	        {% set labelIndex = i * 10 + j + 1 %}
          {% set value = valueSourceToValue(elements['tx-xx-' ~ labelIndex ~ '-value']) or 0.0 %}
          {% set barHeight = height * value / denominator | round(3) %}
          {% set barY = bar_ys[i] - barHeight %}
          <rect id="tx-cc-{{labelIndex}}-value" data-entity-classes="ChartValue Chart" x="{{x+graphPadding}}" y="{{barY+graphPadding}}" width="{{barThickness}}" height="{{barHeight}}" fill="{{fillColor(j)}}" stroke="{{strokeColor(j)}}" />
          {{ update_array(bar_ys, i, barY) }}
		    {% endfor %}
      </g>
  	{% endfor %}
  
  	{# labels #}
  	{%for i in range(nbCols) %}
      {% set index = i * 10 %}
      {% set textWidth = barGap + barThickness - 2 %}
      {% set x = barGap + barThickness/2 + textWidth/2 + (barGap + barThickness) * i %}
      <g id="tx-cc-{{index+1}}-label" data-entity-classes="AxisValue Chart" transform="translate({{x-textWidth+graphPadding}}, {{height + barToValue + graphPadding}})">
        <path fill="#ff00001a" d="M 0 0 h {{textWidth}} v 48 h {{0-textWidth}} Z" />
        <text id="Label" fill="#484848" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="15" font-weight="thin" letter-spacing="0em"/>
      </g>
  	{% endfor %}

    {# legend #}
  	{%for j in range(nbRows) %}
      {% set index = j * 10 %}
      {% set y = (nbRows - j - 1) * 48 %}
      <g id="legend-{{j+1}}" data-entity-classes="Chart Legend" transform="translate({{width + 24 + graphPadding}}, {{y -24 + graphPadding}})">
        <path  d="M 0 0 h 24 v 24 h -24 Z" fill="{{fillColor(j)}}" stroke="{{strokeColor(j)}}" />
      </g>
  	{% endfor %}

    {%for j in range(nbRows) %}
        {% set index = j * 10 %}
        {% set y = (nbRows - j - 1) * 48 %}
	    <path id="tx-lc-{{j+1}}-legend" data-entity-classes="Chart Legend" transform="translate({{width+60+graphPadding}}, {{y-12+graphPadding}})" fill="#ff00001a" d="M0 -24 h180 v 48 h-180 Z"></path>
  	{% endfor %}
  
  	{# axes #}
  	<g id="lines" transform="translate({{graphPadding}}, {{graphPadding}})">
      <g id="ar-with-terminator_x">
        <path id="hAxis" data-entity-classes="Chart Axis" marker-end="url(#arrow)" d="M 0 {{height}} L 0 {{0-arrowHead}}" fill="none" stroke="#484848" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" />
      </g>
      <g id="ar-with-terminator_y">
        <path id="vAxis" data-entity-classes="Chart Axis" marker-end="url(#arrow)" d="M 0 {{height}} L {{width+arrowHead}} {{height}}" fill="none" stroke="#484848" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" />
      </g>
	</g>
  </g>
</svg>

{# Test data:
{
  "tx-xx-title": {"text": "Three-Year Revenue Forecast and Growth"},
  "tx-xx-x-label": {"text": "Phase"},
  "tx-xx-y-label": {"text": "Revenue (Thousand Dollars)"},
  "tx-xx-1-label": {"text": "Phase One"},
  "tx-xx-1-value": {"text": "150"},
  "tx-xx-2-value": {"text": "300"},
  "tx-xx-3-value": {"text": "100"},
  "tx-xx-11-label": {"text": "Phase Two"},
  "tx-xx-11-value": {"text": "400"},
  "tx-xx-12-value": {"text": "320"},
  "tx-xx-13-value": {"text": "130"},
  "tx-xx-21-label": {"text": "Phase Three"},
  "tx-xx-21-value": {"text": "200"},
  "tx-xx-22-value": {"text": "400"},
  "tx-xx-23-value": {"text": "600"},
  "tx-xx-1-legend": {"text": "Service Sales"},
  "tx-xx-2-legend": {"text": "App Purchases"},
  "tx-xx-3-legend": {"text": "IP Licensing"}
}
#}