Skip to content

Commit

Permalink
chartbestellmenge
Browse files Browse the repository at this point in the history
  • Loading branch information
@fdagner
fdagner committed Feb 7, 2024
1 parent 975a6b4 commit 56515ca
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 80 deletions.
115 changes: 67 additions & 48 deletions bwl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,59 +16,76 @@
<main>
<a href="index.html">Zurück zur Übersicht</a>
<h1>Betriebswirtschaftslehre</h1>

<nav class="tab">
<button class="tablinks" id="defaultOpen" onclick="openCity(event, 'bestellmenge')">Optimale Bestellmenge</button>
<button class="tablinks" onclick="openCity(event, 'produktlebenszyklus')">Produktlebenszyklus</button>
<button class="tablinks" onclick="openCity(event, 'portfolio')">Portfolio-Analyse</button>
</nav>

<section id="bestellmenge" class="tabcontent">
<div class="box">
<h2>Optimale Bestellmenge (Tabelle und Diagramm)</h2>
<p>Geben Sie Ihre Wunschwerte als Ganzzahlen an. Die Schrittweite sollte ein Teiler der Bestellhäufigkeit sein. Je höher die Schrittweite, desto kürzer die Tabelle. Empfehlenswert sind 5er oder 10er Schritte.</p>
<div class="grid3">
<div>
<label for="optimaleBestellmenge">Optimale Bestellmenge:</label><br>
<input type="number" id="optimaleBestellmenge" placeholder="Optimale Bestellmenge eingeben" value="200" required></div>
<div>
<label for="optimaleBestellhaeufigkeit">Optimale Bestellhäufigkeit:</label><br>
<input type="number" id="optimaleBestellhaeufigkeit" max="365" placeholder="Optimale Bestellhäufigkeit eingeben" value="20" required></div>
<div>
<label for="bestellkosten">Bestellkosten pro Bestellung:</label><br>
<input type="number" id="bestellkosten" placeholder="Bestellkosten eingeben" value="50" required></div>
<div>
<label for="schrittweite">Schrittweite:</label><br>
<input type="number" id="schrittweite" value="5" required>
</div>
<div><p>Berechnete Lagerkosten je Stück:<br><span id="lagerkosten">...</span></p></div>
<div><p>Gesamte Bestellmenge (Bedarf):<br><span id="bedarf">...</span></p></div>
</div><br>
<button onclick="berechneOptimaleBestellmengeUndHaeufigkeit()">Tabelle und Diagramm erstellen</button>
<h2>Tabelle</h2>
<div id="wertetabelle" style="min-width: 700px" contenteditable="true"></div>
<br> <div class="exportButtons">
<button class="icon" type="button" onclick="bestellmengeHerunterladenAlsPNG()"><svg
xmlns="http://www.w3.org/2000/svg" height="16" width="16"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
<section id="bestellmenge" class="tabcontent">
<div class="box">
<h2>Optimale Bestellmenge (Tabelle und Diagramm)</h2>
<p>Geben Sie Ihre Wunschwerte als Ganzzahlen an. Die Schrittweite sollte ein Teiler der Bestellhäufigkeit sein:
Je höher die Schrittweite, desto kürzer die Tabelle. Empfehlenswert sind 5er oder 10er Schritte.
Die Berechnnung ergibt immer einen ganzzahligen und passgenauen Schnittpunkt, bei dem Bestellkosten und
Lagerhaltungskosten gleich hoch sind.
Sollen die Werte unterschiedlich sein und der Schnittpunkt rechnerisch nicht ganzzahlig, geben Sie bei der
optimalen Bestellhäufigkeit eine Kommazahl an. </p>
<div class="grid3">
<div>
<label for="optimaleBestellmenge">Optimale Bestellmenge:</label><br>
<input type="number" id="optimaleBestellmenge" placeholder="Optimale Bestellmenge eingeben" value="200"
required>
</div>
<div>
<label for="optimaleBestellhaeufigkeit">Optimale Bestellhäufigkeit:</label><br>
<input type="number" id="optimaleBestellhaeufigkeit" max="365"
placeholder="Optimale Bestellhäufigkeit eingeben" value="20" required>
</div>
<div>
<label for="bestellkosten">Bestellkosten pro Bestellung:</label><br>
<input type="number" id="bestellkosten" placeholder="Bestellkosten eingeben" value="50" required>
</div>
<div>
<label for="schrittweite">Schrittweite:</label><br>
<input type="number" id="schrittweite" value="5" required>
</div>
<div>
<p>Berechnete Lagerkosten je Stück:<br><span id="lagerkosten">...</span></p>
</div>
<div>
<p>Gesamte Bestellmenge (Bedarf):<br><span id="bedarf">...</span></p>
</div>
</div><br>
<button onclick="berechneOptimaleBestellmengeUndHaeufigkeit()">Tabelle und Diagramm erstellen</button>
<h2>Tabelle</h2>
<div id="wertetabelle" style="min-width: 700px" contenteditable="true"></div>
<br>
<div class="exportButtons">
<button class="icon" type="button" onclick="bestellmengeHerunterladenAlsPNG()"><svg
xmlns="http://www.w3.org/2000/svg" height="16" width="16"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z" />
</svg></button>
<button class="icon" type="button" onclick="bestellmengeHerunterladen()"><svg
xmlns="http://www.w3.org/2000/svg" height="16" width="12"
viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
</svg></button>
<button class="icon" type="button" onclick="bestellmengeHerunterladen()"><svg
xmlns="http://www.w3.org/2000/svg" height="16" width="12"
viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm97 289c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L79 303c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM257 255c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z" />
</svg></button>
<button class="icon" type="button" onclick="bestellmengeKopiereInZwischenablage()"><svg
xmlns="http://www.w3.org/2000/svg" height="16" width="20"
viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
</svg></button>
<button class="icon" type="button" onclick="bestellmengeKopiereInZwischenablage()"><svg
xmlns="http://www.w3.org/2000/svg" height="16" width="20"
viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" />
</svg></button>
</div>
<br><canvas id="myChart" width="400" height="400"></canvas><br>
</section>
</svg></button>
</div><br>
<h2>Diagramm</h2>
<canvas id="myChart" width="400" height="200"></canvas>
<p>Klicken Sie in die Legende, um Kurven ein- und auszublenden. Das Diagramm können Sie mit einem Rechtsklick
als Grafik herunterladen.</p>
</section>



