Review chart item

  • 72% 203

    Pozitivní

    203 
  •         {% include "@Components/items/review-chart-item/review-chart-item.twig" with {
    props: {
      percent: "72",
      count: "203",
      variant: "positive",
      title: "Pozitivní",
      link: {
        title: "Read more",
        href: "https://www.google.com/",
        color: "primary"
      }
    }
  }
%}

      
  •           <div class="i-review-chart --positive" data-chart-data=",,,," data-chart-labels=",,,,">
  <div class="i-review-chart__chart">
    <canvas class="i-review-chart__canvas-assistant"></canvas>
    <canvas class="i-review-chart__canvas"></canvas>
    <div class="i-review-chart__total">
      <span class="i-review-chart__percent base-h1">72%</span>
      <span class="base-h4 i-review-chart__total-count">203</span>
    </div>
  </div>

  <div class="i-review-chart__legend">
    <h3 class="base-h3 i-review-chart__heading">Pozitivní</h3>
    <span class="base-h4 i-review-chart__legend-total-count">203</span>
  </div>
</div>

Schema 

    {
  "props": {
    "percent": {
      "type": "string",
      "description": "Percent of Item"
    },
    "count": {
      "type": "string",
      "description": "Count of responses"
    },
    "variant": {
      "type": "string",
      "description": "Variant of item: positive | neutral(default) | negative"
    },
    "title": {
      "type": "string",
      "description": "Name of item"
    },
    "link": {
      "type": "object",
      "description": "All props are documented by the component `link`."
    }
  }
}