<% data = [
  {
    name: 'Name',
    value: 45,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-default",
  chart_data: data,
}) %>

<% data = [
  {
    name: 'Participants',
    value: 84,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-disable-animation",
  chart_data: data,
  disable_animation: true,
}) %>

<% data = [
  {
    name: 'Score',
    value: 780,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-title",
  chart_data: data,
  min: 300,
  max: 850,
  title: "Credit Score",
}) %>

<% data1 = [
  {
    name: 'Data Used',
    value: 32,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-units1",
  chart_data: data1,
  title: "Data Usage",
  suffix: "GB"
}) %>

<% data2 = [
  {
    name: 'Sales to Date',
    value: 65,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-units2",
  chart_data: data2,
  title: "Sales Goal",
  prefix: "$",
  suffix: "k",

}) %>

<% data = [
  {
    name: 'Capacity',
    value: 75,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "full-circle",
  chart_data: data,
  full_circle: true,
  title: "Seating Capacity",
  suffix: "%"
}) %>

<% data = [
  {
    name: 'Rating',
    value: 4.5,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-min-max",
  chart_data: data,
  min: 0,
  max: 5,
  show_labels: true,
  title: "Product Rating"
}) %>

<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
      <%= pb_rails("gauge", props: {
        id: "gauge-sizing4",
        chart_data: [{ name: "Point 1", value: 100 }],
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
      <%= pb_rails("gauge", props: {
        id: "gauge-sizing3",
        chart_data: [{ name: "Point 2", value: 75 }],
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
      <%= pb_rails("gauge", props: {
        id: "gauge-sizing2",
        chart_data: [{ name: "Point 3", value: 50 }],
      }) %>
  <% end %>
  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
      <%= pb_rails("gauge", props: {
        id: "gauge-sizing1",
        height: '100%',
        chart_data: [{ name: "Point 4", value: 25 }],
      }) %>
  <% end %>
<% end %>

<%= pb_rails("gauge", props: {
  id: "gauge-height-px",
  chart_data: [{ name: "Pixels", value: 400 }],
  height: '400',
  title: "Fixed Height in Pixels",
  suffix: "px"
}) %>

<%= pb_rails("gauge", props: {
  id: "gauge-height-percent",
  chart_data: [{ name: "Percentage", value: 45 }],
  height: '45%',
  title: "Height as Percentage of Width",
  suffix: "%"
}) %>

<% data = [
  {
    name: 'Name',
    value: 67,
  }
]%>

<%= pb_rails("gauge", props: {
  id: "gauge-colors",
  chart_data: data,
  colors: ['data-7']
}) %>

<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
      <%= pb_rails("flex", props: {align: "stretch"}) do %>
        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
            <%= pb_rails("title", props: {size: 1, text: "39"})%>
            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
          <% end %>
          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
        <%end %>
        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
          <%= pb_rails("flex", props: {wrap: true}) do %>
            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
              <%= pb_rails("gauge", props: {
                chart_data: [{ name: "Name", value: 10 }],
                disable_animation: true,
                height: '150',
                id: "gauge-complex",
                suffix: "%"
              }) %>
            <% end %>
          <% end %>
        <% end %>
      <%end %>
    <% end %>
  <% end %>
<% end %>