patternfly-sass 2.7.0 → 2.8.0

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.
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/spec/html/layout-alt-fixed-inner-scroll.html CHANGED
@@ -511,421 +511,234 @@
511
511
  </div><!-- /row -->
512
512
  <div class="row row-cards-pf">
513
513
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
514
- <div class="col-md-12">
515
- <div class="card-pf card-pf-utilization">
516
- <div class="card-pf-heading">
517
- <p class="card-pf-heading-details">Last 30 days</p>
518
- <h2 class="card-pf-title">
519
- Utilization
520
- </h2>
521
- </div>
522
- <div class="card-pf-body">
523
- <div class="row">
524
- <div class="col-xs-12 col-sm-4 col-md-4">
525
- <h3 class="card-pf-subtitle">CPU</h3>
526
- <p class="card-pf-utilization-details">
527
- <span class="card-pf-utilization-card-details-count">50</span>
528
- <span class="card-pf-utilization-card-details-description">
529
- <span class="card-pf-utilization-card-details-line-1">Available</span>
530
- <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
531
- </span>
532
- </p>
533
- <div id="chart-pf-donut"></div>
534
- <div class="chart-pf-sparkline" id="chart-pf-sparkline"></div>
535
- <script>
536
- var chart1 = c3.generate({
537
- bindto: '#chart-pf-donut',
538
- type: "donut",
539
- donut: {
540
- title: "A",
541
- label: {show: false},
542
- width: 11
543
- },
544
- size: {
545
- height: 171, // produces a diameter of 150 and a centered chart
546
- },
547
- legend: {
548
- show: false
549
- },
550
- color: {
551
- pattern: ["#cc0000","#D1D1D1"]
552
- },
553
- tooltip: {
554
- contents: function (d) {
555
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
556
- Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
557
- '</span>';
558
- }
559
- },
560
- data: {
561
- type: "donut",
562
- columns: [
563
- ["Used", 95],
564
- ["Available", 5]
565
- ],
566
- groups: [
567
- ["used", "available"]
568
- ],
569
- order: null
570
- },
571
- });
514
+ <div class="col-md-12">
515
+ <div class="card-pf card-pf-utilization">
516
+ <div class="card-pf-heading">
517
+ <p class="card-pf-heading-details">Last 30 days</p>
518
+ <h2 class="card-pf-title">
519
+ Utilization
520
+ </h2>
521
+ </div>
522
+ <div class="card-pf-body">
523
+ <div class="row">
524
+ <div class="col-xs-12 col-sm-4 col-md-4">
525
+ <h3 class="card-pf-subtitle">CPU</h3>
526
+ <p class="card-pf-utilization-details">
527
+ <span class="card-pf-utilization-card-details-count">50</span>
528
+ <span class="card-pf-utilization-card-details-description">
529
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
530
+ <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
531
+ </span>
532
+ </p>
533
+ <div id="chart-pf-donut-1"></div>
534
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
535
+ <script>
536
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
537
+ donutConfig.bindto = '#chart-pf-donut-1';
538
+ donutConfig.data = {
539
+ type: "donut",
540
+ columns: [
541
+ ["Used", 95],
542
+ ["Available", 5]
543
+ ],
544
+ groups: [
545
+ ["used", "available"]
546
+ ],
547
+ order: null
548
+ };
549
+ donutConfig.tooltip = {
550
+ contents: function (d) {
551
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
552
+ Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
553
+ '</span>';
554
+ }
555
+ };
572
556
 
573
- var donutChartTitle = d3.select("#chart-pf-donut").select('text.c3-chart-arcs-title');
574
- donutChartTitle.text("");
575
- donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
576
- donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
557
+ var chart1 = c3.generate(donutConfig);
558
+ var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
559
+ donutChartTitle.text("");
560
+ donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
561
+ donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
577
562
 
