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/spec/html/layout-alt-fixed-with-footer.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 -->