Skip to content

Commit 6cba341

Browse files
ibgreenibgreen
authored
feat(timeline-layers) Add timeline-layers module (#458)
1 parent 7e4ed44 commit 6cba341

35 files changed

+277
-33
lines changed

‎docs/modules/infovis-layers/sidebar.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
"type": "category",
33
"label": "@deck.gl-community/infovis-layers",
44
"items": [
5-
"modules/infovis-layers/README",
6-
"modules/infovis-layers/api-reference/horizon-graph-layer",
7-
"modules/infovis-layers/api-reference/multi-horizon-graph-layer",
8-
"modules/infovis-layers/api-reference/time-axis-layer",
9-
"modules/infovis-layers/api-reference/vertical-grid-layer"
5+
"modules/infovis-layers/README"
106
]
117
}

‎docs/modules/timeline-layers/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# @deck.gl-community/timeline-layers
2+
3+
Layers for compact timeline visualizations in deck.gl.
4+
5+
```bash
6+
npm install @deck.gl-community/timeline-layers
7+
```
8+
9+
:::note
10+
This module originated from `@deck.gl-community/infovis-layers` and contains HorizonGraph-based timeline renderers alongside the TimeAxis and VerticalGrid timeline utilities.
11+
:::

docs/modules/infovis-layers/api-reference/horizon-graph-layer.md renamed to docs/modules/timeline-layers/api-reference/horizon-graph-layer.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Render a single time series using the [horizon graph](https://en.wikipedia.org/wiki/Horizon_graph) visualization technique.
44

55
```js
6-
import {HorizonGraphLayer} from '@deck.gl-community/infovis-layers';
6+
import {HorizonGraphLayer} from '@deck.gl-community/timeline-layers';
77

88
new HorizonGraphLayer({
99
id: 'horizon',
@@ -43,4 +43,4 @@ Define the position and size of the chart. Defaults: `x:0`, `y:0`, `width:800`,
4343

4444
## Source
4545

46-
[modules/infovis-layers/src/layers/horizon-graph-layer](https://github.com/visgl/deck.gl/tree/master/modules/infovis-layers/src/layers/horizon-graph-layer)
46+
[modules/timeline-layers/src/layers/horizon-graph-layer](https://github.com/visgl/deck.gl-community/tree/master/modules/timeline-layers/src/layers/horizon-graph-layer)

docs/modules/infovis-layers/api-reference/multi-horizon-graph-layer.md renamed to docs/modules/timeline-layers/api-reference/multi-horizon-graph-layer.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Render multiple horizon graphs stacked vertically. Each series is drawn using an underlying `HorizonGraphLayer` and optional divider lines.
44

55
```js
6-
import {MultiHorizonGraphLayer} from '@deck.gl-community/infovis-layers';
6+
import {MultiHorizonGraphLayer} from '@deck.gl-community/timeline-layers';
77

88
new MultiHorizonGraphLayer({
99
id: 'multi-horizon',
@@ -56,4 +56,4 @@ Position and size of the entire chart. Defaults: `x:0`, `y:0`, `width:800`, `hei
5656

5757
## Source
5858

59-
[modules/infovis-layers/src/layers/horizon-graph-layer](https://github.com/visgl/deck.gl/tree/master/modules/infovis-layers/src/layers/horizon-graph-layer)
59+
[modules/timeline-layers/src/layers/horizon-graph-layer](https://github.com/visgl/deck.gl-community/tree/master/modules/timeline-layers/src/layers/horizon-graph-layer)

docs/modules/infovis-layers/api-reference/time-axis-layer.md renamed to docs/modules/timeline-layers/api-reference/time-axis-layer.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Draws a horizontal time axis with tick marks and labels.
44

55
```js
6-
import {TimeAxisLayer} from '@deck.gl-community/infovis-layers';
6+
import {TimeAxisLayer} from '@deck.gl-community/timeline-layers';
77

88
new TimeAxisLayer({
99
id: 'axis',
@@ -46,4 +46,4 @@ Override viewport bounds for the axis.
4646

4747
## Source
4848

49-
[modules/infovis-layers/src/layers/time-axis-layer.ts](https://github.com/visgl/deck.gl/tree/master/modules/infovis-layers/src/layers/time-axis-layer.ts)
49+
[modules/timeline-layers/src/layers/time-axis-layer.ts](https://github.com/visgl/deck.gl-community/tree/master/modules/timeline-layers/src/layers/time-axis-layer.ts)

docs/modules/infovis-layers/api-reference/vertical-grid-layer.md renamed to docs/modules/timeline-layers/api-reference/vertical-grid-layer.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export type VerticalGridLayerProps = LayerProps & {
1515
Render evenly spaced vertical grid lines along the x-axis.
1616

1717
```js
18-
import {VerticalGridLayer} from '@deck.gl-community/infovis-layers';
18+
import {VerticalGridLayer} from '@deck.gl-community/timeline-layers';
1919

2020
new VerticalGridLayer({
2121
id: 'grid',
@@ -56,4 +56,4 @@ RGBA color for grid lines. Default: `[200, 200, 200, 255]`.
5656

5757
## Source
5858

59-
[modules/infovis-layers/src/layers/vertical-grid-layer.ts](https://github.com/visgl/deck.gl/tree/master/modules/infovis-layers/src/layers/vertical-grid-layer.ts)
59+
[modules/timeline-layers/src/layers/vertical-grid-layer.ts](https://github.com/visgl/deck.gl-community/tree/master/modules/timeline-layers/src/layers/vertical-grid-layer.ts)

‎docs/modules/timeline-layers/sidebar.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"type": "category",
3+
"label": "@deck.gl-community/timeline-layers",
4+
"items": [
5+
"modules/timeline-layers/README",
6+
"modules/timeline-layers/api-reference/horizon-graph-layer",
7+
"modules/timeline-layers/api-reference/multi-horizon-graph-layer",
8+
"modules/timeline-layers/api-reference/time-axis-layer",
9+
"modules/timeline-layers/api-reference/vertical-grid-layer"
10+
]
11+
}

‎docs/whats-new.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,14 @@ Released: July 8, 2025
9191
- `GlobalGrid` - A small abstraction API for global grid decoders, making it easier to write visualizations / applications that can work with multiple global grids.
9292
- `A5Grid`, `H3Grid`, `S2Grid`, `GeohashGrid`, `QuadkeyGrid` - Pre-defined global grid system "decoders" for some of the most popular global grids that can be used with the `GlobalGridLayer`
9393

94+
**`@deck.gl-community/timeline-layers`** (New module)
95+
- [`HorizonGraphLayer`](https://visgl.github.io/deck.gl-community/docs/modules/timeline-layers/api-reference/horizon-graph-layer) - New layer for compact time series.
96+
- [`MultiHorizonGraphLayer`](https://visgl.github.io/deck.gl-community/docs/modules/timeline-layers/api-reference/multi-horizon-graph-layer) - Stack multiple horizon graphs with dividers.
97+
- [`TimeAxisLayer`](https://visgl.github.io/deck.gl-community/docs/modules/timeline-layers/api-reference/time-axis-layer) - Dynamic tick mark time axis for timeline views.
98+
- [`VerticalGridLayer`](https://visgl.github.io/deck.gl-community/docs/modules/timeline-layers/api-reference/vertical-grid-layer) - Dynamic vertical grid lines that can sync with a time layer.
99+
94100
**`@deck.gl-community/infovis-layers`** (New module)
95-
- [`HorizonGraphLayer`](https://visgl.github.io/deck.gl-community/docs/modules/infovis-layers/api-reference/horizon-graph-layer) - New layer for compact time series.
96-
- [`TimeAxisLayer`](https://visgl.github.io/deck.gl-community/docs/modules/infovis-layers/api-reference/time-axis-layer) - New layer for a dynamic tick mark time axis.
97-
- [`VerticalGridLayer`](https://visgl.github.io/deck.gl-community/docs/modules/infovis-layers/api-reference/vertical-grid-layer)
98-
- Utilities for advanced deck.gl view management - New layer for adding dynamic vertical grid lines that can sync with a time layer.
101+
- Utilities for advanced deck.gl view management.
99102

100103
**`@deck.gl-community/graph-layers`**
101104
- Code base has been partially modernized in an effort to simplify maintenance and contributions.

examples/infovis-layers/horizon-graph-layer/app.tsx renamed to examples/timeline-layers/horizon-graph-layer/app.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React, {useState, useMemo, ReactElement} from 'react';
88
import DeckGL from '@deck.gl/react';
99
import {OrthographicView} from '@deck.gl/core';
1010
import {TextLayer, LineLayer} from '@deck.gl/layers';
11-
import {MultiHorizonGraphLayer} from '@deck.gl-community/infovis-layers';
11+
import {MultiHorizonGraphLayer} from '@deck.gl-community/timeline-layers';
1212

1313
const INITIAL_VIEW_STATE: OrthographicViewState = {
1414
target: [400, 300, 0],

examples/infovis-layers/horizon-graph-layer/index.html renamed to examples/timeline-layers/horizon-graph-layer/index.html

File renamed without changes.

0 commit comments

Comments
 (0)