578
- var chart2 = c3.generate({
579
- axis: {
580
- x: {
581
- show: false
582
- },
583
- y: {
584
- show: false
585
- }
586
- },
587
- bindto: '#chart-pf-sparkline',
588
- color: {
589
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
590
- },
591
- data: {
592
- columns: [
593
- ['Last 30 days', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
594
- ],
595
- type: 'area'
596
- },
597
- legend: {
598
- show: false
599
- },
600
- point: {
601
- r: 1,
602
- focus: {
603
- expand: {
604
- r: 4
605
- }
606
- }
607
- },
608
- size: {
609
- height: 40
610
- },
611
- tooltip: {
612
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
613
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
614
- for (i = 0; i < d.length; i++) {
615
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
616
- }
617
- }
618
- }
619
- });
620
- </script>
621
- </div>
622
- <div class="col-xs-12 col-sm-4 col-md-4">
623
- <h3 class="card-pf-subtitle">Memory</h3>
624
- <p class="card-pf-utilization-details">
625
- <span class="card-pf-utilization-card-details-count">256</span>
626
- <span class="card-pf-utilization-card-details-description">
627
- <span class="card-pf-utilization-card-details-line-1">Available</span>
628
- <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
629
- </span>
630
- </p>
631
- <div id="chart-pf-donut-2"></div>
632
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
633
- <script>
634
- var chart3 = c3.generate({
635
- bindto: '#chart-pf-donut-2',
636
- type: "donut",
637
- donut: {
638
- title: "A",
639
- label: {show: false},
640
- width: 11
641
- },
642
- size: {
643
- height: 171, // produces a diameter of 150 and a centered chart
644
- },
645
- legend: {
646
- show: false
647
- },
648
- color: {
649
- pattern: ["#3f9c35","#D1D1D1"]
650
- },
651
- tooltip: {
652
- contents: function (d) {
653
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
654
- Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
655
- '</span>';
656
- }
657
- },
658
- data: {
659
- type: "donut",
660
- columns: [
661
- ["Used", 41],
662
- ["Available", 59]
663
- ],
664
- groups: [
665
- ["used", "available"]
666
- ],
667
- order: null
668
- },
669
- });
563
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
564
+ sparklineConfig.bindto = '#chart-pf-sparkline-1';
565
+ sparklineConfig.data = {
566
+ columns: [
567
+ ['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
568
+ ],
569
+ type: 'area'
570
+ };
571
+ var chart2 = c3.generate(sparklineConfig);
572
+ </script>
573
+ </div>
574
+ <div class="col-xs-12 col-sm-4 col-md-4">
575
+ <h3 class="card-pf-subtitle">Memory</h3>
576
+ <p class="card-pf-utilization-details">
577
+ <span class="card-pf-utilization-card-details-count">256</span>
578
+ <span class="card-pf-utilization-card-details-description">
579
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
580
+ <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
581
+ </span>
582
+ </p>
583
+ <div id="chart-pf-donut-2"></div>
584
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
585
+ <script>
586
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
587
+ donutConfig.bindto = '#chart-pf-donut-2';
588
+ donutConfig.data = {
589
+ type: "donut",
590
+ columns: [
591
+ ["Used", 41],
592
+ ["Available", 59]
593
+ ],
594
+ groups: [
595
+ ["used", "available"]
596
+ ],
597
+ order: null
598
+ };
599
+ donutConfig.tooltip = {
600
+ contents: function (d) {
601
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
602
+ Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
603
+ '</span>';
604
+ }
605
+ };
670
606
 
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);
607
+ var chart3 = c3.generate(donutConfig);
608
+ var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
609
+ donutChartTitle.text("");
610
+ donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
611
+ donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
675
612
 
