<div class="list-group list-view-pf">
  <div class="list-group-item list-view-pf-stacked">
    <div class="list-view-pf-actions">
      <button class="btn btn-default">Action</button>
      {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight15" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
    </div>
    <div class="list-view-pf-main-info">
      <div class="list-view-pf-left">
        <span class="fa fa-plane list-view-pf-icon-lg"></span>
      </div>
      <div class="list-view-pf-body">
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            This is EVENT One that is with very LONG and should not overflow and push other elements out of the bounding box.
            <small>Feb 23, 2015 12:32 am</small>
          </div>
          <div class="list-group-item-text">
            The following snippet of text is <a href="#">rendered as link text</a>.
          </div>
        </div>
        <div class="list-view-pf-additional-info">
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="{{include.id1}}"></span>
          </div>
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="{{include.id2}}"></span>
          </div>
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="{{include.id3}}"></span>
          </div>
          <div class="list-view-pf-additional-info-item list-view-pf-additional-info-item-donut-chart">
              <span id="{{include.id4}}"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // Donut Charts
  var c3ChartDefaults = $().c3ChartDefaults();
  var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#{{include.id1}}';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 34],
      ["Available", 86]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  var donutChartTitle = d3.select("#{{include.id1}}").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);

  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#{{include.id2}}';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 21],
      ["Available", 79]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  donutChartTitle = d3.select("#{{include.id2}}").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);

  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#{{include.id3}}';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 14],
      ["Available", 86]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  donutChartTitle = d3.select("#{{include.id3}}").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);

  customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
  customDonutChartConfig.size.height = 71;
  customDonutChartConfig.size.width = 60;
  customDonutChartConfig.donut.width = 5;
  customDonutChartConfig.bindto = '#{{include.id4}}';
  customDonutChartConfig.data = {
    type: "donut",
    columns: [
      ["Used", 25],
      ["Available", 75]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  c3.generate(customDonutChartConfig);
  donutChartTitle = d3.select("#{{include.id4}}").select('text.c3-chart-arcs-title');
  donutChartTitle.text("");
  donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
</script>