### Navigate to Project and Install Dependencies

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/getting-started.md

Change into the newly created project directory and install the initial project dependencies using npm.

```sh
cd night-vision-101
```

```sh
npm install
```

--------------------------------

### Install NightVision Package

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/getting-started.md

Add the NightVision library as a project dependency using npm.

```sh
npm i night-vision
```

--------------------------------

### Run Development Server

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/getting-started.md

Start the Vite development server to view the created NightVision chart in the browser.

```sh
npm run dev
```

--------------------------------

### Installing NightVision Python Integration Dependencies (Shell)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Install the necessary Python and Node.js dependencies to run the NightVision Python integration example. This includes the Python 'requests' library and Node.js packages defined in 'package.json'.

```shell
python3 -m pip install requests
npm install
```

--------------------------------

### Initialize NightVision Chart in main.js

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/getting-started.md

Replace the default content of main.js with code to import NightVision, set up basic HTML, generate sample data, initialize the chart targeting the 'chart-container' element, and assign the generated data.

```js
import './style.css'
import { NightVision } from 'night-vision'

document.querySelector('#app').innerHTML = `
<style>
body {
    background-color: #0c0d0e;
}
</style>
<h1>Night Vision Charts</h1>
<div id="chart-container"></div>
`
// Generate some random data
function data() {
    return Array(30).fill(1).map((x, i) => [
        new Date(`${i+1} Nov 2022 GMT+0000`).getTime(),
        i * Math.random()
    ])
}
let chart = new NightVision('chart-container')
chart.data = {
    panes: [{
        overlays: [{
            name: 'APE Stock',
            type: 'Spline',
            data: data(),
            settings: {
                precision: 2
            }
        }]
    }]
}
```

--------------------------------

### Create Vite Project with Vanilla JS Template

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/getting-started.md

Use npm, yarn, or pnpm to create a new Vite project directory named 'night-vision-101' with a basic vanilla JavaScript template.

```sh
npm create vite@latest night-vision-101 --template vanilla
```

```sh
npm create vite@latest night-vision-101 -- --template vanilla
```

```sh
yarn create vite night-vision-101 --template vanilla
```

```sh
pnpm create vite night-vision-101 --template vanilla
```

--------------------------------

### Overlay DataView Object Example (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/data-struct/overlay-object.md

Provides an example structure for the 'overlay.dataView' object. This object references a subset of the main data array using start and end indices ('i1', 'i2') and includes the subset length and a reference to the source data.

```javascript
// Example of `overlay.dataView`
{
    i1: 4148, // Start index
    i2: 4199, // End index (included)
    length: 52, // length of the section
    src: […] // Reference to `overlay.data`
}
```

--------------------------------

### Configuring Area Overlay Type (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

This example shows how to change the overlay type from 'Spline' to 'Area' and customize its appearance using the 'props' object. It demonstrates setting custom colors for the area fill and line.

```javascript
// The main pane
{
    "overlays": [
        {
            "name": "APE / Tether US",
            "type": "Area", // We are using a different overlay
            "main": true,
            "settings": {},
            "props": {
                "color": "#ba0179", // Setting custom colors
                "back1": "#ba017925",
                "back2": "#bd11db05"
            }
        }
    ]
}
```

--------------------------------

### Configuring Chart Colors (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Demonstrates how to set a custom color theme for the chart by providing a `colors` object with specific color properties.

```js
colors: {
    back: "#1b1b1c",
    grid: "#2e2f3099",
    candleDw: "#0c5b3bff",
    candleUp: "#41a35bff",
    // ...
  }
```

--------------------------------

### Installing Night Vision Charts with npm

Source: https://github.com/project-nv/night-vision/blob/main/README.md

Command to install the Night Vision charting library using the npm package manager. This is the standard way to add the library to a project.

```Shell
npm i night-vision
```

--------------------------------

### Dynamically Updating Scale Template (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Provides an example function `onButton1` that modifies the `scaleTemplate` setting based on a condition. After changing the configuration, it calls `chart.update()` to re-render the chart with the new scale layout.

```JavaScript
// Change scale side
function onButton1() {
    // ...
    if (!template[0].length) {
        settings.scaleTemplate = [["A"], ["B"]];
        //...
    } else {
        settings.scaleTemplate = [[], ["A", "B"]];
        // ...
    }
    chart.update();
}
```

--------------------------------

### Example Exotic Data Format (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Provides an example of a data format where each item is a nested structure containing a timestamp and an object with price and currency, which requires a custom precision sampler for automatic precision detection.

```js
// Example of an "exotic" data format
[
    [1648400400000, { price: 100.1, currency: '$' }],
    [1648404000000, { price: 100.2, currency: '$' }],
    [1648407600000, { price: 99.99, currency: '$' }],    
    // ...
]
```

--------------------------------

### Calling a Chart Method Example (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/chart-api.md

Provides a simple example of calling a method on the chart instance, specifically the update() method, which is used to refresh the chart display.

```js
// For example
chart.update()
```

--------------------------------

### NightVision Data Point Structure Example (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/layout.md

Shows an example of the array-based data structure used by NightVision, illustrating how individual data points (like OHLCV) are represented within the main data array.

