diff --git a/public/global.css b/public/global.css index bb28a9414d456a3e71bc1ffca30e95b98f6dc2f1..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 --- a/public/global.css +++ b/public/global.css @@ -1,63 +0,0 @@ -html, body { - position: relative; - width: 100%; - height: 100%; -} - -body { - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -a { - color: rgb(0,100,200); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:visited { - color: rgb(0,80,160); -} - -label { - display: block; -} - -input, button, select, textarea { - font-family: inherit; - font-size: inherit; - -webkit-padding: 0.4em 0; - padding: 0.4em; - margin: 0 0 0.5em 0; - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; -} - -input:disabled { - color: #ccc; -} - -button { - color: #333; - background-color: #f4f4f4; - outline: none; -} - -button:disabled { - color: #999; -} - -button:not(:disabled):active { - background-color: #ddd; -} - -button:focus { - border-color: #666; -} diff --git a/public/index.html b/public/index.html index 541ccbe9db39ef56d41d3ac52d854b1ec4c0aabf..4ee9e58f865c64a90dfb47a4ba60ced2b65c15df 100644 --- a/public/index.html +++ b/public/index.html @@ -8,22 +8,15 @@ <title>WrumS Tools</title> <link rel="icon" type="image/png" href="./favicon.png" /> + <link rel="stylesheet" href="./bulma.min.css"> <link rel="stylesheet" href="./global.css" /> <link rel="stylesheet" href="./build/bundle.css" /> - <link rel="stylesheet" href="./bulma.min.css"> <script src="./plotly-latest.min.js" defer></script> <script defer src="./build/bundle.js"></script> </head> <body> - <div id="svelteAppContainer"></div> - <footer> - <a href="https://gitlab.fachschaften.org/jfowl/wrums-tools">Source Code</a> - Made with <a - href="https://svelte.dev">Svelte</a>, <a href="https://bulma.io">Bulma</a> and - <a href="https://plotly.com/javascript/">Plotly</a> - - <a href="https://oh14.de/datenschutzerklaerung.html">Datenschutzerklärung</a> - </footer> </body> </html> \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte index cb25d1a78b5f091034016d18d03e7bde1a510d8b..f143c08fa37fcb5b8ee04426e3ffd17b3cbc458d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -7,6 +7,7 @@ import EmpiricalDistribution from "./components/graphs/EmpiricalDistribution.svelte"; import Histogram from "./components/graphs/Histogram.svelte"; import ScatterPlot from "./components/graphs/ScatterPlot.svelte"; +import { distinctify } from "./lib/descriptiveStatistics"; let valueInputStr: string = "8.0, 4.9, 6.6, 3.2, 3.9, 4.5, 6.1, 3.7, 4.2, 8.5, 3.6, 3.7"; @@ -17,122 +18,169 @@ .map((v) => parseFloat(v)) .filter((v) => !isNaN(v)); $: sortedValues = valueSet.sort((a, b) => a - b); + $: distinctValues = distinctify(sortedValues); let activeTabIndex: number = 0; </script> -<main> - <section> - <div class="container"> - <div class="columns" /> - <div class="card"> - <div class="card-content"> - x = - <input type="text" style="width: 100%;" bind:value={valueInputStr} /> +<section class="hero is-primary"> + <div class="hero-body"> + <p class="title">WrumS-Tools</p> + <p class="subtitle"> + Statistischer Werkzeugkasten für die statistischen Grundlagen im + Informatikstudium + </p> + </div> +</section> +<br /> +<section class="section"> + <div class="container"> + <h2 class="title">Univariate Daten</h2> + <form class="box"> + <div class="field"> + <label class="label" for="x-values-input">x-Werte (N={valueSet.length})</label> + <div class="control"> + <input + id="x-values-input" + class="input" + type="text" + bind:value={valueInputStr} + placeholder="1.6, 12.3, 15.3, 33.4" + /> </div> </div> - <div class="card"> - <div class="card-content"> - <div class="tabs is-boxed is-centered"> - <ul> - <li - class:is-active={activeTabIndex === 0} - on:click={() => { - activeTabIndex = 0; - }} + <div class="field"> + <label class="label" for="x-values-sorted">Sortierte x-Werte</label> + <div class="control"> + <input disabled + id="x-values-sorted" + class="input" + type="text" + value={sortedValues.join(" , ")} + /> + </div> + </div> + <div class="field"> + <label class="label" for="x-values-distinct">Sortierter Wertebereich (J={distinctValues.length})</label> + <div class="control"> + <input disabled + id="x-values-distinct" + class="input" + type="text" + value={distinctValues.join(" , ")} + /> + </div> + </div> + <div class="tabs is-boxed is-centered"> + <ul> + <li + class:is-active={activeTabIndex === 0} + on:click={() => { + activeTabIndex = 0; + }} + > + <!-- svelte-ignore a11y-missing-attribute --> + <a> + <span + ><math xmlns="http://www.w3.org/1998/Math/MathML" + ><semantics><msub><mi>med</mi><mi>x</mi></msub></semantics + ></math + ></span > - <!-- svelte-ignore a11y-missing-attribute --> - <a> - <span - ><math xmlns="http://www.w3.org/1998/Math/MathML" - ><semantics><msub><mi>med</mi><mi>x</mi></msub></semantics - ></math - ></span - > - </a> - </li> - <li - class:is-active={activeTabIndex === 1} - on:click={() => { - activeTabIndex = 1; - }} + </a> + </li> + <li + class:is-active={activeTabIndex === 1} + on:click={() => { + activeTabIndex = 1; + }} + > + <!-- svelte-ignore a11y-missing-attribute --> + <a> + <span + ><math xmlns="http://www.w3.org/1998/Math/MathML" + ><semantics><msub><mi>mod</mi><mi>x</mi></msub></semantics + ></math + ></span > - <!-- svelte-ignore a11y-missing-attribute --> - <a> - <span - ><math xmlns="http://www.w3.org/1998/Math/MathML" - ><semantics><msub><mi>mod</mi><mi>x</mi></msub></semantics - ></math - ></span - > - </a> - </li> - <li - class:is-active={activeTabIndex === 2} - on:click={() => { - activeTabIndex = 2; - }} + </a> + </li> + <li + class:is-active={activeTabIndex === 2} + on:click={() => { + activeTabIndex = 2; + }} + > + <!-- svelte-ignore a11y-missing-attribute --> + <a> + <span + ><math + display="inline" + xmlns="http://www.w3.org/1998/Math/MathML" + ><semantics><msub><mi>f</mi><mi>j</mi></msub></semantics + ></math + ></span > - <!-- svelte-ignore a11y-missing-attribute --> - <a> - <span - ><math - display="inline" - xmlns="http://www.w3.org/1998/Math/MathML" - ><semantics><msub><mi>f</mi><mi>j</mi></msub></semantics - ></math - ></span - > - </a> - </li> - <li - class:is-active={activeTabIndex === 3} - on:click={() => { - activeTabIndex = 3; - }} + </a> + </li> + <li + class:is-active={activeTabIndex === 3} + on:click={() => { + activeTabIndex = 3; + }} + > + <!-- svelte-ignore a11y-missing-attribute --> + <a> + <span + ><math xmlns="http://www.w3.org/1998/Math/MathML" + ><semantics><mover><mi>x</mi><mo>¯</mo></mover></semantics + ></math + ></span > - <!-- svelte-ignore a11y-missing-attribute --> - <a> - <span - ><math xmlns="http://www.w3.org/1998/Math/MathML" - ><semantics><mover><mi>x</mi><mo>¯</mo></mover></semantics - ></math - ></span - > - </a> - </li> - </ul> - </div> - <div class="content"> - {#if activeTabIndex === 0} - <Median values={sortedValues} /> - {:else if activeTabIndex === 1} - <Mode values={sortedValues} /> - {:else if activeTabIndex === 2} - <RelativeFrequencies values={sortedValues} /> - {:else if activeTabIndex === 3} - <Mean values={sortedValues} /> - {/if} - </div> + </a> + </li> + </ul> + </div> + <div class="content"> + {#if activeTabIndex === 0} + <Median values={sortedValues} /> + {:else if activeTabIndex === 1} + <Mode values={sortedValues} /> + {:else if activeTabIndex === 2} + <RelativeFrequencies values={sortedValues} /> + {:else if activeTabIndex === 3} + <Mean values={sortedValues} /> + {/if} + </div> + </form> + <div class="columns is-desktop"> + <div class="column"> + <div class="box"> + <BoxPlot valueSets={[sortedValues]} /> + </div> + </div> + <div class="column"> + <div class="box"> + <EmpiricalDistribution values={sortedValues} /> </div> </div> </div> + </div> +</section> - <br /> - <div class="plots"> - <BoxPlot valueSets={[sortedValues]} /> - <EmpiricalDistribution values={sortedValues} /> - </div> - </section> - - <section class="section" /> -</main> - -<style> - .plots { - display: flex; - justify-content: space-evenly; - align-items: stretch; - flex-wrap: wrap; - } -</style> +<footer class="footer is-small is-primary"> + <div class="content has-text-centered"> + <p> + Made with <a href="https://svelte.dev">Svelte</a>, + <a href="https://bulma.io">Bulma</a> + and + <a href="https://plotly.com/javascript/">Plotly</a> - + <a href="https://oh14.de/datenschutzerklaerung.html" + >Datenschutzerklärung</a + > + - + <a href="https://gitlab.fachschaften.org/jfowl/wrums-tools">Source Code</a + > + </p> + </div> +</footer> diff --git a/src/main.ts b/src/main.ts index abc261ea1f58a1c9f01855554c627faf68a17811..1e237ee976fae5b5d102513085932352151a99f9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,6 @@ import App from "./App.svelte"; const app = new App({ - target: document.getElementById("svelteAppContainer"), + target: document.body, props: {}, });