From ac9e60684ceade66a40760394be40a2d26c6b5c0 Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Fri, 24 Jul 2020 18:37:38 +0200
Subject: [PATCH] add sparkline demo in inline charts (#2922)

---
 pages/charts/inline.html | 261 ++++++++-------------------------------
 1 file changed, 51 insertions(+), 210 deletions(-)

diff --git a/pages/charts/inline.html b/pages/charts/inline.html
index d77c5e0b4..a76f16062 100644
--- a/pages/charts/inline.html
+++ b/pages/charts/inline.html
@@ -934,6 +934,50 @@
         </div>
         <!-- /.row -->
 
+        <div class="row">
+          <div class="col-12">
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">
+                  <i class="far fa-chart-bar"></i>
+                  Sparklines
+                </h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                    <i class="fas fa-minus"></i>
+                  </button>
+                  <button type="button" class="btn btn-tool" data-card-widget="remove">
+                    <i class="fas fa-times"></i>
+                  </button>
+                </div>
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                <div class="row">
+                  <div class="col-4 text-center">
+                    <div id="sparkline-1"></div>
+                  </div>
+                  <!-- ./col -->
+                  <div class="col-4 text-center">
+                    <div id="sparkline-2"></div>
+                  </div>
+                  <!-- ./col -->
+                  <div class="col-4 text-center">
+                    <div id="sparkline-3"></div>
+                  </div>
+                  <!-- ./col -->
+                </div>
+                <!-- /.row -->
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+        </div>
+        <!-- /.row -->
+
       </div><!-- /.container-fluid -->
     </section>
     <!-- /.content -->
@@ -965,7 +1009,7 @@
 <!-- jQuery Knob -->
 <script src="../../plugins/jquery-knob/jquery.knob.min.js"></script>
 <!-- Sparkline -->
-<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
+<script src="../../plugins/sparklines/sparkline.js"></script>
 <!-- page script -->
 <script>
   $(function () {
@@ -1033,219 +1077,16 @@
     /* END JQUERY KNOB */
 
     //INITIALIZE SPARKLINE CHARTS
-    $('.sparkline').each(function () {
-      var $this = $(this)
-      $this.sparkline('html', $this.data())
-    })
+    var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 240, height: 70, lineColor: '#92c1dc', endColor: '#92c1dc' })
+    var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 240, height: 70, lineColor: '#f56954', endColor: '#f56954' })
+    var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 240, height: 70, lineColor: '#3af221', endColor: '#3af221' })
 
-    /* SPARKLINE DOCUMENTATION EXAMPLES https://omnipotent.net/jquery.sparkline/#s-about */
-    drawDocSparklines()
-    drawMouseSpeedDemo()
+    sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
+    sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
+    sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])
 
   })
 