```JavaScript
[
    [1584428400000,5300,5325,5300,5325,518.94863323],
    [1584428400000,5325,5350,5325,5350,518.94863323],
    [1584428400000,5350,5375,5350,5375,518.94863323],
    [1584428400000,5375,5400,5375,5400,518.94863323],
    [1584432000000,5375,5375,5350,5350,710.36249024],
    // ...
]
```

--------------------------------

### Defining Chart Overlay Configuration (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Shows the structure of an overlay configuration object, including properties for name, type, data, settings (like display visibility), and props (like color).

```js
// Overlay object
{
    "name": "SMA 1",
    "type": "Spline",
    "data": […],
    "settings": {
        "display": false // Hide the overlay
    },
    "props": {
        "color": "#39f"
    }
}
```

--------------------------------

### Setting Main Overlay for Grid Calculation (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Illustrates how to designate a specific pane's overlay as the "main" overlay for grid calculation by setting the `main` property to `true` within the pane's settings.

```js
// Pane object
{
    settings: {
        main: true
    }
}
```

--------------------------------

### Initializing Multiple NightVision Instances (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

To display multiple charts on the same screen, initialize each NightVision instance with a unique DOM element ID. The full code is typically found in a main JavaScript file.

```javascript
// The full code is in 'main.js'
let chart1 = new NightVision({ id: 'nvjs-1'})
let chart2 = new NightVision({ id: 'nvjs-2'})
// ...
```

--------------------------------

### Initializing NightVision Chart with Real-time Data in JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Initializes a NightVision chart instance, loads initial historical OHLCV data using DataLoader, sets up infinite scrolling to load more historical data when the user scrolls left, and integrates a WebSocket stream (wsx) to receive trades and update the chart data using ohlcvSampler. Includes periodic checks for loading more data.

```JavaScript
import "./style.css";
import { NightVision } from "./night-vision.js";
import { DataLoader } from "./dataLoader.js";
import wsx from "./wsx.js";
import sampler from "./ohlcvSampler.js";

// ...

let chart = new NightVision("chart-container", {
  autoResize: true,
  colors: {
    back: "#1b1b1c",
    grid: "#2e2f3099"
  }
});

let dl = new DataLoader();

// Load the first piece of the data
dl.load((data) => {
  chart.data = data;
  el("loading").hidden = true;
});

// Load deeper into the history
function loadMore() {
  if (!chart.hub.mainOv) return;
  let data = chart.hub.mainOv.data; // Main OHLCV
  let t0 = data[0][0]; // Leftmost timestamp
  // Check if we out of data
  if (chart.range[0] < t0) {
    el("loading").hidden = false;
    dl.loadMore(t0 - 1, (chunk) => {
      // Add a new chunk at the beginning
      data.unshift(...chunk);
      // You need to update "range"
      // when the data range is changed
      chart.update("data");
      el("loading").hidden = true;
    });
  }
}

// Load new data when user scrolls left
chart.events.on("app:$range-update", loadMore);

// Plus check for updates every half-second
setInterval(loadMore, 500);

// Setup a trade data stream
wsx.init(["APE-PERP"]);
wsx.ontrades = (d) => {
  if (!chart.hub.mainOv) return;
  let data = chart.hub.mainOv.data;
  let trade = {
    price: d.price,
    volume: d.price * d.size
  };
  if (sampler(data, trade)) {
    chart.update("data"); // New candle
  } else {
    chart.update(); // Candle update
  }
};

// ...

```

--------------------------------

### Configuring Pane Scales Settings (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/data-struct/pane-object.md

Provides an example of the pane.settings.scales object structure, showing how scale definitions are stored as an associative array, with properties like precision.

```js
// Example of pane.settings.scales
{
    A: {
        precision: 2
    },
    B: {
        // ...
    },
    // ...
}
```

--------------------------------

### Initializing NavyJS Overlay (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/navy-api.md

Called once when the overlay is created. Use this function for one-time setup like adding event listeners. Event listeners should use a unique component ID derived from `core.uuid` to prevent conflicts.

```js
init() {
    // Add event listener, which should use an unique component id
    $events.on(`rsi-${core.uuid}:some-event`, e => {
        console.log(e)
    })
}
```

--------------------------------

### Initializing and Setting Data for Night Vision Chart in JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/README.md

Demonstrates how to import the Night Vision library, create a new chart instance linked to a DOM element, generate sample data, and assign the data to the chart's panes and overlays. Requires a DOM element with the specified ID to exist.

```JavaScript
import { NightVision } from 'night-vision'

let chart = new NightVision('<root-element-id>')

// Generate some random data
function data() {
    return Array(30).fill(1).map((x, i) => [
        new Date(`${i+1} Nov 2022 GMT+0000`).getTime(),
        i * Math.random()
    ])
}

// Set the dataset
chart.data = {
    panes: [{
        overlays: [{
            name: 'APE Stock',
            type: 'Spline',
            data: data(),
            settings: {
                precision: 2
            }
        }]
    }]
}
```

--------------------------------

### Example of Complex Indexing to Avoid (NavyJS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/indicator-scripts.md

