update example for print performaing

1 changed files with 37 additions and 13 deletions
--- a/examples/demo_vertical.html
+++ b/examples/demo_vertical.html
@ -7,21 +7,29 @@
    <script src="../dist/index.js" type="text/javascript"></script>
  </head>
  <body>
-    <div id="chart" style="width: 50%; height: 500px;"></div>
+    <div id="charts">
+    </div>

    <script type="text/javascript">
+      
      const startTime = 1590590148;
-      const arrayLength = 20;
+      const arrayLength = 200;
+      const chartsNumber = 150;
      const data1 = createDatapoints(arrayLength, startTime, 40);
      const data2 = createDatapoints(arrayLength, startTime, 30, 50);
      const data3 = createDatapoints(arrayLength, startTime, 20, 90);

+      insertHtml(chartsNumber);
+
      let options = {
        renderLegend: false,
        axis: {
-          y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter },
+          y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter, ticksCount: 6 },
          x: { format: 'numeric' }
        },
+        // grid: {
+        //   y: { ticksCount: 2000 }
+        // },
        zoomEvents: {
          mouse: {
            pan: { isActive: true, orientation: 'vertical', keyEvent: 'shift' },
@ -36,17 +44,8 @@
        crosshair: { orientation: 'horizontal' },
        margin: { top: 30, right: 20, bottom: 20, left: 50 }
      }
-      var pod = new LinePod(
-        document.getElementById('chart'),
-        [
-          { target: 'test1', datapoints: data1, color: 'green' },
-          { target: 'test2', datapoints: data2, color: 'blue' },
-          { target: 'test3', datapoints: data3, color: 'orange' },
-        ],
-        options
-      );
-      pod.render();

+      multileRender(chartsNumber);

      function zoomIn(ranges) {
        const range = ranges[1];
@ -85,6 +84,31 @@
        }
        return 'black';
      }
+    
+      function insertHtml(chartsNumber) {
+        let chartsHtml = '';
+
+        for(let i = 1; i <= chartsNumber; i++) {
+          chartsHtml += `<div id="chart-${i}" style="height: 640px; width: 880px"></div>`;
+        }
+
+        document.getElementById('charts').innerHTML = chartsHtml;
+      }
+
+      function multileRender(chartsNumber) {
+        for (let i = 1; i <= chartsNumber; i++) {
+          const pod = new LinePod(
+            document.getElementById(`chart-${i}`),
+            [
+              { target: 'test1', datapoints: data1, color: 'green' },
+              { target: 'test2', datapoints: data2, color: 'blue' },
+              { target: 'test3', datapoints: data3, color: 'orange' },
+            ],
+            options
+          );
+          pod.render();
+        }
+      }
    </script>
  </body>
 </html>