Expand Down Expand Up @@ -272,12 +289,14 @@ <h2>Produklebenszyklus</h2>
</main>
<footer>
<p>
<small>
Soweit nicht anders gekennzeichnet unterliegen alle per Button exportierbaren Inhalte der Lizenz <a href="https://creativecommons.org/publicdomain/mark/1.0/deed.de">CC0 1.0 Deed</a>.
Der Quellcode sowie Möglichkeiten zur Mitwirkung sind über das <a href="https://github.com/fdagner/bwr">Repository auf Github</a> zu erreichen.<br>
<small>
Soweit nicht anders gekennzeichnet unterliegen alle per Button exportierbaren Inhalte der Lizenz <a
href="https://creativecommons.org/publicdomain/mark/1.0/deed.de">CC0 1.0 Deed</a>.
Der Quellcode sowie Möglichkeiten zur Mitwirkung sind über das <a
href="https://github.com/fdagner/bwr">Repository auf Github</a> zu erreichen.<br>
<a href="https://github.com/fdagner">fdagner</a> · BwR<br><br>
<img src="media/pic/oer.svg" style="min-width: 100px;width:10%;">
</small>
</small>
</p>
</footer>
</body>
Expand Down
80 changes: 49 additions & 31 deletions js/bwl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function formatNumberWithSpace(number) {
function roundUpToNearest(number) {
const digits = Math.floor(Math.log10(number));
const factor = Math.pow(10, digits);

if (factor < 10) {
return Math.ceil(number / 10) * 10;
} else if (factor < 100) {
Expand All @@ -33,22 +33,22 @@ function berechneOptimaleBestellmengeUndHaeufigkeit() {

function validateInputs(optimaleBestellmenge, optimaleBestellhaeufigkeit, bestellkosten, schrittweite) {
const inputs = [
{ value: optimaleBestellmenge, min: 1, max: 999999999, message: "Optimale Bestellmenge (1 - 999999999)" },
{ value: optimaleBestellmenge, min: 1, max: 999999999, message: "Optimale Bestellmenge (1 - 99999)" },
{ value: optimaleBestellhaeufigkeit, min: 1, max: 100, message: "Optimale Bestellhäufigkeit (1 - 100)" },
{ value: bestellkosten, min: 0, max: 999999999, message: "Bestellkosten (0 - 999999999)" },
{ value: bestellkosten, min: 0, max: 999999999, message: "Bestellkosten (1 - 999)" },
{ value: schrittweite, min: 1, max: 100, message: "Schrittweite (1 - 100)" }
];

for (const input of inputs) {
if (isNaN(input.value) || input.value < input.min || input.value > input.max) {
alert(`Bitte eine gültige Zahl eingeben: ${input.message}.`);
return false;
}
}

return true;
}

// Verwendung:
if (!validateInputs(optimaleBestellmenge, optimaleBestellhaeufigkeit, bestellkosten, schrittweite)) {
return;
Expand All @@ -62,7 +62,7 @@ function berechneOptimaleBestellmengeUndHaeufigkeit() {
// Andler-Formel anwenden
lagerkosten = (2 * bedarf * bestellkosten) / (optimaleBestellmenge * optimaleBestellmenge);

// Wertetabelle erstellen
// Wertetabelle erstellen
generiereWertetabelle();
}

Expand All @@ -71,7 +71,7 @@ function generiereWertetabelle() {
const lagerkostenElement = document.getElementById('lagerkosten');
const bedarfElement = document.getElementById('bedarf');
const wertetabelleElement = document.getElementById('wertetabelle');

lagerkostenElement.innerText = formatCurrency(lagerkosten);
bedarfElement.innerText = formatNumberWithSpace(bedarf);
wertetabelleElement.innerHTML = '';
Expand All @@ -80,7 +80,7 @@ function generiereWertetabelle() {
const bestellkosten = parseInt(document.getElementById('bestellkosten').value, 10);
const optimaleBestellhaeufigkeit = parseInt(document.getElementById('optimaleBestellhaeufigkeit').value, 10);
const schrittweite = parseInt(document.getElementById('schrittweite').value, 10);

const werteArray = [];

// Berechnungen außerhalb der Schleife
Expand Down Expand Up @@ -157,7 +157,7 @@ function generiereWertetabelle() {
// Tabelle in DOM einfügen
wertetabelleElement.appendChild(table);

drawChart(werteArray);
drawChart(werteArray);
}

function drawChart(werteArray) {
Expand All @@ -170,11 +170,11 @@ function drawChart(werteArray) {
const lagerhaltungskostenData = [];
const bestellkostenData = [];
const gesamtkostenData = [];
let schrittebestellmenge = roundUpToNearest(optimaleBestellmenge/100)
let schrittebestellmenge = roundUpToNearest(optimaleBestellmenge / 100)
// Daten für das Diagramm berechnen
for (let i = 0; i <= optimaleBestellmenge * 2; i+=schrittebestellmenge) {
const durchschnittlicherBestand = (i/2).toFixed(2);
const bestellkostenGesamt = (bestellkosten * bedarf/i).toFixed(2);
for (let i = 0; i <= optimaleBestellmenge * 2; i += schrittebestellmenge) {
const durchschnittlicherBestand = (i / 2).toFixed(2);
const bestellkostenGesamt = (bestellkosten * bedarf / i).toFixed(2);
const lagerhaltungskosten = (durchschnittlicherBestand * lagerkosten).toFixed(2);
const gesamtkosten = (parseFloat(bestellkostenGesamt) + parseFloat(lagerhaltungskosten)).toFixed(2);

Expand All @@ -183,12 +183,12 @@ function drawChart(werteArray) {
bestellkostenData.push(parseFloat(bestellkostenGesamt));
gesamtkostenData.push(parseFloat(gesamtkosten));
}
if(window.myChart instanceof Chart)
{
window.myChart.destroy();
}
let ychartmax = roundUpToNearest((optimaleBestellhaeufigkeit*bestellkosten+optimaleBestellmenge/2*lagerkosten)*3);
if (window.myChart instanceof Chart) {
window.myChart.destroy();
}
let ychartmax = roundUpToNearest((optimaleBestellhaeufigkeit * bestellkosten + optimaleBestellmenge / 2 * lagerkosten) * 3);
const ctx = document.getElementById('myChart').getContext('2d');

window.myChart = new Chart(ctx, {
type: 'line',
data: {
Expand Down Expand Up @@ -216,11 +216,21 @@ function drawChart(werteArray) {
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Bestellmenge'
}
},
y: {
title: {
display: true,
text: 'Kosten'
},
beginAtZero: true,
max: ychartmax,
ticks: {
callback: function(value, index, values) {
callback: function (value, index, values) {
return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value);
}
},
Expand All @@ -229,10 +239,12 @@ function drawChart(werteArray) {
}
});


}




// Begin Marketing

function updateChartPoint(pointIndex, value) {
Expand Down Expand Up @@ -427,8 +439,8 @@ function portfolioHerunterladenAlsPNG() {
function bestellmengeKopiereInZwischenablage() {
const bestellmengeHTML = document.getElementById('wertetabelle').innerHTML.replace(/&nbsp;/g, ' ');;
navigator.clipboard.writeText(bestellmengeHTML)
.then(() => alert('Code wurde in die Zwischenablage kopiert'))
.catch(err => console.error('Fehler beim Kopieren in die Zwischenablage:', err));
.then(() => alert('Code wurde in die Zwischenablage kopiert'))
.catch(err => console.error('Fehler beim Kopieren in die Zwischenablage:', err));
}

function bestellmengeHerunterladen() {
Expand All @@ -447,12 +459,18 @@ function bestellmengeHerunterladenAlsPNG() {
const wertetabelle = document.getElementById('wertetabelle');

html2canvas(wertetabelle).then(canvas => {
const dataURL = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataURL;
a.download = 'bestellmenge.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
const dataURL = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataURL;
a.download = 'bestellmenge.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
}
}


document.addEventListener('DOMContentLoaded', function () {
// Hier wird generiereWertetabelle() beim Laden der Seite ausgeführt
berechneOptimaleBestellmengeUndHaeufigkeit();
});
3 changes: 2 additions & 1 deletion js/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,5 @@ function openCity(evt, cityName) {
} else {

}
}
}

0 comments on commit 56515ca

Please sign in to comment.