@fundar/data-chart-telling 1.15.0 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/configuration/config.svelte.js +1 -0
- package/dist/layout/timeline/TimelineLayout.svelte +4 -1
- package/dist/layout/timeline/TimelineSteps.d.ts +6 -2
- package/dist/layout/timeline/TimelineSteps.js +9 -3
- package/dist/types/configuration/styling.d.ts +6 -0
- package/docs/theming.md +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
|
|
4
4
|
|
|
5
|
+
## [1.16.0] - 2026-11-04
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- A timeline tweened with `interpolate` is at its last step once `progress` comes within `timeline.snap` (default `1e-4`, a ten-thousandth of the span; `0` turns it off) of it. A scrubber that stops a hair short of `1` - a scrolled step ends at `0.97` - drew the line all the way to the end with its easing, but left out the last row: its dot, and a marker like a `delta` placed on it.
|
|
10
|
+
|
|
5
11
|
## [1.15.0] - 2026-11-04
|
|
6
12
|
|
|
7
13
|
### Fixed
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { untrack } from 'svelte';
|
|
3
3
|
import { resolveAccessor } from '../../utils/accessors';
|
|
4
4
|
import TimelineFrame from './TimelineFrame.svelte';
|
|
5
|
+
import { getConfiguration } from '../../configuration/config.svelte';
|
|
5
6
|
import { TimelineSteps } from './TimelineSteps';
|
|
6
7
|
import { TimelineTime } from './TimelineTime';
|
|
7
8
|
import { Interpolation } from '../../utils/Interpolation';
|
|
@@ -82,7 +83,9 @@
|
|
|
82
83
|
const segmentEasingFn = $derived(Interpolation.buildEasing(interpolate?.segmentEasing));
|
|
83
84
|
|
|
84
85
|
/** Continuous scrub position across the full step domain - only meaningful when `interpolate` is set. */
|
|
85
|
-
const currentTime = $derived(
|
|
86
|
+
const currentTime = $derived(
|
|
87
|
+
steps.timeAt(progress, progressEasingFn, getConfiguration().timeline.snap)
|
|
88
|
+
);
|
|
86
89
|
|
|
87
90
|
const selectedValue = $derived(
|
|
88
91
|
(interpolate ? steps.nearest(currentTime) : steps.at(progress)) ?? 0
|
|
@@ -17,8 +17,12 @@ export declare class TimelineSteps {
|
|
|
17
17
|
get domain(): TimeValue[];
|
|
18
18
|
/** The step a scrubber `progress` snaps to, or `undefined` without steps. */
|
|
19
19
|
at(progress: number): TimeValue | undefined;
|
|
20
|
-
/**
|
|
21
|
-
|
|
20
|
+
/**
|
|
21
|
+
* The continuous time `progress` is at across the steps, eased - `0` without steps. Within `snap` (a fraction
|
|
22
|
+
* of the span) of the last step it is at it: a scrubber that stops a hair short of `1` (a scrolled step's
|
|
23
|
+
* last position, say) still shows everything, with an eased tail that long gone to the end.
|
|
24
|
+
*/
|
|
25
|
+
timeAt(progress: number, easing: EasingFn, snap?: number): number;
|
|
22
26
|
/** The step closest to `time`, or `undefined` without steps. */
|
|
23
27
|
nearest(time: number): TimeValue | undefined;
|
|
24
28
|
}
|
|
@@ -34,12 +34,18 @@ export class TimelineSteps {
|
|
|
34
34
|
const index = Math.round(progress * (values.length - 1));
|
|
35
35
|
return values[Math.min(values.length - 1, Math.max(0, index))];
|
|
36
36
|
}
|
|
37
|
-
/**
|
|
38
|
-
|
|
37
|
+
/**
|
|
38
|
+
* The continuous time `progress` is at across the steps, eased - `0` without steps. Within `snap` (a fraction
|
|
39
|
+
* of the span) of the last step it is at it: a scrubber that stops a hair short of `1` (a scrolled step's
|
|
40
|
+
* last position, say) still shows everything, with an eased tail that long gone to the end.
|
|
41
|
+
*/
|
|
42
|
+
timeAt(progress, easing, snap = 0) {
|
|
39
43
|
const { first, last } = this;
|
|
40
44
|
if (first === undefined || last === undefined)
|
|
41
45
|
return 0;
|
|
42
|
-
|
|
46
|
+
const span = last - first;
|
|
47
|
+
const time = first + span * easing(progress);
|
|
48
|
+
return last - time < span * snap ? last : time;
|
|
43
49
|
}
|
|
44
50
|
/** The step closest to `time`, or `undefined` without steps. */
|
|
45
51
|
nearest(time) {
|
|
@@ -271,6 +271,12 @@ export type PlotStylesConfig = {
|
|
|
271
271
|
thickness: number;
|
|
272
272
|
/** Space between a plot (or a composition's panels) and its timeline, as a CSS length. */
|
|
273
273
|
gap: string;
|
|
274
|
+
/**
|
|
275
|
+
* How close to the first or last step a tweened timeline counts as being at it, as a fraction of its span.
|
|
276
|
+
* A scrubber that stops a hair short of `0` or `1` - a scrolled step ends at `0.97`, whose eased time is a
|
|
277
|
+
* hair short of the end - still shows the last row, and a marker placed on it. `0` turns it off.
|
|
278
|
+
*/
|
|
279
|
+
snap: number;
|
|
274
280
|
/** The `'rule'` timeline beside a plot: a line with its steps written along it. */
|
|
275
281
|
rule: {
|
|
276
282
|
/** Font size of the steps, in px. */
|
package/docs/theming.md
CHANGED
|
@@ -49,7 +49,7 @@ resetConfiguration(); // back to the shipped defaults
|
|
|
49
49
|
| `connector` | What `styles.connector` falls back to on lollipop, dumbbell, Cleveland and forest plots: `sign` (`positive`, `negative`, `zero` colors), `lengthScheme` and `differenceScheme` (color ramps), `arrow` (`width`, `headLength`, `headAngle` of a connector drawn as an arrow), `outsideOpacity` (the part of a connector outside its `from`-`to` stretch), `capLength` (px, of a forest plot's end caps), `labelFontSize` and `labelGap` |
|
|
50
50
|
| `hover` | Look of the hover marker: `rule`, `dot`, `font`, `area` |
|
|
51
51
|
| `delta` | The `delta` marker's label, per axis the delta is taken on: `text.x` (beside a vertical delta: `dx: 12`, `textAnchor: 'start'`) and `text.y` (above a horizontal one: `dy: -10`, `textAnchor: 'middle'`). `lineAnchor` picks where along the delta the label sits and how it aligns there |
|
|
52
|
-
| `timeline` | The rule (`rule`) and the player bar (`player`: controls, speeds, `stepDuration`, button, track, thumb, toggle)
|
|
52
|
+
| `timeline` | The rule (`rule`) and the player bar (`player`: controls, speeds, `stepDuration`, button, track, thumb, toggle); `snap` is how close to its last step (a fraction of the span, `1e-4` by default) a tweened timeline counts as being at it |
|
|
53
53
|
| `facet` | The position badge and prev/next buttons |
|
|
54
54
|
| `frameClip` | Tolerance for clipping marks to the plot frame |
|
|
55
55
|
|