├── .gitignore
├── LICENSE
├── README.md
├── serial-plot-chartjs
    ├── client.html
    ├── dist
    │   ├── renderer_packed.js
    │   └── renderer_packed.js.map
    ├── package-lock.json
    ├── package.json
    ├── renderer.js
    ├── screenshot_chartjs.png
    └── webpack.config.js
├── serial-plot-client
    ├── README.md
    ├── client.html
    └── client.js
├── serial-plot-epoch
    ├── client.html
    ├── dist
    │   ├── css
    │   │   └── epoch.min.css
    │   ├── renderer_packed.js
    │   └── renderer_packed.js.map
    ├── package-lock.json
    ├── package.json
    ├── renderer.js
    ├── screenshot_epoch.png
    └── webpack.config.js
├── serial-plot-server
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    └── server.js
└── serial-plot-smoothie
    ├── client.html
    ├── cover.png
    ├── dist
        ├── renderer_packed.js
        └── renderer_packed.js.map
    ├── package-lock.json
    ├── package.json
    ├── renderer.js
    ├── screenshot_smoothie.png
    └── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | # macOS-specific
64 | .DS_Store
65 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Serial-plot-web
 2 | ![cover](/serial-plot-smoothie/cover.png)
 3 | 
 4 | 
 5 | ## Architecture
 6 | Project consists of 3 parts:
 7 | 
 8 |   - server (`serial-plot-server`)
 9 |     - responsible for the serial port communication (npm' `serialport` package)
10 |     - WebSocket server to deliver serial port data (npm' `ws`)
11 |     - Web Server for clients to connect (`express`)
12 |   
13 |   - client (`serial-plot-client`)
14 |     - WebSocket to receive data from the server (native JS support)
15 |     - parsing of this data (such behavior can be modified to delegate this task to the server)
16 |     - function to be repeat for redrawing
17 |     - (optional) simple benchmark to measure a number of points in 1 second
18 | 
19 |   - one of renderers (Epoch, Smoothie or Chart.js at the moment)
20 |     - serve package-specific stuff
21 | 
22 | 
23 | ## Serial communication
24 | Un-encoded simple integer binary data is assumed. You should transmit numbers in series according to number of channels (2 in this demo). Some out-of-sync situations can be meet though but it's possible to implement some sort of synchronization mechanism. And generally it should not be hard to set the app "on another rails" in terms of data format.
25 | 
26 | 
27 | ## Installation and configuration
28 | To install modules go to each subdirectory (exclude `serial-plot-client`) and run `npm install` to install necessary dependencies. For front-ends you additionally needs to run `webpack` to collect plotting packages.
29 | 
30 | 
31 | ## Quick-start usage
32 | Firstly connect your serial device. Run the server: `node serial-plot-server/server.js` (see [README.md](/serial-plot-server/README.md)). Start a browser and go to http://localhost:3000/serial-plot-client/client.html. Then open DevTools and in a console you will see serial port messages. Similarly you can run any of available graphic front-ends.
33 | 
34 | 
35 | ## Some notes about plotting packages
36 | 3 packages had been tested as a plotting tool and every has its own peculiarities. Some performance measures can be find in correspond directories – screenshots from Chrome' built-in profiler.
37 | 
38 | The best in both performance and visual appearance is Smoothie. It's fast, simple, can be easily integrated and has nice skin by default. Epoch is opposite: slow and requires additional files to be included. Chart.js is somewhere in the middle.
39 | 
40 | There are also another known charting and plotting libraries but they were not been applied to this project yet. Highcharts and CanvasJS are the most likely candidates for this position.
41 | 
42 | 
43 | ## TODOs
44 | - [ ] dedicated 'public' directory (with allowed for clients content)
45 | - [ ] demo mode (simulate the serial connection when it is not present)
46 | - [ ] grid of plots MxN (CSS or something else)
47 | - [ ] do not include 'dist' to repository (generate 'dist' directory on every new set-up)
48 | - [ ] play/pause (basic control elements)
49 | - [ ] additional front-ends (Highcharts, CanvasJS, ...)
50 | 


--------------------------------------------------------------------------------
/serial-plot-chartjs/client.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 | 
 5 |     <p>2-channel serial plot</p>
 6 | 
 7 |     <canvas id="chart0" width="3" height="1"></canvas>
 8 |     <canvas id="chart1" width="3" height="1"></canvas>
 9 | 
10 |     <script type="text/javascript" src="http://localhost:3000/serial-plot-client/client.js"></script>
11 |     <script type="text/javascript" src="http://localhost:3000/serial-plot-chartjs/dist/renderer_packed.js"></script>
12 | 
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/serial-plot-chartjs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "serial-plot-chartjs",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "chart.js": "^2.7.3"
14 |   },
15 |   "devDependencies": {
16 |     "webpack": "^4.21.0",
17 |     "webpack-cli": "^3.1.2"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/serial-plot-chartjs/renderer.js:
--------------------------------------------------------------------------------
 1 | import Chart from 'chart.js';
 2 | 
 3 | function addPoint(chart, label, data) {
 4 |   chart.data.labels.push(label);
 5 |   chart.data.datasets.forEach((dataset) => {
 6 |     dataset.data.push(data);
 7 |   });
 8 | }
 9 | 
10 | function removePoint(chart) {
11 |   chart.data.labels.shift();
12 |   chart.data.datasets.forEach((dataset) => {
13 |     dataset.data.shift();
14 |   });
15 | }
16 | 
17 | const numPoints = 150;  // length of the visible plot
18 | var pointsCnt = 0;  // count up to 'numPoints'
19 | 
20 | const charts = new Array(numPlots);
21 | const chartsColors = ['rgb(255, 99, 132)',  // magenta
22 |                       'rgb(0, 158, 224)'];  // cyan
23 | for (var i=0; i<numPlots; i++) {
24 |   charts[i] = new Chart(document.getElementById('chart'+i), {
25 |     type: 'line',
26 |     data: {
27 |       datasets: [{
28 |         label: 'Channel '+(i+1),
29 |         // backgroundColor: 'rgb(255, 99, 132)',  // fill color
30 |         borderColor: chartsColors[i],
31 |         borderWidth: 2,
32 |         pointRadius: 0
33 |       }]
34 |     },
35 |     options: {
36 |       scales: {
37 |         yAxes: [{
38 |           ticks: {
39 |             min: 0,
40 |             max: 4095,
41 |             stepSize: 512
42 |           }
43 |         }],
44 |         xAxes: [{
45 |           type: 'time',
46 |           time: {
47 |             unit: 'second'
48 |           },
49 |           ticks: {
50 |             maxRotation: 0
51 |           },
52 |         }]
53 |       },
54 |       // elements: {
55 |       //   line: {
56 |       //     tension: 0,  // disables bezier curves
57 |       //   }
58 |       // }
59 |     }
60 |   });
61 | }
62 | 
63 | 
64 | // overridden function, append new points and redraw
65 | renderPlots = function() {
66 |   pointsCnt++;
67 |   for (var i=0; i<numPlots; i++) {
68 |     if (pointsCnt > numPoints) {
69 |       pointsCnt = numPoints + 1;  // limit the counter after reaching 'numPoints'
70 |       removePoint(charts[i]);  // drop the old point ...
71 |     }
72 |     addPoint(charts[i], new Date().getTime(), pointsArr[i]);  // ... and add a new one
73 |     charts[i].update();
74 |   }
75 | };
76 | 


--------------------------------------------------------------------------------
/serial-plot-chartjs/screenshot_chartjs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ussserrr/serial-plot-web/b992715e3a62d951fa5dbec816f5fd01b7076597/serial-plot-chartjs/screenshot_chartjs.png


--------------------------------------------------------------------------------
/serial-plot-chartjs/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // webpack.config.js
 2 | 
 3 | module.exports = {
 4 |   entry: './renderer.js',
 5 |   output: {
 6 |     filename: 'renderer_packed.js'
 7 |   },
 8 |   devtool: "source-map"
 9 | };
10 | 


--------------------------------------------------------------------------------
/serial-plot-client/README.md:
--------------------------------------------------------------------------------
 1 | Simplest client application that continuously retrieves data from the server, parses it and prints to the browser' console. Used as a base for another (graphical) front-ends.
 2 | 
 3 | Override `renderPlots` function in your custom front-end to refresh plots.
 4 | 
 5 | ## Useful parameters
 6 |  - `webSocketPort`
 7 |  - `updateTimeout`: set how many points will be requested per unit of time. The bigger the value – the lesser CPU usage but also the lesser the time resolution
 8 |  - `numPlots`: a number of channels to read and plot
 9 |  - `isBench`: boolean, controls whether to measure and output a current number of points per second or not
10 | 


--------------------------------------------------------------------------------
/serial-plot-client/client.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 | 
 5 |     <p>2-channel serial data. See console for points</p>
 6 | 
 7 |     <script type="text/javascript" src="http://localhost:3000/serial-plot-client/client.js"></script>
 8 | 
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/serial-plot-client/client.js:
--------------------------------------------------------------------------------
 1 | function parseInts32LE(hexString) {
 2 |   /*
 3 |    *  Parse string of hex digits to array of 32-bit-width little endian
 4 |    *  integers
 5 |    *
 6 |    *  To test use value
 7 |    *  hex_str = "237A08002A2C0A0071F25B2E";  // 555555 666666 777777777
 8 |    */
 9 | 
10 |   const bytesInInt = 4;  // 32-bit value
11 |   // truncate the string if its length is not a multiple of 'bytesInInt'
12 |   const intsInStr = Math.floor(hexString.length / (bytesInInt*2));
13 | 
14 |   var ints = [];
15 |   for (var i=0; i<intsInStr; i++) {
16 |     var intStr = '';
17 |     // rearrange each string to convert to little endian
18 |     for (var j=0; j<bytesInInt; j++) {
19 |       intStr += hexString.substring((i*2*bytesInInt) + ((bytesInInt*2-2)-(j*2)),
20 |                                     (i*2*bytesInInt) + ((bytesInInt*2)-(j*2)) );
21 |     }
22 |     ints.push(parseInt(intStr, 16));  // base - 16 (hex)
23 |   }
24 | 
25 |   return ints;
26 | }
27 | 
28 | 
29 | 
30 | /*
31 |  *  WebSocket client section
32 |  */
33 | const webSocketPort = 1200;
34 | const socket = new WebSocket('ws://localhost:' + webSocketPort);
35 | socket.addEventListener('open', function(event) {
36 |   console.log("web socket is open on client");
37 |   socket.send("start");  // send something to start getting values
38 | });
39 | 
40 | socket.addEventListener('message', function(event) {
41 |   const hexStr = event.data;
42 |   pointsArr = parseInts32LE(hexStr);
43 | });
44 | 
45 | 
46 | 
47 | /*
48 |  *  Plotting section
49 |  */
50 | const updateTimeout = 50;  // ms
51 | const numPlots = 2;
52 | var pointsArr = new Array(numPlots);
53 | 
54 | // benchmark
55 | const isBench = true;
56 | if (isBench) {
57 |   var cnt = 0;
58 |   var prevTime = 0;
59 | }
60 | 
61 | // override this function in 'renderer.js' to change default actions
62 | var renderPlots = function() {
63 |   pointsArr.forEach((point, i) => {
64 |     console.log("ch" + i + ": " + point);
65 |   });
66 |   console.log('\n');
67 | };
68 | 
69 | function updatePlots() {
70 |   // benchmark
71 |   if (isBench) {
72 |     cnt++;
73 |     const currentTime = performance.now();
74 |     if ( (currentTime-prevTime) >= 1000 ) {
75 |       console.log(cnt);
76 |       prevTime = currentTime;
77 |       cnt = 0;
78 |     }
79 |   }
80 | 
81 |   renderPlots();
82 | 
83 |   if (socket.readyState == 1) {  // 1: OPEN
84 |     socket.send('');  // send something to get next point
85 |   }
86 | }
87 | 
88 | setInterval(updatePlots, updateTimeout);
89 | 


--------------------------------------------------------------------------------
/serial-plot-epoch/client.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 | 
 5 |     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 6 |     <link rel="stylesheet" type="text/css" href="http://localhost:3000/serial-plot-epoch/dist/css/epoch.min.css">
 7 | 
 8 |   </head>
 9 |   <body>
10 | 
11 |     <p>2-channel serial plot</p>
12 | 
13 |     <div id="line0" class="epoch category10" style="width: 600px; height: 300px;"></div>
14 |     <div id="line1" class="epoch category10" style="width: 600px; height: 300px;"></div>
15 | 
16 |     <script src="http://localhost:3000/serial-plot-client/client.js"></script>
17 |     <script src="http://localhost:3000/serial-plot-epoch/dist/renderer_packed.js"></script>
18 | 
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/serial-plot-epoch/dist/css/epoch.min.css:
--------------------------------------------------------------------------------
1 | .epoch .axis path,.epoch .axis line{shape-rendering:crispEdges}.epoch .axis.canvas .tick line{shape-rendering:geometricPrecision}div#_canvas_css_reference{width:0;height:0;position:absolute;top:-1000px;left:-1000px}div#_canvas_css_reference svg{position:absolute;width:0;height:0;top:-1000px;left:-1000px}.epoch{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:12pt}.epoch .axis path,.epoch .axis line{fill:transparent;stroke:#000}.epoch .axis .tick text{font-size:9pt}.epoch .line{fill:transparent;stroke-width:2px}.epoch.sparklines .line{stroke-width:1px}.epoch .area{stroke:transparent}.epoch .arc.pie{stroke:#fff;stroke-width:1.5px}.epoch .arc.pie text{stroke:transparent;fill:white;font-size:9pt}.epoch .gauge-labels .value{text-anchor:middle;font-size:140%;fill:#666}.epoch.gauge-tiny{width:120px;height:90px}.epoch.gauge-tiny .gauge-labels .value{font-size:80%}.epoch.gauge-tiny .gauge .arc.outer{stroke-width:2px}.epoch.gauge-small{width:180px;height:135px}.epoch.gauge-small .gauge-labels .value{font-size:120%}.epoch.gauge-small .gauge .arc.outer{stroke-width:3px}.epoch.gauge-medium{width:240px;height:180px}.epoch.gauge-medium .gauge .arc.outer{stroke-width:3px}.epoch.gauge-large{width:320px;height:240px}.epoch.gauge-large .gauge-labels .value{font-size:180%}.epoch .gauge .arc.outer{stroke-width:4px;stroke:#666}.epoch .gauge .arc.inner{stroke-width:1px;stroke:#555}.epoch .gauge .tick{stroke-width:1px;stroke:#555}.epoch .gauge .needle{fill:orange}.epoch .gauge .needle-base{fill:#666}.epoch div.ref.category1,.epoch.category10 div.ref.category1{background-color:#1f77b4}.epoch .category1 .line,.epoch.category10 .category1 .line{stroke:#1f77b4}.epoch .category1 .area,.epoch .category1 .dot,.epoch.category10 .category1 .area,.epoch.category10 .category1 .dot{fill:#1f77b4;stroke:transparent}.epoch .arc.category1 path,.epoch.category10 .arc.category1 path{fill:#1f77b4}.epoch .bar.category1,.epoch.category10 .bar.category1{fill:#1f77b4}.epoch div.ref.category2,.epoch.category10 div.ref.category2{background-color:#ff7f0e}.epoch .category2 .line,.epoch.category10 .category2 .line{stroke:#ff7f0e}.epoch .category2 .area,.epoch .category2 .dot,.epoch.category10 .category2 .area,.epoch.category10 .category2 .dot{fill:#ff7f0e;stroke:transparent}.epoch .arc.category2 path,.epoch.category10 .arc.category2 path{fill:#ff7f0e}.epoch .bar.category2,.epoch.category10 .bar.category2{fill:#ff7f0e}.epoch div.ref.category3,.epoch.category10 div.ref.category3{background-color:#2ca02c}.epoch .category3 .line,.epoch.category10 .category3 .line{stroke:#2ca02c}.epoch .category3 .area,.epoch .category3 .dot,.epoch.category10 .category3 .area,.epoch.category10 .category3 .dot{fill:#2ca02c;stroke:transparent}.epoch .arc.category3 path,.epoch.category10 .arc.category3 path{fill:#2ca02c}.epoch .bar.category3,.epoch.category10 .bar.category3{fill:#2ca02c}.epoch div.ref.category4,.epoch.category10 div.ref.category4{background-color:#d62728}.epoch .category4 .line,.epoch.category10 .category4 .line{stroke:#d62728}.epoch .category4 .area,.epoch .category4 .dot,.epoch.category10 .category4 .area,.epoch.category10 .category4 .dot{fill:#d62728;stroke:transparent}.epoch .arc.category4 path,.epoch.category10 .arc.category4 path{fill:#d62728}.epoch .bar.category4,.epoch.category10 .bar.category4{fill:#d62728}.epoch div.ref.category5,.epoch.category10 div.ref.category5{background-color:#9467bd}.epoch .category5 .line,.epoch.category10 .category5 .line{stroke:#9467bd}.epoch .category5 .area,.epoch .category5 .dot,.epoch.category10 .category5 .area,.epoch.category10 .category5 .dot{fill:#9467bd;stroke:transparent}.epoch .arc.category5 path,.epoch.category10 .arc.category5 path{fill:#9467bd}.epoch .bar.category5,.epoch.category10 .bar.category5{fill:#9467bd}.epoch div.ref.category6,.epoch.category10 div.ref.category6{background-color:#8c564b}.epoch .category6 .line,.epoch.category10 .category6 .line{stroke:#8c564b}.epoch .category6 .area,.epoch .category6 .dot,.epoch.category10 .category6 .area,.epoch.category10 .category6 .dot{fill:#8c564b;stroke:transparent}.epoch .arc.category6 path,.epoch.category10 .arc.category6 path{fill:#8c564b}.epoch .bar.category6,.epoch.category10 .bar.category6{fill:#8c564b}.epoch div.ref.category7,.epoch.category10 div.ref.category7{background-color:#e377c2}.epoch .category7 .line,.epoch.category10 .category7 .line{stroke:#e377c2}.epoch .category7 .area,.epoch .category7 .dot,.epoch.category10 .category7 .area,.epoch.category10 .category7 .dot{fill:#e377c2;stroke:transparent}.epoch .arc.category7 path,.epoch.category10 .arc.category7 path{fill:#e377c2}.epoch .bar.category7,.epoch.category10 .bar.category7{fill:#e377c2}.epoch div.ref.category8,.epoch.category10 div.ref.category8{background-color:#7f7f7f}.epoch .category8 .line,.epoch.category10 .category8 .line{stroke:#7f7f7f}.epoch .category8 .area,.epoch .category8 .dot,.epoch.category10 .category8 .area,.epoch.category10 .category8 .dot{fill:#7f7f7f;stroke:transparent}.epoch .arc.category8 path,.epoch.category10 .arc.category8 path{fill:#7f7f7f}.epoch .bar.category8,.epoch.category10 .bar.category8{fill:#7f7f7f}.epoch div.ref.category9,.epoch.category10 div.ref.category9{background-color:#bcbd22}.epoch .category9 .line,.epoch.category10 .category9 .line{stroke:#bcbd22}.epoch .category9 .area,.epoch .category9 .dot,.epoch.category10 .category9 .area,.epoch.category10 .category9 .dot{fill:#bcbd22;stroke:transparent}.epoch .arc.category9 path,.epoch.category10 .arc.category9 path{fill:#bcbd22}.epoch .bar.category9,.epoch.category10 .bar.category9{fill:#bcbd22}.epoch div.ref.category10,.epoch.category10 div.ref.category10{background-color:#17becf}.epoch .category10 .line,.epoch.category10 .category10 .line{stroke:#17becf}.epoch .category10 .area,.epoch .category10 .dot,.epoch.category10 .category10 .area,.epoch.category10 .category10 .dot{fill:#17becf;stroke:transparent}.epoch .arc.category10 path,.epoch.category10 .arc.category10 path{fill:#17becf}.epoch .bar.category10,.epoch.category10 .bar.category10{fill:#17becf}.epoch.category20 div.ref.category1{background-color:#1f77b4}.epoch.category20 .category1 .line{stroke:#1f77b4}.epoch.category20 .category1 .area,.epoch.category20 .category1 .dot{fill:#1f77b4;stroke:transparent}.epoch.category20 .arc.category1 path{fill:#1f77b4}.epoch.category20 .bar.category1{fill:#1f77b4}.epoch.category20 div.ref.category2{background-color:#aec7e8}.epoch.category20 .category2 .line{stroke:#aec7e8}.epoch.category20 .category2 .area,.epoch.category20 .category2 .dot{fill:#aec7e8;stroke:transparent}.epoch.category20 .arc.category2 path{fill:#aec7e8}.epoch.category20 .bar.category2{fill:#aec7e8}.epoch.category20 div.ref.category3{background-color:#ff7f0e}.epoch.category20 .category3 .line{stroke:#ff7f0e}.epoch.category20 .category3 .area,.epoch.category20 .category3 .dot{fill:#ff7f0e;stroke:transparent}.epoch.category20 .arc.category3 path{fill:#ff7f0e}.epoch.category20 .bar.category3{fill:#ff7f0e}.epoch.category20 div.ref.category4{background-color:#ffbb78}.epoch.category20 .category4 .line{stroke:#ffbb78}.epoch.category20 .category4 .area,.epoch.category20 .category4 .dot{fill:#ffbb78;stroke:transparent}.epoch.category20 .arc.category4 path{fill:#ffbb78}.epoch.category20 .bar.category4{fill:#ffbb78}.epoch.category20 div.ref.category5{background-color:#2ca02c}.epoch.category20 .category5 .line{stroke:#2ca02c}.epoch.category20 .category5 .area,.epoch.category20 .category5 .dot{fill:#2ca02c;stroke:transparent}.epoch.category20 .arc.category5 path{fill:#2ca02c}.epoch.category20 .bar.category5{fill:#2ca02c}.epoch.category20 div.ref.category6{background-color:#98df8a}.epoch.category20 .category6 .line{stroke:#98df8a}.epoch.category20 .category6 .area,.epoch.category20 .category6 .dot{fill:#98df8a;stroke:transparent}.epoch.category20 .arc.category6 path{fill:#98df8a}.epoch.category20 .bar.category6{fill:#98df8a}.epoch.category20 div.ref.category7{background-color:#d62728}.epoch.category20 .category7 .line{stroke:#d62728}.epoch.category20 .category7 .area,.epoch.category20 .category7 .dot{fill:#d62728;stroke:transparent}.epoch.category20 .arc.category7 path{fill:#d62728}.epoch.category20 .bar.category7{fill:#d62728}.epoch.category20 div.ref.category8{background-color:#ff9896}.epoch.category20 .category8 .line{stroke:#ff9896}.epoch.category20 .category8 .area,.epoch.category20 .category8 .dot{fill:#ff9896;stroke:transparent}.epoch.category20 .arc.category8 path{fill:#ff9896}.epoch.category20 .bar.category8{fill:#ff9896}.epoch.category20 div.ref.category9{background-color:#9467bd}.epoch.category20 .category9 .line{stroke:#9467bd}.epoch.category20 .category9 .area,.epoch.category20 .category9 .dot{fill:#9467bd;stroke:transparent}.epoch.category20 .arc.category9 path{fill:#9467bd}.epoch.category20 .bar.category9{fill:#9467bd}.epoch.category20 div.ref.category10{background-color:#c5b0d5}.epoch.category20 .category10 .line{stroke:#c5b0d5}.epoch.category20 .category10 .area,.epoch.category20 .category10 .dot{fill:#c5b0d5;stroke:transparent}.epoch.category20 .arc.category10 path{fill:#c5b0d5}.epoch.category20 .bar.category10{fill:#c5b0d5}.epoch.category20 div.ref.category11{background-color:#8c564b}.epoch.category20 .category11 .line{stroke:#8c564b}.epoch.category20 .category11 .area,.epoch.category20 .category11 .dot{fill:#8c564b;stroke:transparent}.epoch.category20 .arc.category11 path{fill:#8c564b}.epoch.category20 .bar.category11{fill:#8c564b}.epoch.category20 div.ref.category12{background-color:#c49c94}.epoch.category20 .category12 .line{stroke:#c49c94}.epoch.category20 .category12 .area,.epoch.category20 .category12 .dot{fill:#c49c94;stroke:transparent}.epoch.category20 .arc.category12 path{fill:#c49c94}.epoch.category20 .bar.category12{fill:#c49c94}.epoch.category20 div.ref.category13{background-color:#e377c2}.epoch.category20 .category13 .line{stroke:#e377c2}.epoch.category20 .category13 .area,.epoch.category20 .category13 .dot{fill:#e377c2;stroke:transparent}.epoch.category20 .arc.category13 path{fill:#e377c2}.epoch.category20 .bar.category13{fill:#e377c2}.epoch.category20 div.ref.category14{background-color:#f7b6d2}.epoch.category20 .category14 .line{stroke:#f7b6d2}.epoch.category20 .category14 .area,.epoch.category20 .category14 .dot{fill:#f7b6d2;stroke:transparent}.epoch.category20 .arc.category14 path{fill:#f7b6d2}.epoch.category20 .bar.category14{fill:#f7b6d2}.epoch.category20 div.ref.category15{background-color:#7f7f7f}.epoch.category20 .category15 .line{stroke:#7f7f7f}.epoch.category20 .category15 .area,.epoch.category20 .category15 .dot{fill:#7f7f7f;stroke:transparent}.epoch.category20 .arc.category15 path{fill:#7f7f7f}.epoch.category20 .bar.category15{fill:#7f7f7f}.epoch.category20 div.ref.category16{background-color:#c7c7c7}.epoch.category20 .category16 .line{stroke:#c7c7c7}.epoch.category20 .category16 .area,.epoch.category20 .category16 .dot{fill:#c7c7c7;stroke:transparent}.epoch.category20 .arc.category16 path{fill:#c7c7c7}.epoch.category20 .bar.category16{fill:#c7c7c7}.epoch.category20 div.ref.category17{background-color:#bcbd22}.epoch.category20 .category17 .line{stroke:#bcbd22}.epoch.category20 .category17 .area,.epoch.category20 .category17 .dot{fill:#bcbd22;stroke:transparent}.epoch.category20 .arc.category17 path{fill:#bcbd22}.epoch.category20 .bar.category17{fill:#bcbd22}.epoch.category20 div.ref.category18{background-color:#dbdb8d}.epoch.category20 .category18 .line{stroke:#dbdb8d}.epoch.category20 .category18 .area,.epoch.category20 .category18 .dot{fill:#dbdb8d;stroke:transparent}.epoch.category20 .arc.category18 path{fill:#dbdb8d}.epoch.category20 .bar.category18{fill:#dbdb8d}.epoch.category20 div.ref.category19{background-color:#17becf}.epoch.category20 .category19 .line{stroke:#17becf}.epoch.category20 .category19 .area,.epoch.category20 .category19 .dot{fill:#17becf;stroke:transparent}.epoch.category20 .arc.category19 path{fill:#17becf}.epoch.category20 .bar.category19{fill:#17becf}.epoch.category20 div.ref.category20{background-color:#9edae5}.epoch.category20 .category20 .line{stroke:#9edae5}.epoch.category20 .category20 .area,.epoch.category20 .category20 .dot{fill:#9edae5;stroke:transparent}.epoch.category20 .arc.category20 path{fill:#9edae5}.epoch.category20 .bar.category20{fill:#9edae5}.epoch.category20b div.ref.category1{background-color:#393b79}.epoch.category20b .category1 .line{stroke:#393b79}.epoch.category20b .category1 .area,.epoch.category20b .category1 .dot{fill:#393b79;stroke:transparent}.epoch.category20b .arc.category1 path{fill:#393b79}.epoch.category20b .bar.category1{fill:#393b79}.epoch.category20b div.ref.category2{background-color:#5254a3}.epoch.category20b .category2 .line{stroke:#5254a3}.epoch.category20b .category2 .area,.epoch.category20b .category2 .dot{fill:#5254a3;stroke:transparent}.epoch.category20b .arc.category2 path{fill:#5254a3}.epoch.category20b .bar.category2{fill:#5254a3}.epoch.category20b div.ref.category3{background-color:#6b6ecf}.epoch.category20b .category3 .line{stroke:#6b6ecf}.epoch.category20b .category3 .area,.epoch.category20b .category3 .dot{fill:#6b6ecf;stroke:transparent}.epoch.category20b .arc.category3 path{fill:#6b6ecf}.epoch.category20b .bar.category3{fill:#6b6ecf}.epoch.category20b div.ref.category4{background-color:#9c9ede}.epoch.category20b .category4 .line{stroke:#9c9ede}.epoch.category20b .category4 .area,.epoch.category20b .category4 .dot{fill:#9c9ede;stroke:transparent}.epoch.category20b .arc.category4 path{fill:#9c9ede}.epoch.category20b .bar.category4{fill:#9c9ede}.epoch.category20b div.ref.category5{background-color:#637939}.epoch.category20b .category5 .line{stroke:#637939}.epoch.category20b .category5 .area,.epoch.category20b .category5 .dot{fill:#637939;stroke:transparent}.epoch.category20b .arc.category5 path{fill:#637939}.epoch.category20b .bar.category5{fill:#637939}.epoch.category20b div.ref.category6{background-color:#8ca252}.epoch.category20b .category6 .line{stroke:#8ca252}.epoch.category20b .category6 .area,.epoch.category20b .category6 .dot{fill:#8ca252;stroke:transparent}.epoch.category20b .arc.category6 path{fill:#8ca252}.epoch.category20b .bar.category6{fill:#8ca252}.epoch.category20b div.ref.category7{background-color:#b5cf6b}.epoch.category20b .category7 .line{stroke:#b5cf6b}.epoch.category20b .category7 .area,.epoch.category20b .category7 .dot{fill:#b5cf6b;stroke:transparent}.epoch.category20b .arc.category7 path{fill:#b5cf6b}.epoch.category20b .bar.category7{fill:#b5cf6b}.epoch.category20b div.ref.category8{background-color:#cedb9c}.epoch.category20b .category8 .line{stroke:#cedb9c}.epoch.category20b .category8 .area,.epoch.category20b .category8 .dot{fill:#cedb9c;stroke:transparent}.epoch.category20b .arc.category8 path{fill:#cedb9c}.epoch.category20b .bar.category8{fill:#cedb9c}.epoch.category20b div.ref.category9{background-color:#8c6d31}.epoch.category20b .category9 .line{stroke:#8c6d31}.epoch.category20b .category9 .area,.epoch.category20b .category9 .dot{fill:#8c6d31;stroke:transparent}.epoch.category20b .arc.category9 path{fill:#8c6d31}.epoch.category20b .bar.category9{fill:#8c6d31}.epoch.category20b div.ref.category10{background-color:#bd9e39}.epoch.category20b .category10 .line{stroke:#bd9e39}.epoch.category20b .category10 .area,.epoch.category20b .category10 .dot{fill:#bd9e39;stroke:transparent}.epoch.category20b .arc.category10 path{fill:#bd9e39}.epoch.category20b .bar.category10{fill:#bd9e39}.epoch.category20b div.ref.category11{background-color:#e7ba52}.epoch.category20b .category11 .line{stroke:#e7ba52}.epoch.category20b .category11 .area,.epoch.category20b .category11 .dot{fill:#e7ba52;stroke:transparent}.epoch.category20b .arc.category11 path{fill:#e7ba52}.epoch.category20b .bar.category11{fill:#e7ba52}.epoch.category20b div.ref.category12{background-color:#e7cb94}.epoch.category20b .category12 .line{stroke:#e7cb94}.epoch.category20b .category12 .area,.epoch.category20b .category12 .dot{fill:#e7cb94;stroke:transparent}.epoch.category20b .arc.category12 path{fill:#e7cb94}.epoch.category20b .bar.category12{fill:#e7cb94}.epoch.category20b div.ref.category13{background-color:#843c39}.epoch.category20b .category13 .line{stroke:#843c39}.epoch.category20b .category13 .area,.epoch.category20b .category13 .dot{fill:#843c39;stroke:transparent}.epoch.category20b .arc.category13 path{fill:#843c39}.epoch.category20b .bar.category13{fill:#843c39}.epoch.category20b div.ref.category14{background-color:#ad494a}.epoch.category20b .category14 .line{stroke:#ad494a}.epoch.category20b .category14 .area,.epoch.category20b .category14 .dot{fill:#ad494a;stroke:transparent}.epoch.category20b .arc.category14 path{fill:#ad494a}.epoch.category20b .bar.category14{fill:#ad494a}.epoch.category20b div.ref.category15{background-color:#d6616b}.epoch.category20b .category15 .line{stroke:#d6616b}.epoch.category20b .category15 .area,.epoch.category20b .category15 .dot{fill:#d6616b;stroke:transparent}.epoch.category20b .arc.category15 path{fill:#d6616b}.epoch.category20b .bar.category15{fill:#d6616b}.epoch.category20b div.ref.category16{background-color:#e7969c}.epoch.category20b .category16 .line{stroke:#e7969c}.epoch.category20b .category16 .area,.epoch.category20b .category16 .dot{fill:#e7969c;stroke:transparent}.epoch.category20b .arc.category16 path{fill:#e7969c}.epoch.category20b .bar.category16{fill:#e7969c}.epoch.category20b div.ref.category17{background-color:#7b4173}.epoch.category20b .category17 .line{stroke:#7b4173}.epoch.category20b .category17 .area,.epoch.category20b .category17 .dot{fill:#7b4173;stroke:transparent}.epoch.category20b .arc.category17 path{fill:#7b4173}.epoch.category20b .bar.category17{fill:#7b4173}.epoch.category20b div.ref.category18{background-color:#a55194}.epoch.category20b .category18 .line{stroke:#a55194}.epoch.category20b .category18 .area,.epoch.category20b .category18 .dot{fill:#a55194;stroke:transparent}.epoch.category20b .arc.category18 path{fill:#a55194}.epoch.category20b .bar.category18{fill:#a55194}.epoch.category20b div.ref.category19{background-color:#ce6dbd}.epoch.category20b .category19 .line{stroke:#ce6dbd}.epoch.category20b .category19 .area,.epoch.category20b .category19 .dot{fill:#ce6dbd;stroke:transparent}.epoch.category20b .arc.category19 path{fill:#ce6dbd}.epoch.category20b .bar.category19{fill:#ce6dbd}.epoch.category20b div.ref.category20{background-color:#de9ed6}.epoch.category20b .category20 .line{stroke:#de9ed6}.epoch.category20b .category20 .area,.epoch.category20b .category20 .dot{fill:#de9ed6;stroke:transparent}.epoch.category20b .arc.category20 path{fill:#de9ed6}.epoch.category20b .bar.category20{fill:#de9ed6}.epoch.category20c div.ref.category1{background-color:#3182bd}.epoch.category20c .category1 .line{stroke:#3182bd}.epoch.category20c .category1 .area,.epoch.category20c .category1 .dot{fill:#3182bd;stroke:transparent}.epoch.category20c .arc.category1 path{fill:#3182bd}.epoch.category20c .bar.category1{fill:#3182bd}.epoch.category20c div.ref.category2{background-color:#6baed6}.epoch.category20c .category2 .line{stroke:#6baed6}.epoch.category20c .category2 .area,.epoch.category20c .category2 .dot{fill:#6baed6;stroke:transparent}.epoch.category20c .arc.category2 path{fill:#6baed6}.epoch.category20c .bar.category2{fill:#6baed6}.epoch.category20c div.ref.category3{background-color:#9ecae1}.epoch.category20c .category3 .line{stroke:#9ecae1}.epoch.category20c .category3 .area,.epoch.category20c .category3 .dot{fill:#9ecae1;stroke:transparent}.epoch.category20c .arc.category3 path{fill:#9ecae1}.epoch.category20c .bar.category3{fill:#9ecae1}.epoch.category20c div.ref.category4{background-color:#c6dbef}.epoch.category20c .category4 .line{stroke:#c6dbef}.epoch.category20c .category4 .area,.epoch.category20c .category4 .dot{fill:#c6dbef;stroke:transparent}.epoch.category20c .arc.category4 path{fill:#c6dbef}.epoch.category20c .bar.category4{fill:#c6dbef}.epoch.category20c div.ref.category5{background-color:#e6550d}.epoch.category20c .category5 .line{stroke:#e6550d}.epoch.category20c .category5 .area,.epoch.category20c .category5 .dot{fill:#e6550d;stroke:transparent}.epoch.category20c .arc.category5 path{fill:#e6550d}.epoch.category20c .bar.category5{fill:#e6550d}.epoch.category20c div.ref.category6{background-color:#fd8d3c}.epoch.category20c .category6 .line{stroke:#fd8d3c}.epoch.category20c .category6 .area,.epoch.category20c .category6 .dot{fill:#fd8d3c;stroke:transparent}.epoch.category20c .arc.category6 path{fill:#fd8d3c}.epoch.category20c .bar.category6{fill:#fd8d3c}.epoch.category20c div.ref.category7{background-color:#fdae6b}.epoch.category20c .category7 .line{stroke:#fdae6b}.epoch.category20c .category7 .area,.epoch.category20c .category7 .dot{fill:#fdae6b;stroke:transparent}.epoch.category20c .arc.category7 path{fill:#fdae6b}.epoch.category20c .bar.category7{fill:#fdae6b}.epoch.category20c div.ref.category8{background-color:#fdd0a2}.epoch.category20c .category8 .line{stroke:#fdd0a2}.epoch.category20c .category8 .area,.epoch.category20c .category8 .dot{fill:#fdd0a2;stroke:transparent}.epoch.category20c .arc.category8 path{fill:#fdd0a2}.epoch.category20c .bar.category8{fill:#fdd0a2}.epoch.category20c div.ref.category9{background-color:#31a354}.epoch.category20c .category9 .line{stroke:#31a354}.epoch.category20c .category9 .area,.epoch.category20c .category9 .dot{fill:#31a354;stroke:transparent}.epoch.category20c .arc.category9 path{fill:#31a354}.epoch.category20c .bar.category9{fill:#31a354}.epoch.category20c div.ref.category10{background-color:#74c476}.epoch.category20c .category10 .line{stroke:#74c476}.epoch.category20c .category10 .area,.epoch.category20c .category10 .dot{fill:#74c476;stroke:transparent}.epoch.category20c .arc.category10 path{fill:#74c476}.epoch.category20c .bar.category10{fill:#74c476}.epoch.category20c div.ref.category11{background-color:#a1d99b}.epoch.category20c .category11 .line{stroke:#a1d99b}.epoch.category20c .category11 .area,.epoch.category20c .category11 .dot{fill:#a1d99b;stroke:transparent}.epoch.category20c .arc.category11 path{fill:#a1d99b}.epoch.category20c .bar.category11{fill:#a1d99b}.epoch.category20c div.ref.category12{background-color:#c7e9c0}.epoch.category20c .category12 .line{stroke:#c7e9c0}.epoch.category20c .category12 .area,.epoch.category20c .category12 .dot{fill:#c7e9c0;stroke:transparent}.epoch.category20c .arc.category12 path{fill:#c7e9c0}.epoch.category20c .bar.category12{fill:#c7e9c0}.epoch.category20c div.ref.category13{background-color:#756bb1}.epoch.category20c .category13 .line{stroke:#756bb1}.epoch.category20c .category13 .area,.epoch.category20c .category13 .dot{fill:#756bb1;stroke:transparent}.epoch.category20c .arc.category13 path{fill:#756bb1}.epoch.category20c .bar.category13{fill:#756bb1}.epoch.category20c div.ref.category14{background-color:#9e9ac8}.epoch.category20c .category14 .line{stroke:#9e9ac8}.epoch.category20c .category14 .area,.epoch.category20c .category14 .dot{fill:#9e9ac8;stroke:transparent}.epoch.category20c .arc.category14 path{fill:#9e9ac8}.epoch.category20c .bar.category14{fill:#9e9ac8}.epoch.category20c div.ref.category15{background-color:#bcbddc}.epoch.category20c .category15 .line{stroke:#bcbddc}.epoch.category20c .category15 .area,.epoch.category20c .category15 .dot{fill:#bcbddc;stroke:transparent}.epoch.category20c .arc.category15 path{fill:#bcbddc}.epoch.category20c .bar.category15{fill:#bcbddc}.epoch.category20c div.ref.category16{background-color:#dadaeb}.epoch.category20c .category16 .line{stroke:#dadaeb}.epoch.category20c .category16 .area,.epoch.category20c .category16 .dot{fill:#dadaeb;stroke:transparent}.epoch.category20c .arc.category16 path{fill:#dadaeb}.epoch.category20c .bar.category16{fill:#dadaeb}.epoch.category20c div.ref.category17{background-color:#636363}.epoch.category20c .category17 .line{stroke:#636363}.epoch.category20c .category17 .area,.epoch.category20c .category17 .dot{fill:#636363;stroke:transparent}.epoch.category20c .arc.category17 path{fill:#636363}.epoch.category20c .bar.category17{fill:#636363}.epoch.category20c div.ref.category18{background-color:#969696}.epoch.category20c .category18 .line{stroke:#969696}.epoch.category20c .category18 .area,.epoch.category20c .category18 .dot{fill:#969696;stroke:transparent}.epoch.category20c .arc.category18 path{fill:#969696}.epoch.category20c .bar.category18{fill:#969696}.epoch.category20c div.ref.category19{background-color:#bdbdbd}.epoch.category20c .category19 .line{stroke:#bdbdbd}.epoch.category20c .category19 .area,.epoch.category20c .category19 .dot{fill:#bdbdbd;stroke:transparent}.epoch.category20c .arc.category19 path{fill:#bdbdbd}.epoch.category20c .bar.category19{fill:#bdbdbd}.epoch.category20c div.ref.category20{background-color:#d9d9d9}.epoch.category20c .category20 .line{stroke:#d9d9d9}.epoch.category20c .category20 .area,.epoch.category20c .category20 .dot{fill:#d9d9d9;stroke:transparent}.epoch.category20c .arc.category20 path{fill:#d9d9d9}.epoch.category20c .bar.category20{fill:#d9d9d9}.epoch .category1 .bucket,.epoch.heatmap5 .category1 .bucket{fill:#1f77b4}.epoch .category2 .bucket,.epoch.heatmap5 .category2 .bucket{fill:#2ca02c}.epoch .category3 .bucket,.epoch.heatmap5 .category3 .bucket{fill:#d62728}.epoch .category4 .bucket,.epoch.heatmap5 .category4 .bucket{fill:#8c564b}.epoch .category5 .bucket,.epoch.heatmap5 .category5 .bucket{fill:#7f7f7f}.epoch-theme-dark .epoch .axis path,.epoch-theme-dark .epoch .axis line{stroke:#d0d0d0}.epoch-theme-dark .epoch .axis .tick text{fill:#d0d0d0}.epoch-theme-dark .arc.pie{stroke:#333}.epoch-theme-dark .arc.pie text{fill:#333}.epoch-theme-dark .epoch .gauge-labels .value{fill:#BBB}.epoch-theme-dark .epoch .gauge .arc.outer{stroke:#999}.epoch-theme-dark .epoch .gauge .arc.inner{stroke:#AAA}.epoch-theme-dark .epoch .gauge .tick{stroke:#AAA}.epoch-theme-dark .epoch .gauge .needle{fill:#F3DE88}.epoch-theme-dark .epoch .gauge .needle-base{fill:#999}.epoch-theme-dark .epoch div.ref.category1,.epoch-theme-dark .epoch.category10 div.ref.category1{background-color:#909CFF}.epoch-theme-dark .epoch .category1 .line,.epoch-theme-dark .epoch.category10 .category1 .line{stroke:#909CFF}.epoch-theme-dark .epoch .category1 .area,.epoch-theme-dark .epoch .category1 .dot,.epoch-theme-dark .epoch.category10 .category1 .area,.epoch-theme-dark .epoch.category10 .category1 .dot{fill:#909CFF;stroke:transparent}.epoch-theme-dark .epoch .arc.category1 path,.epoch-theme-dark .epoch.category10 .arc.category1 path{fill:#909CFF}.epoch-theme-dark .epoch .bar.category1,.epoch-theme-dark .epoch.category10 .bar.category1{fill:#909CFF}.epoch-theme-dark .epoch div.ref.category2,.epoch-theme-dark .epoch.category10 div.ref.category2{background-color:#FFAC89}.epoch-theme-dark .epoch .category2 .line,.epoch-theme-dark .epoch.category10 .category2 .line{stroke:#FFAC89}.epoch-theme-dark .epoch .category2 .area,.epoch-theme-dark .epoch .category2 .dot,.epoch-theme-dark .epoch.category10 .category2 .area,.epoch-theme-dark .epoch.category10 .category2 .dot{fill:#FFAC89;stroke:transparent}.epoch-theme-dark .epoch .arc.category2 path,.epoch-theme-dark .epoch.category10 .arc.category2 path{fill:#FFAC89}.epoch-theme-dark .epoch .bar.category2,.epoch-theme-dark .epoch.category10 .bar.category2{fill:#FFAC89}.epoch-theme-dark .epoch div.ref.category3,.epoch-theme-dark .epoch.category10 div.ref.category3{background-color:#E889E8}.epoch-theme-dark .epoch .category3 .line,.epoch-theme-dark .epoch.category10 .category3 .line{stroke:#E889E8}.epoch-theme-dark .epoch .category3 .area,.epoch-theme-dark .epoch .category3 .dot,.epoch-theme-dark .epoch.category10 .category3 .area,.epoch-theme-dark .epoch.category10 .category3 .dot{fill:#E889E8;stroke:transparent}.epoch-theme-dark .epoch .arc.category3 path,.epoch-theme-dark .epoch.category10 .arc.category3 path{fill:#E889E8}.epoch-theme-dark .epoch .bar.category3,.epoch-theme-dark .epoch.category10 .bar.category3{fill:#E889E8}.epoch-theme-dark .epoch div.ref.category4,.epoch-theme-dark .epoch.category10 div.ref.category4{background-color:#78E8D3}.epoch-theme-dark .epoch .category4 .line,.epoch-theme-dark .epoch.category10 .category4 .line{stroke:#78E8D3}.epoch-theme-dark .epoch .category4 .area,.epoch-theme-dark .epoch .category4 .dot,.epoch-theme-dark .epoch.category10 .category4 .area,.epoch-theme-dark .epoch.category10 .category4 .dot{fill:#78E8D3;stroke:transparent}.epoch-theme-dark .epoch .arc.category4 path,.epoch-theme-dark .epoch.category10 .arc.category4 path{fill:#78E8D3}.epoch-theme-dark .epoch .bar.category4,.epoch-theme-dark .epoch.category10 .bar.category4{fill:#78E8D3}.epoch-theme-dark .epoch div.ref.category5,.epoch-theme-dark .epoch.category10 div.ref.category5{background-color:#C2FF97}.epoch-theme-dark .epoch .category5 .line,.epoch-theme-dark .epoch.category10 .category5 .line{stroke:#C2FF97}.epoch-theme-dark .epoch .category5 .area,.epoch-theme-dark .epoch .category5 .dot,.epoch-theme-dark .epoch.category10 .category5 .area,.epoch-theme-dark .epoch.category10 .category5 .dot{fill:#C2FF97;stroke:transparent}.epoch-theme-dark .epoch .arc.category5 path,.epoch-theme-dark .epoch.category10 .arc.category5 path{fill:#C2FF97}.epoch-theme-dark .epoch .bar.category5,.epoch-theme-dark .epoch.category10 .bar.category5{fill:#C2FF97}.epoch-theme-dark .epoch div.ref.category6,.epoch-theme-dark .epoch.category10 div.ref.category6{background-color:#B7BCD1}.epoch-theme-dark .epoch .category6 .line,.epoch-theme-dark .epoch.category10 .category6 .line{stroke:#B7BCD1}.epoch-theme-dark .epoch .category6 .area,.epoch-theme-dark .epoch .category6 .dot,.epoch-theme-dark .epoch.category10 .category6 .area,.epoch-theme-dark .epoch.category10 .category6 .dot{fill:#B7BCD1;stroke:transparent}.epoch-theme-dark .epoch .arc.category6 path,.epoch-theme-dark .epoch.category10 .arc.category6 path{fill:#B7BCD1}.epoch-theme-dark .epoch .bar.category6,.epoch-theme-dark .epoch.category10 .bar.category6{fill:#B7BCD1}.epoch-theme-dark .epoch div.ref.category7,.epoch-theme-dark .epoch.category10 div.ref.category7{background-color:#FF857F}.epoch-theme-dark .epoch .category7 .line,.epoch-theme-dark .epoch.category10 .category7 .line{stroke:#FF857F}.epoch-theme-dark .epoch .category7 .area,.epoch-theme-dark .epoch .category7 .dot,.epoch-theme-dark .epoch.category10 .category7 .area,.epoch-theme-dark .epoch.category10 .category7 .dot{fill:#FF857F;stroke:transparent}.epoch-theme-dark .epoch .arc.category7 path,.epoch-theme-dark .epoch.category10 .arc.category7 path{fill:#FF857F}.epoch-theme-dark .epoch .bar.category7,.epoch-theme-dark .epoch.category10 .bar.category7{fill:#FF857F}.epoch-theme-dark .epoch div.ref.category8,.epoch-theme-dark .epoch.category10 div.ref.category8{background-color:#F3DE88}.epoch-theme-dark .epoch .category8 .line,.epoch-theme-dark .epoch.category10 .category8 .line{stroke:#F3DE88}.epoch-theme-dark .epoch .category8 .area,.epoch-theme-dark .epoch .category8 .dot,.epoch-theme-dark .epoch.category10 .category8 .area,.epoch-theme-dark .epoch.category10 .category8 .dot{fill:#F3DE88;stroke:transparent}.epoch-theme-dark .epoch .arc.category8 path,.epoch-theme-dark .epoch.category10 .arc.category8 path{fill:#F3DE88}.epoch-theme-dark .epoch .bar.category8,.epoch-theme-dark .epoch.category10 .bar.category8{fill:#F3DE88}.epoch-theme-dark .epoch div.ref.category9,.epoch-theme-dark .epoch.category10 div.ref.category9{background-color:#C9935E}.epoch-theme-dark .epoch .category9 .line,.epoch-theme-dark .epoch.category10 .category9 .line{stroke:#C9935E}.epoch-theme-dark .epoch .category9 .area,.epoch-theme-dark .epoch .category9 .dot,.epoch-theme-dark .epoch.category10 .category9 .area,.epoch-theme-dark .epoch.category10 .category9 .dot{fill:#C9935E;stroke:transparent}.epoch-theme-dark .epoch .arc.category9 path,.epoch-theme-dark .epoch.category10 .arc.category9 path{fill:#C9935E}.epoch-theme-dark .epoch .bar.category9,.epoch-theme-dark .epoch.category10 .bar.category9{fill:#C9935E}.epoch-theme-dark .epoch div.ref.category10,.epoch-theme-dark .epoch.category10 div.ref.category10{background-color:#A488FF}.epoch-theme-dark .epoch .category10 .line,.epoch-theme-dark .epoch.category10 .category10 .line{stroke:#A488FF}.epoch-theme-dark .epoch .category10 .area,.epoch-theme-dark .epoch .category10 .dot,.epoch-theme-dark .epoch.category10 .category10 .area,.epoch-theme-dark .epoch.category10 .category10 .dot{fill:#A488FF;stroke:transparent}.epoch-theme-dark .epoch .arc.category10 path,.epoch-theme-dark .epoch.category10 .arc.category10 path{fill:#A488FF}.epoch-theme-dark .epoch .bar.category10,.epoch-theme-dark .epoch.category10 .bar.category10{fill:#A488FF}.epoch-theme-dark .epoch.category20 div.ref.category1{background-color:#909CFF}.epoch-theme-dark .epoch.category20 .category1 .line{stroke:#909CFF}.epoch-theme-dark .epoch.category20 .category1 .area,.epoch-theme-dark .epoch.category20 .category1 .dot{fill:#909CFF;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category1 path{fill:#909CFF}.epoch-theme-dark .epoch.category20 .bar.category1{fill:#909CFF}.epoch-theme-dark .epoch.category20 div.ref.category2{background-color:#626AAD}.epoch-theme-dark .epoch.category20 .category2 .line{stroke:#626AAD}.epoch-theme-dark .epoch.category20 .category2 .area,.epoch-theme-dark .epoch.category20 .category2 .dot{fill:#626AAD;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category2 path{fill:#626AAD}.epoch-theme-dark .epoch.category20 .bar.category2{fill:#626AAD}.epoch-theme-dark .epoch.category20 div.ref.category3{background-color:#FFAC89}.epoch-theme-dark .epoch.category20 .category3 .line{stroke:#FFAC89}.epoch-theme-dark .epoch.category20 .category3 .area,.epoch-theme-dark .epoch.category20 .category3 .dot{fill:#FFAC89;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category3 path{fill:#FFAC89}.epoch-theme-dark .epoch.category20 .bar.category3{fill:#FFAC89}.epoch-theme-dark .epoch.category20 div.ref.category4{background-color:#BD7F66}.epoch-theme-dark .epoch.category20 .category4 .line{stroke:#BD7F66}.epoch-theme-dark .epoch.category20 .category4 .area,.epoch-theme-dark .epoch.category20 .category4 .dot{fill:#BD7F66;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category4 path{fill:#BD7F66}.epoch-theme-dark .epoch.category20 .bar.category4{fill:#BD7F66}.epoch-theme-dark .epoch.category20 div.ref.category5{background-color:#E889E8}.epoch-theme-dark .epoch.category20 .category5 .line{stroke:#E889E8}.epoch-theme-dark .epoch.category20 .category5 .area,.epoch-theme-dark .epoch.category20 .category5 .dot{fill:#E889E8;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category5 path{fill:#E889E8}.epoch-theme-dark .epoch.category20 .bar.category5{fill:#E889E8}.epoch-theme-dark .epoch.category20 div.ref.category6{background-color:#995A99}.epoch-theme-dark .epoch.category20 .category6 .line{stroke:#995A99}.epoch-theme-dark .epoch.category20 .category6 .area,.epoch-theme-dark .epoch.category20 .category6 .dot{fill:#995A99;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category6 path{fill:#995A99}.epoch-theme-dark .epoch.category20 .bar.category6{fill:#995A99}.epoch-theme-dark .epoch.category20 div.ref.category7{background-color:#78E8D3}.epoch-theme-dark .epoch.category20 .category7 .line{stroke:#78E8D3}.epoch-theme-dark .epoch.category20 .category7 .area,.epoch-theme-dark .epoch.category20 .category7 .dot{fill:#78E8D3;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category7 path{fill:#78E8D3}.epoch-theme-dark .epoch.category20 .bar.category7{fill:#78E8D3}.epoch-theme-dark .epoch.category20 div.ref.category8{background-color:#4F998C}.epoch-theme-dark .epoch.category20 .category8 .line{stroke:#4F998C}.epoch-theme-dark .epoch.category20 .category8 .area,.epoch-theme-dark .epoch.category20 .category8 .dot{fill:#4F998C;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category8 path{fill:#4F998C}.epoch-theme-dark .epoch.category20 .bar.category8{fill:#4F998C}.epoch-theme-dark .epoch.category20 div.ref.category9{background-color:#C2FF97}.epoch-theme-dark .epoch.category20 .category9 .line{stroke:#C2FF97}.epoch-theme-dark .epoch.category20 .category9 .area,.epoch-theme-dark .epoch.category20 .category9 .dot{fill:#C2FF97;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category9 path{fill:#C2FF97}.epoch-theme-dark .epoch.category20 .bar.category9{fill:#C2FF97}.epoch-theme-dark .epoch.category20 div.ref.category10{background-color:#789E5E}.epoch-theme-dark .epoch.category20 .category10 .line{stroke:#789E5E}.epoch-theme-dark .epoch.category20 .category10 .area,.epoch-theme-dark .epoch.category20 .category10 .dot{fill:#789E5E;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category10 path{fill:#789E5E}.epoch-theme-dark .epoch.category20 .bar.category10{fill:#789E5E}.epoch-theme-dark .epoch.category20 div.ref.category11{background-color:#B7BCD1}.epoch-theme-dark .epoch.category20 .category11 .line{stroke:#B7BCD1}.epoch-theme-dark .epoch.category20 .category11 .area,.epoch-theme-dark .epoch.category20 .category11 .dot{fill:#B7BCD1;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category11 path{fill:#B7BCD1}.epoch-theme-dark .epoch.category20 .bar.category11{fill:#B7BCD1}.epoch-theme-dark .epoch.category20 div.ref.category12{background-color:#7F8391}.epoch-theme-dark .epoch.category20 .category12 .line{stroke:#7F8391}.epoch-theme-dark .epoch.category20 .category12 .area,.epoch-theme-dark .epoch.category20 .category12 .dot{fill:#7F8391;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category12 path{fill:#7F8391}.epoch-theme-dark .epoch.category20 .bar.category12{fill:#7F8391}.epoch-theme-dark .epoch.category20 div.ref.category13{background-color:#CCB889}.epoch-theme-dark .epoch.category20 .category13 .line{stroke:#CCB889}.epoch-theme-dark .epoch.category20 .category13 .area,.epoch-theme-dark .epoch.category20 .category13 .dot{fill:#CCB889;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category13 path{fill:#CCB889}.epoch-theme-dark .epoch.category20 .bar.category13{fill:#CCB889}.epoch-theme-dark .epoch.category20 div.ref.category14{background-color:#A1906B}.epoch-theme-dark .epoch.category20 .category14 .line{stroke:#A1906B}.epoch-theme-dark .epoch.category20 .category14 .area,.epoch-theme-dark .epoch.category20 .category14 .dot{fill:#A1906B;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category14 path{fill:#A1906B}.epoch-theme-dark .epoch.category20 .bar.category14{fill:#A1906B}.epoch-theme-dark .epoch.category20 div.ref.category15{background-color:#F3DE88}.epoch-theme-dark .epoch.category20 .category15 .line{stroke:#F3DE88}.epoch-theme-dark .epoch.category20 .category15 .area,.epoch-theme-dark .epoch.category20 .category15 .dot{fill:#F3DE88;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category15 path{fill:#F3DE88}.epoch-theme-dark .epoch.category20 .bar.category15{fill:#F3DE88}.epoch-theme-dark .epoch.category20 div.ref.category16{background-color:#A89A5E}.epoch-theme-dark .epoch.category20 .category16 .line{stroke:#A89A5E}.epoch-theme-dark .epoch.category20 .category16 .area,.epoch-theme-dark .epoch.category20 .category16 .dot{fill:#A89A5E;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category16 path{fill:#A89A5E}.epoch-theme-dark .epoch.category20 .bar.category16{fill:#A89A5E}.epoch-theme-dark .epoch.category20 div.ref.category17{background-color:#FF857F}.epoch-theme-dark .epoch.category20 .category17 .line{stroke:#FF857F}.epoch-theme-dark .epoch.category20 .category17 .area,.epoch-theme-dark .epoch.category20 .category17 .dot{fill:#FF857F;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category17 path{fill:#FF857F}.epoch-theme-dark .epoch.category20 .bar.category17{fill:#FF857F}.epoch-theme-dark .epoch.category20 div.ref.category18{background-color:#BA615D}.epoch-theme-dark .epoch.category20 .category18 .line{stroke:#BA615D}.epoch-theme-dark .epoch.category20 .category18 .area,.epoch-theme-dark .epoch.category20 .category18 .dot{fill:#BA615D;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category18 path{fill:#BA615D}.epoch-theme-dark .epoch.category20 .bar.category18{fill:#BA615D}.epoch-theme-dark .epoch.category20 div.ref.category19{background-color:#A488FF}.epoch-theme-dark .epoch.category20 .category19 .line{stroke:#A488FF}.epoch-theme-dark .epoch.category20 .category19 .area,.epoch-theme-dark .epoch.category20 .category19 .dot{fill:#A488FF;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category19 path{fill:#A488FF}.epoch-theme-dark .epoch.category20 .bar.category19{fill:#A488FF}.epoch-theme-dark .epoch.category20 div.ref.category20{background-color:#7662B8}.epoch-theme-dark .epoch.category20 .category20 .line{stroke:#7662B8}.epoch-theme-dark .epoch.category20 .category20 .area,.epoch-theme-dark .epoch.category20 .category20 .dot{fill:#7662B8;stroke:transparent}.epoch-theme-dark .epoch.category20 .arc.category20 path{fill:#7662B8}.epoch-theme-dark .epoch.category20 .bar.category20{fill:#7662B8}.epoch-theme-dark .epoch.category20b div.ref.category1{background-color:#909CFF}.epoch-theme-dark .epoch.category20b .category1 .line{stroke:#909CFF}.epoch-theme-dark .epoch.category20b .category1 .area,.epoch-theme-dark .epoch.category20b .category1 .dot{fill:#909CFF;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category1 path{fill:#909CFF}.epoch-theme-dark .epoch.category20b .bar.category1{fill:#909CFF}.epoch-theme-dark .epoch.category20b div.ref.category2{background-color:#7680D1}.epoch-theme-dark .epoch.category20b .category2 .line{stroke:#7680D1}.epoch-theme-dark .epoch.category20b .category2 .area,.epoch-theme-dark .epoch.category20b .category2 .dot{fill:#7680D1;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category2 path{fill:#7680D1}.epoch-theme-dark .epoch.category20b .bar.category2{fill:#7680D1}.epoch-theme-dark .epoch.category20b div.ref.category3{background-color:#656DB2}.epoch-theme-dark .epoch.category20b .category3 .line{stroke:#656DB2}.epoch-theme-dark .epoch.category20b .category3 .area,.epoch-theme-dark .epoch.category20b .category3 .dot{fill:#656DB2;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category3 path{fill:#656DB2}.epoch-theme-dark .epoch.category20b .bar.category3{fill:#656DB2}.epoch-theme-dark .epoch.category20b div.ref.category4{background-color:#525992}.epoch-theme-dark .epoch.category20b .category4 .line{stroke:#525992}.epoch-theme-dark .epoch.category20b .category4 .area,.epoch-theme-dark .epoch.category20b .category4 .dot{fill:#525992;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category4 path{fill:#525992}.epoch-theme-dark .epoch.category20b .bar.category4{fill:#525992}.epoch-theme-dark .epoch.category20b div.ref.category5{background-color:#FFAC89}.epoch-theme-dark .epoch.category20b .category5 .line{stroke:#FFAC89}.epoch-theme-dark .epoch.category20b .category5 .area,.epoch-theme-dark .epoch.category20b .category5 .dot{fill:#FFAC89;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category5 path{fill:#FFAC89}.epoch-theme-dark .epoch.category20b .bar.category5{fill:#FFAC89}.epoch-theme-dark .epoch.category20b div.ref.category6{background-color:#D18D71}.epoch-theme-dark .epoch.category20b .category6 .line{stroke:#D18D71}.epoch-theme-dark .epoch.category20b .category6 .area,.epoch-theme-dark .epoch.category20b .category6 .dot{fill:#D18D71;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category6 path{fill:#D18D71}.epoch-theme-dark .epoch.category20b .bar.category6{fill:#D18D71}.epoch-theme-dark .epoch.category20b div.ref.category7{background-color:#AB735C}.epoch-theme-dark .epoch.category20b .category7 .line{stroke:#AB735C}.epoch-theme-dark .epoch.category20b .category7 .area,.epoch-theme-dark .epoch.category20b .category7 .dot{fill:#AB735C;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category7 path{fill:#AB735C}.epoch-theme-dark .epoch.category20b .bar.category7{fill:#AB735C}.epoch-theme-dark .epoch.category20b div.ref.category8{background-color:#92624E}.epoch-theme-dark .epoch.category20b .category8 .line{stroke:#92624E}.epoch-theme-dark .epoch.category20b .category8 .area,.epoch-theme-dark .epoch.category20b .category8 .dot{fill:#92624E;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category8 path{fill:#92624E}.epoch-theme-dark .epoch.category20b .bar.category8{fill:#92624E}.epoch-theme-dark .epoch.category20b div.ref.category9{background-color:#E889E8}.epoch-theme-dark .epoch.category20b .category9 .line{stroke:#E889E8}.epoch-theme-dark .epoch.category20b .category9 .area,.epoch-theme-dark .epoch.category20b .category9 .dot{fill:#E889E8;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category9 path{fill:#E889E8}.epoch-theme-dark .epoch.category20b .bar.category9{fill:#E889E8}.epoch-theme-dark .epoch.category20b div.ref.category10{background-color:#BA6EBA}.epoch-theme-dark .epoch.category20b .category10 .line{stroke:#BA6EBA}.epoch-theme-dark .epoch.category20b .category10 .area,.epoch-theme-dark .epoch.category20b .category10 .dot{fill:#BA6EBA;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category10 path{fill:#BA6EBA}.epoch-theme-dark .epoch.category20b .bar.category10{fill:#BA6EBA}.epoch-theme-dark .epoch.category20b div.ref.category11{background-color:#9B5C9B}.epoch-theme-dark .epoch.category20b .category11 .line{stroke:#9B5C9B}.epoch-theme-dark .epoch.category20b .category11 .area,.epoch-theme-dark .epoch.category20b .category11 .dot{fill:#9B5C9B;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category11 path{fill:#9B5C9B}.epoch-theme-dark .epoch.category20b .bar.category11{fill:#9B5C9B}.epoch-theme-dark .epoch.category20b div.ref.category12{background-color:#7B487B}.epoch-theme-dark .epoch.category20b .category12 .line{stroke:#7B487B}.epoch-theme-dark .epoch.category20b .category12 .area,.epoch-theme-dark .epoch.category20b .category12 .dot{fill:#7B487B;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category12 path{fill:#7B487B}.epoch-theme-dark .epoch.category20b .bar.category12{fill:#7B487B}.epoch-theme-dark .epoch.category20b div.ref.category13{background-color:#78E8D3}.epoch-theme-dark .epoch.category20b .category13 .line{stroke:#78E8D3}.epoch-theme-dark .epoch.category20b .category13 .area,.epoch-theme-dark .epoch.category20b .category13 .dot{fill:#78E8D3;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category13 path{fill:#78E8D3}.epoch-theme-dark .epoch.category20b .bar.category13{fill:#78E8D3}.epoch-theme-dark .epoch.category20b div.ref.category14{background-color:#60BAAA}.epoch-theme-dark .epoch.category20b .category14 .line{stroke:#60BAAA}.epoch-theme-dark .epoch.category20b .category14 .area,.epoch-theme-dark .epoch.category20b .category14 .dot{fill:#60BAAA;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category14 path{fill:#60BAAA}.epoch-theme-dark .epoch.category20b .bar.category14{fill:#60BAAA}.epoch-theme-dark .epoch.category20b div.ref.category15{background-color:#509B8D}.epoch-theme-dark .epoch.category20b .category15 .line{stroke:#509B8D}.epoch-theme-dark .epoch.category20b .category15 .area,.epoch-theme-dark .epoch.category20b .category15 .dot{fill:#509B8D;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category15 path{fill:#509B8D}.epoch-theme-dark .epoch.category20b .bar.category15{fill:#509B8D}.epoch-theme-dark .epoch.category20b div.ref.category16{background-color:#3F7B70}.epoch-theme-dark .epoch.category20b .category16 .line{stroke:#3F7B70}.epoch-theme-dark .epoch.category20b .category16 .area,.epoch-theme-dark .epoch.category20b .category16 .dot{fill:#3F7B70;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category16 path{fill:#3F7B70}.epoch-theme-dark .epoch.category20b .bar.category16{fill:#3F7B70}.epoch-theme-dark .epoch.category20b div.ref.category17{background-color:#C2FF97}.epoch-theme-dark .epoch.category20b .category17 .line{stroke:#C2FF97}.epoch-theme-dark .epoch.category20b .category17 .area,.epoch-theme-dark .epoch.category20b .category17 .dot{fill:#C2FF97;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category17 path{fill:#C2FF97}.epoch-theme-dark .epoch.category20b .bar.category17{fill:#C2FF97}.epoch-theme-dark .epoch.category20b div.ref.category18{background-color:#9FD17C}.epoch-theme-dark .epoch.category20b .category18 .line{stroke:#9FD17C}.epoch-theme-dark .epoch.category20b .category18 .area,.epoch-theme-dark .epoch.category20b .category18 .dot{fill:#9FD17C;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category18 path{fill:#9FD17C}.epoch-theme-dark .epoch.category20b .bar.category18{fill:#9FD17C}.epoch-theme-dark .epoch.category20b div.ref.category19{background-color:#7DA361}.epoch-theme-dark .epoch.category20b .category19 .line{stroke:#7DA361}.epoch-theme-dark .epoch.category20b .category19 .area,.epoch-theme-dark .epoch.category20b .category19 .dot{fill:#7DA361;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category19 path{fill:#7DA361}.epoch-theme-dark .epoch.category20b .bar.category19{fill:#7DA361}.epoch-theme-dark .epoch.category20b div.ref.category20{background-color:#65854E}.epoch-theme-dark .epoch.category20b .category20 .line{stroke:#65854E}.epoch-theme-dark .epoch.category20b .category20 .area,.epoch-theme-dark .epoch.category20b .category20 .dot{fill:#65854E;stroke:transparent}.epoch-theme-dark .epoch.category20b .arc.category20 path{fill:#65854E}.epoch-theme-dark .epoch.category20b .bar.category20{fill:#65854E}.epoch-theme-dark .epoch.category20c div.ref.category1{background-color:#B7BCD1}.epoch-theme-dark .epoch.category20c .category1 .line{stroke:#B7BCD1}.epoch-theme-dark .epoch.category20c .category1 .area,.epoch-theme-dark .epoch.category20c .category1 .dot{fill:#B7BCD1;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category1 path{fill:#B7BCD1}.epoch-theme-dark .epoch.category20c .bar.category1{fill:#B7BCD1}.epoch-theme-dark .epoch.category20c div.ref.category2{background-color:#979DAD}.epoch-theme-dark .epoch.category20c .category2 .line{stroke:#979DAD}.epoch-theme-dark .epoch.category20c .category2 .area,.epoch-theme-dark .epoch.category20c .category2 .dot{fill:#979DAD;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category2 path{fill:#979DAD}.epoch-theme-dark .epoch.category20c .bar.category2{fill:#979DAD}.epoch-theme-dark .epoch.category20c div.ref.category3{background-color:#6E717D}.epoch-theme-dark .epoch.category20c .category3 .line{stroke:#6E717D}.epoch-theme-dark .epoch.category20c .category3 .area,.epoch-theme-dark .epoch.category20c .category3 .dot{fill:#6E717D;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category3 path{fill:#6E717D}.epoch-theme-dark .epoch.category20c .bar.category3{fill:#6E717D}.epoch-theme-dark .epoch.category20c div.ref.category4{background-color:#595C66}.epoch-theme-dark .epoch.category20c .category4 .line{stroke:#595C66}.epoch-theme-dark .epoch.category20c .category4 .area,.epoch-theme-dark .epoch.category20c .category4 .dot{fill:#595C66;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category4 path{fill:#595C66}.epoch-theme-dark .epoch.category20c .bar.category4{fill:#595C66}.epoch-theme-dark .epoch.category20c div.ref.category5{background-color:#FF857F}.epoch-theme-dark .epoch.category20c .category5 .line{stroke:#FF857F}.epoch-theme-dark .epoch.category20c .category5 .area,.epoch-theme-dark .epoch.category20c .category5 .dot{fill:#FF857F;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category5 path{fill:#FF857F}.epoch-theme-dark .epoch.category20c .bar.category5{fill:#FF857F}.epoch-theme-dark .epoch.category20c div.ref.category6{background-color:#DE746E}.epoch-theme-dark .epoch.category20c .category6 .line{stroke:#DE746E}.epoch-theme-dark .epoch.category20c .category6 .area,.epoch-theme-dark .epoch.category20c .category6 .dot{fill:#DE746E;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category6 path{fill:#DE746E}.epoch-theme-dark .epoch.category20c .bar.category6{fill:#DE746E}.epoch-theme-dark .epoch.category20c div.ref.category7{background-color:#B55F5A}.epoch-theme-dark .epoch.category20c .category7 .line{stroke:#B55F5A}.epoch-theme-dark .epoch.category20c .category7 .area,.epoch-theme-dark .epoch.category20c .category7 .dot{fill:#B55F5A;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category7 path{fill:#B55F5A}.epoch-theme-dark .epoch.category20c .bar.category7{fill:#B55F5A}.epoch-theme-dark .epoch.category20c div.ref.category8{background-color:#964E4B}.epoch-theme-dark .epoch.category20c .category8 .line{stroke:#964E4B}.epoch-theme-dark .epoch.category20c .category8 .area,.epoch-theme-dark .epoch.category20c .category8 .dot{fill:#964E4B;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category8 path{fill:#964E4B}.epoch-theme-dark .epoch.category20c .bar.category8{fill:#964E4B}.epoch-theme-dark .epoch.category20c div.ref.category9{background-color:#F3DE88}.epoch-theme-dark .epoch.category20c .category9 .line{stroke:#F3DE88}.epoch-theme-dark .epoch.category20c .category9 .area,.epoch-theme-dark .epoch.category20c .category9 .dot{fill:#F3DE88;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category9 path{fill:#F3DE88}.epoch-theme-dark .epoch.category20c .bar.category9{fill:#F3DE88}.epoch-theme-dark .epoch.category20c div.ref.category10{background-color:#DBC87B}.epoch-theme-dark .epoch.category20c .category10 .line{stroke:#DBC87B}.epoch-theme-dark .epoch.category20c .category10 .area,.epoch-theme-dark .epoch.category20c .category10 .dot{fill:#DBC87B;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category10 path{fill:#DBC87B}.epoch-theme-dark .epoch.category20c .bar.category10{fill:#DBC87B}.epoch-theme-dark .epoch.category20c div.ref.category11{background-color:#BAAA68}.epoch-theme-dark .epoch.category20c .category11 .line{stroke:#BAAA68}.epoch-theme-dark .epoch.category20c .category11 .area,.epoch-theme-dark .epoch.category20c .category11 .dot{fill:#BAAA68;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category11 path{fill:#BAAA68}.epoch-theme-dark .epoch.category20c .bar.category11{fill:#BAAA68}.epoch-theme-dark .epoch.category20c div.ref.category12{background-color:#918551}.epoch-theme-dark .epoch.category20c .category12 .line{stroke:#918551}.epoch-theme-dark .epoch.category20c .category12 .area,.epoch-theme-dark .epoch.category20c .category12 .dot{fill:#918551;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category12 path{fill:#918551}.epoch-theme-dark .epoch.category20c .bar.category12{fill:#918551}.epoch-theme-dark .epoch.category20c div.ref.category13{background-color:#C9935E}.epoch-theme-dark .epoch.category20c .category13 .line{stroke:#C9935E}.epoch-theme-dark .epoch.category20c .category13 .area,.epoch-theme-dark .epoch.category20c .category13 .dot{fill:#C9935E;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category13 path{fill:#C9935E}.epoch-theme-dark .epoch.category20c .bar.category13{fill:#C9935E}.epoch-theme-dark .epoch.category20c div.ref.category14{background-color:#B58455}.epoch-theme-dark .epoch.category20c .category14 .line{stroke:#B58455}.epoch-theme-dark .epoch.category20c .category14 .area,.epoch-theme-dark .epoch.category20c .category14 .dot{fill:#B58455;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category14 path{fill:#B58455}.epoch-theme-dark .epoch.category20c .bar.category14{fill:#B58455}.epoch-theme-dark .epoch.category20c div.ref.category15{background-color:#997048}.epoch-theme-dark .epoch.category20c .category15 .line{stroke:#997048}.epoch-theme-dark .epoch.category20c .category15 .area,.epoch-theme-dark .epoch.category20c .category15 .dot{fill:#997048;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category15 path{fill:#997048}.epoch-theme-dark .epoch.category20c .bar.category15{fill:#997048}.epoch-theme-dark .epoch.category20c div.ref.category16{background-color:#735436}.epoch-theme-dark .epoch.category20c .category16 .line{stroke:#735436}.epoch-theme-dark .epoch.category20c .category16 .area,.epoch-theme-dark .epoch.category20c .category16 .dot{fill:#735436;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category16 path{fill:#735436}.epoch-theme-dark .epoch.category20c .bar.category16{fill:#735436}.epoch-theme-dark .epoch.category20c div.ref.category17{background-color:#A488FF}.epoch-theme-dark .epoch.category20c .category17 .line{stroke:#A488FF}.epoch-theme-dark .epoch.category20c .category17 .area,.epoch-theme-dark .epoch.category20c .category17 .dot{fill:#A488FF;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category17 path{fill:#A488FF}.epoch-theme-dark .epoch.category20c .bar.category17{fill:#A488FF}.epoch-theme-dark .epoch.category20c div.ref.category18{background-color:#8670D1}.epoch-theme-dark .epoch.category20c .category18 .line{stroke:#8670D1}.epoch-theme-dark .epoch.category20c .category18 .area,.epoch-theme-dark .epoch.category20c .category18 .dot{fill:#8670D1;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category18 path{fill:#8670D1}.epoch-theme-dark .epoch.category20c .bar.category18{fill:#8670D1}.epoch-theme-dark .epoch.category20c div.ref.category19{background-color:#705CAD}.epoch-theme-dark .epoch.category20c .category19 .line{stroke:#705CAD}.epoch-theme-dark .epoch.category20c .category19 .area,.epoch-theme-dark .epoch.category20c .category19 .dot{fill:#705CAD;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category19 path{fill:#705CAD}.epoch-theme-dark .epoch.category20c .bar.category19{fill:#705CAD}.epoch-theme-dark .epoch.category20c div.ref.category20{background-color:#52447F}.epoch-theme-dark .epoch.category20c .category20 .line{stroke:#52447F}.epoch-theme-dark .epoch.category20c .category20 .area,.epoch-theme-dark .epoch.category20c .category20 .dot{fill:#52447F;stroke:transparent}.epoch-theme-dark .epoch.category20c .arc.category20 path{fill:#52447F}.epoch-theme-dark .epoch.category20c .bar.category20{fill:#52447F}
2 | 


--------------------------------------------------------------------------------
/serial-plot-epoch/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "serial-plot-epoch",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "epoch-charting": "^0.8.4"
14 |   },
15 |   "devDependencies": {
16 |     "webpack": "^4.22.0",
17 |     "webpack-cli": "^3.1.2"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/serial-plot-epoch/renderer.js:
--------------------------------------------------------------------------------
 1 | require("d3");
 2 | require("epoch-charting");
 3 | 
 4 | const dataSets = new Array(numPlots);
 5 | const charts = new Array(numPlots);
 6 | 
 7 | for (var i=0, now=new Date().getTime(); i<numPlots; i++) {
 8 |   dataSets[i] = [{
 9 |     label: 'Series ' + i,
10 |     values: [{
11 |       time: now,
12 |       y: 0.0
13 |     }]  // we need initial data
14 |   }];
15 | 
16 |   charts[i] = $('#line' + i).epoch({
17 |     type: 'time.line',
18 |     data: dataSets[i],
19 |     axes: ['left', 'bottom'],
20 |     fps: 60,
21 |     queueSize: 1,
22 |     range: [0, 4095]
23 |   });
24 | }
25 | 
26 | 
27 | // overridden function, append new points
28 | renderPlots = function() {
29 |   for (var i=0; i<numPlots; i++) {
30 | 
31 |     charts[i].push( [{
32 |       time: new Date().getTime(),
33 |       y: pointsArr[i]
34 |     }] );
35 | 
36 |   }
37 | };
38 | 


--------------------------------------------------------------------------------
/serial-plot-epoch/screenshot_epoch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ussserrr/serial-plot-web/b992715e3a62d951fa5dbec816f5fd01b7076597/serial-plot-epoch/screenshot_epoch.png


--------------------------------------------------------------------------------
/serial-plot-epoch/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // webpack.config.js
 2 | 
 3 | module.exports = {
 4 |   entry: './renderer.js',
 5 |   output: {
 6 |     filename: 'renderer_packed.js'
 7 |   },
 8 |   devtool: "source-map"
 9 | };
10 | 


--------------------------------------------------------------------------------
/serial-plot-server/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | # macOS-specific
64 | .DS_Store
65 | 


--------------------------------------------------------------------------------
/serial-plot-server/README.md:
--------------------------------------------------------------------------------
 1 | ## Installation
 2 | Run `npm install` to install dependencies.
 3 | 
 4 | Configure following parameters to match your set-up:
 5 |  - `serialPort`
 6 |  - `httpPort`
 7 |  - `webSocketPort`
 8 |  - Path to static (front-end data)
 9 | 
10 | 
11 | ## Usage
12 | Run `node server.js` to start the server. Go to `http://localhost:your_port/your/path/to/index.html` in your browser.
13 | 


--------------------------------------------------------------------------------
/serial-plot-server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "serial-plot-server",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "express": "^4.16.4",
14 |     "serialport": "^7.0.2",
15 |     "ws": "^6.1.0"
16 |   },
17 |   "devDependencies": {}
18 | }
19 | 


