Merge pull request #170 from apexcharts/feature/logScale

Feature/log scale
apexcharts · Oct 23, 2018 · 9de5aba · 9de5aba
2 parents 5d0586a + b92f6e3
commit 9de5aba
Show file tree

Hide file tree

Showing 13 changed files with 596 additions and 283 deletions.
diff --git a/samples/dashboards/realtime/assets/edit-on-codepen.png b/samples/dashboards/realtime/assets/edit-on-codepen.png
diff --git a/samples/dashboards/realtime/assets/styles.css b/samples/dashboards/realtime/assets/styles.css
@@ -41,3 +41,12 @@ h1, h2, h3, h4, h5, h6, strong {
   font-weight: bold;
   font-size: 20px;
 }
+
+.edit-on-codepen {
+  text-align: right;
+  width: 100%;
+  padding: 0 20px 40px;
+  position: relative;
+  top: -30px;
+  cursor: pointer;
+}
diff --git a/samples/dashboards/realtime/index.html b/samples/dashboards/realtime/index.html
@@ -60,6 +60,12 @@
 								</div>
 						</div>
 					</div>
+
+					<div class="row">
+						<div class="float-right edit-on-codepen">
+							<a target="_blank" href="https://codepen.io/apexcharts/pen/pxZKqL"><img src="assets/edit-on-codepen.png" alt="Edit on Codepen"></a>
+						</div>
+					</div>
 				</div>
 
 			</div>

diff --git a/samples/line/basic-line.html b/samples/line/basic-line.html
@@ -25,7 +25,6 @@
 
 
     <script src="../../dist/apexcharts.js"></script>
-    <script src="../assets/stock-prices.js"></script>
 
     <script>
         var options = {
@@ -44,7 +43,7 @@
             },
             series: [{
                 name: "Desktops",
-                data: [30, 41, 35, 51, 49, 62, 69, 91, 126]
+                data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
             }],
             title: {
                 text: 'Product Trends by Month',
@@ -56,10 +55,9 @@
                     opacity: 0.5
                 },
             },
-            labels: series.monthDataSeries1.dates,
             xaxis: {
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-            },
+            }
         }
 
         var chart = new ApexCharts(

diff --git a/samples/line/logarithmic-line.html b/samples/line/logarithmic-line.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Chart with Logarithmic Scale</title>
+
+
+    <link href="../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+            max-width: 650px;
+            margin: 35px auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="chart">
+
+    </div>
+
+
+    <script src="../../dist/apexcharts.js"></script>
+
+    <script>
+        var data = [{
+                x: 1994,
+                y: 2543763
+            },
+            {
+                x: 1995,
+                y: 4486659
+            },
+            {
+                x: 1996,
+                y: 7758386
+            },
+            {
+                x: 1997,
+                y: 12099221
+            },
+            {
+                x: 1998,
+                y: 18850762
+            },
+            {
+                x: 1999,
+                y: 28153765
+            },
+            {
+                x: 2000,
+                y: 41479495
+            },
+            {
+                x: 2001,
+                y: 50229224
+            },
+            {
+                x: 2002,
+                y: 66506501
+            },
+            {
+                x: 2003,
+                y: 78143598
+            },
+            {
+                x: 2004,
+                y: 91332777
+            },
+            {
+                x: 2005,
+                y: 103010128
+            },
+            {
+                x: 2006,
+                y: 116291681
+            },
+            {
+                x: 2007,
+                y: 137322698
+            },
+            {
+                x: 2008,
+                y: 157506752
+            },
+            {
+                x: 2009,
+                y: 176640381
+            },
+            {
+                x: 2010,
+                y: 202320297
+            },
+            {
+                x: 2011,
+                y: 223195735
+            },
+            {
+                x: 2012,
+                y: 249473624
+            },
+            {
+                x: 2013,
+                y: 272842810
+            },
+            {
+                x: 2014,
+                y: 295638556
+            },
+            {
+                x: 2015,
+                y: 318599615
+            },
+            {
+                x: 2016,
+                y: 342497123
+            }
+        ]
+        var options = {
+            chart: {
+                height: 350,
+                type: 'line',
+                zoom: {
+                    enabled: false
+                }
+            },
+            dataLabels: {
+                enabled: false
+            },
+            stroke: {
+                curve: 'straight'
+            },
+            series: [{
+                name: "Logarithmic",
+                data: data
+            }],
+
+            title: {
+                text: 'Logarithmic Scale',
+                align: 'left'
+            },
+
+            yaxis: {
+                min: 1000000,
+                tickAmount: 5,
+                logarithmic: true,
+                labels: {
+                    formatter: function (value) {
+                        var val = Math.abs(value)
+                        if (val >= 1000000) {
+                            val = (val / 1000000).toFixed(1) + ' M';
+                        }
+                        return val;
+                    }
+                }
+            }
+        }
+
+        var chart = new ApexCharts(
+            document.querySelector("#chart"),
+            options
+        );
+
+        chart.render();
+    </script>
+</body>
+
+</html>
diff --git a/src/charts/Line.js b/src/charts/Line.js
@@ -1,3 +1,4 @@
+import CoreUtils from '../modules/CoreUtils'
 import Graphics from '../modules/Graphics'
 import Fill from '../modules/Fill'
 import DataLabels from '../modules/DataLabels'
@@ -42,7 +43,13 @@ class Line {
       'clip-path': `url(#gridRectMask${w.globals.cuid})`
     })
 
