add miligram to a better design

core.css

@@ -1,8 +1,8 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
 
 :root {
-  --background-color: #002992;
+  --primary-color: #002992;
-  --background-color-no-focus: #abbbdf;
+  --primary-color-no-focus: #abbbdf;
   --color: white;
 }
 
@@ -12,13 +12,13 @@
 
 body {
   font-size: 28px;
-  font-family: "Noto Serif", serif;
+  font-family: 'Noto Serif', serif;
   margin: 0;
 }
 
 header {
   text-align: center;
-  color: var(--background-color);
+  color: var(--primary-color);
 }
 
 main {

feature-flow.css

@@ -4,6 +4,12 @@
   --feature-item-height: 70px;
 }
 
+.row {
+  display: flex;
+  gap: 1rem;
+  padding: 0 1rem;
+}
+
 ul {
   list-style: none;
   padding: 0;
@@ -11,8 +17,8 @@ ul {
 
 .bin {
   margin-top: 1rem;
-  border: 3px solid var(--background-color);
+  border: 3px solid var(--primary-color);
-  color: var(--background-color);
+  color: var(--primary-color);
   background-color: white;
   min-height: var(--feature-item-height);
   display: flex;
@@ -27,7 +33,7 @@ ul {
 }
 
 .blue-bin {
-  background-color: var(--background-color);
+  background-color: var(--primary-color);
   color: white;
   font-size: 18pt;
 }
@@ -43,3 +49,33 @@ ul {
   font-family: 'Cutive Mono', monospace;
   font-weight: bold;
 }
+
+/* Miligram reset */
+
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  background-color: var(--primary-color);
+  border: 0.1rem solid var(--primary-color);
+}
+
+.button.button-outline,
+button.button-outline,
+input[type='button'].button-outline,
+input[type='reset'].button-outline,
+input[type='submit'].button-outline {
+  background-color: transparent;
+  color: var(--primary-color);
+}
+
+.button.button-clear,
+button.button-clear,
+input[type='button'].button-clear,
+input[type='reset'].button-clear,
+input[type='submit'].button-clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
+}

feature-flow.html

@@ -10,6 +10,18 @@
     My understanding of how a feature flow
     can help team prioritize."
     />
+    <!-- CSS Reset -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
+    />
+
+    <!-- Milligram CSS -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
+    />
+
     <link rel="stylesheet" href="core.css" />
     <link rel="stylesheet" href="feature-flow.css" />
     <link rel="icon" href="people-improvement.svg" />

index.css

@@ -11,15 +11,15 @@ li {
 }
 
 .focusable {
-  background-color: var(--background-color);
+  background-color: var(--primary-color);
 }
 
 .focusable.no-focus {
-  background-color: var(--background-color-no-focus);
+  background-color: var(--primary-color-no-focus);
 }
 
 .text-hide {
-  color: var(--background-color);
+  color: var(--primary-color);
 }
 
 .customer-satisfaction-roof {

index.html

@@ -56,7 +56,7 @@
               cx="696.5"
               cy="295.5"
               r="88.5"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
             />
             <rect
               x="537"
@@ -64,7 +64,7 @@
               width="319"
               height="408"
               rx="106"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
             />
             <rect
               x="593"
@@ -72,21 +72,21 @@
               width="207"
               height="408"
               rx="103.5"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
             />
             <path
               d="M657 1177L732 1220.3L732 1133.7L657 1177Z"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
             />
             <path
               d="M746 107L671 63.6987V150.301L746 107Z"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
             />
             <circle
               cx="696.5"
               cy="643.5"
               r="535"
-              stroke="var(--background-color)"
+              stroke="var(--primary-color)"
               stroke-width="23"
             />
           </svg>

package.json

@@ -14,6 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "comlink": "^4.4.1",
+    "milligram": "^1.4.1",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
     "vue-starport": "^0.3.0"

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   comlink:
     specifier: ^4.4.1
     version: 4.4.1
+  milligram:
+    specifier: ^1.4.1
+    version: 1.4.1
   pinia:
     specifier: ^2.1.4
     version: 2.1.4(typescript@5.1.6)(vue@3.3.4)
@@ -695,6 +698,12 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /milligram@1.4.1:
+    resolution: {integrity: sha512-RCgh/boHhcXWOUfKJWm3RJRoUeaEguoipDg0mJ31G0tFfvcpWMUlO1Zlqqr12K4kAXfDlllaidu0x7PaL2PTFg==}
+    dependencies:
+      normalize.css: 8.0.1
+    dev: false
+
   /mlly@1.4.0:
     resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
     dependencies:
@@ -718,6 +727,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize.css@8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+    dev: false
+
   /p-limit@4.0.0:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

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')">
+    <div class="row">
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('push')"
+      >
         simulate push system
       </button>
-    <button @click="simulationStore.simulate('pull')">
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('pull')"
+      >
         simulate pull system
       </button>
-    <button @click="simulationStore.simulate('problem-solving')">
+      <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')
+          simulationStore.multiSimulation(
+            NUMBER_OF_SIMULATION,
+            'problem-solving'
+          )
         "
       >
         simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
       </button>
-    <button @click="simulationStore.clearDashboard()">clear dashboard</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 }} /
+    <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))