patternfly-sass 3.3.3 → 3.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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
- <div style="width: 440px;">
47
- <h2>Pie Chart - Relationship to a Whole</h2>
48
- <div>
49
- <div id="pie-chart-no-legend"></div>
50
- <div id="pie-chart-right-legend"></div>
51
- <div id="pie-chart-bottom-legend"></div>
52
- </div>
53
- <h2>Pie Chart - Small</h2>
54
- <div>
55
- <div id="smallPieChart" class="pie-chart-pf"></div>
56
- <div style="text-align: center; width: 160px;">Animals</div>
57
- </div>
58
- </div>
59
- <script>
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
- var c3ChartDefaults = $().c3ChartDefaults();
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
- 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
- };
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
- // Pie Chart without Legend
83
- var pieChartConfig = c3ChartDefaults.getDefaultPieConfig();
84
- pieChartConfig.bindto = '#pie-chart-no-legend';
85
- pieChartConfig.data = pieData;
86
- var pieChartNoLegend = c3.generate(pieChartConfig);
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
- // Pie Chart Bottom Legend
89
- var pieChartBottomConfig = c3ChartDefaults.getDefaultPieConfig();
90
- pieChartBottomConfig.bindto = '#pie-chart-bottom-legend';
91
- pieChartBottomConfig.data = pieData;
92
- pieChartBottomConfig.legend = {
93
- show: true,
94
- position: 'bottom'
95
- };
96
- pieChartBottomConfig.size = {
97
- width: 321,
98
- height: 191
99
- };
100
- var pieChartBottomLegend = c3.generate(pieChartBottomConfig);
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
- // Right Legend
103
- var pieChartRightConfig = c3ChartDefaults.getDefaultPieConfig();
104
- pieChartRightConfig.bindto = '#pie-chart-right-legend';
105
- pieChartRightConfig.data = pieData;
106
- pieChartRightConfig.legend = {
107
- show: true,
108
- position: 'right'
109
- };
110
- pieChartRightConfig.size = {
111
- width: 251,
112
- height: 171
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
- // Small Pie Chart
117
- var pieChartSmallConfig = c3ChartDefaults.getDefaultPieConfig();
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
- var pieChartSmall = c3.generate(pieChartSmallConfig);
130
- </script>
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
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
571
- <div class="col-md-12">
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>
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
- </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
- };
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
- 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);
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
- 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>
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
- </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
- };
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
- 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);
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
- 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>
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
- </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
- };
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
- 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);
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
- 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>
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
- <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
748
- <div class="col-xs-12 col-sm-4 col-md-4">
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>
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
- </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();
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
- 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
- };
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
- 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);
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
- 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
- };
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
- var chart2 = c3.generate(sparklineConfig);
806
- </script>
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 -->