@deck.gl-community/infovis-layers 9.1.0-beta.8 → 9.2.0-beta.2

package/dist/layers/horizon-graph-layer/multi-horizon-graph-layer.js

@@ -0,0 +1,100 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { SolidPolygonLayer } from '@deck.gl/layers';
+import { HorizonGraphLayer } from "./horizon-graph-layer.js";
+const defaultProps = {
+    getSeries: { type: 'accessor', value: (series) => series.values },
+    getScale: { type: 'accessor', value: (series) => series.scale },
+    bands: { type: 'number', value: 2 },
+    positiveColor: { type: 'color', value: [0, 128, 0] },
+    negativeColor: { type: 'color', value: [0, 0, 255] },
+    dividerColor: { type: 'color', value: [0, 0, 0] },
+    dividerWidth: { type: 'number', value: 2 },
+    x: { type: 'number', value: 0 },
+    y: { type: 'number', value: 0 },
+    width: { type: 'number', value: 800 },
+    height: { type: 'number', value: 300 }
+};
+export class MultiHorizonGraphLayer extends CompositeLayer {
+    static layerName = 'MultiHorizonGraphLayer';
+    static defaultProps = defaultProps;
+    renderLayers() {
+        const { data, getSeries, getScale, bands, positiveColor, negativeColor, dividerColor, dividerWidth, x, y, width, height } = this.props;
+        const seriesCount = data.length;
+        if (!seriesCount) {
+            return [];
+        }
+        // Calculate layout dimensions
+        const totalDividerSpace = dividerWidth * (seriesCount + 1);
+        const availableHeight = height - totalDividerSpace;
+        const seriesHeight = availableHeight / seriesCount;
+        const layers = [];
+        // Create divider rectangles
+        if (dividerWidth > 0) {
+            const dividerData = [];
+            // Top divider
+            dividerData.push({
+                polygon: [
+                    [x, y],
+                    [x + width, y],
+                    [x + width, y + dividerWidth],
+                    [x, y + dividerWidth]
+                ]
+            });
+            // Dividers between series
+            for (let i = 0; i < seriesCount - 1; i++) {
+                const dividerY = y + dividerWidth + (i + 1) * seriesHeight + i * dividerWidth;
+                dividerData.push({
+                    polygon: [
+                        [x, dividerY],
+                        [x + width, dividerY],
+                        [x + width, dividerY + dividerWidth],
+                        [x, dividerY + dividerWidth]
+                    ]
+                });
+            }
+            // Bottom divider
+            const bottomDividerY = y + height - dividerWidth;
+            dividerData.push({
+                polygon: [
+                    [x, bottomDividerY],
+                    [x + width, bottomDividerY],
+                    [x + width, y + height],
+                    [x, y + height]
+                ]
+            });
+            layers.push(new SolidPolygonLayer({
+                id: `${this.props.id}-dividers`,
+                data: dividerData,
+                getPolygon: (d) => d.polygon,
+                getFillColor: dividerColor,
+                pickable: false
+            }));
+        }
+        // Create horizon graph layers for each series
+        data.forEach((series, index) => {
+            const seriesData = getSeries(series);
+            if (!seriesData || seriesData.length === 0) {
+                return;
+            }
+            const seriesY = y + dividerWidth + index * (seriesHeight + dividerWidth);
+            const yAxisScale = getScale(series);
+            layers.push(new HorizonGraphLayer({
+                id: `${this.props.id}-series-${index}`,
+                data: seriesData,
+                yAxisScale,
+                bands,
+                positiveColor,
+                negativeColor,
+                x,
+                y: seriesY,
+                width,
+                height: seriesHeight
+            }));
+        });
+        return layers;
+    }
+}
+//# sourceMappingURL=multi-horizon-graph-layer.js.map

package/dist/layers/horizon-graph-layer/multi-horizon-graph-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-horizon-graph-layer.js","sourceRoot":"","sources":["../../../src/layers/horizon-graph-layer/multi-horizon-graph-layer.ts"],"names":[],"mappings":"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"}

package/dist/layers/time-axis-layer.d.ts

