https://github.com/slicedsilver/lwc-plugin-visible-price-range-util

A plugin for providing a utility API to retrieve the visible range of a price scale, and subscribe to changes.
https://github.com/slicedsilver/lwc-plugin-visible-price-range-util

lightweight-charts lwc-plugin

Last synced: about 1 month ago
JSON representation

A plugin for providing a utility API to retrieve the visible range of a price scale, and subscribe to changes.

• Host: GitHub
• URL: https://github.com/slicedsilver/lwc-plugin-visible-price-range-util
• Owner: SlicedSilver
• Created: 2023-10-12T22:10:46.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-12T22:24:35.000Z (about 1 year ago)
• Last Synced: 2024-05-12T07:22:23.934Z (7 months ago)
• Topics: lightweight-charts, lwc-plugin
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/lwc-plugin-visible-price-range-util
• Size: 12.7 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Visible Price Range Util - Lightweight Charts™ Plugin

A plugin for providing a utility API to retrieve the visible range of a price scale, and subscribe to changes.

- Developed for Lightweight Charts version: `v4.1.0`

## Installation

```bash

npm install lwc-plugin-visible-price-range-util

```

## Usage

```js

import { VisiblePriceRangeUtil } from 'lwc-plugin-visible-price-range-util';

// Create an instantiated Visible Price Range Util primitive.

const vprUtil = new VisiblePriceRangeUtil();

// Create the chart and series...

const chart = createChart(document.getElementById('container'));

const lineSeries = chart.addLineSeries();

const data = [

    { time: 1642425322, value: 123 },

    /* ... more data */

];

// Attach the utility to the series

lineSeries.attachPrimitive(vprUtil);

const currentVisiblePriceRange = vprUtil.getVisiblePriceRange();

vprUtil.priceRangeChanged().subscribe(function(newRange) {

    if (!newRange) return;

    console.log(`Price Range is now from ${newRange.bottom} to ${newRange.top}`);

});

```

## Developing

### Running Locally

```shell

npm install

npm run dev

```

Visit `localhost:5173` in the browser.

### Compiling

```shell

npm run compile

```

Check the output in the `dist` folder.