julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init dashboard redesign

Browse Source
This commit is contained in:
Julien Calixte
2023-07-30 16:00:22 +02:00
parent 97da4d62e4
commit c7293c0778
2 changed files with 104 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/modules/feature/FlowDashboard.vue
View File

@@ -2,6 +2,7 @@
import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
import PullSystemIcon from '@/icons/PullSystemIcon.vue'
import PushSystemIcon from '@/icons/PushSystemIcon.vue'
import SeparatorIcon from '@/icons/SeparatorIcon.vue'
import { useFeatureStore } from '@/modules/feature/feature-store'
const featureStore = useFeatureStore()
@@ -9,38 +10,113 @@ const featureStore = useFeatureStore()
<template>
<div class="flow-dashboard">
<div>
{{ featureStore.totalFeaturesDone }} /
{{ featureStore.totalFeaturesCount }} features in the board | mean
complexity : {{ featureStore.meanComplexity }} | mean lead time :
{{ featureStore.meanLeadTime }} days | Total days:
{{ featureStore.meta.totalDays }} | Team work experience:
{{ featureStore.meta.teamWorkExperience.toFixed(2) }}
</div>
<div class="row">
New feature live every {{ featureStore.taktTime }} days. Finishing in
{{ featureStore.eat }} days.
</div>
<template v-if="!featureStore.isProjectFinished">
<div class="row">Strategy of the day:</div>
<div class="row">
<button @click="featureStore.nextDay('push')">
<PushSystemIcon color="white" />
</button>
<button @click="featureStore.nextDay('pull')">
<PullSystemIcon color="white" />
</button>
<button @click="featureStore.nextDay('problem-solving')">
<ProblemSolvingIcon color="white" />
</button>
<div class="row cards">
<div class="card">
Features
<span class="numeric">
{{ featureStore.totalFeaturesDone }}/<span class="sub">
{{ featureStore.totalFeaturesCount }}
</span>
</span>
</div>
</template>
<div class="card">
Team work exp.
<span class="numeric">
{{ featureStore.meta.teamWorkExperience.toFixed(2) }}
</span>
</div>
<div class="card">
Mean complexity
<div class="numeric">{{ featureStore.meanComplexity }}</div>
</div>
<div class="card">
Mean lead time
<div class="data">
<span class="numeric">{{ featureStore.meanLeadTime }}</span>
days
</div>
</div>
<div class="card">
Days
<div class="data">
<span class="numeric">{{ featureStore.meta.totalDays }}</span
>d
</div>
</div>
<div class="card">
Takt time
<div class="data">
<span class="numeric">{{ featureStore.taktTime }}</span>
days
</div>
</div>
<div class="card">
ETA
<div class="data">
<span class="numeric">{{ featureStore.eat }}</span>
days
</div>
</div>
</div>
<SeparatorIcon />
<div class="row">
<button
@click="featureStore.nextDay('push')"
:disabled="featureStore.isProjectFinished"
>
<PushSystemIcon color="white" />
</button>
<button
@click="featureStore.nextDay('pull')"
:disabled="featureStore.isProjectFinished"
>
<PullSystemIcon color="white" />
</button>
<button
@click="featureStore.nextDay('problem-solving')"
:disabled="featureStore.isProjectFinished"
>
<ProblemSolvingIcon color="white" />
</button>
</div>
</div>
</template>
<style scoped lang="scss">
.flow-dashboard {
color: black;
font-size: 16pt;
display: flex;
flex-direction: column;
align-items: center;
.row {
display: flex;
justify-content: center;
}
.sub {
font-size: 12pt;
}
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
}
.card {
background-color: #f7d794;
padding: 0 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.numeric {
flex: 1;
}
}
}
</style>