Nicht lineare "progressbar" % berechnen

[Murray B.]

Es sollt halt optisch für den Kunden einigermaßen passend aussehen. Bedeutet wenn ich einen Warenkorbwert von z.b. 75 Punkte haben dann sollte die Leiste genau zwischen 50 und 100 Punkten hängen.

Und wenn du z.B. 95 Punkte hast dann f

Das paßt jetzt aber mathematisch überhaupt nicht mehr zu deinem ersten Posting.

 

[Nilson]

In dem Konkreten Fall kannst du mit einem Polynom 3. Grades arbeiten:

geht durch die vier von dir gegebenen Punkte.

 

[tollertyp]

@Nilson: Wenn das ganze "glatt" sein soll (und als eine Formel) vermutlich schon.

@Zeroflow: Ich hoffe der Code kommt mit ganz wenigen Ifs aus... Lieber ein passendes Modell im Speicher, ist wartunsfreundlicher.

 

[Gelöscht 875920]

z.B. wenn man einen LKW mit verschiedengrossen kartons füllt, steigt der Füllstand nicht direkt proportional mit der Anzahl der Kartons. Große Kartons haben einen größeren Fortschritt

Ein größerer Karton hätte also mehr Punkte als ein kleiner, nicht mehr Fortschritt pro Punkt.

Wenn ich 80 Kilo wiege und dann 2 kg zunehme, wiege ich danach 82 kg - und nicht etwa 80 schwerere Kilos.

 

[tollertyp]

@Dampfbox: Es hängt schlicht davon ab, was du als Fortschritt definierst. Sind es die Punkte? Dann ist das halt so.

Aber hier geht es darum, dass die Punkt eben den Fortschritt nicht linear beschreiben. Von diesem Gedanken musst du dich einfach verabschieden - oder von der Diskussion. Wenn die Punkte den Fortschritt ausdrücken würden, dann wäre es ja kein Problem.

 

[machhommy]

Ja, in dem Fall musst du's hald umrechnen.

Die Leiste selbst hat 0-100%
0-20 Pkt mappst du auf 0..17%
20-50 Pkt mappst du auf 17..50%
50..100 Pkt mappst du auf 50..83%
100..200? Pkt mappst du auf 83..100%

Ein paar if Befehle und grundlegende Mathematik lösen das.

Wollte eben im besten Fall die ganzen "if elseif" Abfragen vermeiden. Klar so geht es und umso mehr if Abfragen umso einfacher, aber das wollte ich eben vermeiden

Das paßt jetzt aber mathematisch überhaupt nicht mehr zu deinem ersten Posting.

Klar passt das zum ersten Posting.

Ergänzung (7. Juni 2022)

Ich muss jetzt erstmal die ganzen Postings verarbeiten.

 

[Gelöscht 875920]

@Dampfbox: Es hängt schlicht davon ab, was du als Fortschritt definierst. Sind es die Punkte? Dann ist das halt so.

Und im LKW definiert das Volumen (und die Masse) den Füllstand. Ein Karton mit doppeltem Volumen erhöht die prozentuale Füllung umd das Doppelte. Aber es gibt keine unsichtbare dritte Größe, welche das Volumen des Kartons ändert.

Wenn ich also eine Einheit "Punkte" einführe, von denen 20 Stück 17% Wert sind, dann müssen 40 Stück auch 34% wert sein - alles andere ist abstruse Hirnakrobatik und verwirrt den Kunden.

Stattdessen bietet sich an:
"Milestone 1 - Bronzekunde - 20 Punkte"
"Milestone 2 - Silberkunde - 50 Punkte"
"Milestone 2 - etc etc"
Da könnte man dann jeweils angeben, bei wie viel Prozent des jeweiligen Milestones der Kunde ist. Aber eine Gesamt-Prozent-Anzeige ist einfach Murks.

 

[tollertyp]

Also mein naiver Ansatz mit einem if:

var milestones = {};
// Assigning values to corresponding keys
milestones[20] = 17;
milestones[50] = 50;
milestones[100] = 83;
var p = 45;
var lowerBounds = 0;
var higherBounds = 0;
for (var key in milestones) {
    if (p < higherBounds) {
        break;
    }
    lowerBounds = higherBounds;
    higherBounds = key;
}