Provides an example of a code construction involving complex indexing (brackets inside brackets) that should be avoided in the Script Engine due to potential issues.

```JavaScript
ts1[[i][0] + arr[n]]
```

--------------------------------

### Using NightVision Mapping Functions (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/layout.md

Provides examples of the mapping functions available on the Layout object to convert between data values (time, price) and screen coordinates (x, y) for chart rendering.

```JavaScript
layout.time2x(t) // time -> x
layout.value2y($) // price -> y
layout.y2value(y) // y -> price
layout.x2time(x) // x -> time
// ...
```

--------------------------------

### Syncing NightVision Chart Ranges (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Synchronize the time ranges of multiple NightVision chart instances by listening to the 'app:$range-update' event on each instance and setting the range of the other instance accordingly.

```javascript
// Time-range sync
// Subscribing to the events of the first instance
chart1.events.on("app:$range-update", (range) => {
    chart2.range = range;
});
// Subscribing to the events of the second instance
chart2.events.on("app:$range-update", (range) => {
    chart1.range = range;
});
```

--------------------------------

### Adding/Removing Chart Pane (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

JavaScript function `onButton1` demonstrates how to dynamically add or remove a pane from the chart's data structure and then call `chart.update()` to apply the changes.

```js
// Add/remove pane
function onButton1() {
  if (chart.data.panes.length <= 1) {
    chart.data.panes.push({ // Pushing a new pane object
      settings: {},
      overlays: [ovData2]
    });
    // ...
  } else {
    chart.data.panes.pop();
    // ...
  }
  chart.update(); // Need to call to apply changes
}
```

--------------------------------

### Configuring Pane Scale Template (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Demonstrates how to set the `scaleTemplate` property within the `settings` of a pane object. This property defines the arrangement of scales on the chart pane, allowing for multiple scales on different sides or grouped together.

```JavaScript
// Pane object
{
    settings: {
        // Any config: [['A', 'B'], []] or [['A'], ['A']]
        scaleTemplate: [[], ['A', 'B']]
    }
}
```

--------------------------------

### Adding/Removing Chart Overlay (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

JavaScript function `onButton2` shows how to add or remove an overlay from the first pane's overlay list and requires calling `chart.update()` to reflect the modification.

```js
// Add/remove overlay
function onButton2() {
  let overlays = chart.data.panes[0].overlays;
  if (overlays.length <= 2) {
    overlays.push(ovData1);
    // ...
  } else {
    overlays.pop();
    // ...
  }
  chart.update(); // Need to call to apply changes
}
```

--------------------------------

### Showing/Hiding Chart Overlays (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

JavaScript function `onButton3` uses the chart's `hub.allOverlays()` helper to iterate through overlays (excluding the main one) and toggle their `display` setting, requiring two calls to `chart.update()` (one for the chart, one specifically for the legend).

```js
// Show/hide overlays
function onButton3() {
  // ...
  // Here we are using a helper function of DataHub
  chart.hub.allOverlays().forEach((x, i) => {
    if (i === 0) return; // Except the main
    x.settings.display = flag; // (true/false)
  });
  // IMPORTANT: Here we have to call one more update
  // (for the legend)
  chart.update();
  chart.update("legend");
}
```

--------------------------------

### Assigning Scale to Overlay (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

Shows how to set the `scale` property within the `settings` of an overlay object. This links the overlay's data values to a specific scale defined in the pane's `scaleTemplate`, enabling proper value-to-coordinate mapping.

```JavaScript
// Overlay object
{
    settings: {
        scale: 'B' // Set or create a scale
    }
}
```

--------------------------------

### Defining Custom NavyJS Overlay Script

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

This script defines a custom overlay for a chart using the NavyJS framework. It includes metadata, defines a custom property (`radius`), declares a constant, provides a `draw` function to render data points as circles, a `gradient` function for coloring, and a `legend` function to format legend entries.

```NavyJS

// Navy ~ 0.2-lite
// ^^^ First comment should provide a NavyJS version

// Meta tag
[OVERLAY name=Custom, ctx=Canvas, author=ChartMaster, version=1.0.0]

// Define new props
// (the same as in 'settings.props' of Overlay object)
prop('radius', {  type: 'number', def: 3 })

// Any variables/constants
const _3Y = 60 * 60 * 24 * 365 * 3 * 1000

// Draw function (called on each update)
// Library provides a lot of useful variables to make
// overlays ($core in the main collection)
draw(ctx) {

    ctx.strokeStyle = $props.back
    ctx.lineWidth = 1
    const layout = $core.layout
    const data = $core.data // Full dataset
    const view = $core.view // Visible view
    const radius = $props.radius

    for (var i = view.i1, n = view.i2; i <= n; i++) {
        ctx.beginPath()
        let p = data[i]
        // Mapping function used to transform values into
        // coordinates
        let x = layout.time2x(p[0])
        let y = layout.value2y(p[1])
        ctx.fillStyle = gradient(p[1])
        ctx.arc(x, y, radius, 0, Math.PI * 2, false)
        ctx.fill()
    }
}

// Make a gradient depending on the y-value
gradient(val) {
    let lo = $core.layout.$lo * 1.01
    let hi = $core.layout.$hi * 0.99
    let pos = (val - lo) / (hi - lo)
    let h = (1.0 - pos) * 240
    return "hsl(" + h + ", 90%, 50%)"
}

// Legend formatter, Array of [value, color] pairs
// x represents one data item e.g. [<time>, <value>]
legend(x) => [
    [x[1], gradient(x[1])],
    ['°F', 'white'],
    [new Date(x[0] + _3Y).toLocaleDateString(), 'gray']
]

```