-  function drawDocSparklines() {
-
-    // Bar + line composite charts
-    $('#compositebar').sparkline('html', {
-      type    : 'bar',
-      barColor: '#aaf'
-    })
-    $('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
-      {
-        composite: true,
-        fillColor: false,
-        lineColor: 'red'
-      })
-
-
-    // Line charts taking their values from the tag
-    $('.sparkline-1').sparkline()
-
-    // Larger line charts for the docs
-    $('.largeline').sparkline('html',
-      {
-        type  : 'line',
-        height: '2.5em',
-        width : '4em'
-      })
-
-    // Customized line chart
-    $('#linecustom').sparkline('html',
-      {
-        height      : '1.5em',
-        width       : '8em',
-        lineColor   : '#f00',
-        fillColor   : '#ffa',
-        minSpotColor: false,
-        maxSpotColor: false,
-        spotColor   : '#77f',
-        spotRadius  : 3
-      })
-
-    // Bar charts using inline values
-    $('.sparkbar').sparkline('html', { type: 'bar' })
-
-    $('.barformat').sparkline([1, 3, 5, 3, 8], {
-      type               : 'bar',
-      tooltipFormat      : '{{value:levels}} - {{value}}',
-      tooltipValueLookups: {
-        levels: $.range_map({
-          ':2' : 'Low',
-          '3:6': 'Medium',
-          '7:' : 'High'
-        })
-      }
-    })
-
-    // Tri-state charts using inline values
-    $('.sparktristate').sparkline('html', { type: 'tristate' })
-    $('.sparktristatecols').sparkline('html',
-      {
-        type    : 'tristate',
-        colorMap: {
-          '-2': '#fa7',
-          '2' : '#44f'
-        }
-      })
-
-    // Composite line charts, the second using values supplied via javascript
-    $('#compositeline').sparkline('html', {
-      fillColor     : false,
-      changeRangeMin: 0,
-      chartRangeMax : 10
-    })
-    $('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
-      {
-        composite     : true,
-        fillColor     : false,
-        lineColor     : 'red',
-        changeRangeMin: 0,
-        chartRangeMax : 10
-      })
-
-    // Line charts with normal range marker
-    $('#normalline').sparkline('html',
-      {
-        fillColor     : false,
-        normalRangeMin: -1,
-        normalRangeMax: 8
-      })
-    $('#normalExample').sparkline('html',
-      {
-        fillColor       : false,
-        normalRangeMin  : 80,
-        normalRangeMax  : 95,
-        normalRangeColor: '#4f4'
-      })
-
-    // Discrete charts
-    $('.discrete1').sparkline('html',
-      {
-        type     : 'discrete',
-        lineColor: 'blue',
-        xwidth   : 18
-      })
-    $('#discrete2').sparkline('html',
-      {
-        type          : 'discrete',
-        lineColor     : 'blue',
-        thresholdColor: 'red',
-        thresholdValue: 4
-      })
-
-    // Bullet charts
-    $('.sparkbullet').sparkline('html', { type: 'bullet' })
-
-    // Pie charts
-    $('.sparkpie').sparkline('html', {
-      type  : 'pie',
-      height: '1.0em'
-    })
-
-    // Box plots
-    $('.sparkboxplot').sparkline('html', { type: 'box' })
-    $('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
-      {
-        type        : 'box',
-        raw         : true,
-        showOutliers: true,
-        target      : 6
-      })
-
-    // Box plot with specific field order
-    $('.boxfieldorder').sparkline('html', {
-      type                     : 'box',
-      tooltipFormatFieldlist   : ['med', 'lq', 'uq'],
-      tooltipFormatFieldlistKey: 'field'
-    })
-
-    // click event demo sparkline
-    $('.clickdemo').sparkline()
-    $('.clickdemo').bind('sparklineClick', function (ev) {
-      var sparkline = ev.sparklines[0],
-          region    = sparkline.getCurrentRegionFields()
-      value         = region.y
-      alert('Clicked on x=' + region.x + ' y=' + region.y)
-    })
-
-    // mouseover event demo sparkline
-    $('.mouseoverdemo').sparkline()
-    $('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
-      var sparkline = ev.sparklines[0],
-          region    = sparkline.getCurrentRegionFields()
-      value         = region.y
-      $('.mouseoverregion').text('x=' + region.x + ' y=' + region.y)
-    }).bind('mouseleave', function () {
-      $('.mouseoverregion').text('')
-    })
-  }
-
-  /**
-   ** Draw the little mouse speed animated graph
-   ** This just attaches a handler to the mousemove event to see
-   ** (roughly) how far the mouse has moved
-   ** and then updates the display a couple of times a second via
-   ** setTimeout()
-   **/
-  function drawMouseSpeedDemo() {
-    var mrefreshinterval = 500 // update display every 500ms
-    var lastmousex       = -1
-    var lastmousey       = -1
-    var lastmousetime
-    var mousetravel      = 0
-    var mpoints          = []
-    var mpoints_max      = 30
-    $('html').mousemove(function (e) {
-      var mousex = e.pageX
-      var mousey = e.pageY
-      if (lastmousex > -1) {
-        mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey))
-      }
-      lastmousex = mousex
-      lastmousey = mousey
-    })
-    var mdraw = function () {
-      var md      = new Date()
-      var timenow = md.getTime()
-      if (lastmousetime && lastmousetime != timenow) {
-        var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000)
-        mpoints.push(pps)
-        if (mpoints.length > mpoints_max) {
-          mpoints.splice(0, 1)
-        }
-        mousetravel = 0
-        $('#mousespeed').sparkline(mpoints, {
-          width        : mpoints.length * 2,
-          tooltipSuffix: ' pixels per second'
-        })
-      }
-      lastmousetime = timenow
-      setTimeout(mdraw, mrefreshinterval)
-    }
-    // We could use setInterval instead, but I prefer to do it this way
-    setTimeout(mdraw, mrefreshinterval);
-  }
 </script>
 </body>
 </html>