histropediajs 1.4.0 → 1.5.1
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/README.md +29 -10
- package/dist/histropedia.esm.js +7010 -4849
- package/dist/histropedia.umd.js +7109 -4931
- package/dist/histropedia.umd.min.js +2 -2
- package/index.d.ts +275 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# HistropediaJS
|
|
2
2
|
|
|
3
|
-
An embeddable, high-performance, canvas-based timeline engine for rendering events (known as "articles" in the library)over timescales from days to billions of years. Offers smooth pan/zoom, stacking, card layouts, time bands, image loading, and a flexible API.
|
|
3
|
+
An embeddable, high-performance, canvas-based timeline engine for rendering events (known as "articles" in the library) over timescales from days to billions of years. Offers smooth pan/zoom, stacking, card layouts, time bands, image loading, and a flexible API.
|
|
4
4
|
|
|
5
5
|
- **Canvas-based**: fast rendering and smooth animations
|
|
6
6
|
- **Huge ranges**: day -> billion-year scales, BCE support
|
|
@@ -25,10 +25,12 @@ For comprehensive guides, options reference, and API docs, see the hosted docume
|
|
|
25
25
|
|
|
26
26
|
```js
|
|
27
27
|
import Histropedia from 'histropediajs';
|
|
28
|
-
// or named exports
|
|
29
|
-
import { Timeline, Article, Dmy, Logger } from 'histropediajs';
|
|
28
|
+
// or named exports when you only need part of the public API
|
|
29
|
+
import { Timeline, Article, Chart, Dmy, Logger } from 'histropediajs';
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
The package entry point is a bundled ESM file, so named imports are mainly for clarity and smaller application bundles when your bundler can remove unused exports. They do not expose separate per-module entry points.
|
|
33
|
+
|
|
32
34
|
- UMD (script tag) via CDN or self-host:
|
|
33
35
|
- CDN (jsDelivr):
|
|
34
36
|
|
|
@@ -89,8 +91,8 @@ Each article (event) uses the following minimal shape. Short property aliases ar
|
|
|
89
91
|
title: string,
|
|
90
92
|
subtitle?: string,
|
|
91
93
|
lane?: string|number,
|
|
92
|
-
from: { year: number, month?: number, day?: number, precision?:
|
|
93
|
-
to?: { year: number, month?: number, day?: number, precision?:
|
|
94
|
+
from: { year: number, month?: number, day?: number, precision?: string },
|
|
95
|
+
to?: { year: number, month?: number, day?: number, precision?: string },
|
|
94
96
|
isToPresent?: boolean,
|
|
95
97
|
rank?: number,
|
|
96
98
|
starred?: boolean,
|
|
@@ -107,7 +109,9 @@ Each article (event) uses the following minimal shape. Short property aliases ar
|
|
|
107
109
|
Notes:
|
|
108
110
|
|
|
109
111
|
- BCE years are supported with negative year values; internally year 0 represents 1 BCE. Set `shiftBceDates: true` to shift year input by 1 so that -1 is 1BCE.
|
|
110
|
-
-
|
|
112
|
+
- Precision accepts `day`, `month`, `year`, `decade`, `century`, `millennium`, `million-years`, and `billion-years`. The exported `Histropedia.PRECISION_*` constants resolve to these strings. Legacy numeric precision values remain supported but are deprecated.
|
|
113
|
+
- If `to` is omitted and `isToPresent` is false, the article is treated as an instant event (uses `from`), but the `from.precision` determines the span of the period line.
|
|
114
|
+
- Full precision boundary rules and examples: [docs/date-precision.md](docs/date-precision.md)
|
|
111
115
|
|
|
112
116
|
## Lanes
|
|
113
117
|
|
|
@@ -162,7 +166,7 @@ timeline.loadLaneArticles('projects', [
|
|
|
162
166
|
|
|
163
167
|
```js
|
|
164
168
|
import Histropedia from 'histropediajs';
|
|
165
|
-
// Histropedia = { Timeline, Article, Lane, Dmy, Logger, ...constants, ...sorters, setDebug, isDebugEnabled, enableDebug, disableDebug }
|
|
169
|
+
// Histropedia = { Timeline, Article, Chart, Lane, TimeBand, Dmy, Logger, ...constants, ...sorters, setDebug, isDebugEnabled, enableDebug, disableDebug }
|
|
166
170
|
```
|
|
167
171
|
|
|
168
172
|
### Classes and utilities
|
|
@@ -187,8 +191,10 @@ If `container` is an element, the timeline creates and appends its own `<canvas>
|
|
|
187
191
|
- `loadLanes(lanes: LaneData[])`: add or update lane definitions.
|
|
188
192
|
- `loadLaneArticles(laneId, articles)`: stamp a lane id onto a batch and forward to `load(...)`.
|
|
189
193
|
- `loadTimeBands(...)`: add timeline-wide background bands.
|
|
190
|
-
- `
|
|
191
|
-
- `
|
|
194
|
+
- `loadCharts(...)`: add time-series charts; duplicate ids are skipped with a warning.
|
|
195
|
+
- `loadLaneCharts(laneId, charts)`: stamp a lane id onto a batch and forward to `loadCharts(...)`.
|
|
196
|
+
- `setStartDate(date, options?)`: set the left edge date. `date` accepts a `Dmy`-compatible object or date string; use `options.padding` to place that date away from the left edge, and `options.animation` for animated movement.
|
|
197
|
+
- `setCentreDate(date, pixelOffset?)`: center the given date.
|
|
192
198
|
- `setSize(width: number, height: number)`: resize canvas and reflow.
|
|
193
199
|
- `setZoom(level: number, pivotPixel?: number, offsetX?: number)`: programmatic zoom.
|
|
194
200
|
- `on(event: string, handler)` / `off(event, handler)` / `trigger(event, ...args)`: event system.
|
|
@@ -223,6 +229,18 @@ timeline.trigger('my-custom-event', { any: 'payload' });
|
|
|
223
229
|
|
|
224
230
|
HistropediaJS uses a centralized `Logger` service to control console output. Logging is **disabled by default** so it will not spam your console unless you explicitly turn it on.
|
|
225
231
|
|
|
232
|
+
`Histropedia.setDebug()` and the other global debug helpers control logging only. They do not enable visual canvas diagnostics. Visual debug overlays are configured per timeline and are disabled by default:
|
|
233
|
+
|
|
234
|
+
```js
|
|
235
|
+
const timeline = new Histropedia.Timeline(container, {
|
|
236
|
+
debugOverlays: {
|
|
237
|
+
densityRegions: true,
|
|
238
|
+
},
|
|
239
|
+
});
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
`debugOverlays.densityRegions` draws non-interactive vertical guides over the timeline at the current article-density region boundaries. It does not change density filtering, stacking, interaction, selection, or saved timeline data.
|
|
243
|
+
|
|
226
244
|
- **Enable / disable debug logging (default export helpers)**:
|
|
227
245
|
|
|
228
246
|
```js
|
|
@@ -300,7 +318,8 @@ TimelineOptions tunes layout, interaction, article rendering, and image loading.
|
|
|
300
318
|
- **Layout**: adjust `width`, `height`, and `verticalOffset` to size and position the canvas.
|
|
301
319
|
- **Navigation**: set `initialDate`, `zoom.initial`, and `enableUserControl` to define how people explore the timeline.
|
|
302
320
|
- **Articles**: control stacking and presentation with `article.autoStacking`, adaptive `defaultCardLayout`, `cardLayoutBreakpoints`, `distanceToBaseline`, and density settings.
|
|
303
|
-
- **Lanes**: use `
|
|
321
|
+
- **Lanes**: use `lane.defaultStyle`, `lane.data`, and per-lane `article` overrides for shared-axis multi-lane layouts.
|
|
322
|
+
- **Charts**: use `chart.data` or `loadCharts(...)` for read-only line charts, with optional `lane` placement.
|
|
304
323
|
- **Images**: use `image.sanitizer.allowedOrigins`, caching limits, or a custom `image.customSanitizer` to match your content policies.
|
|
305
324
|
- **Events**: register callbacks via the `on` map or helpers such as `onArticleClick`.
|
|
306
325
|
|