add miligram to a better design

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: {