feat: add dashboard on admin

Ehco1996 · Jan 16, 2024 · 7280d59 · 7280d59
1 parent 4076e70
commit 7280d59
Show file tree

Hide file tree

Showing 6 changed files with 339 additions and 150 deletions.
diff --git a/apps/sspanel/static/sspanel/css/sspanel.css b/apps/sspanel/static/sspanel/css/sspanel.css
@@ -1,28 +1,27 @@
 /* 动态为footer添加类fixed-bottom */
 
 .fixed-bottom {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
 }
 
 .errorlist {
-  color: red;
+    color: red;
 }
 
 /* Navbar免js自动响应 */
-
 #nav-toggle-state {
-  display: none;
+    display: none;
 }
 
 #nav-toggle-state:checked ~ .nav-menu {
-  display: block;
+    display: block;
 }
 
 @media all and (max-width: 768px) {
-  body {
-    /* On modern browsers, prevent the whole page to bounce */
-    overflow: hidden;
-  }
+    body {
+        /* On modern browsers, prevent the whole page to bounce */
+        overflow: hidden;
+    }
 }
diff --git a/apps/sspanel/static/sspanel/js/sspanel.js b/apps/sspanel/static/sspanel/js/sspanel.js
@@ -1,3 +1,5 @@
+'use strict';
+
 $(function () {
   function footerPosition() {
     $("index-footer").removeClass("fixed-bottom");
@@ -12,7 +14,6 @@ $(function () {
   $(window).resize(footerPosition);
 });
 
-'use strict';
 
 document.addEventListener('DOMContentLoaded', function () {
 
@@ -140,122 +141,132 @@ var getRandomColorSets = function (num) {
   return colorData
 }
 
-
-var genChart = function (chartId, chartType, config) {
-  /**
-      charId : 元素id 定位canvas用
-      config : 配置信息 dict类型
-          congig = {
-              title: 图表名字
-              labels :data对应的label
-              data_title: data的标题
-              data: 数据
-              x_label : x轴的lable
-              y_label : y轴的lable
-          }
-  **/
-  data = {
-    labels: config.labels,
-    datasets: [{
-      label: config.data_title,
-      data: config.data,
-      backgroundColor: getRandomColorSets(config.data.length),
-      steppedLine: false,
-      fill: false,
-    }]
+var genLineChart = function (id, config_data) {
+  let chartStatus = Chart.getChart(id);
+  if (chartStatus != undefined) {
+    chartStatus.destroy();
   }
-  if (chartType == 'doughnut') {
-    options = {
-      title: {
-        display: true,
-        positon: 'top',
-        text: config.title,
+  var ctx = document.getElementById(id);
+  var myChart = new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: config_data.labels,
+      datasets: [
+        {
+          label: config_data.title,
+          data: config_data.data,
+          backgroundColor: getRandomColor(),
+          borderColor: getRandomColor,
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      hover: {
+        mode: "nearest",
+        intersect: true,
       },
-      legend: {
+      title: {
         display: true,
-        position: 'bottom',
-      },
-      tooltip: {
-        enabled: false,
+        text: config_data.title,
       },
-      scaleOverlay: true,
-    }
-    if (config.labels.length > 3) {
-      options.legend.display = false
-    }
-  }
-  if (chartType == 'line') {
-    data.datasets[0].backgroundColor = getRandomColor()
-    data.datasets[0].borderColor = getRandomColor()
-    options = {
       elements: {
         point: {
-          radius: 2
-        }
+          radius: 2,
+        },
       },
       responsive: true,
-      title: {
-        display: true,
-        text: config.title,
-      },
-      hover: {
-        mode: 'nearest',
-        intersect: true
-      },
+      maintainAspectRatio: false,
       legend: {
         display: true,
       },
       scales: {
-        xAxes: [{
-          display: true,
-          scaleLabel: {
+        xAxes: [
+          {
             display: true,
-            labelString: config.x_label,
-          }
-        }],
-        yAxes: [{
-          display: true,
-          ticks: { beginAtZero: true },
-          scaleLabel: {
+            scaleLabel: {
+              display: true,
+              labelString: config_data.x_label,
+            },
+          },
+        ],
+        yAxes: [
+          {
             display: true,
-            labelString: config.y_label,
-          }
-        }]
-      }
-    }
+            ticks: { beginAtZero: true },
+            scaleLabel: {
+              display: true,
+              labelString: config_data.y_label,
+            },
+          },
+        ],
+      },
+    },
+  });
+  return myChart;
+};
+
+var genBarChart = function (id, config_data) {
+  let chartStatus = Chart.getChart(id);
+  if (chartStatus != undefined) {
+    chartStatus.destroy();
   }
-  if (chartType == 'bar') {
-    options = {
+  var ctx = document.getElementById(id);
+  var myChart = new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: config_data.labels,
+      datasets: [
+        {
+          label: config_data.title,
+          data: config_data.data,
+          backgroundColor: getRandomColor(),
+          borderColor: getRandomColor,
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      hover: {
+        mode: "nearest",
+        intersect: true,
+      },
       title: {
         display: true,
-        text: config.title,
+        text: config_data.title,
+      },
+      elements: {
+        point: {
+          radius: 2,
+        },
       },
+      responsive: true,
+      maintainAspectRatio: false,
       legend: {
-        display: false,
+        display: true,
       },
       scales: {
-        xAxes: [{
-          display: true,
-          scaleLabel: {
+        xAxes: [
+          {
             display: true,
-            labelString: config.x_label,
-          }
-        }],
-        yAxes: [{
-          scaleLabel: {
+            scaleLabel: {
+              display: true,
+              labelString: config_data.x_label,
+            },
+          },
+        ],
+        yAxes: [
+          {
             display: true,
-            labelString: config.y_label,
+            ticks: { beginAtZero: true },
+            scaleLabel: {
+              display: true,
+              labelString: config_data.y_label,
+            },
           },
-          ticks: {
-            beginAtZero: true,
-            stepSize: 1,
-            suggestedMax: 7
-          }
-        }]
-      }
-    }
-  }
-  var ctx = $('#' + chartId)
-  chart = new Chart(ctx, { type: chartType, data: data, options: options })
-  chart.update();
-}
+        ],
+      },
+    },
+  });
+  return myChart;
+};
diff --git a/pyproject.toml b/pyproject.toml
@@ -17,6 +17,9 @@ license = "GPL-3.0 License"
 name = "django-sspanel"
 version = "0.1.0"
 
+[tool.djlint]
+preserve_blank_lines = true
+
 [tool.poetry.dependencies]
 Django = "^4.2.6"
 Markdown = "^3.3.4"