Merge ee42b17 into 78beb37

kroitor · Apr 23, 2020 · 4094c25 · 4094c25
2 parents 78beb37 + ee42b17
commit 4094c25
Show file tree

Hide file tree

Showing 3 changed files with 224 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -83,7 +83,6 @@ console.log (asciichart.plot (s, { height: 6 }))     // this rescales the graph
 
 <img width="787" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22825525/dd295294-ef9e-11e6-93d1-0beb80b93133.png">
 
-
 ### Auto-range
 
 ```javascript
@@ -96,10 +95,80 @@ console.log (asciichart.plot (s2))
 
 <img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22818710/9f157a74-ef7f-11e6-893a-f7494b5abef1.png">
 
+### Multiple Series
+
+```javascript
+var s2 = new Array (120)
+s2[0] = Math.round (Math.random () * 15)
+for (i = 1; i < s2.length; i++)
+    s2[i] = s2[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
+
+var s3 = new Array (120)
+s3[0] = Math.round (Math.random () * 15)
+for (i = 1; i < s3.length; i++)
+    s3[i] = s3[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
+
+console.log (asciichart.plot ([ s2, s3 ]))
+```
+
+<img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://user-images.githubusercontent.com/27967284/79398277-5322da80-7f91-11ea-8da8-e47976b76c12.png">
+
+### Colors
+
+```javascript
+var arr1 = new Array (120)
+arr1[0] = Math.round (Math.random () * 15)
+for (i = 1; i < arr1.length; i++)
+    arr1[i] = arr1[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
+
+var arr2 = new Array (120)
+arr2[0] = Math.round (Math.random () * 15)
+for (i = 1; i < arr2.length; i++)
+    arr2[i] = arr2[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
+
+var arr3 = new Array (120)
+arr3[0] = Math.round (Math.random () * 15)
+for (i = 1; i < arr3.length; i++)
+    arr3[i] = arr3[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
+
+var arr4 = new Array (120)
+arr4[0] = Math.round (Math.random () * 15)
+for (i = 1; i < arr4.length; i++)
+    arr4[i] = arr4[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
+
+var config = {
+    colors: [
+        asciichart.blue,
+        asciichart.green,
+        asciichart.default, // default color
+        undefined, // equivalent to default
+    ]
+}
+
+console.log (asciichart.plot([ arr1, arr2, arr3, arr4 ], config))
+```
+
+### Foreground / Background
+
+```JavaScript
+var config = {
+    colors: [
+        [ asciichart.blue, asciichart.default ], // foreground, default
+        [ asciichart.green, asciichart.darkgray ], // foreground, background
+        [ undefined, asciichart.red ], // default foreground color
+        [ asciichart.magenta, undefined ], // default background color
+    ]
+}
+
+console.log (asciichart.plot([ arr1, arr2, arr3, arr4 ], config))
+```
+
+<img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://user-images.githubusercontent.com/27967284/79398700-51a5e200-7f92-11ea-9048-8dbdeeb60830.png">
+
 ### See Also
 
 A util by [madnight](https://github.com/madnight) for drawing Bitcoin/Ether/altcoin charts in command-line console: [bitcoin-chart-cli](https://github.com/madnight/bitcoin-chart-cli).
-  
+
 ![bitcoin-chart-cli](https://camo.githubusercontent.com/494806efd925c4cd56d8370c1d4e8b751812030a/68747470733a2f2f692e696d6775722e636f6d2f635474467879362e706e67)
 
 ### Ports

diff --git a/asciichart.js b/asciichart.js
@@ -2,14 +2,61 @@
 
 (function (exports) {
 
+    exports.black = 0
+    exports.red = 1,
+    exports.green = 2
+    exports.yellow = 3
+    exports.blue = 4
+    exports.magenta = 5
+    exports.cyan = 6
+    exports.lightgray = 7
+    exports.default = 9
+    exports.darkgray = 60
+    exports.lightred = 61
+    exports.lightgreen = 62
+    exports.lightyellow = 63
+    exports.lightblue = 64
+    exports.lightmagenta = 65
+    exports.lightcyan = 66
+    exports.white = 67
+    exports.escape = "\x1b["
+    exports.end = "m"
+    exports.reset = exports.escape + "0" + exports.end
+
+    function colored (char, color) {
+        // do not color it if color is not specified
+        if (color === undefined) {
+            return char;
+        } else if (Array.isArray (color)) {
+            let foreground = 30 + ((color[0] === undefined) ? exports.default : color[0])
+            let background = 40 + ((color[1] === undefined) ? exports.default : color[1])
+            foreground = foreground.toString ()
+            background = background.toString ()
+            return exports.escape + foreground + ';' + background + exports.end + char + exports.reset
+        } else {
+            let foreground = (30 + color).toString ()
+            return exports.escape + foreground + exports.end + char + exports.reset
+        }
+    }
+
+    exports.colored = colored
+
     exports.plot = function (series, cfg = undefined) {
+        // this function takes oth one array and array of arrays
+        // if an array of numbers is passed it is transfored to
+        // an array of exactly one array with numbers
+        if (typeof(series[0]) == "number"){
+            series = [series]
+        }
 
-        let min = series[0]
-        let max = series[0]
+        let min = series[0][0]
+        let max = series[0][0]
 
-        for (let i = 1; i < series.length; i++) {
-            min = Math.min (min, series[i])
-            max = Math.max (max, series[i])
+        for (let j = 0; j < series.length; j++) {
+            for (let i = 0; i < series[j].length; i++) {
+                min = Math.min(min, series[j][i])
+                max = Math.max(max, series[j][i])
+            }
         }
 
         let defaultSymbols = [ '┼', '┤', '╶', '╴', '─', '╰', '╭', '╮', '╯', '│' ]
@@ -18,11 +65,16 @@
         let offset  = (typeof cfg.offset  !== 'undefined') ? cfg.offset  : 3
         let padding = (typeof cfg.padding !== 'undefined') ? cfg.padding : '           '
         let height  = (typeof cfg.height  !== 'undefined') ? cfg.height  : range
+        let colors  = (typeof cfg.colors !== 'undefined') ? cfg.colors : []
         let ratio   = range !== 0 ? height / range : 1;
         let min2    = Math.round (min * ratio)
         let max2    = Math.round (max * ratio)
         let rows    = Math.abs (max2 - min2)
-        let width   = series.length + offset
+        let width = 0
+        for (let i = 0; i < series.length; i++) {
+            width = Math.max(width, series[i].length)
+        }
+        width = width + offset
         let symbols = (typeof cfg.symbols !== 'undefined') ? cfg.symbols : defaultSymbols
         let format  = (typeof cfg.format !== 'undefined') ? cfg.format : function (x) {
             return (padding + x.toFixed (2)).slice (-padding.length)
@@ -41,25 +93,27 @@
             result[y - min2][offset - 1] = (y == 0) ? symbols[0] : symbols[1]
         }
 
-        let y0 = Math.round (series[0] * ratio) - min2
-        result[rows - y0][offset - 1] = symbols[0] // first value
+        for (let j = 0; j < series.length; j++) {
+            let currentColor = colors[j % colors.length]
+            let y0 = Math.round (series[j][0] * ratio) - min2
+            result[rows - y0][offset - 1] = colored(symbols[0], currentColor) // first value
 
-        for (let x = 0; x < series.length - 1; x++) { // plot the line
-            let y0 = Math.round (series[x + 0] * ratio) - min2
-            let y1 = Math.round (series[x + 1] * ratio) - min2
-            if (y0 == y1) {
-                result[rows - y0][x + offset] = symbols[4]
-            } else {
-                result[rows - y1][x + offset] = (y0 > y1) ? symbols[5] : symbols[6]
-                result[rows - y0][x + offset] = (y0 > y1) ? symbols[7] : symbols[8]
-                let from = Math.min (y0, y1)
-                let to = Math.max (y0, y1)
-                for (let y = from + 1; y < to; y++) {
-                    result[rows - y][x + offset] = symbols[9]
+            for (let x = 0; x < series[j].length - 1; x++) { // plot the line
+                let y0 = Math.round (series[j][x + 0] * ratio) - min2
+                let y1 = Math.round (series[j][x + 1] * ratio) - min2
+                if (y0 == y1) {
+                    result[rows - y0][x + offset] = colored(symbols[4], currentColor)
+                } else {
+                    result[rows - y1][x + offset] = colored((y0 > y1) ? symbols[5] : symbols[6], currentColor)
+                    result[rows - y0][x + offset] = colored((y0 > y1) ? symbols[7] : symbols[8], currentColor)
+                    let from = Math.min (y0, y1)
+                    let to = Math.max (y0, y1)
+                    for (let y = from + 1; y < to; y++) {
+                        result[rows - y][x + offset] = colored(symbols[9], currentColor)
+                    }
                 }
             }
         }
-
         return result.map (function (x) { return x.join ('') }).join ('\n')
     }
 

diff --git a/test.js b/test.js
@@ -27,7 +27,7 @@ var config = {
 var s = []
 for (var i = 0; i < width; i++)
     s[i] = 15 * Math.cos (i * ((Math.PI * 8) / width)) // values range from -15 to +15
-console.log (asciichart.plot (s, config))     // this rescales the graph to ±3 lines
+console.log (asciichart.plot (s, config)) // this rescales the graph to ±3 lines
 
 console.log (line)
 console.log ("auto-range\n")
@@ -45,3 +45,80 @@ var s3 = new Array (width)
 for (i = 0; i < width; i++)
     s3[i] = 1.0
 console.log (asciichart.plot (s3) + "\n")
+
+// test multiple
+console.log (line)
+console.log ("multiple disjoint array test\n")
+
+
+var arr1 = new Array (width)
+for (var i = 0; i < arr1.length; i++)
+    arr1[i] = 5 * Math.sin (i * ((Math.PI * 4) / arr1.length))
+
+var arr2 = new Array (width)
+for (var i = 0; i < arr2.length; i++)
+    arr2[i] = arr1[i] + 2
+
+console.log (asciichart.plot ([ arr1, arr2 ]))
+
+// test multiple
+console.log (line)
+console.log ("multiple intersecting arrays test\n")
+
+var arr1 = new Array (width)
+for (var i = 0; i < arr1.length; i++)
+    arr1[i] = 5 * Math.sin (i * ((Math.PI * 4) / arr1.length))
+
+var arr2 = new Array (width)
+for (var i = 0; i < arr2.length; i++)
+    arr2[i] = 5 *  Math.sin (Math.PI + i * ((Math.PI * 4) / arr2.length))
+
+
+console.log (asciichart.plot ([ arr1, arr2 ]))
+
+// test multiple colored
+console.log (line)
+console.log ("multiple intersecting arrays with colors test\n")
+
+var arr1 = new Array (width)
+for (var i = 0; i < arr1.length; i++)
+    arr1[i] = 5 * Math.sin (i * ((Math.PI * 4) / arr1.length))
+
+var arr2 = new Array (width)
+for (var i = 0; i < arr2.length; i++)
+    arr2[i] = 5 * Math.sin (Math.PI + i * ((Math.PI * 4) / arr2.length))
+
+var arr3 = new Array (width)
+for (var i = 0; i < arr3.length; i++)
+    arr3[i] = 5 - i * 0.2
+
+var arr4 = new Array (width)
+for (var i = 0; i < arr4.length; i++)
+    arr4[i] = 10 + 5 * Math.cos (i * ((Math.PI * 4) / arr1.length))
+
+var config = {
+    colors: [
+        asciichart.blue,
+        asciichart.green,
+        asciichart.magenta,
+        asciichart.red
+    ]
+}
+
+var series = [ arr1, arr2, arr3, arr4 ]
+
+console.log (asciichart.plot (series, config))
+
+// test multiple colored background
+console.log (line)
+console.log ("multiple intersecting arrays with colors test\n")
+
+var config = {
+    colors: [
+        [ asciichart.default, asciichart.lightblue ],
+        [ undefined, asciichart.white ],
+        [ asciichart.lightgreen, undefined ],
+        [ asciichart.red, asciichart.default ]
+    ],
+}
+console.log (asciichart.plot (series, config))