Broker chart item

  • 648 nem.
    • Byty 603
    • Domy 25
    • Pozemky 12
    • Komerční 7
    • Ostatní 7 
  •         {% include "@Components/items/broker-chart-item/broker-chart-item.twig" with {
    props: {
      count:"648",
      unit:"nem.",
      items:[{
          title:"Byty",
          count:"603"
        },{
          title:"Domy",
          count:"25"
        },{
          title:"Pozemky",
          count:"12"
        },{
          title:"Komerční",
          count:"7"
        },{
          title:"Ostatní",
          count:"7"
      }]
    }
  }
%}

      
  •           <div class="i-broker-chart" data-chart-data="603,25,12,7,7" data-chart-labels="Byty,Domy,Pozemky,Komerční,Ostatní">
  <div class="i-broker-chart__chart">
    <canvas class="i-broker-chart__canvas"></canvas>
    <div class="i-broker-chart__total">
      <span class="base-h1 i-broker-chart__total-count">648</span>
      <span class="i-broker-chart__unit base-h4">nem.</span>
    </div>
  </div>

  <ul class="i-broker-chart__legend">
          <li class="i-broker-chart__legend-item">
        <span class="i-broker-chart__legend-item-title">Byty</span>
        <span class="i-broker-chart__legend-item-count">603</span>
      </li>
          <li class="i-broker-chart__legend-item">
        <span class="i-broker-chart__legend-item-title">Domy</span>
        <span class="i-broker-chart__legend-item-count">25</span>
      </li>
          <li class="i-broker-chart__legend-item">
        <span class="i-broker-chart__legend-item-title">Pozemky</span>
        <span class="i-broker-chart__legend-item-count">12</span>
      </li>
          <li class="i-broker-chart__legend-item">
        <span class="i-broker-chart__legend-item-title">Komerční</span>
        <span class="i-broker-chart__legend-item-count">7</span>
      </li>
          <li class="i-broker-chart__legend-item">
        <span class="i-broker-chart__legend-item-title">Ostatní</span>
        <span class="i-broker-chart__legend-item-count">7</span>
      </li>
      </ul>
</div>

Schema 

    {
  "props": {
    "count":{
      "type": "number",
      "description": "Total count of reality"
    },
    "unit":{
      "type": "string",
      "description": "Unit of count"
    },
    "items":[{
      "type": "array-of-objects",
        "title":{
          "type": "string",
          "description": "Title of item"
        },
        "count":{
          "type": "number",
          "description": "Count of reality in item"
        }
    }]
  }
}