676
- var chart4 = c3.generate({
677
- axis: {
678
- x: {
679
- show: false
680
- },
681
- y: {
682
- show: false
683
- }
684
- },
685
- bindto: '#chart-pf-sparkline-2',
686
- color: {
687
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
688
- },
689
- data: {
690
- columns: [
691
- ['Last 30 days', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
692
- ],
693
- type: 'area'
694
- },
695
- legend: {
696
- show: false
697
- },
698
- point: {
699
- r: 1,
700
- focus: {
701
- expand: {
702
- r: 4
703
- }
704
- }
705
- },
706
- size: {
707
- height: 40
708
- },
709
- tooltip: {
710
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
711
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
712
- for (i = 0; i < d.length; i++) {
713
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
714
- }
715
- }
716
- }
717
- });
718
- </script>
719
- </div>
720
- <div class="col-xs-12 col-sm-4 col-md-4">
721
- <h3 class="card-pf-subtitle">Network</h3>
722
- <p class="card-pf-utilization-details">
723
- <span class="card-pf-utilization-card-details-count">200</span>
724
- <span class="card-pf-utilization-card-details-description">
725
- <span class="card-pf-utilization-card-details-line-1">Available</span>
726
- <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
727
- </span>
728
- </p>
729
- <div id="chart-pf-donut-3"></div>
730
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
731
- <script>
732
- var chart5 = c3.generate({
733
- bindto: '#chart-pf-donut-3',
734
- type: "donut",
735
- donut: {
736
- title: "A",
737
- label: {show: false},
738
- width: 11
739
- },
740
- size: {
741
- height: 171, // produces a diameter of 150 and a centered chart
742
- },
743
- legend: {
744
- show: false
745
- },
746
- color: {
747
- pattern: ["#EC7A08","#D1D1D1"]
748
- },
749
- tooltip: {
750
- contents: function (d) {
751
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
752
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
753
- '</span>';
754
- }
755
- },
756
- data: {
757
- type: "donut",
758
- columns: [
759
- ["Used", 85],
760
- ["Available", 15]
761
- ],
762
- groups: [
763
- ["used", "available"]
764
- ],
765
- order: null
766
- },
767
- });
613
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
614
+ sparklineConfig.bindto = '#chart-pf-sparkline-2';
615
+ sparklineConfig.data = {
616
+ columns: [
617
+ ['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
618
+ ],
619
+ type: 'area'
620
+ };
621
+ var chart4 = c3.generate(sparklineConfig);
622
+ </script>
623
+ </div>
624
+ <div class="col-xs-12 col-sm-4 col-md-4">
625
+ <h3 class="card-pf-subtitle">Network</h3>
626
+ <p class="card-pf-utilization-details">
627
+ <span class="card-pf-utilization-card-details-count">200</span>
628
+ <span class="card-pf-utilization-card-details-description">
629
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
630
+ <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
631
+ </span>
632
+ </p>
633
+ <div id="chart-pf-donut-3"></div>
634
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
635
+ <script>
636
+ var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
637
+ donutConfig.bindto = '#chart-pf-donut-3';
638
+ donutConfig.data = {
639
+ type: "donut",
640
+ columns: [
641
+ ["Used", 85],
642
+ ["Available", 15]
643
+ ],
644
+ groups: [
645
+ ["used", "available"]
646
+ ],
647
+ order: null
648
+ };
649
+ donutConfig.tooltip = {
650
+ contents: function (d) {
651
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
652
+ Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
653
+ '</span>';
654
+ }
655
+ };
768
656
 
769
- var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
770
- donutChartTitle.text("");
771
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
772
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
657
+ var chart5 = c3.generate(donutConfig);
658
+ var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
659
+ donutChartTitle.text("");
660
+ donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
661
+ donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
773
662
 
774
- var chart6 = c3.generate({
775
- axis: {
776
- x: {
777
- show: false
778
- },
779
- y: {
780
- show: false
781
- }
782
- },
783
- bindto: '#chart-pf-sparkline-3',
784
- color: {
785
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
786
- },
787
- data: {
788
- columns: [
789
- ['Last 30 days', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
790
- ],
791
- type: 'area'
792
- },
793
- legend: {
794
- show: false
795
- },
796
- point: {
797
- r: 1,
798
- focus: {
799
- expand: {
800
- r: 4
801
- }
802
- }
803
- },
804
- size: {
805
- height: 40
806
- },
807
- tooltip: {
808
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
809
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
810
- for (i = 0; i < d.length; i++) {
811
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
812
- }
813
- }
814
- }
815
- });
816
- </script>
817
- </div>
818
- </div>
819
- </div>
820
- </div>
663
+ var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
664
+ sparklineConfig.bindto = '#chart-pf-sparkline-3';
665
+ sparklineConfig.data = {
666
+ columns: [
667
+ ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
668
+ ],
669
+ type: 'area'
670
+ };
671
+ var chart6 = c3.generate(sparklineConfig);
672
+ </script>
821
673
  </div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+
822
679
  </div><!-- /row -->
823
680
  <div class="row row-cards-pf">
824
681
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
825
- <div class="col-xs-12 col-sm-4 col-md-4">
826
- <div class="card-pf card-pf-utilization">
827
- <h2 class="card-pf-title">
828
- Network
829
- </h2>
830
- <div class="card-pf-body">
831
- <p class="card-pf-utilization-details">
832
- <span class="card-pf-utilization-card-details-count">200</span>
833
- <span class="card-pf-utilization-card-details-description">
834
- <span class="card-pf-utilization-card-details-line-1">Available</span>
835
- <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
836
- </span>
837
- </p>
838
- <div id="chart-pf-donut-4"></div>
839
- <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
840
- <script>
841
- var chart7 = c3.generate({
842
- bindto: '#chart-pf-donut-4',
843
- type: "donut",
844
- donut: {
845
- title: "A",
846
- label: {show: false},
847
- width: 11
848
- },
849
- size: {
850
- height: 171, // produces a diameter of 150 and a centered chart
851
- },
852
- legend: {
853
- show: false
854
- },
855
- color: {
856
- pattern: ["#EC7A08","#D1D1D1"]
857
- },
858
- tooltip: {
859
- contents: function (d) {
860
- return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
861
- Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
862
- '</span>';
863
- }
864
- },
865
- data: {
866
- type: "donut",
867
- columns: [
868
- ["Used", 85],
869
- ["Available", 15]
870
- ],
871
- groups: [
872
- ["used", "available"]
873
- ],
874
- order: null
875
- },
876
- });
682
+ <div class="col-xs-12 col-sm-4 col-md-4">
683
+ <div class="card-pf card-pf-utilization">
684
+ <h2 class="card-pf-title">
685
+ Network
686
+ </h2>
687
+ <div class="card-pf-body">
688
+ <p class="card-pf-utilization-details">
689
+ <span class="card-pf-utilization-card-details-count">200</span>
690
+ <span class="card-pf-utilization-card-details-description">
691
+ <span class="card-pf-utilization-card-details-line-1">Available</span>
692
+ <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
693
+ </span>
694
+ </p>
695
+ <div id="chart-pf-donut-4"></div>
696
+ <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
697
+ <script>
698
+ var c3ChartDefaults = $().c3ChartDefaults();
877
699
 
878
- var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
879
- donutChartTitle.text("");
880
- donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
881
- donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
700
+ var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
701
+ donutConfig.bindto = '#chart-pf-donut-4';
702
+ donutConfig.data = {
703
+ type: "donut",
704
+ columns: [
705
+ ["Used", 85],
706
+ ["Available", 15]
707
+ ],
708
+ groups: [
709
+ ["used", "available"]
710
+ ],
711
+ order: null
712
+ };
713
+ donutConfig.tooltip = {
714
+ contents: function (d) {
715
+ return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
716
+ Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
717
+ '</span>';
718
+ }
719
+ };
720
+
721
+ var chart1 = c3.generate(donutConfig);
722
+ var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
723
+ donutChartTitle.text("");
724
+ donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
725
+ donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
726
+
727
+ var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
728
+ sparklineConfig.bindto = '#chart-pf-sparkline-4';
729
+ sparklineConfig.data = {
730
+ columns: [
731
+ ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
732
+ ],
733
+ type: 'area'
734
+ };
735
+
736
+ var chart2 = c3.generate(sparklineConfig);
737
+ </script>
738
+ </div>
739
+ </div>
740
+ </div>
882
741
 
883
- var chart8 = c3.generate({
884
- axis: {
885
- x: {
886
- show: false
887
- },
888
- y: {
889
- show: false
890
- }
891
- },
892
- bindto: '#chart-pf-sparkline-4',
893
- color: {
894
- pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
895
- },
896
- data: {
897
- columns: [
898
- ['Last 30 days', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
899
- ],
900
- type: 'area'
901
- },
902
- legend: {
903
- show: false
904
- },
905
- point: {
906
- r: 1,
907
- focus: {
908
- expand: {
909
- r: 4
910
- }
911
- }
912
- },
913
- size: {
914
- height: 40
915
- },
916
- tooltip: {
917
- // because a sparkline should only contain a single data column, the tooltip will only work for a single data column
918
- contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
919
- for (i = 0; i < d.length; i++) {
920
- return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
921
- }
922
- }
923
- }
924
- });
925
- </script>
926
- </div>
927
- </div>
928
- </div>
929
742
  </div><!-- /row -->
930
743
  <div class="row row-cards-pf">
931
744
  <!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->