julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add miligram to a better design

Browse Source
This commit is contained in:
Julien Calixte
2023-07-26 17:43:21 +02:00
parent 00ccbe21a7
commit 1f49b0f755
13 changed files with 159 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core.css
View File

@@ -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 { :root {
--background-color: #002992; --primary-color: #002992;
--background-color-no-focus: #abbbdf; --primary-color-no-focus: #abbbdf;
--color: white; --color: white;
} }
@@ -12,13 +12,13 @@
body { body {
font-size: 28px; font-size: 28px;
font-family: "Noto Serif", serif; font-family: 'Noto Serif', serif;
margin: 0; margin: 0;
} }
header { header {
text-align: center; text-align: center;
color: var(--background-color); color: var(--primary-color);
} }
main { main {

42
feature-flow.css
View File

@@ -4,6 +4,12 @@
--feature-item-height: 70px; --feature-item-height: 70px;
} }
.row {
display: flex;
gap: 1rem;
padding: 0 1rem;
}
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@@ -11,8 +17,8 @@ ul {
.bin { .bin {
margin-top: 1rem; 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; background-color: white;
min-height: var(--feature-item-height); min-height: var(--feature-item-height);
display: flex; display: flex;
@@ -27,7 +33,7 @@ ul {
} }
.blue-bin { .blue-bin {
background-color: var(--background-color); background-color: var(--primary-color);
color: white; color: white;
font-size: 18pt; font-size: 18pt;
} }
@@ -43,3 +49,33 @@ ul {
font-family: 'Cutive Mono', monospace; font-family: 'Cutive Mono', monospace;
font-weight: bold; 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);
}

12
feature-flow.html
View File

@@ -10,6 +10,18 @@
My understanding of how a feature flow My understanding of how a feature flow
can help team prioritize." 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="core.css" />
<link rel="stylesheet" href="feature-flow.css" /> <link rel="stylesheet" href="feature-flow.css" />
<link rel="icon" href="people-improvement.svg" /> <link rel="icon" href="people-improvement.svg" />

6
index.css
View File

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

12
index.html
View File

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

1
package.json
View File

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

13
pnpm-lock.yaml generated
View File

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

4
src/modules/feature/FeatureStep.vue
View File

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

6
src/modules/feature/FeatureSteps.vue
View File

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

78
src/modules/simulation/SimulationControls.vue
View File

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

33
src/modules/simulation/SimulationDashboard.vue
View File

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

3
src/modules/simulation/simulation-store.ts
View File

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

2
src/utils.ts
View File

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