From 025a4082988a346933773cb03f2aedfad243d355 Mon Sep 17 00:00:00 2001 From: Deepak Shah Date: Thu, 14 Nov 2024 15:32:45 -0600 Subject: [PATCH 1/2] highchart integratino --- package-lock.json | 20 ++- package.json | 3 +- playground/src/components/layout/SideBar.vue | 6 +- playground/src/pages/Components/chart.vue | 174 +++++++++++++++++++ src/module.ts | 1 + src/runtime/plugins/highcharts.client.ts | 12 ++ 6 files changed, 213 insertions(+), 3 deletions(-) create mode 100644 playground/src/pages/Components/chart.vue create mode 100644 src/runtime/plugins/highcharts.client.ts diff --git a/package-lock.json b/package-lock.json index 0759a46..fab9d88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "dependencies": { "@geoman-io/leaflet-geoman-free": "^2.17.0", "@nuxt/kit": "^3.12.4", - "@nuxtjs/leaflet": "^1.2.3" + "@nuxtjs/leaflet": "^1.2.3", + "highcharts-vue": "^2.0.1" }, "devDependencies": { "@nuxt/devtools": "^1.3.9", @@ -8832,6 +8833,23 @@ "he": "bin/he" } }, + "node_modules/highcharts": { + "version": "11.4.8", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.4.8.tgz", + "integrity": "sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==", + "license": "https://www.highcharts.com/license", + "peer": true + }, + "node_modules/highcharts-vue": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/highcharts-vue/-/highcharts-vue-2.0.1.tgz", + "integrity": "sha512-7yVaKvsWlx7OgmKFXE2D99fi/0tr2A85H4KUz3jL7CRQhAwvEvXgtDIyTBGLHJsOC5L9VlppAI7k6KfIi0j0hg==", + "license": "SEE LICENSE IN LICENSE", + "peerDependencies": { + "highcharts": ">=5.0.0", + "vue": ">=3.0.0" + } + }, "node_modules/hookable": { "version": "5.5.3", "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", diff --git a/package.json b/package.json index ce36ce7..7061478 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,8 @@ "dependencies": { "@geoman-io/leaflet-geoman-free": "^2.17.0", "@nuxt/kit": "^3.12.4", - "@nuxtjs/leaflet": "^1.2.3" + "@nuxtjs/leaflet": "^1.2.3", + "highcharts-vue": "^2.0.1" }, "devDependencies": { "@nuxt/devtools": "^1.3.9", diff --git a/playground/src/components/layout/SideBar.vue b/playground/src/components/layout/SideBar.vue index 7bd5c66..7a06516 100644 --- a/playground/src/components/layout/SideBar.vue +++ b/playground/src/components/layout/SideBar.vue @@ -83,9 +83,13 @@ const components = [ link: '/components/splitmap', }, { - title: 'Geoman', + title: 'Geoman(Draw)', link: '/components/geoman', }, + { + title: 'HighChart', + link: '/components/chart', + }, ] diff --git a/playground/src/pages/Components/chart.vue b/playground/src/pages/Components/chart.vue new file mode 100644 index 0000000..e6bcb4b --- /dev/null +++ b/playground/src/pages/Components/chart.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/src/module.ts b/src/module.ts index 7058300..08b062a 100644 --- a/src/module.ts +++ b/src/module.ts @@ -27,6 +27,7 @@ export default defineNuxtModule({ ) addPlugin(resolver.resolve('./runtime/plugins/splitmap')) + addPlugin(resolver.resolve('./runtime/plugins/highcharts.client')) addComponentsDir({ path: resolver.resolve('./runtime/components'), global: true, diff --git a/src/runtime/plugins/highcharts.client.ts b/src/runtime/plugins/highcharts.client.ts new file mode 100644 index 0000000..d512183 --- /dev/null +++ b/src/runtime/plugins/highcharts.client.ts @@ -0,0 +1,12 @@ +import { defineNuxtPlugin } from '#app' +import Highcharts from 'highcharts' +import HighchartsVue from 'highcharts-vue' +import stockInit from 'highcharts/modules/stock' + +export default defineNuxtPlugin({ + name: 'highcharts-vue', + parallel: true, + setup(nuxtApp) { + nuxtApp.vueApp.use(HighchartsVue) + }, +}) From 3a15b9bfe720ad2a6e1e0ae41b7ccdb132fe2045 Mon Sep 17 00:00:00 2001 From: Deepak Shah Date: Thu, 14 Nov 2024 15:35:56 -0600 Subject: [PATCH 2/2] linting fixes --- playground/src/pages/Components/chart.vue | 5 ++--- playground/src/pages/Components/geoman.vue | 2 -- playground/src/pages/Components/splitmap.vue | 1 - src/runtime/plugins/highcharts.client.ts | 2 -- 4 files changed, 2 insertions(+), 8 deletions(-) diff --git a/playground/src/pages/Components/chart.vue b/playground/src/pages/Components/chart.vue index e6bcb4b..a940396 100644 --- a/playground/src/pages/Components/chart.vue +++ b/playground/src/pages/Components/chart.vue @@ -7,14 +7,14 @@ - + - + @@ -168,7 +168,6 @@ const chartOptions1 = ref({ }, ], }) - diff --git a/playground/src/pages/Components/geoman.vue b/playground/src/pages/Components/geoman.vue index d04f6cc..415765d 100644 --- a/playground/src/pages/Components/geoman.vue +++ b/playground/src/pages/Components/geoman.vue @@ -19,7 +19,6 @@ diff --git a/playground/src/pages/Components/splitmap.vue b/playground/src/pages/Components/splitmap.vue index bb7c3a7..2fc0e06 100644 --- a/playground/src/pages/Components/splitmap.vue +++ b/playground/src/pages/Components/splitmap.vue @@ -62,7 +62,6 @@ const afterMapReady = () => { console.error('Error initializing SplitMap control:', error) } } - diff --git a/src/runtime/plugins/highcharts.client.ts b/src/runtime/plugins/highcharts.client.ts index d512183..63af68e 100644 --- a/src/runtime/plugins/highcharts.client.ts +++ b/src/runtime/plugins/highcharts.client.ts @@ -1,7 +1,5 @@ import { defineNuxtPlugin } from '#app' -import Highcharts from 'highcharts' import HighchartsVue from 'highcharts-vue' -import stockInit from 'highcharts/modules/stock' export default defineNuxtPlugin({ name: 'highcharts-vue',