patternfly-sass 2.7.0 → 2.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +1 -1
  3. data/assets/images/patternfly/brand.svg +87 -87
  4. data/assets/javascripts/patternfly.js +200 -2
  5. data/assets/javascripts/patternfly.min.js +1 -1
  6. data/assets/stylesheets/patternfly/_ext-bootstrap-select.scss +7 -7
  7. data/assets/stylesheets/patternfly/_forms.scss +8 -0
  8. data/bower.json +1 -1
  9. data/lib/patternfly-sass/version.rb +2 -2
  10. data/package.json +1 -1
  11. data/spec/html/basic.html +1 -0
  12. data/spec/html/blank-slate.html +24 -26
  13. data/spec/html/cards.html +216 -403
  14. data/spec/html/charts.html +74 -118
  15. data/spec/html/dashboard.html +26 -33
  16. data/spec/html/datatables-columns.html +1 -0
  17. data/spec/html/datatables.html +1 -0
  18. data/spec/html/dist/css/patternfly.css +7 -0
  19. data/spec/html/dist/css/patternfly.css.map +1 -1
  20. data/spec/html/dist/css/patternfly.min.css +1 -1
  21. data/spec/html/dist/css/patternfly.min.css.map +1 -1
  22. data/spec/html/forms.html +33 -0
  23. data/spec/html/layout-alt-fixed-inner-scroll.html +216 -403
  24. data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +216 -403
  25. data/spec/html/layout-alt-fixed-with-footer.html +216 -403
  26. data/spec/html/layout-alt-fixed.html +216 -403
  27. data/spec/html/tab.html +1 -0
  28. data/spec/{html/main.html → main.html} +0 -0
  29. metadata +4 -4
data/bower.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "patternfly-sass",
3
- "version": "2.7.0",
3
+ "version": "2.8.0",
4
4
  "license": "Apache-2.0",
5
5
  "homepage": "https://www.patternfly.org",
6
6
  "authors": [
data/lib/patternfly-sass/version.rb CHANGED
@@ -1,4 +1,4 @@
1
1
  module Patternfly
2
- VERSION = '2.7.0'
3
- PATTERNFLY_SHA = 'ce7d0e395b0bd3e360841d140cd46151907fb02e'
2
+ VERSION = '2.8.0'
3
+ PATTERNFLY_SHA = 'bceefec5d9626c09c645ae635bb1f3d03e6792a6'
4
4
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "patternfly-sass",
3
- "version": "2.7.0",
3
+ "version": "2.8.0",
4
4
  "description": "Red Hat's Patternfly, converted to Sass and ready to drop into Rails",
5
5
  "repository": {
6
6
  "type": "git",
data/spec/html/basic.html CHANGED
@@ -557,5 +557,6 @@
557
557
  $('.datatable').dataTable();
558
558
  });
559
559
  </script>
560
+
560
561
  </body>
561
562
  </html>
data/spec/html/blank-slate.html CHANGED
@@ -43,7 +43,7 @@
43
43
  <hr>
44
44
  <h2>Basic Blank Slate</h2>
45
45
  <div class="blank-slate-pf">
46
- <h1>Blank Slate Title</h1>
46
+ <h1>Empty State Title</h1>
47
47
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
48
48
  <p>Learn more about this <a href="#">on the documentation</a>.</p>
49
49
  <div class="blank-slate-pf-main-action">
@@ -52,32 +52,30 @@
52
52
  </button>
53
53
  </div>
54
54
  </div>
55
- <hr>
55
+ <hr>
56
56
  <h2>Blank Slate with icon and secondary actions</h2>
57
- <div class="blank-slate-pf">
58
- <div class="blank-slate-pf-icon">
59
- <span class="pficon pficon-add-circle-o"></span>
60
- </div>
61
- <h1>Blank Slate Title</h1>
62
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
63
- <p>Learn more about this <a href="#">on the documentation</a>.</p>
64
- <div class="blank-slate-pf-main-action">
65
- <button class="btn btn-primary btn-lg">
66
- Main Action
67
- </button>
68
- </div>
69
- <div class="blank-slate-pf-secondary-action">
70
- <button class="btn btn-default">
71
- Secondary Action
72
- </button>
73
- <button class="btn btn-default">
74
- Secondary Action
75
- </button>
76
- <button class="btn btn-default">
77
- Secondary Action
78
- </button>
79
- </div>
80
- </div>
57
+ <div class="blank-slate-pf">
58
+ <div class="blank-slate-pf-icon">
59
+ <span class="pficon pficon pficon-add-circle-o"></span>
60
+ </div>
61
+ <h1>
62
+ Empty State Title
63
+ </h1>
64
+ <p>
65
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
66
+ </p>
67
+ <p>
68
+ Learn more about this <a href="#">on the documentation</a>.
69
+ </p>
70
+ <div class="blank-slate-pf-main-action">
71
+ <button class="btn btn-primary btn-lg"> Main Action </button>
72
+ </div>
73
+ <div class="blank-slate-pf-secondary-action">
74
+ <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button> <button class="btn btn-default"> Secondary Action </button>
75
+ </div>
76
+ </div>
77
+
78
+
81
79
  </div><!-- /container -->