--------------------------------------------------------------------------------
/serial-plot-server/server.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  *  Serial port section
 3 |  */
 4 | const SerialPort = require('serialport');
 5 | const serialPort = new SerialPort(
 6 |   '/dev/cu.wchusbserial14220',
 7 |   { baudRate: 115200 },
 8 |   function (err) {
 9 |     if (err)
10 |       return console.log('Serial:', err.message);
11 |   }
12 | );
13 | 
14 | serialPort.on('open', function() {
15 |   if (serialPort.isOpen)
16 |     console.log("Serial port is open");
17 | });
18 | 
19 | // react only on every 8 bytes
20 | const SerialPortParserByteLength = require('@serialport/parser-byte-length');
21 | const serialPortParser = serialPort.pipe(new SerialPortParserByteLength({
22 |   length: 8
23 | }));
24 | 
25 | // read every new chunk of data and store it in a global variable
26 | var hexStr;
27 | serialPortParser.on("data", function(data) {
28 |   hexStr = data.toString('hex');
29 | });
30 | 
31 | 
32 | 
33 | /*
34 |  *  HTTP server section
35 |  */
36 | const express = require('express');
37 | const expressApp = express();
38 | const httpPort = 3000;
39 | 
40 | expressApp.use(express.static('.'));  // project' root as routing endpoint
41 | 
42 | expressApp.listen(httpPort, () => {
43 |   console.log("Express app listening on port " + httpPort);
44 | });
45 | 
46 | 
47 | 
48 | /*
49 |  *  WebSocket server section
50 |  */
51 | const WebSocket = require('ws');
52 | const webSocketPort = 1200;
53 | const webSocketServer = new WebSocket.Server({
54 |   port: webSocketPort
55 | });
56 | 
57 | webSocketServer.on('connection', function(ws) {
58 |   console.log("WebSocket is open on server port " + webSocketPort);
59 | 
60 |   // 'ws' is an internal WebSocket instance of WebSocket.Server.
61 |   // Send current data on any request from client
62 |   ws.on('message', function incoming(message) {
63 |     ws.send(hexStr);
64 |   });
65 | });
66 | 


