# NumberPoint and Interval

> NumberPoint is a dot on a number line at a tracked value, with a label above it that can write the value.

Page: https://fframes-kit.pages.dev/docs/math/number-point-and-interval/
Cargo feature: `math` (`fframes-kit = { version = "..", features = ["math"] }`)

`NumberPoint` is a dot on a number line at a tracked value, with a label above it that can
write the value. `Interval` marks a range of the line with a filled dot at a closed end and
a ring at an open one. Gallery scenes: `NumberPoint`, `Interval`, `NumberLinePoint`.

Gallery clip of `NumberPoint`: https://fframes-kit.pages.dev/media/scenes/NumberPoint-5d659dc0.mp4

Gallery clip of `Interval`: https://fframes-kit.pages.dev/media/scenes/Interval-76f6ff56.mp4

Gallery clip of `NumberLinePoint`: https://fframes-kit.pages.dev/media/scenes/NumberLinePoint-6a342b08.mp4

```rust
use fframes::animation::KeyFramesAnimation;
use fframes_kit::prelude::*;

fn figure<'a>(ui: &mut Ui<'a, '_, '_>, x: &'a KeyFramesAnimation<f32>) -> Svgr<'a> {
    let line = NumberLine {
        range: Range::new(-4.0, 4.0, 1.0),
        length: 12.0,
        numbers: (-4..=4).map(f64::from).collect(),
        ..ui.defaults()
    };
    let point = ui.show(NumberPoint {
        line: line.clone(),
        value: x.into(),
        label: "x = ".into(),
        decimals: Some(1),
        ..ui.defaults()
    });
    // [-1, 2)
    let interval = ui.show(Interval {
        line: line.clone(),
        from: -1.0,
        to: 2.0,
        closed: (true, false),
        ..ui.defaults()
    });
    let line = ui.show(line);
    svgr!(<g>{line}{interval}{point}</g>)
}
```

The point and interval can also be shown separately on the same kind of number line:

```rust
use fframes_kit::prelude::*;

fn point<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    let line = NumberLine { range: Range::new(-4.0, 4.0, 1.0), ..ui.defaults() };
    let point = ui.show(NumberPoint {
        line: line.clone(), value: 1.5.into(), label: "x = ".into(),
        decimals: Some(1), ..ui.defaults()
    });
    let line = ui.show(line);
    svgr!(<g>{line}{point}</g>)
}

fn interval<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    let line = NumberLine { range: Range::new(-4.0, 4.0, 1.0), ..ui.defaults() };
    let interval = ui.show(Interval {
        line: line.clone(), from: -1.0, to: 2.0, closed: (true, false), ..ui.defaults()
    });
    let line = ui.show(line);
    svgr!(<g>{line}{interval}</g>)
}
```

## API

Components are plain structs. Set the fields you need and fill the rest with `..ui.defaults()`: the defaults below come from the current theme (`theme.` values are fields of `Theme`).

### NumberPoint

A dot on a number line at `value`, with `label` above it (Manim's `Dot(line.n2p(x))` with a `ValueTracker`). With `decimals` the value is written after the label: `label: "x = "` and `decimals: Some(1)` write `x = 2.5`. The line is drawn separately.

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `line` | [`NumberLine`](https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md) | `NumberLine::themed(theme)` | The number line the dot sits on; it only maps numbers to points and is not drawn by this component. |
| `value` | `ValueTracker` | `0.0.into()` | The number on `line` the dot marks; a tracker, so it can slide along the line. |
| `label` | `Cow<str>` | `Cow::Borrowed("")` | Text written above the dot; empty for none. |
| `decimals` | `Option<usize>` | `None` | Digits after the decimal point of the value written after the label; `None` writes the label only. |
| `radius` | `f32` | `12.0` | Radius of the dot in pixels. |
| `color` | `Color` | `theme.colors.highlight` | Fill of the dot. |
| `label_style` | `TextStyle` | `theme.typography.caption` | The font of the label: family, size in pixels and weight. |
| `label_fill` | `Color` | `theme.colors.title` | Colour of the label. |
| `buff` | `f32` | `theme.spacing.md` | Pixels between the dot and the label. |
| `enter` | `Option<FadeIn>` | `None` | Fade in at the start; `None` for none. |
| `exit` | `Option<FadeOut>` | `None` | Fade out before the end; `None` for none. |

Feature `math` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/math/number_line.rs#L21)

### Interval

The numbers from `from` to `to` marked on a number line: a thick segment with a filled dot at a closed end and a ring at an open one (`[a, b)` is `closed: (true, false)`). The line is drawn separately.

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `line` | [`NumberLine`](https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md) | `NumberLine::themed(theme)` | The number line the interval sits on; it only maps numbers to points and is not drawn by this component. |
| `from` | `f64` | `0.0` | The first end, as a number on `line`. |
| `to` | `f64` | `1.0` | The second end, as a number on `line`. |
| `closed` | `(bool, bool)` | `(true, true)` | Whether the `from` end and the `to` end are included: a filled dot when `true`, a ring when `false`. |
| `color` | `Color` | `theme.colors.accent` | Colour of the segment and the end dots. |
| `stroke_width` | `f32` | `theme.stroke.thick` | Segment width in pixels; a ring's outline is half of it. |
| `radius` | `f32` | `12.0` | Radius of the end dots and rings. |
| `enter` | `Option<EnterAnim>` | `None` | How it appears; `None` shows it from the start. |
| `exit` | `Option<ExitAnim>` | `None` | How it leaves at the end of its container; `None` stays. |

Feature `math` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/math/number_line.rs#L120)

## See also

- [Coordinate systems](https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md)