first

src/data/dashboards/analytics/goalChart.ts

@@ -0,0 +1,57 @@
+export function useGoalCharts() {
+  const themeColors = useThemeColors()
+  const gaugeOptions = shallowRef({
+    series: [57, 86],
+    chart: {
+      height: 220,
+      type: 'radialBar',
+      offsetY: -10,
+    },
+    colors: [themeColors.purple, themeColors.lime],
+    plotOptions: {
+      radialBar: {
+        startAngle: -135,
+        endAngle: 135,
+        inverseOrder: true,
+        dataLabels: {
+          show: true,
+          name: {
+            show: true,
+            fontSize: '14px',
+            fontWeight: 500,
+            offsetY: -10,
+          },
+          value: {
+            show: true,
+            fontWeight: 600,
+            color: themeColors.grey,
+            fontSize: '16px',
+            offsetY: -5,
+          },
+          total: {
+            show: true,
+            fontSize: '14px',
+            fontWeight: 500,
+            color: themeColors.grey,
+          },
+        },
+        hollow: {
+          margin: 15,
+          size: '75%',
+        },
+        track: {
+          strokeWidth: '100%',
+        },
+      },
+    },
+
+    stroke: {
+      lineCap: 'round',
+    },
+    labels: ['Efficiency', 'Productivity'],
+  })
+
+  return {
+    gaugeOptions,
+  }
+}

src/data/dashboards/analytics/growthRadialChart.ts

@@ -0,0 +1,44 @@
+export function useGrowthRadialChart() {
+  const themeColors = useThemeColors()
+
+  const optionsCircle = shallowRef({
+    series: [65],
+    chart: {
+      height: 160,
+      type: 'radialBar',
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: [themeColors.purple],
+    plotOptions: {
+      radialBar: {
+        hollow: {
+          size: '75%',
+        },
+        dataLabels: {
+          show: true,
+          name: {
+            show: true,
+            fontSize: '14px',
+            fontWeight: 500,
+            offsetY: -10,
+            color: themeColors.grey,
+          },
+          value: {
+            show: true,
+            fontWeight: 600,
+            color: themeColors.purple,
+            fontSize: '16px',
+            offsetY: -5,
+          },
+        },
+      },
+    },
+    labels: ['Growth'],
+  })
+
+  return {
+    optionsCircle,
+  }
+}

src/data/dashboards/analytics/profitBarChart.ts

@@ -0,0 +1,79 @@
+export function useProfitBarChart() {
+  const themeColors = useThemeColors()
+
+  const series = [
+    {
+      name: 'Net Profit',
+      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+    },
+    {
+      name: 'Revenue',
+      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+    },
+    {
+      name: 'Free Cash Flow',
+      data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+    },
+  ].map((s) => {
+    return {
+      name: s.name,
+      data: s.data.map((d) => {
+        return d - 70
+      }),
+    }
+  })
+
+  const barOptions = shallowRef({
+    chart: {
+      height: 250,
+      type: 'bar',
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: [themeColors.purple, themeColors.purple, themeColors.lime],
+    legend: {
+      position: 'top',
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        endingShape: 'rounded',
+        columnWidth: '55%',
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    series: series,
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+    },
+    yaxis: {
+      labels: {
+        formatter: function (val: string) {
+          return val + 70
+        },
+      },
+    },
+    fill: {
+      opacity: 1,
+    },
+    tooltip: {
+      y: {
+        formatter: function (val: string) {
+          return val + 70
+        },
+      },
+    },
+  })
+
+  return {
+    barOptions,
+  }
+}

src/data/dashboards/analytics/revenueChart.ts

@@ -0,0 +1,50 @@
+export function useRevenueChart() {
+  const themeColors = useThemeColors()
+
+  const revenueOptions = shallowRef({
+    series: [
+      {
+        name: 'Revenue',
+        data: [10835, 40214, 36257, 51411, 45697, 61221, 65295, 91512, 75648],
+      },
+    ],
+    chart: {
+      height: 250,
+      type: 'line',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: [themeColors.lime],
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      width: [2, 2, 2],
+      curve: 'smooth',
+    },
+    grid: {
+      row: {
+        colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
+        opacity: 0.5,
+      },
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+    },
+    tooltip: {
+      y: {
+        formatter: function (val: string) {
+          return '$' + val
+        },
+      },
+    },
+  })
+
+  return {
+    revenueOptions,
+  }
+}