first commit

2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
--- a/resources/js/views/charts/chartjs/ChartJsBubbleChart.vue
+++ b/resources/js/views/charts/chartjs/ChartJsBubbleChart.vue
@@ -0,0 +1,173 @@
+<script setup>
+import { useTheme } from 'vuetify'
+import { getBubbleChartConfig } from '@core/libs/chartjs/chartjsConfig'
+import BubbleChart from '@core/libs/chartjs/components/BubbleChart'
+
+const props = defineProps({
+  colors: {
+    type: null,
+    required: true,
+  },
+})
+
+const vuetifyTheme = useTheme()
+const chartConfig = computed(() => getBubbleChartConfig(vuetifyTheme.current.value))
+
+const data = {
+  animation: { duration: 10000 },
+  datasets: [
+    {
+      label: 'Dataset 1',
+      borderColor: props.colors.primary,
+      backgroundColor: props.colors.primary,
+      data: [
+        {
+          x: 20,
+          y: 74,
+          r: 10,
+        },
+        {
+          x: 10,
+          y: 110,
+          r: 5,
+        },
+        {
+          x: 30,
+          y: 165,
+          r: 7,
+        },
+        {
+          x: 40,
+          y: 200,
+          r: 20,
+        },
+        {
+          x: 90,
+          y: 185,
+          r: 7,
+        },
+        {
+          x: 50,
+          y: 240,
+          r: 7,
+        },
+        {
+          x: 60,
+          y: 275,
+          r: 10,
+        },
+        {
+          x: 70,
+          y: 305,
+          r: 5,
+        },
+        {
+          x: 80,
+          y: 325,
+          r: 4,
+        },
+        {
+          x: 100,
+          y: 310,
+          r: 5,
+        },
+        {
+          x: 110,
+          y: 240,
+          r: 5,
+        },
+        {
+          x: 120,
+          y: 270,
+          r: 7,
+        },
+        {
+          x: 130,
+          y: 300,
+          r: 6,
+        },
+      ],
+    },
+    {
+      label: 'Dataset 2',
+      borderColor: props.colors.yellow,
+      backgroundColor: props.colors.yellow,
+      data: [
+        {
+          x: 30,
+          y: 72,
+          r: 5,
+        },
+        {
+          x: 40,
+          y: 110,
+          r: 7,
+        },
+        {
+          x: 20,
+          y: 135,
+          r: 6,
+        },
+        {
+          x: 10,
+          y: 160,
+          r: 12,
+        },
+        {
+          x: 50,
+          y: 285,
+          r: 5,
+        },
+        {
+          x: 60,
+          y: 235,
+          r: 5,
+        },
+        {
+          x: 70,
+          y: 275,
+          r: 7,
+        },
+        {
+          x: 80,
+          y: 290,
+          r: 4,
+        },
+        {
+          x: 90,
+          y: 250,
+          r: 10,
+        },
+        {
+          x: 100,
+          y: 220,
+          r: 7,
+        },
+        {
+          x: 120,
+          y: 230,
+          r: 4,
+        },
+        {
+          x: 110,
+          y: 320,
+          r: 15,
+        },
+        {
+          x: 130,
+          y: 330,
+          r: 7,
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <BubbleChart
+    :height="400"
+    :chart-data="data"
+    :chart-options="chartConfig"
+  />
+</template>