Viewport

Documentation / @elitechart/core / Viewport

A read-only viewport with pre-built scale transforms. Construct via Viewport.from. Y grows downward (canvas convention) so higher prices map to smaller y.

Example

code

import { Viewport, asPrice, asTimestampMs } from '@elitechart/core';
const vp = Viewport.from({
  width: 800, height: 480, dpr: 2,
  timeFrom: asTimestampMs(Date.now() - 86_400_000),
  timeTo: asTimestampMs(Date.now()),
  priceFrom: asPrice(67_000),
  priceTo: asPrice(68_000),
});
vp.timeToX(asTimestampMs(Date.now() - 43_200_000)); // ~400 (mid-screen)

Properties

dpr

code

readonly dpr: number;

Defined in: viewport/viewport.ts:69

height

code

readonly height: number;

Defined in: viewport/viewport.ts:68

plotBottom

code

readonly plotBottom: number;

Defined in: viewport/viewport.ts:78

plotLeft

code

readonly plotLeft: number;

Defined in: viewport/viewport.ts:75

plotRight

code

readonly plotRight: number;

Defined in: viewport/viewport.ts:76

plotTop

code

readonly plotTop: number;

Defined in: viewport/viewport.ts:77

priceFrom

code

readonly priceFrom: Price;

Defined in: viewport/viewport.ts:72

priceKind

code

readonly priceKind: PriceScaleKind;

Defined in: viewport/viewport.ts:74

priceTo

code

readonly priceTo: Price;

Defined in: viewport/viewport.ts:73

timeFrom

code

readonly timeFrom: TimestampMs;

Defined in: viewport/viewport.ts:70

timeTo

code

readonly timeTo: TimestampMs;

Defined in: viewport/viewport.ts:71

width

code

readonly width: number;

Defined in: viewport/viewport.ts:67

Accessors

plotHeight

Get Signature

code

get plotHeight(): number;

Defined in: viewport/viewport.ts:151

Plot-area height in CSS pixels.

Returns

number

plotWidth

Get Signature

code

get plotWidth(): number;

Defined in: viewport/viewport.ts:146

Plot-area width in CSS pixels.

Returns

number

Methods

priceToY()

code

priceToY(p): number;

Defined in: viewport/viewport.ts:136

Convert a price to a pixel y-coordinate (canvas space).

Parameters

p

Price

Returns

number

timeToX()

code

timeToX(t): number;

Defined in: viewport/viewport.ts:126

Convert a timestamp to a pixel x-coordinate.

Parameters

t

TimestampMs

Returns

number

withGeometry()

code

withGeometry(
   width, 
   height, 
   dpr): Viewport;

Defined in: viewport/viewport.ts:192

Build a new viewport with updated geometry (e.g. on resize).

Parameters

width

number

height

number

dpr

number

Returns

Viewport

withPriceWindow()

code

withPriceWindow(priceFrom, priceTo): Viewport;

Defined in: viewport/viewport.ts:174

Build a new viewport with a modified price window.

Parameters

priceFrom

Price

priceTo

Price

Returns

Viewport

withTimeWindow()

code

withTimeWindow(timeFrom, timeTo): Viewport;

Defined in: viewport/viewport.ts:156

Build a new viewport with a modified time window, keeping everything else.

Parameters

timeFrom

TimestampMs

timeTo

TimestampMs

Returns

Viewport

xToTime()

code

xToTime(x): TimestampMs;

Defined in: viewport/viewport.ts:131

Convert a pixel x-coordinate to a timestamp.

Parameters

x

number

Returns

TimestampMs

yToPrice()

code

yToPrice(y): Price;

Defined in: viewport/viewport.ts:141

Convert a pixel y-coordinate to a price.

Parameters

y

number

Returns

Price

from()

code

static from(init): Viewport;

Defined in: viewport/viewport.ts:101

Build a viewport, filling in defaults for the plot insets.

Parameters

init

ViewportInit

Returns

Viewport