anki/ts/deck-options/SpinBoxFloat.svelte
Vova Selin 2df3698e8c
Minor changes to graphs (#1566)
* Add thousands comma separator for card counts graph

* Fix Answer Buttons graph's tooltip

Changes to the "times pressed" heading

* Shows the percent of that button out of all the presses

* Comma separates total on thousands

* Update CONTRIBUTERS

* Wider spacing for graph tables

* Switch to locale-based stats numbers

* Update CONTRIBUTORS 

Wrong email?

* Fix counts graph on narrow devices

Graph and table now align in a column when the device's screen is narrow. Columns widths are  bounded to not get too wide

* Rename toLocaleXXX functions

* toLocaleNumber -> localizedNumber
 *  toLocaleString -> localizedDate

Also cleans up sketchy "card counts" table formatting

* Localize more numbers

Uses locale-based rounding for more numbers now

* Localize graph axis ticks

* Fix future-due graph tooltip

* avoid div by zero (dae)

Ignoring NaN in localizedNumber() could potentially mask a mistake
in the future - better to explicitly handle the invalid case at the
source instead.
2021-12-29 15:04:15 +10:00

39 lines
857 B
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { pageTheme } from "../sveltelib/theme";
import { localizedNumber } from "../lib/i18n";
export let value: number;
export let min = 1;
export let max = 9999;
let stringValue: string;
$: stringValue = localizedNumber(value, 2);
function update(this: HTMLInputElement): void {
value = Math.min(max, Math.max(min, parseFloat(this.value)));
}
</script>
<input
type="number"
class="form-control"
class:nightMode={$pageTheme.isDark}
{min}
{max}
step="0.01"
value={stringValue}
on:blur={update}
/>
<style lang="scss">
@use "sass/night-mode" as nightmode;
.nightMode {
@include nightmode.input;
}
</style>