interface test

2020-07-28 00:20:07 -04:00
parent 6d405bb052
commit 53783025e2
7 changed files with 111 additions and 102 deletions
@@ -421,7 +421,7 @@
  </div>
  <!-- Libs JS -->
  <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-  <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
+  <script src="./dist/libs/jquery/dist/jquery-3.5.1.min.js"></script>
  <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
  <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js"></script>
  <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js"></script>
@@ -430,107 +430,95 @@
  <script src="./dist/js/tabler.min.js"></script>

  <script>
-    // @formatter:off
-    document.addEventListener("DOMContentLoaded", function () {
-      window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
-        chart: {
-          type: "line",
-          fontFamily: 'inherit',
-          height: 240,
-          parentHeightOffset: 0,
-          toolbar: {
-            show: false,
+    $.get("/stat", function (data) {
+      // @formatter:off
+      document.addEventListener("DOMContentLoaded", function () {
+        window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
+          chart: {
+            type: "line",
+            fontFamily: 'inherit',
+            height: 240,
+            parentHeightOffset: 0,
+            toolbar: {
+              show: false,
+            },
+            animations: {
+              enabled: false
+            },
+            stacked: true,
          },
-          animations: {
-            enabled: false
-          },
-          stacked: true,
-        },
-        plotOptions: {
-          bar: {
-            columnWidth: '50%',
-          }
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        fill: {
-          opacity: 0.6,
-        },
-        series: [{
-          name: "Web",
-          data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23,
-            26, 50, 26, 41, 22, 46, 47, 81, 46, 6
-          ]
-        }, {
-          name: "Social",
-          data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13,
-            15, 20, 47, 18, 15, 11, 10, 0
-          ]
-        }, {
-          name: "Other",
-          data: [2, 9, 10, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8,
-            3,
-            2, 3, 4, 9, 7, 1, 6
-          ]
-        }],
-        grid: {
-          padding: {
-            top: -20,
-            right: 0,
-            left: -4,
-            bottom: -4
-          },
-          strokeDashArray: 4,
-          xaxis: {
-            lines: {
-              show: true
+          plotOptions: {
+            bar: {
+              columnWidth: '50%',
            }
          },
-        },
-        xaxis: {
-          labels: {
-            padding: 0
+          dataLabels: {
+            enabled: false,
          },
-          tooltip: {
-            enabled: false
+          fill: {
+            opacity: 0.6,
          },
-          axisBorder: {
-            show: false,
+          series: [{
+            name: "Down rate",
+            data: data.stat[0].io_mean
+          }, {
+            name: "Up rate",
+            data: data.stat[0].io_mean
+          }, {
+            name: "d rate",
+            data: data.stat[0].io_mean
+          }],
+          grid: {
+            padding: {
+              top: -20,
+              right: 0,
+              left: -4,
+              bottom: -4
+            },
+            strokeDashArray: 4,
+            xaxis: {
+              lines: {
+                show: true
+              }
+            },
          },
-          type: 'datetime',
-        },
-        yaxis: {
-          labels: {
-            padding: 4
+          xaxis: {
+            labels: {
+              padding: 0
+            },
+            tooltip: {
+              enabled: false
+            },
+            axisBorder: {
+              show: false,
+            },
+            type: 'datetime',
          },
-        },
-        labels: [
-          '2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26',
-          '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03',
-          '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10',
-          '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17',
-          '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24',
-          '2020-07-25', '2020-07-26'
-        ],
-        colors: ["#206bc4", "#79a6dc", "#bfe399"],
-        legend: {
-          show: true,
-          position: 'bottom',
-          height: 32,
-          offsetY: 8,
-          markers: {
-            width: 8,
-            height: 8,
-            radius: 100,
+          yaxis: {
+            labels: {
+              padding: 4
+            },
          },
-          itemMargin: {
-            horizontal: 8,
+          labels: data.time,
+          colors: ["#206bc4", "#79a6dc", "#bfe399"],
+          legend: {
+            show: true,
+            position: 'bottom',
+            height: 32,
+            offsetY: 8,
+            markers: {
+              width: 8,
+              height: 8,
+              radius: 100,
+            },
+            itemMargin: {
+              horizontal: 8,
+            },
          },
-        },
-      })).render();
+        })).render();
+      });
+      // @formatter:on
    });
-    // @formatter:on
  </script>