src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/dist/js/pages/dashboard2.js

   1 $(function () {
   2
   3   'use strict';
   4
   5   /* ChartJS
   6    * -------
   7    * Here we will create a few charts using ChartJS
   8    */
   9
  10   //-----------------------
  11   //- MONTHLY SALES CHART -
  12   //-----------------------
  13
  14   // Get context with jQuery - using jQuery's .get() method.
  15   var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
  16   // This will get the first returned node in the jQuery collection.
  17   var salesChart = new Chart(salesChartCanvas);
  18
  19   var salesChartData = {
  20     labels: ["January", "February", "March", "April", "May", "June", "July"],
  21     datasets: [
  22       {
  23         label: "Electronics",
  24         fillColor: "rgb(210, 214, 222)",
  25         strokeColor: "rgb(210, 214, 222)",
  26         pointColor: "rgb(210, 214, 222)",
  27         pointStrokeColor: "#c1c7d1",
  28         pointHighlightFill: "#fff",
  29         pointHighlightStroke: "rgb(220,220,220)",
  30         data: [65, 59, 80, 81, 56, 55, 40]
  31       },
  32       {
  33         label: "Digital Goods",
  34         fillColor: "rgba(60,141,188,0.9)",
  35         strokeColor: "rgba(60,141,188,0.8)",
  36         pointColor: "#3b8bba",
  37         pointStrokeColor: "rgba(60,141,188,1)",
  38         pointHighlightFill: "#fff",
  39         pointHighlightStroke: "rgba(60,141,188,1)",
  40         data: [28, 48, 40, 19, 86, 27, 90]
  41       }
  42     ]
  43   };
  44
  45   var salesChartOptions = {
  46     //Boolean - If we should show the scale at all
  47     showScale: true,
  48     //Boolean - Whether grid lines are shown across the chart
  49     scaleShowGridLines: false,
  50     //String - Colour of the grid lines
  51     scaleGridLineColor: "rgba(0,0,0,.05)",
  52     //Number - Width of the grid lines
  53     scaleGridLineWidth: 1,
  54     //Boolean - Whether to show horizontal lines (except X axis)
  55     scaleShowHorizontalLines: true,
  56     //Boolean - Whether to show vertical lines (except Y axis)
  57     scaleShowVerticalLines: true,
  58     //Boolean - Whether the line is curved between points
  59     bezierCurve: true,
  60     //Number - Tension of the bezier curve between points
  61     bezierCurveTension: 0.3,
  62     //Boolean - Whether to show a dot for each point
  63     pointDot: false,
  64     //Number - Radius of each point dot in pixels
  65     pointDotRadius: 4,
  66     //Number - Pixel width of point dot stroke
  67     pointDotStrokeWidth: 1,
  68     //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
  69     pointHitDetectionRadius: 20,
  70     //Boolean - Whether to show a stroke for datasets
  71     datasetStroke: true,
  72     //Number - Pixel width of dataset stroke
  73     datasetStrokeWidth: 2,
  74     //Boolean - Whether to fill the dataset with a color
  75     datasetFill: true,
  76     //String - A legend template
  77     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
  78     //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
  79     maintainAspectRatio: true,
  80     //Boolean - whether to make the chart responsive to window resizing
  81     responsive: true
  82   };
  83
  84   //Create the line chart
  85   salesChart.Line(salesChartData, salesChartOptions);
  86
  87   //---------------------------
  88   //- END MONTHLY SALES CHART -
  89   //---------------------------
  90
  91   //-------------
  92   //- PIE CHART -
  93   //-------------
  94   // Get context with jQuery - using jQuery's .get() method.
  95   var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
  96   var pieChart = new Chart(pieChartCanvas);
  97   var PieData = [
  98     {
  99       value: 700,
 100       color: "#f56954",
 101       highlight: "#f56954",
 102       label: "Chrome"
 103     },
 104     {
 105       value: 500,
 106       color: "#00a65a",
 107       highlight: "#00a65a",
 108       label: "IE"
 109     },
 110     {
 111       value: 400,
 112       color: "#f39c12",
 113       highlight: "#f39c12",
 114       label: "FireFox"
 115     },
 116     {
 117       value: 600,
 118       color: "#00c0ef",
 119       highlight: "#00c0ef",
 120       label: "Safari"
 121     },
 122     {
 123       value: 300,
 124       color: "#3c8dbc",
 125       highlight: "#3c8dbc",
 126       label: "Opera"
 127     },
 128     {
 129       value: 100,
 130       color: "#d2d6de",
 131       highlight: "#d2d6de",
 132       label: "Navigator"
 133     }
 134   ];
 135   var pieOptions = {
 136     //Boolean - Whether we should show a stroke on each segment
 137     segmentShowStroke: true,
 138     //String - The colour of each segment stroke
 139     segmentStrokeColor: "#fff",
 140     //Number - The width of each segment stroke
 141     segmentStrokeWidth: 1,
 142     //Number - The percentage of the chart that we cut out of the middle
 143     percentageInnerCutout: 50, // This is 0 for Pie charts
 144     //Number - Amount of animation steps
 145     animationSteps: 100,
 146     //String - Animation easing effect
 147     animationEasing: "easeOutBounce",
 148     //Boolean - Whether we animate the rotation of the Doughnut
 149     animateRotate: true,
 150     //Boolean - Whether we animate scaling the Doughnut from the centre
 151     animateScale: false,
 152     //Boolean - whether to make the chart responsive to window resizing
 153     responsive: true,
 154     // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
 155     maintainAspectRatio: false,
 156     //String - A legend template
 157     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
 158     //String - A tooltip template
 159     tooltipTemplate: "<%=value %> <%=label%> users"
 160   };
 161   //Create pie or douhnut chart
 162   // You can switch between pie and douhnut using the method below.
 163   pieChart.Doughnut(PieData, pieOptions);
 164   //-----------------
 165   //- END PIE CHART -
 166   //-----------------
 167
 168   /* jVector Maps
 169    * ------------
 170    * Create a world map with markers
 171    */
 172   $('#world-map-markers').vectorMap({
 173     map: 'world_mill_en',
 174     normalizeFunction: 'polynomial',
 175     hoverOpacity: 0.7,
 176     hoverColor: false,
 177     backgroundColor: 'transparent',
 178     regionStyle: {
 179       initial: {
 180         fill: 'rgba(210, 214, 222, 1)',
 181         "fill-opacity": 1,
 182         stroke: 'none',
 183         "stroke-width": 0,
 184         "stroke-opacity": 1
 185       },
 186       hover: {
 187         "fill-opacity": 0.7,
 188         cursor: 'pointer'
 189       },
 190       selected: {
 191         fill: 'yellow'
 192       },
 193       selectedHover: {}
 194     },
 195     markerStyle: {
 196       initial: {
 197         fill: '#00a65a',
 198         stroke: '#111'
 199       }
 200     },
 201     markers: [
 202       {latLng: [41.90, 12.45], name: 'Vatican City'},
 203       {latLng: [43.73, 7.41], name: 'Monaco'},
 204       {latLng: [-0.52, 166.93], name: 'Nauru'},
 205       {latLng: [-8.51, 179.21], name: 'Tuvalu'},
 206       {latLng: [43.93, 12.46], name: 'San Marino'},
 207       {latLng: [47.14, 9.52], name: 'Liechtenstein'},
 208       {latLng: [7.11, 171.06], name: 'Marshall Islands'},
 209       {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
 210       {latLng: [3.2, 73.22], name: 'Maldives'},
 211       {latLng: [35.88, 14.5], name: 'Malta'},
 212       {latLng: [12.05, -61.75], name: 'Grenada'},
 213       {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
 214       {latLng: [13.16, -59.55], name: 'Barbados'},
 215       {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
 216       {latLng: [-4.61, 55.45], name: 'Seychelles'},
 217       {latLng: [7.35, 134.46], name: 'Palau'},
 218       {latLng: [42.5, 1.51], name: 'Andorra'},
 219       {latLng: [14.01, -60.98], name: 'Saint Lucia'},
 220       {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
 221       {latLng: [1.3, 103.8], name: 'Singapore'},
 222       {latLng: [1.46, 173.03], name: 'Kiribati'},
 223       {latLng: [-21.13, -175.2], name: 'Tonga'},
 224       {latLng: [15.3, -61.38], name: 'Dominica'},
 225       {latLng: [-20.2, 57.5], name: 'Mauritius'},
 226       {latLng: [26.02, 50.55], name: 'Bahrain'},
 227       {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
 228     ]
 229   });
 230
 231   /* SPARKLINE CHARTS
 232    * ----------------
 233    * Create a inline charts with spark line
 234    */
 235
 236   //-----------------
 237   //- SPARKLINE BAR -
 238   //-----------------
 239   $('.sparkbar').each(function () {
 240     var $this = $(this);
 241     $this.sparkline('html', {
 242       type: 'bar',
 243       height: $this.data('height') ? $this.data('height') : '30',
 244       barColor: $this.data('color')
 245     });
 246   });
 247
 248   //-----------------
 249   //- SPARKLINE PIE -
 250   //-----------------
 251   $('.sparkpie').each(function () {
 252     var $this = $(this);
 253     $this.sparkline('html', {
 254       type: 'pie',
 255       height: $this.data('height') ? $this.data('height') : '90',
 256       sliceColors: $this.data('color')
 257     });
 258   });
 259
 260   //------------------
 261   //- SPARKLINE LINE -
 262   //------------------
 263   $('.sparkline').each(function () {
 264     var $this = $(this);
 265     $this.sparkline('html', {
 266       type: 'line',
 267       height: $this.data('height') ? $this.data('height') : '90',
 268       width: '100%',
 269       lineColor: $this.data('linecolor'),
 270       fillColor: $this.data('fillcolor'),
 271       spotColor: $this.data('spotcolor')
 272     });
 273   });
 274 });