--------------------------------

### Example Cursor Object Structure in NightVision (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/cursor.md

Provides an example structure of the cursor object, showing properties like visibility, grid ID, current values, XY coordinates, scale values, and time.

```js
// Example of a cursor object
{
    visible: true,
    gridId: 0,
    values: [
        [
            [
                1663434000000,
                4.9385
            ]
        ]
    ],
    x: 473.5,
    y: 213,
    scales: {
        A: 5.067736096938775
    },
    t: 1663434000000
}
```

--------------------------------

### Defining Chart Data Structure (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

This snippet illustrates the required JSON structure for providing data to the charting library. It defines the top-level object containing 'panes', which in turn contain 'overlays' with specific properties like 'name', 'type', 'data', and 'props'.

```javascript
{
    // Defines panes (vertical sections of the chart)
    "panes": [
        {
            // Defines overlays (layers of graphics)
            "overlays": [
                {
                    "name": "APE / Tether US",
                    "type": "Spline", // Overlay type
                    "main": true, // Is this the main overlay
                    "data": […], // Time-series: [[<time>, value], …]
                    "settings": {}, // Overlay settings
                    "props": {
                        "color": "orange"
                    }
                }
            ],
            "settings": {}, // Pane settings
        }
    ]
}
```

--------------------------------

### Custom Precision Sampler (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Shows an example of a preSampler function defined within an overlay script. This function extracts the price property from a nested data item x to be used by the automatic precision detection algorithm.

```js
// Precision sampler, defined in an overlay script
preSampler(x) => x.price
```

--------------------------------

### Example Y-Transform Structure (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Illustrates the structure of the chart.meta.yTransforms array, showing how custom Y-range settings for a specific scale (A) within a grid (0) are stored after a user performs a mouse drag on the sidebar.

```js
// Example of yTransforms: Array(gridId => yTransform)
[
  { // Grid 0
    A: {
      gridId: 0,
      scaleId: 'A',
      zoom: 0.4821428571428571,
      auto: false,
      range: [
        6.562853703703704,
        3.6926462962962967
      ],
      drugging: false,
      updateLayout: true
    }
  },
  // ... other Grids
]
```

--------------------------------

### Sending Data to NightVision Server (Python)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/10-basic-examples.md

This Python script generates sample time series data and sends it as a JSON payload via an HTTP POST request to a local NightVision plot server running on port 7779. It uses the 'requests' library for the HTTP communication.

```python
import requests
import datetime
import math
import random

# Generate some fake data
time_series = []
for i in range(30):
    time = datetime.datetime.strptime('2022-11-' + str(i + 1), '%Y-%m-%d')
    t = math.floor(time.timestamp()) * 1000
    time_series.append([t, random.random() * (i + 1)])

# Data that we will send in POST request
data = {
    'panes': [{
        'overlays': [{
            'name': 'APE Stock',
            'type': 'Spline',
            'data': time_series,
            'settings': {
                'precision': 2
            }
        }]
    }]
}

# The POST request to our NightVision server
res = requests.post('http://127.0.0.1:7779/plot', json=data)

# Convert response data to json
returned_data = res.json()

print(returned_data)
```

--------------------------------

### Accessing Internal Chart Layout (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/chart-api.md

Provides an example of accessing an internal variable of the chart instance, specifically the layout object, by logging it to the console.

```js
console.log(chart.layout)
```

--------------------------------

### Configuring SWMA Script in Chart Pane (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/built-in-indicators/SWMA.md

Illustrates how to include the SWMA script within the 'scripts' array of a chart pane configuration object. This setup is necessary to activate the SWMA indicator on a specific chart pane.

```javascript
// Pane object:
{
    overlays: [], // Non-generated overlays
    scripts: [{
        type: 'SWMA',
        props: {}, // Script props
        settings: {} // Script settings
    }]
}
```

--------------------------------

### Get Sign of Number JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Provides a shortcut for the standard Math.sign() function. Takes a number as input and returns its sign (-1, 0, or 1).

```JavaScript
sign(x)
```

--------------------------------

### Getting Events Singleton Instance with Events.instance (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/events.md

Explains how to obtain a singleton instance of the Events object using `Events.instance('<id>')`. This is useful for accessing the event system of another NightVision instance or for creating a dedicated event channel for a new module.

```js
import { Events } from 'night-vision'

// Event of another NVJS instance
const events = Events.instance('<nvjs-id>')

// Create a new module
const events = Events.instance('<new-module-id>')
```

--------------------------------

### Initializing NightVision with Custom Colors (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/default-colors.md

Demonstrates how to initialize a NightVision chart instance and provide a custom `colors` object in the configuration options to override default chart colors. The example shows setting the background color.