+    const coreUtils = new CoreUtils(this.ctx, w)
+    series = coreUtils.getLogSeries(series)
+
     let yRatio = this.xyRatios.yRatio
+
+    yRatio = coreUtils.getLogYRatios(yRatio)
+
     let zRatio = this.xyRatios.zRatio
     let xRatio = this.xyRatios.xRatio
     let baseLineY = this.xyRatios.baseLineY

diff --git a/src/modules/Animations.js b/src/modules/Animations.js
@@ -151,6 +151,13 @@ class Animations {
     )
   }
 
+  showDelayedElements () {
+    this.w.globals.delayedElements.forEach((d) => {
+      const ele = d.el
+      ele.classList.remove('hidden')
+    })
+  }
+
   // SVG.js animation for morphing one path to another
   morphSVG (
     el,
@@ -196,10 +203,7 @@ class Animations {
         }
       }
 
-      w.globals.delayedElements.forEach((d) => {
-        const ele = d.el
-        ele.classList.remove('hidden')
-      })
+      this.showDelayedElements()
     })
   }
 }

diff --git a/src/modules/CoreUtils.js b/src/modules/CoreUtils.js
@@ -203,6 +203,56 @@ class CoreUtils {
     }
   }
 
+  getLogSeries (series) {
+    const w = this.w
+
+    w.globals.seriesLog = series.map((s, i) => {
+      if (w.config.yaxis[i].logarithmic) {
+        return s.map((d) => {
+          if (d === null) return null
+
+          const logVal = (Math.log(d) - Math.log(w.globals.minYArr[i])) / (Math.log(w.globals.maxYArr[i]) - Math.log(w.globals.minYArr[i]))
+
+          return logVal
+        })
+      } else {
+        return s
+      }
+    })
+
+    return w.globals.seriesLog
+  }
+
+  getLogYRatios (yRatio) {
+    const gl = this.w.globals
+
+    gl.yLogRatio = []
+
+    gl.logYRange = gl.yRange.map((yRange, i) => {
+      if (this.w.config.yaxis[i].logarithmic) {
+        let maxY = Number.MIN_SAFE_INTEGER
+        let minY = Number.MAX_SAFE_INTEGER
+        let range = 1
+        gl.seriesLog.forEach((s, si) => {
+          s.forEach((v) => {
+            maxY = Math.max(v, maxY)
+            minY = Math.min(v, minY)
+          })
+        })
+
+        range = Math.pow(gl.yRange[i], Math.abs(minY - maxY) / gl.yRange[i])
+
+        gl.yLogRatio.push(range / gl.gridHeight)
+        return range
+      } else {
+        gl.yLogRatio.push(yRatio)
+        return yRatio
+      }
+    })
+
+    return gl.yLogRatio
+  }
+
   // Some config objects can be array - and we need to extend them correctly
   static extendArrayProps (configInstance, options) {
     if (options.yaxis) {

diff --git a/src/modules/Graphics.js b/src/modules/Graphics.js
@@ -255,6 +255,8 @@ class Graphics {
         speed: initialSpeed,
         delay: animationDelay
       })
+    } else {
+      anim.showDelayedElements()
     }
 
     if (w.globals.dataChanged && dynamicAnim && shouldAnimate) {