From 1f49b0f7557844680968ebc46705ba207aeff82c Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Wed, 26 Jul 2023 17:43:21 +0200
Subject: [PATCH] add miligram to a better design

---
 core.css                                      | 10 +--
 feature-flow.css                              | 42 +++++++++-
 feature-flow.html                             | 12 +++
 index.css                                     |  6 +-
 index.html                                    | 12 +--
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 13 ++++
 src/modules/feature/FeatureStep.vue           |  4 +-
 src/modules/feature/FeatureSteps.vue          |  6 +-
 src/modules/simulation/SimulationControls.vue | 78 ++++++++++++-------
 .../simulation/SimulationDashboard.vue        | 33 ++++----
 src/modules/simulation/simulation-store.ts    |  3 +
 src/utils.ts                                  |  2 +-
 13 files changed, 159 insertions(+), 63 deletions(-)

diff --git a/core.css b/core.css
index f09355b..d7ab07b 100644
--- a/core.css
+++ b/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;
-  --background-color-no-focus: #abbbdf;
+  --primary-color: #002992;
+  --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 {
diff --git a/feature-flow.css b/feature-flow.css
index 749fade..f5ccb0c 100644
--- a/feature-flow.css
+++ b/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);
-  color: var(--background-color);
+  border: 3px solid var(--primary-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);
+}
diff --git a/feature-flow.html b/feature-flow.html
index 6bb6e91..41d272f 100644
--- a/feature-flow.html
+++ b/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" />
diff --git a/index.css b/index.css
index dd7a578..ecdb02d 100644
--- a/index.css
+++ b/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 {
diff --git a/index.html b/index.html
index 18fe30a..37f49ea 100644
--- a/index.html
+++ b/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>
diff --git a/package.json b/package.json
index d09a775..f4fe79e 100644
--- a/package.json
+++ b/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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d792193..acaf216 100644
--- a/pnpm-lock.yaml
+++ b/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}
diff --git a/src/modules/feature/FeatureStep.vue b/src/modules/feature/FeatureStep.vue
index c7b763a..7370b46 100644
--- a/src/modules/feature/FeatureStep.vue
+++ b/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;
diff --git a/src/modules/feature/FeatureSteps.vue b/src/modules/feature/FeatureSteps.vue
index 7ed724a..1f77a4c 100644
--- a/src/modules/feature/FeatureSteps.vue
+++ b/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;
   }
diff --git a/src/modules/simulation/SimulationControls.vue b/src/modules/simulation/SimulationControls.vue
index cded5f2..0e33e72 100644
--- a/src/modules/simulation/SimulationControls.vue
+++ b/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>
diff --git a/src/modules/simulation/SimulationDashboard.vue b/src/modules/simulation/SimulationDashboard.vue
index c6c1585..7bb9e60 100644
--- a/src/modules/simulation/SimulationDashboard.vue
+++ b/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>
diff --git a/src/modules/simulation/simulation-store.ts b/src/modules/simulation/simulation-store.ts
index 6799816..fb01426 100644
--- a/src/modules/simulation/simulation-store.ts
+++ b/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: {
diff --git a/src/utils.ts b/src/utils.ts
index 64a04d8..a830c65 100644
--- a/src/utils.ts
+++ b/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))