distribution-calc/src/components/calculator.rs

113 lines
4 KiB
Rust

//! Hypergeometric Distribution Calculator
use leptos::html::ElementChild;
use leptos::prelude::{
signal, ClassAttribute, Get, GlobalAttributes, OnTargetAttribute, PropAttribute, Set,
};
use leptos::{component, view, IntoView};
use crate::calc::hyper_geometric;
/// A parameterized incrementing button
#[component]
pub fn Calculator() -> impl IntoView {
let (population, set_population) = signal(0u8);
let (successes, set_successes) = signal(0u8);
let (sample, set_sample) = signal(0u8);
let (sample_successes, set_sample_successes) = signal(0u8);
let result = move || {
hyper_geometric(
population.get(),
successes.get(),
sample.get(),
sample_successes.get(),
)
.unwrap_or_default()
};
view! {
<form>
<p>
<label for="population">Population Size</label>
<input
id="population"
type="number"
min=0
prop:value=population
on:input:target=move |ev| {
set_population.set(ev.target().value().parse().unwrap_or_default())
}
/>
</p>
<p>
<label for="successes">Successes in Population</label>
<input
id="successes"
type="number"
min=0
prop:max=population
prop:value=successes
on:input:target=move |ev| {
set_successes.set(ev.target().value().parse().unwrap_or_default())
}
/>
</p>
<p>
<label for="sample">Sample Size</label>
<input
id="sample"
type="number"
min=0
prop:max=population
prop:value=sample
on:input:target=move |ev| {
set_sample.set(ev.target().value().parse().unwrap_or_default())
}
/>
</p>
<p>
<label for="sample_successes">Successes in Sample</label>
<input
id="sample_successes"
type="number"
min=0
prop:max=sample
prop:value=sample_successes
on:input:target=move |ev| {
set_sample_successes.set(ev.target().value().parse().unwrap_or_default())
}
/>
</p>
<div class="results">
<span class="left">
<span>"P(X = "</span>
<span>{sample_successes}</span>
<span>"): "</span>
</span>
<span class="right">{move || result().exactly}</span>
<span class="left">
<span>"P(X < "</span>
<span>{sample_successes}</span>
<span>"): "</span>
</span>
<span class="right">{move || result().less_than}</span>
<span class="left">
<span>"P(X ≤ "</span>
<span>{sample_successes}</span>
<span>"): "</span>
</span>
<span class="right">{move || result().less_or_equal}</span>
<span class="left">
<span>"P(X > "</span>
<span>{sample_successes}</span>
<span>"): "</span>
</span>
<span class="right">{move || result().greater_than}</span>
<span class="left">
<span>"P(X ≥ "</span>
<span>{sample_successes}</span>
<span>"): "</span>
</span>
<span class="right">{move || result().greater_or_equal}</span>
</div>
</form>
}
}