Skip to content
Snippets Groups Projects
Commit ddb6472a authored by Jonas Zohren's avatar Jonas Zohren :speech_balloon:
Browse files

Beautify page

parent 807695f8
Branches
No related tags found
No related merge requests found
Pipeline #17726 passed
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
public/global.css
+ 0
− 63
View file @ ddb6472a
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;
}
public/index.html
+ 1
− 8
View file @ ddb6472a
......@@ -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
src/App.svelte
+ 153
− 105
View file @ ddb6472a
......@@ -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,22 +18,59 @@
.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>
<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">
<div class="columns" />
<div class="card">
<div class="card-content">
x =
<input type="text" style="width: 100%;" bind:value={valueInputStr} />
<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="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="card">
<div class="card-content">
<div class="tabs is-boxed is-centered">
<ul>
<li
......@@ -114,25 +152,35 @@
<Mean values={sortedValues} />
{/if}
</div>
</form>
<div class="columns is-desktop">
<div class="column">
<div class="box">
<BoxPlot valueSets={[sortedValues]} />
</div>
</div>
</div>
<br />
<div class="plots">
<BoxPlot valueSets={[sortedValues]} />
<div class="column">
<div class="box">
<EmpiricalDistribution values={sortedValues} />
</div>
</div>
</div>
</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>
src/main.ts
+ 1
− 1
View file @ ddb6472a
import App from "./App.svelte";
const app = new App({
target: document.getElementById("svelteAppContainer"),
target: document.body,
props: {},
});
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment