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.
- 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
|
@@ -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 -->
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: patternfly-sass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.3.
|
|
4
|
+
version: 3.3.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dávid Halász
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2016-04-
|
|
12
|
+
date: 2016-04-13 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|
|
@@ -401,6 +401,7 @@ files:
|
|
|
401
401
|
- spec/html/typography-2.css
|
|
402
402
|
- spec/html/typography-2.html
|
|
403
403
|
- spec/html/typography.html
|
|
404
|
+
- spec/html/utilization-bar-charts.html
|
|
404
405
|
- spec/html/vertical-navigation-without-icons.html
|
|
405
406
|
- spec/html/vertical-navigation.html
|
|
406
407
|
- spec/main.html
|
|
@@ -499,6 +500,7 @@ test_files:
|
|
|
499
500
|
- spec/html/typography-2.css
|
|
500
501
|
- spec/html/typography-2.html
|
|
501
502
|
- spec/html/typography.html
|
|
503
|
+
- spec/html/utilization-bar-charts.html
|
|
502
504
|
- spec/html/vertical-navigation-without-icons.html
|
|
503
505
|
- spec/html/vertical-navigation.html
|
|
504
506
|
- spec/main.html
|