TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/js/views/charts/apex-chart/ApexChartAreaChart.vue Normal file
View File

@@ -0,0 +1,73 @@
<script setup>
import { useTheme } from 'vuetify'
import { getAreaChartSplineConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getAreaChartSplineConfig(vuetifyTheme.current.value))
const series = [
{
name: 'Visits',
data: [
100,
120,
90,
170,
130,
160,
140,
240,
220,
180,
270,
280,
375,
],
},
{
name: 'Clicks',
data: [
60,
80,
70,
110,
80,
100,
90,
180,
160,
140,
200,
220,
275,
],
},
{
name: 'Sales',
data: [
20,
40,
30,
70,
40,
60,
50,
140,
120,
100,
140,
180,
220,
],
},
]
</script>
<template>
<VueApexCharts
type="area"
height="400"
:options="chartConfig"
:series="series"
/>
</template>

36
resources/js/views/charts/apex-chart/ApexChartBalance.vue Normal file
View File

@@ -0,0 +1,36 @@
<script setup>
import { useTheme } from 'vuetify'
import { getLineChartSimpleConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const balanceChartConfig = computed(() => getLineChartSimpleConfig(vuetifyTheme.current.value))
const series = [{
data: [
280,
200,
220,
180,
270,
250,
70,
90,
200,
150,
160,
100,
150,
100,
50,
],
}]
</script>
<template>
<VueApexCharts
type="line"
height="400"
:options="balanceChartConfig"
:series="series"
/>
</template>

85
resources/js/views/charts/apex-chart/ApexChartDailySalesStates.vue Normal file
View File

@@ -0,0 +1,85 @@
<script setup>
import { useTheme } from 'vuetify'
import { getHeatMapChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getHeatMapChartConfig(vuetifyTheme.current.value))
const generateDataHeat = (count, yrange) => {
let i = 0
const series = []
while (i < count) {
const x = `w${ (i + 1).toString() }`
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
series.push({
x,
y,
})
i += 1
}
return series
}
const series = [
{
name: 'SUN',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
{
name: 'MON',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
{
name: 'TUE',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
{
name: 'WED',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
{
name: 'THU',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
{
name: 'FRI',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
{
name: 'SAT',
data: generateDataHeat(24, {
min: 0,
max: 60,
}),
},
]
</script>
<template>
<VueApexCharts
type="heatmap"
height="350"
:options="chartConfig"
:series="series"
/>
</template>

47
resources/js/views/charts/apex-chart/ApexChartDataScience.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup>
import { useTheme } from 'vuetify'
import { getColumnChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getColumnChartConfig(vuetifyTheme.current.value))
const series = [
{
name: 'Apple',
data: [
90,
120,
55,
100,
80,
125,
175,
70,
88,
],
},
{
name: 'Samsung',
data: [
85,
100,
30,
40,
95,
90,
30,
110,
62,
],
},
]
</script>
<template>
<VueApexCharts
type="bar"
height="400"
:options="chartConfig"
:series="series"
/>
</template>

23
resources/js/views/charts/apex-chart/ApexChartExpenseRatio.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
import { useTheme } from 'vuetify'
import { getDonutChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const expenseRationChartConfig = computed(() => getDonutChartConfig(vuetifyTheme.current.value))
const series = [
85,
16,
50,
50,
]
</script>
<template>
<VueApexCharts
type="donut"
height="410"
:options="expenseRationChartConfig"
:series="series"
/>
</template>

28
resources/js/views/charts/apex-chart/ApexChartHorizontalBar.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup>
import { useTheme } from 'vuetify'
import { getBarChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const horizontalBarChartConfig = computed(() => getBarChartConfig(vuetifyTheme.current.value))
const series = [{
data: [
700,
350,
480,
600,
210,
550,
150,
],
}]
</script>
<template>
<VueApexCharts
type="bar"
height="400"
:options="horizontalBarChartConfig"
:series="series"
/>
</template>

46
resources/js/views/charts/apex-chart/ApexChartMobileComparison.vue Normal file
View File

@@ -0,0 +1,46 @@
<script setup>
import { useTheme } from 'vuetify'
import { getRadarChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const series = [
{
name: 'iPhone 12',
data: [
41,
64,
81,
60,
42,
42,
33,
23,
],
},
{
name: 'Samsung s20',
data: [
65,
46,
42,
25,
58,
63,
76,
43,
],
},
]
const chartConfig = computed(() => getRadarChartConfig(vuetifyTheme.current.value))
</script>
<template>
<VueApexCharts
type="radar"
height="400"
:options="chartConfig"
:series="series"
/>
</template>

178
resources/js/views/charts/apex-chart/ApexChartNewTechnologiesData.vue Normal file
View File

@@ -0,0 +1,178 @@
<script setup>
import { useTheme } from 'vuetify'
import { getScatterChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const scatterChartConfig = computed(() => getScatterChartConfig(vuetifyTheme.current.value))
const series = [
{
name: 'Angular',
data: [
{
x: 5.4,
y: 170,
},
{
x: 5.4,
y: 100,
},
{
x: 6.3,
y: 170,
},
{
x: 5.7,
y: 140,
},
{
x: 5.9,
y: 130,
},
{
x: 7,
y: 150,
},
{
x: 8,
y: 120,
},
{
x: 9,
y: 170,
},
{
x: 10,
y: 190,
},
{
x: 11,
y: 220,
},
{
x: 12,
y: 170,
},
{
x: 13,
y: 230,
},
],
},
{
name: 'Vue',
data: [
{
x: 14,
y: 220,
},
{
x: 15,
y: 280,
},
{
x: 16,
y: 230,
},
{
x: 18,
y: 320,
},
{
x: 17.5,
y: 280,
},
{
x: 19,
y: 250,
},
{
x: 20,
y: 350,
},
{
x: 20.5,
y: 320,
},
{
x: 20,
y: 320,
},
{
x: 19,
y: 280,
},
{
x: 17,
y: 280,
},
{
x: 22,
y: 300,
},
{
x: 18,
y: 120,
},
],
},
{
name: 'React',
data: [
{
x: 14,
y: 290,
},
{
x: 13,
y: 190,
},
{
x: 20,
y: 220,
},
{
x: 21,
y: 350,
},
{
x: 21.5,
y: 290,
},
{
x: 22,
y: 220,
},
{
x: 23,
y: 140,
},
{
x: 19,
y: 400,
},
{
x: 20,
y: 200,
},
{
x: 22,
y: 90,
},
{
x: 20,
y: 120,
},
],
},
]
</script>
<template>
<VueApexCharts
type="scatter"
height="400"
:options="scatterChartConfig"
:series="series"
/>
</template>

22
resources/js/views/charts/apex-chart/ApexChartStatistics.vue Normal file
View File

@@ -0,0 +1,22 @@
<script setup>
import { useTheme } from 'vuetify'
import { getRadialBarChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const statisticsChartConfig = computed(() => getRadialBarChartConfig(vuetifyTheme.current.value))
const series = [
80,
50,
35,
]
</script>
<template>
<VueApexCharts
type="radialBar"
height="400"
:options="statisticsChartConfig"
:series="series"
/>
</template>

147
resources/js/views/charts/apex-chart/ApexChartStocksPrices.vue Normal file
View File

@@ -0,0 +1,147 @@
<script setup>
import { useTheme } from 'vuetify'
import { getCandlestickChartConfig } from '@core/libs/apex-chart/apexCharConfig'
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getCandlestickChartConfig(vuetifyTheme.current.value))
const series = [{
data: [
{
x: `7/12/${ new Date().getFullYear() }`,
y: [
150,
170,
50,
100,
],
},
{
x: `8/12/${ new Date().getFullYear() }`,
y: [
200,
400,
170,
330,
],
},
{
x: `9/12/${ new Date().getFullYear() }`,
y: [
330,
340,
250,
280,
],
},
{
x: `10/12/${ new Date().getFullYear() }`,
y: [
300,
330,
200,
320,
],
},
{
x: `11/12/${ new Date().getFullYear() }`,
y: [
320,
450,
280,
350,
],
},
{
x: `12/12/${ new Date().getFullYear() }`,
y: [
300,
350,
80,
250,
],
},
{
x: `13/12/${ new Date().getFullYear() }`,
y: [
200,
330,
170,
300,
],
},
{
x: `14/12/${ new Date().getFullYear() }`,
y: [
200,
220,
70,
130,
],
},
{
x: `15/12/${ new Date().getFullYear() }`,
y: [
220,
270,
180,
250,
],
},
{
x: `16/12/${ new Date().getFullYear() }`,
y: [
200,
250,
80,
100,
],
},
{
x: `17/12/${ new Date().getFullYear() }`,
y: [
150,
170,
50,
120,
],
},
{
x: `18/12/${ new Date().getFullYear() }`,
y: [
110,
450,
10,
420,
],
},
{
x: `19/12/${ new Date().getFullYear() }`,
y: [
400,
480,
300,
320,
],
},
{
x: `20/12/${ new Date().getFullYear() }`,
y: [
380,
480,
350,
450,
],
},
],
}]
</script>
<template>
<VueApexCharts
type="candlestick"
height="385"
:options="chartConfig"
:series="series"
/>
</template>

65
resources/js/views/charts/chartjs/ChartJsBarChart.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup>
import { useTheme } from 'vuetify'
import BarChart from '@/@core/libs/chartjs/components/BarChart'
import { getLatestBarChartConfig } from '@core/libs/chartjs/chartjsConfig'
const props = defineProps({
colors: {
type: null,
required: true,
},
})
const vuetifyTheme = useTheme()
const chartOptions = computed(() => getLatestBarChartConfig(vuetifyTheme.current.value))
const data = {
labels: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
],
datasets: [{
maxBarThickness: 15,
backgroundColor: props.colors.barChartYellow,
borderColor: 'transparent',
borderRadius: {
topRight: 15,
topLeft: 15,
},
data: [
275,
90,
190,
205,
125,
85,
55,
87,
127,
150,
230,
280,
190,
],
}],
}
</script>
<template>
<BarChart
:height="400"
:chart-data="data"
:chart-options="chartOptions"
/>
</template>

173
resources/js/views/charts/chartjs/ChartJsBubbleChart.vue Normal file
View File

@@ -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>

61
resources/js/views/charts/chartjs/ChartJsHorizontalBarChart.vue Normal file
View File

@@ -0,0 +1,61 @@
<script setup>
import { useTheme } from 'vuetify'
import { getHorizontalBarChartConfig } from '@core/libs/chartjs/chartjsConfig'
import BarChart from '@core/libs/chartjs/components/BarChart'
const props = defineProps({
colors: {
type: null,
required: true,
},
})
const vuetifyTheme = useTheme()
const chartOptions = computed(() => getHorizontalBarChartConfig(vuetifyTheme.current.value))
const data = {
labels: [
'MON',
'TUE',
'WED ',
'THU',
'FRI',
],
datasets: [
{
maxBarThickness: 15,
label: 'Market Data',
backgroundColor: props.colors.warningShade,
borderColor: 'transparent',
data: [
710,
350,
580,
460,
120,
],
},
{
maxBarThickness: 15,
backgroundColor: props.colors.horizontalBarInfo,
label: 'Personal Data',
borderColor: 'transparent',
data: [
430,
590,
510,
240,
360,
],
},
],
}
</script>
<template>
<BarChart
:height="375"
:chart-data="data"
:chart-options="chartOptions"
/>
</template>

139
resources/js/views/charts/chartjs/ChartJsLineAreaChart.vue Normal file
View File

@@ -0,0 +1,139 @@
<script setup>
import { useTheme } from 'vuetify'
import { getLineAreaChartConfig } from '@core/libs/chartjs/chartjsConfig'
import LineChart from '@core/libs/chartjs/components/LineChart'
const props = defineProps({
colors: {
type: null,
required: true,
},
})
const vuetifyTheme = useTheme()
const data = {
labels: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
'20/12',
'',
],
datasets: [
{
fill: true,
tension: 0,
label: 'Africa',
pointRadius: 0.5,
pointHoverRadius: 5,
pointStyle: 'circle',
backgroundColor: props.colors.areaChartBlue,
pointHoverBorderWidth: 5,
borderColor: 'transparent',
pointHoverBorderColor: props.colors.white,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: props.colors.areaChartBlue,
data: [
40,
55,
45,
75,
65,
55,
70,
60,
100,
98,
90,
120,
125,
140,
155,
],
},
{
fill: true,
tension: 0,
label: 'Asia',
pointRadius: 0.5,
pointHoverRadius: 5,
pointStyle: 'circle',
pointHoverBorderWidth: 5,
borderColor: 'transparent',
backgroundColor: props.colors.areaChartBlueLight,
pointHoverBorderColor: props.colors.white,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: props.colors.areaChartBlueLight,
data: [
70,
85,
75,
150,
100,
140,
110,
105,
160,
150,
125,
190,
200,
240,
275,
],
},
{
fill: true,
tension: 0,
label: 'Europe',
pointRadius: 0.5,
pointHoverRadius: 5,
pointStyle: 'circle',
pointHoverBorderWidth: 5,
borderColor: 'transparent',
backgroundColor: props.colors.areaChartGreyLight,
pointHoverBorderColor: props.colors.white,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: props.colors.areaChartGreyLight,
data: [
240,
195,
160,
215,
185,
215,
185,
200,
250,
210,
195,
250,
235,
300,
315,
],
},
],
}
const chartConfig = computed(() => getLineAreaChartConfig(vuetifyTheme.current.value))
</script>
<template>
<LineChart
:chart-options="chartConfig"
:height="400"
:chart-data="data"
/>
</template>

139
resources/js/views/charts/chartjs/ChartJsLineChart.vue Normal file
View File

@@ -0,0 +1,139 @@
<script setup>
import { useTheme } from 'vuetify'
import { getLineChartConfig } from '@core/libs/chartjs/chartjsConfig'
import LineChart from '@core/libs/chartjs/components/LineChart'
const props = defineProps({
colors: {
type: null,
required: true,
},
})
const vuetifyTheme = useTheme()
const data = {
labels: [
0,
10,
20,
30,
40,
50,
60,
70,
80,
90,
100,
110,
120,
130,
140,
],
datasets: [
{
fill: false,
tension: 0.5,
pointRadius: 1,
label: 'Europe',
pointHoverRadius: 5,
pointStyle: 'circle',
borderColor: props.colors.primary,
backgroundColor: props.colors.primary,
pointHoverBorderWidth: 5,
pointHoverBorderColor: props.colors.white,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: props.colors.primary,
data: [
80,
150,
180,
270,
210,
160,
160,
202,
265,
210,
270,
255,
290,
360,
375,
],
},
{
fill: false,
tension: 0.5,
label: 'Asia',
pointRadius: 1,
pointHoverRadius: 5,
pointStyle: 'circle',
borderColor: props.colors.warningShade,
backgroundColor: props.colors.warningShade,
pointHoverBorderWidth: 5,
pointHoverBorderColor: props.colors.white,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: props.colors.warningShade,
data: [
80,
125,
105,
130,
215,
195,
140,
160,
230,
300,
220,
170,
210,
200,
280,
],
},
{
fill: false,
tension: 0.5,
pointRadius: 1,
label: 'Africa',
pointHoverRadius: 5,
pointStyle: 'circle',
borderColor: props.colors.yellow,
backgroundColor: props.colors.yellow,
pointHoverBorderWidth: 5,
pointHoverBorderColor: props.colors.white,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: props.colors.yellow,
data: [
80,
99,
82,
90,
115,
115,
74,
75,
130,
155,
125,
90,
140,
130,
180,
],
},
],
}
const chartConfig = computed(() => getLineChartConfig(vuetifyTheme.current.value))
</script>
<template>
<LineChart
:chart-options="chartConfig"
:height="400"
:chart-data="data"
/>
</template>

54
resources/js/views/charts/chartjs/ChartJsPolarAreaChart.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup>
import { useTheme } from 'vuetify'
import { getPolarChartConfig } from '@core/libs/chartjs/chartjsConfig'
import PolarAreaChart from '@core/libs/chartjs/components/PolarAreaChart'
const props = defineProps({
colors: {
type: null,
required: true,
},
})
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getPolarChartConfig(vuetifyTheme.current.value))
const data = {
labels: [
'Africa',
'Asia',
'Europe',
'America',
'Antarctica',
'Australia',
],
datasets: [{
borderWidth: 0,
label: 'Population (millions)',
data: [
19,
17.5,
15,
13.5,
11,
9,
],
backgroundColor: [
props.colors.primary,
props.colors.yellow,
props.colors.polarChartWarning,
props.colors.polarChartInfo,
props.colors.polarChartGrey,
props.colors.polarChartGreen,
],
}],
}
</script>
<template>
<PolarAreaChart
:height="400"
:chart-data="data"
:chart-options="chartConfig"
/>
</template>

61
resources/js/views/charts/chartjs/ChartJsRadarChart.vue Normal file
View File

@@ -0,0 +1,61 @@
<script setup>
import { useTheme } from 'vuetify'
import { getRadarChartConfig } from '@core/libs/chartjs/chartjsConfig'
import RadarChart from '@core/libs/chartjs/components/RadarChart'
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getRadarChartConfig(vuetifyTheme.current.value))
const chartData = {
labels: [
'STA',
'STR',
'AGI',
'VIT',
'CHA',
'INT',
],
datasets: [
{
fill: true,
label: 'Donté Panlin',
borderColor: 'transparent',
backgroundColor: 'rgba(255,161,161, 0.9)',
data: [
25,
59,
90,
81,
60,
82,
],
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
},
{
fill: true,
label: 'Mireska Sunbreeze',
borderColor: 'transparent',
backgroundColor: 'rgba(155,136,250, 0.9)',
data: [
40,
100,
40,
90,
40,
90,
],
pointBorderColor: 'transparent',
pointBackgroundColor: 'transparent',
},
],
}
</script>
<template>
<RadarChart
:height="400"
:chart-data="chartData"
:chart-options="chartConfig"
/>
</template>

238
resources/js/views/charts/chartjs/ChartJsScatterChart.vue Normal file
View File

@@ -0,0 +1,238 @@
<script setup>
import { useTheme } from 'vuetify'
import { getScatterChartConfig } from '@core/libs/chartjs/chartjsConfig'
import ScatterChart from '@core/libs/chartjs/components/ScatterChart'
const props = defineProps({
colors: {
type: null,
required: true,
},
})
const vuetifyTheme = useTheme()
const chartConfig = computed(() => getScatterChartConfig(vuetifyTheme.current.value))
const data = {
datasets: [
{
pointRadius: 5,
label: 'iPhone',
pointBorderWidth: 2,
backgroundColor: props.colors.primary,
pointHoverBorderWidth: 2,
borderColor: 'transparent',
data: [
{
x: 72,
y: 225,
},
{
x: 81,
y: 270,
},
{
x: 90,
y: 230,
},
{
x: 103,
y: 305,
},
{
x: 103,
y: 245,
},
{
x: 108,
y: 275,
},
{
x: 110,
y: 290,
},
{
x: 111,
y: 315,
},
{
x: 109,
y: 350,
},
{
x: 116,
y: 340,
},
{
x: 113,
y: 260,
},
{
x: 117,
y: 275,
},
{
x: 117,
y: 295,
},
{
x: 126,
y: 280,
},
{
x: 127,
y: 340,
},
{
x: 133,
y: 330,
},
],
},
{
pointRadius: 5,
pointBorderWidth: 2,
label: 'Samsung Note',
backgroundColor: props.colors.scatterChartWarning,
pointHoverBorderWidth: 2,
borderColor: 'transparent',
data: [
{
x: 13,
y: 95,
},
{
x: 22,
y: 105,
},
{
x: 17,
y: 115,
},
{
x: 19,
y: 130,
},
{
x: 21,
y: 125,
},
{
x: 35,
y: 125,
},
{
x: 13,
y: 155,
},
{
x: 21,
y: 165,
},
{
x: 25,
y: 155,
},
{
x: 18,
y: 190,
},
{
x: 26,
y: 180,
},
{
x: 43,
y: 180,
},
{
x: 53,
y: 202,
},
{
x: 61,
y: 165,
},
{
x: 67,
y: 225,
},
],
},
{
pointRadius: 5,
label: 'OnePlus',
pointBorderWidth: 2,
backgroundColor: props.colors.scatterChartGreen,
pointHoverBorderWidth: 2,
borderColor: 'transparent',
data: [
{
x: 70,
y: 195,
},
{
x: 72,
y: 270,
},
{
x: 98,
y: 255,
},
{
x: 100,
y: 215,
},
{
x: 87,
y: 240,
},
{
x: 94,
y: 280,
},
{
x: 99,
y: 300,
},
{
x: 102,
y: 290,
},
{
x: 110,
y: 275,
},
{
x: 111,
y: 250,
},
{
x: 94,
y: 280,
},
{
x: 92,
y: 340,
},
{
x: 100,
y: 335,
},
{
x: 108,
y: 330,
},
],
},
],
}
</script>
<template>
<ScatterChart
:height="380"
:chart-data="data"
:chart-options="chartConfig"
/>
</template>

1
resources/js/views/charts/chartjs/types.js Normal file
View File

@@ -0,0 +1 @@
export {}