patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
121 lines (118 loc) • 4.38 kB
HTML
<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="dropdownKebabRight1" 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">
Event One
<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.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.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.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.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>