```JavaScript
let chart = new NightVision('<root>', {
    colors: {
        back: '#eeeeee',
        // ...
    }
})
```

--------------------------------

### Configuring CMO Indicator in Pane (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/built-in-indicators/CMO.md

Example JavaScript object structure showing how to add the CMO indicator script to the `scripts` array within a pane configuration. It includes placeholders for script properties (`props`) and settings (`settings`). The indicator requires input data in the format `[<timestamp>, <open>, <high>, <low>, <close>, <volume>]`.

```js
// Pane object:
{
    overlays: [], // Non-generated overlays
    scripts: [{
        type: 'CMO',
        props: {}, // Script props
        settings: {} // Script settings
    }]
}
```

--------------------------------

### Custom HTML Legend Formatter (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Provides an example of a legendHtml function used within a .navy script to create a custom HTML legend entry for a data point x. It takes the data item, precision, and formatter function as arguments.

```js
// HTML legend formatter
// x represents one data item e.g. [<time>, <value>]
// prec - current scale precision
// f - default number formatter
legendHtml(x, prec, f) => `
    <style>
    .custom-html-legend {
        background-color: ${gradient(x[1])};
        padding: 1px 3px;
        border-radius: 3px;
        color: black;
        font-weight: bold;
    }
    </style>
    <span style="margin: 0px 3px;">DOINK</span>
    <span class="custom-html-legend">
        ${f(x[1])}
    </span>
`
```

--------------------------------

### Define Custom Precision Sampler in Night Vision (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

This example demonstrates how to define a custom `preSampler` function to select specific values from a data point `x` for precision calculation. It excludes values like volume that might skew precision, focusing only on relevant data points (indices 1 and 4 in this case).

```js
preSampler(x) => [x[1], x[4]]
```

--------------------------------

### Instantiating NightVision Chart (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/basic-configuration.md

Demonstrates the basic instantiation of the NightVision chart component using `new NightVision()`, providing the root element ID and initial configuration props.

```javascript
import NightVision from 'night-vision'

let chart = new NightVision('<root-element-id>', {
    /* Main component props */
})
```

--------------------------------

### Overriding Default Script Properties (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/data-struct/script-object.md

Demonstrates how to override the default properties of a specific script instance by providing values in the `script.props` object. This example overrides the `length` and `zIndex` properties for an 'RSI' script.

```js
// Script object
{
    type: 'RSI',
    props: {
        length: 28,
        zIndex: 1
    }
}
```

--------------------------------

### Navigating Chart to Specific Time - JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/chart-api.md

This code snippet shows how to use the `chart.goto` function to navigate the chart view to a specific point in time or index, depending on the chart's mode. The example demonstrates warping the chart view to the current time.

```js
chart.goto(new Date().getTime())
```

--------------------------------

### Adding KCW Script to Pane (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/built-in-indicators/KCW.md

This code demonstrates how to configure a pane object within a chart setup to include the KCW indicator script by adding an object with type 'KCW' to the 'scripts' array, allowing for custom properties and settings.

```JavaScript
// Pane object:
{
    overlays: [], // Non-generated overlays
    scripts: [{
        type: 'KCW',
        props: {}, // Script props
        settings: {} // Script settings
    }]
}
```

--------------------------------

### Configuring NightVision Chart with Main Props (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/basic-configuration.md

Shows how to configure the NightVision chart instance with common main properties like dimensions, colors, scripts, chart configuration, and initial data upon instantiation.

```javascript
let chart = new NightVision('root', {
    width: 800,
    height: 420,
    colors: { back: 'navy' },
    scripts: [], // Overlay / indicator scripts
    chartConfig: {},
    data: {},
    // ... (more options)
})
```

--------------------------------

### Getting Current Time (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Returns the current time as a timestamp in milliseconds.

--------------------------------

### Defining Spline Data Format - JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/built-in-overlays/Splines.md

This snippet illustrates the expected data format for spline input, which is an array starting with a timestamp followed by data points for each line.

```js
[<timestamp>, <line1>, <line2>, ...]
```

--------------------------------

### Getting OHLC Precision - Night Vision - JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Retrieves the precision of the OHLC dataset. This is a global function.

Returns:
- number: Ohlc preciosion

```JavaScript
autoPrec()
```

--------------------------------

### Using $lib Helper Functions in NavyJS Overlay (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

Illustrates how to use helper functions provided by the `$lib` environment variable, specifically for drawing candle components based on a descriptor object.

```JavaScript
/* CandleDescriptor {
    x, // x-coordinate
    w, // width
    o, h, l, c, // y-coords
    green, // true/false
    src // Data point ref
}*/
$lib.candleWick(ctx, candleDescriptor, layout)
$lib.candleBody(ctx, candleDescriptor, layout)
```

--------------------------------

### Defining NavyJS Blocks with Tags

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/scripts.md

Illustrates the basic structure of a NavyJS file, showing how to define different blocks like OVERLAY and INDICATOR using square bracket tags at the beginning of a section.

```NavyJS
// Navy ~ 1.0

[OVERLAY name=Custom, ctx=Canvas, author=ChartMaster, version=1.0.0]

// ...

[INDICATOR name=GodMoney version=1.1.0]

// ...
```

--------------------------------

