add chart with the features done

src/icons/BaseIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ color: string }>(), {
+withDefaults(defineProps<{ color?: string }>(), {
   color: 'var(--primary-color)'
 })
 </script>

src/icons/ProblemSolvingIcon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseIcon from './BaseIcon.vue'
 
-withDefaults(defineProps<{ color: string }>(), {
+withDefaults(defineProps<{ color?: string }>(), {
   color: 'var(--primary-color)'
 })
 </script>

src/icons/PullSystemIcon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseIcon from './BaseIcon.vue'
 
-withDefaults(defineProps<{ color: string }>(), {
+withDefaults(defineProps<{ color?: string }>(), {
   color: 'var(--primary-color)'
 })
 </script>

src/icons/PushSystemIcon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseIcon from './BaseIcon.vue'
 
-withDefaults(defineProps<{ color: string }>(), {
+withDefaults(defineProps<{ color?: string }>(), {
   color: 'var(--primary-color)'
 })
 </script>

src/icons/SeparatorIcon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseIcon from './BaseIcon.vue'
 
-withDefaults(defineProps<{ color: string }>(), {
+withDefaults(defineProps<{ color?: string }>(), {
   color: 'var(--primary-color)'
 })
 </script>

src/modules/FlowArticle.vue

@@ -4,6 +4,7 @@ import FlowHypothesis from '@/modules/article/FlowHypothesis.vue'
 import FlowIntro from '@/modules/article/FlowIntro.vue'
 import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
 import FlowDashboard from '@/modules/feature/FlowDashboard.vue'
+import SimulationChart from '@/modules/simulation/SimulationChart.vue'
 import SimulationControls from '@/modules/simulation/SimulationControls.vue'
 import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
 </script>
@@ -21,6 +22,7 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
     <SeparatorIcon />
     <SimulationControls />
     <SimulationDashboard />
+    <SimulationChart />
   </div>
 </template>
 

src/modules/feature/FeatureSteps.vue

@@ -57,6 +57,7 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
     color: var(--primary-color);
     display: flex;
     flex-direction: column;
+    max-height: 100%;
   }
 }
 </style>

src/modules/feature/feature-board.ts

@@ -169,21 +169,21 @@ const getOverburdenMultiplicator = (tasksInParallel: number) => {
     case 1:
       return 1
     case 2:
-      return 1.2
-    case 3:
       return 1.5
+    case 3:
+      return 5
     case 4:
-      return 1.8
+      return 8
     case 5:
-      return 2.6
+      return 13
-    case 6:
+    // case 6:
-      return 4
+    //   return 4
-    case 7:
+    // case 7:
-      return 5.5
+    //   return 5.5
-    case 8:
+    // case 8:
-      return 7
+    //   return 7
     default:
-      return 10
+      return 25
   }
 }
 

src/modules/simulation/SimulationChart.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useSimulationStore } from '@/modules/simulation/simulation-store'
+import chartXkcd from 'chart.xkcd'
+import { onMounted } from 'vue'
+
+const simulationStore = useSimulationStore()
+
+const reloadGraph = () => {
+  if (
+    simulationStore.dashboards.length === 0 ||
+    simulationStore.dashboards.length > 15
+  ) {
+    return
+  }
+
+  const svg = document.querySelector('.chart')
+  const config = {
+    title: 'Features done per day',
+    xLabel: 'days',
+    yLabel: 'features done',
+    data: {
+      labels: Array.from(
+        {
+          length: Math.max(
+            ...simulationStore.dashboards.map(
+              (dashboard) => dashboard.meta.totalDays
+            )
+          )
+        },
+        (_, index) => index + 1
+      ),
+      datasets: simulationStore.dashboards.map((dashboard, index) => ({
+        label: `${dashboard.analysis.strategy} ${index + 1}`,
+        data: dashboard.meta.featuresDonePerDay
+      }))
+    },
+    options: {
+      showLegend: false
+    }
+  }
+  new chartXkcd.Line(svg, config)
+}
+
+// watch(simulationStore.dashboards, reloadGraph)
+onMounted(reloadGraph)
+</script>
+
+<template>
+  <div class="simulation-chart">
+    <svg class="chart"></svg>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chart {
+  width: 80vw;
+  height: 100vh;
+}
+</style>

src/modules/simulation/SimulationDashboard.vue

@@ -9,7 +9,7 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
 
 <template>
   <div class="simulation-dashboard">
-    <h3>Simulation dashboard</h3>
+    <h3>Dashboard</h3>
     <h4>
       {{ simulationStore.simulationsDone }}/{{
         simulationStore.requestedSimulation
@@ -19,7 +19,7 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
     <table>
       <thead>
         <tr>
-          <th></th>
+          <th>mean values</th>
           <th class="numeric">push</th>
           <th class="numeric">pull</th>
           <th class="numeric">push and DPS</th>
@@ -28,13 +28,19 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
       </thead>
       <tbody>
         <tr>
-          <td>lead time</td>
+          <td>Total days</td>
+          <td class="numeric" v-for="strategy in strategies" :key="strategy">
+            {{ simulationStore.meanTotalDays(strategy) }}
+          </td>
+        </tr>
+        <tr>
+          <td>Lead time</td>
           <td class="numeric" v-for="strategy in strategies" :key="strategy">
             {{ simulationStore.meanLeadTime(strategy) }}
           </td>
         </tr>
         <tr>
-          <td>takt time</td>
+          <td>Takt time</td>
           <td class="numeric" v-for="strategy in strategies" :key="strategy">
             {{ simulationStore.meanTaktTime(strategy) }}
           </td>
@@ -51,6 +57,12 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
             {{ simulationStore.meanQuality(strategy) }}
           </td>
         </tr>
+        <tr>
+          <td>Team work exp.</td>
+          <td class="numeric" v-for="strategy in strategies" :key="strategy">
+            {{ simulationStore.meanTeamWorkExperience(strategy) }}
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>

src/modules/simulation/simulation-store.ts

@@ -4,13 +4,13 @@ import { Dashboard, Meta } from '@/store-type'
 import { getRound } from '@/utils'
 import { defineStore } from 'pinia'
 
-// Get features done per day to plot it
-
 type Mean = {
   leadTimeSum: number
   taktTimeSum: number
   complexitySum: number
   qualityIssueSum: number
+  teamWorkExperienceSum: number
+  totalDaysSum: number
   simulations: number
 }
 
@@ -26,6 +26,8 @@ const newMean = (): Mean => ({
   taktTimeSum: 0,
   complexitySum: 0,
   qualityIssueSum: 0,
+  teamWorkExperienceSum: 0,
+  totalDaysSum: 0,
   simulations: 0
 })
 
@@ -102,6 +104,9 @@ export const useSimulationStore = defineStore('dashboard', {
         dashboard.meta.totalDays / newState.features.length
       this.mean[strategy].complexitySum += dashboard.analysis.meanComplexity
       this.mean[strategy].qualityIssueSum += dashboard.analysis.meanQualityIssue
+      this.mean[strategy].teamWorkExperienceSum +=
+        dashboard.meta.teamWorkExperience
+      this.mean[strategy].totalDaysSum += dashboard.meta.totalDays
       this.mean[strategy].simulations++
     },
     async multiSimulation(simulations: number, strategy: Strategy) {
@@ -139,6 +144,16 @@ export const useSimulationStore = defineStore('dashboard', {
       getRound(
         state.mean[strategy].qualityIssueSum,
         state.mean[strategy].simulations
+      ),
+    meanTeamWorkExperience: (state) => (strategy: Strategy) =>
+      getRound(
+        state.mean[strategy].teamWorkExperienceSum,
+        state.mean[strategy].simulations
+      ),
+    meanTotalDays: (state) => (strategy: Strategy) =>
+      getRound(
+        state.mean[strategy].totalDaysSum,
+        state.mean[strategy].simulations
       )
   }
 })