--------------------------------------------------------------------------------
/serial-plot-smoothie/client.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 | 
 5 |     <p>2-channel serial plot</p>
 6 | 
 7 |     <canvas id="chart0" width="600" height="200"></canvas>
 8 |     <canvas id="chart1" width="600" height="200"></canvas>
 9 | 
10 |     <script type="text/javascript" src="http://localhost:3000/serial-plot-client/client.js"></script>
11 |     <script type="text/javascript" src="http://localhost:3000/serial-plot-smoothie/dist/renderer_packed.js"></script>
12 | 
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/serial-plot-smoothie/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ussserrr/serial-plot-web/b992715e3a62d951fa5dbec816f5fd01b7076597/serial-plot-smoothie/cover.png


--------------------------------------------------------------------------------
/serial-plot-smoothie/dist/renderer_packed.js:
--------------------------------------------------------------------------------
1 | !function(t){var e={};function i(s){if(e[s])return e[s].exports;var a=e[s]={i:s,l:!1,exports:{}};return t[s].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)i.d(s,a,function(e){return t[e]}.bind(null,a));return s},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){const s=i(1),a=new Array(numPlots),o=new Array(numPlots),n=["rgba(0, 255, 0, 1)","rgba(255, 0, 0, 1)"],r=["rgba(0, 255, 0, 0.2)","rgba(255, 0, 0, 0.2)"];for(var l=0;l<numPlots;l++)a[l]=new s.TimeSeries,o[l]=new s.SmoothieChart({minValue:0,maxValue:4095,tooltip:!0,timestampFormatter:s.SmoothieChart.timeFormatter,interpolation:"linear"}),o[l].addTimeSeries(a[l],{strokeStyle:n[l],fillStyle:r[l],lineWidth:1}),o[l].streamTo(document.getElementById("chart"+l),0);renderPlots=function(){for(var t=0;t<numPlots;t++)a[t].append((new Date).getTime(),pointsArr[t])}},function(t,e,i){!function(t){Date.now=Date.now||function(){return(new Date).getTime()};var e={extend:function(){arguments[0]=arguments[0]||{};for(var t=1;t<arguments.length;t++)for(var i in arguments[t])arguments[t].hasOwnProperty(i)&&("object"==typeof arguments[t][i]?arguments[t][i]instanceof Array?arguments[0][i]=arguments[t][i]:arguments[0][i]=e.extend(arguments[0][i],arguments[t][i]):arguments[0][i]=arguments[t][i]);return arguments[0]},binarySearch:function(t,e){for(var i=0,s=t.length;i<s;){var a=i+s>>1;e<t[a][0]?s=a:i=a+1}return i}};function i(t){this.options=e.extend({},i.defaultOptions,t),this.disabled=!1,this.clear()}function s(t){this.options=e.extend({},s.defaultChartOptions,t),this.seriesSet=[],this.currentValueRange=1,this.currentVisMinValue=0,this.lastRenderTimeMillis=0,this.lastChartTimestamp=0,this.mousemove=this.mousemove.bind(this),this.mouseout=this.mouseout.bind(this)}i.defaultOptions={resetBoundsInterval:3e3,resetBounds:!0},i.prototype.clear=function(){this.data=[],this.maxValue=Number.NaN,this.minValue=Number.NaN},i.prototype.resetBounds=function(){if(this.data.length){this.maxValue=this.data[0][1],this.minValue=this.data[0][1];for(var t=1;t<this.data.length;t++){var e=this.data[t][1];e>this.maxValue&&(this.maxValue=e),e<this.minValue&&(this.minValue=e)}}else this.maxValue=Number.NaN,this.minValue=Number.NaN},i.prototype.append=function(t,e,i){for(var s=this.data.length-1;s>=0&&this.data[s][0]>t;)s--;-1===s?this.data.splice(0,0,[t,e]):this.data.length>0&&this.data[s][0]===t?i?(this.data[s][1]+=e,e=this.data[s][1]):this.data[s][1]=e:s<this.data.length-1?this.data.splice(s+1,0,[t,e]):this.data.push([t,e]),this.maxValue=isNaN(this.maxValue)?e:Math.max(this.maxValue,e),this.minValue=isNaN(this.minValue)?e:Math.min(this.minValue,e)},i.prototype.dropOldData=function(t,e){for(var i=0;this.data.length-i>=e&&this.data[i+1][0]<t;)i++;0!==i&&this.data.splice(0,i)},s.tooltipFormatter=function(t,e){for(var i=[(this.options.timestampFormatter||s.timeFormatter)(new Date(t))],a=0;a<e.length;++a)i.push('<span style="color:'+e[a].series.options.strokeStyle+'">'+this.options.yMaxFormatter(e[a].value,this.options.labels.precision)+"</span>");return i.join("<br>")},s.defaultChartOptions={millisPerPixel:20,enableDpiScaling:!0,yMinFormatter:function(t,e){return parseFloat(t).toFixed(e)},yMaxFormatter:function(t,e){return parseFloat(t).toFixed(e)},yIntermediateFormatter:function(t,e){return parseFloat(t).toFixed(e)},maxValueScale:1,minValueScale:1,interpolation:"bezier",scaleSmoothing:.125,maxDataSetLength:2,scrollBackwards:!1,displayDataFromPercentile:1,grid:{fillStyle:"#000000",strokeStyle:"#777777",lineWidth:1,sharpLines:!1,millisPerLine:1e3,verticalSections:2,borderVisible:!0},labels:{fillStyle:"#ffffff",disabled:!1,fontSize:10,fontFamily:"monospace",precision:2,showIntermediateLabels:!1,intermediateLabelSameAxis:!0},horizontalLines:[],tooltip:!1,tooltipLine:{lineWidth:1,strokeStyle:"#BBBBBB"},tooltipFormatter:s.tooltipFormatter,nonRealtimeData:!1,responsive:!1,limitFPS:0},s.AnimateCompatibility={requestAnimationFrame:function(t,e){return(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(function(){t(Date.now())},16)}).call(window,t,e)},cancelAnimationFrame:function(t){return(window.cancelAnimationFrame||function(t){clearTimeout(t)}).call(window,t)}},s.defaultSeriesPresentationOptions={lineWidth:1,strokeStyle:"#ffffff"},s.prototype.addTimeSeries=function(t,i){this.seriesSet.push({timeSeries:t,options:e.extend({},s.defaultSeriesPresentationOptions,i)}),t.options.resetBounds&&t.options.resetBoundsInterval>0&&(t.resetBoundsTimerId=setInterval(function(){t.resetBounds()},t.options.resetBoundsInterval))},s.prototype.removeTimeSeries=function(t){for(var e=this.seriesSet.length,i=0;i<e;i++)if(this.seriesSet[i].timeSeries===t){this.seriesSet.splice(i,1);break}t.resetBoundsTimerId&&clearInterval(t.resetBoundsTimerId)},s.prototype.getTimeSeriesOptions=function(t){for(var e=this.seriesSet.length,i=0;i<e;i++)if(this.seriesSet[i].timeSeries===t)return this.seriesSet[i].options},s.prototype.bringToFront=function(t){for(var e=this.seriesSet.length,i=0;i<e;i++)if(this.seriesSet[i].timeSeries===t){var s=this.seriesSet.splice(i,1);this.seriesSet.push(s[0]);break}},s.prototype.streamTo=function(t,e){this.canvas=t,this.delay=e,this.start()},s.prototype.getTooltipEl=function(){return this.tooltipEl||(this.tooltipEl=document.createElement("div"),this.tooltipEl.className="smoothie-chart-tooltip",this.tooltipEl.style.position="absolute",this.tooltipEl.style.display="none",document.body.appendChild(this.tooltipEl)),this.tooltipEl},s.prototype.updateTooltip=function(){var t=this.getTooltipEl();if(this.mouseover&&this.options.tooltip){for(var i=this.lastChartTimestamp,s=this.options.scrollBackwards?i-this.mouseX*this.options.millisPerPixel:i-(this.canvas.offsetWidth-this.mouseX)*this.options.millisPerPixel,a=[],o=0;o<this.seriesSet.length;o++){var n=this.seriesSet[o].timeSeries;if(!n.disabled){var r=e.binarySearch(n.data,s);r>0&&r<n.data.length&&a.push({series:this.seriesSet[o],index:r,value:n.data[r][1]})}}a.length?(t.innerHTML=this.options.tooltipFormatter.call(this,s,a),t.style.display="block"):t.style.display="none"}else t.style.display="none"},s.prototype.mousemove=function(t){this.mouseover=!0,this.mouseX=t.offsetX,this.mouseY=t.offsetY,this.mousePageX=t.pageX,this.mousePageY=t.pageY;var e=this.getTooltipEl();e.style.top=Math.round(this.mousePageY)+"px",e.style.left=Math.round(this.mousePageX)+"px",this.updateTooltip()},s.prototype.mouseout=function(){this.mouseover=!1,this.mouseX=this.mouseY=-1,this.tooltipEl&&(this.tooltipEl.style.display="none")},s.prototype.resize=function(){var t,e,i=this.options.enableDpiScaling&&window?window.devicePixelRatio:1;this.options.responsive?(t=this.canvas.offsetWidth,e=this.canvas.offsetHeight,t!==this.lastWidth&&(this.lastWidth=t,this.canvas.setAttribute("width",Math.floor(t*i).toString()),this.canvas.getContext("2d").scale(i,i)),e!==this.lastHeight&&(this.lastHeight=e,this.canvas.setAttribute("height",Math.floor(e*i).toString()),this.canvas.getContext("2d").scale(i,i))):1!==i&&(t=parseInt(this.canvas.getAttribute("width")),e=parseInt(this.canvas.getAttribute("height")),this.originalWidth&&Math.floor(this.originalWidth*i)===t||(this.originalWidth=t,this.canvas.setAttribute("width",Math.floor(t*i).toString()),this.canvas.style.width=t+"px",this.canvas.getContext("2d").scale(i,i)),this.originalHeight&&Math.floor(this.originalHeight*i)===e||(this.originalHeight=e,this.canvas.setAttribute("height",Math.floor(e*i).toString()),this.canvas.style.height=e+"px",this.canvas.getContext("2d").scale(i,i)))},s.prototype.start=function(){if(!this.frame){this.canvas.addEventListener("mousemove",this.mousemove),this.canvas.addEventListener("mouseout",this.mouseout);var t=function(){this.frame=s.AnimateCompatibility.requestAnimationFrame(function(){if(this.options.nonRealtimeData){var e=new Date(0),i=this.seriesSet.reduce(function(t,e){var i=e.timeSeries.data,s=Math.round(this.options.displayDataFromPercentile*i.length)-1;if(s=(s=s>=0?s:0)<=i.length-1?s:i.length-1,i&&i.length>0){var a=i[s][0];t=t>a?t:a}return t}.bind(this),e);this.render(this.canvas,i>e?i:null)}else this.render();t()}.bind(this))}.bind(this);t()}},s.prototype.stop=function(){this.frame&&(s.AnimateCompatibility.cancelAnimationFrame(this.frame),delete this.frame,this.canvas.removeEventListener("mousemove",this.mousemove),this.canvas.removeEventListener("mouseout",this.mouseout))},s.prototype.updateValueRange=function(){for(var t=this.options,e=Number.NaN,i=Number.NaN,s=0;s<this.seriesSet.length;s++){var a=this.seriesSet[s].timeSeries;a.disabled||(isNaN(a.maxValue)||(e=isNaN(e)?a.maxValue:Math.max(e,a.maxValue)),isNaN(a.minValue)||(i=isNaN(i)?a.minValue:Math.min(i,a.minValue)))}if(null!=t.maxValue?e=t.maxValue:e*=t.maxValueScale,null!=t.minValue?i=t.minValue:i-=Math.abs(i*t.minValueScale-i),this.options.yRangeFunction){var o=this.options.yRangeFunction({min:i,max:e});i=o.min,e=o.max}if(!isNaN(e)&&!isNaN(i)){var n=e-i-this.currentValueRange,r=i-this.currentVisMinValue;this.isAnimatingScale=Math.abs(n)>.1||Math.abs(r)>.1,this.currentValueRange+=t.scaleSmoothing*n,this.currentVisMinValue+=t.scaleSmoothing*r}this.valueRange={min:i,max:e}},s.prototype.render=function(t,e){var i=Date.now();if(!(this.options.limitFPS>0&&i-this.lastRenderTimeMillis<1e3/this.options.limitFPS)){if(!this.isAnimatingScale){var s=Math.min(1e3/6,this.options.millisPerPixel);if(i-this.lastRenderTimeMillis<s)return}this.resize(),this.updateTooltip(),this.lastRenderTimeMillis=i,t=t||this.canvas,e=e||i-(this.delay||0),e-=e%this.options.millisPerPixel,this.lastChartTimestamp=e;var a=t.getContext("2d"),o=this.options,n={top:0,left:0,width:t.clientWidth,height:t.clientHeight},r=e-n.width*o.millisPerPixel,l=function(t){var e=t-this.currentVisMinValue;return 0===this.currentValueRange?n.height:n.height-Math.round(e/this.currentValueRange*n.height)}.bind(this),h=function(t){return o.scrollBackwards?Math.round((e-t)/o.millisPerPixel):Math.round(n.width-(e-t)/o.millisPerPixel)};if(this.updateValueRange(),a.font=o.labels.fontSize+"px "+o.labels.fontFamily,a.save(),a.translate(n.left,n.top),a.beginPath(),a.rect(0,0,n.width,n.height),a.clip(),a.save(),a.fillStyle=o.grid.fillStyle,a.clearRect(0,0,n.width,n.height),a.fillRect(0,0,n.width,n.height),a.restore(),a.save(),a.lineWidth=o.grid.lineWidth,a.strokeStyle=o.grid.strokeStyle,o.grid.millisPerLine>0){a.beginPath();for(var u=e-e%o.grid.millisPerLine;u>=r;u-=o.grid.millisPerLine){var m=h(u);o.grid.sharpLines&&(m-=.5),a.moveTo(m,0),a.lineTo(m,n.height)}a.stroke(),a.closePath()}for(var d=1;d<o.grid.verticalSections;d++){var c=Math.round(d*n.height/o.grid.verticalSections);o.grid.sharpLines&&(c-=.5),a.beginPath(),a.moveTo(0,c),a.lineTo(n.width,c),a.stroke(),a.closePath()}if(o.grid.borderVisible&&(a.beginPath(),a.strokeRect(0,0,n.width,n.height),a.closePath()),a.restore(),o.horizontalLines&&o.horizontalLines.length)for(var p=0;p<o.horizontalLines.length;p++){var f=o.horizontalLines[p],g=Math.round(l(f.value))-.5;a.strokeStyle=f.color||"#ffffff",a.lineWidth=f.lineWidth||1,a.beginPath(),a.moveTo(0,g),a.lineTo(n.width,g),a.stroke(),a.closePath()}for(var v=0;v<this.seriesSet.length;v++){a.save();var S=this.seriesSet[v].timeSeries;if(!S.disabled){var y=S.data,b=this.seriesSet[v].options;S.dropOldData(r,o.maxDataSetLength),a.lineWidth=b.lineWidth,a.strokeStyle=b.strokeStyle,a.beginPath();for(var w=0,x=0,P=0,T=0;T<y.length&&1!==y.length;T++){var V=h(y[T][0]),F=l(y[T][1]);if(0===T)w=V,a.moveTo(V,F);else switch(o.interpolation){case"linear":case"line":a.lineTo(V,F);break;case"bezier":default:a.bezierCurveTo(Math.round((x+V)/2),P,Math.round(x+V)/2,F,V,F);break;case"step":a.lineTo(V,P),a.lineTo(V,F)}x=V,P=F}y.length>1&&(b.fillStyle&&(a.lineTo(n.width+b.lineWidth+1,P),a.lineTo(n.width+b.lineWidth+1,n.height+b.lineWidth+1),a.lineTo(w,n.height+b.lineWidth),a.fillStyle=b.fillStyle,a.fill()),b.strokeStyle&&"none"!==b.strokeStyle&&a.stroke(),a.closePath()),a.restore()}}if(o.tooltip&&this.mouseX>=0&&(a.lineWidth=o.tooltipLine.lineWidth,a.strokeStyle=o.tooltipLine.strokeStyle,a.beginPath(),a.moveTo(this.mouseX,0),a.lineTo(this.mouseX,n.height),a.closePath(),a.stroke(),this.updateTooltip()),!o.labels.disabled&&!isNaN(this.valueRange.min)&&!isNaN(this.valueRange.max)){var M=o.yMaxFormatter(this.valueRange.max,o.labels.precision),N=o.yMinFormatter(this.valueRange.min,o.labels.precision),k=o.scrollBackwards?0:n.width-a.measureText(M).width-2,R=o.scrollBackwards?0:n.width-a.measureText(N).width-2;a.fillStyle=o.labels.fillStyle,a.fillText(M,k,o.labels.fontSize),a.fillText(N,R,n.height-2)}if(o.labels.showIntermediateLabels&&!isNaN(this.valueRange.min)&&!isNaN(this.valueRange.max)&&o.grid.verticalSections>0){var L=(this.valueRange.max-this.valueRange.min)/o.grid.verticalSections,B=n.height/o.grid.verticalSections;for(d=1;d<o.grid.verticalSections;d++){c=n.height-Math.round(d*B);o.grid.sharpLines&&(c-=.5);var A=o.yIntermediateFormatter(this.valueRange.min+d*L,o.labels.precision);intermediateLabelPos=o.labels.intermediateLabelSameAxis?o.scrollBackwards?0:n.width-a.measureText(A).width-2:o.scrollBackwards?n.width-a.measureText(A).width-2:0,a.fillText(A,intermediateLabelPos,c-o.grid.lineWidth)}}if(o.timestampFormatter&&o.grid.millisPerLine>0){var W=o.scrollBackwards?a.measureText(N).width:n.width-a.measureText(N).width+4;for(u=e-e%o.grid.millisPerLine;u>=r;u-=o.grid.millisPerLine){m=h(u);if(!o.scrollBackwards&&m<W||o.scrollBackwards&&m>W){var D=new Date(u),C=o.timestampFormatter(D),E=a.measureText(C).width;W=o.scrollBackwards?m+E+2:m-E-2,a.fillStyle=o.labels.fillStyle,o.scrollBackwards?a.fillText(C,m,n.height-2):a.fillText(C,m-E,n.height-2)}}}a.restore()}},s.timeFormatter=function(t){function e(t){return(t<10?"0":"")+t}return e(t.getHours())+":"+e(t.getMinutes())+":"+e(t.getSeconds())},t.TimeSeries=i,t.SmoothieChart=s}(e)}]);
2 | //# sourceMappingURL=renderer_packed.js.map


