<%
  row = cell(:elements, :row).new
  block = cell(:elements, :block).new(class: 'xs-12 sm-12 md-12')
  code = cell(:elements, :code).new
%>

<!-- PRESENTATION -->
<%=raw row.open %>

  <%=raw block.open %>

    <%=raw cell(:elements, :title).new(label: 'Cells Charts: Bar Vertical') %>

    <p>A Verticalbar is a bar chart with a vertical direction.</p>

  <%=raw block.close %>

<%=raw row.close %>
<!-- / PRESENTATION -->

<hr>
<%=raw cell(:elements, :title).new(label: 'Normal Bar Vertical', size: 3) %>

<% example_row = cell(:elements, :row).new %>

<%=raw example_row.open %>

  <%=raw block.open %>

    <%=raw cell(:charts, :bar, :vertical).new(
      labels: ['01', '02', '03'],
      datasets: [
        {label: 'Interactions', data: [403, 959, 234]},
        {label: 'Downloads', data: [124, 390, 87]}
      ]
    ) %>
    
  <%=raw block.close %>

<%=raw example_row.close %>

<!-- CODE SECTION -->
<%=raw row.open %>

<%=raw block.open %>

<%=raw cell(:elements, :title).new(label: 'Code', size: 6) %>

<%=raw code.open %>

<%= erb_open_tag %>=raw cell(:charts, :bar, :vertical).new(
  labels: ['01', '02', '03'],
  datasets: [
    {label: 'Interactions', data: [403, 959, 234]},
    {label: 'Downloads', data: [124, 390, 87]}
  ]
) <%= erb_close_tag %>

<%=raw code.close %>

<%=raw block.close %>

<%=raw row.close %>
<!-- / CODE SECTION -->
