npm package: @refinitiv-ui/browser-sparkline
Description: Sparkline canvas that support both static data and Refinitiv Data Platform
Author: Refinitiv
Latest version: 2.0.2

# Browser Sparkline Chart

  Browser sparkline chart is a canvas chart component that supports both static data drawing mode and automatic retrieve the data from Refinitiv Data Platform.

## Open Demo Page

```js

  npm run start

```

## Normal usage

  Browser sparkline chart can be added to your app as per any web component.

```html

  <browser-sparkline-chart id="chart"></browser-sparkline-chart>

```
  
```js
  const chart = document.getElementById('chart');
  chart.config = {
    themeConfig: {
      lineWidth: 1,
      upperLineColor: '#39C46E',
      lowerLineColor: '#D94255',
    },
    requestData: {
      ric: 'A',
      interval: '1H',
      timeFrame: '2D',
      view: 'BID',
    }
  };

```

  For chart configuration, you can use these configuration preperties below (All these properties can be optional)

- **themeConfig** - Theme config
- **staticData** - Create the chart with static data without retrieve the data from Refinitiv Data Platform
- **requestData** - Create the chart with retrieve the data from Refinitiv Data Platform

## themeConfig Preperties: Customise size, colors and line width

```js
  const chart = document.getElementById('chart');
  chart.config = {
    themeConfig: {
      width: 200,
      height: 100,
      lineWidth: 1,
      referenceLineColor: '#4D4D4D',
      previousLineColor: '#BFBFBF',
      upperLineColor: '#39C46E',
      lowerLineColor: '#D94255',
      fillColorStyle: 'solid'
    },
  };

```

All these properties can be optional

- **width** - Chart width
- **height** - Chart height
- **lineWidth** - Line width
- **referenceLineColor** - Reference/threshold line color
- **previousLineColor** - Color of line that plot from previousData
- **upperLineColor** - Color of line that higher than the reference value
- **lowerLineColor** - Color of line that lower than the reference value
- **fillColorStyle** - Color area below/above the line (<em>gradient | solid | none</em>). The default style is **gradient**.

## staticData Preperties

 Create the chart with static data without retrieve the data from Refinitiv Data Platform.

```js
  const chart = document.getElementById('chart');
  chart.config = {
    staticData: {
      referenceValue: 0,
      previousData: [-3, 6, 4, 5, 0, 3, 2, 3, -1, -4, 2, 3, 4, 3, 6],
      data: [-2, -3, 1, 1, 4, 6, -3, 1, 4, 6, 10, 5, 0, 3, 2, 3]
    },
  };

```

- **referenceValue** (optional) - A threshold line value. The area above or below the threshold line will be filled with different colors.
- **previousData** (optional) - The previousData will use for draw the chart. The line color  the line will be below or above the threshold line. The default color is grey
- **data** - The data will use for draw the chart. The line color depend on area above or below the threshold line. The default upper color is green and lower color is red

## requestData Preperties:

### Automatically retrieve the data from Refinitiv Data Platform

   Prior to the usage of Browser Spakline Chart with streaming value with ```view``` preperty, ensure your project include **RTK with Quotes plugin**. 
   Quotes plugin is required for obtaining real-time market data to add the lastest data point to the chart when the current day is trading day.

```js
  const chart = document.getElementById('chart');
  chart.config = {
    requestData: {
      ric: 'A',
      timeFrame: '5D',
      view: 'YIELD',
    },
  };

```

- **ric** - RIC name
- **timeFrame** (optional) - Time range to retrieve the data from Refinitiv Data Platform API for display on the sparkline chart. The default timeFrame is **2D**.
  - <em>H (hour)</em>
  - <em>TODAY</em>
  - <em>D (day)</em>
  - <em>W (week) </em>
  - <em>M (month)</em>
  - <em>Y (year)</em>
  - <em>YTD (year to date)</em>

- **interval** (optional) - Calendar day interval to retrieve the data from Refinitiv Data Platform API. The default interval is **1H**.
  - <em>1 (minutely)</em>
  - <em>60 (hourly or 60 minutes)</em>
  - <em>1H or H (hourly)</em>
  - <em>1D or D (daily)</em>
  - <em>1W or W (weekly) </em>
  - <em>1M or M (monthly)</em>
  - <em>1Q or Q (quaterly)</em>
  - <em>1S or S (semiyearly)</em>
  - <em>1Y or Y (yearly)</em>

- **previousLine** (optional) - Range of previous data to draw sparkline with previous line color. PreviousLine use the same pattern as timeFrame. The default previousLine value is **0D**. 
For example:

```js
  const chart = document.getElementById('chart');
  chart.config = {
    requestData: {
      ric: 'A',
      timeFrame: '5D',
      previousLine: '2D',
    },
  };

```

In this case DAY1 - DAY2 data points will be previous line color and DAY3 - DAY5(today) data points will be normal line color.

- **view** (optional) - View preperty required RTK with Quotes plugin to subscribe to add on the chart. The default value is depend on default view from Time Series backend service or the custom endpoint from ```defaultViewUrl```.

- **defaultViewUrl** (optional) - Url endpoint is required to get the default view ('BID', 'BID_YIELD', etc.) to subscribe quote to use for streaming point. The default url is ```/Apps/TAService/GetMetaData/```.

- **dataPointUrl** (optional) - Url endpoint is required to get the initial data point to add on the chart. The default url is ```/Apps/TAService/GetTimeSeries```.

- **autoFetch** (optional) - Auto fetch is a flag that's set to handle about re-fetching the data from the server when RTK with Quotes plugin isn't available. The default value is **true**

## Resize Sparkline Chart

Browser sparkline chart have public medthod to update ```browser-sparkline-canvas``` size. Default width is 100px and default height is 30px.

```js
  const chart = document.getElementById('chart');
  chart.updateCanvasSize(200, 100);
```