Skip to content

Instantly share code, notes, and snippets.

@andresgalante

andresgalante/clement.html

Last active April 27, 2018 17:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andresgalante/ff770cb15200401dea225bc8521649fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andresgalante/ff770cb15200401dea225bc8521649fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andresgalante revised this gist Apr 27, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion clement.html
    View file
    Original file line number Diff line number Diff line change
    @@ -63,7 +63,7 @@ <h1>Name of the dude</h1>
    <div class="card-pf-heading">
    <p class="card-pf-heading-details">Last 30 days</p>
    <h2 class="card-pf-title">
    Utilization
    Patient's current situation
    </h2>
    </div>
    <div class="card-pf-body">
  2. andresgalante created this gist Apr 27, 2018.
    237 changes: 237 additions & 0 deletions clement.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,237 @@
    <!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">
    Utilization
    </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>