chore: remove icon deps, upgrade chartjs

README.md

@@ -32,6 +32,7 @@
 </p>
 
 ### Quick start
+
 Use following command to quickly scaffold new [Vuestic Admin](admin.vuestic.ui) or empty Vite or Nuxt project with [Vuestic UI](ui.vuestic.dev).
 
 ```bash

package.json

@@ -21,13 +21,9 @@
     ]
   },
   "dependencies": {
-    "@amcharts/amcharts5": "^5.5.6",
-    "@amcharts/amcharts5-geodata": "^5.1.1",
-    "@fortawesome/fontawesome-free": "^6.1.1",
     "@gtm-support/vue-gtm": "^2.0.0",
     "@vuestic/tailwind": "^0.1.3",
     "@vueuse/core": "^10.6.1",
-    "axios": "^1.6.1",
     "chart.js": "^4.4.1",
     "chartjs-chart-geo": "^4.2.8",
     "epic-spinners": "^2.0.0",
@@ -39,7 +35,7 @@
     "sass": "^1.69.5",
     "serve": "^14.2.1",
     "vue": "3.3.9",
-    "vue-chartjs": "^4.1.1",
+    "vue-chartjs": "^5.3.0",
     "vue-i18n": "^9.6.2",
     "vue-router": "^4.2.5",
     "vuestic-ui": "0.0.0-experimental-f57753ab1-20240129"

src/components/va-charts/VaChart.vue

@@ -1,21 +1,25 @@
 <template>
-  <component :is="chartComponent" :chart-data="data" :chart-options="chartOptions" class="va-chart" />
+  <component :is="chartComponent" :chart-data="data" :data="data" :options="chartOptions" class="va-chart" />
 </template>
 
 <script lang="ts" setup generic="T extends 'line' | 'bar' | 'bubble' | 'doughnut' | 'pie'">
 import { computed } from 'vue'
-import type { TChartOptions, TChartData } from 'vue-chartjs/dist/types'
+import type { ChartOptions, ChartData } from 'chart.js'
 import { defaultConfig, chartTypesMap } from './vaChartConfigs'
 
+defineOptions({
+  name: 'VaChart',
+})
+
 const props = defineProps<{
-  data: TChartData<T>
-  options?: TChartOptions<T>
+  data: ChartData<T>
+  options?: ChartOptions<T>
   type: T
 }>()
 
 const chartComponent = chartTypesMap[props.type]
 
-const chartOptions = computed<TChartOptions<T>>(() => ({
+const chartOptions = computed<ChartOptions<T>>(() => ({
   ...(defaultConfig as any),
   ...props.options,
 }))

src/components/va-charts/chart-types/BarChart.vue

@@ -1,16 +1,16 @@
 <template>
-  <Bar :chart-data="chartData" :chart-options="chartOptions" />
+  <Bar :data="data" :options="options" />
 </template>
 
 <script lang="ts" setup>
 import { Bar } from 'vue-chartjs'
-import type { TChartOptions } from 'vue-chartjs/dist/types'
+import type { ChartOptions } from 'chart.js'
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale } from 'chart.js'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale)
 
 defineProps<{
-  chartData: any
-  chartOptions?: TChartOptions<'bar'>
+  data: any
+  options?: ChartOptions<'bar'>
 }>()
 </script>

src/components/va-charts/chart-types/BubbleChart.vue

@@ -1,17 +1,17 @@
 <template>
-  <Bubble :chart-data="props.chartData" :chart-options="chartOptions" />
+  <Bubble :data="props.data" :options="options" />
 </template>
 
 <script lang="ts" setup>
 import { Bubble } from 'vue-chartjs'
-import type { TChartOptions } from 'vue-chartjs/dist/types'
+import type { ChartOptions } from 'chart.js'
 import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LinearScale } from 'chart.js'
 import { TBubbleChartData } from '../../../data/types'
 
 ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
 
 const props = defineProps<{
-  chartData: TBubbleChartData
-  chartOptions?: TChartOptions<'bubble'>
+  data: TBubbleChartData
+  options?: ChartOptions<'bubble'>
 }>()
 </script>

src/components/va-charts/chart-types/DoughnutChart.vue

@@ -1,17 +1,17 @@
 <template>
-  <Doughnut :chart-data="props.chartData" :chart-options="chartOptions" />
+  <Doughnut :data="props.data" :options="options" />
 </template>
 
 <script lang="ts" setup>
 import { Doughnut } from 'vue-chartjs'
-import type { TChartOptions } from 'vue-chartjs/dist/types'
+import type { ChartOptions } from 'chart.js'
 import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
 import { TDoughnutChartData } from '../../../data/types'
 
 ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 
 const props = defineProps<{
-  chartData: TDoughnutChartData
-  chartOptions?: TChartOptions<'doughnut'>
+  data: TDoughnutChartData
+  options?: ChartOptions<'doughnut'>
 }>()
 </script>

src/components/va-charts/chart-types/HorizontalBarChart.vue

@@ -1,10 +1,10 @@
 <template>
-  <Bar :chart-data="props.chartData" :chart-options="{ ...chartOptions, ...horizontalBarOptions }" />
+  <Bar :data="props.data" :options="{ ...options, ...horizontalBarOptions }" />
 </template>
 
 <script lang="ts" setup>
 import { Bar } from 'vue-chartjs'
-import type { TChartOptions } from 'vue-chartjs/dist/types'
+import type { ChartOptions } from 'chart.js'
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale } from 'chart.js'
 import { TBarChartData } from '../../../data/types'
 
@@ -20,7 +20,7 @@ const horizontalBarOptions = {
 }
 
 const props = defineProps<{
-  chartData: TBarChartData
-  chartOptions?: TChartOptions<'bar'>
+  data: TBarChartData
+  options?: ChartOptions<'bar'>
 }>()
 </script>

src/components/va-charts/chart-types/LineChart.vue

@@ -1,11 +1,11 @@
 <template>
-  <Line ref="chart" :chart-data="computedChartData" :chart-options="chartOptions" />
+  <Line ref="chart" :data="computedChartData" :options="options" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Line } from 'vue-chartjs'
-import type { TChartOptions } from 'vue-chartjs/dist/types'
+import type { ChartOptions } from 'chart.js'
 import {
   Chart as ChartJS,
   Title,
@@ -26,25 +26,25 @@ ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement,
 const chart = ref<typeof Line>()
 
 const props = defineProps<{
-  chartData: TLineChartData
-  chartOptions?: TChartOptions<'line'>
+  data: TLineChartData
+  options?: ChartOptions<'line'>
 }>()
 
 const ctx = computed(() => {
   if (!chart.value) {
     return null
   }
 
-  return chart.value.chart.ctx as CanvasRenderingContext2D
+  return chart.value.chart?.ctx ?? null
 })
 
 const { setHSLAColor, getColor } = useColors()
 
 const colors = ['primary', 'success', 'danger', 'warning']
 
-const computedChartData = computed(() => {
+const computedChartData = computed<TLineChartData>(() => {
   if (!ctx.value) {
-    return props.chartData
+    return props.data
   }
 
   const makeGradient = (bg: string) => {
@@ -54,7 +54,7 @@ const computedChartData = computed(() => {
     return gradient
   }
 
-  const datasets = props.chartData.datasets.map((dataset, index) => {
+  const datasets = props.data.datasets.map((dataset, index) => {
     const color = getColor(colors[index % colors.length])
 
     return {
@@ -67,6 +67,6 @@ const computedChartData = computed(() => {
     }
   })
 
-  return { ...props.chartData, datasets }
+  return { ...props.data, datasets }
 })
 </script>

src/components/va-charts/chart-types/Map.vue

@@ -28,8 +28,8 @@ function getColor(revenue: number) {
 }
 
 const props = defineProps<{
-  chartOptions?: ChartOptions<'choropleth'>
-  chartData: ChartData<'choropleth', { feature: any; value: number }[], string>
+  options?: ChartOptions<'choropleth'>
+  data: ChartData<'choropleth', { feature: any; value: number }[], string>
 }>()
 
 watchEffect(() => {
@@ -39,7 +39,7 @@ watchEffect(() => {
 
   new ChartJS(canvas.value.getContext('2d')!, {
     type: 'choropleth',
-    data: props.chartData,
+    data: props.data,
     options: {
       plugins: {
         legend: {

src/components/va-charts/chart-types/PieChart.vue

@@ -1,17 +1,17 @@
 <template>
-  <Pie :chart-data="props.chartData" :chart-options="chartOptions" />
+  <Pie :data="props.data" :options="options" />
 </template>
 
 <script lang="ts" setup>
 import { Pie } from 'vue-chartjs'
-import type { TChartOptions } from 'vue-chartjs/dist/types'
+import type { ChartOptions } from 'chart.js'
 import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
 import { TPieChartData } from '../../../data/types'
 
 ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 
 const props = defineProps<{
-  chartData: TPieChartData
-  chartOptions?: TChartOptions<'pie'>
+  data: TPieChartData
+  options?: ChartOptions<'pie'>
 }>()
 </script>

src/pages/admin/dashboard/DataSectionItem.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue'
+import { computed } from 'vue'
 import { VaCard } from 'vuestic-ui'
 
 const props = defineProps<{

src/pages/admin/dashboard/cards/RevenueByLocationMap.vue

@@ -5,7 +5,7 @@
     </VaCardTitle>
     <VaCardContent class="flex-1 flex overflow-hidden">
       <VaAspectRatio class="w-full md:min-h-72 overflow-hidden relative flex items-center">
-        <Map v-if="geoJson" :chart-data="data" class="dashboard-map flex-1 h-full" />
+        <Map v-if="geoJson" :data="data" class="dashboard-map flex-1 h-full" />
         <VaProgressCircle v-else indeterminate class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
       </VaAspectRatio>
     </VaCardContent>

src/pages/admin/dashboard/cards/YearlyBreakup.vue

@@ -23,7 +23,13 @@
         </div>
       </section>
       <div class="w-1/2 flex items-center h-full flex-1 lg:pl-16 pl-2">
-        <VaChart :data="chartData" class="chart chart--donut h-[90px] w-[90px]" type="doughnut" :options="options" />
+        <VaChart
+          v-if="chartData"
+          :data="chartData"
+          class="chart chart--donut h-[90px] w-[90px]"
+          type="doughnut"
+          :options="options"
+        />
       </div>
     </VaCardContent>
   </VaCard>