console.log(lowerBounds);
console.log(higherBounds);
var lowerPercentage = milestones[lowerBounds];
var higherPercentage = milestones[higherBounds];
var percent = lowerPercentage + (higherPercentage - lowerPercentage) * (p - lowerBounds) / (higherBounds - lowerBounds)
console.log(percent);

 

[machhommy]

Wenn ich also eine Einheit "Punkte" einführe, von denen 20 Stück 17% Wert sind, dann müssen 40 Stück auch 34% wert sein - alles andere ist abstruse Hirnakrobatik und verwirrt den Kunden.

Ich glaube du verstehst es einfach nicht.

Ich hab ein simples jsfiddle gebaut: https://jsfiddle.net/1dxyuh6j/

Bei p = 50 (im jsfiddle = maxValue) passt es genau da 50 Punkte von 100 Punkten 50 % entsprechend und der 50er Meilenstein liegt auch genau bei 50 % auf der Leiste. Ist doch nicht so schwer zu verstehen oder? hm

 

[Powl_0]

Ich glaube du verstehst es einfach nicht.

Richtig, weil die Punkte eine lineare Folge sind, du sie aber auf eine nichtlineare Leiste übertragen willst.

Wieso eigentlich?

Oder sind die Punkte je nach Abschnitt unterschiedlich viel "Wert"? Wenn ja, wieso sind es dann alles Punkte? Das ist doch am Ende für den vermeintlichen Kunden genauso verwirrend.

Es passt mathematisch einfach nicht zusammen. Entweder stimmt die Progression der Leiste nicht, oder die Einheit "Punkte" ist mehrdeutig und verwirrend.
Das ganze technisch umzusetzen ist an sich trivial, gab hier ja bereits diverse Vorschläge. Das optische Ergebnis bleibt dann aber verwirrend.

 

[tollertyp]

bzw.

var milestones = {};
// Assigning values to corresponding keys
milestones[20] = 17;
milestones[50] = 50;
milestones[100] = 83;

function calculatePercentage(p) {
    var lowerBounds = 0;
    var higherBounds = 0;
    for (var key in milestones) {
        if (p < higherBounds) {
            break;
        }
        lowerBounds = higherBounds;
        higherBounds = key;
    }
    var lowerPercentage = milestones[lowerBounds];
    var higherPercentage = milestones[higherBounds];
    return lowerPercentage + (higherPercentage - lowerPercentage) * (p - lowerBounds) / (higherBounds - lowerBounds);
}

for (var i = 0; i <= 100; i++) {
    console.log(i, calculatePercentage(i));
}

Der Code mag mit zwar länger erscheinen als mit if-elses, aber Wartbarkeit ist wichtiger als Kompaktheit.

@Powl_0: Ja, mag für den Kunden verwirrend sein.

Aber angenommen man zählt eben die Kartons und zeigt dem Kunden das Volumen an, dann sind ist die Zahl der Kartons halt linear. Der Unterschied ist halt, dass es hier eine Eigenschaft des Kartons ist (wie groß das Volumen und damit der Fortschritt), beim anderen ist es eine Eigenschaft der "Position" des Punkts (wann kam der Punkt hinzu). K.a. ob das verständlich war.

 

[machhommy]

Richtig, weil die Punkte eine lineare Folge sind, du sie aber auf eine nichtlineare Leiste übertragen willst.
Wieso eigentlich?

Weil ich es so optisch aufbereiten möchte, schau dir einfach jsfiddle an.

Das ganze technisch umzusetzen ist an sich trivial, gab hier ja bereits diverse Vorschläge. Das optische Ergebnis bleibt dann aber verwirrend.

Was soll daran verwirrend sein wenn die Leiste mir visuell anzeigt wo ich (ca.) bin?

 

[tollertyp]

Also die dargestellten Punkte anfangs waren nur für uns, der Nutzer sieht seine Punkte gar nicht, nehme ich an?

 

[machhommy]

Also die dargestellten Punkte anfangs waren nur für uns, der Nutzer sieht seine Punkte gar nicht, nehme ich an?

Das sieht der Nutzer (so grob): https://jsfiddle.net/1dxyuh6j/3/

Eine grüne Leiste die sich entsprechend nach dem Warenkorbwert füllt und ihm die Entfernung zum nächsten Meilenstein optisch aufzeigt.

 

[tollertyp]

