moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:add some new future

Browse Source
This commit is contained in:
Moein Moradi
2025-09-15 15:46:14 +03:30
parent a768c64a68
commit 5b63f55fb7
7 changed files with 1157 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
resources/js/pages/dashboards/demo.vue
View File

@@ -1,126 +1,270 @@
<script setup>
import { onMounted, nextTick, ref } from 'vue'
import { onMounted, nextTick, ref, onUnmounted } from 'vue'
import { GridStack } from 'gridstack'
import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
import AnalysisCard from "@/components/AnalysisCard.vue";
import CostOverview from "@/components/CostOverview.vue";
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
import CostOverview from "@/components/CostOverview.vue";
import TasksTable from "./task.vue";
import ResourcesTable from "./resource.vue";
import GanttChart from './gantt.vue'
const ganttColumns = ref([])
const generateColumnsFromData = (data) => {
if (!data || data.length === 0) return []
const firstItem = data[0]
const columns = Object.keys(firstItem).map(key => {
const column = {
field: key,
headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
sortable: true,
filter: true,
flex: 1
}
const isEditMode = ref(false)
let grid = null
if (key === 'id') {
column.width = 80
column.flex = undefined
}
if (key === 'completed' && typeof firstItem[key] === 'boolean') {
column.width = 120
column.flex = undefined
column.cellRenderer = (params) => {
return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
const handleEditModeChange = (event) => {
if (event.detail) {
isEditMode.value = event.detail.isActive;
if (grid) {
if (isEditMode.value) {
grid.enableMove(true)
grid.enableResize(true)
} else {
grid.enableMove(false)
grid.enableResize(false)
}
}
if (key === 'userId') {
column.width = 100
column.flex = undefined
}
return column
})
return columns
}
}
const processAPIData = (response) => {
const data = response.todos || response
ganttColumns.value = generateColumnsFromData(data)
return data
const handleDeleteCard = (cardId) => {
const element = document.querySelector(`[data-card-id="${cardId}"]`)
if (element && grid) {
grid.removeWidget(element)
}
}
onMounted(async () => {
const grid = GridStack.init({
grid = GridStack.init({
column: 12,
cellHeight: '105',
float: true,
draggable: { handle: '.grid-stack-item-content' },
resizable: true,
maxRow: 20,
disableOneColumnMode: true,
animate: true,
})
grid.enableMove(false)
grid.enableResize(false)
window.addEventListener("crm-edit-mode-changed", handleEditModeChange)
await nextTick()
})
onUnmounted(() => {
window.removeEventListener("crm-edit-mode-changed", handleEditModeChange)
if (grid) {
grid.destroy(false)
}
setTimeout(() => {
if (gridContainer.value) {
grid = GridStack.init({
column: 12,
cellHeight: 50,
float: true,
draggable: {
handle: '.grid-stack-item-content'
},
resizable: {
handles: 'e, se, s, sw, w'
}
}, gridContainer.value)
}
}, 100)
})
</script>
<template>
<div class="grid-stack">
<div class="grid-stack-item" gs-w="4" gs-min-h="2" gs-max-h="2">
<div class="grid-stack-item-content">
<GeneratedLeadsCard :progress="32" />
<div class="grid-stack-container" :class="{ 'edit-mode-active': isEditMode }">
<VCol v-if="isEditMode" cols="12" class="pb-0">
<div class="edit-mode-banner">
<div class="banner-background">
<div class="banner-glow"></div>
<div class="banner-particles"></div>
</div>
<div class="banner-content">
<div class="banner-header">
<div class="banner-icon">
<VIcon icon="tabler-edit" size="24" class="edit-icon" />
<div class="icon-pulse"></div>
</div>
<div class="banner-text">
<h3 class="banner-title">✨ Edit Mode Enabled</h3>
<p class="banner-subtitle">
Customize your dashboard with drag & drop, resize, and delete features
</p>
</div>
</div>
</div>
<div class="banner-decorations">
<div class="decoration decoration-1"></div>
<div class="decoration decoration-2"></div>
<div class="decoration decoration-3"></div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
<div class="grid-stack-item-content">
<GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
</VCol>
<div class="grid-stack">
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-min-h="2" gs-max-h="2"
data-card-id="leads1">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move leads1">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete leads1" @click.stop="handleDeleteCard('leads1')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<GeneratedLeadsCard :progress="32" />
</div>
</div>
</div>
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
<div class="grid-stack-item-content">
<GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
data-card-id="leads2">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move leads2">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete leads2" @click.stop="handleDeleteCard('leads2')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
</div>
</div>
</div>
<div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
<div class="grid-stack-item-content">
<ProjectActivityBarChart />
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
data-card-id="leads3">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move leads3">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete leads3" @click.stop="handleDeleteCard('leads3')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
</div>
</div>
</div>
<div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
<div class="grid-stack-item-content">
<AnalysisCard />
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
data-card-id="project-activity">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move project-activity">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete project-activity" @click.stop="handleDeleteCard('project-activity')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<ProjectActivityBarChart />
</div>
</div>
</div>
<div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6">
<div class="grid-stack-item-content">
<AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
:data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
:enable-search="true" height="500px" />
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
data-card-id="analysis">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move analysis">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete analysis" @click.stop="handleDeleteCard('analysis')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<AnalysisCard />
</div>
</div>
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
data-card-id="tasks">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move tasks">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete tasks" @click.stop="handleDeleteCard('tasks')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<TasksTable />
</div>
</div>
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
data-card-id="analysis">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move analysis">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete analysis" @click.stop="handleDeleteCard('analysis')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<AnalysisCard />
</div>
</div>
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
data-card-id="cost-overview">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move cost-overview">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete cost-overview" @click.stop="handleDeleteCard('cost-overview')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<CostOverview />
</div>
</div>
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
data-card-id="resources">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move resources">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete resources" @click.stop="handleDeleteCard('resources')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<ResourcesTable />
</div>
</div>
<div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
data-card-id="gantt-chart">
<div class="grid-stack-item-content">
<div v-if="isEditMode" class="drag-handle" title="Move gantt-chart">
<VIcon size="18">mdi-drag-horizontal-variant</VIcon>
</div>
<VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
title="Delete gantt-chart" @click.stop="handleDeleteCard('gantt-chart')">
<VIcon icon="tabler-trash-x" size="16" class="me-1" />
Delete
</VBtn>
<GanttChart />
</div>
</div>
</div>
</div>
</template>
<style>
.grid-stack-item-content {
height: 100%;
display: flex;
flex-direction: column;
}
.grid-stack-item-content>* {
flex: 1;
margin-bottom: 3.2rem;
}
.grid-stack-item:has(AgGridTable) {
height: 100vh !important;
}
.grid-stack-item:has(AgGridTable) .grid-stack-item-content {
height: 100vh;
}
<style lang="scss">
@import "../../../styles/overview.scss";
</style>

217
resources/js/pages/dashboards/resource.vue Normal file
View File

@@ -0,0 +1,217 @@
<script setup>
import { ref } from 'vue'
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
const props = defineProps({
apiUrl: {
type: String,
default: 'http://megategra.com:8001/dev/data/resources'
},
tableId: {
type: String,
default: 'resources-table'
},
tableTitle: {
type: String,
default: 'Resource Management'
},
height: {
type: String,
default: '500px'
},
enableExport: {
type: Boolean,
default: true
},
enableEdit: {
type: Boolean,
default: true
},
enableDelete: {
type: Boolean,
default: true
},
enableSearch: {
type: Boolean,
default: true
}
})
const ganttColumns = ref([])
const generateColumnsFromData = (data, maxCellTextLength = 30) => {
if (!data || data.length === 0) return []
const firstItem = data[0]
const sampleSize = Math.min(10, data.length)
const columns = Object.keys(firstItem).map(key => {
const sampleValues = data.slice(0, sampleSize)
.map(item => item[key])
.filter(val => val !== undefined && val !== null)
const column = {
field: key,
headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
sortable: true,
filter: true,
flex: 1
}
if (key === 'id') {
column.hide = true
column.width = 0
column.flex = 0
column.suppressColumnsToolPanel = true
column.suppressHeaderMenuButton = true
return column
}
if (key === 'completed' && typeof firstItem[key] === 'boolean') {
column.width = 120
column.flex = undefined
column.cellRenderer = (params) => {
return params.value ?
'<span style="color: green; font-weight: bold;">✓ Completed</span>' :
'<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
}
return column
}
if (key === 'userId') {
column.width = 100
column.flex = undefined
return column
}
const isDateField = (val) => {
if (typeof val !== 'string') return false
const datePatterns = [
/^\d{4}-\d{2}-\d{2}/,
/T\d{2}:\d{2}:\d{2}/,
/^\d{2}\/\d{2}\/\d{4}/,
/^\d{1,2}-\d{1,2}-\d{4}/
]
return datePatterns.some(pattern => pattern.test(val)) || !isNaN(Date.parse(val))
}
const hasLongText = sampleValues.some(val =>
typeof val === 'string' && val.length > maxCellTextLength
)
const firstValue = sampleValues[0]
if (isDateField(firstValue)) {
column.width = 140
column.valueFormatter = (params) => {
if (!params.value) return ''
try {
const date = new Date(params.value)
if (isNaN(date.getTime())) return String(params.value)
return date.toISOString().split('T')[0]
} catch (e) {
return String(params.value)
}
}
column.tooltipValueGetter = (params) => {
if (!params.value) return ''
try {
const date = new Date(params.value)
return isNaN(date.getTime()) ?
String(params.value) :
date.toLocaleString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
} catch (e) {
return String(params.value)
}
}
return column
}
if (hasLongText) {
column.flex = 1
column.minWidth = 150
column.maxWidth = 300
column.cellRenderer = 'LongTextCellRenderer'
column.cellRendererParams = {
maxLength: maxCellTextLength
}
column.tooltipField = key
return column
}
if (typeof firstValue === 'number') {
column.filter = 'agNumberColumnFilter'
column.width = 120
column.valueFormatter = (params) => {
if (typeof params.value !== 'number') return params.value || ''
return params.value.toLocaleString('en-US')
}
return column
}
column.flex = 1
column.minWidth = 100
column.maxWidth = 250
return column
}).filter(col => col.field !== 'action')
return columns
}
const processAPIData = (response) => {
const rawData = response?.data?.data || response?.data || []
const data = rawData.map((item, index) => {
const source = item._source || item
return {
id: item._id || item.id || `resource_${Date.now()}_${index}`,
name: source.name || 'Unnamed',
rate: parseFloat(source.rate) || 0,
}
})
ganttColumns.value = generateColumnsFromData(data, 25).map(col => {
if (col.field === 'name') {
return {
...col,
flex: 2,
minWidth: 200,
maxWidth: 500,
wrapText: true,
autoHeight: true,
cellStyle: {
whiteSpace: 'normal',
lineHeight: '1.2',
wordWrap: 'break-word'
},
tooltipField: 'name'
}
}
return col
})
return data
}
</script>
<template>
<AgGridTable
:columns="ganttColumns"
:api-url="apiUrl"
:data-processor="processAPIData"
:enable-export="enableExport"
:enable-edit="enableEdit"
:enable-delete="enableDelete"
:enable-search="enableSearch"
:height="height"
:table-id="tableId"
:table-title="tableTitle"
/>
</template>

213
resources/js/pages/dashboards/task.vue Normal file
View File

@@ -0,0 +1,213 @@
<script setup>
import { ref } from 'vue'
import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
const props = defineProps({
apiUrl: {
type: String,
default: 'http://megategra.com:8001/dev/data/tasks'
},
tableId: {
type: String,
default: 'tasks-table'
},
tableTitle: {
type: String,
default: 'Tasks Management'
},
height: {
type: String,
default: '500px'
},
enableExport: {
type: Boolean,
default: true
},
enableEdit: {
type: Boolean,
default: true
},
enableDelete: {
type: Boolean,
default: true
},
enableSearch: {
type: Boolean,
default: true
}
})
const ganttColumns = ref([])
const generateColumnsFromData = (data, maxCellTextLength = 30) => {
if (!data || data.length === 0) return []
const firstItem = data[0]
const sampleSize = Math.min(10, data.length)
const columns = Object.keys(firstItem).map(key => {
const sampleValues = data.slice(0, sampleSize)
.map(item => item[key])
.filter(val => val !== undefined && val !== null)
const column = {
field: key,
headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
sortable: true,
filter: true,
flex: 1
}
if (key === 'id') {
column.hide = true
column.width = 0
column.flex = 0
column.suppressColumnsToolPanel = true
column.suppressHeaderMenuButton = true
return column
}
if (key === 'completed' && typeof firstItem[key] === 'boolean') {
column.width = 120
column.flex = undefined
column.cellRenderer = (params) => {
return params.value ?
'<span style="color: green; font-weight: bold;">✓ Completed</span>' :
'<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
}
return column
}
if (key === 'userId') {
column.width = 100
column.flex = undefined
return column
}
const isDateField = (val) => {
if (typeof val !== 'string') return false
const datePatterns = [
/^\d{4}-\d{2}-\d{2}/,
/T\d{2}:\d{2}:\d{2}/,
/^\d{2}\/\d{2}\/\d{4}/,
/^\d{1,2}-\d{1,2}-\d{4}/
]
return datePatterns.some(pattern => pattern.test(val)) || !isNaN(Date.parse(val))
}
const hasLongText = sampleValues.some(val =>
typeof val === 'string' && val.length > maxCellTextLength
)
const firstValue = sampleValues[0]
if (isDateField(firstValue)) {
column.width = 140
column.valueFormatter = (params) => {
if (!params.value) return ''
try {
const date = new Date(params.value)
if (isNaN(date.getTime())) return String(params.value)
return date.toISOString().split('T')[0]
} catch (e) {
return String(params.value)
}
}
column.tooltipValueGetter = (params) => {
if (!params.value) return ''
try {
const date = new Date(params.value)
return isNaN(date.getTime()) ?
String(params.value) :
date.toLocaleString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
} catch (e) {
return String(params.value)
}
}
return column
}
if (hasLongText) {
column.flex = 1
column.minWidth = 150
column.maxWidth = 300
column.cellRenderer = 'LongTextCellRenderer'
column.cellRendererParams = {
maxLength: maxCellTextLength
}
column.tooltipField = key
return column
}
if (typeof firstValue === 'number') {
column.filter = 'agNumberColumnFilter'
column.width = 120
column.valueFormatter = (params) => {
if (typeof params.value !== 'number') return params.value || ''
return params.value.toLocaleString('en-US')
}
return column
}
column.flex = 1
column.minWidth = 100
column.maxWidth = 250
return column
}).filter(col => col.field !== 'action')
return columns
}
const processAPIData = (response) => {
const rawData = response?.data?.data || response?.data || []
const data = rawData.map((item, index) => {
const source = item._source || item
return {
id: item._id || item.id || `task_${Date.now()}_${index}`,
name: source.name || 'Unnamed',
complete: source.complete,
effort: parseFloat(source.effort) || 0,
effortleft: parseFloat(source.effortleft) || 0,
start: source.start,
end: source.end,
}
})
ganttColumns.value = generateColumnsFromData(data, 25).map(col => {
if (col.field === 'name') {
return {
...col,
flex: 2,
minWidth: 200,
maxWidth: 500,
wrapText: true,
autoHeight: true,
cellStyle: {
whiteSpace: 'normal',
lineHeight: '1.2',
wordWrap: 'break-word'
},
tooltipField: 'name'
}
}
return col
})
return data
}
</script>
<template>
<AgGridTable :columns="ganttColumns" :api-url="apiUrl" :data-processor="processAPIData" :enable-export="enableExport"
:enable-edit="enableEdit" :enable-delete="enableDelete" :enable-search="enableSearch" :height="height"
:table-id="tableId" :table-title="tableTitle" />
</template>

303
resources/js/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { useDisplay, useTheme } from 'vuetify'
import { hexToRgb } from '@layouts/utils'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, nextTick } from 'vue'
const props = defineProps({
donutColors: {
@@ -17,15 +17,20 @@ const props = defineProps({
const vuetifyTheme = useTheme()
const display = useDisplay()
const cardRef = ref(null)
const cardWidth = ref(0)
const cardWidth = ref(300)
const updateCardWidth = () => {
if (cardRef.value) {
cardWidth.value = cardRef.value.offsetWidth
const rect = cardRef.value.getBoundingClientRect()
const newWidth = rect.width
if (newWidth > 0 && Math.abs(newWidth - cardWidth.value) > 5) {
cardWidth.value = newWidth
}
}
}
onMounted(() => {
onMounted(async () => {
await nextTick()
updateCardWidth()
window.addEventListener('resize', updateCardWidth)
})
@@ -47,48 +52,50 @@ const processColors = (colors) => {
}
const chartSize = computed(() => {
const width = cardWidth.value || 300
let size
if (width < 250) {
size = Math.max(120, width * 0.5)
} else if (width < 350) {
size = Math.max(150, width * 0.5)
} else if (width < 450) {
size = Math.max(180, width * 0.45)
} else if (width < 600) {
size = Math.max(200, width * 0.4)
} else if (width < 800) {
size = Math.max(240, width * 0.35)
} else {
size = Math.min(300, width * 0.32)
const width = cardWidth.value
const breakpoints = {
xs: display.xs.value,
sm: display.sm.value,
md: display.md.value
}
if (display.xs.value) size = Math.max(size, 120)
if (display.sm.value) size = Math.max(size, 160)
if (display.md.value) size = Math.max(size, 200)
let size = 120
if (breakpoints.xs) {
size = Math.min(width * 0.35, 120)
} else if (breakpoints.sm) {
size = Math.min(width * 0.4, 150)
} else if (width <= 400) {
size = Math.min(width * 0.4, 160)
} else if (width <= 600) {
size = Math.min(width * 0.35, 200)
} else {
size = Math.min(width * 0.3, 240)
}
size = Math.max(size, 100)
return { width: size, height: size }
})
const textSizes = computed(() => {
const width = cardWidth.value || 300
const width = cardWidth.value
if (width < 250 || display.xs.value) {
if (display.xs.value || width < 300) {
return {
title: 'text-body-2',
subtitle: 'text-caption',
mainNumber: 'text-h6',
percentage: 'text-body-2'
percentage: 'text-caption'
}
} else if (width < 350 || display.sm.value) {
} else if (display.sm.value || width < 450) {
return {
title: 'text-body-1',
subtitle: 'text-body-2',
mainNumber: 'text-h5',
percentage: 'text-body-2'
}
} else if (width < 450) {
} else if (width < 600) {
return {
title: 'text-h6',
subtitle: 'text-body-2',
@@ -97,9 +104,9 @@ const textSizes = computed(() => {
}
} else {
return {
title: display.md.value ? 'text-h5' : 'text-h4',
title: 'text-h5',
subtitle: 'text-body-1',
mainNumber: display.lg.value ? 'text-h2' : 'text-h3',
mainNumber: 'text-h3',
percentage: 'text-body-1'
}
}
@@ -108,12 +115,10 @@ const textSizes = computed(() => {
const chartOptions = computed(() => {
const currentTheme = vuetifyTheme.current.value.colors
const variableTheme = vuetifyTheme.current.value.variables
const width = cardWidth.value || 300
const defaultDonutColors = [
currentTheme.success,
]
const width = cardWidth.value
const chartSizeValue = chartSize.value.width
const defaultDonutColors = [currentTheme.success]
const usedDonutColors = props.donutColors.length
? processColors(props.donutColors)
: defaultDonutColors
@@ -121,63 +126,50 @@ const chartOptions = computed(() => {
const headingColor = `rgba(${hexToRgb(currentTheme['on-background'])},${variableTheme['high-emphasis-opacity']})`
const backgroundCircleColor = `rgba(${hexToRgb(usedDonutColors[0])}, 0.15)`
const chartSizeValue = chartSize.value.width
const valueFontSize = width < 250 ? '1.1rem' :
width < 350 ? '1.3rem' :
width < 450 ? '1.5rem' :
chartSizeValue < 160 ? '1.3rem' :
chartSizeValue < 200 ? '1.6rem' :
chartSizeValue < 250 ? '1.8rem' : '2rem'
const valueFontSize = chartSizeValue < 120 ? '0.9rem' :
chartSizeValue < 160 ? '1.2rem' :
chartSizeValue < 200 ? '1.4rem' : '1.6rem'
const labelFontSize = width < 250 ? '0.8rem' :
width < 350 ? '0.9rem' :
chartSizeValue < 160 ? '0.9rem' :
chartSizeValue < 200 ? '1rem' : '1.1rem'
const labelFontSize = chartSizeValue < 120 ? '0.7rem' :
chartSizeValue < 160 ? '0.8rem' :
chartSizeValue < 200 ? '0.9rem' : '1rem'
const donutSize = width < 300 ? '65%' :
width < 400 ? '70%' :
chartSizeValue < 180 ? '70%' :
chartSizeValue < 220 ? '75%' : '80%'
const donutSize = chartSizeValue < 130 ? '60%' :
chartSizeValue < 180 ? '65%' : '70%'
return {
chart: {
parentHeightOffset: 0,
type: 'donut',
sparkline: {
enabled: false
},
sparkline: { enabled: false },
animations: {
enabled: true,
easing: 'easeinout',
speed: 800,
dynamicAnimation: {
enabled: true,
speed: 350
}
}
},
labels: ['Progress', 'Remaining'],
colors: [...usedDonutColors, backgroundCircleColor],
stroke: {
width: 0
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
stroke: { width: 0 },
dataLabels: { enabled: false },
legend: { show: false },
tooltip: {
enabled: true,
theme: 'dark',
theme: vuetifyTheme.current.value.dark ? 'dark' : 'light',
style: {
fontSize: width < 300 ? '12px' : '14px'
fontSize: chartSizeValue < 140 ? '11px' : '13px'
}
},
grid: {
padding: {
top: 0,
bottom: 0,
right: 0,
left: 0,
},
padding: { top: 0, bottom: 0, right: 0, left: 0 }
},
states: {
hover: {
filter: {
type: 'none'
}
filter: { type: 'none' }
}
},
plotOptions: {
@@ -195,14 +187,12 @@ const chartOptions = computed(() => {
fontFamily: 'Public Sans',
color: headingColor,
fontWeight: 600,
offsetY: chartSizeValue < 140 ? -2 : 0,
offsetY: chartSizeValue < 130 ? -1 : 0,
formatter(val) {
return `${Math.round(val)}%`
},
},
name: {
show: false
},
name: { show: false },
total: {
show: true,
showAlways: true,
@@ -219,114 +209,12 @@ const chartOptions = computed(() => {
},
},
},
responsive: [
{
breakpoint: 280,
options: {
chart: {
width: 120,
height: 120
},
plotOptions: {
pie: {
donut: {
size: '65%',
labels: {
value: {
fontSize: '1.1rem',
offsetY: -2
},
total: {
fontSize: '0.8rem'
}
}
}
}
}
}
},
{
breakpoint: 400,
options: {
chart: {
width: 150,
height: 150
},
plotOptions: {
pie: {
donut: {
size: '70%',
labels: {
value: {
fontSize: '1.3rem',
offsetY: -1
},
total: {
fontSize: '0.9rem'
}
}
}
}
}
}
},
{
breakpoint: 600,
options: {
chart: {
width: 180,
height: 180
},
plotOptions: {
pie: {
donut: {
size: '75%',
labels: {
value: {
fontSize: '1.5rem'
},
total: {
fontSize: '1rem'
}
}
}
}
}
}
},
{
breakpoint: 1024,
options: {
chart: {
width: 240,
height: 240
},
plotOptions: {
pie: {
donut: {
size: '80%',
labels: {
value: {
fontSize: '1.8rem'
},
total: {
fontSize: '1.1rem'
}
}
}
}
}
}
}
]
responsive: []
}
})
const cardBackgroundStyle = computed(() => {
const defaultDonutColors = [
vuetifyTheme.current.value.colors.success,
]
const defaultDonutColors = [vuetifyTheme.current.value.colors.success]
const colors = props.donutColors.length ? processColors(props.donutColors) : defaultDonutColors
const createGradientColor = (color, opacity = 0.08) => {
@@ -343,33 +231,32 @@ const cardBackgroundStyle = computed(() => {
}
const gradientColors = colors.map((color, index) =>
createGradientColor(color, index === 0 ? 0.12 : 0.04)
createGradientColor(color, index === 0 ? 0.1 : 0.03)
)
return {
background: `linear-gradient(135deg,
${gradientColors[0]} 0%,
${gradientColors[1] || gradientColors[0]} 50%,
${gradientColors[2] || gradientColors[0]} 100%)`
${gradientColors[1] || createGradientColor(colors[0], 0.05)} 50%,
${gradientColors[2] || createGradientColor(colors[0], 0.02)} 100%)`
}
})
const layoutClasses = computed(() => {
const width = cardWidth.value || 300
const width = cardWidth.value
return {
cardText: width < 250 ? 'pa-2' :
width < 350 ? 'pa-3' :
width < 500 ? 'pa-4' : 'pa-5',
textSection: width < 250 ? 'me-2' :
width < 350 ? 'me-3' :
width < 500 ? 'me-4' : 'me-5',
chartSection: 'flex-shrink-0',
iconSize: width < 250 ? 12 :
width < 350 ? 14 :
width < 500 ? 16 : 18,
spacing: width < 300 ? 'mb-2' :
width < 450 ? 'mb-3' : 'mb-4'
cardPadding: display.xs.value ? 'pa-3' :
display.sm.value ? 'pa-4' :
width < 400 ? 'pa-4' : 'pa-5',
textSpacing: display.xs.value ? 'me-2' :
display.sm.value ? 'me-3' :
width < 400 ? 'me-3' : 'me-4',
iconSize: display.xs.value ? 14 :
display.sm.value ? 16 :
width < 400 ? 16 : 18,
itemSpacing: display.xs.value ? 'mb-2' :
width < 400 ? 'mb-3' : 'mb-3'
}
})
</script>
@@ -382,22 +269,23 @@ const layoutClasses = computed(() => {
>
<VCardText
class="d-flex align-center justify-space-between"
:class="layoutClasses.cardText"
:class="layoutClasses.cardPadding"
>
<div
class="d-flex flex-column flex-grow-1"
:class="layoutClasses.textSection"
class="d-flex flex-column flex-grow-1 flex-shrink-1"
:class="layoutClasses.textSpacing"
style="min-width: 0;"
>
<div :class="layoutClasses.spacing">
<div :class="layoutClasses.itemSpacing">
<h5
class="text-no-wrap font-weight-medium"
class="text-no-wrap font-weight-medium text-truncate"
:class="textSizes.title"
style="line-height: 1.2;"
>
Generated Leads
</h5>
<div
class="text-medium-emphasis"
class="text-medium-emphasis text-truncate"
:class="textSizes.subtitle"
style="line-height: 1.1;"
>
@@ -408,7 +296,7 @@ const layoutClasses = computed(() => {
<div>
<h3
class="font-weight-bold"
:class="[textSizes.mainNumber, layoutClasses.spacing]"
:class="[textSizes.mainNumber, layoutClasses.itemSpacing]"
style="line-height: 1.1;"
>
4,350
@@ -418,10 +306,10 @@ const layoutClasses = computed(() => {
icon="tabler-chevron-up"
:color="(props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0]"
:size="layoutClasses.iconSize"
class="me-1"
class="me-1 flex-shrink-0"
/>
<span
class="font-weight-medium"
class="font-weight-medium text-no-wrap"
:class="textSizes.percentage"
:style="{ color: (props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0] }"
>
@@ -432,8 +320,7 @@ const layoutClasses = computed(() => {
</div>
<div
class="d-flex align-center justify-center"
:class="layoutClasses.chartSection"
class="d-flex align-center justify-center flex-shrink-0"
>
<VueApexCharts
:options="chartOptions"
@@ -444,4 +331,4 @@ const layoutClasses = computed(() => {
</div>
</VCardText>
</VCard>
</template>
</template>