mirror of
https://git.hmsn.ink/kospo/svcm/dmz.git
synced 2026-03-20 03:52:24 +09:00
파일정리
This commit is contained in:
@@ -38,7 +38,7 @@ const isScrolling = computed(() => {
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 65px;
|
||||
background: var(--white);
|
||||
transition: all 0.3s; // transition-all test
|
||||
border-bottom: 1px solid var(--fade-grey);
|
||||
@@ -365,7 +365,7 @@ const isScrolling = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 16%;
|
||||
width: 20%;
|
||||
padding-right: 33px;
|
||||
background-color: var(--primary);
|
||||
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
export const changelog = [
|
||||
{
|
||||
date: 'September 24th, 2022',
|
||||
tag: '1.0.0',
|
||||
changelog: [
|
||||
{
|
||||
title: 'Send dynamic suggestions to users',
|
||||
type: 'Enhancements',
|
||||
},
|
||||
{
|
||||
title: 'Fix product search showing only best sellers',
|
||||
type: 'Bug fixes',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: 'September 18th, 2022',
|
||||
tag: '1.2.0',
|
||||
changelog: [
|
||||
{
|
||||
title: 'Fix a bug that was occuring when using Paypal',
|
||||
type: 'Bug fixes',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: 'October 24th, 2022',
|
||||
tag: '1.3.0',
|
||||
changelog: [
|
||||
{
|
||||
title: 'Fix a bug that was occuring when using Paypal',
|
||||
type: 'Enhancements',
|
||||
},
|
||||
{
|
||||
title: 'Fix product search showing only best sellers',
|
||||
type: 'Bug fixes',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: 'October 18th, 2022',
|
||||
tag: '1.4.0',
|
||||
changelog: [
|
||||
{
|
||||
title: 'Send dynamic suggestions to users',
|
||||
type: 'Features',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -1,201 +0,0 @@
|
||||
import type { VAvatarProps } from '/@src/components/base/VAvatar.vue'
|
||||
export interface KanbanTask {
|
||||
id: string
|
||||
title: string
|
||||
state: string
|
||||
dueDate: string
|
||||
participants: VAvatarProps[]
|
||||
}
|
||||
|
||||
export function useKanban() {
|
||||
const tasks = reactive([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Create prototype with JWT authentication',
|
||||
state: 'new',
|
||||
dueDate: '3 weeks',
|
||||
participants: [
|
||||
{
|
||||
color: 'warning',
|
||||
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Design a todo list component using React',
|
||||
state: 'new',
|
||||
dueDate: '3 weeks',
|
||||
participants: [
|
||||
{
|
||||
color: 'info',
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Implement the users REST API',
|
||||
state: 'progress',
|
||||
dueDate: '3 days',
|
||||
participants: [
|
||||
{
|
||||
color: 'danger',
|
||||
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
},
|
||||
{
|
||||
color: undefined,
|
||||
picture: 'https://media.cssninja.io/content/avatars/26.jpg',
|
||||
},
|
||||
{
|
||||
color: undefined,
|
||||
picture: 'https://media.cssninja.io/content/avatars/19.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Review project wireframes',
|
||||
state: 'progress',
|
||||
dueDate: '1 week',
|
||||
participants: [
|
||||
{
|
||||
color: 'success',
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'Implement new footer in all pages',
|
||||
state: 'progress',
|
||||
dueDate: '5 days',
|
||||
participants: [
|
||||
{
|
||||
color: 'info',
|
||||
picture: 'https://media.cssninja.io/content/avatars/16.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'Implement the projects REST API',
|
||||
state: 'ready',
|
||||
dueDate: '2 days',
|
||||
participants: [
|
||||
{
|
||||
color: 'warning',
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: 'Landing page redesign',
|
||||
state: 'completed',
|
||||
dueDate: 'On time',
|
||||
participants: [
|
||||
{
|
||||
color: 'success',
|
||||
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: 'Projects REST API Implementation',
|
||||
state: 'completed',
|
||||
dueDate: 'On time',
|
||||
participants: [
|
||||
{
|
||||
color: 'danger',
|
||||
picture: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
},
|
||||
{
|
||||
picture: 'https://media.cssninja.io/content/avatars/9.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
title: 'Database replication setup',
|
||||
state: 'completed',
|
||||
dueDate: 'On time',
|
||||
participants: [
|
||||
{
|
||||
color: 'primary',
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
title: 'Firebase demo application setup',
|
||||
state: 'completed',
|
||||
dueDate: 'On time',
|
||||
participants: [
|
||||
{
|
||||
color: 'warning',
|
||||
picture: 'https://media.cssninja.io/content/avatars/16.jpg',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
const search = shallowRef('')
|
||||
|
||||
const filteredTasks = computed(() => {
|
||||
if (!search.value) {
|
||||
return tasks as KanbanTask[]
|
||||
}
|
||||
else {
|
||||
return tasks.filter((item) => {
|
||||
return item.title.match(new RegExp(search.value, 'i'))
|
||||
}) as KanbanTask[]
|
||||
}
|
||||
})
|
||||
|
||||
const participants = computed(() => {
|
||||
return tasks.reduce<VAvatarProps[]>((accumulator, task) => {
|
||||
for (const participant of task.participants) {
|
||||
const exists = accumulator.find((value) => {
|
||||
return value.picture === participant.picture
|
||||
})
|
||||
|
||||
if (!exists) {
|
||||
accumulator.push(participant as VAvatarProps)
|
||||
}
|
||||
}
|
||||
|
||||
return accumulator
|
||||
}, [])
|
||||
})
|
||||
|
||||
const newTasks = computed(() => {
|
||||
return filteredTasks.value.filter(task => task.state === 'new')
|
||||
})
|
||||
const progressTasks = computed(() => {
|
||||
return filteredTasks.value.filter(task => task.state === 'progress')
|
||||
})
|
||||
const readyTasks = computed(() => {
|
||||
return filteredTasks.value.filter(task => task.state === 'ready')
|
||||
})
|
||||
const reviewTasks = computed(() => {
|
||||
return filteredTasks.value.filter(task => task.state === 'review')
|
||||
})
|
||||
const completedTasks = computed(() => {
|
||||
return filteredTasks.value.filter(task => task.state === 'completed')
|
||||
})
|
||||
|
||||
return {
|
||||
tasks,
|
||||
participants,
|
||||
newTasks,
|
||||
progressTasks,
|
||||
readyTasks,
|
||||
reviewTasks,
|
||||
completedTasks,
|
||||
search,
|
||||
filteredTasks,
|
||||
}
|
||||
}
|
||||
@@ -1,657 +0,0 @@
|
||||
export const roadmap = [
|
||||
{
|
||||
year: '2022',
|
||||
progress: 90,
|
||||
quarters: [
|
||||
{
|
||||
id: 0,
|
||||
year: '2022',
|
||||
quarter: 1,
|
||||
name: 'Q1',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'AI driven website design',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
url: 'https://vuero.cssninja.io',
|
||||
},
|
||||
{
|
||||
title: 'AI driven marketing automation',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Account personalization',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Theme color settings persistance',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Refreshed landing page UI',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
year: '2022',
|
||||
quarter: 2,
|
||||
name: 'Q2',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Ecommerce storefront configuration',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'algolia deep search integration',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Payments gateways integration',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Auth and user modules',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
year: '2022',
|
||||
quarter: 3,
|
||||
name: 'Q3',
|
||||
progress: 72,
|
||||
features: [
|
||||
{
|
||||
title: 'Ecommerce storefront configuration',
|
||||
value: 27,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'algolia deep search integration',
|
||||
value: 31,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Payments gateways integration',
|
||||
value: 68,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Auth and user modules',
|
||||
value: 84,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Auth and user modules',
|
||||
value: 90,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Auth and user modules',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
year: '2022',
|
||||
quarter: 4,
|
||||
name: 'Q4',
|
||||
progress: 0,
|
||||
features: [
|
||||
{
|
||||
title: 'Integration with Github services',
|
||||
value: 0,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Integration with Gitlab services',
|
||||
value: 0,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Integration with Digital Ocean services',
|
||||
value: 0,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Automated production backups',
|
||||
value: 0,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Task scheduler implementation',
|
||||
value: 0,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Calendar implementation',
|
||||
value: 0,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
year: '2021',
|
||||
progress: 100,
|
||||
quarters: [
|
||||
{
|
||||
id: 0,
|
||||
year: '2021',
|
||||
quarter: 1,
|
||||
name: 'Q1',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q1 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q1 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q1 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q1 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q1 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
year: '2021',
|
||||
quarter: 2,
|
||||
name: 'Q2',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q2 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q2 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q2 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q2 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q2 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
year: '2021',
|
||||
quarter: 3,
|
||||
name: 'Q3',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q3 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q3 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q3 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q3 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q3 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
year: '2021',
|
||||
quarter: 4,
|
||||
name: 'Q4',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q4 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q4 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q4 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q4 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q4 2021',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
year: '2020',
|
||||
progress: 100,
|
||||
quarters: [
|
||||
{
|
||||
id: 0,
|
||||
year: '2020',
|
||||
quarter: 1,
|
||||
name: 'Q1',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q1 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q1 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q1 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q1 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q1 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
year: '2020',
|
||||
quarter: 2,
|
||||
name: 'Q2',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q2 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q2 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q2 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q2 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q2 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
year: '2020',
|
||||
quarter: 3,
|
||||
name: 'Q3',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q3 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q3 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q3 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q3 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q3 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
year: '2020',
|
||||
quarter: 4,
|
||||
name: 'Q4',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q4 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q4 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q4 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q4 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q4 2020',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
year: '2019',
|
||||
progress: 100,
|
||||
quarters: [
|
||||
{
|
||||
id: 0,
|
||||
year: '2019',
|
||||
quarter: 1,
|
||||
name: 'Q1',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q1 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q1 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q1 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q1 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q1 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
year: '2019',
|
||||
quarter: 2,
|
||||
name: 'Q2',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q2 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q2 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q2 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q2 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q2 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
year: '2019',
|
||||
quarter: 3,
|
||||
name: 'Q3',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q3 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q3 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q3 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q3 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q3 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
year: '2019',
|
||||
quarter: 4,
|
||||
name: 'Q4',
|
||||
progress: 100,
|
||||
features: [
|
||||
{
|
||||
title: 'Some nice feature done in Q4 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Another feature done in Q4 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some cool feature done in Q4 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'App UI revamp done in Q4 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
{
|
||||
title: 'Some difficult feature done in Q4 2019',
|
||||
value: 100,
|
||||
content:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Philosophi autem in suis lectulis plerumque moriuntur. Ad eas enim res ab Epicuro praecepta dantur.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -1,98 +0,0 @@
|
||||
export const plans = [
|
||||
{
|
||||
id: 'starter',
|
||||
name: 'Vuero Starter',
|
||||
slogan: 'Plan for starters',
|
||||
intro:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita.',
|
||||
summary:
|
||||
'Vuero has incredible features and each plan perfectly adapts to your company, wether it is a small business or a bigger one. Vuero can also scale with you, as your business grows.',
|
||||
icon: '/images/logos/logo/logo.svg',
|
||||
logo: {
|
||||
light: '/images/logos/pricing/vuero-starter.svg',
|
||||
dark: '/images/logos/pricing/vuero-starter-dark.svg',
|
||||
},
|
||||
costs: {
|
||||
monthly: '$45',
|
||||
yearly: '$530',
|
||||
},
|
||||
limits: {
|
||||
seats: '3',
|
||||
projects: '20',
|
||||
storage: '20GB',
|
||||
addons: '1',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Vuero Pro',
|
||||
slogan: 'For professionals',
|
||||
intro:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita.',
|
||||
summary:
|
||||
'Vuero has incredible features and each plan perfectly adapts to your company, wether it is a small business or a bigger one. Vuero can also scale with you, as your business grows.',
|
||||
icon: '/images/logos/logo/logo-secondary.svg',
|
||||
logo: {
|
||||
light: '/images/logos/pricing/vuero-pro.svg',
|
||||
dark: '/images/logos/pricing/vuero-pro-dark.svg',
|
||||
},
|
||||
costs: {
|
||||
monthly: '$99',
|
||||
yearly: '$1080',
|
||||
},
|
||||
limits: {
|
||||
seats: '8',
|
||||
projects: '150',
|
||||
storage: '100GB',
|
||||
addons: '3',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'business',
|
||||
name: 'Vuero Business',
|
||||
slogan: 'For serious people',
|
||||
intro:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita.',
|
||||
summary:
|
||||
'Vuero has incredible features and each plan perfectly adapts to your company, wether it is a small business or a bigger one. Vuero can also scale with you, as your business grows.',
|
||||
icon: '/images/logos/logo/logo-accent.svg',
|
||||
logo: {
|
||||
light: '/images/logos/pricing/vuero-business.svg',
|
||||
dark: '/images/logos/pricing/vuero-business-dark.svg',
|
||||
},
|
||||
costs: {
|
||||
monthly: '$149',
|
||||
yearly: '$1590',
|
||||
},
|
||||
limits: {
|
||||
seats: '20',
|
||||
projects: 'Unlimited',
|
||||
storage: '500GB',
|
||||
addons: '5',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'enterprise',
|
||||
name: 'Vuero Enterprise',
|
||||
slogan: 'For big companies',
|
||||
intro:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita.',
|
||||
summary:
|
||||
'Vuero has incredible features and each plan perfectly adapts to your company, wether it is a small business or a bigger one. Vuero can also scale with you, as your business grows.',
|
||||
icon: '/images/logos/logo/logo-platinum.svg',
|
||||
logo: {
|
||||
light: '/images/logos/pricing/vuero-enterprise.svg',
|
||||
dark: '/images/logos/pricing/vuero-enterprise-dark.svg',
|
||||
},
|
||||
costs: {
|
||||
monthly: '$199',
|
||||
yearly: '$2230',
|
||||
},
|
||||
limits: {
|
||||
seats: '40',
|
||||
projects: 'Unlimited',
|
||||
storage: 'Unlimited',
|
||||
addons: 'Unlimited',
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -1,57 +0,0 @@
|
||||
export function useGoalCharts() {
|
||||
const themeColors = useThemeColors()
|
||||
const gaugeOptions = shallowRef({
|
||||
series: [57, 86],
|
||||
chart: {
|
||||
height: 220,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
inverseOrder: true,
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
offsetY: -10,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontWeight: 600,
|
||||
color: themeColors.grey,
|
||||
fontSize: '16px',
|
||||
offsetY: -5,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
color: themeColors.grey,
|
||||
},
|
||||
},
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: '75%',
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
labels: ['Efficiency', 'Productivity'],
|
||||
})
|
||||
|
||||
return {
|
||||
gaugeOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
export function useGrowthRadialChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const optionsCircle = shallowRef({
|
||||
series: [65],
|
||||
chart: {
|
||||
height: 160,
|
||||
type: 'radialBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '75%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
offsetY: -10,
|
||||
color: themeColors.grey,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontWeight: 600,
|
||||
color: themeColors.purple,
|
||||
fontSize: '16px',
|
||||
offsetY: -5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Growth'],
|
||||
})
|
||||
|
||||
return {
|
||||
optionsCircle,
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
export function useProfitBarChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
|
||||
},
|
||||
{
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
|
||||
},
|
||||
].map((s) => {
|
||||
return {
|
||||
name: s.name,
|
||||
data: s.data.map((d) => {
|
||||
return d - 70
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const barOptions = shallowRef({
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.purple, themeColors.lime],
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape: 'rounded',
|
||||
columnWidth: '55%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
series: series,
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (val: string) {
|
||||
return val + 70
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val: string) {
|
||||
return val + 70
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
barOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
export function useRevenueChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const revenueOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [10835, 40214, 36257, 51411, 45697, 61221, 65295, 91512, 75648],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val: string) {
|
||||
return '$' + val
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
revenueOptions,
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,200 +0,0 @@
|
||||
export const series = {
|
||||
monthDataSeries1: {
|
||||
prices: [
|
||||
8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85, 8487.7,
|
||||
8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9, 8496.25, 8600.65, 8881.1, 9340.85,
|
||||
],
|
||||
dates: [
|
||||
'13 Nov 2017',
|
||||
'14 Nov 2017',
|
||||
'15 Nov 2017',
|
||||
'16 Nov 2017',
|
||||
'17 Nov 2017',
|
||||
'20 Nov 2017',
|
||||
'21 Nov 2017',
|
||||
'22 Nov 2017',
|
||||
'23 Nov 2017',
|
||||
'24 Nov 2017',
|
||||
'27 Nov 2017',
|
||||
'28 Nov 2017',
|
||||
'29 Nov 2017',
|
||||
'30 Nov 2017',
|
||||
'01 Dec 2017',
|
||||
'04 Dec 2017',
|
||||
'05 Dec 2017',
|
||||
'06 Dec 2017',
|
||||
'07 Dec 2017',
|
||||
'08 Dec 2017',
|
||||
],
|
||||
},
|
||||
monthDataSeries2: {
|
||||
prices: [
|
||||
8423.7, 8423.5, 8514.3, 8481.85, 8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55,
|
||||
8512.9, 8496.25, 8600.65, 8881.1, 9040.85, 8340.7, 8165.5, 8122.9, 8107.85, 8128.0,
|
||||
],
|
||||
dates: [
|
||||
'13 Nov 2017',
|
||||
'14 Nov 2017',
|
||||
'15 Nov 2017',
|
||||
'16 Nov 2017',
|
||||
'17 Nov 2017',
|
||||
'20 Nov 2017',
|
||||
'21 Nov 2017',
|
||||
'22 Nov 2017',
|
||||
'23 Nov 2017',
|
||||
'24 Nov 2017',
|
||||
'27 Nov 2017',
|
||||
'28 Nov 2017',
|
||||
'29 Nov 2017',
|
||||
'30 Nov 2017',
|
||||
'01 Dec 2017',
|
||||
'04 Dec 2017',
|
||||
'05 Dec 2017',
|
||||
'06 Dec 2017',
|
||||
'07 Dec 2017',
|
||||
'08 Dec 2017',
|
||||
],
|
||||
},
|
||||
monthDataSeries3: {
|
||||
prices: [
|
||||
7114.25, 7126.6, 7116.95, 7203.7, 7233.75, 7451.0, 7381.15, 7348.95, 7347.75,
|
||||
7311.25, 7266.4, 7253.25, 7215.45, 7266.35, 7315.25, 7237.2, 7191.4, 7238.95,
|
||||
7222.6, 7217.9, 7359.3, 7371.55, 7371.15, 7469.2, 7429.25, 7434.65, 7451.1, 7475.25,
|
||||
7566.25, 7556.8, 7525.55, 7555.45, 7560.9, 7490.7, 7527.6, 7551.9, 7514.85, 7577.95,
|
||||
7592.3, 7621.95, 7707.95, 7859.1, 7815.7, 7739.0, 7778.7, 7839.45, 7756.45, 7669.2,
|
||||
7580.45, 7452.85, 7617.25, 7701.6, 7606.8, 7620.05, 7513.85, 7498.45, 7575.45,
|
||||
7601.95, 7589.1, 7525.85, 7569.5, 7702.5, 7812.7, 7803.75, 7816.3, 7851.15, 7912.2,
|
||||
7972.8, 8145.0, 8161.1, 8121.05, 8071.25, 8088.2, 8154.45, 8148.3, 8122.05, 8132.65,
|
||||
8074.55, 7952.8, 7885.55, 7733.9, 7897.15, 7973.15, 7888.5, 7842.8, 7838.4, 7909.85,
|
||||
7892.75, 7897.75, 7820.05, 7904.4, 7872.2, 7847.5, 7849.55, 7789.6, 7736.35, 7819.4,
|
||||
7875.35, 7871.8, 8076.5, 8114.8, 8193.55, 8217.1, 8235.05, 8215.3, 8216.4, 8301.55,
|
||||
8235.25, 8229.75, 8201.95, 8164.95, 8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7,
|
||||
8423.5, 8514.3, 8481.85, 8487.7, 8506.9, 8626.2,
|
||||
],
|
||||
dates: [
|
||||
'02 Jun 2017',
|
||||
'05 Jun 2017',
|
||||
'06 Jun 2017',
|
||||
'07 Jun 2017',
|
||||
'08 Jun 2017',
|
||||
'09 Jun 2017',
|
||||
'12 Jun 2017',
|
||||
'13 Jun 2017',
|
||||
'14 Jun 2017',
|
||||
'15 Jun 2017',
|
||||
'16 Jun 2017',
|
||||
'19 Jun 2017',
|
||||
'20 Jun 2017',
|
||||
'21 Jun 2017',
|
||||
'22 Jun 2017',
|
||||
'23 Jun 2017',
|
||||
'27 Jun 2017',
|
||||
'28 Jun 2017',
|
||||
'29 Jun 2017',
|
||||
'30 Jun 2017',
|
||||
'03 Jul 2017',
|
||||
'04 Jul 2017',
|
||||
'05 Jul 2017',
|
||||
'06 Jul 2017',
|
||||
'07 Jul 2017',
|
||||
'10 Jul 2017',
|
||||
'11 Jul 2017',
|
||||
'12 Jul 2017',
|
||||
'13 Jul 2017',
|
||||
'14 Jul 2017',
|
||||
'17 Jul 2017',
|
||||
'18 Jul 2017',
|
||||
'19 Jul 2017',
|
||||
'20 Jul 2017',
|
||||
'21 Jul 2017',
|
||||
'24 Jul 2017',
|
||||
'25 Jul 2017',
|
||||
'26 Jul 2017',
|
||||
'27 Jul 2017',
|
||||
'28 Jul 2017',
|
||||
'31 Jul 2017',
|
||||
'01 Aug 2017',
|
||||
'02 Aug 2017',
|
||||
'03 Aug 2017',
|
||||
'04 Aug 2017',
|
||||
'07 Aug 2017',
|
||||
'08 Aug 2017',
|
||||
'09 Aug 2017',
|
||||
'10 Aug 2017',
|
||||
'11 Aug 2017',
|
||||
'14 Aug 2017',
|
||||
'16 Aug 2017',
|
||||
'17 Aug 2017',
|
||||
'18 Aug 2017',
|
||||
'21 Aug 2017',
|
||||
'22 Aug 2017',
|
||||
'23 Aug 2017',
|
||||
'24 Aug 2017',
|
||||
'28 Aug 2017',
|
||||
'29 Aug 2017',
|
||||
'30 Aug 2017',
|
||||
'31 Aug 2017',
|
||||
'01 Sep 2017',
|
||||
'04 Sep 2017',
|
||||
'05 Sep 2017',
|
||||
'06 Sep 2017',
|
||||
'07 Sep 2017',
|
||||
'08 Sep 2017',
|
||||
'11 Sep 2017',
|
||||
'12 Sep 2017',
|
||||
'13 Sep 2017',
|
||||
'14 Sep 2017',
|
||||
'15 Sep 2017',
|
||||
'18 Sep 2017',
|
||||
'19 Sep 2017',
|
||||
'20 Sep 2017',
|
||||
'21 Sep 2017',
|
||||
'22 Sep 2017',
|
||||
'25 Sep 2017',
|
||||
'26 Sep 2017',
|
||||
'27 Sep 2017',
|
||||
'28 Sep 2017',
|
||||
'29 Sep 2017',
|
||||
'03 Oct 2017',
|
||||
'04 Oct 2017',
|
||||
'05 Oct 2017',
|
||||
'06 Oct 2017',
|
||||
'09 Oct 2017',
|
||||
'10 Oct 2017',
|
||||
'11 Oct 2017',
|
||||
'12 Oct 2017',
|
||||
'13 Oct 2017',
|
||||
'16 Oct 2017',
|
||||
'17 Oct 2017',
|
||||
'18 Oct 2017',
|
||||
'19 Oct 2017',
|
||||
'23 Oct 2017',
|
||||
'24 Oct 2017',
|
||||
'25 Oct 2017',
|
||||
'26 Oct 2017',
|
||||
'27 Oct 2017',
|
||||
'30 Oct 2017',
|
||||
'31 Oct 2017',
|
||||
'01 Nov 2017',
|
||||
'02 Nov 2017',
|
||||
'03 Nov 2017',
|
||||
'06 Nov 2017',
|
||||
'07 Nov 2017',
|
||||
'08 Nov 2017',
|
||||
'09 Nov 2017',
|
||||
'10 Nov 2017',
|
||||
'13 Nov 2017',
|
||||
'14 Nov 2017',
|
||||
'15 Nov 2017',
|
||||
'16 Nov 2017',
|
||||
'17 Nov 2017',
|
||||
'20 Nov 2017',
|
||||
'21 Nov 2017',
|
||||
'22 Nov 2017',
|
||||
'23 Nov 2017',
|
||||
'24 Nov 2017',
|
||||
'27 Nov 2017',
|
||||
'28 Nov 2017',
|
||||
],
|
||||
},
|
||||
} as const
|
||||
@@ -1,50 +0,0 @@
|
||||
export function useDemo1Line() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Sales',
|
||||
data: [105, 414, 357, 511, 497, 621, 695, 912, 748],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'line',
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'straight',
|
||||
},
|
||||
title: {
|
||||
text: 'Line Chart',
|
||||
align: 'left',
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
export function useDemo10RangeBar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Corporate',
|
||||
data: [
|
||||
{
|
||||
x: 'Team A',
|
||||
y: [1, 5],
|
||||
},
|
||||
{
|
||||
x: 'Team B',
|
||||
y: [4, 6],
|
||||
},
|
||||
{
|
||||
x: 'Team C',
|
||||
y: [5, 8],
|
||||
},
|
||||
{
|
||||
x: 'Team D',
|
||||
y: [3, 11],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Service',
|
||||
data: [
|
||||
{
|
||||
x: 'Team A',
|
||||
y: [2, 6],
|
||||
},
|
||||
{
|
||||
x: 'Team B',
|
||||
y: [1, 3],
|
||||
},
|
||||
{
|
||||
x: 'Team C',
|
||||
y: [7, 8],
|
||||
},
|
||||
{
|
||||
x: 'Team D',
|
||||
y: [5, 9],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'rangeBar',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.lime,
|
||||
themeColors.orange,
|
||||
themeColors.purple,
|
||||
themeColors.lime,
|
||||
],
|
||||
title: {
|
||||
text: 'Range Column',
|
||||
align: 'left',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
export function useDemo11Bar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Spaceships',
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'bar',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: 'Horizontal Bar',
|
||||
align: 'left',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'South Korea',
|
||||
'Canada',
|
||||
'United Kingdom',
|
||||
'Netherlands',
|
||||
'Italy',
|
||||
'France',
|
||||
'Japan',
|
||||
'United States',
|
||||
'China',
|
||||
'Germany',
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
export function useDemo12Bar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Completed',
|
||||
data: [44, 55, 41, 64, 22, 43, 21],
|
||||
},
|
||||
{
|
||||
name: 'Pending',
|
||||
data: [53, 32, 33, 52, 13, 44, 32],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'bar',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.info, themeColors.lime],
|
||||
title: {
|
||||
text: 'Horizontal Bar Multiple',
|
||||
align: 'left',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetX: -6,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#fff'],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: ['#fff'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export function useDemo13RangeBar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Analysis',
|
||||
y: [new Date('2019-02-27').getTime(), new Date('2019-03-04').getTime()],
|
||||
fillColor: themeColors.purple,
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [new Date('2019-03-04').getTime(), new Date('2019-03-08').getTime()],
|
||||
fillColor: themeColors.info,
|
||||
},
|
||||
{
|
||||
x: 'Coding',
|
||||
y: [new Date('2019-03-07').getTime(), new Date('2019-03-10').getTime()],
|
||||
fillColor: themeColors.lime,
|
||||
},
|
||||
{
|
||||
x: 'Testing',
|
||||
y: [new Date('2019-03-08').getTime(), new Date('2019-03-12').getTime()],
|
||||
fillColor: themeColors.purple,
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [new Date('2019-03-12').getTime(), new Date('2019-03-17').getTime()],
|
||||
fillColor: themeColors.orange,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'rangeBar',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Timeline',
|
||||
align: 'left',
|
||||
},
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
hideOverflowingLabels: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: string, opts: any) {
|
||||
const label = opts?.w?.globals?.labels?.[opts.dataPointIndex] ?? ''
|
||||
const a = dayjs(val[0])
|
||||
const b = dayjs(val[1])
|
||||
const diff = b.diff(a, 'days')
|
||||
return label + ': ' + diff + (diff > 1 ? 'D' : 'd')
|
||||
},
|
||||
style: {
|
||||
colors: ['#f3f4f5', '#fff'],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent'],
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
function generateData(
|
||||
baseval: number,
|
||||
count: number,
|
||||
yrange: { min: number, max: number },
|
||||
) {
|
||||
let i = 0
|
||||
const _series = []
|
||||
while (i < count) {
|
||||
const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1
|
||||
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
|
||||
const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15
|
||||
|
||||
_series.push([x, y, z])
|
||||
i++
|
||||
}
|
||||
return _series
|
||||
}
|
||||
|
||||
export function useDemo14Bubble() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Bubble1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Bubble2',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Bubble3',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Bubble4',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'bubble',
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8,
|
||||
},
|
||||
title: {
|
||||
text: 'Bubble Chart',
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'category',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70,
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
function generateData(
|
||||
baseval: number,
|
||||
count: number,
|
||||
yrange: { min: number, max: number },
|
||||
) {
|
||||
let i = 0
|
||||
let date = baseval
|
||||
const series = []
|
||||
while (i < count) {
|
||||
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
|
||||
|
||||
series.push([date, y])
|
||||
date += 86400000
|
||||
i++
|
||||
}
|
||||
return series
|
||||
}
|
||||
|
||||
export function useDemo15Scatter() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Team 1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Team 2',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Team 3',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Team 4',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 10, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Team 5',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'scatter',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Scatter Chart',
|
||||
},
|
||||
chart: {
|
||||
zoom: {
|
||||
type: 'xy',
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70,
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
export function useDemo16Pie() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [44, 55, 13, 43, 22]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 295,
|
||||
type: 'pie',
|
||||
series,
|
||||
options: {
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 315,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
position: 'right',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
export function useDemo17Donuts() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [44, 55, 41, 17, 15]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 290,
|
||||
type: 'donut',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Donut Chart',
|
||||
},
|
||||
chart: {},
|
||||
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 280,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
position: 'right',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
export function useDemo18RadialBar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [70]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 295,
|
||||
type: 'radialBar',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Radial Bar',
|
||||
},
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '70%',
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Power'],
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
export function useDemo19RadialBar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [44, 55, 67, 83]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 295,
|
||||
type: 'radialBar',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Radial Bar Multiple',
|
||||
},
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '22px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
formatter: function (/* value: string */) {
|
||||
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
||||
return 249
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
export function useDemo2Line() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Session Duration',
|
||||
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10],
|
||||
},
|
||||
{
|
||||
name: 'Page Views',
|
||||
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35],
|
||||
},
|
||||
{
|
||||
name: 'Total Visits',
|
||||
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'line',
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.info, themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'straight',
|
||||
dashArray: [0, 8, 5],
|
||||
},
|
||||
title: {
|
||||
text: 'Multiple Lines',
|
||||
align: 'left',
|
||||
},
|
||||
legend: {
|
||||
tooltipHoverFormatter: function (val: string, opts: any) {
|
||||
return (
|
||||
val
|
||||
+ ' - '
|
||||
+ opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex]
|
||||
+ ''
|
||||
)
|
||||
},
|
||||
position: 'top',
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
sizeOffset: 6,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
y: [
|
||||
{
|
||||
title: {
|
||||
formatter: asMinutes,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: {
|
||||
formatter: perSession,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: {
|
||||
formatter: toString,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
export function useDemo20RadialBar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [67]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 295,
|
||||
type: 'radialBar',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Radial Bar Gauge',
|
||||
},
|
||||
chart: {
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '16px',
|
||||
color: undefined,
|
||||
offsetY: 120,
|
||||
},
|
||||
value: {
|
||||
offsetY: 76,
|
||||
fontSize: '22px',
|
||||
color: undefined,
|
||||
formatter: asPercent,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4,
|
||||
},
|
||||
labels: ['Median Ratio'],
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
export function useDemo21RadialBar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [76]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 295,
|
||||
type: 'radialBar',
|
||||
series,
|
||||
options: {
|
||||
title: {
|
||||
text: 'Radial Bar Gauge',
|
||||
},
|
||||
chart: {
|
||||
// offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
track: {
|
||||
background: '#e7e7e7',
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: -2,
|
||||
fontSize: '22px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
// top: -10
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91],
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
export function useDemo22Radar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Series 1',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
title: {
|
||||
text: 'Radar Chart',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['January', 'February', 'March', 'April', 'May', 'June'],
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
export function useDemo3Line() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'New members',
|
||||
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58, 79],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'line',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'stepline',
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
title: {
|
||||
text: 'Stepline Chart',
|
||||
align: 'left',
|
||||
},
|
||||
markers: {
|
||||
hover: {
|
||||
sizeOffset: 4,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
export function useDemo4Area() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Balance',
|
||||
data: [
|
||||
8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85,
|
||||
8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9, 8496.25, 8600.65,
|
||||
8881.1, 9340.85,
|
||||
],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'area',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'straight',
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
title: {
|
||||
text: 'Area Chart',
|
||||
align: 'left',
|
||||
},
|
||||
labels: [
|
||||
'13 Nov 2017',
|
||||
'14 Nov 2017',
|
||||
'15 Nov 2017',
|
||||
'16 Nov 2017',
|
||||
'17 Nov 2017',
|
||||
'20 Nov 2017',
|
||||
'21 Nov 2017',
|
||||
'22 Nov 2017',
|
||||
'23 Nov 2017',
|
||||
'24 Nov 2017',
|
||||
'27 Nov 2017',
|
||||
'28 Nov 2017',
|
||||
'29 Nov 2017',
|
||||
'30 Nov 2017',
|
||||
'01 Dec 2017',
|
||||
'04 Dec 2017',
|
||||
'05 Dec 2017',
|
||||
'06 Dec 2017',
|
||||
'07 Dec 2017',
|
||||
'08 Dec 2017',
|
||||
],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
opposite: true,
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'left',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
export function useDemo5Area() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Completed',
|
||||
data: [31, 40, 28, 51, 42, 109, 100],
|
||||
},
|
||||
{
|
||||
name: 'Pending',
|
||||
data: [11, 32, 45, 32, 34, 52, 41],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'area',
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime, themeColors.info, themeColors.purple],
|
||||
title: {
|
||||
text: 'Multiple Area',
|
||||
align: 'left',
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2018-09-19T00:00:00.000Z',
|
||||
'2018-09-19T01:30:00.000Z',
|
||||
'2018-09-19T02:30:00.000Z',
|
||||
'2018-09-19T03:30:00.000Z',
|
||||
'2018-09-19T04:30:00.000Z',
|
||||
'2018-09-19T05:30:00.000Z',
|
||||
'2018-09-19T06:30:00.000Z',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
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
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
export function useDemo7Bar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Inflation',
|
||||
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
height: 280,
|
||||
type: 'bar',
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: asPercent,
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#304758'],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
position: 'top',
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
colorFrom: '#D8E3F0',
|
||||
colorTo: '#BED1E6',
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: asPercent,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime, themeColors.secondary, themeColors.orange],
|
||||
title: {
|
||||
text: 'Bar Chart',
|
||||
align: 'left',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
export function useDemo8Bar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
|
||||
},
|
||||
{
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'bar',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)',
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
title: {
|
||||
text: 'Multiple Bars',
|
||||
align: 'left',
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: asKDollar,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
export function useDemo9Bar() {
|
||||
const themeColors = useThemeColors()
|
||||
const series = shallowRef<any[]>([])
|
||||
|
||||
watchEffect(() => {
|
||||
series.value = [
|
||||
{
|
||||
name: 'Desktops',
|
||||
data: [44, 55, 41, 67, 22, 43],
|
||||
},
|
||||
{
|
||||
name: 'Phones',
|
||||
data: [13, 23, 20, 8, 13, 27],
|
||||
},
|
||||
{
|
||||
name: 'Tablets',
|
||||
data: [11, 17, 15, 15, 21, 14],
|
||||
},
|
||||
{
|
||||
name: 'Hybrid',
|
||||
data: [21, 7, 25, 13, 22, 8],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
return reactive({
|
||||
type: 'bar',
|
||||
height: 280,
|
||||
series,
|
||||
options: {
|
||||
chart: {
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
themeColors.orange,
|
||||
],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'01/01/2011 GMT',
|
||||
'01/02/2011 GMT',
|
||||
'01/03/2011 GMT',
|
||||
'01/04/2011 GMT',
|
||||
'01/05/2011 GMT',
|
||||
'01/06/2011 GMT',
|
||||
],
|
||||
},
|
||||
title: {
|
||||
text: 'Stacked Bars',
|
||||
align: 'left',
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
export function useIncomeHistoryChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const incomeOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Expenses',
|
||||
data: [318, 150, 49, 152.13, 421, 1009, 1220, 418, 113, 45],
|
||||
},
|
||||
{
|
||||
name: 'Earnings',
|
||||
data: [192, 263, 459, 312, 349, 527, 397, 351, 618, 511],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime, themeColors.info, themeColors.orange],
|
||||
title: {
|
||||
text: 'History',
|
||||
align: 'left',
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2020-10-19T00:00:00.000Z',
|
||||
'2020-10-20T01:30:00.000Z',
|
||||
'2020-10-21T02:30:00.000Z',
|
||||
'2020-10-22T03:30:00.000Z',
|
||||
'2020-10-23T04:30:00.000Z',
|
||||
'2020-10-24T05:30:00.000Z',
|
||||
'2020-10-25T06:30:00.000Z',
|
||||
'2020-10-26T06:30:00.000Z',
|
||||
'2020-10-27T06:30:00.000Z',
|
||||
'2020-10-28T06:30:00.000Z',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return '$' + val
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
return {
|
||||
incomeOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export const valueSingle = 0
|
||||
|
||||
export const optionsSingle = [
|
||||
'Last 10 days',
|
||||
'Last month',
|
||||
'Last 3 months',
|
||||
'Last 6 months',
|
||||
]
|
||||
@@ -1,112 +0,0 @@
|
||||
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,
|
||||
}
|
||||
}
|
||||
@@ -1,123 +0,0 @@
|
||||
function generateDayWiseTimeSeries(s: number, count: number) {
|
||||
const values = [
|
||||
[
|
||||
0.4, 0.3, 1, 0.9, 2.9, 1.9, 2.5, 0.9, 1.2, 0.7, 1.9, 0.5, 1.3, 0.9, 1.7, 0.2, 0.7,
|
||||
0.5,
|
||||
],
|
||||
[
|
||||
0.2, 0.3, 0.8, 0.7, 2.2, 1.6, 2.3, 0.7, 1.1, 0.5, 1.2, 0.5, 1, 0.4, 1.5, 0.2, 0.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 useBitcoinPriceChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const bitcoinChartOptions = {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 350,
|
||||
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.lime],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 3,
|
||||
},
|
||||
title: {
|
||||
text: 'Bitcoin (BTC) Price Chart',
|
||||
align: 'left',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Expected',
|
||||
data: generateDayWiseTimeSeries(0, 18),
|
||||
},
|
||||
{
|
||||
name: 'Real',
|
||||
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',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
fillOpacity: 0.7,
|
||||
},
|
||||
}
|
||||
|
||||
return {
|
||||
bitcoinChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
export function useEvolutionRadialChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const evolutionRadialOptions = {
|
||||
series: [54],
|
||||
chart: {
|
||||
height: 220,
|
||||
type: 'radialBar',
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.orange, themeColors.orange],
|
||||
title: {
|
||||
text: 'Bitcoin (BTC) Evolution',
|
||||
align: 'left',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 15,
|
||||
fontSize: '13px',
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
color: themeColors.grey,
|
||||
formatter: function () {
|
||||
return ['(30 days)']
|
||||
},
|
||||
},
|
||||
value: {
|
||||
color: themeColors.purple,
|
||||
offsetY: -20,
|
||||
fontSize: '16px',
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
fontWeight: '500',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Median Ratio'],
|
||||
}
|
||||
|
||||
return {
|
||||
evolutionRadialOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
export function usePopularityGaugeChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const popularityGaugeOptions = {
|
||||
series: [67],
|
||||
title: {
|
||||
text: 'Bitcoin (BTC) Popularity',
|
||||
},
|
||||
chart: {
|
||||
height: 225,
|
||||
type: 'radialBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime, themeColors.secondary],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: themeColors.grey,
|
||||
offsetY: 80,
|
||||
},
|
||||
value: {
|
||||
offsetY: 40,
|
||||
fontSize: '18px',
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
fontWeight: '500',
|
||||
color: undefined,
|
||||
formatter: function (val: number) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4,
|
||||
},
|
||||
labels: ['(30 days)'],
|
||||
}
|
||||
|
||||
return {
|
||||
popularityGaugeOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
import type { Chart, ChartOptions } from 'billboard.js'
|
||||
|
||||
import { areaLineRange, areaSplineRange } from 'billboard.js'
|
||||
|
||||
export function useAreaLineRangeChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
x: 'x',
|
||||
type: areaLineRange(),
|
||||
columns: [
|
||||
[
|
||||
'x',
|
||||
'2013-01-01',
|
||||
'2013-01-02',
|
||||
'2013-01-03',
|
||||
'2013-01-04',
|
||||
'2013-01-05',
|
||||
'2013-01-06',
|
||||
],
|
||||
[
|
||||
'data1',
|
||||
[150, 140, 110],
|
||||
[155, 130, 115],
|
||||
[160, 135, 120],
|
||||
[135, 120, 110],
|
||||
[180, 150, 130],
|
||||
[199, 160, 125],
|
||||
],
|
||||
['data2', [130, 130, 130], [340, 340, 340], [200, 200, 200], [500, 500, 500], [250, 250, 250], [350, 350, 350]],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
types: {
|
||||
data1: 'area-line-range',
|
||||
},
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'timeseries',
|
||||
tick: {
|
||||
format: '%Y-%m-%d',
|
||||
},
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Area Range Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: <any>[
|
||||
[
|
||||
'data3',
|
||||
[220, 215, 205],
|
||||
[240, 225, 215],
|
||||
[260, 235, 225],
|
||||
[280, 245, 235],
|
||||
[270, 255, 225],
|
||||
[240, 225, 215],
|
||||
],
|
||||
],
|
||||
types: {
|
||||
data3: areaSplineRange(),
|
||||
},
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: <any>[
|
||||
[
|
||||
'data4',
|
||||
{ high: 155, low: 145, mid: 150 },
|
||||
{ high: 200, mid: 190, low: 150 },
|
||||
{ high: 230, mid: 215, low: 200 },
|
||||
{ high: 210, mid: 200, low: 180 },
|
||||
{ high: 220, mid: 210, low: 190 },
|
||||
{ high: 200, mid: 180, low: 160 },
|
||||
],
|
||||
],
|
||||
types: {
|
||||
data4: areaSplineRange(),
|
||||
},
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import type { ChartOptions } from 'billboard.js'
|
||||
|
||||
import { area } from 'billboard.js'
|
||||
|
||||
export function useAreaSimpleChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
type: area(),
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 0],
|
||||
['data2', 130, 100, 140, 200, 150, 50],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
},
|
||||
types: {
|
||||
data1: 'area',
|
||||
data2: 'area-spline',
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Area Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
options,
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import type { Chart, ChartOptions } from 'billboard.js'
|
||||
|
||||
import { bar } from 'billboard.js'
|
||||
|
||||
export function useBarSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
type: bar(),
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 100, 140, 200, 150, 50],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.orange,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
width: {
|
||||
ratio: 0.5,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Bar Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data3', 130, -150, 200, 300, -200, 100]],
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import type { Chart, ChartOptions } from 'billboard.js'
|
||||
|
||||
import { bar } from 'billboard.js'
|
||||
|
||||
export function useBarStacked() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
type: bar(),
|
||||
columns: [
|
||||
['data1', -30, 200, 200, 400, -150, 250],
|
||||
['data2', 130, 100, -100, 200, -150, 50],
|
||||
['data3', -230, 200, 200, -300, 250, 250],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.purple,
|
||||
},
|
||||
groups: [['data1', 'data2']],
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
lines: [
|
||||
{
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Stacked Bar Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.groups([['data1', 'data2', 'data3']])
|
||||
}, 1000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data4', 100, -50, 150, 200, -300, -100]],
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.groups([['data1', 'data2', 'data3', 'data4']])
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import type { Chart, ChartOptions } from 'billboard.js'
|
||||
|
||||
import { bubble } from 'billboard.js'
|
||||
|
||||
export function useBubbleSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 190, 200, 110, 150, 160, 50, 80, 55, 220],
|
||||
['data2', 130, 100, 10, 143, 80, 50, 200, 123, 185, 98],
|
||||
['data3', 160, 153, 85, 80, 250, 120, 5, 84, 99, 175],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
type: bubble(),
|
||||
labels: true,
|
||||
},
|
||||
bubble: {
|
||||
maxR: 50,
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
},
|
||||
y: {
|
||||
max: 450,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Bubble Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data1', 100, 50, 150, 200, 100, 350, 58, 210, 80, 126]],
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data2', 305, 350, 55, 25, 335, 29, 258, 310, 180, 226]],
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data3', 223, 121, 259, 247, 53, 159, 95, 111, 307, 337]],
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,234 +0,0 @@
|
||||
import type { Chart, ChartOptions, DataItem } from 'billboard.js'
|
||||
|
||||
import { donut } from 'billboard.js'
|
||||
|
||||
export function useDonutSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30],
|
||||
['data2', 120],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.orange,
|
||||
data4: themeColors.purple,
|
||||
setosa: themeColors.orange,
|
||||
versicolor: themeColors.purple,
|
||||
virginica: themeColors.success,
|
||||
},
|
||||
type: donut(),
|
||||
onclick(this: Chart, d: DataItem, element: SVGAElement) {
|
||||
console.log('[donutSimple] onclick', d, element)
|
||||
},
|
||||
onover(this: Chart, d: DataItem, element?: SVGAElement) {
|
||||
console.log('[donutSimple] onover', d, element)
|
||||
},
|
||||
onout(this: Chart, d: DataItem, element?: SVGAElement) {
|
||||
console.log('[donutSimple] onout', d, element)
|
||||
},
|
||||
},
|
||||
donut: {
|
||||
title: 'Inner Title',
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Donut Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [
|
||||
[
|
||||
'setosa',
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
0.4,
|
||||
0.4,
|
||||
0.3,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.5,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.6,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
],
|
||||
[
|
||||
'versicolor',
|
||||
1.4,
|
||||
1.5,
|
||||
1.5,
|
||||
1.3,
|
||||
1.5,
|
||||
1.3,
|
||||
1.6,
|
||||
1.0,
|
||||
1.3,
|
||||
1.4,
|
||||
1.0,
|
||||
1.5,
|
||||
1.0,
|
||||
1.4,
|
||||
1.3,
|
||||
1.4,
|
||||
1.5,
|
||||
1.0,
|
||||
1.5,
|
||||
1.1,
|
||||
1.8,
|
||||
1.3,
|
||||
1.5,
|
||||
1.2,
|
||||
1.3,
|
||||
1.4,
|
||||
1.4,
|
||||
1.7,
|
||||
1.5,
|
||||
1.0,
|
||||
1.1,
|
||||
1.0,
|
||||
1.2,
|
||||
1.6,
|
||||
1.5,
|
||||
1.6,
|
||||
1.5,
|
||||
1.3,
|
||||
1.3,
|
||||
1.3,
|
||||
1.2,
|
||||
1.4,
|
||||
1.2,
|
||||
1.0,
|
||||
1.3,
|
||||
1.2,
|
||||
1.3,
|
||||
1.3,
|
||||
1.1,
|
||||
1.3,
|
||||
],
|
||||
[
|
||||
'virginica',
|
||||
2.5,
|
||||
1.9,
|
||||
2.1,
|
||||
1.8,
|
||||
2.2,
|
||||
2.1,
|
||||
1.7,
|
||||
1.8,
|
||||
1.8,
|
||||
2.5,
|
||||
2.0,
|
||||
1.9,
|
||||
2.1,
|
||||
2.0,
|
||||
2.4,
|
||||
2.3,
|
||||
1.8,
|
||||
2.2,
|
||||
2.3,
|
||||
1.5,
|
||||
2.3,
|
||||
2.0,
|
||||
2.0,
|
||||
1.8,
|
||||
2.1,
|
||||
1.8,
|
||||
1.8,
|
||||
1.8,
|
||||
2.1,
|
||||
1.6,
|
||||
1.9,
|
||||
2.0,
|
||||
2.2,
|
||||
1.5,
|
||||
1.4,
|
||||
2.3,
|
||||
2.4,
|
||||
1.8,
|
||||
1.8,
|
||||
2.1,
|
||||
2.4,
|
||||
2.3,
|
||||
1.9,
|
||||
2.3,
|
||||
2.5,
|
||||
2.3,
|
||||
1.9,
|
||||
2.0,
|
||||
2.3,
|
||||
1.8,
|
||||
],
|
||||
],
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.unload({ ids: 'data1' })
|
||||
billboard.unload({ ids: 'data2' })
|
||||
}, 6500)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import type { Chart, ChartOptions, DataItem } from 'billboard.js'
|
||||
|
||||
import { gauge } from 'billboard.js'
|
||||
|
||||
export function useGaugeSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
columns: [['data', 91.4]],
|
||||
type: gauge(),
|
||||
onclick(this: Chart, d: DataItem, element: SVGAElement) {
|
||||
console.log('[gaugeSimple] onclick', d, element)
|
||||
},
|
||||
onover(this: Chart, d: DataItem, element?: SVGAElement) {
|
||||
console.log('[gaugeSimple] onover', d, element)
|
||||
},
|
||||
onout(this: Chart, d: DataItem, element?: SVGAElement) {
|
||||
console.log('[gaugeSimple] onout', d, element)
|
||||
},
|
||||
},
|
||||
gauge: {},
|
||||
color: {
|
||||
pattern: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.lime,
|
||||
themeColors.purple,
|
||||
],
|
||||
threshold: {
|
||||
values: [30, 60, 90, 100],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Gauge Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data', 10]],
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 50]],
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 70]],
|
||||
})
|
||||
}, 3000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 0]],
|
||||
})
|
||||
}, 4000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 100]],
|
||||
})
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import type { Chart, ChartOptions } from 'billboard.js'
|
||||
|
||||
import { line } from 'billboard.js'
|
||||
|
||||
export function useGenericLine() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
type: line(),
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 50, 20, 10, 40, 15, 25],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Line Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data1', 230, 190, 300, 500, 300, 400]],
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [['data3', 130, 150, 200, 300, 200, 100]],
|
||||
})
|
||||
}, 6500)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,231 +0,0 @@
|
||||
import type { Chart, ChartOptions, DataItem } from 'billboard.js'
|
||||
|
||||
import { pie } from 'billboard.js'
|
||||
|
||||
export function usePieSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30],
|
||||
['data2', 120],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.orange,
|
||||
data4: themeColors.purple,
|
||||
setosa: themeColors.orange,
|
||||
versicolor: themeColors.purple,
|
||||
virginica: themeColors.success,
|
||||
},
|
||||
type: pie(),
|
||||
onclick(this: Chart, d: DataItem, element: SVGAElement) {
|
||||
console.log('[pieSimple] onclick', d, element)
|
||||
},
|
||||
onover(this: Chart, d: DataItem, element?: SVGAElement) {
|
||||
console.log('[pieSimple] onover', d, element)
|
||||
},
|
||||
onout(this: Chart, d: DataItem, element?: SVGAElement) {
|
||||
console.log('[pieSimple] onout', d, element)
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Pie Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [
|
||||
[
|
||||
'setosa',
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
0.4,
|
||||
0.4,
|
||||
0.3,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.5,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.6,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
],
|
||||
[
|
||||
'versicolor',
|
||||
1.4,
|
||||
1.5,
|
||||
1.5,
|
||||
1.3,
|
||||
1.5,
|
||||
1.3,
|
||||
1.6,
|
||||
1.0,
|
||||
1.3,
|
||||
1.4,
|
||||
1.0,
|
||||
1.5,
|
||||
1.0,
|
||||
1.4,
|
||||
1.3,
|
||||
1.4,
|
||||
1.5,
|
||||
1.0,
|
||||
1.5,
|
||||
1.1,
|
||||
1.8,
|
||||
1.3,
|
||||
1.5,
|
||||
1.2,
|
||||
1.3,
|
||||
1.4,
|
||||
1.4,
|
||||
1.7,
|
||||
1.5,
|
||||
1.0,
|
||||
1.1,
|
||||
1.0,
|
||||
1.2,
|
||||
1.6,
|
||||
1.5,
|
||||
1.6,
|
||||
1.5,
|
||||
1.3,
|
||||
1.3,
|
||||
1.3,
|
||||
1.2,
|
||||
1.4,
|
||||
1.2,
|
||||
1.0,
|
||||
1.3,
|
||||
1.2,
|
||||
1.3,
|
||||
1.3,
|
||||
1.1,
|
||||
1.3,
|
||||
],
|
||||
[
|
||||
'virginica',
|
||||
2.5,
|
||||
1.9,
|
||||
2.1,
|
||||
1.8,
|
||||
2.2,
|
||||
2.1,
|
||||
1.7,
|
||||
1.8,
|
||||
1.8,
|
||||
2.5,
|
||||
2.0,
|
||||
1.9,
|
||||
2.1,
|
||||
2.0,
|
||||
2.4,
|
||||
2.3,
|
||||
1.8,
|
||||
2.2,
|
||||
2.3,
|
||||
1.5,
|
||||
2.3,
|
||||
2.0,
|
||||
2.0,
|
||||
1.8,
|
||||
2.1,
|
||||
1.8,
|
||||
1.8,
|
||||
1.8,
|
||||
2.1,
|
||||
1.6,
|
||||
1.9,
|
||||
2.0,
|
||||
2.2,
|
||||
1.5,
|
||||
1.4,
|
||||
2.3,
|
||||
2.4,
|
||||
1.8,
|
||||
1.8,
|
||||
2.1,
|
||||
2.4,
|
||||
2.3,
|
||||
1.9,
|
||||
2.3,
|
||||
2.5,
|
||||
2.3,
|
||||
1.9,
|
||||
2.0,
|
||||
2.3,
|
||||
1.8,
|
||||
],
|
||||
],
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.unload({ ids: 'data1' })
|
||||
billboard.unload({ ids: 'data2' })
|
||||
}, 6500)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
import type { ChartOptions } from 'billboard.js'
|
||||
|
||||
import { radar } from 'billboard.js'
|
||||
|
||||
export function useRadarSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
x: 'x',
|
||||
columns: [
|
||||
['x', 'Data A', 'Data B', 'Data C', 'Data D', 'Data E'],
|
||||
['data1', 330, 350, 200, 380, 150],
|
||||
['data2', 130, 100, 30, 200, 80],
|
||||
['data3', 230, 153, 85, 300, 250],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
type: radar(),
|
||||
labels: true,
|
||||
},
|
||||
radar: {
|
||||
axis: {
|
||||
max: 400,
|
||||
},
|
||||
level: {
|
||||
depth: 4,
|
||||
},
|
||||
direction: {
|
||||
clockwise: true,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Radar Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
options,
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import type { ChartOptions } from 'billboard.js'
|
||||
|
||||
import { line } from 'billboard.js'
|
||||
|
||||
export function useRegionLine() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
type: line(),
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 50, 20, 10, 40, 15, 25],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.info,
|
||||
},
|
||||
regions: {
|
||||
data1: [
|
||||
{
|
||||
start: 1,
|
||||
end: 2,
|
||||
style: {
|
||||
dasharray: '6 2',
|
||||
},
|
||||
},
|
||||
{
|
||||
start: 3,
|
||||
style: {
|
||||
dasharray: '2 3',
|
||||
},
|
||||
},
|
||||
],
|
||||
data2: [
|
||||
{
|
||||
end: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Line Chart with Regions',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
options,
|
||||
}
|
||||
}
|
||||
@@ -1,457 +0,0 @@
|
||||
import type { Chart, ChartOptions } from 'billboard.js'
|
||||
|
||||
import { scatter } from 'billboard.js'
|
||||
|
||||
export function useScatterSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
xs: {
|
||||
setosa: 'setosa_x',
|
||||
versicolor: 'versicolor_x',
|
||||
},
|
||||
columns: [
|
||||
[
|
||||
'setosa_x',
|
||||
3.5,
|
||||
3,
|
||||
3.2,
|
||||
3.1,
|
||||
3.6,
|
||||
3.9,
|
||||
3.4,
|
||||
3.4,
|
||||
2.9,
|
||||
3.1,
|
||||
3.7,
|
||||
3.4,
|
||||
3,
|
||||
3,
|
||||
4,
|
||||
4.4,
|
||||
3.9,
|
||||
3.5,
|
||||
3.8,
|
||||
3.8,
|
||||
3.4,
|
||||
3.7,
|
||||
3.6,
|
||||
3.3,
|
||||
3.4,
|
||||
3,
|
||||
3.4,
|
||||
3.5,
|
||||
3.4,
|
||||
3.2,
|
||||
3.1,
|
||||
3.4,
|
||||
4.1,
|
||||
4.2,
|
||||
3.1,
|
||||
3.2,
|
||||
3.5,
|
||||
3.6,
|
||||
3,
|
||||
3.4,
|
||||
3.5,
|
||||
2.3,
|
||||
3.2,
|
||||
3.5,
|
||||
3.8,
|
||||
3,
|
||||
3.8,
|
||||
3.2,
|
||||
3.7,
|
||||
3.3,
|
||||
],
|
||||
[
|
||||
'versicolor_x',
|
||||
3.2,
|
||||
3.2,
|
||||
3.1,
|
||||
2.3,
|
||||
2.8,
|
||||
2.8,
|
||||
3.3,
|
||||
2.4,
|
||||
2.9,
|
||||
2.7,
|
||||
2,
|
||||
3,
|
||||
2.2,
|
||||
2.9,
|
||||
2.9,
|
||||
3.1,
|
||||
3,
|
||||
2.7,
|
||||
2.2,
|
||||
2.5,
|
||||
3.2,
|
||||
2.8,
|
||||
2.5,
|
||||
2.8,
|
||||
2.9,
|
||||
3,
|
||||
2.8,
|
||||
3,
|
||||
2.9,
|
||||
2.6,
|
||||
2.4,
|
||||
2.4,
|
||||
2.7,
|
||||
2.7,
|
||||
3,
|
||||
3.4,
|
||||
3.1,
|
||||
2.3,
|
||||
3,
|
||||
2.5,
|
||||
2.6,
|
||||
3,
|
||||
2.6,
|
||||
2.3,
|
||||
2.7,
|
||||
3,
|
||||
2.9,
|
||||
2.9,
|
||||
2.5,
|
||||
2.8,
|
||||
],
|
||||
[
|
||||
'setosa',
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
0.4,
|
||||
0.4,
|
||||
0.3,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.5,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.6,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
],
|
||||
[
|
||||
'versicolor',
|
||||
1.4,
|
||||
1.5,
|
||||
1.5,
|
||||
1.3,
|
||||
1.5,
|
||||
1.3,
|
||||
1.6,
|
||||
1,
|
||||
1.3,
|
||||
1.4,
|
||||
1,
|
||||
1.5,
|
||||
1,
|
||||
1.4,
|
||||
1.3,
|
||||
1.4,
|
||||
1.5,
|
||||
1,
|
||||
1.5,
|
||||
1.1,
|
||||
1.8,
|
||||
1.3,
|
||||
1.5,
|
||||
1.2,
|
||||
1.3,
|
||||
1.4,
|
||||
1.4,
|
||||
1.7,
|
||||
1.5,
|
||||
1,
|
||||
1.1,
|
||||
1,
|
||||
1.2,
|
||||
1.6,
|
||||
1.5,
|
||||
1.6,
|
||||
1.5,
|
||||
1.3,
|
||||
1.3,
|
||||
1.3,
|
||||
1.2,
|
||||
1.4,
|
||||
1.2,
|
||||
1,
|
||||
1.3,
|
||||
1.2,
|
||||
1.3,
|
||||
1.3,
|
||||
1.1,
|
||||
1.3,
|
||||
],
|
||||
],
|
||||
colors: {
|
||||
setosa_x: themeColors.purple,
|
||||
versicolor_x: themeColors.lime,
|
||||
setosa: themeColors.orange,
|
||||
versicolor: themeColors.purple,
|
||||
virginica_x: themeColors.info,
|
||||
virginica: themeColors.success,
|
||||
},
|
||||
type: scatter(),
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
// label: "Sepal.Width",
|
||||
tick: {
|
||||
fit: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
// label: "Petal.Width"
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Scatter Plot',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
const onReady = (billboard: Chart) => {
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
xs: {
|
||||
virginica: 'virginica_x',
|
||||
},
|
||||
columns: [
|
||||
[
|
||||
'virginica_x',
|
||||
3.3,
|
||||
2.7,
|
||||
3.0,
|
||||
2.9,
|
||||
3.0,
|
||||
3.0,
|
||||
2.5,
|
||||
2.9,
|
||||
2.5,
|
||||
3.6,
|
||||
3.2,
|
||||
2.7,
|
||||
3.0,
|
||||
2.5,
|
||||
2.8,
|
||||
3.2,
|
||||
3.0,
|
||||
3.8,
|
||||
2.6,
|
||||
2.2,
|
||||
3.2,
|
||||
2.8,
|
||||
2.8,
|
||||
2.7,
|
||||
3.3,
|
||||
3.2,
|
||||
2.8,
|
||||
3.0,
|
||||
2.8,
|
||||
3.0,
|
||||
2.8,
|
||||
3.8,
|
||||
2.8,
|
||||
2.8,
|
||||
2.6,
|
||||
3.0,
|
||||
3.4,
|
||||
3.1,
|
||||
3.0,
|
||||
3.1,
|
||||
3.1,
|
||||
3.1,
|
||||
2.7,
|
||||
3.2,
|
||||
3.3,
|
||||
3.0,
|
||||
2.5,
|
||||
3.0,
|
||||
3.4,
|
||||
3.0,
|
||||
],
|
||||
[
|
||||
'virginica',
|
||||
2.5,
|
||||
1.9,
|
||||
2.1,
|
||||
1.8,
|
||||
2.2,
|
||||
2.1,
|
||||
1.7,
|
||||
1.8,
|
||||
1.8,
|
||||
2.5,
|
||||
2.0,
|
||||
1.9,
|
||||
2.1,
|
||||
2.0,
|
||||
2.4,
|
||||
2.3,
|
||||
1.8,
|
||||
2.2,
|
||||
2.3,
|
||||
1.5,
|
||||
2.3,
|
||||
2.0,
|
||||
2.0,
|
||||
1.8,
|
||||
2.1,
|
||||
1.8,
|
||||
1.8,
|
||||
1.8,
|
||||
2.1,
|
||||
1.6,
|
||||
1.9,
|
||||
2.0,
|
||||
2.2,
|
||||
1.5,
|
||||
1.4,
|
||||
2.3,
|
||||
2.4,
|
||||
1.8,
|
||||
1.8,
|
||||
2.1,
|
||||
2.4,
|
||||
2.3,
|
||||
1.9,
|
||||
2.3,
|
||||
2.5,
|
||||
2.3,
|
||||
1.9,
|
||||
2.0,
|
||||
2.3,
|
||||
1.8,
|
||||
],
|
||||
],
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.unload({
|
||||
ids: 'setosa',
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(() => {
|
||||
billboard.load({
|
||||
columns: [
|
||||
[
|
||||
'virginica',
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.1,
|
||||
0.2,
|
||||
0.4,
|
||||
0.4,
|
||||
0.3,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.5,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.4,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.1,
|
||||
0.2,
|
||||
0.2,
|
||||
0.3,
|
||||
0.3,
|
||||
0.2,
|
||||
0.6,
|
||||
0.4,
|
||||
0.3,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
0.2,
|
||||
],
|
||||
],
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
return {
|
||||
options,
|
||||
onReady,
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import type { ChartOptions } from 'billboard.js'
|
||||
|
||||
import { spline } from 'billboard.js'
|
||||
|
||||
export function useSplineSimple() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 100, 140, 200, 150, 50],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.orange,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
type: spline(),
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Spline Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
options,
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import type { ChartOptions } from 'billboard.js'
|
||||
|
||||
import { step, areaStep } from 'billboard.js'
|
||||
|
||||
export function useStepSimpleChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const options = ref<ChartOptions>({
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 100],
|
||||
['data2', 130, 100, 140, 200, 150, 50],
|
||||
],
|
||||
colors: {
|
||||
data1: themeColors.purple,
|
||||
data2: themeColors.lime,
|
||||
data3: themeColors.orange,
|
||||
data4: themeColors.purple,
|
||||
},
|
||||
types: {
|
||||
data1: step(),
|
||||
data2: areaStep(),
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 280,
|
||||
},
|
||||
padding: {
|
||||
bottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Step Chart',
|
||||
position: 'left',
|
||||
padding: {
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
top: 0,
|
||||
left: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
options,
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
export function useSharingChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const sharingOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
data: [21, 22, 10, 28, 16, 21, 13, 30, 35, 41, 36, 26],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 180,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.lime, themeColors.info],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30px',
|
||||
distributed: true,
|
||||
endingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
return {
|
||||
sharingOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
export function useUsersBarChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const barData = shallowRef([
|
||||
{
|
||||
x: 'Jan',
|
||||
y: 322,
|
||||
},
|
||||
{
|
||||
x: 'Feb',
|
||||
y: 459,
|
||||
},
|
||||
{
|
||||
x: 'Mar',
|
||||
y: 212,
|
||||
},
|
||||
{
|
||||
x: 'Apr',
|
||||
y: 345,
|
||||
},
|
||||
{
|
||||
x: 'May',
|
||||
y: 111,
|
||||
},
|
||||
{
|
||||
x: 'Jun',
|
||||
y: 189,
|
||||
},
|
||||
{
|
||||
x: 'Jul',
|
||||
y: 498,
|
||||
},
|
||||
{
|
||||
x: 'Aug',
|
||||
y: 612,
|
||||
},
|
||||
{
|
||||
x: 'Sep',
|
||||
y: 451,
|
||||
},
|
||||
{
|
||||
x: 'Oct',
|
||||
y: 248,
|
||||
},
|
||||
{
|
||||
x: 'Nov',
|
||||
y: 306,
|
||||
},
|
||||
{
|
||||
x: 'Dec',
|
||||
y: 366,
|
||||
},
|
||||
])
|
||||
|
||||
const barData2 = shallowRef([
|
||||
{
|
||||
x: 'Jan',
|
||||
y: 25,
|
||||
},
|
||||
{
|
||||
x: 'Feb',
|
||||
y: 49,
|
||||
},
|
||||
{
|
||||
x: 'Mar',
|
||||
y: 36,
|
||||
},
|
||||
{
|
||||
x: 'Apr',
|
||||
y: 84,
|
||||
},
|
||||
{
|
||||
x: 'May',
|
||||
y: 64,
|
||||
},
|
||||
{
|
||||
x: 'Jun',
|
||||
y: 131,
|
||||
},
|
||||
{
|
||||
x: 'Jul',
|
||||
y: 48,
|
||||
},
|
||||
{
|
||||
x: 'Aug',
|
||||
y: 144,
|
||||
},
|
||||
{
|
||||
x: 'Sep',
|
||||
y: 96,
|
||||
},
|
||||
{
|
||||
x: 'Oct',
|
||||
y: 11,
|
||||
},
|
||||
{
|
||||
x: 'Nov',
|
||||
y: 31,
|
||||
},
|
||||
{
|
||||
x: 'Dec',
|
||||
y: 8,
|
||||
},
|
||||
])
|
||||
|
||||
const usersBarOptions = reactive < any > ({
|
||||
series: [],
|
||||
chart: {
|
||||
height: 235,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
labels: {
|
||||
rotate: -45,
|
||||
rotateAlways: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
barData,
|
||||
barData2,
|
||||
usersBarOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
export function useUsersChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const usersOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'New Users',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
|
||||
},
|
||||
{
|
||||
name: 'Renewals',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
|
||||
},
|
||||
{
|
||||
name: 'Resigns',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 180,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime, themeColors.purple, themeColors.info],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: [
|
||||
{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
usersOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
export const courses = [
|
||||
{
|
||||
id: 1,
|
||||
category: 'Anatomy',
|
||||
title: 'ANA118 - Anatomy and physiology of young subjects',
|
||||
summary:
|
||||
'This week features a deeper approach of young subject anatomy and basic physiological properties. It also focuses on the latest released articles.',
|
||||
students: [
|
||||
{
|
||||
id: 21,
|
||||
picture: 'https://media.cssninja.io/content/avatars/21.jpg',
|
||||
initials: 'EF',
|
||||
color: 'h-purple',
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
picture: 'https://media.cssninja.io/content/avatars/33.jpg',
|
||||
initials: 'HM',
|
||||
color: 'h-yellow',
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
initials: 'MW',
|
||||
color: 'info',
|
||||
},
|
||||
],
|
||||
participants: 49,
|
||||
duration: '45min',
|
||||
comments: 25,
|
||||
week: 6,
|
||||
actionLabel: 'Week 6 assessment tasks',
|
||||
actionText: 'feb 3, 2021',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: 'Immunology',
|
||||
title: 'IMM107 - Immunology and treatment of human disease',
|
||||
summary:
|
||||
'This unit has a strong focus on significal clinical problems in immunology and the scientific background to these problems.',
|
||||
students: [
|
||||
{
|
||||
id: 19,
|
||||
picture: 'https://media.cssninja.io/content/avatars/19.jpg',
|
||||
initials: 'GK',
|
||||
color: 'h-purple',
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
picture: 'https://media.cssninja.io/content/avatars/27.jpg',
|
||||
initials: 'CE',
|
||||
color: 'h-yellow',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
initials: 'ML',
|
||||
color: 'info',
|
||||
},
|
||||
],
|
||||
participants: 26,
|
||||
duration: '95min',
|
||||
comments: 0,
|
||||
week: 6,
|
||||
actionLabel: 'Written Examination',
|
||||
actionText: '9:00-12:00 feb 8, 2021',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category: 'Cardiology',
|
||||
title: 'CAR112 - Cardiovascular Metabolic Management',
|
||||
summary:
|
||||
'This unit has a strong focus on significal clinical problems in immunology and the scientific background to these problems.',
|
||||
students: [
|
||||
{
|
||||
id: 36,
|
||||
picture: 'https://media.cssninja.io/content/avatars/36.jpg',
|
||||
initials: 'BL',
|
||||
color: 'h-purple',
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
picture: 'https://media.cssninja.io/content/avatars/15.jpg',
|
||||
initials: 'HV',
|
||||
color: 'h-yellow',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
picture: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
initials: 'EC',
|
||||
color: 'info',
|
||||
},
|
||||
],
|
||||
participants: 54,
|
||||
duration: '95min',
|
||||
comments: 0,
|
||||
week: 6,
|
||||
actionLabel: 'Written Examination',
|
||||
actionText: '9:00-12:00 feb 8, 2021',
|
||||
},
|
||||
]
|
||||
|
||||
export const files = [
|
||||
{
|
||||
id: 1,
|
||||
icon: '/images/icons/files/pdf.svg',
|
||||
name: 'Holtz - Complete Anatomy',
|
||||
uploaded: '2 days ago',
|
||||
size: '94.7 MB',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/images/icons/files/sheet.svg',
|
||||
name: 'Assessing doses Pt. 2',
|
||||
uploaded: '1 week ago',
|
||||
size: '79 KB',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '/images/icons/files/doc-2.svg',
|
||||
name: 'Written exam template',
|
||||
uploaded: '2 weeks ago',
|
||||
size: '42 KB',
|
||||
},
|
||||
]
|
||||
|
||||
export const students = [
|
||||
{
|
||||
id: 0,
|
||||
username: 'Erik K.',
|
||||
position: 'Product Manager',
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Las Vegas, NV',
|
||||
industry: 'Software',
|
||||
status: 'Online',
|
||||
attendance: 'On Time',
|
||||
progress: 76,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
username: 'Jimmy H.',
|
||||
position: 'Project Manager',
|
||||
picture: 'https://media.cssninja.io/content/avatars/22.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Los Angeles, CA',
|
||||
industry: 'Business',
|
||||
status: 'Offline',
|
||||
attendance: 'Late (10min)',
|
||||
progress: 79,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: 'Melany W.',
|
||||
position: 'Web Developer',
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'San Jose, CA',
|
||||
industry: 'Design',
|
||||
status: 'Online',
|
||||
attendance: 'On Time',
|
||||
progress: 58,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: 'Joshua S.',
|
||||
position: 'Backend Developer',
|
||||
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Las Vegas, NV',
|
||||
industry: 'Accounting',
|
||||
status: 'Online',
|
||||
attendance: 'On Time',
|
||||
progress: 66,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
username: 'Tara S.',
|
||||
position: 'UI/UX Designer',
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Los Angeles, CA',
|
||||
industry: 'Finance',
|
||||
status: 'Busy',
|
||||
attendance: 'On Time',
|
||||
progress: 87,
|
||||
},
|
||||
]
|
||||
@@ -1,57 +0,0 @@
|
||||
export function useCustomerEngagementChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const customerEngagementChartOptions = shallowRef({
|
||||
series: [65],
|
||||
chart: {
|
||||
height: 160,
|
||||
type: 'radialBar',
|
||||
offsetX: -15,
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.secondary],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: themeColors.grey,
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: 5,
|
||||
fontSize: '16px',
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
fontWeight: '500',
|
||||
color: undefined,
|
||||
formatter: asPercent,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4,
|
||||
},
|
||||
labels: ['(30 days)'],
|
||||
})
|
||||
|
||||
return {
|
||||
customerEngagementChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
export function useCustomersChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const customersChartOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Returning',
|
||||
data: [318.42, 407.16, 284.12, 517.0, 452.45, 1209.34, 1010.11],
|
||||
},
|
||||
{
|
||||
name: 'Newcomers',
|
||||
data: [112.42, 324.45, 457.5, 312.75, 342.45, 527.56, 414.75],
|
||||
},
|
||||
{
|
||||
name: 'Abandonned',
|
||||
data: [787.89, 534.46, 365.78, 107.45, 145.78, 54.42, 27.12],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'area',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.info, themeColors.lime],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2020-09-19T00:00:00.000Z',
|
||||
'2020-09-20T01:30:00.000Z',
|
||||
'2020-09-21T02:30:00.000Z',
|
||||
'2020-09-22T03:30:00.000Z',
|
||||
'2020-09-23T04:30:00.000Z',
|
||||
'2020-09-24T05:30:00.000Z',
|
||||
'2020-09-25T06:30:00.000Z',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
y: {
|
||||
formatter: asDollar,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
customersChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
export const valueSingle = 0
|
||||
|
||||
export const optionsSingle = ['Last week', 'Last 30 days', 'Last 60 days', 'Last 90 days']
|
||||
|
||||
export const flexRowsOrders = [
|
||||
{
|
||||
id: 0,
|
||||
picture: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
username: 'Mary L.',
|
||||
orderId: '#158456',
|
||||
date: 'Oct 31, 2020',
|
||||
amount: 863.42,
|
||||
status: 'paid',
|
||||
tracking: 'TR-7295',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
picture: 'https://media.cssninja.io/content/avatars/22.jpg',
|
||||
username: 'Jimmy H.',
|
||||
orderId: '#15893',
|
||||
date: 'Oct 31, 2020',
|
||||
amount: 128.0,
|
||||
status: 'paid',
|
||||
tracking: 'TR-6259',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
username: 'Melany W.',
|
||||
orderId: '#155848',
|
||||
date: 'Oct 31, 2020',
|
||||
amount: 236.79,
|
||||
status: 'pending',
|
||||
tracking: undefined,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
username: 'Joshua S.',
|
||||
orderId: '#154736',
|
||||
date: 'Oct 30, 2020',
|
||||
amount: 98.31,
|
||||
status: 'paid',
|
||||
tracking: 'TR-48951',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
username: 'Tara S.',
|
||||
orderId: '#158315',
|
||||
date: 'Oct 30, 2020',
|
||||
amount: 112.0,
|
||||
status: 'paid',
|
||||
tracking: 'TR-48555',
|
||||
},
|
||||
]
|
||||
@@ -1,45 +0,0 @@
|
||||
export function useProductReturnsChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const productReturnsChartOptions = shallowRef({
|
||||
series: [65],
|
||||
chart: {
|
||||
height: 140,
|
||||
type: 'radialBar',
|
||||
offsetX: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '75%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false,
|
||||
fontSize: '12px',
|
||||
fontWeight: 400,
|
||||
offsetY: 5,
|
||||
color: themeColors.grey,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontWeight: 600,
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
color: themeColors.lime,
|
||||
fontSize: '16px',
|
||||
offsetY: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Progress'],
|
||||
})
|
||||
|
||||
return {
|
||||
productReturnsChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
export function useRevenueChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const revenueChartsOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [10835, 40214, 36257, 51411, 45697, 61221, 65295, 91512, 75648],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: asDollar,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
revenueChartsOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
export function useShippingCharts() {
|
||||
const themeColors = useThemeColors()
|
||||
const freeShippingChartOptions = shallowRef({
|
||||
series: [31],
|
||||
chart: {
|
||||
height: 102,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.info],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
const groundShippingChartOptions = shallowRef({
|
||||
series: [53],
|
||||
chart: {
|
||||
height: 102,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
const nextDayAirChartOptions = shallowRef({
|
||||
series: [84],
|
||||
chart: {
|
||||
height: 102,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.green],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
return {
|
||||
freeShippingChartOptions,
|
||||
groundShippingChartOptions,
|
||||
nextDayAirChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
export function useSparksCharts() {
|
||||
const themeColors = useThemeColors()
|
||||
const spark1 = shallowRef({
|
||||
chart: {
|
||||
id: 'sparkline1',
|
||||
type: 'line',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: 'sparklines',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Sales',
|
||||
data: [2565, 6126, 4271, 5249, 2245, 4424, 1752, 3996, 976, 2157],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: [3],
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
labels: {
|
||||
minWidth: 100,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right',
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.info],
|
||||
})
|
||||
|
||||
const spark2 = shallowRef({
|
||||
chart: {
|
||||
id: 'sparkline2',
|
||||
type: 'line',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: 'sparklines',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [12.2, 14.5, 2.5, 47.5, 32.5, 44.5, 14.8, 55.5, 41.3, 69.7],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: [3],
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
labels: {
|
||||
minWidth: 100,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right',
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
formatter: asKDollar,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple],
|
||||
})
|
||||
|
||||
const spark3 = shallowRef({
|
||||
chart: {
|
||||
id: 'sparkline3',
|
||||
type: 'line',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: 'sparklines',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'New Orders',
|
||||
data: [4457, 4533, 7274, 3272, 5876, 3271, 4614, 3553, 4835, 1579],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: [3],
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right',
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.green],
|
||||
xaxis: {
|
||||
crosshairs: {
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
labels: {
|
||||
minWidth: 100,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const spark4 = shallowRef({
|
||||
chart: {
|
||||
id: 'sparkline4',
|
||||
type: 'line',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: 'sparklines',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Abandonned',
|
||||
data: [1412, 725, 427, 655, 145, 325, 197, 584, 424, 651],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: [3],
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right',
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.orange],
|
||||
xaxis: {
|
||||
crosshairs: {
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
labels: {
|
||||
minWidth: 100,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
spark1,
|
||||
spark2,
|
||||
spark3,
|
||||
spark4,
|
||||
}
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
export function useSupportCharts() {
|
||||
const themeColors = useThemeColors()
|
||||
const activeTicketsChartOptions = shallowRef({
|
||||
series: [57],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
// offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
track: {
|
||||
background: '#e7e7e7',
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
offsetY: -2,
|
||||
fontSize: '22px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91],
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
})
|
||||
|
||||
const escalatedChartOptions = shallowRef({
|
||||
series: [36],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
// offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
track: {
|
||||
background: '#e7e7e7',
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
offsetY: -2,
|
||||
fontSize: '22px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91],
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
})
|
||||
|
||||
const closedTicketsChartOptions = shallowRef({
|
||||
series: [88],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
// offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.green],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
track: {
|
||||
background: '#e7e7e7',
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
offsetY: -2,
|
||||
fontSize: '22px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91],
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
})
|
||||
|
||||
return {
|
||||
activeTicketsChartOptions,
|
||||
escalatedChartOptions,
|
||||
closedTicketsChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
export const foodPills = [
|
||||
{
|
||||
id: 0,
|
||||
icon: '/images/icons/food/icon-1.svg',
|
||||
label: 'All',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
icon: '/images/icons/food/icon-2.svg',
|
||||
label: 'Pizza',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/images/icons/food/icon-3.svg',
|
||||
label: 'Asian',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '/images/icons/food/icon-4.svg',
|
||||
label: 'Fast',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '/images/icons/food/icon-5.svg',
|
||||
label: 'Grills',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: '/images/icons/food/icon-6.svg',
|
||||
label: 'Cakes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: '/images/icons/food/icon-7.svg',
|
||||
label: 'Thai',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
icon: '/images/icons/food/icon-8.svg',
|
||||
label: 'Sushi',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
icon: '/images/icons/food/icon-9.svg',
|
||||
label: 'Fruits',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
icon: '/images/icons/food/icon-10.svg',
|
||||
label: 'Veggie',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
icon: '/images/icons/food/icon-11.svg',
|
||||
label: 'Brunch',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
icon: '/images/icons/food/icon-12.svg',
|
||||
label: 'Pasta',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
icon: '/images/icons/food/icon-13.svg',
|
||||
label: 'Fish',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
icon: '/images/icons/food/icon-1.svg',
|
||||
label: 'All',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
icon: '/images/icons/food/icon-2.svg',
|
||||
label: 'Pizza',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/images/icons/food/icon-3.svg',
|
||||
label: 'Asian',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: '/images/icons/food/icon-4.svg',
|
||||
label: 'Fast',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '/images/icons/food/icon-5.svg',
|
||||
label: 'Grills',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: '/images/icons/food/icon-6.svg',
|
||||
label: 'Cakes',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: '/images/icons/food/icon-7.svg',
|
||||
label: 'Thai',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
icon: '/images/icons/food/icon-8.svg',
|
||||
label: 'Sushi',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
icon: '/images/icons/food/icon-9.svg',
|
||||
label: 'Fruits',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
icon: '/images/icons/food/icon-10.svg',
|
||||
label: 'Veggie',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
icon: '/images/icons/food/icon-11.svg',
|
||||
label: 'Brunch',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
icon: '/images/icons/food/icon-12.svg',
|
||||
label: 'Pasta',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
icon: '/images/icons/food/icon-13.svg',
|
||||
label: 'Fish',
|
||||
},
|
||||
]
|
||||
|
||||
export const restaurants = [
|
||||
{
|
||||
id: 0,
|
||||
name: 'Mario\'s place',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/1.jpg',
|
||||
deliveryTime: 45,
|
||||
category: 'Pizza',
|
||||
icon: '/images/icons/food/icon-2.svg',
|
||||
rating: 4.9,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'Jimmy\'s Downtown',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/2.jpg',
|
||||
deliveryTime: 30,
|
||||
category: 'Fast',
|
||||
icon: '/images/icons/food/icon-4.svg',
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Fruity Loops',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/3.jpg',
|
||||
deliveryTime: 45,
|
||||
category: 'Fruits',
|
||||
icon: '/images/icons/food/icon-9.svg',
|
||||
rating: 4.8,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'The Green Heaven',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/4.jpg',
|
||||
deliveryTime: 20,
|
||||
category: 'Veggie',
|
||||
icon: '/images/icons/food/icon-10.svg',
|
||||
rating: 5.0,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Salad Bar',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/5.jpg',
|
||||
deliveryTime: 30,
|
||||
category: 'Veggie',
|
||||
icon: '/images/icons/food/icon-10.svg',
|
||||
rating: 4.8,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Little Italy',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/6.jpg',
|
||||
deliveryTime: 50,
|
||||
category: 'Pasta',
|
||||
icon: '/images/icons/food/icon-12.svg',
|
||||
rating: 1.1,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'The Noodle Bar',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/7.jpg',
|
||||
deliveryTime: 15,
|
||||
category: 'Thai',
|
||||
icon: '/images/icons/food/icon-7.svg',
|
||||
rating: 4.9,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Jerry\'s Epic Burger',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/8.jpg',
|
||||
deliveryTime: 20,
|
||||
category: 'Fast',
|
||||
icon: '/images/icons/food/icon-4.svg',
|
||||
rating: 5.0,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Meals From The Sea',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/9.jpg',
|
||||
deliveryTime: 55,
|
||||
category: 'Fish',
|
||||
icon: '/images/icons/food/icon-13.svg',
|
||||
rating: 1.7,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'Delicious Little Things',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/10.jpg',
|
||||
deliveryTime: 45,
|
||||
category: 'Cakes',
|
||||
icon: '/images/icons/food/icon-6.svg',
|
||||
rating: 5.0,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: 'Pollos Hermanos',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/11.jpg',
|
||||
deliveryTime: 15,
|
||||
category: 'Fast',
|
||||
icon: '/images/icons/food/icon-4.svg',
|
||||
rating: 5.0,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: 'Iced & Delicious',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/12.jpg',
|
||||
deliveryTime: 30,
|
||||
category: 'Cakes',
|
||||
icon: '/images/icons/food/icon-6.svg',
|
||||
rating: 4.2,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: 'Osaka Sushi',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/13.jpg',
|
||||
deliveryTime: 30,
|
||||
category: 'Sushi',
|
||||
icon: '/images/icons/food/icon-8.svg',
|
||||
rating: 4.9,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: 'Quick Treats',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/14.jpg',
|
||||
deliveryTime: 10,
|
||||
category: 'Veggie',
|
||||
icon: '/images/icons/food/icon-10.svg',
|
||||
rating: 3.8,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: 'Sam\' Dwich',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/15.jpg',
|
||||
deliveryTime: 30,
|
||||
category: 'Veggie',
|
||||
icon: '/images/icons/food/icon-10.svg',
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: 'Sunchine Cookies',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/16.jpg',
|
||||
deliveryTime: 45,
|
||||
category: 'Cakes',
|
||||
icon: '/images/icons/food/icon-6.svg',
|
||||
rating: 4.9,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: 'O\' Fried Chicken',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/17.jpg',
|
||||
deliveryTime: 45,
|
||||
category: 'Fast',
|
||||
icon: '/images/icons/food/icon-4.svg',
|
||||
rating: 1.0,
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
name: 'Bangkok Woks',
|
||||
picture: 'https://media.cssninja.io/content/photos/food/18.jpg',
|
||||
deliveryTime: 30,
|
||||
category: 'Thai',
|
||||
icon: '/images/icons/food/icon-7.svg',
|
||||
rating: 4.5,
|
||||
},
|
||||
]
|
||||
@@ -1,155 +0,0 @@
|
||||
export const jobs = [
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/airbnb.svg',
|
||||
title: 'UI / UX Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/slack.svg',
|
||||
title: 'Sr. Product Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/github.svg',
|
||||
title: 'UI / UX Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/google.svg',
|
||||
title: 'Product Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/facebook.svg',
|
||||
title: 'UI / UX Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/tnw.svg',
|
||||
title: 'Web Developer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/dribbble.svg',
|
||||
title: 'UI Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/atlassian.svg',
|
||||
title: 'UI / UX Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
logo: 'https://media.cssninja.io/content/photos/brands/gitlab.svg',
|
||||
title: 'UI / UX Designer',
|
||||
description:
|
||||
'The User Experience Designer position exists to create compelling and digital user experience through excellent design...',
|
||||
categories: [
|
||||
{
|
||||
name: 'Full Time',
|
||||
},
|
||||
{
|
||||
name: 'Min. 1 Year',
|
||||
},
|
||||
{
|
||||
name: 'Senior Level',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -1,3 +0,0 @@
|
||||
export const valueSingle = 1
|
||||
|
||||
export const optionsSingle = ['Last week', 'Last 30 days', 'Last 60 days', 'Last 90 days']
|
||||
@@ -1,81 +0,0 @@
|
||||
export function useGroupedSocialChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const creativityRadialOptions = shallowRef({
|
||||
series: [31],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.info],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
const engagmentRadialOptions = shallowRef({
|
||||
series: [53],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
const popularityRadialOptions = shallowRef({
|
||||
series: [84],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.green],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
return {
|
||||
creativityRadialOptions,
|
||||
engagmentRadialOptions,
|
||||
popularityRadialOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
export function useInfluenceChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const influenceChartOptions = shallowRef({
|
||||
series: [65],
|
||||
chart: {
|
||||
height: 170,
|
||||
type: 'radialBar',
|
||||
offsetX: -15,
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.yellow, themeColors.secondary],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: themeColors.grey,
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: 5,
|
||||
fontSize: '16px',
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
fontWeight: '500',
|
||||
color: undefined,
|
||||
formatter: asPercent,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91],
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4,
|
||||
},
|
||||
labels: ['(30 days)'],
|
||||
})
|
||||
|
||||
return {
|
||||
influenceChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
export function useReputationChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const reputationChartOptions = shallowRef({
|
||||
series: [65],
|
||||
chart: {
|
||||
height: 140,
|
||||
type: 'radialBar',
|
||||
offsetX: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '75%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false,
|
||||
fontSize: '12px',
|
||||
fontWeight: 400,
|
||||
offsetY: 5,
|
||||
color: themeColors.grey,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontWeight: 600,
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
color: themeColors.lime,
|
||||
fontSize: '16px',
|
||||
offsetY: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Progress'],
|
||||
})
|
||||
|
||||
return {
|
||||
reputationChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
export const avatarStack1 = [
|
||||
{
|
||||
id: 12,
|
||||
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
initials: 'JS',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
picture: 'https://media.cssninja.io/content/avatars/22.jpg',
|
||||
initials: 'JH',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
picture: 'https://media.cssninja.io/content/avatars/40.jpg',
|
||||
initials: 'JM',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
export const avatarStack2 = [
|
||||
{
|
||||
id: 7,
|
||||
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
initials: 'AC',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
picture: 'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
initials: 'IV',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
picture: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
initials: 'EC',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
export const avatarStack3 = [
|
||||
{
|
||||
id: 32,
|
||||
picture: 'https://media.cssninja.io/content/avatars/32.jpg',
|
||||
initials: 'JK',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
picture: 'https://media.cssninja.io/content/avatars/22.jpg',
|
||||
initials: 'JH',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
initials: 'EK',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
export const avatarStack4 = [
|
||||
{
|
||||
id: 27,
|
||||
picture: 'https://media.cssninja.io/content/avatars/27.jpg',
|
||||
initials: 'CE',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
picture: 'https://media.cssninja.io/content/avatars/16.jpg',
|
||||
initials: 'JG',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
picture: 'https://media.cssninja.io/content/avatars/29.jpg',
|
||||
initials: 'HC',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
export const topicList = [
|
||||
{
|
||||
id: 0,
|
||||
icon: 'fa-solid:biking',
|
||||
color: 'yellow',
|
||||
name: 'Biking',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
icon: 'fa-solid:running',
|
||||
color: 'orange',
|
||||
name: 'Running',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: 'fa-solid:skiing',
|
||||
color: 'green',
|
||||
name: 'Skiing',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: 'fa-solid:swimmer',
|
||||
color: 'info',
|
||||
name: 'Swimming',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: 'fa-solid:dumbbell',
|
||||
color: 'purple',
|
||||
name: 'Workout',
|
||||
category: 'Sports',
|
||||
},
|
||||
]
|
||||
@@ -1,90 +0,0 @@
|
||||
function generateDayWiseTimeSeries(
|
||||
baseval: number,
|
||||
count: number,
|
||||
yrange: { min: number, max: number },
|
||||
) {
|
||||
let i = 0
|
||||
const series = []
|
||||
while (i < count) {
|
||||
const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
|
||||
|
||||
series.push([baseval, y])
|
||||
baseval += 86400000
|
||||
i++
|
||||
}
|
||||
return series
|
||||
}
|
||||
|
||||
export function useEnergyChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const energyChartOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Tonic',
|
||||
data: generateDayWiseTimeSeries(new Date('Oct 11 2020 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Tantra',
|
||||
data: generateDayWiseTimeSeries(new Date('Oct 11 2020 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'Vital',
|
||||
data: generateDayWiseTimeSeries(new Date('Oct 11 2020 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60,
|
||||
}),
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
type: 'xy',
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.lime, themeColors.purple],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
show: false,
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
max: 70,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
energyChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
export function useOverallChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const overallChartOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Condition (pt)',
|
||||
data: [31, 40, 28, 51, 42, 109, 100],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 280,
|
||||
offsetX: 20,
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'straight',
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
labels: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
yaxis: {
|
||||
opposite: true,
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'left',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
overallChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
export function useOxygenChart() {
|
||||
const themeColors = useThemeColors()
|
||||
const oxygenChartOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Variation (pt)',
|
||||
data: [23, 26, 10, 7, 11, 18, 16],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: asPercent,
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#304758'],
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
position: 'top',
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
colorFrom: '#D8E3F0',
|
||||
colorTo: '#BED1E6',
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: asPercent,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple],
|
||||
})
|
||||
|
||||
return {
|
||||
oxygenChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
export function useProgressChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const progressChartOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Progress (pt)',
|
||||
data: [31, 40, 28, 51, 42, 109, 100],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 280,
|
||||
offsetX: 20,
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
labels: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
yaxis: {
|
||||
opposite: true,
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'left',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
progressChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,315 +0,0 @@
|
||||
export const members = {
|
||||
count: 10,
|
||||
list: [
|
||||
{
|
||||
id: 33,
|
||||
avatar: 'https://media.cssninja.io/content/avatars/33.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
username: 'Harvey M.',
|
||||
fullName: 'Harvey Miller',
|
||||
initials: 'HM',
|
||||
color: 'success',
|
||||
location: 'Los Angeles, CA',
|
||||
position: 'Web Developer',
|
||||
bio: 'This is a nice user description that we can use as demo content.',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
avatar: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
username: 'Joshua S.',
|
||||
fullName: 'Joshua Stevens',
|
||||
initials: 'JS',
|
||||
color: 'success',
|
||||
location: 'Los Angeles, CA',
|
||||
position: 'Backend Developer',
|
||||
bio: 'This is a nice user description that we can use as demo content.',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
avatar: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
username: 'Mary L.',
|
||||
fullName: 'Mary Lebowski',
|
||||
initials: 'ML',
|
||||
color: 'h-yellow',
|
||||
location: 'San Diego, CA',
|
||||
position: 'Project Manager',
|
||||
bio: 'This is a nice user description that we can use as demo content.',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
avatar: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
username: 'Alice C.',
|
||||
fullName: 'Alice Carasca',
|
||||
initials: 'AC',
|
||||
color: 'info',
|
||||
location: 'San Diego, CA',
|
||||
position: 'Software Engineer',
|
||||
bio: 'This is a nice user description that we can use as demo content.',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const featuredLeft = {
|
||||
id: 1,
|
||||
videos: [
|
||||
{
|
||||
id: 1,
|
||||
new: true,
|
||||
size: 'large',
|
||||
poster: 'https://source.unsplash.com/-VHQ0cw2euA/800x600',
|
||||
name: 'The best ways to do a nice team building',
|
||||
duration: '01:43',
|
||||
author: {
|
||||
name: 'Erik K.',
|
||||
avatar: '/images/avatars/svg/vuero-1.svg',
|
||||
},
|
||||
comments: 2,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/S2jw81lfrG0/800x600',
|
||||
name: 'Bake beautiful and tasty cupcakes',
|
||||
duration: '05:17',
|
||||
author: {
|
||||
name: 'Alice C.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
},
|
||||
comments: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/7F65HDP0-E0/800x600',
|
||||
name: 'My last trip to Rio de Janeiro in 3 min',
|
||||
duration: '03:12',
|
||||
author: {
|
||||
name: 'Tara S.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
},
|
||||
comments: 0,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const featuredRight = {
|
||||
id: 2,
|
||||
videos: [
|
||||
{
|
||||
id: 4,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/W_MUqtuHwyY/800x600',
|
||||
name: 'You must visit those places',
|
||||
duration: '04:24',
|
||||
author: {
|
||||
name: 'Joshua S.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
},
|
||||
comments: 5,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/h4i9G-de7Po/800x600',
|
||||
name: 'The best workout guide for women',
|
||||
duration: '04:24',
|
||||
author: {
|
||||
name: 'Greta K.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/19.jpg',
|
||||
},
|
||||
comments: 3,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/_CFv3bntQlQ/800x600',
|
||||
name: '10 incredible waves surfed by pros',
|
||||
duration: '07:11',
|
||||
author: {
|
||||
name: 'Mary L.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
},
|
||||
comments: 3,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/sp-p7uuT0tw/800x600',
|
||||
name: 'Enchanting rain forests around the world',
|
||||
duration: '12:37',
|
||||
author: {
|
||||
name: 'Esteban C.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
},
|
||||
comments: 9,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const feed = [
|
||||
{
|
||||
id: 8,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/jmURdhtm7Ng/800x600',
|
||||
name: 'The ultimate guide to beard care',
|
||||
duration: '04:24',
|
||||
author: {
|
||||
name: 'Joshua S.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
},
|
||||
comments: 5,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/j7lTi6MtYgk/800x600',
|
||||
name: 'Test driving the latest Tesla release',
|
||||
duration: '12:18',
|
||||
author: {
|
||||
name: 'Mary L.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
},
|
||||
comments: 4,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/RN6ts8IZ4_0/800x600',
|
||||
name: '5 places you should definitely check',
|
||||
duration: '06:19',
|
||||
author: {
|
||||
name: 'Carmen E.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/27.jpg',
|
||||
},
|
||||
comments: 8,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/sS9AkuTE9aA/800x600',
|
||||
name: 'Why you should plan first before shopping',
|
||||
duration: '03:49',
|
||||
author: {
|
||||
name: 'Elizabeth F.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/21.jpg',
|
||||
},
|
||||
comments: 11,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/_h1IO0AHilM/800x600',
|
||||
name: '10 asian cities you should travel to',
|
||||
duration: '07:21',
|
||||
author: {
|
||||
name: 'Irina V.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
},
|
||||
comments: 9,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/xTkxZN_DV8o/800x600',
|
||||
name: 'Our awesome 6 months worlwide trip',
|
||||
duration: '15:39',
|
||||
author: {
|
||||
name: 'Jeanne M.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/40.jpg',
|
||||
},
|
||||
comments: 2,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/ilvDG96PRWo/800x600',
|
||||
name: 'Traditional blue houses in Morocco',
|
||||
duration: '11:16',
|
||||
author: {
|
||||
name: 'Dwayne H.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/22.jpg',
|
||||
},
|
||||
comments: 0,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/H8w5w4AiY1Q/800x600',
|
||||
name: '8 awesome activies to do with the family',
|
||||
duration: '.8:43',
|
||||
author: {
|
||||
name: 'Jason G.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/16.jpg',
|
||||
},
|
||||
comments: 6,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/Oalh2MojUuk/800x600',
|
||||
name: 'Choosing the right development method',
|
||||
duration: '07:16',
|
||||
author: {
|
||||
name: 'Joshua S.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
},
|
||||
comments: 5,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/7okkFhxrxNw/800x600',
|
||||
name: 'How peer programming improves productivity',
|
||||
duration: '11:17',
|
||||
author: {
|
||||
name: 'Melany W.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
},
|
||||
comments: 12,
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/Z9VQmkpxLNU/800x600',
|
||||
name: 'An introduction to the art of rugby',
|
||||
duration: '11:17',
|
||||
author: {
|
||||
name: 'Clément D.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/30.jpg',
|
||||
},
|
||||
comments: 3,
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
new: false,
|
||||
size: 'regular',
|
||||
poster: 'https://source.unsplash.com/8YG31Xn4dSw/800x600',
|
||||
name: 'A guide to improving your customer calls',
|
||||
duration: '08:49',
|
||||
author: {
|
||||
name: 'Harvey M.',
|
||||
avatar: 'https://media.cssninja.io/content/avatars/33.jpg',
|
||||
},
|
||||
comments: 5,
|
||||
},
|
||||
]
|
||||
@@ -1,63 +0,0 @@
|
||||
export function useCustomersCharts() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const customersOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Returning',
|
||||
data: [31, 40, 28, 51, 42, 109, 100],
|
||||
},
|
||||
{
|
||||
name: 'Newcomers',
|
||||
data: [11, 32, 45, 32, 34, 52, 41],
|
||||
},
|
||||
{
|
||||
name: 'Abandonned',
|
||||
data: [78, 53, 36, 10, 14, 5, 2],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 295,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.info, themeColors.lime],
|
||||
title: {
|
||||
text: 'Customers',
|
||||
align: 'left',
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2020-09-19T00:00:00.000Z',
|
||||
'2020-09-20T01:30:00.000Z',
|
||||
'2020-09-21T02:30:00.000Z',
|
||||
'2020-09-22T03:30:00.000Z',
|
||||
'2020-09-23T04:30:00.000Z',
|
||||
'2020-09-24T05:30:00.000Z',
|
||||
'2020-09-25T06:30:00.000Z',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
customersOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
export function useProfitChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const profitChartOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Ratio',
|
||||
data: [2.3, 3.1, 4.0, 10.1, 4.0],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 265,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: string) {
|
||||
return val + '%'
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#304758'],
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
position: 'top',
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
colorFrom: '#D8E3F0',
|
||||
colorTo: '#BED1E6',
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val: string) {
|
||||
return val + '%'
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime, themeColors.secondary, themeColors.orange],
|
||||
title: {
|
||||
text: 'Profit Evolution',
|
||||
align: 'left',
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
profitChartOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
export function useTeamGaugeChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const teamGaugeOptions = shallowRef({
|
||||
series: [76],
|
||||
title: {
|
||||
text: 'Team Efficiency',
|
||||
},
|
||||
chart: {
|
||||
height: 455,
|
||||
type: 'radialBar',
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [
|
||||
themeColors.purple,
|
||||
themeColors.secondary,
|
||||
themeColors.orange,
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
track: {
|
||||
background: '#e7e7e7',
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: -2,
|
||||
fontSize: '22px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 80,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91],
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
})
|
||||
|
||||
return {
|
||||
teamGaugeOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
export function useTaskCompletionChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const completionOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Pending',
|
||||
data: [31, 40, 28, 51, 42, 109, 100],
|
||||
},
|
||||
{
|
||||
name: 'Completed',
|
||||
data: [11, 32, 45, 32, 34, 52, 41],
|
||||
},
|
||||
{
|
||||
name: 'Blocked',
|
||||
data: [78, 53, 36, 10, 14, 5, 2],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 295,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.info, themeColors.lime],
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2020-09-19T00:00:00.000Z',
|
||||
'2020-09-20T01:30:00.000Z',
|
||||
'2020-09-21T02:30:00.000Z',
|
||||
'2020-09-22T03:30:00.000Z',
|
||||
'2020-09-23T04:30:00.000Z',
|
||||
'2020-09-24T05:30:00.000Z',
|
||||
'2020-09-25T06:30:00.000Z',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
completionOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
export function useTeamEfficiencyChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'Design',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
|
||||
},
|
||||
{
|
||||
name: 'Development',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
|
||||
},
|
||||
{
|
||||
name: 'Management',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
|
||||
},
|
||||
].map((s) => {
|
||||
return {
|
||||
name: s.name,
|
||||
data: s.data.map((d) => {
|
||||
return d - 70
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const barOptions = shallowRef({
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.yellow, themeColors.lime],
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape: 'rounded',
|
||||
columnWidth: '55%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
series: series,
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (val: string) {
|
||||
return val + 70
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val: string) {
|
||||
return val + 'hrs'
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
barOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
export const avatarStack1 = [
|
||||
{
|
||||
id: 18,
|
||||
picture: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
initials: 'EC',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
picture: 'https://media.cssninja.io/content/avatars/16.jpg',
|
||||
initials: 'JG',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
picture: 'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
initials: 'IV',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
export const avatarStack2 = [
|
||||
{
|
||||
id: 21,
|
||||
picture: 'https://media.cssninja.io/content/avatars/21.jpg',
|
||||
initials: 'EF',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
picture: 'https://media.cssninja.io/content/avatars/32.jpg',
|
||||
initials: 'JK',
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
|
||||
export const avatarStack3 = [
|
||||
{
|
||||
id: 112,
|
||||
picture: undefined,
|
||||
initials: 'NL',
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
|
||||
export const avatarStack4 = [
|
||||
{
|
||||
id: 13,
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
initials: 'TS',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
initials: 'MW',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 38,
|
||||
picture: 'https://media.cssninja.io/content/avatars/38.jpg',
|
||||
initials: 'CD',
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
@@ -1,55 +0,0 @@
|
||||
export function useInterviewsChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const interviewsOptions = shallowRef({
|
||||
series: [
|
||||
{
|
||||
name: 'Interviews',
|
||||
data: [31, 40, 28, 51, 42, 109, 100],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 200,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.info, themeColors.orange],
|
||||
title: {
|
||||
text: 'Interviews',
|
||||
align: 'left',
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
width: [2, 2, 2],
|
||||
curve: 'smooth',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: [
|
||||
'2020-09-19T00:00:00.000Z',
|
||||
'2020-09-20T01:30:00.000Z',
|
||||
'2020-09-21T02:30:00.000Z',
|
||||
'2020-09-22T03:30:00.000Z',
|
||||
'2020-09-23T04:30:00.000Z',
|
||||
'2020-09-24T05:30:00.000Z',
|
||||
'2020-09-25T06:30:00.000Z',
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
interviewsOptions,
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import type { Chart } from 'billboard.js'
|
||||
|
||||
import { gauge } from 'billboard.js'
|
||||
|
||||
export function useProgressChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const progressGaugeOptions = shallowRef({
|
||||
data: {
|
||||
columns: [['data', 91.4]],
|
||||
type: gauge(),
|
||||
},
|
||||
gauge: {
|
||||
label: {
|
||||
// return empty string
|
||||
extents: () => '',
|
||||
},
|
||||
},
|
||||
color: {
|
||||
pattern: [
|
||||
themeColors.purple,
|
||||
themeColors.info,
|
||||
themeColors.orange,
|
||||
themeColors.lime,
|
||||
],
|
||||
threshold: {
|
||||
values: [30, 60, 90, 100],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
height: 90,
|
||||
width: 90,
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'inset',
|
||||
},
|
||||
})
|
||||
|
||||
// For demo purpose
|
||||
const onprogressGaugeReady = (billboard: Chart) => {
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 10]],
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 50]],
|
||||
})
|
||||
}, 2000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 70]],
|
||||
})
|
||||
}, 3000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 0]],
|
||||
})
|
||||
}, 4000)
|
||||
|
||||
setTimeout(function () {
|
||||
billboard.load({
|
||||
columns: [['data', 100]],
|
||||
})
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
return {
|
||||
progressGaugeOptions,
|
||||
onprogressGaugeReady,
|
||||
}
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
export const userStack = [
|
||||
{
|
||||
id: 5,
|
||||
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
initials: 'ML',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
picture: 'https://media.cssninja.io/content/avatars/18.jpg',
|
||||
initials: 'EC',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
// picture: 'https://media.cssninja.io/content/avatars/26.jpg',
|
||||
initials: 'CW',
|
||||
color: 'h-purple',
|
||||
},
|
||||
{
|
||||
id: 100,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 108,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 109,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 110,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 111,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 112,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 113,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 114,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 115,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
]
|
||||
@@ -1,133 +0,0 @@
|
||||
export function useSalesBarChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const barData = shallowRef([
|
||||
{
|
||||
x: 'Jan',
|
||||
y: 322,
|
||||
},
|
||||
{
|
||||
x: 'Feb',
|
||||
y: 459,
|
||||
},
|
||||
{
|
||||
x: 'Mar',
|
||||
y: 212,
|
||||
},
|
||||
{
|
||||
x: 'Apr',
|
||||
y: 345,
|
||||
},
|
||||
{
|
||||
x: 'May',
|
||||
y: 111,
|
||||
},
|
||||
{
|
||||
x: 'Jun',
|
||||
y: 189,
|
||||
},
|
||||
{
|
||||
x: 'Jul',
|
||||
y: 498,
|
||||
},
|
||||
{
|
||||
x: 'Aug',
|
||||
y: 612,
|
||||
},
|
||||
{
|
||||
x: 'Sep',
|
||||
y: 451,
|
||||
},
|
||||
{
|
||||
x: 'Oct',
|
||||
y: 248,
|
||||
},
|
||||
{
|
||||
x: 'Nov',
|
||||
y: 306,
|
||||
},
|
||||
{
|
||||
x: 'Dec',
|
||||
y: 366,
|
||||
},
|
||||
])
|
||||
|
||||
const barData2 = shallowRef([
|
||||
{
|
||||
x: 'Jan',
|
||||
y: 25,
|
||||
},
|
||||
{
|
||||
x: 'Feb',
|
||||
y: 49,
|
||||
},
|
||||
{
|
||||
x: 'Mar',
|
||||
y: 36,
|
||||
},
|
||||
{
|
||||
x: 'Apr',
|
||||
y: 84,
|
||||
},
|
||||
{
|
||||
x: 'May',
|
||||
y: 64,
|
||||
},
|
||||
{
|
||||
x: 'Jun',
|
||||
y: 131,
|
||||
},
|
||||
{
|
||||
x: 'Jul',
|
||||
y: 48,
|
||||
},
|
||||
{
|
||||
x: 'Aug',
|
||||
y: 144,
|
||||
},
|
||||
{
|
||||
x: 'Sep',
|
||||
y: 96,
|
||||
},
|
||||
{
|
||||
x: 'Oct',
|
||||
y: 11,
|
||||
},
|
||||
{
|
||||
x: 'Nov',
|
||||
y: 31,
|
||||
},
|
||||
{
|
||||
x: 'Dec',
|
||||
y: 8,
|
||||
},
|
||||
])
|
||||
|
||||
const salesBarOptions = reactive<any>({
|
||||
series: [],
|
||||
chart: {
|
||||
height: 205,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple, themeColors.lime],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
tickPlacement: 'on',
|
||||
labels: {
|
||||
rotate: -45,
|
||||
rotateAlways: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return { barData, barData2, salesBarOptions }
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
export function useSalesRadialGroupChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const radialGroup1Options = shallowRef({
|
||||
series: [31],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.info],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
const radialGroup2Options = shallowRef({
|
||||
series: [53],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.purple],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
const radialGroup3Options = shallowRef({
|
||||
series: [84],
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'radialBar',
|
||||
offsetY: -10,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.lime],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '35%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: [''],
|
||||
})
|
||||
|
||||
return {
|
||||
radialGroup1Options,
|
||||
radialGroup2Options,
|
||||
radialGroup3Options,
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
export function useSalesRevenueRadialChart() {
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const salesRevenuesRadialOptions = shallowRef({
|
||||
series: [65],
|
||||
chart: {
|
||||
height: 155,
|
||||
type: 'radialBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: [themeColors.info],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '75%',
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false,
|
||||
fontSize: '12px',
|
||||
fontWeight: 400,
|
||||
offsetY: 5,
|
||||
color: themeColors.grey,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontWeight: 600,
|
||||
fontFamily: '"Roboto Flex Variable", sans-serif',
|
||||
color: themeColors.info,
|
||||
fontSize: '16px',
|
||||
offsetY: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labels: ['Progress'],
|
||||
})
|
||||
|
||||
return {
|
||||
salesRevenuesRadialOptions,
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,109 +0,0 @@
|
||||
export const demoMarkdown = `# On Escape's Vue 2 to Svelte Migration
|
||||
|
||||
> **Note:**
|
||||
> Preview from https://github.com/vuejs/blog/blob/master/posts/on-migration.md
|
||||
|
||||
Recently, folks at Escape shared a [blog post](https://escape.tech/blog/from-vue2-to-svelte/) talking about their migration from Vue 2 to Svelte, and compared Vue 3 with Svelte. We found that the article contained a number of inaccuracies. In this post, we will share some thoughts from our perspective and hope to clarify the potential misconceptions the post could give rise to.
|
||||
|
||||
---
|
||||
|
||||
Before we dive into the details, we would like to emphasize that we respect developers' choice of technology and believe that you should use what makes you more productive. We also have immense respect for the Svelte team, especially for their pursuit of simplicity and conciseness in API design.
|
||||
|
||||
## Clarification Points
|
||||
|
||||
The original post included a comparison chart that contains a number of issues that deserves clarification:
|
||||
|
||||
|
||||
|
||||
### Typing
|
||||
|
||||
> Vue 3 does not supported typed events
|
||||
This has been available since 3.2 ([relevant documentation](https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits)).
|
||||
|
||||
Aside from this, we disagree with the conclusion that "Svelte offers a better typing experience". To our best knowledge, TypeScript support for Vue 3 and Svelte in their current state are fairly comparable.
|
||||
|
||||
### Restricted Global Access
|
||||
|
||||
> Cannot import and use TypeScript enums in a Vue component
|
||||
This is incorrect. Here is [an example](https://sfc.vuejs.org/#eNpVjz0OwjAMha9iZWGBZK8qJBZOkaWNDLQiP4pdQKpyd5y0AyxWPsfPz29Vl5T0a0HVqZ5cnhIDIS/pbMPkU8wMK1xjhAK3HD0ctGEk1kwHG3qzKWRWgNGn58AoBLA2lR6glB8c/9E17GXjrlRHtZme/JD0TDHIWWtV2P2DrOqgdWpP7q5s1YM5UWcM3VwNM5OO+W7kpfMSePKokfxpzPFNmGWxVXWFmBex3AOJFX5aYhcDMWBYfIve7IZjrWOrrurKF/sKa48=). In fact, it works exactly the same between Vue and Svelte.
|
||||
|
||||
### External Reactive Objects
|
||||
|
||||
> Partial (for objects only)
|
||||
This is a bit vague and was not explained further in the post, but all Vue's [reactivity APIs](https://vuejs.org/api/reactivity-core.html), including \`ref\`, \`computed\` and watchers, can be used outside of components to serve as simple cross-component stores.
|
||||
|
||||
### Error Boundaries
|
||||
|
||||
Vue has always provided the capability of capturing errors thrown from descendent component trees in an ancestor component, through the [onErrorCaptured](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) lifecycle hook. This includes errors thrown from async event handlers and lifecycle hooks as well.
|
||||
|
||||
Vue does not have a built-in for handling Promise state directly in the template, but this can be easily achieved with libraries such as [vue-promised](https://github.com/posva/vue-promised).
|
||||
|
||||
### Integrating with Libraries
|
||||
|
||||
> It's simpler to add pure js plugins in Svelte
|
||||
The post included an example of integrating with Prism.js to support this point. However, in Vue it would work exactly the same when using \`<script setup>\`.
|
||||
|
||||
### Meta Frameworks
|
||||
|
||||
The post also compares meta frameworks built on top of Vue and Svelte, namely Nuxt and SvelteKit, and lists Vite as an advantage for SvelteKit. However, Nuxt 3 has just reached stable and also uses Vite by default. Both the Nuxt team and the SvelteKit team have close working relationship with the Vite team.
|
||||
|
||||
## Syntax
|
||||
|
||||
We respect different syntax preferences, but it is also important to discuss the trade-offs between the designs.
|
||||
|
||||
First of all, we do not believe that differences like single vs. double curly braces, element-bound directives vs. mustache-style control flows, or the need of an extra \`<template>\` tag will have substantial impact on your long term productivity. Template syntax is something that will be quickly internalized over time.
|
||||
|
||||
When it comes to reactivity, Svelte does offer a very succinct syntax for declaring and mutating component state, and there are several points worth discussing:
|
||||
|
||||
1. For expressing reactivity, there are three basic concepts: state, derived state, and effects. Svelte uses plain variables for state, and the magic \`$\` symbol for both derived state and effects. Vue uses explicit APIs for declaring each (\`ref\`, \`computed,\` \`watchEffect\`). Some users may prefer magical syntax, while others may prefer explicit APIs - there is room for both camps.
|
||||
|
||||
2. Svelte's compiler-based reactivity limits where such syntax can be used. It cannot be used outside of Svelte components, or in use cases where a build step is not possible. Whereas for Vue, the Composition API can be used the same way in and out of components, or even in no-build-step setups.
|
||||
|
||||
3. Because of (2), Svelte needs to provide an additional set of API (stores) for managing the same reactivity concepts outside of components. Since the two syntaxes are not easily convertible into one another, it creates friction for moving / refactoring logic out of components.
|
||||
|
||||
With that said, we have been experimenting with a feature called [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) in Vue, which allows you to author Vue components like this:
|
||||
|
||||
\`\`\`vue
|
||||
<script setup lang="ts">
|
||||
let count = $ref(0)
|
||||
function increment() {
|
||||
count++
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<button @click="increment">{{ count }}</button>
|
||||
</template>
|
||||
\`\`\`
|
||||
|
||||
It provides a level of brevity similar to Svelte, but is also usable in plain JS/TS files. It's also straightforward to automatically de-sugar the syntax into plain Composition API code.
|
||||
|
||||
## Performance and Bundle Size
|
||||
|
||||
Improved performance and bundle size was mentioned as one of the reasons for the migration. While there is no doubt Svelte is highly performant and lightweight, an improvement over other frameworks isn't necessarily guaranteed. In reality, it could depend on other factors, including actual implementations, room for optimization, and scale of the app.
|
||||
|
||||
For reference, Vue 3 is able to outperform Svelte in the [js-framework-benchmark](https://krausest.github.io/js-framework-benchmark/index.html) with a small amount of optimization. Vue 3 achieves this with a runtime / compiler hybrid rendering model which we call [Compiler-Informed Virtual DOM](https://vuejs.org/guide/extras/rendering-mechanism.html#compiler-informed-virtual-dom). It leverages information that can be known at compile time to optimize runtime performance, while retaining compatibility with manually-written render functions.
|
||||
|
||||
In terms of bundle size, Svelte is great for generating widgets or web components that contain only a single or a few components, but its light runtime size can be offset by its more verbose per-component code output compared to other frameworks. [This research](https://github.com/yyx990803/vue-svelte-size-analysis) shows that Svelte's app bundle size can become a disadvantage in larger scale apps, especially with SSR hydration enabled.
|
||||
|
||||
It should be noted that both Svelte and Vue 3 are most likely performant enough for your use case, and that both frameworks will continue to evolve and improve. The Svelte team has mentioned plans for improved per-component code output size in Svelte 4. On the Vue side, we are also exploring an alternative, more performant compilation strategy (codename: Vapor) that is inspired by [Solid.js](https://www.solidjs.com/). Vapor mode will allow Vue components to be compiled into a format that does not involve the Virtual DOM runtime. It is currently still in research phase, and we will share more details about it in 2023.
|
||||
|
||||
## Retention Data in the State of JS Survey
|
||||
|
||||
In addition, a major point of consideration mentioned involved the satisfaction rating from the State of JavaScript survey. While Svelte definitely deserves its high rating in the survey, using such ratings to decide whether you should migrate your app can impact your team negatively since there are lots of missing context.
|
||||
|
||||
In the survey, the satisfaction rating of a framework is defined as the ratio of number of users who would use it again, compared to those who would not. Note this number is only calculated based on the responses from the users who have used a framework. It should be fair to say that this formula naturally favors newer technologies. In theory, if a framework has only one user and that user reports that they would use it again, the framework would get a perfect 100% score!
|
||||
|
||||
A technology in its early phase primarily attracts users who like the technology by itself. When it goes mainstream, however, it starts to get adopted in larger scale organizations where the tech choice decision is made top-down. This means there will be more and more users who have to work with it regardless of their personal preferences. It also attracts more drive-by users who try it purely out of its popularity, but may not be the target audience. Furthermore, wider adoption challenges the tech in a wider range of scenarios, exposing issues that may only arise in more demanding cases.
|
||||
|
||||
On the other hand, a newer technology will probably not even make it into the survey if it fails to obtain a higher score than existing ones among its early adopters.
|
||||
|
||||
This is in no way meant to diminish the accomplishments of Svelte, nor is it an excuse for us. The Vue 2 to Vue 3 transition didn't go as smoothly as it could, and has definitely affected the satisfaction score. We hope we can turn it around by continuing to improve Vue 3. But hopefully you get the point: the number alone does not fully represent how "good" a framework is, let alone how it suits your use case. Remember that surveys are often subject to many confounding variables and contexts which may not apply to your situation, so be cautious of referring to them as gospel.
|
||||
|
||||
## Conclusion
|
||||
|
||||
At the end of the day, we think Svelte is a great framework and we wish Escape all the best with their work with Svelte! After all, while we wanted to clarify some of the comparison points made, we're all part of the same community and want to help people build amazing products for users.
|
||||
|
||||
---
|
||||
|
||||
Finally, if you have a codebase on Vue 2 and are concerned about the approaching end of life (EOY 2023), migrating isn't necessarily the only choice. Vue 2 is a stable, proven, and battle-tested piece of technology that will continue to work. Make sure to evaluate what your real gains and cost would be before committing to big migrations. For those that need to deal with security compliance, we are partnering with [HeroDevs](https://www.herodevs.com/) to provide paid extended support for Vue 2. If this is something your team will need, please register your interest [here](https://airtable.com/shrj37Zf4ZIfrxFzh).
|
||||
`
|
||||
@@ -1,292 +0,0 @@
|
||||
export const flexRowsBasic = [
|
||||
{
|
||||
emoji: '🚴♂️',
|
||||
color: 'yellow',
|
||||
name: 'Biking',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
emoji: '🏃♀️',
|
||||
color: 'orange',
|
||||
name: 'Running',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
emoji: '🎿',
|
||||
color: 'green',
|
||||
name: 'Skiing',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
emoji: '🏊',
|
||||
color: 'info',
|
||||
name: 'Swimming',
|
||||
category: 'Sports',
|
||||
},
|
||||
{
|
||||
emoji: '🤸',
|
||||
color: 'purple',
|
||||
name: 'Cartwheeling',
|
||||
category: 'Sports',
|
||||
},
|
||||
]
|
||||
|
||||
export const flexRowsContacts = [
|
||||
{
|
||||
id: 0,
|
||||
company: 'Grubspot',
|
||||
type: 'New Lead',
|
||||
industry: 'Software',
|
||||
status: 'Active',
|
||||
contacts: [
|
||||
{
|
||||
id: 0,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
initials: 'AC',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
picture: undefined,
|
||||
initials: 'JP',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
initials: 'EK',
|
||||
color: 'h-purple',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
initials: 'ML',
|
||||
color: 'danger',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
company: 'PhaseBit',
|
||||
type: 'Confirmed',
|
||||
industry: 'Cryptocurrency',
|
||||
status: 'New',
|
||||
contacts: [
|
||||
{
|
||||
id: 4,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'h-purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
company: 'Kokolint',
|
||||
type: 'New Lead',
|
||||
industry: 'Software',
|
||||
status: 'Active',
|
||||
contacts: [
|
||||
{
|
||||
id: 12,
|
||||
picture: undefined,
|
||||
initials: 'BT',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
initials: 'AC',
|
||||
color: 'h-purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
company: 'VScope X',
|
||||
type: 'Canceled',
|
||||
industry: 'Software',
|
||||
status: 'Disabled',
|
||||
contacts: [
|
||||
{
|
||||
id: 7,
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
initials: 'TS',
|
||||
color: 'info',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
company: 'MediHelp',
|
||||
type: 'Confirmed',
|
||||
industry: 'Software',
|
||||
status: 'Suspended',
|
||||
contacts: [
|
||||
{
|
||||
id: 0,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
initials: 'AC',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
picture: 'https://media.cssninja.io/content/avatars/11.jpg',
|
||||
initials: 'KL',
|
||||
color: 'danger',
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
initials: 'ML',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const flexRowsAdvanced = [
|
||||
{
|
||||
id: 0,
|
||||
username: 'Erik K.',
|
||||
position: 'Product Manager',
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Las Vegas, NV',
|
||||
industry: 'Software',
|
||||
annualEarnings: 115000,
|
||||
status: 'Active',
|
||||
contacts: [
|
||||
{
|
||||
id: 0,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
initials: 'AC',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
picture: undefined,
|
||||
initials: 'JP',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
picture: '/images/avatars/svg/vuero-1.svg',
|
||||
initials: 'EK',
|
||||
color: 'h-purple',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
initials: 'ML',
|
||||
color: 'danger',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'success',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
username: 'Jimmy H.',
|
||||
position: 'Project Manager',
|
||||
picture: 'https://media.cssninja.io/content/avatars/22.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Los Angeles, CA',
|
||||
industry: 'Business',
|
||||
annualEarnings: 110000,
|
||||
status: 'New',
|
||||
contacts: [
|
||||
{
|
||||
id: 4,
|
||||
picture: undefined,
|
||||
initials: 'SC',
|
||||
color: 'h-purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: 'Melany W.',
|
||||
position: 'Web Developer',
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'San Jose, CA',
|
||||
industry: 'Design',
|
||||
status: 'Active',
|
||||
annualEarnings: 90000,
|
||||
contacts: [
|
||||
{
|
||||
id: 12,
|
||||
picture: undefined,
|
||||
initials: 'BT',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
|
||||
initials: 'AC',
|
||||
color: 'h-purple',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: 'Joshua S.',
|
||||
position: 'Backend Developer',
|
||||
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Las Vegas, NV',
|
||||
industry: 'Accounting',
|
||||
status: 'Disabled',
|
||||
annualEarnings: 160000,
|
||||
contacts: [
|
||||
{
|
||||
id: 7,
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
initials: 'TS',
|
||||
color: 'info',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
username: 'Tina C.',
|
||||
position: 'Business Analyst',
|
||||
picture: 'https://media.cssninja.io/content/avatars/13.jpg',
|
||||
badge: '/images/icons/flags/united-states-of-america.svg',
|
||||
location: 'Los Angeles, CA',
|
||||
industry: 'Finance',
|
||||
status: 'Suspended',
|
||||
annualEarnings: 247000,
|
||||
contacts: [
|
||||
{
|
||||
id: 0,
|
||||
picture: 'https://media.cssninja.io/content/avatars/25.jpg',
|
||||
initials: 'AC',
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
picture: 'https://media.cssninja.io/content/avatars/11.jpg',
|
||||
initials: 'KL',
|
||||
color: 'danger',
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
|
||||
initials: 'ML',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -1,108 +0,0 @@
|
||||
// Add Icon
|
||||
function renderIcon(data: any /* , cell: any, row: any */) {
|
||||
return `
|
||||
<div class="media-flex-center">
|
||||
<img class="drinks-icon" src="/images/icons/datatable/${data}.svg" alt="">
|
||||
<div class="flex-meta">
|
||||
<span class="is-capitalize">${data}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
// Caffeinated column cell manipulation
|
||||
function renderYesNo(data: any /* , cell: any, row: any */) {
|
||||
return data == 'true'
|
||||
? '<div class="has-text-centered"><span class="positive-icon"><VIcon icon="lucide:check"/></span></div>'
|
||||
: '<div class="has-text-centered"><span class="negative-icon"><VIcon icon="lucide:x"/></span></div>'
|
||||
}
|
||||
|
||||
// Price
|
||||
function renderHighLow(data: any /* , cell: any, row: any */) {
|
||||
if (data > 0) {
|
||||
return `<span class="price dark-inverted">${data}</span>`
|
||||
}
|
||||
else if (data == 0) {
|
||||
return `<span class="price price-free dark-inverted">${data}</span>`
|
||||
}
|
||||
}
|
||||
|
||||
// Stock
|
||||
function renderStock(data: any /* , cell: any, row: any */) {
|
||||
return `<span class="light-text">${data}</span>`
|
||||
}
|
||||
|
||||
// Status
|
||||
function renderStatus(data: any /* , cell: any, row: any */) {
|
||||
if (data === 'available') {
|
||||
return `<span class="tag is-primary is-elevated is-curved is-capitalize">${data}</span>`
|
||||
}
|
||||
else if (data === 'new') {
|
||||
return `<span class="tag is-info is-elevated is-curved is-capitalize">${data}</span>`
|
||||
}
|
||||
if (data === 'unavailable') {
|
||||
return `<span class="tag is-danger is-elevated is-curved is-capitalize">${data}</span>`
|
||||
}
|
||||
}
|
||||
|
||||
// profit
|
||||
function renderProfit(data: any /* , cell: any, row: any */) {
|
||||
if (data > 0) {
|
||||
return `<div class="has-text-centered"><span class="positive-icon light-text"><VIcon icon="lucide:trending-up"/> +${data}%</span></div>`
|
||||
}
|
||||
else if (data < 0) {
|
||||
return `<div class="has-text-centered"><span class="negative-icon is-danger light-text"><VIcon icon="lucide:trending-down"/> -${data}%</span></div>`
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
function renderButton(data: any, cell: any, row: any) {
|
||||
return `<div class="has-text-right"><button class="button v-button is-dark-outlined" data-row="${row.dataIndex}">Manage</button></div>`
|
||||
}
|
||||
|
||||
export const optionsAdvanced = {
|
||||
perPageSelect: [5, 10, 20, 25, 50, 100],
|
||||
perPage: 5,
|
||||
columns: [
|
||||
{ select: 0, hidden: true },
|
||||
{ select: 1, render: renderIcon },
|
||||
{ select: 2, render: renderYesNo },
|
||||
{ select: 3, render: renderHighLow },
|
||||
{ select: 4, render: renderStock },
|
||||
{ select: 5, render: renderStatus },
|
||||
{ select: 6, render: renderProfit },
|
||||
{ select: 7, render: renderButton, sortable: false },
|
||||
],
|
||||
data: {
|
||||
headings: [
|
||||
'ID',
|
||||
'Drink',
|
||||
'Caffeinated',
|
||||
'Price',
|
||||
'Stock',
|
||||
'Status',
|
||||
'Profit',
|
||||
'Actions',
|
||||
],
|
||||
data: [
|
||||
[574, 'milk', false, 1.45, 978, 'available', 2.5, true],
|
||||
[984, 'coffee', true, 2.49, 1261, 'available', 4.3, true],
|
||||
[312, 'cola', true, 1.49, 153, 'new', 2.6, true],
|
||||
[312, 'soda', true, 1.49, 648, 'available', -1.25, true],
|
||||
[312, 'beer', false, 3.25, 928, 'available', 5.12, true],
|
||||
[312, 'juice', false, 1.72, 117, 'available', -2.1, true],
|
||||
[312, 'water', false, 1.21, 19, 'new', 3.0, true],
|
||||
[312, 'smoothie', false, 3.49, 265, 'unavailable', 3.61, true],
|
||||
[312, 'infusion', false, 1.89, 897, 'available', -1.24, true],
|
||||
[312, 'cocktail', false, 3.49, 119, 'available', -2.45, true],
|
||||
[312, 'latte', true, 2.49, 457, 'new', 3.0, true],
|
||||
[312, 'cosmopolitan', false, 4.49, 98, 'available', 1.48, true],
|
||||
[312, 'lemonade', true, 1.25, 1221, 'available', -1.28, true],
|
||||
[312, 'milkshake', false, 2.49, 158, 'available', 2.3, true],
|
||||
[312, 'wine', false, 4.49, 619, 'new', 5.8, true],
|
||||
[312, 'tea', false, 1.25, 481, 'available', 1.3, true],
|
||||
[312, 'mojito', true, 4.49, 762, 'unavailable', 4.9, true],
|
||||
[312, 'sangria', false, 1.49, 456, 'available', 12.3, true],
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
export const optionsBase = {
|
||||
searchable: false,
|
||||
sortable: false,
|
||||
perPageSelect: false,
|
||||
data: {
|
||||
headings: ['Name', 'Ext.', 'City', 'Start Date', 'Completion'],
|
||||
data: [
|
||||
['Unity Pugh', 9958, 'Curicó', '2005/02/11', '37%'],
|
||||
['Theodore Duran', 8971, 'Dhanbad', '1999/04/07', '97%'],
|
||||
['Kylie Bishop', 3147, 'Norman', '2005/09/08', '63%'],
|
||||
['Willow Gilliam', 3497, 'Amqui', '2009/29/11', '30%'],
|
||||
['Blossom Dickerson', 5018, 'Kempten', '2006/11/09', '17%'],
|
||||
['Elliott Snyder', 3925, 'Enines', '2006/03/08', '57%'],
|
||||
['Castor Pugh', 9488, 'Neath', '2014/23/12', '93%'],
|
||||
['Pearl Carlson', 6231, 'Cobourg', '2014/31/08', '100%'],
|
||||
['Deirdre Bridges', 1579, 'Eberswalde-Finow', '2014/26/08', '44%'],
|
||||
['Daniel Baldwin', 6095, 'Moircy', '2000/11/01', '33%'],
|
||||
['Phelan Kane', 9519, 'Germersheim', '1999/16/04', '77%'],
|
||||
['Quentin Salas', 1339, 'Los Andes', '2011/26/01', '49%'],
|
||||
['Armand Suarez', 6583, 'Funtua', '1999/06/11', '9%'],
|
||||
['Gretchen Rogers', 5393, 'Moxhe', '1998/26/10', '24%'],
|
||||
['Harding Thompson', 2824, 'Abeokuta', '2008/06/08', '10%'],
|
||||
['Mira Rocha', 4393, 'Port Harcourt', '2002/04/10', '14%'],
|
||||
['Drew Phillips', 2931, 'Goes', '2011/18/10', '58%'],
|
||||
['Emerald Warner', 6205, 'Chiavari', '2002/08/04', '58%'],
|
||||
['Colin Burch', 7457, 'Anamur', '2004/02/01', '34%'],
|
||||
['Russell Haynes', 8916, 'Frascati', '2015/28/04', '18%'],
|
||||
['Brennan Brooks', 9011, 'Olmué', '2000/18/04', '2%'],
|
||||
['Kane Anthony', 8075, 'LaSalle', '2006/21/05', '93%'],
|
||||
['Scarlett Hurst', 1019, 'Brampton', '2015/07/01', '94%'],
|
||||
['James Scott', 3008, 'Meux', '2007/30/05', '55%'],
|
||||
['Desiree Ferguson', 9054, 'Gojra', '2009/15/02', '81%'],
|
||||
['Elaine Bishop', 9160, 'Petrópolis', '2008/23/12', '48%'],
|
||||
['Hilda Nelson', 6307, 'Posina', '2004/23/05', '76%'],
|
||||
['Evangeline Beasley', 3820, 'Caplan', '2009/12/03', '62%'],
|
||||
['Wyatt Riley', 5694, 'Cavaion Veronese', '2012/19/02', '67%'],
|
||||
['Wyatt Mccarthy', 3547, 'Patan', '2014/23/06', '9%'],
|
||||
['Cairo Rice', 6273, 'Ostra Vetere', '2016/27/02', '13%'],
|
||||
['Sylvia Peters', 6829, 'Arrah', '2015/03/02', '13%'],
|
||||
['Kasper Craig', 5515, 'Firenze', '2015/26/04', '56%'],
|
||||
['Leigh Ruiz', 5112, 'Lac Ste. Anne', '2001/09/02', '28%'],
|
||||
['Athena Aguirre', 5741, 'Romeral', '2010/24/03', '15%'],
|
||||
['Riley Nunez', 5533, 'Sart-Eustache', '2003/26/02', '30%'],
|
||||
['Lois Talley', 9393, 'Dorchester', '2014/05/01', '51%'],
|
||||
['Hop Bass', 1024, 'Westerlo', '2012/25/09', '85%'],
|
||||
['Kalia Diaz', 9184, 'Ichalkaranji', '2013/26/06', '92%'],
|
||||
['Maia Pate', 6682, 'Louvain-la-Neuve', '2011/23/04', '50%'],
|
||||
['Macaulay Pruitt', 4457, 'Fraser-Fort George', '2015/03/08', '92%'],
|
||||
['Danielle Oconnor', 9464, 'Neuwied', '2001/05/10', '17%'],
|
||||
['Kato Carr', 4842, 'Faridabad', '2012/11/05', '96%'],
|
||||
['Malachi Mejia', 7133, 'Vorst', '2007/25/04', '26%'],
|
||||
['Dominic Carver', 3476, 'Pointe-aux-Trembles', '2014/14/03', '71%'],
|
||||
['Paki Santos', 4424, 'Cache Creek', '2001/18/11', '82%'],
|
||||
['Ross Hodges', 1862, 'Trazegnies', '2010/19/09', '87%'],
|
||||
['Hilda Whitley', 3514, 'New Sarepta', '2011/05/07', '94%'],
|
||||
['Roth Cherry', 4006, 'Flin Flon', '2008/02/09', '8%'],
|
||||
['Lareina Jones', 8642, 'East Linton', '2009/07/08', '21%'],
|
||||
['Joshua Weiss', 2289, 'Saint-Léonard', '2010/15/01', '52%'],
|
||||
['Kiona Lowery', 5952, 'Inuvik', '2002/17/12', '72%'],
|
||||
['Nina Rush', 7567, 'Bo‘lhe', '2008/27/01', '6%'],
|
||||
['Palmer Parker', 2000, 'Stade', '2012/24/07', '58%'],
|
||||
['Vielka Olsen', 3745, 'Vrasene', '2016/08/01', '70%'],
|
||||
['Meghan Cunningham', 8604, 'Söke', '2007/16/02', '59%'],
|
||||
['Iola Shaw', 6447, 'Albany', '2014/05/03', '88%'],
|
||||
['Imelda Cole', 4564, 'Haasdonk', '2007/16/11', '79%'],
|
||||
['Jerry Beach', 6801, 'Gattatico', '1999/07/07', '36%'],
|
||||
['Garrett Rocha', 3938, 'Gavorrano', '2000/06/08', '71%'],
|
||||
['Derek Kerr', 1724, 'Gualdo Cattaneo', '2014/21/01', '89%'],
|
||||
['Shad Hudson', 5944, 'Salamanca', '2014/10/12', '98%'],
|
||||
['Daryl Ayers', 8276, 'Barchi', '2012/12/11', '88%'],
|
||||
['Caleb Livingston', 3094, 'Fatehpur', '2014/13/02', '8%'],
|
||||
['Sydney Meyer', 4576, 'Neubrandenburg', '2015/06/02', '22%'],
|
||||
['Lani Lawrence', 8501, 'Turnhout', '2008/07/05', '16%'],
|
||||
['Allegra Shepherd', 2576, 'Meeuwen-Gruitrode', '2004/19/04', '41%'],
|
||||
['Fallon Reyes', 3178, 'Monceau-sur-Sambre', '2005/15/02', '16%'],
|
||||
['Karen Whitley', 4357, 'Sluis', '2003/02/05', '23%'],
|
||||
['Stewart Stephenson', 5350, 'Villa Faraldi', '2003/05/07', '65%'],
|
||||
['Ursula Reynolds', 7544, 'Southampton', '1999/16/12', '61%'],
|
||||
['Adrienne Winters', 4425, 'Laguna Blanca', '2014/15/09', '24%'],
|
||||
['Francesca Brock', 1337, 'Oban', '2000/12/06', '90%'],
|
||||
['Ursa Davenport', 7629, 'New Plymouth', '2013/27/06', '37%'],
|
||||
['Mark Brock', 3310, 'Veenendaal', '2006/08/09', '41%'],
|
||||
['Dale Rush', 5050, 'Chicoutimi', '2000/27/03', '2%'],
|
||||
['Shellie Murphy', 3845, 'Marlborough', '2013/13/11', '72%'],
|
||||
['Porter Nicholson', 4539, 'Bismil', '2012/22/10', '23%'],
|
||||
['Oliver Huber', 1265, 'Hannache', '2002/11/01', '94%'],
|
||||
['Calista Maynard', 3315, 'Pozzuolo del Friuli', '2006/23/03', '5%'],
|
||||
['Lois Vargas', 6825, 'Cumberland', '1999/25/04', '50%'],
|
||||
['Hermione Dickson', 2785, 'Woodstock', '2001/22/03', '2%'],
|
||||
['Dalton Jennings', 5416, 'Dudzele', '2015/09/02', '74%'],
|
||||
['Cathleen Kramer', 3380, 'Crowsnest Pass', '2012/27/07', '53%'],
|
||||
['Zachery Morgan', 6730, 'Collines-de-l\'Outaouais', '2006/04/09', '51%'],
|
||||
['Yoko Freeman', 4077, 'Lidköping', '2002/27/12', '48%'],
|
||||
['Chaim Waller', 4240, 'North Shore', '2010/25/07', '25%'],
|
||||
['Berk Johnston', 4532, 'Vergnies', '2016/23/02', '93%'],
|
||||
['Tad Munoz', 2902, 'Saint-Nazaire', '2010/09/05', '65%'],
|
||||
['Vivien Dominguez', 5653, 'Bargagli', '2001/09/01', '86%'],
|
||||
['Carissa Lara', 3241, 'Sherborne', '2015/07/12', '72%'],
|
||||
['Hammett Gordon', 8101, 'Wah', '1998/06/09', '20%'],
|
||||
['Walker Nixon', 6901, 'Metz', '2011/12/11', '41%'],
|
||||
['Nathan Espinoza', 5956, 'Strathcona County', '2002/25/01', '47%'],
|
||||
['Kelly Cameron', 4836, 'Fontaine-Valmont', '1999/02/07', '24%'],
|
||||
['Kyra Moses', 3796, 'Quenast', '1998/07/07', '68%'],
|
||||
['Grace Bishop', 8340, 'Rodez', '2012/02/10', '4%'],
|
||||
['Haviva Hernandez', 8136, 'Suwałki', '2000/30/01', '16%'],
|
||||
['Alisa Horn', 9853, 'Ucluelet', '2007/01/11', '39%'],
|
||||
['Zelenia Roman', 7516, 'Redwater', '2012/03/03', '31%'],
|
||||
['Unity Pugh', 9958, 'Curicó', '2005/02/11', '37%'],
|
||||
['Theodore Duran', 8971, 'Dhanbad', '1999/04/07', '97%'],
|
||||
['Kylie Bishop', 3147, 'Norman', '2005/09/08', '63%'],
|
||||
['Willow Gilliam', 3497, 'Amqui', '2009/29/11', '30%'],
|
||||
['Blossom Dickerson', 5018, 'Kempten', '2006/11/09', '17%'],
|
||||
['Elliott Snyder', 3925, 'Enines', '2006/03/08', '57%'],
|
||||
['Castor Pugh', 9488, 'Neath', '2014/23/12', '93%'],
|
||||
['Pearl Carlson', 6231, 'Cobourg', '2014/31/08', '100%'],
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
// Add Icon
|
||||
function renderPicture(data: any /* , cell: any, row: any */) {
|
||||
return `
|
||||
<div class="v-avatar">
|
||||
<img class="avatar" src="${data}" alt="">
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
// Name
|
||||
function renderName(data: any /* , cell: any, row: any */) {
|
||||
return `<span class="has-dark-text dark-inverted is-font-alt is-weight-600 rem-90">${data}</span>`
|
||||
}
|
||||
|
||||
// Position
|
||||
function renderPosition(data: any /* , cell: any, row: any */) {
|
||||
return `<span class="light-text">${data}</span>`
|
||||
}
|
||||
|
||||
// Status
|
||||
function renderStatus(data: any /* , cell: any, row: any */) {
|
||||
return `
|
||||
<div class="status is-${data}">
|
||||
<i aria-hidden="true" class="fas fa-circle"></i>
|
||||
<span class="is-capitalize">${data}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
// Button
|
||||
function renderButton(data: any, cell: any, row: any) {
|
||||
return `<div class="has-text-right"><button class="button v-button is-dark-outlined" data-row="${row.dataIndex}">Manage</button></div>`
|
||||
}
|
||||
|
||||
export const optionsUsers = {
|
||||
perPageSelect: [5, 10, 20, 25, 50, 100],
|
||||
perPage: 10,
|
||||
columns: [
|
||||
{ select: 0, hidden: true },
|
||||
{ select: 1, render: renderPicture, sortable: false },
|
||||
{ select: 2, render: renderName },
|
||||
{ select: 3, render: renderPosition },
|
||||
{ select: 4, render: renderStatus },
|
||||
{ select: 5, render: renderButton, sortable: false },
|
||||
],
|
||||
data: {
|
||||
headings: ['ID', 'Picture', 'Name', 'Position', 'Status', 'Actions'],
|
||||
data: [
|
||||
[
|
||||
0,
|
||||
'/images/avatars/svg/vuero-1.svg',
|
||||
'Erik Kovalsky',
|
||||
'Product Manager',
|
||||
'busy',
|
||||
true,
|
||||
],
|
||||
[1, 'https://media.cssninja.io/content/avatars/7.jpg', 'Alice Carasca', 'Software Engineer', 'offline', true],
|
||||
[2, 'https://media.cssninja.io/content/avatars/13.jpg', 'Tara Svenson', 'UI/UX Designer', 'offline', true],
|
||||
[3, 'https://media.cssninja.io/content/avatars/5.jpg', 'Mary Lebowski', 'Project Manager', 'available', true],
|
||||
[
|
||||
4,
|
||||
'/images/avatars/placeholder-f.jpg',
|
||||
'Kaylee Jennings',
|
||||
'Web Developer',
|
||||
'available',
|
||||
true,
|
||||
],
|
||||
[5, 'https://media.cssninja.io/content/avatars/27.jpg', 'Carmen Escudero', 'HR Manager', 'offline', true],
|
||||
[6, 'https://media.cssninja.io/content/avatars/22.jpg', 'Dwayne Hicks', 'Product Manager', 'offline', true],
|
||||
[
|
||||
7,
|
||||
'/images/avatars/placeholder-m.jpg',
|
||||
'Paul Morris',
|
||||
'Backend Developer',
|
||||
'available',
|
||||
true,
|
||||
],
|
||||
[
|
||||
8,
|
||||
'https://media.cssninja.io/content/avatars/23.jpg',
|
||||
'Irina Vierbovsky',
|
||||
'Project Manager',
|
||||
'available',
|
||||
true,
|
||||
],
|
||||
[9, 'https://media.cssninja.io/content/avatars/28.jpg', 'Edouard Falant', 'Web Developer', 'busy', true],
|
||||
[
|
||||
10,
|
||||
'/images/avatars/placeholder-f.jpg',
|
||||
'Shana Williams',
|
||||
'Sales Manager',
|
||||
'offline',
|
||||
true,
|
||||
],
|
||||
[
|
||||
11,
|
||||
'/images/avatars/placeholder-m.jpg',
|
||||
'Benjamin Hoffman',
|
||||
'Product Manager',
|
||||
'offline',
|
||||
true,
|
||||
],
|
||||
[12, 'https://media.cssninja.io/content/avatars/39.jpg', 'Alejandro Badajoz', 'Web Developer', 'busy', true],
|
||||
[
|
||||
13,
|
||||
'https://media.cssninja.io/content/avatars/21.jpg',
|
||||
'Elizabeth Fisher',
|
||||
'Mobile Developer',
|
||||
'available',
|
||||
true,
|
||||
],
|
||||
[14, 'https://media.cssninja.io/content/avatars/37.jpg', 'Helmut Fritz', 'Product Manager', 'available', true],
|
||||
[15, 'https://media.cssninja.io/content/avatars/31.jpg', 'Yasseen Amzi', 'Business Analyst', 'offline', true],
|
||||
],
|
||||
},
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,337 +0,0 @@
|
||||
export const iconifyFeather = [
|
||||
{ name: 'activity', dataicon: 'lucide:activity' },
|
||||
{ name: 'airplay', dataicon: 'lucide:airplay' },
|
||||
{ name: 'alert-circle', dataicon: 'lucide:alert-circle' },
|
||||
{ name: 'alert-octagon', dataicon: 'lucide:alert-octagon' },
|
||||
{ name: 'alert-triangle', dataicon: 'lucide:alert-triangle' },
|
||||
{ name: 'align-center', dataicon: 'lucide:align-center' },
|
||||
{ name: 'align-justify', dataicon: 'lucide:align-justify' },
|
||||
{ name: 'align-left', dataicon: 'lucide:align-left' },
|
||||
{ name: 'align-right', dataicon: 'lucide:align-right' },
|
||||
{ name: 'anchor', dataicon: 'lucide:anchor' },
|
||||
{ name: 'aperture', dataicon: 'lucide:aperture' },
|
||||
{ name: 'archive', dataicon: 'lucide:archive' },
|
||||
{ name: 'arrow-down-circle', dataicon: 'lucide:arrow-down-circle' },
|
||||
{ name: 'arrow-down-left', dataicon: 'lucide:arrow-down-left' },
|
||||
{ name: 'arrow-down-right', dataicon: 'lucide:arrow-down-right' },
|
||||
{
|
||||
name: 'arrow-down',
|
||||
dataicon: 'lucide:arrow-down',
|
||||
},
|
||||
{ name: 'arrow-left-circle', dataicon: 'lucide:arrow-left-circle' },
|
||||
{
|
||||
name: 'arrow-left',
|
||||
dataicon: 'lucide:arrow-left',
|
||||
},
|
||||
{ name: 'arrow-right-circle', dataicon: 'lucide:arrow-right-circle' },
|
||||
{
|
||||
name: 'arrow-right',
|
||||
dataicon: 'lucide:arrow-right',
|
||||
},
|
||||
{ name: 'arrow-up-circle', dataicon: 'lucide:arrow-up-circle' },
|
||||
{ name: 'arrow-up-left', dataicon: 'lucide:arrow-up-left' },
|
||||
{ name: 'arrow-up-right', dataicon: 'lucide:arrow-up-right' },
|
||||
{ name: 'arrow-up', dataicon: 'lucide:arrow-up' },
|
||||
{ name: 'at-sign', dataicon: 'lucide:at-sign' },
|
||||
{ name: 'award', dataicon: 'lucide:award' },
|
||||
{ name: 'bar-chart-2', dataicon: 'lucide:bar-chart-2' },
|
||||
{ name: 'bar-chart', dataicon: 'lucide:bar-chart' },
|
||||
{ name: 'battery-charging', dataicon: 'lucide:battery-charging' },
|
||||
{ name: 'battery', dataicon: 'lucide:battery' },
|
||||
{ name: 'bell-off', dataicon: 'lucide:bell-off' },
|
||||
{ name: 'bell', dataicon: 'lucide:bell' },
|
||||
{ name: 'bluetooth', dataicon: 'lucide:bluetooth' },
|
||||
{ name: 'bold', dataicon: 'lucide:bold' },
|
||||
{ name: 'book-open', dataicon: 'lucide:book-open' },
|
||||
{ name: 'book', dataicon: 'lucide:book' },
|
||||
{ name: 'bookmark', dataicon: 'lucide:bookmark' },
|
||||
{ name: 'box', dataicon: 'lucide:box' },
|
||||
{ name: 'briefcase', dataicon: 'lucide:briefcase' },
|
||||
{ name: 'calendar', dataicon: 'lucide:calendar' },
|
||||
{ name: 'camera-off', dataicon: 'lucide:camera-off' },
|
||||
{ name: 'camera', dataicon: 'lucide:camera' },
|
||||
{ name: 'cast', dataicon: 'lucide:cast' },
|
||||
{ name: 'check-circle', dataicon: 'lucide:check-circle' },
|
||||
{
|
||||
name: 'check-square',
|
||||
dataicon: 'lucide:check-square',
|
||||
},
|
||||
{ name: 'check', dataicon: 'lucide:check' },
|
||||
{ name: 'chevron-down', dataicon: 'lucide:chevron-down' },
|
||||
{ name: 'chevron-left', dataicon: 'lucide:chevron-left' },
|
||||
{ name: 'chevron-right', dataicon: 'lucide:chevron-right' },
|
||||
{ name: 'chevron-up', dataicon: 'lucide:chevron-up' },
|
||||
{ name: 'chevrons-down', dataicon: 'lucide:chevrons-down' },
|
||||
{ name: 'chevrons-left', dataicon: 'lucide:chevrons-left' },
|
||||
{ name: 'chevrons-right', dataicon: 'lucide:chevrons-right' },
|
||||
{ name: 'chevrons-up', dataicon: 'lucide:chevrons-up' },
|
||||
{ name: 'chrome', dataicon: 'lucide:chrome' },
|
||||
{ name: 'circle', dataicon: 'lucide:circle' },
|
||||
{ name: 'clipboard', dataicon: 'lucide:clipboard' },
|
||||
{ name: 'clock', dataicon: 'lucide:clock' },
|
||||
{ name: 'cloud-drizzle', dataicon: 'lucide:cloud-drizzle' },
|
||||
{ name: 'cloud-lightning', dataicon: 'lucide:cloud-lightning' },
|
||||
{ name: 'cloud-off', dataicon: 'lucide:cloud-off' },
|
||||
{ name: 'cloud-rain', dataicon: 'lucide:cloud-rain' },
|
||||
{ name: 'cloud-snow', dataicon: 'lucide:cloud-snow' },
|
||||
{ name: 'code', dataicon: 'lucide:code' },
|
||||
{ name: 'codepen', dataicon: 'lucide:codepen' },
|
||||
{ name: 'codesandbox', dataicon: 'lucide:codesandbox' },
|
||||
{ name: 'coffee', dataicon: 'lucide:coffee' },
|
||||
{ name: 'columns', dataicon: 'lucide:columns' },
|
||||
{ name: 'command', dataicon: 'lucide:command' },
|
||||
{ name: 'compass', dataicon: 'lucide:compass' },
|
||||
{ name: 'copy', dataicon: 'lucide:copy' },
|
||||
{ name: 'corner-down-left', dataicon: 'lucide:corner-down-left' },
|
||||
{ name: 'corner-down-right', dataicon: 'lucide:corner-down-right' },
|
||||
{ name: 'corner-left-down', dataicon: 'lucide:corner-left-down' },
|
||||
{ name: 'corner-left-up', dataicon: 'lucide:corner-left-up' },
|
||||
{ name: 'corner-right-down', dataicon: 'lucide:corner-right-down' },
|
||||
{
|
||||
name: 'corner-right-up',
|
||||
dataicon: 'lucide:corner-right-up',
|
||||
},
|
||||
{
|
||||
name: 'corner-up-left',
|
||||
dataicon: 'lucide:corner-up-left',
|
||||
},
|
||||
{
|
||||
name: 'corner-up-right',
|
||||
dataicon: 'lucide:corner-up-right',
|
||||
},
|
||||
{
|
||||
name: 'cpu',
|
||||
dataicon: 'lucide:cpu',
|
||||
},
|
||||
{ name: 'credit-card', dataicon: 'lucide:credit-card' },
|
||||
{ name: 'crop', dataicon: 'lucide:crop' },
|
||||
{ name: 'crosshair', dataicon: 'lucide:crosshair' },
|
||||
{ name: 'database', dataicon: 'lucide:database' },
|
||||
{ name: 'delete', dataicon: 'lucide:delete' },
|
||||
{ name: 'disc', dataicon: 'lucide:disc' },
|
||||
{ name: 'dollar-sign', dataicon: 'lucide:dollar-sign' },
|
||||
{ name: 'download-cloud', dataicon: 'lucide:download-cloud' },
|
||||
{ name: 'download', dataicon: 'lucide:download' },
|
||||
{ name: 'droplet', dataicon: 'lucide:droplet' },
|
||||
{ name: 'edit-2', dataicon: 'lucide:edit-2' },
|
||||
{ name: 'edit-3', dataicon: 'lucide:edit-3' },
|
||||
{ name: 'edit', dataicon: 'lucide:edit' },
|
||||
{ name: 'external-link', dataicon: 'lucide:external-link' },
|
||||
{ name: 'eye-off', dataicon: 'lucide:eye-off' },
|
||||
{ name: 'eye', dataicon: 'lucide:eye' },
|
||||
{ name: 'facebook', dataicon: 'lucide:facebook' },
|
||||
{ name: 'fast-forward', dataicon: 'lucide:fast-forward' },
|
||||
{ name: 'feather', dataicon: 'lucide:feather' },
|
||||
{ name: 'figma', dataicon: 'lucide:figma' },
|
||||
{ name: 'file-minus', dataicon: 'lucide:file-minus' },
|
||||
{
|
||||
name: 'file-plus',
|
||||
dataicon: 'lucide:file-plus',
|
||||
},
|
||||
{ name: 'file-text', dataicon: 'lucide:file-text' },
|
||||
{ name: 'file', dataicon: 'lucide:file' },
|
||||
{ name: 'film', dataicon: 'lucide:film' },
|
||||
{ name: 'filter', dataicon: 'lucide:filter' },
|
||||
{ name: 'flag', dataicon: 'lucide:flag' },
|
||||
{ name: 'folder-minus', dataicon: 'lucide:folder-minus' },
|
||||
{ name: 'folder-plus', dataicon: 'lucide:folder-plus' },
|
||||
{ name: 'folder', dataicon: 'lucide:folder' },
|
||||
{ name: 'framer', dataicon: 'lucide:framer' },
|
||||
{ name: 'frown', dataicon: 'lucide:frown' },
|
||||
{ name: 'gift', dataicon: 'lucide:gift' },
|
||||
{
|
||||
name: 'git=branch',
|
||||
dataicon: 'lucide:git-branch',
|
||||
},
|
||||
{ name: 'git-commit', dataicon: 'lucide:git-commit' },
|
||||
{ name: 'git-merge', dataicon: 'lucide:git-merge' },
|
||||
{ name: 'git-pull-request', dataicon: 'lucide:git-pull-request' },
|
||||
{
|
||||
name: 'github',
|
||||
dataicon: 'lucide:github',
|
||||
},
|
||||
{ name: 'gitlab', dataicon: 'lucide:gitlab' },
|
||||
{ name: 'globe', dataicon: 'lucide:globe' },
|
||||
{ name: 'grid', dataicon: 'lucide:grid' },
|
||||
{
|
||||
name: 'hard-drive',
|
||||
dataicon: 'lucide:hard-drive',
|
||||
},
|
||||
{ name: 'hash', dataicon: 'lucide:hash' },
|
||||
{ name: 'headphones', dataicon: 'lucide:headphones' },
|
||||
{ name: 'heart', dataicon: 'lucide:heart' },
|
||||
{ name: 'help-circle', dataicon: 'lucide:help-circle' },
|
||||
{ name: 'hexagon', dataicon: 'lucide:hexagon' },
|
||||
{ name: 'home', dataicon: 'lucide:home' },
|
||||
{ name: 'image', dataicon: 'lucide:image' },
|
||||
{ name: 'inbox', dataicon: 'lucide:inbox' },
|
||||
{ name: 'info', dataicon: 'lucide:info' },
|
||||
{ name: 'instagram', dataicon: 'lucide:instagram' },
|
||||
{ name: 'italic', dataicon: 'lucide:italic' },
|
||||
{ name: 'key', dataicon: 'lucide:key' },
|
||||
{
|
||||
name: 'layers',
|
||||
dataicon: 'lucide:layers',
|
||||
},
|
||||
{ name: 'layout', dataicon: 'lucide:layout' },
|
||||
{ name: 'life-buoy', dataicon: 'lucide:life-buoy' },
|
||||
{ name: 'link-2', dataicon: 'lucide:link-2' },
|
||||
{ name: 'link', dataicon: 'lucide:link' },
|
||||
{ name: 'linkedin', dataicon: 'lucide:linkedin' },
|
||||
{ name: 'list', dataicon: 'lucide:list' },
|
||||
{ name: 'loader', dataicon: 'lucide:loader' },
|
||||
{ name: 'lock', dataicon: 'lucide:lock' },
|
||||
{ name: 'log-in', dataicon: 'lucide:log-in' },
|
||||
{ name: 'log-out', dataicon: 'lucide:log-out' },
|
||||
{ name: 'mail', dataicon: 'lucide:mail' },
|
||||
{ name: 'map-pin', dataicon: 'lucide:map-pin' },
|
||||
{ name: 'map', dataicon: 'lucide:map' },
|
||||
{
|
||||
name: 'maximize-2',
|
||||
dataicon: 'lucide:maximize-2',
|
||||
},
|
||||
{ name: 'maximize', dataicon: 'lucide:maximize' },
|
||||
{ name: 'meh', dataicon: 'lucide:meh' },
|
||||
{ name: 'menu', dataicon: 'lucide:menu' },
|
||||
{ name: 'message-circle', dataicon: 'lucide:message-circle' },
|
||||
{ name: 'message-square', dataicon: 'lucide:message-square' },
|
||||
{ name: 'mic-off', dataicon: 'lucide:mic-off' },
|
||||
{ name: 'mic', dataicon: 'lucide:mic' },
|
||||
{
|
||||
name: 'minimize-2',
|
||||
dataicon: 'lucide:minimize-2',
|
||||
},
|
||||
{ name: 'minimize', dataicon: 'lucide:minimize' },
|
||||
{ name: 'minus-circle', dataicon: 'lucide:minus-circle' },
|
||||
{ name: 'minus-square', dataicon: 'lucide:minus-square' },
|
||||
{ name: 'minus', dataicon: 'lucide:minus' },
|
||||
{ name: 'monitor', dataicon: 'lucide:monitor' },
|
||||
{ name: 'moon', dataicon: 'lucide:moon' },
|
||||
{ name: 'more-horizontal', dataicon: 'lucide:more-horizontal' },
|
||||
{ name: 'more-vertical', dataicon: 'lucide:more-vertical' },
|
||||
{ name: 'mouse-pointer', dataicon: 'lucide:mouse-pointer' },
|
||||
{ name: 'move', dataicon: 'lucide:move' },
|
||||
{ name: 'music', dataicon: 'lucide:music' },
|
||||
{ name: 'navigation-2', dataicon: 'lucide:navigation-2' },
|
||||
{
|
||||
name: 'navigation',
|
||||
dataicon: 'lucide:navigation',
|
||||
},
|
||||
{ name: 'octagon', dataicon: 'lucide:octagon' },
|
||||
{ name: 'package', dataicon: 'lucide:package' },
|
||||
{ name: 'paperclip', dataicon: 'lucide:paperclip' },
|
||||
{ name: 'pause-circle', dataicon: 'lucide:pause-circle' },
|
||||
{ name: 'pause', dataicon: 'lucide:pause' },
|
||||
{ name: 'pen-tool', dataicon: 'lucide:pen-tool' },
|
||||
{ name: 'percent', dataicon: 'lucide:percent' },
|
||||
{ name: 'phone-call', dataicon: 'lucide:phone-call' },
|
||||
{ name: 'phone-forwarded', dataicon: 'lucide:phone-forwarded' },
|
||||
{ name: 'phone-incoming', dataicon: 'lucide:phone-incoming' },
|
||||
{ name: 'phone-missed', dataicon: 'lucide:phone-missed' },
|
||||
{ name: 'phone-off', dataicon: 'lucide:phone-off' },
|
||||
{ name: 'phone-outgoing', dataicon: 'lucide:phone-outgoing' },
|
||||
{ name: 'phone', dataicon: 'lucide:phone' },
|
||||
{ name: 'pie-chart', dataicon: 'lucide:pie-chart' },
|
||||
{ name: 'play-circle', dataicon: 'lucide:play-circle' },
|
||||
{ name: 'play', dataicon: 'lucide:play' },
|
||||
{ name: 'plus-circle', dataicon: 'lucide:plus-circle' },
|
||||
{ name: 'layers', dataicon: 'lucide:layers' },
|
||||
{ name: 'plus', dataicon: 'lucide:plus' },
|
||||
{ name: 'pocket', dataicon: 'lucide:pocket' },
|
||||
{ name: 'power', dataicon: 'lucide:power' },
|
||||
{ name: 'printer', dataicon: 'lucide:printer' },
|
||||
{ name: 'radio', dataicon: 'lucide:radio' },
|
||||
{ name: 'refresh-cw', dataicon: 'lucide:refresh-cw' },
|
||||
{
|
||||
name: 'refresh-ccw',
|
||||
dataicon: 'lucide:refresh-ccw',
|
||||
},
|
||||
{ name: 'repeat', dataicon: 'lucide:repeat' },
|
||||
{ name: 'rewind', dataicon: 'lucide:rewind' },
|
||||
{ name: 'rotate-ccw', dataicon: 'lucide:rotate-ccw' },
|
||||
{ name: 'rotate-cw', dataicon: 'lucide:rotate-cw' },
|
||||
{ name: 'rss', dataicon: 'lucide:rss' },
|
||||
{ name: 'save', dataicon: 'lucide:save' },
|
||||
{ name: 'scissors', dataicon: 'lucide:scissors' },
|
||||
{ name: 'search', dataicon: 'lucide:search' },
|
||||
{ name: 'send', dataicon: 'lucide:send' },
|
||||
{ name: 'server', dataicon: 'lucide:server' },
|
||||
{ name: 'settings', dataicon: 'lucide:settings' },
|
||||
{ name: 'share-2', dataicon: 'lucide:share-2' },
|
||||
{ name: 'share', dataicon: 'lucide:share' },
|
||||
{ name: 'shield-off', dataicon: 'lucide:shield-off' },
|
||||
{ name: 'shield', dataicon: 'lucide:shield' },
|
||||
{ name: 'shopping-bag', dataicon: 'lucide:shopping-bag' },
|
||||
{ name: 'shopping-cart', dataicon: 'lucide:shopping-cart' },
|
||||
{ name: 'shuffle', dataicon: 'lucide:shuffle' },
|
||||
{ name: 'sidebar', dataicon: 'lucide:sidebar' },
|
||||
{ name: 'skip-back', dataicon: 'lucide:skip-back' },
|
||||
{ name: 'skip-forward', dataicon: 'lucide:skip-forward' },
|
||||
{ name: 'slack', dataicon: 'lucide:slack' },
|
||||
{ name: 'slash', dataicon: 'lucide:slash' },
|
||||
{ name: 'sliders', dataicon: 'lucide:sliders' },
|
||||
{ name: 'smartphone', dataicon: 'lucide:smartphone' },
|
||||
{ name: 'smile', dataicon: 'lucide:smile' },
|
||||
{ name: 'speaker', dataicon: 'lucide:speaker' },
|
||||
{ name: 'square', dataicon: 'lucide:square' },
|
||||
{ name: 'star', dataicon: 'lucide:star' },
|
||||
{ name: 'stop-circle', dataicon: 'lucide:stop-circle' },
|
||||
{ name: 'sun', dataicon: 'lucide:sun' },
|
||||
{ name: 'sunrise', dataicon: 'lucide:sunrise' },
|
||||
{ name: 'sunset', dataicon: 'lucide:sunset' },
|
||||
{ name: 'tablet', dataicon: 'lucide:tablet' },
|
||||
{ name: 'tag', dataicon: 'lucide:tag' },
|
||||
{ name: 'target', dataicon: 'lucide:target' },
|
||||
{ name: 'terminal', dataicon: 'lucide:terminal' },
|
||||
{ name: 'thermometer', dataicon: 'lucide:thermometer' },
|
||||
{ name: 'thumbs-down', dataicon: 'lucide:thumbs-down' },
|
||||
{ name: 'thumbs-up', dataicon: 'lucide:thumbs-up' },
|
||||
{ name: 'toggle-left', dataicon: 'lucide:toggle-left' },
|
||||
{ name: 'toggle-right', dataicon: 'lucide:toggle-right' },
|
||||
{ name: 'tool', dataicon: 'lucide:tool' },
|
||||
{ name: 'trash-2', dataicon: 'lucide:trash-2' },
|
||||
{ name: 'trash', dataicon: 'lucide:trash' },
|
||||
{ name: 'trello', dataicon: 'lucide:trello' },
|
||||
{ name: 'trending-up', dataicon: 'lucide:trending-up' },
|
||||
{ name: 'trending-down', dataicon: 'lucide:trending-down' },
|
||||
{ name: 'triangle', dataicon: 'lucide:triangle' },
|
||||
{ name: 'truck', dataicon: 'lucide:truck' },
|
||||
{ name: 'tv', dataicon: 'lucide:tv' },
|
||||
{
|
||||
name: 'twitter',
|
||||
dataicon: 'lucide:twitter',
|
||||
},
|
||||
{ name: 'twitch', dataicon: 'lucide:twitch' },
|
||||
{ name: 'type', dataicon: 'lucide:type' },
|
||||
{ name: 'umbrella', dataicon: 'lucide:umbrella' },
|
||||
{ name: 'underline', dataicon: 'lucide:underline' },
|
||||
{ name: 'unlock', dataicon: 'lucide:unlock' },
|
||||
{ name: 'upload-cloud', dataicon: 'lucide:upload-cloud' },
|
||||
{ name: 'upload', dataicon: 'lucide:upload' },
|
||||
{ name: 'user-check', dataicon: 'lucide:user-check' },
|
||||
{ name: 'user-plus', dataicon: 'lucide:user-plus' },
|
||||
{ name: 'user-minus', dataicon: 'lucide:user-minus' },
|
||||
{ name: 'user-x', dataicon: 'lucide:user-x' },
|
||||
{ name: 'user', dataicon: 'lucide:user' },
|
||||
{ name: 'users', dataicon: 'lucide:users' },
|
||||
{ name: 'video-off', dataicon: 'lucide:video-off' },
|
||||
{ name: 'video', dataicon: 'lucide:video' },
|
||||
{ name: 'voicemail', dataicon: 'lucide:voicemail' },
|
||||
{ name: 'volume-1', dataicon: 'lucide:volume-1' },
|
||||
{ name: 'volume-2', dataicon: 'lucide:volume-2' },
|
||||
{ name: 'volume-x', dataicon: 'lucide:volume-x' },
|
||||
{ name: 'volume', dataicon: 'lucide:volume' },
|
||||
{ name: 'watch', dataicon: 'lucide:watch' },
|
||||
{ name: 'wifi-off', dataicon: 'lucide:wifi-off' },
|
||||
{ name: 'wifi', dataicon: 'lucide:wifi' },
|
||||
{ name: 'wind', dataicon: 'lucide:wind' },
|
||||
{ name: 'x-circle', dataicon: 'lucide:x-circle' },
|
||||
{ name: 'x-octagon', dataicon: 'lucide:x-octagon' },
|
||||
{ name: 'x-square', dataicon: 'lucide:x-square' },
|
||||
{ name: 'x', dataicon: 'lucide:x' },
|
||||
{ name: 'youtube', dataicon: 'lucide:youtube' },
|
||||
{ name: 'zap-off', dataicon: 'lucide:zap-off' },
|
||||
{ name: 'zap', dataicon: 'lucide:zap' },
|
||||
{ name: 'zoom-in', dataicon: 'lucide:zoom-in' },
|
||||
{ name: 'zoom-out', dataicon: 'lucide:zoom-out' },
|
||||
]
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,86 +0,0 @@
|
||||
[
|
||||
{
|
||||
"name": "Login 1",
|
||||
"category": "AUTHENTICATION",
|
||||
"displayOrder": 0,
|
||||
"new": false,
|
||||
"route": {
|
||||
"name": "auth-login",
|
||||
"path": "/auth/login"
|
||||
},
|
||||
"screenshot": {
|
||||
"light": "/images/screenshots/auth/login-1-light.webp",
|
||||
"dark": "/images/screenshots/auth/login-1-dark.webp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Login 2",
|
||||
"category": "AUTHENTICATION",
|
||||
"displayOrder": 10,
|
||||
"new": false,
|
||||
"route": {
|
||||
"name": "auth-login-2",
|
||||
"path": "/auth/login-2"
|
||||
},
|
||||
"screenshot": {
|
||||
"light": "/images/screenshots/auth/login-2-light.webp",
|
||||
"dark": "/images/screenshots/auth/login-2-dark.webp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Login 3",
|
||||
"category": "AUTHENTICATION",
|
||||
"displayOrder": 20,
|
||||
"new": false,
|
||||
"route": {
|
||||
"name": "auth-login-3",
|
||||
"path": "/auth/login-3"
|
||||
},
|
||||
"screenshot": {
|
||||
"light": "/images/screenshots/auth/login-3-light.webp",
|
||||
"dark": "/images/screenshots/auth/login-3-dark.webp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Signup 1",
|
||||
"category": "AUTHENTICATION",
|
||||
"displayOrder": 30,
|
||||
"new": false,
|
||||
"route": {
|
||||
"name": "auth-signup-1",
|
||||
"path": "/auth/signup-1"
|
||||
},
|
||||
"screenshot": {
|
||||
"light": "/images/screenshots/auth/signup-1-light.webp",
|
||||
"dark": "/images/screenshots/auth/signup-1-dark.webp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Signup 2",
|
||||
"category": "AUTHENTICATION",
|
||||
"displayOrder": 40,
|
||||
"new": false,
|
||||
"route": {
|
||||
"name": "auth-signup-2",
|
||||
"path": "/auth/signup-2"
|
||||
},
|
||||
"screenshot": {
|
||||
"light": "/images/screenshots/auth/signup-2-light.webp",
|
||||
"dark": "/images/screenshots/auth/signup-2-dark.webp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Signup 3",
|
||||
"category": "AUTHENTICATION",
|
||||
"displayOrder": 50,
|
||||
"new": false,
|
||||
"route": {
|
||||
"name": "auth-signup-3",
|
||||
"path": "/auth/signup-3"
|
||||
},
|
||||
"screenshot": {
|
||||
"light": "/images/screenshots/auth/signup-3-light.webp",
|
||||
"dark": "/images/screenshots/auth/signup-3-dark.webp"
|
||||
}
|
||||
}
|
||||
]
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user