82
80
  </body>
83
81
  </html>
data/spec/html/cards.html CHANGED
@@ -470,421 +470,234 @@
470
470
  </div><!-- /row -->
471
471
  <div class="row row-cards-pf">
472
472
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
473
- <div class="col-md-12">
474
- <div class="card-pf card-pf-utilization">
475
- <div class="card-pf-heading">
476
- <p class="card-pf-heading-details">Last 30 days</p>
477
- <h2 class="card-pf-title">
478
- Utilization
479
- </h2>
480
- </div>
481
- <div class="card-pf-body">
482
- <div class="row">
483
- <div class="col-xs-12 col-sm-4 col-md-4">
484
- <h3 class="card-pf-subtitle">CPU</h3>
485
- <p class="card-pf-utilization-details">
486
- <span class="card-pf-utilization-card-details-count">50</span>
487
- <span class="card-pf-utilization-card-details-description">
488
- <span class="card-pf-utilization-card-details-line-1">Available</span>
489
- <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
490
- </span>
491
- </p>
492
- <div id="chart-pf-donut"></div>
493
- <div class="chart-pf-sparkline" id="chart-pf-sparkline"></div>
494
- <script>
495
- var chart1 = c3.generate({
496
- bindto: '#chart-pf-donut',
497
- type: "donut",
498
- donut: {
499
- title: "A",
500
- label: {show: false},
501
- width: 11
502
- },
503
- size: {
504
- height: 171, // produces a diameter of 150 and a centered chart
505
- },
506
- legend: {
507
- show: false
508
- },
509
- color: {
510
- pattern: ["#cc0000","#D1D1D1"]
511
- },
512
- tooltip: {
513
- contents: function (d) {
514
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
515
- Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
516
- '</span>';
517
- }
518
- },
519
- data: {
520
- type: "donut",
521
- columns: [
522
- ["Used", 95],
523
- ["Available", 5]
524
- ],
525
- groups: [
526
- ["used", "available"]
527
- ],
528
- order: null
529
- },
530
- });
473
+ <div class="col-md-12">
474
+ <div class="card-pf card-pf-utilization">
475
+ <div class="card-pf-heading">
476
+ <p class="card-pf-heading-details">Last 30 days</p>
477
+ <h2 class="card-pf-title">
478
+ Utilization
479
+ </h2>
480
+ </div>
481
+ <div class="card-pf-body">
482
+ <div class="row">
483
+ <div class="col-xs-12 col-sm-4 col-md-4">
484
+ <h3 class="card-pf-subtitle">CPU</h3>
485
+ <p class="card-pf-utilization-details">
486
+ <span class="card-pf-utilization-card-details-count">50</span>
487
+ <span class="card-pf-utilization-card-details-description">
488
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
489
+ <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
490
+ </span>
491
+ </p>
492
+ <div id="chart-pf-donut-1"></div>
493
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
494
+ <script>
495
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
496
+ donutConfig.bindto = '#chart-pf-donut-1';
497
+ donutConfig.data = {
498
+ type: "donut",
499
+ columns: [
500
+ ["Used", 95],
501
+ ["Available", 5]
502
+ ],
503
+ groups: [
504
+ ["used", "available"]
505
+ ],
506
+ order: null
507
+ };
508
+ donutConfig.tooltip = {
509
+ contents: function (d) {
510
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
511
+ Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
512
+ '</span>';
513
+ }
514
+ };
531
515
 
532
- var donutChartTitle = d3.select("#chart-pf-donut").select('text.c3-chart-arcs-title');
533
- donutChartTitle.text("");
534
- donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
535
- donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
516
+ var chart1 = c3.generate(donutConfig);
517
+ var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
518
+ donutChartTitle.text("");
519
+ donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
520
+ donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
536
521
 
