Skip to content

Instantly share code, notes, and snippets.

@andresgalante

andresgalante/clement.html

Last active April 27, 2018 17:19
Show Gist options
  • Save andresgalante/ff770cb15200401dea225bc8521649fe to your computer and use it in GitHub Desktop.
Save andresgalante/ff770cb15200401dea225bc8521649fe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
clement.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Patternfly Dashboard</title>
<!-- PatternFly Styles -->
<link rel="stylesheet" href="css/mystyles.css">
<!-- JS -->
<script src="node_modules/patternfly/node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/patternfly/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/patternfly/dist/js/patternfly.min.js"></script>
<!-- C3, D3 - Charting Libraries -->
<script src="node_modules/patternfly/node_modules/d3/d3.min.js"></script>
<script src="node_modules/patternfly/node_modules/c3/c3.min.js"></script>
<script src="node_modules/patternfly/node_modules/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
<script>
$(function () {
// matchHeight the contents of each .card-pf and then the .card-pf itself
$(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
$(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
// initialize tooltips
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body class="cards-pf">
<!-- PatternFly Horizontal Nav -->
<nav class="navbar navbar-default navbar-pf" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="node_modules/patternfly/dist/img/brand.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse-1">
</div>
</nav>
<div class="container-fluid container-cards-pf">
<div class="row row-cards-pf">
<div class="col-xs-12 col-md-8">
<h1>Name of the dude</h1>
<p><strong>Age:</strong> 24 years | <strong>Gender:</strong> Male | <strong>Weight:</strong> 75kg | <strong>Size:</strong> 1,8mts</p>
</div>
<div class="col-xs-12 col-md-8">
<!-- Utilization Trend Card -->
<div class="card-pf card-pf-utilization">
<div class="card-pf-heading">
<p class="card-pf-heading-details">Last 30 days</p>
<h2 class="card-pf-title">
Patient's current situation
</h2>
</div>
<div class="card-pf-body">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<h3 class="card-pf-subtitle">Pressure</h3>
<p class="card-pf-utilization-details">
<span class="card-pf-utilization-card-details-count">120/80</span>
<span class="card-pf-utilization-card-details-description">
<span class="card-pf-utilization-card-details-line-1">Maximum today</span>
<span class="card-pf-utilization-card-details-line-2">was 130/90</span>
</span>
</p>
<div id="chart-pf-donut-7"></div>
<div class="chart-pf-sparkline" id="chart-pf-sparkline-7"></div>
<script>
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
donutConfig.bindto = '#chart-pf-donut-7';
donutConfig.color = {
pattern: ["#3f9c35", "#D1D1D1"]
};
donutConfig.data = {
type: "donut",
columns: [
["Used", 41],
["Available", 59]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig.tooltip = {
contents: function (d) {
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
'</span>';
}
};
var chart3 = c3.generate(donutConfig);
var donutChartTitle = d3.select("#chart-pf-donut-7").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("120/80").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
donutChartTitle.insert('tspan').text("Current").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
sparklineConfig.bindto = '#chart-pf-sparkline-7';
sparklineConfig.data = {
columns: [
['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
],
type: 'area'
};
var chart4 = c3.generate(sparklineConfig);
</script>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<h3 class="card-pf-subtitle">Temperature</h3>
<p class="card-pf-utilization-details">
<span class="card-pf-utilization-card-details-count">37ºC</span>
<span class="card-pf-utilization-card-details-description">
<span class="card-pf-utilization-card-details-line-1">Maximum today</span>
<span class="card-pf-utilization-card-details-line-2">was 38ºC</span>
</span>
</p>
<div id="chart-pf-donut-8"></div>
<div class="chart-pf-sparkline" id="chart-pf-sparkline-8"></div>
<script>
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
donutConfig.bindto = '#chart-pf-donut-8';
donutConfig.color = {
pattern: ["#EC7A08", "#D1D1D1"]
};
donutConfig.data = {
type: "donut",
columns: [
["Used", 85],
["Available", 15]
],
groups: [
["used", "available"]
],
order: null
};
donutConfig.tooltip = {
contents: function (d) {
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
'</span>';
}
};
var chart5 = c3.generate(donutConfig);
var donutChartTitle = d3.select("#chart-pf-donut-8").select('text.c3-chart-arcs-title');
donutChartTitle.text("");
donutChartTitle.insert('tspan').text("37ºC").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
donutChartTitle.insert('tspan').text("Current").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
sparklineConfig.bindto = '#chart-pf-sparkline-8';
sparklineConfig.data = {
columns: [
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
],
type: 'area'
};
var chart6 = c3.generate(sparklineConfig);
</script>
</div>
</div>
</div>
</div>
</div>
<!-- /col -->
<div class="col-xs-12 col-md-4">
<!-- Utilization Bar Card -->
<div class="card-pf">
<div class="card-pf-heading">
<h2 class="card-pf-title">
Glucose
</h2>
</div>
<div class="card-pf-body">
<div id="donut-chart-5"></div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
var chartUrls = [
'https://www.gogole.com',
'https://www.yahoo.com',
'https://www.bing.com/',
'https://duckduckgo.com/'
];
var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
var columnsData = [
['data1', 400, 360, 320, 175]
];
var verticalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
verticalBarChartConfig.bindto = '#donut-chart-5';
verticalBarChartConfig.axis = {
x: {
categories: categories,
type: 'category'
}
};
verticalBarChartConfig.data = {
type: 'bar',
columns: columnsData,
// optional drilldown behavior
onclick: function (d, element) {
window.location = chartUrls[d.index];
}
};
var verticalBarChart = c3.generate(verticalBarChartConfig);
</script>
</div>
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<!-- /container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment