82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<Section variant="plain" paddingY="md">
|
|
<Stack gap="6">
|
|
<Heading :level="1">Test Timeline Chart</Heading>
|
|
|
|
<Card>
|
|
<Stack gap="4">
|
|
<Heading :level="3" weight="semibold">Hello World vue-timeline-chart</Heading>
|
|
|
|
<ClientOnly>
|
|
<Timeline
|
|
:groups="timelineGroups"
|
|
:items="timelineItems"
|
|
:viewportMin="Date.parse('2024-08-01')"
|
|
:viewportMax="Date.parse('2024-08-31')"
|
|
style="height: 400px;"
|
|
>
|
|
<template #group-label="{ group }">
|
|
<Text weight="semibold">{{ group.label }}</Text>
|
|
</template>
|
|
<template #item="{ item }">
|
|
<Pill variant="primary">{{ item.label }}</Pill>
|
|
</template>
|
|
</Timeline>
|
|
|
|
<template #fallback>
|
|
<Card tone="muted" padding="lg" style="height: 384px;">
|
|
<Stack align="center" justify="center" gap="2" fullHeight>
|
|
<Text tone="muted">Loading...</Text>
|
|
</Stack>
|
|
</Card>
|
|
</template>
|
|
</ClientOnly>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Card tone="muted" padding="lg">
|
|
<Stack gap="2">
|
|
<Heading :level="4" weight="semibold">Debug info:</Heading>
|
|
<Text tag="pre" mono size="base">{{ debugInfo }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const timelineGroups = [
|
|
{ id: 'group1', label: 'Stage 1' },
|
|
{ id: 'group2', label: 'Stage 2' }
|
|
]
|
|
|
|
const timelineItems = [
|
|
{
|
|
id: 'item1',
|
|
group: 'group1',
|
|
start: Date.parse('2024-08-01'),
|
|
end: Date.parse('2024-08-10'),
|
|
label: 'Task 1'
|
|
},
|
|
{
|
|
id: 'item2',
|
|
group: 'group2',
|
|
start: Date.parse('2024-08-05'),
|
|
end: Date.parse('2024-08-15'),
|
|
label: 'Task 2'
|
|
}
|
|
]
|
|
|
|
const debugInfo = computed(() =>
|
|
JSON.stringify(
|
|
{
|
|
groups: timelineGroups,
|
|
items: timelineItems,
|
|
timestamp: new Date().toISOString(),
|
|
},
|
|
null,
|
|
2
|
|
)
|
|
)
|
|
</script>
|