fix: bump highcharts/dashboards to v2, resolve #22 and #6 (#44)

* resolve #22 and #6

* chore: update lock file

---------

Co-authored-by: Northword <northword@outlook.com>

package.json

@@ -20,12 +20,12 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@giscus/vue": "^3.0.0",
-    "@highcharts/dashboards": "1.3.1",
+    "@highcharts/dashboards": "2.1.0",
     "@mdit/plugin-footnote": "0.10.1",
     "@vueuse/core": "^10.9.0",
     "element-plus": "2.7.3",
     "feed": "4.2.2",
-    "highcharts": "11.4.1",
+    "highcharts": "11.4.3",
     "highcharts-vue": "2.0.1",
     "vitepress": "1.2.0",
     "vue": "3.4.27"
@@ -50,7 +50,7 @@
     "typescript": "5.4.5",
     "unplugin-auto-import": "0.17.6",
     "unplugin-vue-components": "0.27.0",
-    "vite": "5.2.11",
+    "vite": "5.2.12",
     "vite-plugin-inspect": "^0.8.4",
     "vite-plugin-vue-devtools": "^7.2.0",
     "vue-tsc": "2.0.19"

src/plugins/components/PluginsChart.vue

@@ -13,7 +13,7 @@ import { data as chartsData } from "../data/charts.data";
 import { useData } from "vitepress";
 import { onMounted } from "vue";
 
-import * as Highcharts from "highcharts/highcharts";
+import Highcharts from "highcharts";
 import HighchartsMore from "highcharts/highcharts-more";
 HighchartsMore(Highcharts);
 import WordCloudGraph from "highcharts/modules/wordcloud";
@@ -34,11 +34,16 @@ import HighchartsExportData from "highcharts/modules/export-data";
 HighchartsExportData(Highcharts);
 import NoDataToDisplay from "highcharts/modules/no-data-to-display";
 NoDataToDisplay(Highcharts);
-import HighchartsPlugin from "@highcharts/dashboards/es-modules/Dashboards/Plugins/HighchartsPlugin";
-HighchartsPlugin.custom.connectHighcharts(Highcharts);
+
 import Dashboards from "@highcharts/dashboards";
 import type { Board } from "@highcharts/dashboards";
-Dashboards.PluginHandler.addPlugin(HighchartsPlugin);
+import DataGrid from "@highcharts/dashboards/datagrid";
+import LayoutModule from "@highcharts/dashboards/modules/layout";
+LayoutModule(Dashboards);
+Dashboards.HighchartsPlugin.custom.connectHighcharts(Highcharts);
+Dashboards.DataGridPlugin.custom.connectDataGrid(DataGrid);
+Dashboards.PluginHandler.addPlugin(Dashboards.HighchartsPlugin);
+Dashboards.PluginHandler.addPlugin(Dashboards.DataGridPlugin);
 
 const darkMode = useData().isDark;