Merge pull request #8 from SERVIR/highcharts

Highcharts Integration
SERVIR · Nov 15, 2024 · b23c49e · b23c49e
2 parents 9aae950 + 3a15b9b
commit b23c49e
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -83,9 +83,13 @@ const components = [
         link: '/components/splitmap',
     },
     {
-        title: 'Geoman',
+        title: 'Geoman(Draw)',
         link: '/components/geoman',
     },
+    {
+        title: 'HighChart',
+        link: '/components/chart',
+    },
 ]
 </script>
 

diff --git a/playground/src/pages/Components/chart.vue b/playground/src/pages/Components/chart.vue
@@ -0,0 +1,173 @@
+<template>
+    <div style="min-height: calc(100vh - 112px)">
+        <v-container>
+            <v-divider />
+
+            <v-row no-gutters>
+                <v-col cols="12" sm="6">
+                    <v-card variant="flat">
+                        <v-card-item>
+                            <highcharts :options="chartOptions1" />
+                        </v-card-item>
+                    </v-card>
+                </v-col>
+                <v-col cols="12" sm="6">
+                    <v-card variant="flat">
+                        <v-card-item>
+                            <highcharts :options="chartOptions" />
+                        </v-card-item>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import HighCharts from 'highcharts'
+import exportingInit from 'highcharts/modules/exporting'
+
+exportingInit(HighCharts)
+
+const chartOptions = ref({
+    chart: {
+        type: 'bar',
+        height: 500,
+    },
+
+    title: {
+        text: "Guyana's Coastal Regions Mangrove Change",
+        align: 'center',
+    },
+    xAxis: {
+        categories: [
+            'Barima-Waini (Region 1)',
+            'Pomeroon-Supenaam (Region 2)',
+            'Essequibo Islands-West Demerara (Region 3)',
+            'Demerara-Mahaica (Region 4)',
+            'Mahaica-Berbice (Region 5)',
+            'East Berbice-Corentyne (Region 6)',
+        ],
+        title: {
+            text: null,
+        },
+        gridLineWidth: 1,
+        lineWidth: 0,
+    },
+    yAxis: {
+        min: 0,
+        title: {
+            text: 'Area (ha)',
+            align: 'high',
+        },
+        labels: {
+            overflow: 'justify',
+        },
+        gridLineWidth: 0,
+    },
+    tooltip: {
+        valueSuffix: ' ha',
+    },
+    plotOptions: {
+        bar: {
+            borderRadius: '50%',
+            dataLabels: {
+                enabled: true,
+            },
+            groupPadding: 0.1,
+        },
+    },
+    legend: {
+        layout: 'horizontal',
+        align: 'center',
+    },
+    credits: {
+        enabled: false,
+    },
+    series: [
+        {
+            name: '2015-2020 Gains',
+            data: [3177, 641, 202, 141, 505, 179],
+            color: '#228B22',
+        },
+        {
+            name: '2015-2020 Losses',
+            data: [8410, 1329, 609, 64, 389, 1341],
+            color: '#FF7F50',
+        },
+        {
+            name: '2010-2015 Gains',
+            data: [0, 1183, 631, 115, 557, 1018],
+            color: '#9ACD32',
+        },
+        {
+            name: '2010-2015 Losses',
+            data: [0, 1062, 681, 36, 447, 616],
+            color: '#FF7043',
+        },
+    ],
+})
+
+const chartOptions1 = ref({
+    chart: {
+        type: 'column',
+        height: 500,
+    },
+    title: {
+        text: "Guyana's Coastal Region Mangrove Extent",
+        align: 'center',
+    },
+    xAxis: {
+        categories: [
+            'Region 1',
+            'Region 2',
+            'Region 3',
+            'Region 4',
+            'Region 5',
+            'Region 6',
+        ],
+        crosshair: true,
+        accessibility: {
+            description: 'Regions',
+        },
+    },
+    credits: {
+        enabled: false,
+    },
+    yAxis: {
+        min: 0,
+        title: {
+            text: 'Mangrove Extent (ha)',
+        },
+    },
+    tooltip: {
+        valueSuffix: ' ha',
+    },
+    plotOptions: {
+        column: {
+            pointPadding: 0.2,
+            borderWidth: 0,
+        },
+    },
+    series: [
+        {
+            name: '2010',
+            data: [554, 4818, 1303, 93, 1227, 1907],
+            color: '#FF7F50',
+        },
+        {
+            name: '2015',
+            data: [18641, 4938, 1254, 172, 1337, 2309],
+            color: '#66FFCC',
+        },
+        {
+            name: '2020',
+            data: [13407, 4251, 848, 249, 1453, 1146],
+            color: '#66CCFF',
+        },
+    ],
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/playground/src/pages/Components/geoman.vue b/playground/src/pages/Components/geoman.vue
@@ -19,7 +19,6 @@
 </template>
 
 <script setup lang="ts">
-import type L from 'leaflet'
 import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
 import type { PointExpression } from 'leaflet'
 import { ref } from 'vue'
@@ -53,7 +52,6 @@ const hookUpDraw = async () => {
         console.log(geofence)
     })
 }
-
 </script>
 
 <style scoped></style>
diff --git 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)
     }
 }
-
 </script>
 
 <style lang="scss"></style>
diff --git a/src/module.ts b/src/module.ts
@@ -27,6 +27,7 @@ export default defineNuxtModule<ModuleOptions>({
         )
 
         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
@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from '#app'
+import HighchartsVue from 'highcharts-vue'
+
+export default defineNuxtPlugin({
+    name: 'highcharts-vue',
+    parallel: true,
+    setup(nuxtApp) {
+        nuxtApp.vueApp.use(HighchartsVue)
+    },
+})