537
- var chart2 = c3.generate({
538
- axis: {
539
- x: {
540
- show: false
541
- },
542
- y: {
543
- show: false
544
- }
545
- },
546
- bindto: '#chart-pf-sparkline',
547
- color: {
548
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
549
- },
550
- data: {
551
- columns: [
552
- ['Last 30 days', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
553
- ],
554
- type: 'area'
555
- },
556
- legend: {
557
- show: false
558
- },
559
- point: {
560
- r: 1,
561
- focus: {
562
- expand: {
563
- r: 4
564
- }
565
- }
566
- },
567
- size: {
568
- height: 40
569
- },
570
- tooltip: {
571
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
572
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
573
- for (i = 0; i < d.length; i++) {
574
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
575
- }
576
- }
577
- }
578
- });
579
- </script>
580
- </div>
581
- <div class="col-xs-12 col-sm-4 col-md-4">
582
- <h3 class="card-pf-subtitle">Memory</h3>
583
- <p class="card-pf-utilization-details">
584
- <span class="card-pf-utilization-card-details-count">256</span>
585
- <span class="card-pf-utilization-card-details-description">
586
- <span class="card-pf-utilization-card-details-line-1">Available</span>
587
- <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
588
- </span>
589
- </p>
590
- <div id="chart-pf-donut-2"></div>
591
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
592
- <script>
593
- var chart3 = c3.generate({
594
- bindto: '#chart-pf-donut-2',
595
- type: "donut",
596
- donut: {
597
- title: "A",
598
- label: {show: false},
599
- width: 11
600
- },
601
- size: {
602
- height: 171, // produces a diameter of 150 and a centered chart
603
- },
604
- legend: {
605
- show: false
606
- },
607
- color: {
608
- pattern: ["#3f9c35","#D1D1D1"]
609
- },
610
- tooltip: {
611
- contents: function (d) {
612
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
613
- Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
614
- '</span>';
615
- }
616
- },
617
- data: {
618
- type: "donut",
619
- columns: [
620
- ["Used", 41],
621
- ["Available", 59]
622
- ],
623
- groups: [
624
- ["used", "available"]
625
- ],
626
- order: null
627
- },
628
- });
522
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
523
+ sparklineConfig.bindto = '#chart-pf-sparkline-1';
524
+ sparklineConfig.data = {
525
+ columns: [
526
+ ['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
527
+ ],
528
+ type: 'area'
529
+ };
530
+ var chart2 = c3.generate(sparklineConfig);
531
+ </script>
532
+ </div>
533
+ <div class="col-xs-12 col-sm-4 col-md-4">
534
+ <h3 class="card-pf-subtitle">Memory</h3>
535
+ <p class="card-pf-utilization-details">
536
+ <span class="card-pf-utilization-card-details-count">256</span>
537
+ <span class="card-pf-utilization-card-details-description">
538
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
539
+ <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
540
+ </span>
541
+ </p>
542
+ <div id="chart-pf-donut-2"></div>
543
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
544
+ <script>
545
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
546
+ donutConfig.bindto = '#chart-pf-donut-2';
547
+ donutConfig.data = {
548
+ type: "donut",
549
+ columns: [
550
+ ["Used", 41],
551
+ ["Available", 59]
552
+ ],
553
+ groups: [
554
+ ["used", "available"]
555
+ ],
556
+ order: null
557
+ };
558
+ donutConfig.tooltip = {
559
+ contents: function (d) {
560
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
561
+ Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
562
+ '</span>';
563
+ }
564
+ };
629
565
 
630
- var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
631
- donutChartTitle.text("");
632
- donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
633
- donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
566
+ var chart3 = c3.generate(donutConfig);
567
+ var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
568
+ donutChartTitle.text("");
569
+ donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
570
+ donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
634
571
 
635
- var chart4 = c3.generate({
636
- axis: {
637
- x: {
638
- show: false
639
- },
640
- y: {
641
- show: false
642
- }
643
- },
644
- bindto: '#chart-pf-sparkline-2',
645
- color: {
646
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
647
- },
648
- data: {
649
- columns: [
650
- ['Last 30 days', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
651
- ],
652
- type: 'area'
653
- },
654
- legend: {
655
- show: false
656
- },
657
- point: {
658
- r: 1,
659
- focus: {
660
- expand: {
661
- r: 4
662
- }
663
- }
664
- },
665
- size: {
666
- height: 40
667
- },
668
- tooltip: {
669
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
670
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
671
- for (i = 0; i < d.length; i++) {
672
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
673
- }
674
- }
675
- }
676
- });
677
- </script>
678
- </div>
679
- <div class="col-xs-12 col-sm-4 col-md-4">
680
- <h3 class="card-pf-subtitle">Network</h3>
681
- <p class="card-pf-utilization-details">
682
- <span class="card-pf-utilization-card-details-count">200</span>
683
- <span class="card-pf-utilization-card-details-description">
684
- <span class="card-pf-utilization-card-details-line-1">Available</span>
685
- <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
686
- </span>
687
- </p>
688
- <div id="chart-pf-donut-3"></div>
689
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
690
- <script>
691
- var chart5 = c3.generate({
692
- bindto: '#chart-pf-donut-3',
693
- type: "donut",
694
- donut: {
695
- title: "A",
696
- label: {show: false},
697
- width: 11
698
- },
699
- size: {
700
- height: 171, // produces a diameter of 150 and a centered chart
701
- },
702
- legend: {
703
- show: false
704
- },
705
- color: {
706
- pattern: ["#EC7A08","#D1D1D1"]
707
- },
708
- tooltip: {
709
- contents: function (d) {
710
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
711
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
712
- '</span>';
713
- }
714
- },
715
- data: {
716
- type: "donut",
717
- columns: [
718
- ["Used", 85],
719
- ["Available", 15]
720
- ],
721
- groups: [
722
- ["used", "available"]
723
- ],
724
- order: null
725
- },
726
- });
572
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
573
+ sparklineConfig.bindto = '#chart-pf-sparkline-2';
574
+ sparklineConfig.data = {
575
+ columns: [
576
+ ['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
577
+ ],
578
+ type: 'area'
579
+ };
580
+ var chart4 = c3.generate(sparklineConfig);
581
+ </script>
582
+ </div>
583
+ <div class="col-xs-12 col-sm-4 col-md-4">
584
+ <h3 class="card-pf-subtitle">Network</h3>
585
+ <p class="card-pf-utilization-details">
586
+ <span class="card-pf-utilization-card-details-count">200</span>
587
+ <span class="card-pf-utilization-card-details-description">
588
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
589
+ <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
590
+ </span>
591
+ </p>
592
+ <div id="chart-pf-donut-3"></div>
593
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
594
+ <script>
595
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
596
+ donutConfig.bindto = '#chart-pf-donut-3';
597
+ donutConfig.data = {
598
+ type: "donut",
599
+ columns: [
600
+ ["Used", 85],
601
+ ["Available", 15]
602
+ ],
603
+ groups: [
604
+ ["used", "available"]
605
+ ],
606
+ order: null
607
+ };
608
+ donutConfig.tooltip = {
609
+ contents: function (d) {
610
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
611
+ Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
612
+ '</span>';
613
+ }
614
+ };
727
615
 
728
- var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
729
- donutChartTitle.text("");
730
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
731
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
616
+ var chart5 = c3.generate(donutConfig);
617
+ var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
618
+ donutChartTitle.text("");
619
+ donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
620
+ donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
732
621
 
733
- var chart6 = c3.generate({
734
- axis: {
735
- x: {
736
- show: false
737
- },
738
- y: {
739
- show: false
740
- }
741
- },
742
- bindto: '#chart-pf-sparkline-3',
743
- color: {
744
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
745
- },
746
- data: {
747
- columns: [
748
- ['Last 30 days', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
749
- ],
750
- type: 'area'
751
- },
752
- legend: {
753
- show: false
754
- },
755
- point: {
756
- r: 1,
757
- focus: {
758
- expand: {
759
- r: 4
760
- }
761
- }
762
- },
763
- size: {
764
- height: 40
765
- },
766
- tooltip: {
767
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
768
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
769
- for (i = 0; i < d.length; i++) {
770
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
771
- }
772
- }
773
- }
774
- });
775
- </script>
776
- </div>
777
- </div>
778
- </div>
779
- </div>
622
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
623
+ sparklineConfig.bindto = '#chart-pf-sparkline-3';
624
+ sparklineConfig.data = {
625
+ columns: [
626
+ ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
627
+ ],
628
+ type: 'area'
629
+ };
630
+ var chart6 = c3.generate(sparklineConfig);
631
+ </script>
780
632
  </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+
781
638
  </div><!-- /row -->
782
639
  <div class="row row-cards-pf">
783
640
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
784
- <div class="col-xs-12 col-sm-4 col-md-4">
785
- <div class="card-pf card-pf-utilization">
786
- <h2 class="card-pf-title">
787
- Network
788
- </h2>
789
- <div class="card-pf-body">
790
- <p class="card-pf-utilization-details">
791
- <span class="card-pf-utilization-card-details-count">200</span>
792
- <span class="card-pf-utilization-card-details-description">
793
- <span class="card-pf-utilization-card-details-line-1">Available</span>
794
- <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
795
- </span>
796
- </p>
797
- <div id="chart-pf-donut-4"></div>
798
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
799
- <script>
800
- var chart7 = c3.generate({
801
- bindto: '#chart-pf-donut-4',
802
- type: "donut",
803
- donut: {
804
- title: "A",
805
- label: {show: false},
806
- width: 11
807
- },
808
- size: {
809
- height: 171, // produces a diameter of 150 and a centered chart
810
- },
811
- legend: {
812
- show: false
813
- },
814
- color: {
815
- pattern: ["#EC7A08","#D1D1D1"]
816
- },
817
- tooltip: {
818
- contents: function (d) {
819
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
820
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
821
- '</span>';
822
- }
823
- },
824
- data: {
825
- type: "donut",
826
- columns: [
827
- ["Used", 85],
828
- ["Available", 15]
829
- ],
830
- groups: [
831
- ["used", "available"]
832
- ],
833
- order: null
834
- },
835
- });
641
+ <div class="col-xs-12 col-sm-4 col-md-4">
642
+ <div class="card-pf card-pf-utilization">
643
+ <h2 class="card-pf-title">
644
+ Network
645
+ </h2>
646
+ <div class="card-pf-body">
647
+ <p class="card-pf-utilization-details">
648
+ <span class="card-pf-utilization-card-details-count">200</span>
649
+ <span class="card-pf-utilization-card-details-description">
650
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
651
+ <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
652
+ </span>
653
+ </p>
654
+ <div id="chart-pf-donut-4"></div>
655
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
656
+ <script>
657
+ var c3ChartDefaults = $().c3ChartDefaults();
836
658
 
837
- var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
838
- donutChartTitle.text("");
839
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
840
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
659
+ var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
660
+ donutConfig.bindto = '#chart-pf-donut-4';
661
+ donutConfig.data = {
662
+ type: "donut",
663
+ columns: [
664
+ ["Used", 85],
665
+ ["Available", 15]
666
+ ],
667
+ groups: [
668
+ ["used", "available"]
669
+ ],
670
+ order: null
671
+ };
672
+ donutConfig.tooltip = {
673
+ contents: function (d) {
674
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
675
+ Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
676
+ '</span>';
677
+ }
678
+ };
679
+
680
+ var chart1 = c3.generate(donutConfig);
681
+ var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
682
+ donutChartTitle.text("");
683
+ donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
684
+ donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
685
+
686
+ var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
687
+ sparklineConfig.bindto = '#chart-pf-sparkline-4';
688
+ sparklineConfig.data = {
689
+ columns: [
690
+ ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
691
+ ],
692
+ type: 'area'
693
+ };
694
+
695
+ var chart2 = c3.generate(sparklineConfig);
696
+ </script>
697
+ </div>
698
+ </div>
699
+ </div>
841
700
 
842
- var chart8 = c3.generate({
843
- axis: {
844
- x: {
845
- show: false
846
- },
847
- y: {
848
- show: false
849
- }
850
- },
851
- bindto: '#chart-pf-sparkline-4',
852
- color: {
853
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
854
- },
855
- data: {
856
- columns: [
857
- ['Last 30 days', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
858
- ],
859
- type: 'area'
860
- },
861
- legend: {
862
- show: false
863
- },
864
- point: {
865
- r: 1,
866
- focus: {
867
- expand: {
868
- r: 4
869
- }
870
- }
871
- },
872
- size: {
873
- height: 40
874
- },
875
- tooltip: {
876
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
877
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
878
- for (i = 0; i < d.length; i++) {
879
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
880
- }
881
- }
882
- }
883
- });
884
- </script>
885
- </div>
886
- </div>
887
- </div>
888
701
  </div><!-- /row -->
889
702
  <div class="row row-cards-pf">
890
703
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->