### Accessing the Cursor Object in NightVision (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/cursor.md

Demonstrates how to instantiate a NightVision chart and access its cursor object, typically used to get current crosshair position, time, and values.

```js
let chart = new NightVision()
console.log(chart.cursor)
```

--------------------------------

### Initializing NightVision Chart with Properties (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/chart-api.md

Demonstrates how to create a new instance of the NightVision chart library, passing the root element ID and an object containing configuration properties like width and height.

```js
let chart = new NightVision('<root-element-id>', {
    /* Property object */
    width: ...,
    height: ...
    // ...
})
```

--------------------------------

### Get Day of Week (Time) JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Returns the day of the week for a given time in milliseconds. If no time is provided, it uses the current time. Returns a number.

```javascript
dayofweek([time])
```

--------------------------------

### Get Day of Month (Time) JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Returns the day of the month for a given time in milliseconds. If no time is provided, it uses the current time. Returns a number.

```javascript
dayofmonth([time])
```

--------------------------------

### Get Seconds from Timestamp JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Returns the seconds component of a given timestamp in milliseconds. If no timestamp is provided, it uses the current time. Returns a number representing the seconds.

```JavaScript
second([time])
```

--------------------------------

### Defining Overlays and Indicators in NavyJS

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/intro/night-vision-charts.md

This snippet illustrates the basic syntax of NavyJS, a superset of JavaScript used for scripting within Night Vision. It shows how to define an overlay ([OVERLAY]) and an indicator ([INDICATOR]) with an update section ([UPDATE]) that references the defined overlay.

```JavaScript
[OVERLAY name="Spline"]
// ... Spline overlay definition
draw(ctx) {}

[INDICATOR name="EMA"]
// ... Script initialization code
[UPDATE]
// Using Spline overlay defined above
spline(ema(close, 42))
```

--------------------------------

### Defining Navy Script with Overlay and Indicator

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/scripts-intro.md

Illustrates the basic structure of a .navy script, combining an overlay definition ([OVERLAY]) with an indicator definition ([INDICATOR]). Shows how to define custom properties (prop()) and the main drawing function (draw()) for the overlay, and the update logic ([UPDATE]) for the indicator.

```navy
// Navy ~ 0.2-lite

[OVERLAY name=Spline, ctx=Canvas, version=1.0.0]

// Define new props
prop('color', { type: 'color', def: '#31ce31' })

draw(ctx) {
    // Here you draw the data with CanvasJS API
}

[INDICATOR name=SMA, version=1.0.0]

// Here you init the script, add props (optionally)

[UPDATE]

// Adds a new point to the Spline overlay data
Spline(sma(close, 20), { color: '#999' })
```

--------------------------------

### Getting Month from Timestamp (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Extracts and returns the month component from a given timestamp in milliseconds. If no timestamp is provided, it uses the current time. Returns a number representing the month.

--------------------------------

### Accessing $core Environment in NavyJS Overlay (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

Demonstrates how to access core chart data, view state, layout information, and mapping functions via the `$core` environment variable within the `draw` function.

```JavaScript
// A fragment of code from Spline.navy:
draw() {
    // ...
    ctx.beginPath()
    const layout = $core.layout
    const data = $core.data // Full dataset
    const view = $core.view // Visible view
    const idx = $props.dataIndex
    for (var i = view.i1, n = view.i2; i <= n; i++) {
        let p = data[i]
        let x = layout.ti2x(p[0], i) // Mapping functions
        let y = layout.value2y(p[idx]) // ...
        ctx.lineTo(x, y)
    }
    ctx.stroke()
}
```

--------------------------------

### Getting Minute from Timestamp (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Extracts and returns the minute component from a given timestamp in milliseconds. If no timestamp is provided, it uses the current time. Returns a number representing the minute.

--------------------------------

### Calculate Parabolic SAR JavaScript

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-std-lib.md

Calculates the Parabolic SAR indicator. Requires start, increment, and maximum values for the acceleration factor. Returns a new time-series representing the SAR values.

```JavaScript
sar(start, inc, max)
```

--------------------------------

### Basic NavyJS Overlay Structure (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

Illustrates the fundamental structure of a NavyJS overlay script, including version comment, OVERLAY tag, property definition, draw function, and legend definition.

```JavaScript
// Navy ~ 0.2-lite // (1)

[OVERLAY name=NewOverlay, ctx=Canvas, verion=0.1.0] // (2)

// Overlay props
prop('color', { type: 'color', def: '#2d7b2f33' }) // (3)

// Draw call
draw(ctx) { // (4)
    const layout = $core.layout
    ctx.fillStyle = $props.color
    ctx.fillRect(0, 0, layout.width, layout.height) // (5)
}

// Legend, defined as pairs [value, color]
legend(x) => [[Math.random(), $props.color]] // (6)
```

--------------------------------

### Updating Main Dataset and Executing Scripts (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/se-client-api.md

Shows how to add new data to the main dataset (`chart.hub.mainOv.data`) and then call `se.uploadAndExec()` to update the Script Engine and re-execute indicator scripts based on the new data.

```js
chart.hub.mainOv.data.unshift(newChunk)
chart.se.uploadAndExec()
```