--------------------------------------------------------------------------------
/serial-plot-smoothie/dist/renderer_packed.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./renderer.js","webpack:///./node_modules/smoothie/smoothie.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","Smoothie","dataSets","Array","numPlots","charts","chartLineColors","chartFillColors","TimeSeries","SmoothieChart","minValue","maxValue","tooltip","timestampFormatter","timeFormatter","interpolation","addTimeSeries","strokeStyle","fillStyle","lineWidth","streamTo","document","getElementById","renderPlots","append","Date","getTime","pointsArr","now","Util","extend","arguments","length","binarySearch","data","low","high","mid","options","this","defaultOptions","disabled","clear","defaultChartOptions","seriesSet","currentValueRange","currentVisMinValue","lastRenderTimeMillis","lastChartTimestamp","mousemove","mouseout","resetBoundsInterval","resetBounds","Number","NaN","timestamp","sumRepeatedTimeStampValues","splice","push","isNaN","Math","max","min","dropOldData","oldestValidTime","maxDataSetLength","removeCount","tooltipFormatter","lines","series","yMaxFormatter","labels","precision","join","millisPerPixel","enableDpiScaling","yMinFormatter","parseFloat","toFixed","yIntermediateFormatter","intermediate","maxValueScale","minValueScale","scaleSmoothing","scrollBackwards","displayDataFromPercentile","grid","sharpLines","millisPerLine","verticalSections","borderVisible","fontSize","fontFamily","showIntermediateLabels","intermediateLabelSameAxis","horizontalLines","tooltipLine","nonRealtimeData","responsive","limitFPS","AnimateCompatibility","requestAnimationFrame","callback","element","window","webkitRequestAnimationFrame","mozRequestAnimationFrame","oRequestAnimationFrame","msRequestAnimationFrame","setTimeout","cancelAnimationFrame","id","clearTimeout","defaultSeriesPresentationOptions","timeSeries","resetBoundsTimerId","setInterval","removeTimeSeries","numSeries","clearInterval","getTimeSeriesOptions","bringToFront","set","canvas","delayMillis","delay","start","getTooltipEl","tooltipEl","createElement","className","style","position","display","body","appendChild","updateTooltip","el","mouseover","time","mouseX","offsetWidth","closeIdx","index","innerHTML","evt","offsetX","mouseY","offsetY","mousePageX","pageX","mousePageY","pageY","top","round","left","resize","width","height","dpr","devicePixelRatio","offsetHeight","lastWidth","setAttribute","floor","toString","getContext","scale","lastHeight","parseInt","getAttribute","originalWidth","originalHeight","frame","addEventListener","animate","dateZero","maxTimeStamp","reduce","dataSet","indexToCheck","lastDataTimeStamp","render","stop","removeEventListener","updateValueRange","chartOptions","chartMaxValue","chartMinValue","abs","yRangeFunction","range","valueRangeDiff","minValueDiff","isAnimatingScale","valueRange","nowMillis","maxIdleMillis","context","dimensions","clientWidth","clientHeight","valueToYPixel","offset","timeToXPixel","font","save","translate","beginPath","rect","clip","clearRect","fillRect","restore","gx","moveTo","lineTo","stroke","closePath","v","gy","strokeRect","hl","line","hly","color","seriesOptions","firstX","lastX","lastY","x","y","bezierCurveTo","fill","maxValueString","minValueString","maxLabelPos","measureText","minLabelPos","fillText","step","stepPixels","yValue","intermediateLabelPos","textUntilX","tx","ts","tsWidth","date","pad2","number","getHours","getMinutes","getSeconds"],"mappings":"aACA,IAAAA,KAGA,SAAAC,EAAAC,GAGA,GAAAF,EAAAE,GACA,OAAAF,EAAAE,GAAAC,QAGA,IAAAC,EAAAJ,EAAAE,IACAG,EAAAH,EACAI,GAAA,EACAH,YAUA,OANAI,EAAAL,GAAAM,KAAAJ,EAAAD,QAAAC,IAAAD,QAAAF,GAGAG,EAAAE,GAAA,EAGAF,EAAAD,QAKAF,EAAAQ,EAAAF,EAGAN,EAAAS,EAAAV,EAGAC,EAAAU,EAAA,SAAAR,EAAAS,EAAAC,GACAZ,EAAAa,EAAAX,EAAAS,IACAG,OAAAC,eAAAb,EAAAS,GAA0CK,YAAA,EAAAC,IAAAL,KAK1CZ,EAAAkB,EAAA,SAAAhB,GACA,oBAAAiB,eAAAC,aACAN,OAAAC,eAAAb,EAAAiB,OAAAC,aAAwDC,MAAA,WAExDP,OAAAC,eAAAb,EAAA,cAAiDmB,OAAA,KAQjDrB,EAAAsB,EAAA,SAAAD,EAAAE,GAEA,GADA,EAAAA,IAAAF,EAAArB,EAAAqB,IACA,EAAAE,EAAA,OAAAF,EACA,KAAAE,GAAA,iBAAAF,QAAAG,WAAA,OAAAH,EACA,IAAAI,EAAAX,OAAAY,OAAA,MAGA,GAFA1B,EAAAkB,EAAAO,GACAX,OAAAC,eAAAU,EAAA,WAAyCT,YAAA,EAAAK,UACzC,EAAAE,GAAA,iBAAAF,EAAA,QAAAM,KAAAN,EAAArB,EAAAU,EAAAe,EAAAE,EAAA,SAAAA,GAAgH,OAAAN,EAAAM,IAAqBC,KAAA,KAAAD,IACrI,OAAAF,GAIAzB,EAAA6B,EAAA,SAAA1B,GACA,IAAAS,EAAAT,KAAAqB,WACA,WAA2B,OAAArB,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAH,EAAAU,EAAAE,EAAA,IAAAA,GACAA,GAIAZ,EAAAa,EAAA,SAAAiB,EAAAC,GAAsD,OAAAjB,OAAAkB,UAAAC,eAAA1B,KAAAuB,EAAAC,IAGtD/B,EAAAkC,EAAA,GAIAlC,IAAAmC,EAAA,qBClFA,MAAAC,EAAiBpC,EAAQ,GAEzBqC,EAAA,IAAAC,MAAAC,UACAC,EAAA,IAAAF,MAAAC,UAGAE,GAAA,2CACAC,GAAA,+CAEA,QAAAtC,EAAA,EAAaA,EAAAmC,SAAYnC,IACzBiC,EAAAjC,GAAA,IAAAgC,EAAAO,WAEAH,EAAApC,GAAA,IAAAgC,EAAAQ,eACAC,SAAA,EACAC,SAAA,KACAC,SAAA,EACAC,mBAAAZ,EAAAQ,cAAAK,cACAC,cAAA,WAGAV,EAAApC,GAAA+C,cAAAd,EAAAjC,IACAgD,YAAAX,EAAArC,GACAiD,UAAAX,EAAAtC,GACAkD,UAAA,IAGAd,EAAApC,GAAAmD,SAAAC,SAAAC,eAAA,QAAArD,GAAA,GAIAsD,YAAA,WACA,QAAAtD,EAAA,EAAeA,EAAAmC,SAAYnC,IAC3BiC,EAAAjC,GAAAuD,QAAA,IAAAC,MAAAC,UAAAC,UAAA1D,uBC4DC,SAAAF,GAGD0D,KAAAG,IAAAH,KAAAG,KAAA,WAAqC,WAAAH,MAAAC,WAErC,IAAAG,GACAC,OAAA,WACAC,UAAA,GAAAA,UAAA,OACA,QAAA9D,EAAA,EAAqBA,EAAA8D,UAAAC,OAAsB/D,IAE3C,QAAAuB,KAAAuC,UAAA9D,GAEA8D,UAAA9D,GAAA6B,eAAAN,KAEA,iBAAAuC,UAAA9D,GAAAuB,GACAuC,UAAA9D,GAAAuB,aAAAW,MACA4B,UAAA,GAAAvC,GAAAuC,UAAA9D,GAAAuB,GAEAuC,UAAA,GAAAvC,GAAAqC,EAAAC,OAAAC,UAAA,GAAAvC,GAAAuC,UAAA9D,GAAAuB,IAGAuC,UAAA,GAAAvC,GAAAuC,UAAA9D,GAAAuB,IAKA,OAAAuC,UAAA,IAEAE,aAAA,SAAAC,EAAAhD,GAGA,IAFA,IAAAiD,EAAA,EACAC,EAAAF,EAAAF,OACAG,EAAAC,GAAA,CACA,IAAAC,EAAAF,EAAAC,GAAA,EACAlD,EAAAgD,EAAAG,GAAA,GACAD,EAAAC,EAEAF,EAAAE,EAAA,EAEA,OAAAF,IAoBA,SAAA3B,EAAA8B,GACAC,KAAAD,QAAAT,EAAAC,UAAiCtB,EAAAgC,eAAAF,GACjCC,KAAAE,UAAA,EACAF,KAAAG,QAmKA,SAAAjC,EAAA6B,GACAC,KAAAD,QAAAT,EAAAC,UAAiCrB,EAAAkC,oBAAAL,GACjCC,KAAAK,aACAL,KAAAM,kBAAA,EACAN,KAAAO,mBAAA,EACAP,KAAAQ,qBAAA,EACAR,KAAAS,mBAAA,EAEAT,KAAAU,UAAAV,KAAAU,UAAAxD,KAAA8C,MACAA,KAAAW,SAAAX,KAAAW,SAAAzD,KAAA8C,MAzKA/B,EAAAgC,gBACAW,oBAAA,IACAC,aAAA,GAMA5C,EAAAX,UAAA6C,MAAA,WACAH,KAAAL,QACAK,KAAA5B,SAAA0C,OAAAC,IACAf,KAAA7B,SAAA2C,OAAAC,KAQA9C,EAAAX,UAAAuD,YAAA,WACA,GAAAb,KAAAL,KAAAF,OAAA,CAEAO,KAAA5B,SAAA4B,KAAAL,KAAA,MACAK,KAAA7B,SAAA6B,KAAAL,KAAA,MACA,QAAAjE,EAAA,EAAqBA,EAAAsE,KAAAL,KAAAF,OAAsB/D,IAAA,CAC3C,IAAAiB,EAAAqD,KAAAL,KAAAjE,GAAA,GACAiB,EAAAqD,KAAA5B,WACA4B,KAAA5B,SAAAzB,GAEAA,EAAAqD,KAAA7B,WACA6B,KAAA7B,SAAAxB,SAKAqD,KAAA5B,SAAA0C,OAAAC,IACAf,KAAA7B,SAAA2C,OAAAC,KAYA9C,EAAAX,UAAA2B,OAAA,SAAA+B,EAAArE,EAAAsE,GAGA,IADA,IAAAvF,EAAAsE,KAAAL,KAAAF,OAAA,EACA/D,GAAA,GAAAsE,KAAAL,KAAAjE,GAAA,GAAAsF,GACAtF,KAGA,IAAAA,EAEAsE,KAAAL,KAAAuB,OAAA,KAAAF,EAAArE,IACKqD,KAAAL,KAAAF,OAAA,GAAAO,KAAAL,KAAAjE,GAAA,KAAAsF,EAELC,GAEAjB,KAAAL,KAAAjE,GAAA,IAAAiB,EACAA,EAAAqD,KAAAL,KAAAjE,GAAA,IAGAsE,KAAAL,KAAAjE,GAAA,GAAAiB,EAEKjB,EAAAsE,KAAAL,KAAAF,OAAA,EAELO,KAAAL,KAAAuB,OAAAxF,EAAA,KAAAsF,EAAArE,IAGAqD,KAAAL,KAAAwB,MAAAH,EAAArE,IAGAqD,KAAA5B,SAAAgD,MAAApB,KAAA5B,UAAAzB,EAAA0E,KAAAC,IAAAtB,KAAA5B,SAAAzB,GACAqD,KAAA7B,SAAAiD,MAAApB,KAAA7B,UAAAxB,EAAA0E,KAAAE,IAAAvB,KAAA7B,SAAAxB,IAGAsB,EAAAX,UAAAkE,YAAA,SAAAC,EAAAC,GAIA,IADA,IAAAC,EAAA,EACA3B,KAAAL,KAAAF,OAAAkC,GAAAD,GAAA1B,KAAAL,KAAAgC,EAAA,MAAAF,GACAE,IAEA,IAAAA,GACA3B,KAAAL,KAAAuB,OAAA,EAAAS,IAqFAzD,EAAA0D,iBAAA,SAAAZ,EAAArB,GAIA,IAHA,IACAkC,IADA7B,KAAAD,QAAAzB,oBAAAJ,EAAAK,eACA,IAAAW,KAAA8B,KAEAtF,EAAA,EAAqBA,EAAAiE,EAAAF,SAAiB/D,EACtCmG,EAAAV,KAAA,sBAAAxB,EAAAjE,GAAAoG,OAAA/B,QAAArB,YAAA,KACAsB,KAAAD,QAAAgC,cAAApC,EAAAjE,GAAAiB,MAAAqD,KAAAD,QAAAiC,OAAAC,WAAA,WAGA,OAAAJ,EAAAK,KAAA,SAGAhE,EAAAkC,qBACA+B,eAAA,GACAC,kBAAA,EACAC,cAAA,SAAAd,EAAAU,GACA,OAAAK,WAAAf,GAAAgB,QAAAN,IAEAF,cAAA,SAAAT,EAAAW,GACA,OAAAK,WAAAhB,GAAAiB,QAAAN,IAEAO,uBAAA,SAAAC,EAAAR,GACA,OAAAK,WAAAG,GAAAF,QAAAN,IAEAS,cAAA,EACAC,cAAA,EACAnE,cAAA,SACAoE,eAAA,KACAlB,iBAAA,EACAmB,iBAAA,EACAC,0BAAA,EACAC,MACApE,UAAA,UACAD,YAAA,UACAE,UAAA,EACAoE,YAAA,EACAC,cAAA,IACAC,iBAAA,EACAC,eAAA,GAEAnB,QACArD,UAAA,UACAuB,UAAA,EACAkD,SAAA,GACAC,WAAA,YACApB,UAAA,EACAqB,wBAAA,EACAC,2BAAA,GAEAC,mBACAnF,SAAA,EACAoF,aACA7E,UAAA,EACAF,YAAA,WAEAkD,iBAAA1D,EAAA0D,iBACA8B,iBAAA,EACAC,YAAA,EACAC,SAAA,GAIA1F,EAAA2F,sBAyBAC,sBAxBA,SAAAC,EAAAC,GAYA,OAVAC,OAAAH,uBACAG,OAAAC,6BACAD,OAAAE,0BACAF,OAAAG,wBACAH,OAAAI,yBACA,SAAAN,GACA,OAAAE,OAAAK,WAAA,WACAP,EAAA7E,KAAAG,QACe,MAEfxD,KAAAoI,OAAAF,EAAAC,IAaAO,qBAXA,SAAAC,GAMA,OAJAP,OAAAM,sBACA,SAAAC,GACAC,aAAAD,KAEA3I,KAAAoI,OAAAO,KASAtG,EAAAwG,kCACA9F,UAAA,EACAF,YAAA,WAgBAR,EAAAZ,UAAAmB,cAAA,SAAAkG,EAAA5E,GACAC,KAAAK,UAAAc,MAAyBwD,aAAA5E,QAAAT,EAAAC,UAA+CrB,EAAAwG,iCAAA3E,KACxE4E,EAAA5E,QAAAc,aAAA8D,EAAA5E,QAAAa,oBAAA,IACA+D,EAAAC,mBAAAC,YACA,WACAF,EAAA9D,eAEA8D,EAAA5E,QAAAa,uBAQA1C,EAAAZ,UAAAwH,iBAAA,SAAAH,GAGA,IADA,IAAAI,EAAA/E,KAAAK,UAAAZ,OACA/D,EAAA,EAAmBA,EAAAqJ,EAAerJ,IAClC,GAAAsE,KAAAK,UAAA3E,GAAAiJ,eAAA,CACA3E,KAAAK,UAAAa,OAAAxF,EAAA,GACA,MAIAiJ,EAAAC,oBAEAI,cAAAL,EAAAC,qBAUA1G,EAAAZ,UAAA2H,qBAAA,SAAAN,GAGA,IADA,IAAAI,EAAA/E,KAAAK,UAAAZ,OACA/D,EAAA,EAAmBA,EAAAqJ,EAAerJ,IAClC,GAAAsE,KAAAK,UAAA3E,GAAAiJ,eACA,OAAA3E,KAAAK,UAAA3E,GAAAqE,SAQA7B,EAAAZ,UAAA4H,aAAA,SAAAP,GAGA,IADA,IAAAI,EAAA/E,KAAAK,UAAAZ,OACA/D,EAAA,EAAmBA,EAAAqJ,EAAerJ,IAClC,GAAAsE,KAAAK,UAAA3E,GAAAiJ,eAAA,CACA,IAAAQ,EAAAnF,KAAAK,UAAAa,OAAAxF,EAAA,GACAsE,KAAAK,UAAAc,KAAAgE,EAAA,IACA,QAYAjH,EAAAZ,UAAAuB,SAAA,SAAAuG,EAAAC,GACArF,KAAAoF,SACApF,KAAAsF,MAAAD,EACArF,KAAAuF,SAGArH,EAAAZ,UAAAkI,aAAA,WASA,OAPAxF,KAAAyF,YACAzF,KAAAyF,UAAA3G,SAAA4G,cAAA,OACA1F,KAAAyF,UAAAE,UAAA,yBACA3F,KAAAyF,UAAAG,MAAAC,SAAA,WACA7F,KAAAyF,UAAAG,MAAAE,QAAA,OACAhH,SAAAiH,KAAAC,YAAAhG,KAAAyF,YAEAzF,KAAAyF,WAGAvH,EAAAZ,UAAA2I,cAAA,WACA,IAAAC,EAAAlG,KAAAwF,eAEA,GAAAxF,KAAAmG,WAAAnG,KAAAD,QAAA1B,QAAA,CAeA,IAVA,IAAA+H,EAAApG,KAAAS,mBAGA7D,EAAAoD,KAAAD,QAAA8C,gBACAuD,EAAApG,KAAAqG,OAAArG,KAAAD,QAAAoC,eACAiE,GAAApG,KAAAoF,OAAAkB,YAAAtG,KAAAqG,QAAArG,KAAAD,QAAAoC,eAEAxC,KAGA3D,EAAA,EAAmBA,EAAAgE,KAAAK,UAAAZ,OAA2BzD,IAAA,CAC9C,IAAA2I,EAAA3E,KAAAK,UAAArE,GAAA2I,WACA,IAAAA,EAAAzE,SAAA,CAKA,IAAAqG,EAAAjH,EAAAI,aAAAiF,EAAAhF,KAAA/C,GACA2J,EAAA,GAAAA,EAAA5B,EAAAhF,KAAAF,QACAE,EAAAwB,MAAmBW,OAAA9B,KAAAK,UAAArE,GAAAwK,MAAAD,EAAA5J,MAAAgI,EAAAhF,KAAA4G,GAAA,MAInB5G,EAAAF,QACAyG,EAAAO,UAAAzG,KAAAD,QAAA6B,iBAAA/F,KAAAmE,KAAApD,EAAA+C,GACAuG,EAAAN,MAAAE,QAAA,SAEAI,EAAAN,MAAAE,QAAA,YA/BAI,EAAAN,MAAAE,QAAA,QAmCA5H,EAAAZ,UAAAoD,UAAA,SAAAgG,GACA1G,KAAAmG,WAAA,EACAnG,KAAAqG,OAAAK,EAAAC,QACA3G,KAAA4G,OAAAF,EAAAG,QACA7G,KAAA8G,WAAAJ,EAAAK,MACA/G,KAAAgH,WAAAN,EAAAO,MAEA,IAAAf,EAAAlG,KAAAwF,eACAU,EAAAN,MAAAsB,IAAA7F,KAAA8F,MAAAnH,KAAAgH,YAAA,KACAd,EAAAN,MAAAwB,KAAA/F,KAAA8F,MAAAnH,KAAA8G,YAAA,KACA9G,KAAAiG,iBAGA/H,EAAAZ,UAAAqD,SAAA,WACAX,KAAAmG,WAAA,EACAnG,KAAAqG,OAAArG,KAAA4G,QAAA,EACA5G,KAAAyF,YACAzF,KAAAyF,UAAAG,MAAAE,QAAA,SAMA5H,EAAAZ,UAAA+J,OAAA,WACA,IACAC,EAAAC,EADAC,EAAAxH,KAAAD,QAAAqC,kBAAA6B,cAAAwD,iBAAA,EAEAzH,KAAAD,QAAA4D,YAGA2D,EAAAtH,KAAAoF,OAAAkB,YACAiB,EAAAvH,KAAAoF,OAAAsC,aAEAJ,IAAAtH,KAAA2H,YACA3H,KAAA2H,UAAAL,EACAtH,KAAAoF,OAAAwC,aAAA,QAAAvG,KAAAwG,MAAAP,EAAAE,GAAAM,YACA9H,KAAAoF,OAAA2C,WAAA,MAAAC,MAAAR,MAEAD,IAAAvH,KAAAiI,aACAjI,KAAAiI,WAAAV,EACAvH,KAAAoF,OAAAwC,aAAA,SAAAvG,KAAAwG,MAAAN,EAAAC,GAAAM,YACA9H,KAAAoF,OAAA2C,WAAA,MAAAC,MAAAR,OAEK,IAAAA,IAGLF,EAAAY,SAAAlI,KAAAoF,OAAA+C,aAAA,UACAZ,EAAAW,SAAAlI,KAAAoF,OAAA+C,aAAA,WAEAnI,KAAAoI,eAAA/G,KAAAwG,MAAA7H,KAAAoI,cAAAZ,KAAAF,IACAtH,KAAAoI,cAAAd,EACAtH,KAAAoF,OAAAwC,aAAA,QAAAvG,KAAAwG,MAAAP,EAAAE,GAAAM,YACA9H,KAAAoF,OAAAQ,MAAA0B,QAAA,KACAtH,KAAAoF,OAAA2C,WAAA,MAAAC,MAAAR,MAGAxH,KAAAqI,gBAAAhH,KAAAwG,MAAA7H,KAAAqI,eAAAb,KAAAD,IACAvH,KAAAqI,eAAAd,EACAvH,KAAAoF,OAAAwC,aAAA,SAAAvG,KAAAwG,MAAAN,EAAAC,GAAAM,YACA9H,KAAAoF,OAAAQ,MAAA2B,SAAA,KACAvH,KAAAoF,OAAA2C,WAAA,MAAAC,MAAAR,QAQAtJ,EAAAZ,UAAAiI,MAAA,WACA,IAAAvF,KAAAsI,MAAA,CAKAtI,KAAAoF,OAAAmD,iBAAA,YAAAvI,KAAAU,WACAV,KAAAoF,OAAAmD,iBAAA,WAAAvI,KAAAW,UAGA,IAAA6H,EAAA,WACAxI,KAAAsI,MAAApK,EAAA2F,qBAAAC,sBAAA,WACA,GAAA9D,KAAAD,QAAA2D,gBAAA,CACA,IAAA+E,EAAA,IAAAvJ,KAAA,GAEAwJ,EAAA1I,KAAAK,UAAAsI,OAAA,SAAArH,EAAAQ,GACA,IAAA8G,EAAA9G,EAAA6C,WAAAhF,KACAkJ,EAAAxH,KAAA8F,MAAAnH,KAAAD,QAAA+C,0BAAA8F,EAAAnJ,QAAA,EAGA,GADAoJ,GADAA,KAAA,EAAAA,EAAA,IACAD,EAAAnJ,OAAA,EAAAoJ,EAAAD,EAAAnJ,OAAA,EACAmJ,KAAAnJ,OAAA,EACA,CAEA,IAAAqJ,EAAAF,EAAAC,GAAA,GACAvH,IAAAwH,EAAAxH,EAAAwH,EAEA,OAAAxH,GACWpE,KAAA8C,MAAAyI,GAEXzI,KAAA+I,OAAA/I,KAAAoF,OAAAsD,EAAAD,EAAAC,EAAA,WAEA1I,KAAA+I,SAEAP,KACOtL,KAAA8C,QACF9C,KAAA8C,MAELwI,MAMAtK,EAAAZ,UAAA0L,KAAA,WACAhJ,KAAAsI,QACApK,EAAA2F,qBAAAU,qBAAAvE,KAAAsI,cACAtI,KAAAsI,MACAtI,KAAAoF,OAAA6D,oBAAA,YAAAjJ,KAAAU,WACAV,KAAAoF,OAAA6D,oBAAA,WAAAjJ,KAAAW,YAIAzC,EAAAZ,UAAA4L,iBAAA,WAMA,IAJA,IAAAC,EAAAnJ,KAAAD,QACAqJ,EAAAtI,OAAAC,IACAsI,EAAAvI,OAAAC,IAEA/E,EAAA,EAAmBA,EAAAgE,KAAAK,UAAAZ,OAA2BzD,IAAA,CAE9C,IAAA2I,EAAA3E,KAAAK,UAAArE,GAAA2I,WACAA,EAAAzE,WAIAkB,MAAAuD,EAAAvG,YACAgL,EAAAhI,MAAAgI,GAAAzE,EAAAvG,SAAAiD,KAAAC,IAAA8H,EAAAzE,EAAAvG,WAGAgD,MAAAuD,EAAAxG,YACAkL,EAAAjI,MAAAiI,GAAA1E,EAAAxG,SAAAkD,KAAAE,IAAA8H,EAAA1E,EAAAxG,YAmBA,GAdA,MAAAgL,EAAA/K,SACAgL,EAAAD,EAAA/K,SAEAgL,GAAAD,EAAAzG,cAIA,MAAAyG,EAAAhL,SACAkL,EAAAF,EAAAhL,SAEAkL,GAAAhI,KAAAiI,IAAAD,EAAAF,EAAAxG,cAAA0G,GAIArJ,KAAAD,QAAAwJ,eAAA,CACA,IAAAC,EAAAxJ,KAAAD,QAAAwJ,gBAA+ChI,IAAA8H,EAAA/H,IAAA8H,IAC/CC,EAAAG,EAAAjI,IACA6H,EAAAI,EAAAlI,IAGA,IAAAF,MAAAgI,KAAAhI,MAAAiI,GAAA,CACA,IACAI,EADAL,EAAAC,EACArJ,KAAAM,kBACAoJ,EAAAL,EAAArJ,KAAAO,mBACAP,KAAA2J,iBAAAtI,KAAAiI,IAAAG,GAAA,IAAApI,KAAAiI,IAAAI,GAAA,GACA1J,KAAAM,mBAAA6I,EAAAvG,eAAA6G,EACAzJ,KAAAO,oBAAA4I,EAAAvG,eAAA8G,EAGA1J,KAAA4J,YAAuBrI,IAAA8H,EAAA/H,IAAA8H,IAGvBlL,EAAAZ,UAAAyL,OAAA,SAAA3D,EAAAgB,GACA,IAAAyD,EAAA3K,KAAAG,MAGA,KAAAW,KAAAD,QAAA6D,SAAA,GAAAiG,EAAA7J,KAAAQ,qBAAA,IAAAR,KAAAD,QAAA6D,UAAA,CAGA,IAAA5D,KAAA2J,iBAAA,CAMA,IAAAG,EAAAzI,KAAAE,IAAA,MAAAvB,KAAAD,QAAAoC,gBAEA,GAAA0H,EAAA7J,KAAAQ,qBAAAsJ,EACA,OAIA9J,KAAAqH,SACArH,KAAAiG,gBAEAjG,KAAAQ,qBAAAqJ,EAEAzE,KAAApF,KAAAoF,OACAgB,KAAAyD,GAAA7J,KAAAsF,OAAA,GAGAc,KAAApG,KAAAD,QAAAoC,eAEAnC,KAAAS,mBAAA2F,EAEA,IAAA2D,EAAA3E,EAAA2C,WAAA,MACAoB,EAAAnJ,KAAAD,QACAiK,GAAsB9C,IAAA,EAAAE,KAAA,EAAAE,MAAAlC,EAAA6E,YAAA1C,OAAAnC,EAAA8E,cAEtBzI,EAAA2E,EAAA4D,EAAA1C,MAAA6B,EAAAhH,eACAgI,EAAA,SAAAxN,GACA,IAAAyN,EAAAzN,EAAAqD,KAAAO,mBACA,WAAAP,KAAAM,kBACA0J,EAAAzC,OACAyC,EAAAzC,OAAAlG,KAAA8F,MAAAiD,EAAApK,KAAAM,kBAAA0J,EAAAzC,SACSrK,KAAA8C,MACTqK,EAAA,SAAAzN,GACA,OAAAuM,EAAAtG,gBACAxB,KAAA8F,OAAAf,EAAAxJ,GAAAuM,EAAAhH,gBAEAd,KAAA8F,MAAA6C,EAAA1C,OAAAlB,EAAAxJ,GAAAuM,EAAAhH,iBAiCA,GA9BAnC,KAAAkJ,mBAEAa,EAAAO,KAAAnB,EAAAnH,OAAAoB,SAAA,MAAA+F,EAAAnH,OAAAqB,WAIA0G,EAAAQ,OAGAR,EAAAS,UAAAR,EAAA5C,KAAA4C,EAAA9C,KAKA6C,EAAAU,YACAV,EAAAW,KAAA,IAAAV,EAAA1C,MAAA0C,EAAAzC,QACAwC,EAAAY,OAGAZ,EAAAQ,OACAR,EAAApL,UAAAwK,EAAApG,KAAApE,UACAoL,EAAAa,UAAA,IAAAZ,EAAA1C,MAAA0C,EAAAzC,QACAwC,EAAAc,SAAA,IAAAb,EAAA1C,MAAA0C,EAAAzC,QACAwC,EAAAe,UAGAf,EAAAQ,OACAR,EAAAnL,UAAAuK,EAAApG,KAAAnE,UACAmL,EAAArL,YAAAyK,EAAApG,KAAArE,YAEAyK,EAAApG,KAAAE,cAAA,GACA8G,EAAAU,YACA,QAAA7N,EAAAwJ,IAAA+C,EAAApG,KAAAE,cACArG,GAAA6E,EACA7E,GAAAuM,EAAApG,KAAAE,cAAA,CACA,IAAA8H,EAAAV,EAAAzN,GACAuM,EAAApG,KAAAC,aACA+H,GAAA,IAEAhB,EAAAiB,OAAAD,EAAA,GACAhB,EAAAkB,OAAAF,EAAAf,EAAAzC,QAEAwC,EAAAmB,SACAnB,EAAAoB,YAIA,QAAAC,EAAA,EAAmBA,EAAAjC,EAAApG,KAAAG,iBAAwCkI,IAAA,CAC3D,IAAAC,EAAAhK,KAAA8F,MAAAiE,EAAApB,EAAAzC,OAAA4B,EAAApG,KAAAG,kBACAiG,EAAApG,KAAAC,aACAqI,GAAA,IAEAtB,EAAAU,YACAV,EAAAiB,OAAA,EAAAK,GACAtB,EAAAkB,OAAAjB,EAAA1C,MAAA+D,GACAtB,EAAAmB,SACAnB,EAAAoB,YAWA,GARAhC,EAAApG,KAAAI,gBACA4G,EAAAU,YACAV,EAAAuB,WAAA,IAAAtB,EAAA1C,MAAA0C,EAAAzC,QACAwC,EAAAoB,aAEApB,EAAAe,UAGA3B,EAAA3F,iBAAA2F,EAAA3F,gBAAA/D,OACA,QAAA8L,EAAA,EAAsBA,EAAApC,EAAA3F,gBAAA/D,OAA0C8L,IAAA,CAChE,IAAAC,EAAArC,EAAA3F,gBAAA+H,GACAE,EAAApK,KAAA8F,MAAAgD,EAAAqB,EAAA7O,QAAA,GACAoN,EAAArL,YAAA8M,EAAAE,OAAA,UACA3B,EAAAnL,UAAA4M,EAAA5M,WAAA,EACAmL,EAAAU,YACAV,EAAAiB,OAAA,EAAAS,GACA1B,EAAAkB,OAAAjB,EAAA1C,MAAAmE,GACA1B,EAAAmB,SACAnB,EAAAoB,YAKA,QAAAnP,EAAA,EAAmBA,EAAAgE,KAAAK,UAAAZ,OAA2BzD,IAAA,CAC9C+N,EAAAQ,OACA,IAAA5F,EAAA3E,KAAAK,UAAArE,GAAA2I,WACA,IAAAA,EAAAzE,SAAA,CAIA,IAAA0I,EAAAjE,EAAAhF,KACAgM,EAAA3L,KAAAK,UAAArE,GAAA+D,QAGA4E,EAAAnD,YAAAC,EAAA0H,EAAAzH,kBAGAqI,EAAAnL,UAAA+M,EAAA/M,UACAmL,EAAArL,YAAAiN,EAAAjN,YAEAqL,EAAAU,YAGA,IADA,IAAAmB,EAAA,EAAAC,EAAA,EAAAC,EAAA,EACApQ,EAAA,EAAqBA,EAAAkN,EAAAnJ,QAAA,IAAAmJ,EAAAnJ,OAA4C/D,IAAA,CACjE,IAAAqQ,EAAA1B,EAAAzB,EAAAlN,GAAA,IACAsQ,EAAA7B,EAAAvB,EAAAlN,GAAA,IAEA,OAAAA,EACAkQ,EAAAG,EACAhC,EAAAiB,OAAAe,EAAAC,QAEA,OAAA7C,EAAA3K,eACA,aACA,WACAuL,EAAAkB,OAAAc,EAAAC,GACA,MAEA,aACA,QAeAjC,EAAAkC,cACA5K,KAAA8F,OAAA0E,EAAAE,GAAA,GAAAD,EACAzK,KAAA8F,MAAA0E,EAAAE,GAAA,EAAAC,EACAD,EAAAC,GACA,MAEA,WACAjC,EAAAkB,OAAAc,EAAAD,GACA/B,EAAAkB,OAAAc,EAAAC,GAMAH,EAAAE,EAAkBD,EAAAE,EAGlBpD,EAAAnJ,OAAA,IACAkM,EAAAhN,YAEAoL,EAAAkB,OAAAjB,EAAA1C,MAAAqE,EAAA/M,UAAA,EAAAkN,GACA/B,EAAAkB,OAAAjB,EAAA1C,MAAAqE,EAAA/M,UAAA,EAAAoL,EAAAzC,OAAAoE,EAAA/M,UAAA,GACAmL,EAAAkB,OAAAW,EAAA5B,EAAAzC,OAAAoE,EAAA/M,WACAmL,EAAApL,UAAAgN,EAAAhN,UACAoL,EAAAmC,QAGAP,EAAAjN,aAAA,SAAAiN,EAAAjN,aACAqL,EAAAmB,SAEAnB,EAAAoB,aAEApB,EAAAe,WAgBA,GAbA3B,EAAA9K,SAAA2B,KAAAqG,QAAA,IAEA0D,EAAAnL,UAAAuK,EAAA1F,YAAA7E,UACAmL,EAAArL,YAAAyK,EAAA1F,YAAA/E,YACAqL,EAAAU,YACAV,EAAAiB,OAAAhL,KAAAqG,OAAA,GACA0D,EAAAkB,OAAAjL,KAAAqG,OAAA2D,EAAAzC,QACAwC,EAAAoB,YACApB,EAAAmB,SACAlL,KAAAiG,kBAIAkD,EAAAnH,OAAA9B,WAAAkB,MAAApB,KAAA4J,WAAArI,OAAAH,MAAApB,KAAA4J,WAAAtI,KAAA,CACA,IAAA6K,EAAAhD,EAAApH,cAAA/B,KAAA4J,WAAAtI,IAAA6H,EAAAnH,OAAAC,WACAmK,EAAAjD,EAAA9G,cAAArC,KAAA4J,WAAArI,IAAA4H,EAAAnH,OAAAC,WACAoK,EAAAlD,EAAAtG,gBAAA,EAAAmH,EAAA1C,MAAAyC,EAAAuC,YAAAH,GAAA7E,MAAA,EACAiF,EAAApD,EAAAtG,gBAAA,EAAAmH,EAAA1C,MAAAyC,EAAAuC,YAAAF,GAAA9E,MAAA,EACAyC,EAAApL,UAAAwK,EAAAnH,OAAArD,UACAoL,EAAAyC,SAAAL,EAAAE,EAAAlD,EAAAnH,OAAAoB,UACA2G,EAAAyC,SAAAJ,EAAAG,EAAAvC,EAAAzC,OAAA,GAIA,GAAA4B,EAAAnH,OAAAsB,yBACAlC,MAAApB,KAAA4J,WAAArI,OAAAH,MAAApB,KAAA4J,WAAAtI,MACA6H,EAAApG,KAAAG,iBAAA,EAEA,KAAAuJ,GAAAzM,KAAA4J,WAAAtI,IAAAtB,KAAA4J,WAAArI,KAAA4H,EAAApG,KAAAG,iBACAwJ,EAAA1C,EAAAzC,OAAA4B,EAAApG,KAAAG,iBACA,IAAAkI,EAAA,EAAqBA,EAAAjC,EAAApG,KAAAG,iBAAwCkI,IAAA,CAC7DC,EAAArB,EAAAzC,OAAAlG,KAAA8F,MAAAiE,EAAAsB,GACAvD,EAAApG,KAAAC,aACAqI,GAAA,IAEA,IAAAsB,EAAAxD,EAAA3G,uBAAAxC,KAAA4J,WAAArI,IAAA6J,EAAAqB,EAAAtD,EAAAnH,OAAAC,WAEA2K,qBACAzD,EAAAnH,OAAAuB,0BACA4F,EAAAtG,gBAAA,EAAAmH,EAAA1C,MAAAyC,EAAAuC,YAAAK,GAAArF,MAAA,EACA6B,EAAAtG,gBAAAmH,EAAA1C,MAAAyC,EAAAuC,YAAAK,GAAArF,MAAA,IAEAyC,EAAAyC,SAAAG,EAAAC,qBAAAvB,EAAAlC,EAAApG,KAAAnE,YAKA,GAAAuK,EAAA7K,oBAAA6K,EAAApG,KAAAE,cAAA,EACA,KAAA4J,EAAA1D,EAAAtG,gBACAkH,EAAAuC,YAAAF,GAAA9E,MACA0C,EAAA1C,MAAAyC,EAAAuC,YAAAF,GAAA9E,MAAA,EACA,IAAA1K,EAAAwJ,IAAA+C,EAAApG,KAAAE,cACArG,GAAA6E,EACA7E,GAAAuM,EAAApG,KAAAE,cAAA,CACA8H,EAAAV,EAAAzN,GAEA,IAAAuM,EAAAtG,iBAAAkI,EAAA8B,GAAA1D,EAAAtG,iBAAAkI,EAAA8B,EAAA,CAGA,IAAAC,EAAA,IAAA5N,KAAAtC,GACAmQ,EAAA5D,EAAA7K,mBAAAwO,GACAE,EAAAjD,EAAAuC,YAAAS,GAAAzF,MAEAuF,EAAA1D,EAAAtG,gBACAkI,EAAAiC,EAAA,EACAjC,EAAAiC,EAAA,EAEAjD,EAAApL,UAAAwK,EAAAnH,OAAArD,UACAwK,EAAAtG,gBACAkH,EAAAyC,SAAAO,EAAAhC,EAAAf,EAAAzC,OAAA,GAEAwC,EAAAyC,SAAAO,EAAAhC,EAAAiC,EAAAhD,EAAAzC,OAAA,KAMAwC,EAAAe,YAIA5M,EAAAK,cAAA,SAAA0O,GACA,SAAAC,EAAAC,GAA2B,OAAAA,EAAA,WAAAA,EAC3B,OAAAD,EAAAD,EAAAG,YAAA,IAAAF,EAAAD,EAAAI,cAAA,IAAAH,EAAAD,EAAAK,eAGA9R,EAAAyC,aACAzC,EAAA0C,gBAx7BC,CA07BuC1C","file":"renderer_packed.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","const Smoothie = require('smoothie');\n\nconst dataSets = new Array(numPlots);\nconst charts = new Array(numPlots);\n\n// 0: green, 1st: red\nconst chartLineColors = ['rgba(0, 255, 0, 1)', 'rgba(255, 0, 0, 1)'];\nconst chartFillColors = ['rgba(0, 255, 0, 0.2)', 'rgba(255, 0, 0, 0.2)'];\n\nfor (var i=0; i<numPlots; i++) {\n  dataSets[i] = new Smoothie.TimeSeries();\n\n  charts[i] = new Smoothie.SmoothieChart({\n    minValue: 0.0,\n    maxValue: 4095.0,\n    tooltip: true,\n    timestampFormatter: Smoothie.SmoothieChart.timeFormatter,\n    interpolation: 'linear'\n  });\n\n  charts[i].addTimeSeries(dataSets[i], {\n    strokeStyle: chartLineColors[i],\n    fillStyle: chartFillColors[i],\n    lineWidth: 1\n  });\n\n  charts[i].streamTo(document.getElementById(\"chart\"+i), 0);\n}\n\n\nrenderPlots = function() {\n  for (var i=0; i<numPlots; i++) {\n    dataSets[i].append(new Date().getTime(), pointsArr[i]);\n  }\n};\n","// MIT License:\n//\n// Copyright (c) 2010-2013, Joe Walnes\n//               2013-2018, Drew Noakes\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n/**\n * Smoothie Charts - http://smoothiecharts.org/\n * (c) 2010-2013, Joe Walnes\n *     2013-2018, Drew Noakes\n *\n * v1.0: Main charting library, by Joe Walnes\n * v1.1: Auto scaling of axis, by Neil Dunn\n * v1.2: fps (frames per second) option, by Mathias Petterson\n * v1.3: Fix for divide by zero, by Paul Nikitochkin\n * v1.4: Set minimum, top-scale padding, remove timeseries, add optional timer to reset bounds, by Kelley Reynolds\n * v1.5: Set default frames per second to 50... smoother.\n *       .start(), .stop() methods for conserving CPU, by Dmitry Vyal\n *       options.interpolation = 'bezier' or 'line', by Dmitry Vyal\n *       options.maxValue to fix scale, by Dmitry Vyal\n * v1.6: minValue/maxValue will always get converted to floats, by Przemek Matylla\n * v1.7: options.grid.fillStyle may be a transparent color, by Dmitry A. Shashkin\n *       Smooth rescaling, by Kostas Michalopoulos\n * v1.8: Set max length to customize number of live points in the dataset with options.maxDataSetLength, by Krishna Narni\n * v1.9: Display timestamps along the bottom, by Nick and Stev-io\n *       (https://groups.google.com/forum/?fromgroups#!topic/smoothie-charts/-Ywse8FCpKI%5B1-25%5D)\n *       Refactored by Krishna Narni, to support timestamp formatting function\n * v1.10: Switch to requestAnimationFrame, removed the now obsoleted options.fps, by Gergely Imreh\n * v1.11: options.grid.sharpLines option added, by @drewnoakes\n *        Addressed warning seen in Firefox when seriesOption.fillStyle undefined, by @drewnoakes\n * v1.12: Support for horizontalLines added, by @drewnoakes\n *        Support for yRangeFunction callback added, by @drewnoakes\n * v1.13: Fixed typo (#32), by @alnikitich\n * v1.14: Timer cleared when last TimeSeries removed (#23), by @davidgaleano\n *        Fixed diagonal line on chart at start/end of data stream, by @drewnoakes\n * v1.15: Support for npm package (#18), by @dominictarr\n *        Fixed broken removeTimeSeries function (#24) by @davidgaleano\n *        Minor performance and tidying, by @drewnoakes\n * v1.16: Bug fix introduced in v1.14 relating to timer creation/clearance (#23), by @drewnoakes\n *        TimeSeries.append now deals with out-of-order timestamps, and can merge duplicates, by @zacwitte (#12)\n *        Documentation and some local variable renaming for clarity, by @drewnoakes\n * v1.17: Allow control over font size (#10), by @drewnoakes\n *        Timestamp text won't overlap, by @drewnoakes\n * v1.18: Allow control of max/min label precision, by @drewnoakes\n *        Added 'borderVisible' chart option, by @drewnoakes\n *        Allow drawing series with fill but no stroke (line), by @drewnoakes\n * v1.19: Avoid unnecessary repaints, and fixed flicker in old browsers having multiple charts in document (#40), by @asbai\n * v1.20: Add SmoothieChart.getTimeSeriesOptions and SmoothieChart.bringToFront functions, by @drewnoakes\n * v1.21: Add 'step' interpolation mode, by @drewnoakes\n * v1.22: Add support for different pixel ratios. Also add optional y limit formatters, by @copacetic\n * v1.23: Fix bug introduced in v1.22 (#44), by @drewnoakes\n * v1.24: Fix bug introduced in v1.23, re-adding parseFloat to y-axis formatter defaults, by @siggy_sf\n * v1.25: Fix bug seen when adding a data point to TimeSeries which is older than the current data, by @Nking92\n *        Draw time labels on top of series, by @comolosabia\n *        Add TimeSeries.clear function, by @drewnoakes\n * v1.26: Add support for resizing on high device pixel ratio screens, by @copacetic\n * v1.27: Fix bug introduced in v1.26 for non whole number devicePixelRatio values, by @zmbush\n * v1.28: Add 'minValueScale' option, by @megawac\n *        Fix 'labelPos' for different size of 'minValueString' 'maxValueString', by @henryn\n * v1.29: Support responsive sizing, by @drewnoakes\n * v1.29.1: Include types in package, and make property optional, by @TrentHouliston\n * v1.30: Fix inverted logic in devicePixelRatio support, by @scanlime\n * v1.31: Support tooltips, by @Sly1024 and @drewnoakes\n * v1.32: Support frame rate limit, by @dpuyosa\n * v1.33: Use Date static method instead of instance, by @nnnoel\n *        Fix bug with tooltips when multiple charts on a page, by @jpmbiz70\n * v1.34: Add disabled option to TimeSeries, by @TechGuard (#91)\n *        Add nonRealtimeData option, by @annazhelt (#92, #93)\n *        Add showIntermediateLabels option, by @annazhelt (#94)\n *        Add displayDataFromPercentile option, by @annazhelt (#95)\n *        Fix bug when hiding tooltip element, by @ralphwetzel (#96)\n *        Support intermediate y-axis labels, by @beikeland (#99)\n * v1.35: Fix issue with responsive mode at high DPI, by @drewnoakes (#101)\n */\n\n;(function(exports) {\n\n  // Date.now polyfill\n  Date.now = Date.now || function() { return new Date().getTime(); };\n\n  var Util = {\n    extend: function() {\n      arguments[0] = arguments[0] || {};\n      for (var i = 1; i < arguments.length; i++)\n      {\n        for (var key in arguments[i])\n        {\n          if (arguments[i].hasOwnProperty(key))\n          {\n            if (typeof(arguments[i][key]) === 'object') {\n              if (arguments[i][key] instanceof Array) {\n                arguments[0][key] = arguments[i][key];\n              } else {\n                arguments[0][key] = Util.extend(arguments[0][key], arguments[i][key]);\n              }\n            } else {\n              arguments[0][key] = arguments[i][key];\n            }\n          }\n        }\n      }\n      return arguments[0];\n    },\n    binarySearch: function(data, value) {\n      var low = 0,\n          high = data.length;\n      while (low < high) {\n        var mid = (low + high) >> 1;\n        if (value < data[mid][0])\n          high = mid;\n        else\n          low = mid + 1;\n      }\n      return low;\n    }\n  };\n\n  /**\n   * Initialises a new <code>TimeSeries</code> with optional data options.\n   *\n   * Options are of the form (defaults shown):\n   *\n   * <pre>\n   * {\n   *   resetBounds: true,        // enables/disables automatic scaling of the y-axis\n   *   resetBoundsInterval: 3000 // the period between scaling calculations, in millis\n   * }\n   * </pre>\n   *\n   * Presentation options for TimeSeries are specified as an argument to <code>SmoothieChart.addTimeSeries</code>.\n   *\n   * @constructor\n   */\n  function TimeSeries(options) {\n    this.options = Util.extend({}, TimeSeries.defaultOptions, options);\n    this.disabled = false;\n    this.clear();\n  }\n\n  TimeSeries.defaultOptions = {\n    resetBoundsInterval: 3000,\n    resetBounds: true\n  };\n\n  /**\n   * Clears all data and state from this TimeSeries object.\n   */\n  TimeSeries.prototype.clear = function() {\n    this.data = [];\n    this.maxValue = Number.NaN; // The maximum value ever seen in this TimeSeries.\n    this.minValue = Number.NaN; // The minimum value ever seen in this TimeSeries.\n  };\n\n  /**\n   * Recalculate the min/max values for this <code>TimeSeries</code> object.\n   *\n   * This causes the graph to scale itself in the y-axis.\n   */\n  TimeSeries.prototype.resetBounds = function() {\n    if (this.data.length) {\n      // Walk through all data points, finding the min/max value\n      this.maxValue = this.data[0][1];\n      this.minValue = this.data[0][1];\n      for (var i = 1; i < this.data.length; i++) {\n        var value = this.data[i][1];\n        if (value > this.maxValue) {\n          this.maxValue = value;\n        }\n        if (value < this.minValue) {\n          this.minValue = value;\n        }\n      }\n    } else {\n      // No data exists, so set min/max to NaN\n      this.maxValue = Number.NaN;\n      this.minValue = Number.NaN;\n    }\n  };\n\n  /**\n   * Adds a new data point to the <code>TimeSeries</code>, preserving chronological order.\n   *\n   * @param timestamp the position, in time, of this data point\n   * @param value the value of this data point\n   * @param sumRepeatedTimeStampValues if <code>timestamp</code> has an exact match in the series, this flag controls\n   * whether it is replaced, or the values summed (defaults to false.)\n   */\n  TimeSeries.prototype.append = function(timestamp, value, sumRepeatedTimeStampValues) {\n    // Rewind until we hit an older timestamp\n    var i = this.data.length - 1;\n    while (i >= 0 && this.data[i][0] > timestamp) {\n      i--;\n    }\n\n    if (i === -1) {\n      // This new item is the oldest data\n      this.data.splice(0, 0, [timestamp, value]);\n    } else if (this.data.length > 0 && this.data[i][0] === timestamp) {\n      // Update existing values in the array\n      if (sumRepeatedTimeStampValues) {\n        // Sum this value into the existing 'bucket'\n        this.data[i][1] += value;\n        value = this.data[i][1];\n      } else {\n        // Replace the previous value\n        this.data[i][1] = value;\n      }\n    } else if (i < this.data.length - 1) {\n      // Splice into the correct position to keep timestamps in order\n      this.data.splice(i + 1, 0, [timestamp, value]);\n    } else {\n      // Add to the end of the array\n      this.data.push([timestamp, value]);\n    }\n\n    this.maxValue = isNaN(this.maxValue) ? value : Math.max(this.maxValue, value);\n    this.minValue = isNaN(this.minValue) ? value : Math.min(this.minValue, value);\n  };\n\n  TimeSeries.prototype.dropOldData = function(oldestValidTime, maxDataSetLength) {\n    // We must always keep one expired data point as we need this to draw the\n    // line that comes into the chart from the left, but any points prior to that can be removed.\n    var removeCount = 0;\n    while (this.data.length - removeCount >= maxDataSetLength && this.data[removeCount + 1][0] < oldestValidTime) {\n      removeCount++;\n    }\n    if (removeCount !== 0) {\n      this.data.splice(0, removeCount);\n    }\n  };\n\n  /**\n   * Initialises a new <code>SmoothieChart</code>.\n   *\n   * Options are optional, and should be of the form below. Just specify the values you\n   * need and the rest will be given sensible defaults as shown:\n   *\n   * <pre>\n   * {\n   *   minValue: undefined,                      // specify to clamp the lower y-axis to a given value\n   *   maxValue: undefined,                      // specify to clamp the upper y-axis to a given value\n   *   maxValueScale: 1,                         // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.\n   *   minValueScale: 1,                         // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.\n   *   yRangeFunction: undefined,                // function({min: , max: }) { return {min: , max: }; }\n   *   scaleSmoothing: 0.125,                    // controls the rate at which y-value zoom animation occurs\n   *   millisPerPixel: 20,                       // sets the speed at which the chart pans by\n   *   enableDpiScaling: true,                   // support rendering at different DPI depending on the device\n   *   yMinFormatter: function(min, precision) { // callback function that formats the min y value label\n   *     return parseFloat(min).toFixed(precision);\n   *   },\n   *   yMaxFormatter: function(max, precision) { // callback function that formats the max y value label\n   *     return parseFloat(max).toFixed(precision);\n   *   },\n   *   yIntermediateFormatter: function(intermediate, precision) { // callback function that formats the intermediate y value labels\n   *     return parseFloat(intermediate).toFixed(precision);\n   *   },\n   *   maxDataSetLength: 2,\n   *   interpolation: 'bezier'                   // one of 'bezier', 'linear', or 'step'\n   *   timestampFormatter: null,                 // optional function to format time stamps for bottom of chart\n   *                                             // you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; }\n   *   scrollBackwards: false,                   // reverse the scroll direction of the chart\n   *   horizontalLines: [],                      // [ { value: 0, color: '#ffffff', lineWidth: 1 } ]\n   *   grid:\n   *   {\n   *     fillStyle: '#000000',                   // the background colour of the chart\n   *     lineWidth: 1,                           // the pixel width of grid lines\n   *     strokeStyle: '#777777',                 // colour of grid lines\n   *     millisPerLine: 1000,                    // distance between vertical grid lines\n   *     sharpLines: false,                      // controls whether grid lines are 1px sharp, or softened\n   *     verticalSections: 2,                    // number of vertical sections marked out by horizontal grid lines\n   *     borderVisible: true                     // whether the grid lines trace the border of the chart or not\n   *   },\n   *   labels\n   *   {\n   *     disabled: false,                        // enables/disables labels showing the min/max values\n   *     fillStyle: '#ffffff',                   // colour for text of labels,\n   *     fontSize: 15,\n   *     fontFamily: 'sans-serif',\n   *     precision: 2,\n   *     showIntermediateLabels: false,          // shows intermediate labels between min and max values along y axis\n   *     intermediateLabelSameAxis: true,\n   *   },\n   *   tooltip: false                            // show tooltip when mouse is over the chart\n   *   tooltipLine: {                            // properties for a vertical line at the cursor position\n   *     lineWidth: 1,\n   *     strokeStyle: '#BBBBBB'\n   *   },\n   *   tooltipFormatter: SmoothieChart.tooltipFormatter, // formatter function for tooltip text\n   *   nonRealtimeData: false,                   // use time of latest data as current time\n   *   displayDataFromPercentile: 1,             // display not latest data, but data from the given percentile\n   *                                             // useful when trying to see old data saved by setting a high value for maxDataSetLength\n   *                                             // should be a value between 0 and 1\n   *   responsive: false,                        // whether the chart should adapt to the size of the canvas\n   *   limitFPS: 0                               // maximum frame rate the chart will render at, in FPS (zero means no limit)\n   * }\n   * </pre>\n   *\n   * @constructor\n   */\n  function SmoothieChart(options) {\n    this.options = Util.extend({}, SmoothieChart.defaultChartOptions, options);\n    this.seriesSet = [];\n    this.currentValueRange = 1;\n    this.currentVisMinValue = 0;\n    this.lastRenderTimeMillis = 0;\n    this.lastChartTimestamp = 0;\n\n    this.mousemove = this.mousemove.bind(this);\n    this.mouseout = this.mouseout.bind(this);\n  }\n\n  /** Formats the HTML string content of the tooltip. */\n  SmoothieChart.tooltipFormatter = function (timestamp, data) {\n      var timestampFormatter = this.options.timestampFormatter || SmoothieChart.timeFormatter,\n          lines = [timestampFormatter(new Date(timestamp))];\n\n      for (var i = 0; i < data.length; ++i) {\n        lines.push('<span style=\"color:' + data[i].series.options.strokeStyle + '\">' +\n        this.options.yMaxFormatter(data[i].value, this.options.labels.precision) + '</span>');\n      }\n\n      return lines.join('<br>');\n  };\n\n  SmoothieChart.defaultChartOptions = {\n    millisPerPixel: 20,\n    enableDpiScaling: true,\n    yMinFormatter: function(min, precision) {\n      return parseFloat(min).toFixed(precision);\n    },\n    yMaxFormatter: function(max, precision) {\n      return parseFloat(max).toFixed(precision);\n    },\n    yIntermediateFormatter: function(intermediate, precision) {\n      return parseFloat(intermediate).toFixed(precision);\n    },\n    maxValueScale: 1,\n    minValueScale: 1,\n    interpolation: 'bezier',\n    scaleSmoothing: 0.125,\n    maxDataSetLength: 2,\n    scrollBackwards: false,\n    displayDataFromPercentile: 1,\n    grid: {\n      fillStyle: '#000000',\n      strokeStyle: '#777777',\n      lineWidth: 1,\n      sharpLines: false,\n      millisPerLine: 1000,\n      verticalSections: 2,\n      borderVisible: true\n    },\n    labels: {\n      fillStyle: '#ffffff',\n      disabled: false,\n      fontSize: 10,\n      fontFamily: 'monospace',\n      precision: 2,\n      showIntermediateLabels: false,\n      intermediateLabelSameAxis: true,\n    },\n    horizontalLines: [],\n    tooltip: false,\n    tooltipLine: {\n      lineWidth: 1,\n      strokeStyle: '#BBBBBB'\n    },\n    tooltipFormatter: SmoothieChart.tooltipFormatter,\n    nonRealtimeData: false,\n    responsive: false,\n    limitFPS: 0\n  };\n\n  // Based on http://inspirit.github.com/jsfeat/js/compatibility.js\n  SmoothieChart.AnimateCompatibility = (function() {\n    var requestAnimationFrame = function(callback, element) {\n          var requestAnimationFrame =\n            window.requestAnimationFrame        ||\n            window.webkitRequestAnimationFrame  ||\n            window.mozRequestAnimationFrame     ||\n            window.oRequestAnimationFrame       ||\n            window.msRequestAnimationFrame      ||\n            function(callback) {\n              return window.setTimeout(function() {\n                callback(Date.now());\n              }, 16);\n            };\n          return requestAnimationFrame.call(window, callback, element);\n        },\n        cancelAnimationFrame = function(id) {\n          var cancelAnimationFrame =\n            window.cancelAnimationFrame ||\n            function(id) {\n              clearTimeout(id);\n            };\n          return cancelAnimationFrame.call(window, id);\n        };\n\n    return {\n      requestAnimationFrame: requestAnimationFrame,\n      cancelAnimationFrame: cancelAnimationFrame\n    };\n  })();\n\n  SmoothieChart.defaultSeriesPresentationOptions = {\n    lineWidth: 1,\n    strokeStyle: '#ffffff'\n  };\n\n  /**\n   * Adds a <code>TimeSeries</code> to this chart, with optional presentation options.\n   *\n   * Presentation options should be of the form (defaults shown):\n   *\n   * <pre>\n   * {\n   *   lineWidth: 1,\n   *   strokeStyle: '#ffffff',\n   *   fillStyle: undefined\n   * }\n   * </pre>\n   */\n  SmoothieChart.prototype.addTimeSeries = function(timeSeries, options) {\n    this.seriesSet.push({timeSeries: timeSeries, options: Util.extend({}, SmoothieChart.defaultSeriesPresentationOptions, options)});\n    if (timeSeries.options.resetBounds && timeSeries.options.resetBoundsInterval > 0) {\n      timeSeries.resetBoundsTimerId = setInterval(\n        function() {\n          timeSeries.resetBounds();\n        },\n        timeSeries.options.resetBoundsInterval\n      );\n    }\n  };\n\n  /**\n   * Removes the specified <code>TimeSeries</code> from the chart.\n   */\n  SmoothieChart.prototype.removeTimeSeries = function(timeSeries) {\n    // Find the correct timeseries to remove, and remove it\n    var numSeries = this.seriesSet.length;\n    for (var i = 0; i < numSeries; i++) {\n      if (this.seriesSet[i].timeSeries === timeSeries) {\n        this.seriesSet.splice(i, 1);\n        break;\n      }\n    }\n    // If a timer was operating for that timeseries, remove it\n    if (timeSeries.resetBoundsTimerId) {\n      // Stop resetting the bounds, if we were\n      clearInterval(timeSeries.resetBoundsTimerId);\n    }\n  };\n\n  /**\n   * Gets render options for the specified <code>TimeSeries</code>.\n   *\n   * As you may use a single <code>TimeSeries</code> in multiple charts with different formatting in each usage,\n   * these settings are stored in the chart.\n   */\n  SmoothieChart.prototype.getTimeSeriesOptions = function(timeSeries) {\n    // Find the correct timeseries to remove, and remove it\n    var numSeries = this.seriesSet.length;\n    for (var i = 0; i < numSeries; i++) {\n      if (this.seriesSet[i].timeSeries === timeSeries) {\n        return this.seriesSet[i].options;\n      }\n    }\n  };\n\n  /**\n   * Brings the specified <code>TimeSeries</code> to the top of the chart. It will be rendered last.\n   */\n  SmoothieChart.prototype.bringToFront = function(timeSeries) {\n    // Find the correct timeseries to remove, and remove it\n    var numSeries = this.seriesSet.length;\n    for (var i = 0; i < numSeries; i++) {\n      if (this.seriesSet[i].timeSeries === timeSeries) {\n        var set = this.seriesSet.splice(i, 1);\n        this.seriesSet.push(set[0]);\n        break;\n      }\n    }\n  };\n\n  /**\n   * Instructs the <code>SmoothieChart</code> to start rendering to the provided canvas, with specified delay.\n   *\n   * @param canvas the target canvas element\n   * @param delayMillis an amount of time to wait before a data point is shown. This can prevent the end of the series\n   * from appearing on screen, with new values flashing into view, at the expense of some latency.\n   */\n  SmoothieChart.prototype.streamTo = function(canvas, delayMillis) {\n    this.canvas = canvas;\n    this.delay = delayMillis;\n    this.start();\n  };\n\n  SmoothieChart.prototype.getTooltipEl = function () {\n    // Create the tool tip element lazily\n    if (!this.tooltipEl) {\n      this.tooltipEl = document.createElement('div');\n      this.tooltipEl.className = 'smoothie-chart-tooltip';\n      this.tooltipEl.style.position = 'absolute';\n      this.tooltipEl.style.display = 'none';\n      document.body.appendChild(this.tooltipEl);\n    }\n    return this.tooltipEl;\n  };\n\n  SmoothieChart.prototype.updateTooltip = function () {\n    var el = this.getTooltipEl();\n\n    if (!this.mouseover || !this.options.tooltip) {\n      el.style.display = 'none';\n      return;\n    }\n\n    var time = this.lastChartTimestamp;\n\n    // x pixel to time\n    var t = this.options.scrollBackwards\n      ? time - this.mouseX * this.options.millisPerPixel\n      : time - (this.canvas.offsetWidth - this.mouseX) * this.options.millisPerPixel;\n\n    var data = [];\n\n     // For each data set...\n    for (var d = 0; d < this.seriesSet.length; d++) {\n      var timeSeries = this.seriesSet[d].timeSeries;\n      if (timeSeries.disabled) {\n          continue;\n      }\n\n      // find datapoint closest to time 't'\n      var closeIdx = Util.binarySearch(timeSeries.data, t);\n      if (closeIdx > 0 && closeIdx < timeSeries.data.length) {\n        data.push({ series: this.seriesSet[d], index: closeIdx, value: timeSeries.data[closeIdx][1] });\n      }\n    }\n\n    if (data.length) {\n      el.innerHTML = this.options.tooltipFormatter.call(this, t, data);\n      el.style.display = 'block';\n    } else {\n      el.style.display = 'none';\n    }\n  };\n\n  SmoothieChart.prototype.mousemove = function (evt) {\n    this.mouseover = true;\n    this.mouseX = evt.offsetX;\n    this.mouseY = evt.offsetY;\n    this.mousePageX = evt.pageX;\n    this.mousePageY = evt.pageY;\n\n    var el = this.getTooltipEl();\n    el.style.top = Math.round(this.mousePageY) + 'px';\n    el.style.left = Math.round(this.mousePageX) + 'px';\n    this.updateTooltip();\n  };\n\n  SmoothieChart.prototype.mouseout = function () {\n    this.mouseover = false;\n    this.mouseX = this.mouseY = -1;\n    if (this.tooltipEl)\n      this.tooltipEl.style.display = 'none';\n  };\n\n  /**\n   * Make sure the canvas has the optimal resolution for the device's pixel ratio.\n   */\n  SmoothieChart.prototype.resize = function () {\n    var dpr = !this.options.enableDpiScaling || !window ? 1 : window.devicePixelRatio,\n        width, height;\n    if (this.options.responsive) {\n      // Newer behaviour: Use the canvas's size in the layout, and set the internal\n      // resolution according to that size and the device pixel ratio (eg: high DPI)\n      width = this.canvas.offsetWidth;\n      height = this.canvas.offsetHeight;\n\n      if (width !== this.lastWidth) {\n        this.lastWidth = width;\n        this.canvas.setAttribute('width', (Math.floor(width * dpr)).toString());\n        this.canvas.getContext('2d').scale(dpr, dpr);\n      }\n      if (height !== this.lastHeight) {\n        this.lastHeight = height;\n        this.canvas.setAttribute('height', (Math.floor(height * dpr)).toString());\n        this.canvas.getContext('2d').scale(dpr, dpr);\n      }\n    } else if (dpr !== 1) {\n      // Older behaviour: use the canvas's inner dimensions and scale the element's size\n      // according to that size and the device pixel ratio (eg: high DPI)\n      width = parseInt(this.canvas.getAttribute('width'));\n      height = parseInt(this.canvas.getAttribute('height'));\n\n      if (!this.originalWidth || (Math.floor(this.originalWidth * dpr) !== width)) {\n        this.originalWidth = width;\n        this.canvas.setAttribute('width', (Math.floor(width * dpr)).toString());\n        this.canvas.style.width = width + 'px';\n        this.canvas.getContext('2d').scale(dpr, dpr);\n      }\n\n      if (!this.originalHeight || (Math.floor(this.originalHeight * dpr) !== height)) {\n        this.originalHeight = height;\n        this.canvas.setAttribute('height', (Math.floor(height * dpr)).toString());\n        this.canvas.style.height = height + 'px';\n        this.canvas.getContext('2d').scale(dpr, dpr);\n      }\n    }\n  };\n\n  /**\n   * Starts the animation of this chart.\n   */\n  SmoothieChart.prototype.start = function() {\n    if (this.frame) {\n      // We're already running, so just return\n      return;\n    }\n\n    this.canvas.addEventListener('mousemove', this.mousemove);\n    this.canvas.addEventListener('mouseout', this.mouseout);\n\n    // Renders a frame, and queues the next frame for later rendering\n    var animate = function() {\n      this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {\n        if(this.options.nonRealtimeData){\n           var dateZero = new Date(0);\n           // find the data point with the latest timestamp\n           var maxTimeStamp = this.seriesSet.reduce(function(max, series){\n             var dataSet = series.timeSeries.data;\n             var indexToCheck = Math.round(this.options.displayDataFromPercentile * dataSet.length) - 1;\n             indexToCheck = indexToCheck >= 0 ? indexToCheck : 0;\n             indexToCheck = indexToCheck <= dataSet.length -1 ? indexToCheck : dataSet.length -1;\n             if(dataSet && dataSet.length > 0)\n             {\n              // timestamp corresponds to element 0 of the data point\n              var lastDataTimeStamp = dataSet[indexToCheck][0];\n              max = max > lastDataTimeStamp ? max : lastDataTimeStamp;\n             }\n             return max;\n          }.bind(this), dateZero);\n          // use the max timestamp as current time\n          this.render(this.canvas, maxTimeStamp > dateZero ? maxTimeStamp : null);\n        } else {\n          this.render();\n        }\n        animate();\n      }.bind(this));\n    }.bind(this);\n\n    animate();\n  };\n\n  /**\n   * Stops the animation of this chart.\n   */\n  SmoothieChart.prototype.stop = function() {\n    if (this.frame) {\n      SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);\n      delete this.frame;\n      this.canvas.removeEventListener('mousemove', this.mousemove);\n      this.canvas.removeEventListener('mouseout', this.mouseout);\n    }\n  };\n\n  SmoothieChart.prototype.updateValueRange = function() {\n    // Calculate the current scale of the chart, from all time series.\n    var chartOptions = this.options,\n        chartMaxValue = Number.NaN,\n        chartMinValue = Number.NaN;\n\n    for (var d = 0; d < this.seriesSet.length; d++) {\n      // TODO(ndunn): We could calculate / track these values as they stream in.\n      var timeSeries = this.seriesSet[d].timeSeries;\n      if (timeSeries.disabled) {\n          continue;\n      }\n\n      if (!isNaN(timeSeries.maxValue)) {\n        chartMaxValue = !isNaN(chartMaxValue) ? Math.max(chartMaxValue, timeSeries.maxValue) : timeSeries.maxValue;\n      }\n\n      if (!isNaN(timeSeries.minValue)) {\n        chartMinValue = !isNaN(chartMinValue) ? Math.min(chartMinValue, timeSeries.minValue) : timeSeries.minValue;\n      }\n    }\n\n    // Scale the chartMaxValue to add padding at the top if required\n    if (chartOptions.maxValue != null) {\n      chartMaxValue = chartOptions.maxValue;\n    } else {\n      chartMaxValue *= chartOptions.maxValueScale;\n    }\n\n    // Set the minimum if we've specified one\n    if (chartOptions.minValue != null) {\n      chartMinValue = chartOptions.minValue;\n    } else {\n      chartMinValue -= Math.abs(chartMinValue * chartOptions.minValueScale - chartMinValue);\n    }\n\n    // If a custom range function is set, call it\n    if (this.options.yRangeFunction) {\n      var range = this.options.yRangeFunction({min: chartMinValue, max: chartMaxValue});\n      chartMinValue = range.min;\n      chartMaxValue = range.max;\n    }\n\n    if (!isNaN(chartMaxValue) && !isNaN(chartMinValue)) {\n      var targetValueRange = chartMaxValue - chartMinValue;\n      var valueRangeDiff = (targetValueRange - this.currentValueRange);\n      var minValueDiff = (chartMinValue - this.currentVisMinValue);\n      this.isAnimatingScale = Math.abs(valueRangeDiff) > 0.1 || Math.abs(minValueDiff) > 0.1;\n      this.currentValueRange += chartOptions.scaleSmoothing * valueRangeDiff;\n      this.currentVisMinValue += chartOptions.scaleSmoothing * minValueDiff;\n    }\n\n    this.valueRange = { min: chartMinValue, max: chartMaxValue };\n  };\n\n  SmoothieChart.prototype.render = function(canvas, time) {\n    var nowMillis = Date.now();\n\n    // Respect any frame rate limit.\n    if (this.options.limitFPS > 0 && nowMillis - this.lastRenderTimeMillis < (1000/this.options.limitFPS))\n      return;\n\n    if (!this.isAnimatingScale) {\n      // We're not animating. We can use the last render time and the scroll speed to work out whether\n      // we actually need to paint anything yet. If not, we can return immediately.\n\n      // Render at least every 1/6th of a second. The canvas may be resized, which there is\n      // no reliable way to detect.\n      var maxIdleMillis = Math.min(1000/6, this.options.millisPerPixel);\n\n      if (nowMillis - this.lastRenderTimeMillis < maxIdleMillis) {\n        return;\n      }\n    }\n\n    this.resize();\n    this.updateTooltip();\n\n    this.lastRenderTimeMillis = nowMillis;\n\n    canvas = canvas || this.canvas;\n    time = time || nowMillis - (this.delay || 0);\n\n    // Round time down to pixel granularity, so motion appears smoother.\n    time -= time % this.options.millisPerPixel;\n\n    this.lastChartTimestamp = time;\n\n    var context = canvas.getContext('2d'),\n        chartOptions = this.options,\n        dimensions = { top: 0, left: 0, width: canvas.clientWidth, height: canvas.clientHeight },\n        // Calculate the threshold time for the oldest data points.\n        oldestValidTime = time - (dimensions.width * chartOptions.millisPerPixel),\n        valueToYPixel = function(value) {\n          var offset = value - this.currentVisMinValue;\n          return this.currentValueRange === 0\n            ? dimensions.height\n            : dimensions.height - (Math.round((offset / this.currentValueRange) * dimensions.height));\n        }.bind(this),\n        timeToXPixel = function(t) {\n          if(chartOptions.scrollBackwards) {\n            return Math.round((time - t) / chartOptions.millisPerPixel);\n          }\n          return Math.round(dimensions.width - ((time - t) / chartOptions.millisPerPixel));\n        };\n\n    this.updateValueRange();\n\n    context.font = chartOptions.labels.fontSize + 'px ' + chartOptions.labels.fontFamily;\n\n    // Save the state of the canvas context, any transformations applied in this method\n    // will get removed from the stack at the end of this method when .restore() is called.\n    context.save();\n\n    // Move the origin.\n    context.translate(dimensions.left, dimensions.top);\n\n    // Create a clipped rectangle - anything we draw will be constrained to this rectangle.\n    // This prevents the occasional pixels from curves near the edges overrunning and creating\n    // screen cheese (that phrase should need no explanation).\n    context.beginPath();\n    context.rect(0, 0, dimensions.width, dimensions.height);\n    context.clip();\n\n    // Clear the working area.\n    context.save();\n    context.fillStyle = chartOptions.grid.fillStyle;\n    context.clearRect(0, 0, dimensions.width, dimensions.height);\n    context.fillRect(0, 0, dimensions.width, dimensions.height);\n    context.restore();\n\n    // Grid lines...\n    context.save();\n    context.lineWidth = chartOptions.grid.lineWidth;\n    context.strokeStyle = chartOptions.grid.strokeStyle;\n    // Vertical (time) dividers.\n    if (chartOptions.grid.millisPerLine > 0) {\n      context.beginPath();\n      for (var t = time - (time % chartOptions.grid.millisPerLine);\n           t >= oldestValidTime;\n           t -= chartOptions.grid.millisPerLine) {\n        var gx = timeToXPixel(t);\n        if (chartOptions.grid.sharpLines) {\n          gx -= 0.5;\n        }\n        context.moveTo(gx, 0);\n        context.lineTo(gx, dimensions.height);\n      }\n      context.stroke();\n      context.closePath();\n    }\n\n    // Horizontal (value) dividers.\n    for (var v = 1; v < chartOptions.grid.verticalSections; v++) {\n      var gy = Math.round(v * dimensions.height / chartOptions.grid.verticalSections);\n      if (chartOptions.grid.sharpLines) {\n        gy -= 0.5;\n      }\n      context.beginPath();\n      context.moveTo(0, gy);\n      context.lineTo(dimensions.width, gy);\n      context.stroke();\n      context.closePath();\n    }\n    // Bounding rectangle.\n    if (chartOptions.grid.borderVisible) {\n      context.beginPath();\n      context.strokeRect(0, 0, dimensions.width, dimensions.height);\n      context.closePath();\n    }\n    context.restore();\n\n    // Draw any horizontal lines...\n    if (chartOptions.horizontalLines && chartOptions.horizontalLines.length) {\n      for (var hl = 0; hl < chartOptions.horizontalLines.length; hl++) {\n        var line = chartOptions.horizontalLines[hl],\n            hly = Math.round(valueToYPixel(line.value)) - 0.5;\n        context.strokeStyle = line.color || '#ffffff';\n        context.lineWidth = line.lineWidth || 1;\n        context.beginPath();\n        context.moveTo(0, hly);\n        context.lineTo(dimensions.width, hly);\n        context.stroke();\n        context.closePath();\n      }\n    }\n\n    // For each data set...\n    for (var d = 0; d < this.seriesSet.length; d++) {\n      context.save();\n      var timeSeries = this.seriesSet[d].timeSeries;\n      if (timeSeries.disabled) {\n          continue;\n      }\n\n      var dataSet = timeSeries.data,\n          seriesOptions = this.seriesSet[d].options;\n\n      // Delete old data that's moved off the left of the chart.\n      timeSeries.dropOldData(oldestValidTime, chartOptions.maxDataSetLength);\n\n      // Set style for this dataSet.\n      context.lineWidth = seriesOptions.lineWidth;\n      context.strokeStyle = seriesOptions.strokeStyle;\n      // Draw the line...\n      context.beginPath();\n      // Retain lastX, lastY for calculating the control points of bezier curves.\n      var firstX = 0, lastX = 0, lastY = 0;\n      for (var i = 0; i < dataSet.length && dataSet.length !== 1; i++) {\n        var x = timeToXPixel(dataSet[i][0]),\n            y = valueToYPixel(dataSet[i][1]);\n\n        if (i === 0) {\n          firstX = x;\n          context.moveTo(x, y);\n        } else {\n          switch (chartOptions.interpolation) {\n            case \"linear\":\n            case \"line\": {\n              context.lineTo(x,y);\n              break;\n            }\n            case \"bezier\":\n            default: {\n              // Great explanation of Bezier curves: http://en.wikipedia.org/wiki/Bezier_curve#Quadratic_curves\n              //\n              // Assuming A was the last point in the line plotted and B is the new point,\n              // we draw a curve with control points P and Q as below.\n              //\n              // A---P\n              //     |\n              //     |\n              //     |\n              //     Q---B\n              //\n              // Importantly, A and P are at the same y coordinate, as are B and Q. This is\n              // so adjacent curves appear to flow as one.\n              //\n              context.bezierCurveTo( // startPoint (A) is implicit from last iteration of loop\n                Math.round((lastX + x) / 2), lastY, // controlPoint1 (P)\n                Math.round((lastX + x)) / 2, y, // controlPoint2 (Q)\n                x, y); // endPoint (B)\n              break;\n            }\n            case \"step\": {\n              context.lineTo(x,lastY);\n              context.lineTo(x,y);\n              break;\n            }\n          }\n        }\n\n        lastX = x; lastY = y;\n      }\n\n      if (dataSet.length > 1) {\n        if (seriesOptions.fillStyle) {\n          // Close up the fill region.\n          context.lineTo(dimensions.width + seriesOptions.lineWidth + 1, lastY);\n          context.lineTo(dimensions.width + seriesOptions.lineWidth + 1, dimensions.height + seriesOptions.lineWidth + 1);\n          context.lineTo(firstX, dimensions.height + seriesOptions.lineWidth);\n          context.fillStyle = seriesOptions.fillStyle;\n          context.fill();\n        }\n\n        if (seriesOptions.strokeStyle && seriesOptions.strokeStyle !== 'none') {\n          context.stroke();\n        }\n        context.closePath();\n      }\n      context.restore();\n    }\n\n    if (chartOptions.tooltip && this.mouseX >= 0) {\n      // Draw vertical bar to show tooltip position\n      context.lineWidth = chartOptions.tooltipLine.lineWidth;\n      context.strokeStyle = chartOptions.tooltipLine.strokeStyle;\n      context.beginPath();\n      context.moveTo(this.mouseX, 0);\n      context.lineTo(this.mouseX, dimensions.height);\n      context.closePath();\n      context.stroke();\n      this.updateTooltip();\n    }\n\n    // Draw the axis values on the chart.\n    if (!chartOptions.labels.disabled && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)) {\n      var maxValueString = chartOptions.yMaxFormatter(this.valueRange.max, chartOptions.labels.precision),\n          minValueString = chartOptions.yMinFormatter(this.valueRange.min, chartOptions.labels.precision),\n          maxLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2,\n          minLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(minValueString).width - 2;\n      context.fillStyle = chartOptions.labels.fillStyle;\n      context.fillText(maxValueString, maxLabelPos, chartOptions.labels.fontSize);\n      context.fillText(minValueString, minLabelPos, dimensions.height - 2);\n    }\n\n    // Display intermediate y axis labels along y-axis to the left of the chart\n    if ( chartOptions.labels.showIntermediateLabels\n          && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)\n          && chartOptions.grid.verticalSections > 0) {\n      // show a label above every vertical section divider\n      var step = (this.valueRange.max - this.valueRange.min) / chartOptions.grid.verticalSections;\n      var stepPixels = dimensions.height / chartOptions.grid.verticalSections;\n      for (var v = 1; v < chartOptions.grid.verticalSections; v++) {\n        var gy = dimensions.height - Math.round(v * stepPixels);\n        if (chartOptions.grid.sharpLines) {\n          gy -= 0.5;\n        }\n        var yValue = chartOptions.yIntermediateFormatter(this.valueRange.min + (v * step), chartOptions.labels.precision);\n        //left of right axis?\n        intermediateLabelPos =\n          chartOptions.labels.intermediateLabelSameAxis\n          ? (chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(yValue).width - 2)\n          : (chartOptions.scrollBackwards ? dimensions.width - context.measureText(yValue).width - 2 : 0);\n\n        context.fillText(yValue, intermediateLabelPos, gy - chartOptions.grid.lineWidth);\n      }\n    }\n\n    // Display timestamps along x-axis at the bottom of the chart.\n    if (chartOptions.timestampFormatter && chartOptions.grid.millisPerLine > 0) {\n      var textUntilX = chartOptions.scrollBackwards\n        ? context.measureText(minValueString).width\n        : dimensions.width - context.measureText(minValueString).width + 4;\n      for (var t = time - (time % chartOptions.grid.millisPerLine);\n           t >= oldestValidTime;\n           t -= chartOptions.grid.millisPerLine) {\n        var gx = timeToXPixel(t);\n        // Only draw the timestamp if it won't overlap with the previously drawn one.\n        if ((!chartOptions.scrollBackwards && gx < textUntilX) || (chartOptions.scrollBackwards && gx > textUntilX))  {\n          // Formats the timestamp based on user specified formatting function\n          // SmoothieChart.timeFormatter function above is one such formatting option\n          var tx = new Date(t),\n            ts = chartOptions.timestampFormatter(tx),\n            tsWidth = context.measureText(ts).width;\n\n          textUntilX = chartOptions.scrollBackwards\n            ? gx + tsWidth + 2\n            : gx - tsWidth - 2;\n\n          context.fillStyle = chartOptions.labels.fillStyle;\n          if(chartOptions.scrollBackwards) {\n            context.fillText(ts, gx, dimensions.height - 2);\n          } else {\n            context.fillText(ts, gx - tsWidth, dimensions.height - 2);\n          }\n        }\n      }\n    }\n\n    context.restore(); // See .save() above.\n  };\n\n  // Sample timestamp formatting function\n  SmoothieChart.timeFormatter = function(date) {\n    function pad2(number) { return (number < 10 ? '0' : '') + number }\n    return pad2(date.getHours()) + ':' + pad2(date.getMinutes()) + ':' + pad2(date.getSeconds());\n  };\n\n  exports.TimeSeries = TimeSeries;\n  exports.SmoothieChart = SmoothieChart;\n\n})(typeof exports === 'undefined' ? this : exports);\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/serial-plot-smoothie/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "serial-plot-smoothie",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "smoothie": "^1.35.0"
14 |   },
15 |   "devDependencies": {
16 |     "webpack": "^4.21.0",
17 |     "webpack-cli": "^3.1.2"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/serial-plot-smoothie/renderer.js:
--------------------------------------------------------------------------------
 1 | const Smoothie = require('smoothie');
 2 | 
 3 | const dataSets = new Array(numPlots);
 4 | const charts = new Array(numPlots);
 5 | 
 6 | // 0: green, 1st: red
 7 | const chartLineColors = ['rgba(0, 255, 0, 1)', 'rgba(255, 0, 0, 1)'];
 8 | const chartFillColors = ['rgba(0, 255, 0, 0.2)', 'rgba(255, 0, 0, 0.2)'];
 9 | 
10 | for (var i=0; i<numPlots; i++) {
11 |   dataSets[i] = new Smoothie.TimeSeries();
12 | 
13 |   charts[i] = new Smoothie.SmoothieChart({
14 |     minValue: 0.0,
15 |     maxValue: 4095.0,
16 |     tooltip: true,
17 |     timestampFormatter: Smoothie.SmoothieChart.timeFormatter,
18 |     interpolation: 'linear'
19 |   });
20 | 
21 |   charts[i].addTimeSeries(dataSets[i], {
22 |     strokeStyle: chartLineColors[i],
23 |     fillStyle: chartFillColors[i],
24 |     lineWidth: 1
25 |   });
26 | 
27 |   charts[i].streamTo(document.getElementById("chart"+i), 0);
28 | }
29 | 
30 | 
31 | // overridden function, append new points
32 | renderPlots = function() {
33 |   for (var i=0; i<numPlots; i++) {
34 | 
35 |     dataSets[i].append(
36 |       new Date().getTime(),
37 |       pointsArr[i]
38 |     );
39 | 
40 |   }
41 | };
42 | 


--------------------------------------------------------------------------------
/serial-plot-smoothie/screenshot_smoothie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ussserrr/serial-plot-web/b992715e3a62d951fa5dbec816f5fd01b7076597/serial-plot-smoothie/screenshot_smoothie.png


--------------------------------------------------------------------------------
/serial-plot-smoothie/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // webpack.config.js
 2 | 
 3 | module.exports = {
 4 |   entry: './renderer.js',
 5 |   output: {
 6 |     filename: 'renderer_packed.js'
 7 |   },
 8 |   devtool: "source-map"
 9 | };
10 | 


--------------------------------------------------------------------------------