patternfly-sass 3.3.3 → 3.3.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/javascripts/patternfly.js +5 -5
- data/assets/javascripts/patternfly.min.js +1 -1
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/area-charts.html +50 -40
- data/spec/html/bar-charts.html +192 -131
- data/spec/html/cards.html +437 -418
- data/spec/html/donut-charts.html +165 -131
- data/spec/html/index.html +3 -0
- data/spec/html/layout-alt-fixed-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer.html +437 -418
- data/spec/html/layout-alt-fixed.html +437 -418
- data/spec/html/line-charts.html +120 -86
- data/spec/html/list-view.html +128 -95
- data/spec/html/pie-charts.html +107 -78
- data/spec/html/utilization-bar-charts.html +69 -0
- data/spec/html/vertical-navigation-without-icons.html +205 -205
- data/spec/html/vertical-navigation.html +205 -205
- metadata +4 -2
data/spec/html/pie-charts.html
CHANGED
|
@@ -43,91 +43,120 @@
|
|
|
43
43
|
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
|
|
44
44
|
</div>
|
|
45
45
|
<hr>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
46
|
+
<div>
|
|
47
|
+
<h2>Donut Chart - Relationship to a Whole</h2>
|
|
48
|
+
<div style="width: 700px;">
|
|
49
|
+
<div class="row">
|
|
50
|
+
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
51
|
+
<div id="donut-chart-no-legend"></div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
54
|
+
<div id="donut-chart-right-legend"></div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
57
|
+
<div id="donut-chart-bottom-legend"></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<script>
|
|
61
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
62
|
+
|
|
63
|
+
var pieData = {
|
|
64
|
+
type : 'pie',
|
|
65
|
+
colors: {
|
|
66
|
+
Dogs: $.pfPaletteColors.red,
|
|
67
|
+
Cats: $.pfPaletteColors.blue,
|
|
68
|
+
Fish: $.pfPaletteColors.orange,
|
|
69
|
+
Hamsters: $.pfPaletteColors.green
|
|
70
|
+
},
|
|
71
|
+
columns: [
|
|
72
|
+
['Dogs', 3],
|
|
73
|
+
['Cats', 2],
|
|
74
|
+
['Fish', 10],
|
|
75
|
+
['Hamsters', 2]
|
|
76
|
+
],
|
|
77
|
+
onclick: function (d, i) { console.log("onclick", d, i); },
|
|
78
|
+
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
|
79
|
+
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
|
80
|
+
};
|
|
60
81
|
|
|
61
|
-
|
|
82
|
+
// Pie Chart without Legend
|
|
83
|
+
var pieChartConfig = c3ChartDefaults.getDefaultPieConfig();
|
|
84
|
+
pieChartConfig.bindto = '#donut-chart-no-legend';
|
|
85
|
+
pieChartConfig.data = pieData;
|
|
86
|
+
var pieChartNoLegend = c3.generate(pieChartConfig);
|
|
62
87
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
],
|
|
77
|
-
onclick: function (d, i) { console.log("onclick", d, i); },
|
|
78
|
-
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
|
79
|
-
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
|
80
|
-
};
|
|
88
|
+
// Right Legend
|
|
89
|
+
var pieChartRightConfig = c3ChartDefaults.getDefaultPieConfig();
|
|
90
|
+
pieChartRightConfig.bindto = '#donut-chart-right-legend';
|
|
91
|
+
pieChartRightConfig.data = pieData;
|
|
92
|
+
pieChartRightConfig.legend = {
|
|
93
|
+
show: true,
|
|
94
|
+
position: 'right'
|
|
95
|
+
};
|
|
96
|
+
pieChartRightConfig.size = {
|
|
97
|
+
width: 251,
|
|
98
|
+
height: 161
|
|
99
|
+
};
|
|
100
|
+
var pieChartRightLegend = c3.generate(pieChartRightConfig);
|
|
81
101
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
102
|
+
// Pie Chart Bottom Legend
|
|
103
|
+
var pieChartBottomConfig = c3ChartDefaults.getDefaultPieConfig();
|
|
104
|
+
pieChartBottomConfig.bindto = '#donut-chart-bottom-legend';
|
|
105
|
+
pieChartBottomConfig.data = pieData;
|
|
106
|
+
pieChartBottomConfig.legend = {
|
|
107
|
+
show: true,
|
|
108
|
+
position: 'bottom'
|
|
109
|
+
};
|
|
110
|
+
pieChartBottomConfig.size = {
|
|
111
|
+
width: 321,
|
|
112
|
+
height: 191
|
|
113
|
+
};
|
|
114
|
+
var pieChartBottomLegend = c3.generate(pieChartBottomConfig);
|
|
115
|
+
</script>
|
|
87
116
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
117
|
+
</div>
|
|
118
|
+
<h2>Pie Chart - Small</h2>
|
|
119
|
+
<div>
|
|
120
|
+
<div id="smallDonutChart" class="pie-chart-pf"></div>
|
|
121
|
+
<div style="text-align: center; width: 160px;">Animals</div>
|
|
122
|
+
<script>
|
|
123
|
+
var pieData = {
|
|
124
|
+
type : 'pie',
|
|
125
|
+
colors: {
|
|
126
|
+
Dogs: $.pfPaletteColors.red,
|
|
127
|
+
Cats: $.pfPaletteColors.blue,
|
|
128
|
+
Fish: $.pfPaletteColors.orange,
|
|
129
|
+
Hamsters: $.pfPaletteColors.green
|
|
130
|
+
},
|
|
131
|
+
columns: [
|
|
132
|
+
['Dogs', 3],
|
|
133
|
+
['Cats', 2],
|
|
134
|
+
['Fish', 10],
|
|
135
|
+
['Hamsters', 2]
|
|
136
|
+
],
|
|
137
|
+
onclick: function (d, i) { console.log("onclick", d, i); },
|
|
138
|
+
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
|
|
139
|
+
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
|
|
140
|
+
};
|
|
101
141
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
var pieChartRightLegend = c3.generate(pieChartRightConfig);
|
|
142
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
143
|
+
var pieChartSmallConfig = c3ChartDefaults.getDefaultPieConfig();
|
|
144
|
+
pieChartSmallConfig.bindto = '#smallDonutChart';
|
|
145
|
+
pieChartSmallConfig.data = pieData;
|
|
146
|
+
pieChartSmallConfig.legend = {
|
|
147
|
+
show: true,
|
|
148
|
+
position: 'right'
|
|
149
|
+
};
|
|
150
|
+
pieChartSmallConfig.size = {
|
|
151
|
+
width: 250,
|
|
152
|
+
height: 115
|
|
153
|
+
};
|
|
115
154
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
pieChartSmallConfig.bindto = '#smallPieChart';
|
|
119
|
-
pieChartSmallConfig.data = pieData;
|
|
120
|
-
pieChartSmallConfig.legend = {
|
|
121
|
-
show: true,
|
|
122
|
-
position: 'right'
|
|
123
|
-
};
|
|
124
|
-
pieChartSmallConfig.size = {
|
|
125
|
-
width: 250,
|
|
126
|
-
height: 115
|
|
127
|
-
};
|
|
155
|
+
var pieChartSmall = c3.generate(pieChartSmallConfig);
|
|
156
|
+
</script>
|
|
128
157
|
|
|
129
|
-
|
|
130
|
-
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
131
160
|
|
|
132
161
|
</div><!-- /container -->
|
|
133
162
|
</body>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
|
|
3
|
+
<!--[if gt IE 9]><!-->
|
|
4
|
+
<html lang="en-us">
|
|
5
|
+
<!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<title>Utilization Bar Charts - PatternFly</title>
|
|
8
|
+
<meta charset="UTF-8">
|
|
9
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
11
|
+
<link rel="shortcut icon" href="../dist/img/favicon.ico">
|
|
12
|
+
<!-- iPad retina icon -->
|
|
13
|
+
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
|
|
14
|
+
<!-- iPad retina icon (iOS < 7) -->
|
|
15
|
+
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
|
|
16
|
+
<!-- iPad non-retina icon -->
|
|
17
|
+
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
|
|
18
|
+
<!-- iPad non-retina icon (iOS < 7) -->
|
|
19
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
|
|
20
|
+
<!-- iPhone 6 Plus icon -->
|
|
21
|
+
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
|
|
22
|
+
<!-- iPhone retina icon (iOS < 7) -->
|
|
23
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
|
|
24
|
+
<!-- iPhone non-retina icon (iOS < 7) -->
|
|
25
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
|
|
26
|
+
<link rel="stylesheet" href="../dist/css/patternfly.min.css" >
|
|
27
|
+
<link rel="stylesheet" href="../dist/css/patternfly-additions.min.css" >
|
|
28
|
+
<link href="tests.css" rel="stylesheet" media="screen, print">
|
|
29
|
+
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
30
|
+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
31
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
|
|
32
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
|
|
33
|
+
<script src="../dist/js/patternfly.min.js"></script>
|
|
34
|
+
</head>
|
|
35
|
+
|
|
36
|
+
<body>
|
|
37
|
+
<div class="container">
|
|
38
|
+
<div class="page-header">
|
|
39
|
+
<h1>Utilization Bar Charts</h1>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="alert alert-warning">
|
|
42
|
+
<span class="pficon pficon-warning-triangle-o"></span>
|
|
43
|
+
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
|
|
44
|
+
</div>
|
|
45
|
+
<hr>
|
|
46
|
+
<h2>Utilization Bar Chart</h2>
|
|
47
|
+
<div class="row">
|
|
48
|
+
<div class="col-xs-8 col-sm-6 col-md-6">
|
|
49
|
+
<div class="progress">
|
|
50
|
+
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
|
|
51
|
+
<span class="sr-only">25% Used</span>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
|
|
54
|
+
<span class="sr-only">75% Available</span>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
<script>
|
|
58
|
+
// Initialize Tooltip
|
|
59
|
+
jQuery(document).ready(function() {
|
|
60
|
+
jQuery('[data-toggle="tooltip"]').tooltip();
|
|
61
|
+
});
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
</div><!-- /container -->
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
@@ -567,247 +567,247 @@
|
|
|
567
567
|
</div>
|
|
568
568
|
</div><!-- /row -->
|
|
569
569
|
<div class="row row-cards-pf">
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
570
|
+
<div class="col-md-12">
|
|
571
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
572
|
+
<div class="card-pf card-pf-utilization">
|
|
573
|
+
<div class="card-pf-heading">
|
|
574
|
+
<p class="card-pf-heading-details">Last 30 days</p>
|
|
575
|
+
<h2 class="card-pf-title">
|
|
576
|
+
Utilization
|
|
577
|
+
</h2>
|
|
578
|
+
</div>
|
|
579
|
+
<div class="card-pf-body">
|
|
580
|
+
<div class="row">
|
|
581
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
582
|
+
<h3 class="card-pf-subtitle">CPU</h3>
|
|
583
|
+
<p class="card-pf-utilization-details">
|
|
584
|
+
<span class="card-pf-utilization-card-details-count">50</span>
|
|
585
585
|
<span class="card-pf-utilization-card-details-description">
|
|
586
586
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
587
587
|
<span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
|
|
588
588
|
</span>
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
589
|
+
</p>
|
|
590
|
+
<div id="chart-pf-donut-1"></div>
|
|
591
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
|
|
592
|
+
<script>
|
|
593
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
594
|
+
donutConfig.bindto = '#chart-pf-donut-1';
|
|
595
|
+
donutConfig.color = {
|
|
596
|
+
pattern: ["#cc0000","#D1D1D1"]
|
|
597
|
+
};
|
|
598
|
+
donutConfig.data = {
|
|
599
|
+
type: "donut",
|
|
600
|
+
columns: [
|
|
601
|
+
["Used", 95],
|
|
602
|
+
["Available", 5]
|
|
603
|
+
],
|
|
604
|
+
groups: [
|
|
605
|
+
["used", "available"]
|
|
606
|
+
],
|
|
607
|
+
order: null
|
|
608
|
+
};
|
|
609
|
+
donutConfig.tooltip = {
|
|
610
|
+
contents: function (d) {
|
|
611
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
612
|
+
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
|
|
613
|
+
'</span>';
|
|
614
|
+
}
|
|
615
|
+
};
|
|
616
616
|
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
617
|
+
var chart1 = c3.generate(donutConfig);
|
|
618
|
+
var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
|
|
619
|
+
donutChartTitle.text("");
|
|
620
|
+
donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
621
|
+
donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
622
622
|
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
623
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
624
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-1';
|
|
625
|
+
sparklineConfig.data = {
|
|
626
|
+
columns: [
|
|
627
|
+
['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
|
|
628
|
+
],
|
|
629
|
+
type: 'area'
|
|
630
|
+
};
|
|
631
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
632
|
+
</script>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
635
|
+
<h3 class="card-pf-subtitle">Memory</h3>
|
|
636
|
+
<p class="card-pf-utilization-details">
|
|
637
|
+
<span class="card-pf-utilization-card-details-count">256</span>
|
|
638
638
|
<span class="card-pf-utilization-card-details-description">
|
|
639
639
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
640
640
|
<span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
|
|
641
641
|
</span>
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
642
|
+
</p>
|
|
643
|
+
<div id="chart-pf-donut-2"></div>
|
|
644
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
|
|
645
|
+
<script>
|
|
646
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
647
|
+
donutConfig.bindto = '#chart-pf-donut-2';
|
|
648
|
+
donutConfig.color = {
|
|
649
|
+
pattern: ["#3f9c35","#D1D1D1"]
|
|
650
|
+
};
|
|
651
|
+
donutConfig.data = {
|
|
652
|
+
type: "donut",
|
|
653
|
+
columns: [
|
|
654
|
+
["Used", 41],
|
|
655
|
+
["Available", 59]
|
|
656
|
+
],
|
|
657
|
+
groups: [
|
|
658
|
+
["used", "available"]
|
|
659
|
+
],
|
|
660
|
+
order: null
|
|
661
|
+
};
|
|
662
|
+
donutConfig.tooltip = {
|
|
663
|
+
contents: function (d) {
|
|
664
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
665
|
+
Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
|
|
666
|
+
'</span>';
|
|
667
|
+
}
|
|
668
|
+
};
|
|
669
669
|
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
670
|
+
var chart3 = c3.generate(donutConfig);
|
|
671
|
+
var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
|
|
672
|
+
donutChartTitle.text("");
|
|
673
|
+
donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
674
|
+
donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
675
675
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
676
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
677
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-2';
|
|
678
|
+
sparklineConfig.data = {
|
|
679
|
+
columns: [
|
|
680
|
+
['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
|
|
681
|
+
],
|
|
682
|
+
type: 'area'
|
|
683
|
+
};
|
|
684
|
+
var chart4 = c3.generate(sparklineConfig);
|
|
685
|
+
</script>
|
|
686
|
+
</div>
|
|
687
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
688
|
+
<h3 class="card-pf-subtitle">Network</h3>
|
|
689
|
+
<p class="card-pf-utilization-details">
|
|
690
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
691
691
|
<span class="card-pf-utilization-card-details-description">
|
|
692
692
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
693
693
|
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
694
694
|
</span>
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
695
|
+
</p>
|
|
696
|
+
<div id="chart-pf-donut-3"></div>
|
|
697
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
|
|
698
|
+
<script>
|
|
699
|
+
var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
|
|
700
|
+
donutConfig.bindto = '#chart-pf-donut-3';
|
|
701
|
+
donutConfig.color = {
|
|
702
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
703
|
+
};
|
|
704
|
+
donutConfig.data = {
|
|
705
|
+
type: "donut",
|
|
706
|
+
columns: [
|
|
707
|
+
["Used", 85],
|
|
708
|
+
["Available", 15]
|
|
709
|
+
],
|
|
710
|
+
groups: [
|
|
711
|
+
["used", "available"]
|
|
712
|
+
],
|
|
713
|
+
order: null
|
|
714
|
+
};
|
|
715
|
+
donutConfig.tooltip = {
|
|
716
|
+
contents: function (d) {
|
|
717
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
718
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
719
|
+
'</span>';
|
|
720
|
+
}
|
|
721
|
+
};
|
|
722
722
|
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
723
|
+
var chart5 = c3.generate(donutConfig);
|
|
724
|
+
var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
|
|
725
|
+
donutChartTitle.text("");
|
|
726
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
727
|
+
donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
728
728
|
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
</div>
|
|
729
|
+
var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
|
|
730
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-3';
|
|
731
|
+
sparklineConfig.data = {
|
|
732
|
+
columns: [
|
|
733
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
734
|
+
],
|
|
735
|
+
type: 'area'
|
|
736
|
+
};
|
|
737
|
+
var chart6 = c3.generate(sparklineConfig);
|
|
738
|
+
</script>
|
|
740
739
|
</div>
|
|
741
740
|
</div>
|
|
742
741
|
</div>
|
|
743
742
|
</div>
|
|
744
743
|
|
|
744
|
+
</div>
|
|
745
745
|
</div><!-- /row -->
|
|
746
746
|
<div class="row row-cards-pf">
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
747
|
+
<div class="col-xs-12 col-sm-4 col-md-4">
|
|
748
|
+
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|
|
749
|
+
<div class="card-pf card-pf-utilization">
|
|
750
|
+
<h2 class="card-pf-title">
|
|
751
|
+
Network
|
|
752
|
+
</h2>
|
|
753
|
+
<div class="card-pf-body">
|
|
754
|
+
<p class="card-pf-utilization-details">
|
|
755
|
+
<span class="card-pf-utilization-card-details-count">200</span>
|
|
756
756
|
<span class="card-pf-utilization-card-details-description">
|
|
757
757
|
<span class="card-pf-utilization-card-details-line-1">Available</span>
|
|
758
758
|
<span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
|
|
759
759
|
</span>
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
760
|
+
</p>
|
|
761
|
+
<div id="chart-pf-donut-4"></div>
|
|
762
|
+
<div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
|
|
763
|
+
<script>
|
|
764
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
|
765
765
|
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
766
|
+
var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
|
|
767
|
+
donutConfig.bindto = '#chart-pf-donut-4';
|
|
768
|
+
donutConfig.color = {
|
|
769
|
+
pattern: ["#EC7A08","#D1D1D1"]
|
|
770
|
+
};
|
|
771
|
+
donutConfig.data = {
|
|
772
|
+
type: "donut",
|
|
773
|
+
columns: [
|
|
774
|
+
["Used", 85],
|
|
775
|
+
["Available", 15]
|
|
776
|
+
],
|
|
777
|
+
groups: [
|
|
778
|
+
["used", "available"]
|
|
779
|
+
],
|
|
780
|
+
order: null
|
|
781
|
+
};
|
|
782
|
+
donutConfig.tooltip = {
|
|
783
|
+
contents: function (d) {
|
|
784
|
+
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
|
|
785
|
+
Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
|
|
786
|
+
'</span>';
|
|
787
|
+
}
|
|
788
|
+
};
|
|
789
789
|
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
790
|
+
var chart1 = c3.generate(donutConfig);
|
|
791
|
+
var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
|
|
792
|
+
donutChartTitle.text("");
|
|
793
|
+
donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
|
|
794
|
+
donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
|
|
795
795
|
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
796
|
+
var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
|
|
797
|
+
sparklineConfig.bindto = '#chart-pf-sparkline-4';
|
|
798
|
+
sparklineConfig.data = {
|
|
799
|
+
columns: [
|
|
800
|
+
['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
|
|
801
|
+
],
|
|
802
|
+
type: 'area'
|
|
803
|
+
};
|
|
804
804
|
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
</div>
|
|
805
|
+
var chart2 = c3.generate(sparklineConfig);
|
|
806
|
+
</script>
|
|
808
807
|
</div>
|
|
809
808
|
</div>
|
|
810
809
|
|
|
810
|
+
</div>
|
|
811
811
|
</div><!-- /row -->
|
|
812
812
|
<div class="row row-cards-pf">
|
|
813
813
|
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
|