--------------------------------

### Accessing Layout Object via Core Instance (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/layout-api.md

Shows how to access the layout object from the core instance, typically within an overlay script.

```js
console.log($core.layout)
```

--------------------------------

### Providing Custom Navy Script Source to Chart Constructor (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/scripts-intro.md

Shows how to initialize the NightVision chart with custom .navy script source code provided directly as a string within the scripts array. This is necessary for custom indicators or overlays not present in the default library.

```js
let chart = new NightVision('<root-el>', {
    scripts: [
        `
            [INDICATOR type=RSI]
            // ...
            [UPDATE]
            // ...
        `,
        // ...
    ]
})
```

--------------------------------

### Accessing NightVision MetaHub (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Demonstrates how to instantiate a NightVision chart and access its meta property, which contains meta information about panes and overlays managed by MetaHub.

```js
let chart = new NightVision()
console.log(chart.meta)
```

--------------------------------

### Customizing Overlay Properties and Settings (NavyJS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/indicator-scripts.md

Demonstrates how to define custom properties for an indicator using prop() in the [INDICATOR] section and then apply these properties, along with a custom name and settings (like zIndex), when drawing an overlay in the [UPDATE] section.

```Script Engine Syntax
[INDICATOR name=ProperScript]

prop('color', { type: 'color', def: 'green' })

[UPDATE]

Spline(ema(close, 100), {
 name: 'EMA, 100', // Setting custom name
 props: {
 color: $props.color, // Setting property
 },
 settings: {
 zIndex: 10 // Placing it on top
 }
})
```

--------------------------------

### Accessing DataHub Instance (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/data-hub.md

Demonstrates how to access the DataHub instance from a NightVision chart object. The DataHub instance is available via the `hub` property.

```javascript
let chart = new NightVision()
console.log(chart.hub)
```

--------------------------------

### Accessing Layout Object via Chart Instance (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/layout-api.md

Demonstrates how to access the layout object directly from the main chart instance.

```js
console.log(chart.layout)
```

--------------------------------

### Listening to Component-Specific Events with events.on (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/events.md

Shows how to register an event handler using `events.on`. The method takes a string combining a unique virtual component ID and an event name (`<component-id>:<event-name>`) and a handler function to be executed when the event is emitted for that specific component.

```js
// Your new component
chart.events.on('my-comp:update', event => { /* ... */ })

// Inside NavyJS script
chart.events.on('script-1:trigger-smth', event => { /* ... */ })

// New library
chart.events.on('math-lib:solve-task', event => { /* ... */ })
```

--------------------------------

### Disable Y-Range Auto Extension in Night Vision (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

This example demonstrates how to define a fixed y-range and disable the default 15% auto-extension. Returning `[1, 0, false]` sets the exact range to `[1.0, 0.0]` without any automatic padding.

```js
yRange() => [1, 0, false] // You'll get exactly [1.0, 0.0]
```

--------------------------------

### Setting Overlay Precision (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Demonstrates how to set a custom precision for an overlay by including a precision property within the settings object of the overlay configuration.

```js
// Overlay precision
{
    settings: {
        precision: 1
    }
}
```

--------------------------------

### Custom Y-Range Functions (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/meta-hub.md

Provides examples of yRange functions used to define custom Y-axis ranges. It shows how to set a fixed range, modify the auto-detected range (hi, lo), and disable the default range expansion by returning false as the third element.

```js
// Totally new range
yRange() => [100, 0] // [upper limit, lower limit]

// Modification of the auto-detected range
yRange(hi, lo) => [hi * 1.1, lo * 0.9]

// The library expands the range by 5% (by default)
// To disable this, set the third element to 'false'
yRange(hi, lo) => [hi, lo, false]
```

--------------------------------

### Defining Pre-Sampler for Precision (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/navy-api.md

Defines a sampler function for the precision detection algorithm. Takes a data point `x` and returns an array of numbers to be used for sampling. This helps the library determine the appropriate number of decimal places to display.

```js
// Code from Candles.navy
preSampler(x) => [x[1], x[4]]
```

--------------------------------

### Accessing NightVision Layout Object (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/main-comp/layout.md

Demonstrates how to retrieve the Layout object instance from an initialized NightVision chart object.

```JavaScript
let chart = new NightVision()
console.log(chart.layout)
```

--------------------------------

### Configuring BB Indicator in Pane Object (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/built-in-indicators/BB.md

Demonstrates how to add the Bollinger Bands indicator script to the `scripts` array within a pane configuration object. Includes placeholders for script properties (`props`) and settings (`settings`).

```js
{
    overlays: [], // Non-generated overlays
    scripts: [{
        type: 'BB',
        props: {}, // Script props
        settings: {} // Script settings
    }]
}
```

--------------------------------

### Script Section Structure (NavyJS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/indicator-scripts.md

Illustrates the basic structure of an indicator script in the Script Engine, showing the required [INDICATOR] and [UPDATE] sections, and the optional [POST] section, which define different execution phases.

```Script Engine Syntax
[INDICATOR type=RSI]
// [1]
[UPDATE]
// [2]
[POST]
// [3]
```

--------------------------------

