chore: improve UI design + fix -0.0

This commit is contained in:
Felipe 2025-03-14 21:21:58 -03:00
parent b9a79b41b7
commit e3e92a158a
Signed by: pitbuster
SSH key fingerprint: SHA256:HDYu2Pm4/TmSX8GBwV49UvFWr1Ljg8XlHxKeCpjJpOk
4 changed files with 85 additions and 54 deletions

View file

@ -1,7 +1,7 @@
[package]
name = "hypergeometric-calc"
version = "0.1.0"
edition = "2021"
edition = "2024"
authors = ["Felipe Contreras Salinas <felipe@bstr.cl>"]
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

View file

@ -21,11 +21,6 @@ body {
align-items: center;
}
.buttons {
display: flex;
justify-content: space-evenly;
}
h1,
h2,
h3,
@ -37,16 +32,46 @@ h6 {
padding: 2rem;
}
p,
button {
p {
margin: var(--size-6);
}
body > picture,
button {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
margin: 2rem;
form {
display: table;
text-align: left;
}
form > p {
display: table-row;
margin-bottom: 0.5em;
}
form > p > label, form > p > input{
display: table-cell;
}
form input {
margin-left: 1em;
margin-bottom: 0.5em;
width: 4em;
}
form > div.results {
display: grid;
grid-template-columns: 1fr 6em 6em 1fr;
min-width: 20em;
max-width: 30em;
width: 30vw;
font-size: 1.2em;
}
form > div.results > span.left {
grid-column: 2 / 3;
text-align: right;
padding-right: 1em;
}
form > div.results > span.right {
grid-column: 3 / 4;
}

View file

@ -27,20 +27,22 @@ pub fn hyper_geometric(
hyper_geometric_exactly(population_size, successes, sample_size, sample_successes);
let (less_than, less_or_equal, greater_or_equal, greater_than) =
if sample_successes < sample_size / 2 {
let less_than: f64 = (0..sample_successes)
let less_than = (0..sample_successes)
.map(|i| hyper_geometric_exactly(population_size, successes, sample_size, i))
.sum();
.sum::<f64>()
.abs();
let less_or_equal = less_than + exactly;
let greater_or_equal = 1.0 - less_than;
let greater_than = 1.0 - less_or_equal;
let greater_or_equal = (1.0 - less_than).abs();
let greater_than = (1.0 - less_or_equal).abs();
(less_than, less_or_equal, greater_or_equal, greater_than)
} else {
let greater_than: f64 = (sample_successes + 1..=sample_size)
let greater_than = (sample_successes + 1..=sample_size)
.map(|i| hyper_geometric_exactly(population_size, successes, sample_size, i))
.sum();
.sum::<f64>()
.abs();
let greater_or_equal = greater_than + exactly;
let less_or_equal = 1.0 - greater_than;
let less_than = 1.0 - greater_or_equal;
let less_or_equal = (1.0 - greater_than).abs();
let less_than = (1.0 - greater_or_equal).abs();
(less_than, less_or_equal, greater_or_equal, greater_than)
};
Some(HyperGeometricProb {

View file

@ -1,6 +1,8 @@
//! Hypergeometric Distribution Calculator
use leptos::html::ElementChild;
use leptos::prelude::{signal, Get, GlobalAttributes, OnTargetAttribute, PropAttribute, Set};
use leptos::prelude::{
signal, ClassAttribute, Get, GlobalAttributes, OnTargetAttribute, PropAttribute, Set,
};
use leptos::{component, view, IntoView};
use crate::calc::hyper_geometric;
@ -74,36 +76,38 @@ pub fn Calculator() -> impl IntoView {
}
/>
</p>
<p>
<div class="results">
<span class="left">
<span>"P(X = "</span>
<span>{sample_successes}</span>
<span>"): "</span>
<span>{move|| result().exactly}</span>
</p>
<p>
</span>
<span class="right">{move || result().exactly}</span>
<span class="left">
<span>"P(X < "</span>
<span>{sample_successes}</span>
<span>"): "</span>
<span>{move|| result().less_than}</span>
</p>
<p>
</span>
<span class="right">{move || result().less_than}</span>
<span class="left">
<span>"P(X ≤ "</span>
<span>{sample_successes}</span>
<span>"): "</span>
<span>{move|| result().less_or_equal}</span>
</p>
<p>
</span>
<span class="right">{move || result().less_or_equal}</span>
<span class="left">
<span>"P(X > "</span>
<span>{sample_successes}</span>
<span>"): "</span>
<span>{move|| result().greater_than}</span>
</p>
<p>
</span>
<span class="right">{move || result().greater_than}</span>
<span class="left">
<span>"P(X ≥ "</span>
<span>{sample_successes}</span>
<span>"): "</span>
<span>{move|| result().greater_or_equal}</span>
</p>
</span>
<span class="right">{move || result().greater_or_equal}</span>
</div>
</form>
}
}