add miligram to a better design

src/modules/feature/FeatureStep.vue

@@ -90,7 +90,7 @@ const isLive = computed(
 
   header {
     padding: 0.5rem;
-    border: solid 2px var(--background-color);
+    border: solid 2px var(--primary-color);
     margin-top: 1rem;
   }
 
@@ -106,7 +106,7 @@ const isLive = computed(
 
   h5 {
     margin: 0;
-    background-color: var(--background-color);
+    background-color: var(--primary-color);
     padding: 0.35rem;
     text-align: center;
     color: white;

src/modules/feature/FeatureSteps.vue

@@ -32,7 +32,7 @@ const pushAndProblemSolving20Percent = () => {
       {{ featureStore.meanLeadTime }} days | Total days:
       {{ featureStore.meta.totalDays }}
     </div>
-    <div>
+    <div class="row">
       <button @click="featureStore.nextDay('push')">push system</button>
       <button @click="featureStore.nextDay('pull')">pull system</button>
       <button @click="pushAndProblemSolving20Percent">
@@ -69,7 +69,7 @@ pre {
   flex-wrap: wrap;
   align-items: stretch;
   margin: 0 1rem;
-  border: 3px solid var(--background-color);
+  border: 3px solid var(--primary-color);
 
   li:first-child {
     margin-left: 1rem;
@@ -88,7 +88,7 @@ pre {
     flex: 1;
     min-height: 100%;
     margin: 0;
-    color: var(--background-color);
+    color: var(--primary-color);
     display: flex;
     flex-direction: column;
   }

src/modules/simulation/SimulationControls.vue

@@ -6,32 +6,56 @@ const NUMBER_OF_SIMULATION = 1000
 
 <template>
   <div class="simulation-controls">
-    <button @click="simulationStore.simulate('push')">
-      simulate push system
-    </button>
-    <button @click="simulationStore.simulate('pull')">
-      simulate pull system
-    </button>
-    <button @click="simulationStore.simulate('problem-solving')">
-      simulate pull and problem solving
-    </button>
-    <button
-      @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'push')"
-    >
-      simulate {{ NUMBER_OF_SIMULATION }} push system
-    </button>
-    <button
-      @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull')"
-    >
-      simulate {{ NUMBER_OF_SIMULATION }} pull system
-    </button>
-    <button
-      @click="
-        simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'problem-solving')
-      "
-    >
-      simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
-    </button>
-    <button @click="simulationStore.clearDashboard()">clear dashboard</button>
+    <div class="row">
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('push')"
+      >
+        simulate push system
+      </button>
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('pull')"
+      >
+        simulate pull system
+      </button>
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('problem-solving')"
+      >
+        simulate pull and problem solving
+      </button>
+    </div>
+    <div class="row">
+      <button
+        class="button button-outline"
+        @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'push')"
+      >
+        simulate {{ NUMBER_OF_SIMULATION }} push system
+      </button>
+      <button
+        class="button button-outline"
+        @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull')"
+      >
+        simulate {{ NUMBER_OF_SIMULATION }} pull system
+      </button>
+      <button
+        class="button button-outline"
+        @click="
+          simulationStore.multiSimulation(
+            NUMBER_OF_SIMULATION,
+            'problem-solving'
+          )
+        "
+      >
+        simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
+      </button>
+      <button
+        class="button button-clear"
+        @click="simulationStore.clearDashboard()"
+      >
+        clear dashboard
+      </button>
+    </div>
   </div>
 </template>

src/modules/simulation/SimulationDashboard.vue

@@ -6,9 +6,12 @@ const simulationStore = useSimulationStore()
 
 <template>
   <div class="simulation-dashboard">
-    Dashboard ({{ simulationStore.simulationsDone }} /
-    {{ simulationStore.requestedSimulation }}
-    simulations)
+    <h3>Dashboard</h3>
+    <h4>
+      ({{ simulationStore.simulationsDone }} /
+      {{ simulationStore.requestedSimulation }}
+      simulations)
+    </h4>
     <table>
       <thead>
         <tr>
@@ -21,37 +24,37 @@ const simulationStore = useSimulationStore()
       <tbody>
         <tr>
           <td>lead time</td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPushLeadTime }}
           </td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPullLeadTime }}
           </td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPullDPSLeadTime }}
           </td>
         </tr>
         <tr>
           <td>Complexity</td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPushComplexity }}
           </td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPullComplexity }}
           </td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPullDPSComplexity }}
           </td>
         </tr>
         <tr>
           <td>Quality issue</td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPushQuality }}
           </td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPullQuality }}
           </td>
-          <td>
+          <td class="numeric">
             {{ simulationStore.meanPullDPSQuality }}
           </td>
         </tr>
@@ -62,6 +65,10 @@ const simulationStore = useSimulationStore()
 
 <style scoped lang="scss">
 .simulation-dashboard {
-  color: var(--background-color);
+  color: var(--primary-color);
+}
+
+td.numeric {
+  text-align: right;
 }
 </style>

src/modules/simulation/simulation-store.ts

@@ -104,6 +104,9 @@ export const useSimulationStore = defineStore('dashboard', {
     },
     clearDashboard() {
       this.dashboards = []
+      this.mean.push = newMean()
+      this.mean.pull = newMean()
+      this.mean['problem-solving'] = newMean()
     }
   },
   getters: {

src/utils.ts

@@ -2,7 +2,7 @@ export const getMean = (data: number[]) =>
   Math.round(100 * (sumElements(data) / data.length)) / 100
 
 export const getRound = (data: number, total: number) =>
-  Math.round(100 * (data / total)) / 100
+  (Math.round(100 * (data / total)) / 100 || 0).toFixed(2)
 
 export const clone = (data: any) => JSON.parse(JSON.stringify(data))