### Reading from shared variable in NavyJS Indicator (Script 2)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/navy-api.md

This snippet shows how a second script can read data previously written to the 'shared' variable by another script. It accesses the 'shared.ts' value and uses it, for example, to draw a spline, enabling communication and data sharing between scripts.

```javascript
// Second script\n[INDICATOR name=Ind2]\n[UPDATE]\nSpline(shared.ts)
```

--------------------------------

### NavyJS Overlay Sampler/Transform Functions (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

Describes functions used for data sampling, precision detection, and mapping data points to OHLC values for features like magnets.

```JavaScript
yRange() // Redefines y-range of overlay
preSampler() // Defines a sampler for precision detection algo
ohlc() // Mapping data point to OHLC value for magnets
```

--------------------------------

### Handling Mouse Move Event in Night Vision (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/navy-api.md

Example implementation of the mousemove event handler within a Night Vision overlay. This function is triggered whenever the mouse cursor moves over the chart grid. The 'event' object contains details about the mouse position and state.

```js
mousemove(event) {
    console.log(event)
}
```

--------------------------------

### Configuring ATR Script in Pane (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/built-in-indicators/ATR.md

Demonstrates how to add the ATR indicator as a script within a pane object's 'scripts' array, showing the basic structure with type, props, and settings properties.

```js
// Pane object:
{
    overlays: [], // Non-generated overlays
    scripts: [{
        type: 'ATR',
        props: {}, // Script props
        settings: {} // Script settings
    }]
}
```

--------------------------------

### NavyJS Overlay UI Functions (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

Specifies functions for defining the overlay's legend appearance (text or HTML) and setting up the value tracker/price label.

```JavaScript
legend() // Defines legend as [value, color] pair
legendHtml() // Defines legend as a custom html  
valueTracker() // Sets price label + price line
```

--------------------------------

### Configuring Pane Object Before Script Execution (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/scripts-intro.md

Demonstrates the structure of a pane object in JavaScript before a script is executed by the NightVision engine. Shows how to specify a script using its type and provide initial props.

```js
// Pane object (BEFORE execution)
{
    overlays: [],
    scripts: [{
        type: 'RSI',
        props: {
            length: 28,
            zIndex: 1
        }
    }]
}
```

--------------------------------

### Defining Default Script Properties (Indicator Definition DSL)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/data-struct/script-object.md

Shows how default properties for an indicator script (like RSI) are defined using a custom DSL syntax. Each `prop` call specifies the property name, type, and default value.

```Indicator Definition DSL
[INDICATOR name=RSI, version=1.0.0]

prop('length', { type: 'integer', def: 14 })
prop('color', { type: 'color', def: '#3399ff' })
prop('prec', { type: 'integer', def: 2 })
prop('zIndex', { type: 'integer', def: 0 })
```

--------------------------------

### PINE vs NavyJS Syntax Comparison (HL2)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/indicator-scripts.md

Compares the syntax for calculating the average of high and low prices (hl2) in PINE Script versus NavyJS, highlighting the need to explicitly create a timeseries using ts() and access historical data with [0] in NavyJS.

```PINE Script
// PINE:
hl2 = (high + low) / 2
```

```JavaScript
// NavyJS:
let hl2 = ts((high[0] + low[0]) / 2)
```

--------------------------------

### Drawing NavyJS Overlay Content (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/navy-api.md

Main drawing handler called on chart data or view updates. Receives the renderer context (`ctx`). This function should be highly optimized for performance, as it can be called frequently. Access grid layout via `$core.layout` and properties via `$props`.

```js
// Example of drawing call
draw(ctx) {
    const layout = $core.layout // Grid layout
    ctx.fillStyle = $props.color
    ctx.fillRect(0, 0, layout.width, layout.height)
}
```

--------------------------------

### Initializing NightVision Chart with Custom Configuration (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/chart-config.md

This snippet demonstrates how to create a new instance of the NightVision chart and provide a custom configuration object during initialization. It shows how to override default settings, such as the maximum zoom level, by passing a 'config' property within the options object.

```javascript
let chart = new NightVision('<root>', {
    config: {
        MAX_ZOOM: 10000,
        // ...
    }
})
```

--------------------------------

### Drawing a Basic Spline Overlay (NavyJS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/indicator-scripts.md

Shows the simplest way to draw an overlay by calling the overlay type function (Spline) with a data source (x), which automatically creates a timeseries for the overlay data.

```JavaScript
Spline(x)
```

--------------------------------

### NavyJS Overlay Keyboard Event Listeners (JavaScript)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/navy-js/overlay-scripts.md

Lists the functions available for responding to keyboard events when the overlay is active.

```JavaScript
keyup() // Called on 'keyup' event
keydown() // Called on 'keydown' event
keypress() // Called on 'keypress' event
```

--------------------------------

### Accessing DataHub via Singleton (JS)

Source: https://github.com/project-nv/night-vision/blob/main/docs/docs/guide/api/chart-api.md

Illustrates an alternative method to access the chart's DataHub instance by importing the DataHub class and using its static instance method with the chart's ID.

```js
import { DataHub } from 'night-vision'
let chart = new NightVision()
let hub = DataHub.instance(chart.id)
```