first

src/data/dashboards/banking-v2/expensesAreaChart.ts

@@ -0,0 +1,112 @@
+function generateDayWiseTimeSeries(s: number, count: number) {
+  const values = [
+    [4, 3, 10, 9, 29, 19, 25, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
+    [2, 3, 8, 7, 22, 16, 23, 7, 11, 5, 12, 5, 10, 4, 15, 2, 6, 2],
+  ]
+  let i = 0
+  const series = []
+  let x = new Date('11 Nov 2020').getTime()
+  while (i < count) {
+    series.push([x, values[s][i]])
+    x += 86400000
+    i++
+  }
+  return series
+}
+
+export function useExpensesAreaChart() {
+  const themeColors = useThemeColors()
+  const expensesOptions = {
+    chart: {
+      type: 'area',
+      height: 220,
+      foreColor: '#999',
+      stacked: true,
+      toolbar: {
+        show: false,
+      },
+      dropShadow: {
+        enabled: true,
+        enabledSeries: [0],
+        top: -2,
+        left: 2,
+        blur: 5,
+        opacity: 0.06,
+      },
+    },
+    colors: [themeColors.lime, themeColors.purple, themeColors.orange],
+    stroke: {
+      curve: 'smooth',
+      width: 3,
+    },
+    title: {
+      text: '',
+      align: 'left',
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    series: [
+      {
+        name: 'Cash Expenses',
+        data: generateDayWiseTimeSeries(0, 18),
+      },
+      {
+        name: 'Card Expenses',
+        data: generateDayWiseTimeSeries(1, 18),
+      },
+    ],
+    markers: {
+      size: 0,
+      strokeColor: '#fff',
+      strokeWidth: 3,
+      strokeOpacity: 1,
+      fillOpacity: 1,
+      hover: {
+        size: 6,
+      },
+    },
+    xaxis: {
+      type: 'datetime',
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    yaxis: {
+      labels: {
+        offsetX: 0,
+        offsetY: -5,
+      },
+      tooltip: {
+        enabled: true,
+      },
+    },
+    grid: {
+      show: false,
+      padding: {
+        left: -5,
+        right: 5,
+      },
+    },
+    tooltip: {
+      x: {
+        format: 'dd MMM yyyy',
+      },
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'left',
+    },
+    fill: {
+      type: 'solid',
+      fillOpacity: 0.7,
+    },
+  }
+
+  return {
+    expensesOptions,
+  }
+}