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

add some notes in article

Browse Source
This commit is contained in:
Julien Calixte
2026-01-02 14:34:55 +01:00
parent 2ce2ca0eae
commit d78550904d
1 changed files with 212 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
src/AppHeijunka.vue
View File

@@ -19,8 +19,6 @@ import OrderItem from '@/modules/heijkunka/assets/OrderItem.vue'
const days = Array.from({ length: NUMBER_OF_DAYS }, (_, i) => i + 1) const days = Array.from({ length: NUMBER_OF_DAYS }, (_, i) => i + 1)
const hours = Array.from({ length: NUMBER_OF_HOURS_PER_DAY }, (_, i) => i + 1) const hours = Array.from({ length: NUMBER_OF_HOURS_PER_DAY }, (_, i) => i + 1)
const hoursCount = hours.length
const orders = ref( const orders = ref(
Array.from( Array.from(
{ length: days.length * hours.length }, { length: days.length * hours.length },
@@ -59,7 +57,7 @@ const levelingPlanning: ProductType[] = [
] ]
const orderIndex = (dayIndex: number, hourIndex: number) => { const orderIndex = (dayIndex: number, hourIndex: number) => {
return dayIndex * hoursCount + hourIndex return dayIndex * hours.length + hourIndex
} }
const heijunkaStore = useHeijunkaStore() const heijunkaStore = useHeijunkaStore()
@@ -77,77 +75,84 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
<h2 class="created-at numeric"> <h2 class="created-at numeric">
{{ createdAt }} {{ createdAt }}
</h2> </h2>
<div class="text"> <p>
<p> You're selling shirts, jeans and shoes in a little town that is quite
You're selling shirts, jeans and shoes in a little town that is quite specific: every hour someone get to your shop and buys 1 item and they
specific: every hour someone get to your shop and buys 1 item and they won't leave until they are satisfied!
won't leave until they are satisfied! </p>
</p> <p>
<p> You know, from your years of experience, that in 3 days, you sell
You know, from your years of experience, that in 3 days, you sell approximately
approximately </p>
</p> <div class="columns">
<ul> <ul>
<li>5 shirts <ShirtItem v-for="_ in Array(5)" /></li> <li>5 shirts</li>
<li>3 jeans <JeanItem v-for="_ in Array(3)" /></li> <li>3 jeans</li>
<li>2 pairs of shoes <ShoeItem v-for="_ in Array(2)" /></li> <li>2 pairs of shoes</li>
<li>2 hats <HatItem v-for="_ in Array(2)" /></li> <li>2 hats</li>
</ul> </ul>
<p> <ul>
As there are 4 hours of production per day, you must produce 4 products <li><ShirtItem v-for="_ in Array(5)" /></li>
per day to meet the 12 orders every 3 days. At the end, you produce 1 <li><JeanItem v-for="_ in Array(3)" /></li>
product every hour. <li><ShoeItem v-for="_ in Array(2)" /></li>
</p> <li><HatItem v-for="_ in Array(2)" /></li>
<section class="factory"> </ul>
<h2>Factory</h2> </div>
<p>
As there are 4 hours of production per day, you must produce 4 products
per day to meet the 12 orders every 3 days. At the end, you produce 1
product every hour.
</p>
<section class="factory">
<h2>Factory</h2>
<table> <table>
<thead> <thead>
<tr> <tr>
<th scope="col">Day</th> <th scope="col">Day</th>
<th scope="col">Hour 1</th> <th scope="col">Hour 1</th>
<th scope="col">Hour 2</th> <th scope="col">Hour 2</th>
<th scope="col">Hour 3</th> <th scope="col">Hour 3</th>
<th scope="col">Hour 4</th> <th scope="col">Hour 4</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(day, dayIndex) in days" :key="day"> <tr v-for="(day, dayIndex) in days" :key="day">
<th scope="row">Day {{ day }}</th> <th scope="row">Day {{ day }}</th>
<td v-for="(hour, hourIndex) in hours"> <td v-for="(hour, hourIndex) in hours">
<select <select
v-model="orders[orderIndex(dayIndex, hourIndex)]" v-model="orders[orderIndex(dayIndex, hourIndex)]"
:name="`day-${day}-hour-${hour}`" :name="`day-${day}-hour-${hour}`"
:id="`day-${day}-hour-${hour}`" :id="`day-${day}-hour-${hour}`"
:disabled="heijunkaStore.validatedPlanning" :disabled="heijunkaStore.validatedPlanning"
> >
<option value="shirt">Shirt</option> <option value="shirt">Shirt</option>
<option value="jeans">Jeans</option> <option value="jeans">Jeans</option>
<option value="shoes">Shoes</option> <option value="shoes">Shoes</option>
<option value="hat">Hat</option> <option value="hat">Hat</option>
</select> </select>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<section class="commands"> <section class="commands">
<button <button
v-if="!heijunkaStore.validatedPlanning" v-if="!heijunkaStore.validatedPlanning"
class="button-outline" class="button-outline"
@click="heijunkaStore.validatePlanning(orders)" @click="heijunkaStore.validatePlanning(orders)"
> >
validate planning validate planning
</button> </button>
<button <button
v-else-if="!heijunkaStore.gameEnded" v-else-if="!heijunkaStore.gameEnded"
class="button-outline" class="button-outline"
@click="heijunkaStore.newHour()" @click="heijunkaStore.newHour()"
:disabled="!heijunkaStore.validatedPlanning" :disabled="!heijunkaStore.validatedPlanning"
> >
next hour next hour
<!-- <svg <!-- <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
@@ -162,125 +167,139 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" /> <path d="M7 4v16l13 -8z" />
</svg> --> </svg> -->
</button> </button>
<button class="button-outline" @click="heijunkaStore.reset()"> <button class="button-outline" @click="heijunkaStore.reset()">
reset reset
</button> </button>
<button class="button-outline" @click="orders = [...levelingPlanning]"> <button class="button-outline" @click="orders = [...levelingPlanning]">
levelling levelling
</button> </button>
<button class="button-outline" @click="orders = [...batchPlanning]"> <button class="button-outline" @click="orders = [...batchPlanning]">
batch batch
</button> </button>
<div>
<button class="button-outline" @click="heijunkaStore.simulateMonth()">
Simulate a month
</button>
</div>
</section>
<div> <div>
<span v-if="heijunkaStore.meta.currentHour > 0"> <button class="button-outline" @click="heijunkaStore.simulateMonth()">
day: {{ heijunkaStore.currentDay }} | current hour: Simulate a month
{{ heijunkaStore.meta.currentHour }} hours </button>
</span>
</div> </div>
</section>
<section class="dashboard"> <div>
Mean lead time: {{ heijunkaStore.meanLeadTime }} <span v-if="heijunkaStore.meta.currentHour > 0">
<hr /> day: {{ heijunkaStore.currentDay }} | current hour:
Orders made: {{ heijunkaStore.orders.length }} {{ heijunkaStore.meta.currentHour }} hours
</section> </span>
<HeijunkaStat />
<section class="shop">
<div class="inventory">
<h2>Inventory</h2>
<section class="shop-shirt">
<ShirtItem
v-for="shirt in Array.from(
{ length: heijunkaStore.remainingInventory.shirt },
(_, i) => i
)"
:key="shirt"
/>
</section>
<section class="shop-jeans">
<JeanItem
v-for="jeans in Array.from(
{ length: heijunkaStore.remainingInventory.jeans },
(_, i) => i
)"
:key="jeans"
/>
</section>
<section class="shop-shoes">
<ShoeItem
v-for="shoes in Array.from(
{ length: heijunkaStore.remainingInventory.shoes },
(_, i) => i
)"
:key="shoes"
/>
</section>
<section class="shop-hat">
<HatItem
v-for="hat in Array.from(
{ length: heijunkaStore.remainingInventory.hat },
(_, i) => i
)"
:key="hat"
/>
</section>
</div>
<div class="orders">
<h2>Orders</h2>
<ol>
<li
class="order"
v-for="order in heijunkaStore.orders.toReversed()"
>
<RequestedStatus v-show="order.status === 'requested'" />
<ReceivedStatus v-show="order.status === 'received'" />
<OrderItem />
<span class="numeric">
{{ order.product }} | {{ order.leadTime }}
</span>
</li>
</ol>
</div>
</section>
<section class="dashboard">
Mean lead time: {{ heijunkaStore.meanLeadTime }}
<hr />
Orders made: {{ heijunkaStore.orders.length }}
</section>
<p>
The longer the lead time is, the longer it takes to have return on
investment. You already paid for the raw material, the workforce, the
machines but until the client receives the product you won't get paid.
</p>
<p>
The more stock there is, the more latent payments there are and the more
paymeents are still waiting, the more you need to be good at planning
batches.
</p>
<p>
Producing a bit of everything with small batches is the way to go and
that's the core of Heijunka
</p>
<h2>What heijunka needs: SMED</h2>
<p>
We didn't talk here about how we manage products that need different
time to be produced.
</p>
</div> </div>
<section class="dashboard">
Mean lead time: {{ heijunkaStore.meanLeadTime }}
<hr />
Orders made: {{ heijunkaStore.orders.length }}
</section>
<HeijunkaStat />
<section class="shop">
<div class="inventory">
<h2>Inventory</h2>
<section class="shop-shirt">
<ShirtItem
v-for="shirt in Array.from(
{ length: heijunkaStore.remainingInventory.shirt },
(_, i) => i
)"
:key="shirt"
/>
</section>
<section class="shop-jeans">
<JeanItem
v-for="jeans in Array.from(
{ length: heijunkaStore.remainingInventory.jeans },
(_, i) => i
)"
:key="jeans"
/>
</section>
<section class="shop-shoes">
<ShoeItem
v-for="shoes in Array.from(
{ length: heijunkaStore.remainingInventory.shoes },
(_, i) => i
)"
:key="shoes"
/>
</section>
<section class="shop-hat">
<HatItem
v-for="hat in Array.from(
{ length: heijunkaStore.remainingInventory.hat },
(_, i) => i
)"
:key="hat"
/>
</section>
</div>
<div class="orders">
<h2>Orders</h2>
<ol>
<li class="order" v-for="order in heijunkaStore.orders.toReversed()">
<RequestedStatus v-show="order.status === 'requested'" />
<ReceivedStatus v-show="order.status === 'received'" />
<OrderItem />
<span class="numeric">
{{ order.product }} | {{ order.leadTime }}
</span>
</li>
</ol>
</div>
</section>
<section class="dashboard">
Mean lead time: {{ heijunkaStore.meanLeadTime }}
<hr />
Orders made: {{ heijunkaStore.orders.length }}
</section>
<p>
The longer the lead time is, the longer it takes to have return on
investment. You already paid for the raw material, the workforce, the
machines but until the client receives the product you won't get paid.
</p>
<h2>Batching is more convenient</h2>
<p>
As the raw materials are not the same, you must plan . Making big batches
makes the production easier: you add stock so you.
</p>
<p>
But here comes the bullwhip effect: if you plan with margin, your
suppliers do it too, with margin. These margins add up and even a slight
change in priority demands a high change in the supply network.
</p>
<p>
The more stock there is, the more latent payments there are and the more
paymeents are still waiting, the more you need to be good at planning
batches.
</p>
<p>
So producing <em>a bit of everything</em> with small batches is the way to
go and that's the core of Heijunka.
</p>
<h2>
But heijunka needs conditions. First:
<strong title="Singe Minute Exchange of Dice">SMED</strong>
</h2>
<p>
We didn't talk here about how we manage products that need different time
to be produced. There are multiple difficulties when we try to level the
production: by doing everything every day you must have much more
<strong class="rainbow" aria-label="flexibility">flexibility</strong> in
what you can make per day.
</p>
<h2>Heijunka is fun</h2>
<p>There's no ///</p>
</article> </article>
</template> </template>
@@ -294,6 +313,14 @@ main {
gap: 1rem; gap: 1rem;
} }
.columns {
display: flex;
li {
line-height: 1.5rem;
}
}
li { li {
display: flex; display: flex;
gap: 1rem; gap: 1rem;