@nathapp/na-cli 1.0.7 → 1.0.9

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/chartjsConfig.ts

@@ -0,0 +1,372 @@
+import type { ThemeInstance } from 'vuetify'
+import { hexToRgb } from '@layouts/utils'
+
+// 👉 Colors variables
+const colorVariables = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const themeSecondaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['medium-emphasis-opacity']})`
+  const themeDisabledTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['disabled-opacity']})`
+  const themeBorderColor = `rgba(${hexToRgb(String(themeColors.variables['border-color']))},${themeColors.variables['border-opacity']})`
+
+  return { labelColor: themeDisabledTextColor, borderColor: themeBorderColor, legendColor: themeSecondaryTextColor }
+}
+
+// SECTION config
+
+// 👉 Latest Bar Chart Config
+export const getLatestBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 500 },
+    scales: {
+      x: {
+        grid: {
+          borderColor,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: { color: labelColor },
+      },
+      y: {
+        min: 0,
+        max: 400,
+        grid: {
+          borderColor,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: {
+          stepSize: 100,
+          color: labelColor,
+        },
+      },
+    },
+    plugins: {
+      legend: { display: false },
+    },
+  }
+}
+
+// 👉 Horizontal Bar Chart Config
+export const getHorizontalBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor, legendColor } = colorVariables(themeColors)
+
+  return {
+    indexAxis: 'y',
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 500 },
+    elements: {
+      bar: {
+        borderRadius: {
+          topRight: 15,
+          bottomRight: 15,
+        },
+      },
+    },
+    layout: {
+      padding: { top: -4 },
+    },
+    scales: {
+      x: {
+        min: 0,
+        grid: {
+          drawTicks: false,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: { color: labelColor },
+      },
+      y: {
+        grid: {
+          borderColor,
+          display: false,
+          drawBorder: false,
+        },
+        ticks: { color: labelColor },
+      },
+    },
+    plugins: {
+      legend: {
+        align: 'end',
+        position: 'top',
+        labels: { color: legendColor },
+      },
+    },
+  }
+}
+
+// 👉 Line Chart Config
+export const getLineChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor, legendColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        ticks: { color: labelColor },
+        grid: {
+          borderColor,
+          drawBorder: false,
+          color: borderColor,
+        },
+      },
+      y: {
+        min: 0,
+        max: 400,
+        ticks: {
+          stepSize: 100,
+          color: labelColor,
+        },
+        grid: {
+          borderColor,
+          drawBorder: false,
+          color: borderColor,
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        align: 'end',
+        position: 'top',
+        labels: {
+          padding: 25,
+          boxWidth: 10,
+          color: legendColor,
+          usePointStyle: true,
+        },
+      },
+    },
+  }
+}
+
+// 👉 Radar Chart Config
+export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor, legendColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 500 },
+    layout: {
+      padding: { top: -20 },
+    },
+    scales: {
+      r: {
+        ticks: {
+          display: false,
+          maxTicksLimit: 1,
+          color: labelColor,
+        },
+        grid: { color: borderColor },
+        pointLabels: { color: labelColor },
+        angleLines: { color: borderColor },
+      },
+    },
+    plugins: {
+      legend: {
+        position: 'top',
+        labels: {
+          padding: 25,
+          color: legendColor,
+        },
+      },
+    },
+  }
+}
+
+// 👉 Polar Chart Config
+export const getPolarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { legendColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 500 },
+    layout: {
+      padding: {
+        top: -5,
+        bottom: -45,
+      },
+    },
+    scales: {
+      r: {
+        grid: { display: false },
+        ticks: { display: false },
+      },
+    },
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          padding: 25,
+          boxWidth: 9,
+          color: legendColor,
+          usePointStyle: true,
+        },
+      },
+    },
+  }
+}
+
+// 👉 Bubble Chart Config
+export const getBubbleChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        min: 0,
+        max: 140,
+        grid: {
+          borderColor,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: {
+          stepSize: 10,
+          color: labelColor,
+        },
+      },
+      y: {
+        min: 0,
+        max: 400,
+        grid: {
+          borderColor,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: {
+          stepSize: 100,
+          color: labelColor,
+        },
+      },
+    },
+    plugins: {
+      legend: { display: false },
+    },
+  }
+}
+
+// 👉 Doughnut Chart Config
+export const getDoughnutChartConfig = () => {
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 500 },
+    cutout: 80,
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+  }
+}
+
+// 👉 Scatter Chart Config
+export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor, legendColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: { duration: 800 },
+    layout: {
+      padding: { top: -20 },
+    },
+    scales: {
+      x: {
+        min: 0,
+        max: 140,
+        grid: {
+          borderColor,
+          drawTicks: false,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: {
+          stepSize: 10,
+          color: labelColor,
+        },
+      },
+      y: {
+        min: 0,
+        max: 400,
+        grid: {
+          borderColor,
+          drawTicks: false,
+          drawBorder: false,
+          color: borderColor,
+        },
+        ticks: {
+          stepSize: 100,
+          color: labelColor,
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        align: 'start',
+        position: 'top',
+        labels: {
+          padding: 25,
+          boxWidth: 9,
+          color: legendColor,
+          usePointStyle: true,
+        },
+      },
+    },
+  }
+}
+
+// 👉 Line Area Chart Config
+export const getLineAreaChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
+  const { borderColor, labelColor, legendColor } = colorVariables(themeColors)
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: { top: -20 },
+    },
+    scales: {
+      x: {
+        grid: {
+          borderColor,
+          color: 'transparent',
+        },
+        ticks: { color: labelColor },
+      },
+      y: {
+        min: 0,
+        max: 400,
+        grid: {
+          borderColor,
+          color: 'transparent',
+        },
+        ticks: {
+          stepSize: 100,
+          color: labelColor,
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        align: 'start',
+        position: 'top',
+        labels: {
+          padding: 25,
+          boxWidth: 9,
+          color: legendColor,
+          usePointStyle: true,
+        },
+      },
+    },
+  }
+}
+// !SECTION

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/BarChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { Bar } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default defineComponent({
+  name: 'BarChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'bar-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'bar'>[]>,
+      default: () => ([]),
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(Bar), {
+        data: props.chartData,
+        options: props.chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+      })
+  },
+})

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/BubbleChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { Chart as ChartJS, Legend, LinearScale, PointElement, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { Bubble } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
+
+export default defineComponent({
+  name: 'BubbleChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'bubble-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'bubble'>[]>,
+      default: () => [],
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(Bubble), {
+        data: props.chartData,
+        options: props.chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+      })
+  },
+})

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/DoughnutChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { ArcElement, CategoryScale, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { Doughnut } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
+
+export default defineComponent({
+  name: 'DoughnutChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'doughnut-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'doughnut'>[]>,
+      default: () => [],
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(Doughnut), {
+        data: props.chartData,
+        options: props.chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+      })
+  },
+})

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/LineChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { CategoryScale, Chart as ChartJS, Legend, LineElement, LinearScale, PointElement, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { Line } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale)
+
+export default defineComponent({
+  name: 'LineChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'line-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'line'>[]>,
+      default: () => [],
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(Line), {
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+        options: props.chartOptions,
+        data: props.chartData,
+      })
+  },
+})

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/PolarAreaChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { ArcElement, Chart as ChartJS, Legend, RadialLinearScale, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { PolarArea } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale)
+
+export default defineComponent({
+  name: 'PolarAreaChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'line-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'polarArea'>[]>,
+      default: () => [],
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(PolarArea), {
+        data: props.chartData,
+        options: props.chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+      })
+  },
+})

package/dist/templates/vuexy-portal/src/@core/libs/chartjs/components/RadarChart.ts

@@ -0,0 +1,58 @@
+import type { PluginOptionsByType } from 'chart.js'
+import { Chart as ChartJS, Filler, Legend, LineElement, PointElement, RadialLinearScale, Title, Tooltip } from 'chart.js'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { Radar } from 'vue-chartjs'
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, RadialLinearScale, LineElement, Filler)
+
+export default defineComponent({
+  name: 'RadarChart',
+  props: {
+    chartId: {
+      type: String,
+      default: 'radar-chart',
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => ({}),
+    },
+    plugins: {
+      type: Array as PropType<PluginOptionsByType<'radar'>[]>,
+      default: () => [],
+    },
+    chartData: {
+      type: Object,
+      default: () => ({}),
+    },
+    chartOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    return () =>
+      h(h(Radar), {
+        data: props.chartData,
+        options: props.chartOptions,
+        chartId: props.chartId,
+        width: props.width,
+        height: props.height,
+        cssClasses: props.cssClasses,
+        styles: props.styles,
+        plugins: props.plugins,
+      })
+  },
+})