diff options
Diffstat (limited to 'src/components/BaseLine.vue')
| -rw-r--r-- | src/components/BaseLine.vue | 39 |
1 files changed, 35 insertions, 4 deletions
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index f0008f9..bde2e56 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -1,21 +1,28 @@ <template> -<div class="bg-stone-900 text-stone-50 flex" :class="{'flex-col': vert}"> +<div class="bg-stone-900 text-stone-50 flex relative" :class="{'flex-col': vert}"> <div v-for="p in periods" :key="p.label" :style="periodStyles(p)"> <div :style="labelStyles">{{p.label}}</div> </div> + <TransitionGroup name="fade"> + <div v-for="d in timelineData" :key="d.id" + class="absolute bg-yellow-200/50" :style="spanStyles(d)"> + {{d.id}} + </div> + </TransitionGroup> </div> </template> <script setup lang="ts"> -import {ref, computed, PropType} from 'vue'; +import {ref, computed} from 'vue'; +import {MIN_DATE, MAX_DATE} from '../lib'; // Props const props = defineProps({ vert: {type: Boolean, required: true}, - timelineData: {type: Object as PropType<number[][]>, required: true}, + timelineData: {type: Object, required: true}, }); -// Time periods to represent +// Static time periods to represent const periods = ref([ {label: 'One', len: 1}, {label: 'Two', len: 2}, @@ -35,4 +42,28 @@ const labelStyles = computed(() => ({ width: props.vert ? '40px' : 'auto', padding: props.vert ? '0' : '4px', })); +function spanStyles(d){ + let styles: Record<string,string>; + let beforeFrac = Math.max(0, (d.start - MIN_DATE) / (MAX_DATE - MIN_DATE)); // Clip at zero due to end-padding + let lenFrac = Math.min(1 - beforeFrac, (d.end - d.start) / (MAX_DATE - MIN_DATE)); + if (props.vert){ + styles = { + top: beforeFrac * 100 + '%', + left: 0, + height: lenFrac * 100 + '%', + width: '100%', + } + } else { + styles = { + top: 0, + left: beforeFrac * 100 + '%', + height: '100%', + width: lenFrac * 100 + '%', + } + } + return { + ...styles, + transition: 'all 300ms ease-out', + }; +} </script> |