Ein "Richtig" hätte genügt ;-)
Insofern ist ja auch nichts verwirrend, außer der Nutzer schaut sich die dahinterliegenden Datenmodelle an.

 

[SoDaTierchen]

Noch mal auf deutsch. Ich möchte das der Balken sich optisch entsprechend füllt um den Kunden eine visuelle Referenz zu geben wie weit er noch vom nächsten Meilenstein entfernt ist.

Das ist die entscheidende Information. In diesem Fall wird es sehr einfach. Sind die Meilensteine mathematisch festgelegt? Dann nutze die Formel in der Formel deiner Balkenberechnung. Sind sie willkürlich? Dann mache dedizierte Balken pro Meilenstein. Du hast logisch nicht einen Balken von 0 bis 100%, sondern du hast pro Meilenstein einen Balken plus irgendwas am Ende.
Wenn du keine Berechnungsformel für die Meilensteine kennst, dann kannst du nur die Intervalle einzeln betrachten. Alles andere wäre ein Versuch ein willkürliches Problem mathematisch zu erschlagen. Und selbst wenn die Punkte immer exakt identisch sind, ist es Käse, dort eine mathematische Gleichung drunter zu legen.

Berechne den Balken Segmentweise. Das ist von der Programmierung und der Berechnung am einfachsten und am saubersten.

 

[machhommy]

Ein "Richtig" hätte genügt ;-)
Insofern ist ja auch nichts verwirrend, außer der Nutzer schaut sich die dahinterliegenden Datenmodelle an.

Das tut der Nutzer aber nicht, er sieht den schönen grünen Balken der ihm optisch den Fortschritt zum nächsten Meilenstein anzeigt.

Ergänzung (7. Juni 2022)

Richtig, weil die Punkte eine lineare Folge sind, du sie aber auf eine nichtlineare Leiste übertragen willst.
Wieso eigentlich?

Weil es optisch schöner ist, dem Kunden es so zu präsentieren.

Das ganze technisch umzusetzen ist an sich trivial, gab hier ja bereits diverse Vorschläge. Das optische Ergebnis bleibt dann aber verwirrend.

Das ist absolut nichts verwirrend dran. Ganz im Gegenteil sogar. Einfach mal ins jsfiddle schauen.

Ergänzung (7. Juni 2022)

@SoDaTierchen Das war tatsächlich mein Plan B mit jeweils einem Balken pro Meilenstein zu arbeiten, dann wäre jeden Balken immer 100 %. Allerdings muss ich dann schauen wie ich das programmiert kriege das es immer noch als ein Balken wahrgenommen wird. Also Balken 2 darf erst "loslaufen" wenn Balken 1 100% erreicht hat und p > 20.

Bin gerade dabei das alles zu lernen

 

[Nilson]

Andere Idee: Wenn du keine festen Stützpunkte brauchst, wie wärs mit ner e-Funktion?

Erreicht nie 100%, egal wie viele Punkte du reinsteckst und der angezeigte Fortschritt wie immer langsamer, je mehr Punkte man sammelt.
Musst nur an dem -x/100 etwas drehen, wenn du eine andere Steigung willst.

 

[Gelöscht 875920]

Ich glaube du verstehst es einfach nicht.

Ich glaube, ich verstehe sehr gut, was du vorhast und habe dir deshalb erklärt, warum das Quatsch ist.

Das sieht der Nutzer (so grob): https://jsfiddle.net/1dxyuh6j/3/

Da hast du ja plötzlich die unsinnige Angabe von Prozenten entfernt, die Kritik ist also offenbar angekommen

Was soll daran verwirrend sein wenn die Leiste mir visuell anzeigt wo ich (ca.) bin?

Verwirrend ist allenfalls deine im Startpost skizzierte Verwendung von "Prozent", obwohl es nicht um Prozent geht.

 

[machhommy]

@Nilson Danke dafür. Schaue ich mir auch mal an.

Ergänzung (7. Juni 2022)

Da hast du ja plötzlich die unsinnige Angabe von Prozenten entfernt, die Kritik ist also offenbar angekommen

Verwirrend ist allenfalls deine im Startpost skizzierte Verwendung von "Prozent", obwohl es nicht um Prozent geht.

Ich dachte es wäre offensichtlich das dies zur Veranschaulichung dient. Mein Fehler.