first

src/data/dashboards/apex-demo/demo6-area.ts

@@ -0,0 +1,120 @@
+export function useDemo6Area() {
+  const themeColors = useThemeColors()
+  const series = shallowRef<any[]>([])
+
+  watchEffect(async () => {
+    const { dataSeries } = await import('./data/dataSeries')
+
+    let ts1 = 1388534400000
+    let ts2 = 1388620800000
+    let ts3 = 1389052800000
+
+    const dataSet: any[] = [[], [], []]
+
+    for (let i = 0; i < 12; i++) {
+      ts1 = ts1 + 86400000
+      const innerArr: any[] = [ts1, dataSeries[2][i].value]
+      dataSet[0].push(innerArr)
+    }
+    for (let i = 0; i < 18; i++) {
+      ts2 = ts2 + 86400000
+      const innerArr: any[] = [ts2, dataSeries[1][i].value]
+      dataSet[1].push(innerArr)
+    }
+    for (let i = 0; i < 12; i++) {
+      ts3 = ts3 + 86400000
+      const innerArr: any[] = [ts3, dataSeries[0][i].value]
+      dataSet[2].push(innerArr)
+    }
+
+    series.value = [
+      {
+        name: 'Desktops',
+        data: dataSet[0],
+      },
+      {
+        name: 'Phones',
+        data: dataSet[1],
+      },
+      {
+        name: 'Tablets',
+        data: dataSet[2],
+      },
+    ]
+  })
+
+  return reactive({
+    type: 'area',
+    height: 280,
+    series,
+    options: {
+      chart: {
+        stacked: false,
+        zoom: {
+          enabled: false,
+        },
+        toolbar: {
+          show: false,
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      markers: {
+        size: 0,
+      },
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shadeIntensity: 1,
+          inverseColors: false,
+          opacityFrom: 0.45,
+          opacityTo: 0.05,
+          stops: [20, 100, 100, 100],
+        },
+      },
+      yaxis: {
+        labels: {
+          style: {
+            colors: '#8e8da4',
+          },
+          offsetX: 0,
+          formatter: toFixed(2, 1000000),
+        },
+        axisBorder: {
+          show: false,
+        },
+        axisTicks: {
+          show: false,
+        },
+      },
+      xaxis: {
+        type: 'datetime',
+        tickAmount: 8,
+        min: new Date('01/01/2014').getTime(),
+        max: new Date('01/20/2014').getTime(),
+        labels: {
+          rotate: -15,
+          rotateAlways: true,
+          formatter: toDate('DD MMM YYYY'),
+        },
+      },
+      colors: [themeColors.purple, themeColors.info, themeColors.lime],
+      title: {
+        text: 'Multiple Areas',
+        align: 'left',
+      },
+      tooltip: {
+        shared: true,
+      },
+      stroke: {
+        width: [2, 2, 2],
+      },
+      legend: {
+        position: 'top',
+        horizontalAlign: 'center',
+        // offsetX: -10
+      },
+    },
+  })
+}