@@ -0,0 +1,56 @@
+import { CompositeLayer, type CompositeLayerProps, type UpdateParameters } from '@deck.gl/core';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+export type TimeAxisLayerProps = CompositeLayerProps & {
+    unit: 'timestamp' | 'milliseconds';
+    /** Start time in milliseconds since epoch */
+    startTimeMs: number;
+    /** End time in milliseconds since epoch */
+    endTimeMs: number;
+    /** Optional: Number of tick marks (default: 5) */
+    tickCount?: number;
+    /** Optional: Y-coordinate for the axis line (default: 0) */
+    y?: number;
+    /** Optional: RGBA color for axis and ticks (default: [0, 0, 0, 255]) */
+    color?: [number, number, number, number];
+    /** Optional: Bounds for the axis line (default: viewport bounds) */
+    bounds?: [number, number, number, number];
+};
+export declare class TimeAxisLayer extends CompositeLayer<TimeAxisLayerProps> {
+    static layerName: string;
+    static defaultProps: Required<Omit<TimeAxisLayerProps, keyof CompositeLayerProps>>;
+    shouldUpdateState(params: UpdateParameters<TimeAxisLayer>): boolean;
+    renderLayers(): (LineLayer<any, {
+        id: "axis-line";
+        data: {
+            sourcePosition: number[];
+            targetPosition: number[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 2;
+    }> | LineLayer<any, {
+        id: "tick-marks";
+        data: {
+            sourcePosition: any[];
+            targetPosition: any[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 1;
+    }> | TextLayer<any, {
+        id: "tick-labels";
+        data: {
+            position: any[];
+            text: string;
+        }[];
+        getPosition: (d: any) => any;
+        getText: (d: any) => any;
+        getSize: 12;
+        getColor: [number, number, number, number];
+        getTextAnchor: "middle";
+        getAlignmentBaseline: "top";
+    }>)[];
+}
+//# sourceMappingURL=time-axis-layer.d.ts.map

package/dist/layers/time-axis-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-axis-layer.d.ts","sourceRoot":"","sources":["../../src/layers/time-axis-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAKrD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG;IACrD,IAAI,EAAE,WAAW,GAAG,cAAc,CAAC;IACnC,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,qBAAa,aAAc,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACnE,OAAgB,SAAS,SAAmB;IAC5C,OAAgB,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAQzF;IAGO,iBAAiB,CAAC,MAAM,EAAE,gBAAgB,CAAC,aAAa,CAAC,GAAG,OAAO;IAInE,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DtB"}

package/dist/layers/time-axis-layer.js

@@ -0,0 +1,78 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+import { formatTimeMs } from "../utils/format-utils.js";
+import { getPrettyTicks, getZoomedRange } from "../utils/tick-utils.js";
+export class TimeAxisLayer extends CompositeLayer {
+    static layerName = 'TimeAxisLayer';
+    static defaultProps = {
+        startTimeMs: 0,
+        endTimeMs: 100,
+        tickCount: 5,
+        y: 0,
+        color: [0, 0, 0, 255],
+        unit: 'timestamp',
+        bounds: undefined
+    };
+    // Called whenever props/data/viewports change
+    shouldUpdateState(params) {
+        return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+    }
+    renderLayers() {
+        const { startTimeMs, endTimeMs, tickCount = 10, y = 0, color = [0, 0, 0, 255] } = this.props;
+        let bounds;
+        try {
+            bounds = this.context.viewport.getBounds();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log('Error getting bounds from viewport:', error);
+            throw error;
+        }
+        const [startTimeZoomed, endTimeZoomed] = getZoomedRange(startTimeMs, endTimeMs, bounds);
+        // Generate tick positions and labels
+        const ticks = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
+        const tickLines = ticks.map((x) => ({
+            sourcePosition: [x, y - 5],
+            targetPosition: [x, y + 5]
+        }));
+        const tickLabels = ticks.map((x) => ({
+            position: [x, y - 10],
+            text: this.props.unit === 'timestamp' ? new Date(x).toLocaleTimeString() : formatTimeMs(x, false)
+        }));
+        return [
+            // Axis line
+            new LineLayer({
+                id: 'axis-line',
+                data: [{ sourcePosition: [startTimeZoomed, y], targetPosition: [endTimeZoomed, y] }],
+                getSourcePosition: (d) => d.sourcePosition,
+                getTargetPosition: (d) => d.targetPosition,
+                getColor: color,
+                getWidth: 2
+            }),
+            // Tick marks
+            new LineLayer({
+                id: 'tick-marks',
+                data: tickLines,
+                getSourcePosition: (d) => d.sourcePosition,
+                getTargetPosition: (d) => d.targetPosition,
+                getColor: color,
+                getWidth: 1
+            }),
+            // Tick labels
+            new TextLayer({
+                id: 'tick-labels',
+                data: tickLabels,
+                getPosition: (d) => d.position,
+                getText: (d) => d.text,
+                getSize: 12,
+                getColor: color,
+                getTextAnchor: 'middle',
+                getAlignmentBaseline: 'top'
+            })
+        ];
+    }
+}
+//# sourceMappingURL=time-axis-layer.js.map

package/dist/layers/time-axis-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-axis-layer.js","sourceRoot":"","sources":["../../src/layers/time-axis-layer.ts"],"names":[],"mappings":"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"}

package/dist/layers/time-delta-layer.d.ts

@@ -0,0 +1,74 @@
+import { CompositeLayer, type LayerProps } from '@deck.gl/core';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+export type TimeDeltaLayerProps = LayerProps & {
+    unit: 'timestamp' | 'milliseconds';
+    minTimeMs: number;
+    maxTimeMs: number;
+    /** Start time in milliseconds since epoch */
+    startTimeMs: number;
+    /** End time in milliseconds since epoch */
+    endTimeMs: number;
+    /** Optional: Y-coordinate for the axis line (default: 0) */
+    y?: number;
+    header: boolean;
+    /** Optional: RGBA color for axis and ticks (default: [0, 0, 0, 255]) */
+    color?: [number, number, number, number];
+    /** Minimum Y-coordinate for grid lines. @todo (ib) Remve and calculate from viewport? */
+    yMin?: number;
+    /** Maximum Y-coordinate for grid lines. @todo (ib) Remve and calculate from viewport? */
+    yMax?: number;
+};
+export declare class TimeDeltaLayer extends CompositeLayer<TimeDeltaLayerProps> {
+    static layerName: string;
+    static defaultProps: Required<Omit<TimeDeltaLayerProps, keyof LayerProps>>;
+    renderLayers(): LineLayer<any, {
+        id: "time-delta-side-bars";
+        data: {
+            sourcePosition: number[];
+            targetPosition: number[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 4;
+        widthUnits: "pixels";
+    }>[] | (LineLayer<any, {
+        id: "header-time-delta-side-bars";
+        data: {
+            sourcePosition: number[];
+            targetPosition: number[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 4;
+        widthUnits: "pixels";
+    }> | LineLayer<any, {
+        id: "header-time-delta-dotted-line";
+        data: {
+            sourcePosition: number[];
+            targetPosition: number[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 1;
+        widthUnits: "pixels";
+    }> | TextLayer<any, {
+        id: "header-time-delta-label";
+        data: {
+            position: number[];
+            text: string;
+        }[];
+        getPosition: (d: any) => any;
+        getText: (d: any) => any;
+        getSize: 12;
+        getColor: [number, number, number, number];
+        getTextAnchor: "middle";
+        getAlignmentBaseline: "top";
+        background: true;
+        getBackgroundColor: [number, number, number, number];
+        backgroundPadding: [number, number];
+    }>)[];
+}
+//# sourceMappingURL=time-delta-layer.d.ts.map

package/dist/layers/time-delta-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-delta-layer.d.ts","sourceRoot":"","sources":["../../src/layers/time-delta-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAMrD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG;IAC7C,IAAI,EAAE,WAAW,GAAG,cAAc,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAEhB,wEAAwE;IACxE,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,cAAe,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACrE,OAAgB,SAAS,SAAoB;IAC7C,OAAgB,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,UAAU,CAAC,CAAC,CAWjF;IAEO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HtB"}

package/dist/layers/time-delta-layer.js

@@ -0,0 +1,136 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+// import {PathStyleExtension} from '@deck.gl/extensions';
+import { formatTimeMs } from "../utils/format-utils.js";
+export class TimeDeltaLayer extends CompositeLayer {
+    static layerName = 'TimeDeltaLayer';
+    static defaultProps = {
+        header: false,
+        minTimeMs: 0,
+        maxTimeMs: 100,
+        startTimeMs: 0,
+        endTimeMs: 100,
+        y: 0,
+        color: [0, 0, 0, 255],
+        unit: 'timestamp',
+        yMin: -1e6, // Should cover full viewport height in most cases
+        yMax: 1e6 // Should cover full viewport height in most cases
+    };
+    renderLayers() {
+        const { startTimeMs, endTimeMs, color = [0, 0, 0, 255], yMin, yMax } = this.props;
+        const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, 10];
+        const timeDeltaMs = Math.abs(endTimeMs - startTimeMs);
+        const timeDeltaLabel = formatTimeMs(timeDeltaMs, false);
+        if (!this.props.header) {
+            const timeLines = [
+                {
+                    sourcePosition: [startTimeMs, yMin],
+                    targetPosition: [startTimeMs, yMax]
+                },
+                {
+                    sourcePosition: [endTimeMs, yMin],
+                    targetPosition: [endTimeMs, yMax]
+                }
+            ];
+            return [
+                // Interval end lines
+                new LineLayer({
+                    id: 'time-delta-side-bars',
+                    data: timeLines,
+                    getSourcePosition: (d) => d.sourcePosition,
+                    getTargetPosition: (d) => d.targetPosition,
+                    getColor: color,
+                    getWidth: 4,
+                    widthUnits: 'pixels'
+                })
+            ];
+        }
+        // // Tick marks
+        // new LineLayer({
+        //   id: 'time-delta-marks',
+        //   data: tickLines,
+        //   getSourcePosition: (d) => d.sourcePosition,
+        //   getTargetPosition: (d) => d.targetPosition,
+        //   getColor: color,
+        //   getWidth: 1,
+        // }),
+        // TODO - triggers an update of monorepo root files
+        //   new PathLayer({
+        //     id: 'dotted-path',
+        //     data: route,
+        //     getPath: d => d.path,
+        //     getWidth: 4,
+        //     getColor: [255, 0, 0],
+        //     // Enable rounded caps on each dash
+        //     rounded: true,
+        //     // Add the dash extension
+        //     extensions: [
+        //       new PathStyleExtension({
+        //         dash: true,
+        //         // highPrecisionDash: true, // uncomment for finer control at low zoom
+        //         capRounded: true          // draw dash ends as semicircles
+        //       })
+        //     ],
+        //     // [dashLength, gapLength] in pixels
+        //     // small dash + equal or larger gap = dotted effect
+        //     getDashArray: () => [2, 6]
+        //   })
+        // ]
+        const HEADER_Y = 12;
+        const timeLines = [
+            {
+                sourcePosition: [startTimeMs, -100],
+                targetPosition: [startTimeMs, HEADER_Y]
+            },
+            {
+                sourcePosition: [endTimeMs, -100],
+                targetPosition: [endTimeMs, HEADER_Y]
+            }
+        ];
+        return [
+            // Interval end lines
+            new LineLayer({
+                id: 'header-time-delta-side-bars',
+                data: timeLines,
+                getSourcePosition: (d) => d.sourcePosition,
+                getTargetPosition: (d) => d.targetPosition,
+                getColor: color,
+                getWidth: 4,
+                widthUnits: 'pixels'
+            }),
+            // Interval center
+            new LineLayer({
+                id: 'header-time-delta-dotted-line',
+                data: [
+                    {
+                        sourcePosition: [startTimeMs, HEADER_Y - 7],
+                        targetPosition: [endTimeMs, HEADER_Y - 7]
+                    }
+                ],
+                getSourcePosition: (d) => d.sourcePosition,
+                getTargetPosition: (d) => d.targetPosition,
+                getColor: color,
+                getWidth: 1,
+                widthUnits: 'pixels'
+            }),
+            // Label
+            new TextLayer({
+                id: 'header-time-delta-label',
+                data: [{ position: timeDeltaPosition, text: timeDeltaLabel }],
+                getPosition: (d) => d.position,
+                getText: (d) => d.text,
+                getSize: 12,
+                getColor: color,
+                getTextAnchor: 'middle',
+                getAlignmentBaseline: 'top',
+                background: true,
+                getBackgroundColor: [255, 255, 255, 255], // Solid green background
+                backgroundPadding: [4, 2] // Horizontal and vertical padding
+            })
+        ];
+    }
+}
+//# sourceMappingURL=time-delta-layer.js.map

package/dist/layers/time-delta-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-delta-layer.js","sourceRoot":"","sources":["../../src/layers/time-delta-layer.ts"],"names":[],"mappings":"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"}

package/dist/layers/vertical-grid-layer.d.ts

@@ -0,0 +1,41 @@
+import { CompositeLayer, type CompositeLayerProps, type UpdateParameters } from '@deck.gl/core';
+import { LineLayer } from '@deck.gl/layers';
+export type VerticalGridLayerProps = CompositeLayerProps & {
+    /** Start time in milliseconds since epoch */
+    xMin: number;
+    /** End time in milliseconds since epoch */
+    xMax: number;
+    /** Optional: Number of tick marks (default: 5) */
+    tickCount?: number;
+    /** Minimum Y-coordinate for grid lines */
+    yMin?: number;
+    /** Maximum Y-coordinate for grid lines */
+    yMax?: number;
+    /** Optional: Width of the grid lines (default: 1) */
+    width?: number;
+    /** Optional: RGBA color for grid lines (default: [200, 200, 200, 255]) */
+    color?: [number, number, number, number];
+};
+export declare class VerticalGridLayer extends CompositeLayer<VerticalGridLayerProps> {
+    static layerName: string;
+    static defaultProps: {
+        yMin: number;
+        yMax: number;
+        tickCount: number;
+        width: number;
+        color: number[];
+    };
+    shouldUpdateState(params: UpdateParameters<VerticalGridLayer>): boolean;
+    renderLayers(): LineLayer<any, {
+        id: `${string}-lines`;
+        data: {
+            sourcePosition: any[];
+            targetPosition: any[];
+        }[];
+        getSourcePosition: (d: any) => any;
+        getTargetPosition: (d: any) => any;
+        getColor: [number, number, number, number];
+        getWidth: 1;
+    }>;
+}
+//# sourceMappingURL=vertical-grid-layer.d.ts.map

package/dist/layers/vertical-grid-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-grid-layer.d.ts","sourceRoot":"","sources":["../../src/layers/vertical-grid-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,GAAG;IACzD,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF,qBAAa,iBAAkB,SAAQ,cAAc,CAAC,sBAAsB,CAAC;IAC3E,OAAgB,SAAS,SAAuB;IAChD,OAAgB,YAAY;;;;;;MAM1B;IAEO,iBAAiB,CAAC,MAAM,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,GAAG,OAAO;IAIvE,YAAY;;;;;;;;;;;CA4BtB"}

package/dist/layers/vertical-grid-layer.js

@@ -0,0 +1,43 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { CompositeLayer } from '@deck.gl/core';
+import { LineLayer } from '@deck.gl/layers';
+import { getPrettyTicks, getZoomedRange } from "../utils/tick-utils.js";
+export class VerticalGridLayer extends CompositeLayer {
+    static layerName = 'VerticalGridLayer';
+    static defaultProps = {
+        yMin: -1e6,
+        yMax: 1e6,
+        tickCount: 5,
+        width: 1,
+        color: [200, 200, 200, 255]
+    };
+    shouldUpdateState(params) {
+        return params.changeFlags.viewportChanged || super.shouldUpdateState(params);
+    }
+    renderLayers() {
+        const { xMin, xMax, tickCount = 5, yMin, yMax, color } = this.props;
+        // Access the current viewport
+        const viewport = this.context.viewport;
+        const bounds = viewport.getBounds(); // Returns [minX, minY, maxX, maxY]
+        // Calculate the visible time range based on the viewport bounds
+        const [startTimeZoomed, endTimeZoomed] = getZoomedRange(xMin, xMax, bounds);
+        // Generate tick positions
+        const tickPositions = getPrettyTicks(startTimeZoomed, endTimeZoomed, tickCount);
+        // Create vertical grid lines at each tick position
+        const gridLines = tickPositions.map((x) => ({
+            sourcePosition: [x, yMin],
+            targetPosition: [x, yMax]
+        }));
+        return new LineLayer({
+            id: `${this.props.id}-lines`,
+            data: gridLines,
+            getSourcePosition: (d) => d.sourcePosition,
+            getTargetPosition: (d) => d.targetPosition,
+            getColor: color,
+            getWidth: 1
+        });
+    }
+}
+//# sourceMappingURL=vertical-grid-layer.js.map

package/dist/layers/vertical-grid-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-grid-layer.js","sourceRoot":"","sources":["../../src/layers/vertical-grid-layer.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,cAAc,EAAkD,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,+BAA4B;AAmBnE,MAAM,OAAO,iBAAkB,SAAQ,cAAsC;IAC3E,MAAM,CAAU,SAAS,GAAG,mBAAmB,CAAC;IAChD,MAAM,CAAU,YAAY,GAAG;QAC7B,IAAI,EAAE,CAAC,GAAG;QACV,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;KAC5B,CAAC;IAEO,iBAAiB,CAAC,MAA2C;QACpE,OAAO,MAAM,CAAC,WAAW,CAAC,eAAe,IAAI,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAC/E,CAAC;IAEQ,YAAY;QACnB,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAElE,8BAA8B;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;QACvC,MAAM,MAAM,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,mCAAmC;QAExE,gEAAgE;QAChE,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAE5E,0BAA0B;QAC1B,MAAM,aAAa,GAAG,cAAc,CAAC,eAAe,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhF,mDAAmD;QACnD,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;YACzB,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;SAC1B,CAAC,CAAC,CAAC;QAEJ,OAAO,IAAI,SAAS,CAAC;YACnB,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ;YAC5B,IAAI,EAAE,SAAS;YACf,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;YAC1C,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;YAC1C,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,CAAC;SACZ,CAAC,CAAC;IACL,CAAC"}

package/dist/synchronized-views/synchronized-views.d.ts

@@ -0,0 +1,39 @@
+import { OrthographicView } from '@deck.gl/core';
+import type { OrthographicViewState } from '@deck.gl/core';
+export declare const HEADER_VIEW_HEIGHT = 50;
+export declare const LEGEND_VIEW_WIDTH = 150;
+export declare const SYNCHRONIZED_VIEWS: OrthographicView[];
+export declare const SYNCHRONIZED_VIEW_STATE_CONSTRAINTS: {
+    header: {
+        target: [any, number];
+        zoom: [any, number];
+    };
+    legend: {
+        target: [number, any];
+        zoom: [number, any];
+    };
+};
+export declare function getSynchronizedViewStates(viewState: OrthographicViewState): {
+    header: OrthographicViewState;
+    legend: OrthographicViewState;
+    main: OrthographicViewState;
+};
+export declare function fitSynchronizedViewStatesToBounds(props: {
+    viewState: {
+        header: OrthographicViewState;
+        legend: OrthographicViewState;
+        main: OrthographicViewState;
+    };
+    width: number;
+    height: number;
+    bounds: [[xMin: number, yMin: number], [xMax: number, yMax: number]];
+    /** App should set to true on first call */
+    initialize: boolean;
+    headerHeight?: number;
+    legendWidth?: number;
+}): {
+    header: OrthographicViewState;
+    legend: OrthographicViewState;
+    main: OrthographicViewState;
+};
+//# sourceMappingURL=synchronized-views.d.ts.map

package/dist/synchronized-views/synchronized-views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"synchronized-views.d.ts","sourceRoot":"","sources":["../../src/synchronized-views/synchronized-views.ts"],"names":[],"mappings":"AAIA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAMvE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AAEzD,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,eAAO,MAAM,kBAAkB,oBAoC9B,CAAC;AAEF,eAAO,MAAM,mCAAmC;;;;;;;;;CAG/C,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,qBAAqB;;;;EAMzE;AAED,wBAAgB,iCAAiC,CAAC,KAAK,EAAE;IACvD,SAAS,EAAE;QACT,MAAM,EAAE,qBAAqB,CAAC;QAC9B,MAAM,EAAE,qBAAqB,CAAC;QAC9B,IAAI,EAAE,qBAAqB,CAAC;KAC7B,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;IACrE,2CAA2C;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG;IACF,MAAM,EAAE,qBAAqB,CAAC;IAC9B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CA6BA"}