Gauge

<% 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}) 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",
        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']
}) %>