### Install Dependencies

Source: https://github.com/tanstack/react-charts/blob/beta/docs/README.md

Run this command to install project dependencies.

```sh
yarn install
```

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

### Start Development Server

Source: https://github.com/tanstack/react-charts/blob/beta/docs/README.md

Run this command to start the local development server after configuring environment variables.

```sh
yarn dev
```

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

### Install React Charts with Yarn

Source: https://github.com/tanstack/react-charts/blob/beta/docs/src/pages/docs/installation.md

Use this command to install the beta version of React Charts with Yarn.

```sh
yarn add react-charts@beta
```

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

### Install React Charts with NPM

Source: https://github.com/tanstack/react-charts/blob/beta/docs/src/pages/docs/installation.md

Use this command to install the beta version of React Charts with NPM.

```sh
npm install react-charts@beta --save
```

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

### Install React Charts

Source: https://context7.com/tanstack/react-charts/llms.txt

Install React Charts and its React peer dependencies using npm or yarn. Requires React v16.8+.

```sh
npm install react-charts@beta --save
# or
yarn add react-charts@beta
```

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

### Chart Component Usage

Source: https://github.com/tanstack/react-charts/blob/beta/docs/src/pages/docs/api.md

Demonstrates the basic setup of the Chart component with primary and secondary axes.

```APIDOC
## Chart Component

### Description

The `Chart` component is the main entry point for creating charts. It accepts an `options` object that configures the chart's data, axes, and other properties.

### Usage

```javascript
import { Chart } from 'react-charts'

type MyDatum = { date: Date, stars: number }

function MyChart() {
  const data = [
    {
      label: 'React Charts',
      data: [
        {
          date: new Date(),
          stars: 23467238,
        },
      ],
    },
  ]

  const primaryAxis = React.useMemo(
    (): AxisOptions<MyDatum> => ({
      getValue: datum => datum.date,
    }),
    []
  )

  const secondaryAxes = React.useMemo(
    (): AxisOptions<MyDatum>[] => [
      {
        getValue: datum => datum.stars,
      },
    ],
    []
  )

  return (
    <Chart
      options={{
        data,
        primaryAxis,
        secondaryAxes,
      }}
    />
  )
}
```

### Options Prop

The `options` object accepts the following properties:

- **data**: An array of series, where each series is an array of data objects.
- **primaryAxis**: Configuration for the primary axis.
- **secondaryAxes**: An array of configurations for secondary axes.
```

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

### Pipeline Initialization Example

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Illustrates the concept of a pipeline in Lunr, which maintains an ordered list of functions to process tokens. Pipelines are used for indexing and querying.

```javascript
/*
 * lunr.Pipeline
 * Copyright (C) 2020 Oliver Nightingale
 */

/*
 * lunr.Pipelines maintain an ordered list of functions to be applied to all
 * tokens in documents entering the search index and queries being ran against
 * the index.
 *
 * An instance of lunr.Index created with the lunr shortcut will contain a
 * pipeline with a stop word filter and an English language stemmer. Extra
 * functions can be added before or after either of these functions or these
 * default functions can be removed.
 *
 * When run the pipeline will call each function in turn, passing a token, the
 * index of that token in the original list of all tokens and finally a list of
 * all the original tokens.
 *
 * The output of functions in the pipeline will be passed to the next function
 * in the pipeline. To exclude a token from entering the index the function
 * should return undefined, the rest of the pipeline will not be called with
 * this token.
 *
 * For serialisation of pipelines to work, all functions used in an instance of
 * a pipeline should be registered with lunr.Pipeline. Registered functions can
 * then be loaded. If trying to load a serialised pipeline that uses functions
 * that are not registered an error will be thrown.
 *
 * If not planning on serialising the pipeline then registering pipeline functions
 * is
```

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

### Builder.prototype.add

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Adds a document to the index. Before adding fields to the index the index should have been fully setup.

```APIDOC
## Builder.prototype.add

### Description
Adds a document to the index.

Before adding fields to the index the index should have been fully setup, with the document ref and all fields to index already having been specified.

The document must have a field name as specified by the ref (by default this is 'id') and it should have all fields defined for indexing, though null or undefined values will not cause errors.

Entire documents can be boosted at build time. Applying a boost to a document indicates that this document should rank higher in search results than other documents.

### Parameters
#### Path Parameters
- **doc** (object) - Required - The document to add to the index.
- **attributes** (object) - Optional - Optional attributes associated with this document.
  - **boost** (number) - Optional - Boost applied to all terms within this document. Defaults to 1.
```

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

### Example: Query term with leading and trailing wildcard

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Shows how to apply both leading and trailing wildcards to a query term using bitwise OR.

```javascript
query.term('foo',{
 wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING
})
```

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

### Example: Query term with trailing wildcard

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Demonstrates how to append a wildcard to a query term using the wildcard constant.

```javascript
query.term('foo', { wildcard: lunr.Query.wildcard.TRAILING })
```

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

### Example: Query term with required presence

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Illustrates how to set a query term to have a required presence in matching documents.

```javascript
query.term('foo', { presence: lunr.Query.presence.REQUIRED })
```

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

### Basic Line Chart with React Charts

Source: https://context7.com/tanstack/react-charts/llms.txt

Example of a basic line chart using the `<Chart>` component. Ensure primaryAxis and secondaryAxes are stable references using React.useMemo.

```tsx
import React from 'react'
import { Chart } from 'react-charts'

type DailyStars = {
  date: Date
  stars: number
}

const data = [
  {
    label: 'React Charts',
    data: [
      { date: new Date('2023-01-01'), stars: 5000 },
      { date: new Date('2023-02-01'), stars: 7200 },
      { date: new Date('2023-03-01'), stars: 9800 },
    ],
  },
  {
    label: 'React Query',
    data: [
      { date: new Date('2023-01-01'), stars: 22000 },
      { date: new Date('2023-02-01'), stars: 25000 },
      { date: new Date('2023-03-01'), stars: 28500 },
    ],
  },
]

function MyLineChart() {
  const primaryAxis = React.useMemo(
    (): AxisOptions<DailyStars> => ({
      getValue: datum => datum.date,
      // scaleType auto-inferred as 'time' from Date values
    }),
    []
  )

  const secondaryAxes = React.useMemo(
    (): AxisOptions<DailyStars>[] => [
      {
        getValue: datum => datum.stars,
        // scaleType auto-inferred as 'linear' from number values
      },
    ],
    []
  )

  return (
    <div style={{ width: '600px', height: '300px' }}>
      <Chart
        options={{
          data,
          primaryAxis,
          secondaryAxes,
        }}
      />
    </div>
  )
}
```

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

### Initialize QueryLexer

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Constructor for the query lexer. Initializes lexemes, input string, length, position, start, and escape character positions.

```javascript
lunr.QueryLexer = function (str) {
 this.lexemes = []
 this.str = str
 this.length = str.length
 this.pos = 0
 this.start = 0
 this.escapeCharPositions = []
}
```

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

### Render a Basic Line Chart

Source: https://github.com/tanstack/react-charts/blob/beta/docs/src/pages/docs/quick-start.md

Use this snippet to render a basic line chart. Ensure you have the 'react-charts' library installed and imported. The chart will automatically adjust to its parent container's dimensions.

```javascript
import React from 'react'
import { Chart } from 'react-charts'

function MyChart() {
  const data = React.useMemo(
    () => [
      {
        label: 'Series 1',
        data: [
          [0, 1],
          [1, 2],
          [2, 4],
          [3, 2],
          [4, 7],
        ],
      },
      {
        label: 'Series 2',
        data: [
          [0, 3],
          [1, 1],
          [2, 5],
          [3, 6],
          [4, 4],
        ],
      },
    ],
    []
  )

  const axes = React.useMemo(
    () => [
      { primary: true, type: 'linear', position: 'bottom' },
      { type: 'linear', position: 'left' },
    ],
    []
  )

  const lineChart = (
    // A react-chart hyper-responsively and continuously fills the available
    // space of its parent element automatically
    <div
      style={{
        width: '400px',
        height: '300px',
      }}
    >
      <Chart data={data} axes={axes} />
    </div>
  )
}
```

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

### Control Series Rendering Order with `getSeriesOrder`

Source: https://context7.com/tanstack/react-charts/llms.txt

Use the `getSeriesOrder` callback to define the z-index and rendering order of chart series. It receives an array of `Series` and must return them in the desired order. This example sorts series by their index in ascending order.

```tsx
import React from 'react'
import { AxisOptions, Chart, Series } from 'react-charts'

type Datum = { x: string; y: number }

function OrderedChart({ data }: { data: { label: string; data: Datum[] }[] }) {
  const primaryAxis = React.useMemo(
    (): AxisOptions<Datum> => ({ getValue: d => d.x }),
    []
  )
  const secondaryAxes = React.useMemo(
    (): AxisOptions<Datum>[] => [{ getValue: d => d.y, elementType: 'bar' }],
    []
  )

  return (
    <div style={{ width: '600px', height: '300px' }}>
      <Chart
        options={{
          data,
          primaryAxis,
          secondaryAxes,
          // Render series with highest index on top (reversed default)
          getSeriesOrder: (series: Series<Datum>[]) =>
            [...series].sort((a, b) => a.index - b.index),
        }}
      />
    </div>
  )
}
```

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

### Enable Brush Selection for Range Selection

Source: https://context7.com/tanstack/react-charts/llms.txt

Implement a drag-to-select brush overlay on the chart to capture a range selection on the primary axis. The `onSelect` callback provides the start and end of the selection. This example displays the selected date range.

```tsx
import React from 'react'
import { AxisOptions, Chart } from 'react-charts'

type Datum = { date: Date; value: number }

function BrushChart({ data }: { data: { label: string; data: Datum[] }[] }) {
  const [selection, setSelection] = React.useState<{ start: unknown; end: unknown } | null>(null)

  const primaryAxis = React.useMemo(
    (): AxisOptions<Datum> => ({ getValue: d => d.date }),
    []
  )
  const secondaryAxes = React.useMemo(
    (): AxisOptions<Datum>[] => [{ getValue: d => d.value }],
    []
  )

  return (
    <div>
      {selection && (
        <p>
          Selected: {String(selection.start)} → {String(selection.end)}
        </p>
      )}
      <div style={{ width: '600px', height: '300px' }}>
        <Chart
          options={{
            data,
            primaryAxis,
            secondaryAxes,
            brush: {
              style: { fill: 'rgba(100, 150, 255, 0.2)', stroke: '#6496ff' },
              onSelect: ({ start, end }) => setSelection({ start, end }),
            },
          }}
        />
      </div>
    </div>
  )
}
```

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

### Application Initialization

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Initializes the main Application instance and exposes it on the window object as 'app'. This is the entry point for the application's core logic.

```typescript
var app = new Application();
Object.defineProperty(window, "app", { value: app });
```

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

### Emit Lexeme

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Emits a lexeme with its type, string value, start, and end positions. Resets the start position for the next lexeme.

```javascript
lunr.QueryLexer.prototype.emit = function (type) {
 this.lexemes.push({
 type: type,
 str: this.sliceString(),
 start: this.start,
 end: this.pos
 })

 this.start = this.pos
}
```

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

### Configure Environment Variables

Source: https://github.com/tanstack/react-charts/blob/beta/docs/README.md

Update your .env and .env.build files with your Notion token and blog index ID. These are required for local development.

```diff
-NOTION_TOKEN=XXXX
+NOTION_TOKEN=<YOUR_TOKEN>
-BLOG_INDEX_ID=XXXXX
+BLOG_INDEX_ID=<YOUR_BLOG_INDEX_ID>
```

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

### Initialize Application Components

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Creates and initializes all components within the document body. Ensures components are only instantiated once.

```javascript
var Application = /** @class */ (function () {
 function Application() {
 this.createComponents(document.body);
 }
 Application.prototype.createComponents = function (context) {
 components.forEach(function (c) {
 context.querySelectorAll(c.selector).forEach(function (el) {
 if (!el.dataset.hasInstance) {
 new c.constructor({ el: el });
 el.dataset.hasInstance = String(true);
 }
 });
 });
 };
 return Application;
}());
```

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

### Initialize Search Functionality

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Initializes the search functionality for the documentation. It sets up event listeners for user input and handles search result display. Requires the 'lunr' library and 'debounce' utility.

```typescript
eval( "\n/__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"initSearch\": () => /* binding */ initSearch\n/* harmony export */ });\n/* harmony import */ var _utils_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/debounce */ "./default/assets/js/src/typedoc/utils/debounce.ts");\n/* harmony import */ var lunr__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lunr */ "../node_modules/lunr/lunr.js");\n/* harmony import */ var lunr__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lunr__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction initSearch() {\n var searchEl = document.getElementById(\"tsd-search\");\n if (!searchEl)\n return;\n var searchScript = document.getElementById(\"search-script\");\n searchEl.classList.add(\"loading\");\n if (searchScript) {\n searchScript.addEventListener(\"error\", function () {\n searchEl.classList.remove(\"loading\");\n searchEl.classList.add(\"failure\");\n });\n searchScript.addEventListener(\"load\", function () {\n searchEl.classList.remove(\"loading\");\n searchEl.classList.add(\"ready\");\n });\n if (window.searchData) {\n searchEl.classList.remove(\"loading\");\n }\n }\n var field = document.querySelector(\"#tsd-search-field\");\n var results = document.querySelector(\".results\");\n if (!field || !results) {\n throw new Error(\"The input field or the result list wrapper was not found\");\n }\n var resultClicked = false;\n results.addEventListener(\"mousedown\", function () { return (resultClicked = true); });\n results.addEventListener(\"mouseup\", function () {\n resultClicked = false;\n searchEl.classList.remove(\"has-focus\");\n });\n field.addEventListener(\"focus\", function () { return searchEl.classList.add(\"has-focus\"); });\n field.addEventListener(\"blur\", function () {\n if (!resultClicked) {\n resultClicked = false;\n searchEl.classList.remove(\"has-focus\");\n }\n });\n var state = {\n base: searchEl.dataset.base + \"/\",\n };\n bindEvents(searchEl, results, field, state);\n}\nfunction bindEvents(searchEl, results, field, state) {\n field.addEventListener(\"input\", (0,_utils_debounce__WEBPACK_IMPORTED_MODULE_0__.debounce)(function () {\n updateResults(searchEl, results, field, state);\n }, 200));\n var preventPress = false;\n field.addEventListener(\"keydown\", function (e) {\n preventPress = true;\n if (e.key == \"Enter\") {\n gotoCurrentResult(results, field);\n }\n else if (e.key == \"Escape\") {\n field.blur();\n }\n else if (e.key == \"ArrowUp\") {\n setCurrentResult(results, -1);\n }\n else if (e.key === \"ArrowDown\") {\n setCurrentResult(results, 1);\n }\n else {\n preventPress = false;\n }\n });\n field.addEventListener(\"keypress\", function (e) {\n if (preventPress)\n e.preventDefault();\n });\n /**\n * Start searching by pressing slash.\n */\n document.body.addEventListener(\"keydown\", function (e) {\n if (e.altKey || e.ctrlKey || e.metaKey)\n return;\n if (!field.matches(\":focus\") && e.key === \"/\") {\n field.focus();\n e.preventDefault();\n }\n });\n}\nfunction checkIndex(state, searchEl) {\n if (state.index)\n return;\n if (window.searchData) {\n searchEl.classList.remove(\"loading\");\n searchEl.classList.add(\"ready\");\n state.data = window.searchData;\n state.index = lunr__WEBPACK_IMPORTED_MODULE_1__.Index.load(window.searchData.index);\n }\n}\nfunction updateResults(searchEl, results, query, state) {\n checkIndex(state, searchEl);\n // Don\'t clear results if loading state is not ready,\n // because loading or error message can be removed.\n if (!state.index || !state.data)\n return;\n results.textContent = \"\";\n var searchText = query.value.trim();\n // Perform a wildcard search\n var res = state.index.search(\"*\" + searchText + \"*\");\n for (var i = 0, c = Math.min(10, res.length); i < c; i++) {\n var row = state.data.rows[Number(res[i].ref)];\n // Bold the matched part of the query in the search results\n var name_1 = boldMatches(row.name, searchText);\n if (row.parent) {\n name_1 = \"<span class=\\\"parent\\\">\" + boldMatches(row.parent, searchText) + \".</span>\" + name_1;\n }\n var item = document.createElement(\"li\");\n item.classList.value = row.classes;\n var anch
```

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

### Bootstrap Application Components

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Initializes search, registers various components like MenuHighlight, Signature, Toggle, and Filter. It also creates an Application instance and exposes it globally.

```typescript
import { Application, registerComponent } from "./typedoc/Application";
import { MenuHighlight } from "./typedoc/components/MenuHighlight";
import { Search, initSearch } from "./typedoc/components/Search";
import { Signature } from "./typedoc/components/Signature";
import { Toggle } from "./typedoc/components/Toggle";
import { Filter } from "./typedoc/components/Filter";
import "../../css/main.sass";







initSearch();
registerComponent(MenuHighlight, ".menu-highlight");
registerComponent(Signature, ".tsd-signatures");
registerComponent(Toggle, "a[data-toggle]");
if (Filter.isSupported()) {
 registerComponent(Filter, "#tsd-filter");
}
else {
 document.documentElement.classList.add("no-filter");
}
var app = new Application();
Object.defineProperty(window, "app", { value: app });


//# sourceURL=webpack:///./default/assets/js/src/bootstrap.ts?
```

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

### Initialize Search Functionality

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Initializes the search functionality for the documentation. It sets up event listeners for user input, handles search queries, and displays results. This script is typically loaded when the documentation page loads.

```typescript
eval( '\n/__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "initSearch": () => /* binding */ initSearch\n/* harmony export */ });\n/* harmony import */ var _utils_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/debounce */ "./default/assets/js/src/typedoc/utils/debounce.ts");\n/* harmony import */ var lunr__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lunr */ "../node_modules/lunr/lunr.js");\n/* harmony import */ var lunr__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lunr__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction initSearch() {\n var searchEl = document.getElementById("tsd-search");\n if (!searchEl)\n return;\n var searchScript = document.getElementById("search-script");\n searchEl.classList.add("loading");\n if (searchScript) {\n searchScript.addEventListener("error", function () {\n searchEl.classList.remove("loading");\n searchEl.classList.add("failure");\n });\n searchScript.addEventListener("load", function () {\n searchEl.classList.remove("loading");\n searchEl.classList.add("ready");\n });\n if (window.searchData) {\n searchEl.classList.remove("loading");\n }\n }\n var field = document.querySelector("#tsd-search-field");\n var results = document.querySelector(".results");\n if (!field || !results) {\n throw new Error("The input field or the result list wrapper was not found");\n }\n var resultClicked = false;\n results.addEventListener("mousedown", function () { return (resultClicked = true); });\n results.addEventListener("mouseup", function () {\n resultClicked = false;\n searchEl.classList.remove("has-focus");\n });\n field.addEventListener("focus", function () { return searchEl.classList.add("has-focus"); });\n field.addEventListener("blur", function () {\n if (!resultClicked) {\n resultClicked = false;\n searchEl.classList.remove("has-focus");\n }\n });\n var state = {\n base: searchEl.dataset.base + "/",\n };\n bindEvents(searchEl, results, field, state);\n}\nfunction bindEvents(searchEl, results, field, state) {\n field.addEventListener("input", (0,_utils_debounce__WEBPACK_IMPORTED_MODULE_0__.debounce)(function () {\n updateResults(searchEl, results, field, state);\n }, 200));\n var preventPress = false;\n field.addEventListener("keydown", function (e) {\n preventPress = true;\n if (e.key == "Enter") {\n gotoCurrentResult(results, field);\n }\n else if (e.key == "Escape") {\n field.blur();\n }\n else if (e.key == "ArrowUp") {\n setCurrentResult(results, -1);\n }\n else if (e.key === "ArrowDown") {\n setCurrentResult(results, 1);\n }\n else {\n preventPress = false;\n }\n });\n field.addEventListener("keypress", function (e) {\n if (preventPress)\n e.preventDefault();\n });\n /**\n * Start searching by pressing slash.\n */\n document.body.addEventListener("keydown", function (e) {\n if (e.altKey || e.ctrlKey || e.metaKey)\n return;\n if (!field.matches(":focus") && e.key === "/") {\n field.focus();\n e.preventDefault();\n }\n });\n}\nfunction checkIndex(state, searchEl) {\n if (state.index)\n return;\n if (window.searchData) {\n searchEl.classList.remove("loading");\n searchEl.classList.add("ready");\n state.data = window.searchData;\n state.index = lunr__WEBPACK_IMPORTED_MODULE_1__.Index.load(window.searchData.index);\n }\n}\nfunction updateResults(searchEl, results, query, state) {\n checkIndex(state, searchEl);\n // Don't clear results if loading state is not ready,\n // because loading or error message can be removed.\n if (!state.index || !state.data)\n return;\n results.textContent = "";\n var searchText = query.value.trim();\n // Perform a wildcard search\n var res = state.index.search("*" + searchText + "*");\n for (var i = 0, c = Math.min(10, res.length); i < c; i++) {\n var row = state.data.rows[Number(res[i].ref)];\n // Bold the matched part of the query in the search results\n var name_1 = boldMatches(row.name, searchText);\n if (row.parent) {\n name_1 = "<span class=\"parent\">" + boldMatches(row.parent, searchText) + ".</span>" + name_1;\n }\n var item = document.createElement("li");\n item.classList.value = row.classes;\n var anch
```

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

### Data Model with Primary and Secondary Properties

Source: https://github.com/tanstack/react-charts/blob/beta/docs/src/pages/docs/api.md

An example of the data shape where each datum has 'primary' and 'secondary' properties, which are used by the axes.

```javascript
const data = [
  {
    label: 'Series 1',
    data: [
      {
        primary: '2022-02-03T00:00:00.000Z',
        likes: 130,
      },
      {
        primary: '2022-03-03T00:00:00.000Z',
        likes: 150,
      },
    ],
  },
  {
    label: 'Series 2',
    data: [
      {
        primary: '2022-04-03T00:00:00.000Z',
        likes: 200,
      },
      {
        primary: '2022-05-03T00:00:00.000Z',
        likes: 250,
      },
    ],
  },
]
```

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

### Ignore Current Position

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Ignores the current character by advancing the position and resetting the start position. Used for whitespace or ignored characters.

```javascript
lunr.QueryLexer.prototype.ignore = function () {
 if (this.start == this.pos) {
 this.pos += 1
 }

 this.start = this.pos
}
```

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

### lunr.Index Constructor

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Constructs a new lunr.Index. Use lunr.Builder to create indexes or lunr.Index.load to load existing ones.

```javascript
lunr.Index = function (attrs) {
 this.invertedIndex = attrs.invertedIndex
 this.fieldVectors = attrs.fieldVectors
 this.tokenSet = attrs.tokenSet
 this.fields = attrs.fields
 this.pipeline = attrs.pipeline
}
```

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

### Define QueryParseError

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Constructor for a query parse error. Stores the error message and the start and end positions of the error in the query string.

```javascript
lunr.QueryParseError = function (message, start, end) {
 this.name = "QueryParseError"
 this.message = message
 this.start = start
 this.end = end
}

lunr.QueryParseError.prototype = new Error
```

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

### Initialize Search Component

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Initializes the search functionality for the documentation. This is typically called during the application bootstrap process.

```typescript
initSearch();
```

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

### brush

Source: https://context7.com/tanstack/react-charts/llms.txt

Enables a drag-to-select brush overlay on the chart, allowing users to capture a range selection on the primary axis. The `onSelect` callback is invoked with the start and end of the selection.

```APIDOC
## Brush Selection — `brush`

Enable a drag-to-select brush overlay on the chart to capture a range selection on the primary axis.

```tsx
import React from 'react'
import { AxisOptions, Chart } from 'react-charts'

type Datum = { date: Date; value: number }

function BrushChart({ data }: { data: { label: string; data: Datum[] }[] }) {
  const [selection, setSelection] = React.useState<{ start: unknown; end: unknown } | null>(null)

  const primaryAxis = React.useMemo(
    (): AxisOptions<Datum> => ({ getValue: d => d.date }),
    []
  )
  const secondaryAxes = React.useMemo(
    (): AxisOptions<Datum>[] => [{ getValue: d => d.value }],
    []
  )

  return (
    <div>
      {selection && (
        <p>
          Selected: {String(selection.start)} → {String(selection.end)}
        </p>
      )}
      <div style={{ width: '600px', height: '300px' }}>
        <Chart
          options={{
            data,
            primaryAxis,
            secondaryAxes,
            brush: {
              style: { fill: 'rgba(100, 150, 255, 0.2)', stroke: '#6496ff' },
              onSelect: ({ start, end }) => setSelection({ start, end }),
            },
          }}
        />
      </div>
    </div>
  )
}
```
```

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

### getOptions

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Retrieves the required chart options, ensuring all necessary configurations are present.

```APIDOC
## getOptions

### Description
Retrieves the required chart options, ensuring all necessary configurations are present.

### Signature
() => RequiredChartOptions<TDatum>

### Returns
- **RequiredChartOptions**: [RequiredChartOptions](modules.html#requiredchartoptions)<TDatum>
```

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

### Configuring Secondary Axis Element Type

Source: https://github.com/tanstack/react-charts/blob/beta/docs/src/pages/docs/api.md

Sets the element type for a secondary axis to 'bar'. This example demonstrates how to specify the visual representation for data points on the secondary axis.

```javascript
const secondaryAxes = React.useMemo(
  (): AxisOptions<MyDatum>[] => [
    {
      getValue: datum => datum.stars,
      elementType: 'bar',
    },
  ],
  []
)
```

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

### Initialize MatchData

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Creates a new instance of lunr.MatchData to store metadata about a matching document for a specific term and field. Metadata is cloned to prevent mutation.

```javascript
lunr.MatchData = function (term, field, metadata) {
 var clonedMetadata = Object.create(null),
 metadataKeys = Object.keys(metadata || {})

 // Cloning the metadata to prevent the original
 // being mutated during match data combination.
 // Metadata is kept in an array within the inverted
 // index so cloning the data can be done with
 // Array#slice
 for (var i = 0; i < metadataKeys.length; i++) {
 var key = metadataKeys[i]
 clonedMetadata[key] = metadata[key].slice()
 }

 this.metadata = Object.create(null)

 if (term !== undefined) {
 this.metadata[term] = Object.create(null)
 this.metadata[term][field] = clonedMetadata
 }
}
```

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

### lunr.Builder.prototype.use

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Applies a plugin to the index builder. Plugins are functions that customize or extend the index building behavior.

```APIDOC
/**
 * Applies a plugin to the index builder.
 *
 * A plugin is a function that is called with the index builder as its context.
 * Plugins can be used to customise or extend the behaviour of the index
 * in some way. A plugin is just a function, that encapsulated the custom
 * behaviour that should be applied when building the index.
 *
 * The plugin function will be called with the index builder as its argument, additional
 * arguments can also be passed when calling use. The function will be called
 * with the index builder as its context.
 *
 * @param {Function} plugin The plugin to apply.
 */
lunr.Builder.prototype.use = function (fn) {
  var args = Array.prototype.slice.call(arguments, 1)
  args.unshift(this)
  fn.apply(this, args)
}
```

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

### Application Class for TypeDoc

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

The Application class is responsible for creating and managing components within the TypeDoc application. It initializes components based on their selectors and ensures each element only gets one instance.

```typescript
var Application = /** @class */ (function () {
    /**
     * Create a new Application instance.
     */
    function Application() {
        this.createComponents(document.body);
    }
    /**
     * Create all components beneath the given jQuery element.
     */
    Application.prototype.createComponents = function (context) {
        components.forEach(function (c) {
            context.querySelectorAll(c.selector).forEach(function (el) {
                if (!el.dataset.hasInstance) {
                    new c.constructor({ el: el });
                    el.dataset.hasInstance = String(true);
                }
            });
        });
    };
    return Application;
}());
```

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

### lunr.Set constructor and static properties

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Initializes a new lunr.Set. It provides static 'complete' and 'empty' sets for common set operations.

```javascript
lunr.Set = function (elements) {\n this.elements = Object.create(null)\n
 if (elements) {\n this.length = elements.length

 for (var i = 0; i < this.length; i++) {
 this.elements[elements[i]] = true
 }
 } else {
 this.length = 0
 }
}

lunr.Set.complete = {
 intersect: function (other) {
 return other
 },

 union: function () {
 return this
 },

 contains: function () {
 return true
 }
}

lunr.Set.empty = {
 intersect: function () {
 return this
 },

 union: function (other) {
 return other
 },

 contains: function () {
 return false
 }
}
```

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

### Multiple Secondary Axes

Source: https://context7.com/tanstack/react-charts/llms.txt

Assign series to different secondary axes by setting `secondaryAxisId` on series objects and providing corresponding axes with matching `id` values. This example mixes 'bar' and 'line' element types.

```tsx
import React from 'react'
import { AxisOptions, Chart } from 'react-charts'

type Datum = { primary: Date; secondary: number }

function MultipleAxesChart({
  data,
}: { data: { label: string; data: Datum[]; secondaryAxisId?: string }[] }) {
  // Assign first 3 series to default axis, remaining to axis "2"
  data.forEach((d, i) => {
    d.secondaryAxisId = i > 2 ? '2' : undefined
  })

  const primaryAxis = React.useMemo(
    (): AxisOptions<Datum> => ({
      getValue: datum => datum.primary,
      padBandRange: true,
    }),
    []
  )

  const secondaryAxes = React.useMemo(
    (): AxisOptions<Datum>[] => [
      {
        getValue: datum => datum.secondary,
        elementType: 'bar',
        // default axis (no id needed, or id: undefined)
      },
      {
        id: '2',
        getValue: datum => datum.secondary,
        elementType: 'line',
      },
    ],
    []
  )

  return (
    <div style={{ width: '700px', height: '400px' }}>
      <Chart options={{ data, primaryAxis, secondaryAxes }} />
    </div>
  )
}
```

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

### lunr.Builder.prototype.build

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Completes the indexing process by building the lunr.Index. This method should be called only after all documents have been added.

```APIDOC
/**
 * Builds the index, creating an instance of lunr.Index.
 *
 * This completes the indexing process and should only be called
 * once all documents have been added to the index.
 *
 * @returns {lunr.Index}
 */
lunr.Builder.prototype.build = function () {
  this.calculateAverageFieldLengths()
  this.createFieldVectors()
  this.createTokenSet()

  return new lunr.Index({
    invertedIndex: this.invertedIndex,
    fieldVectors: this.fieldVectors,
    tokenSet: this.tokenSet,
    fields: Object.keys(this._fields),
    pipeline: this.searchPipeline
  })
}
```

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

### lunr.Index~QueryString Type Definition and Examples

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Defines the query string syntax for lunr.Index, including single terms, multiple terms, field scoping, boosts, edit distances, and presence modifiers. Special characters can be escaped with a backslash.

```javascript
/**
 * Although lunr provides the ability to create queries using lunr.Query, it also provides a simple
 * query language which itself is parsed into an instance of lunr.Query.
 *
 * For programmatically building queries it is advised to directly use lunr.Query, the query language
 * is best used for human entered text rather than program generated text.
 *
 * At its simplest queries can just be a single term, e.g. `hello`, multiple terms are also supported
 * and will be combined with OR, e.g `hello world` will match documents that contain either 'hello'
 * or 'world', though those that contain both will rank higher in the results.
 *
 * Wildcards can be included in terms to match one or more unspecified characters, these wildcards can
 * be inserted anywhere within the term, and more than one wildcard can exist in a single term. Adding
 * wildcards will increase the number of documents that will be found but can also have a negative
 * impact on query performance, especially with wildcards at the beginning of a term.
 *
 * Terms can be restricted to specific fields, e.g. `title:hello`, only documents with the term
 * hello in the title field will match this query. Using a field not present in the index will lead
 * to an error being thrown.
 *
 * Modifiers can also be added to terms, lunr supports edit distance and boost modifiers on terms. A term
 * boost will make documents matching that term score higher, e.g. `foo^5`. Edit distance is also supported
 * to provide fuzzy matching, e.g. 'hello~2' will match documents with hello with an edit distance of 2.
 * Avoid large values for edit distance to improve query performance.
 *
 * Each term also supports a presence modifier. By default a term's presence in document is optional, however
 * this can be changed to either required or prohibited. For a term's presence to be required in a document the
 * term should be prefixed with a '+', e.g. `+foo bar` is a search for documents that must contain 'foo' and
 * optionally contain 'bar'. Conversely a leading '-' sets the terms presence to prohibited, i.e. it must not
 * appear in a document, e.g. `-foo bar` is a search for documents that do not contain 'foo' but may contain 'bar'.
 *
 * To escape special characters the backslash character '\\' can be used, this allows searches to include
 * characters that would normally be considered modifiers, e.g. `foo\\~2` will search for a term "foo~2" instead
 * of attempting to apply a boost of 2 to the search term "foo".
 *
 * @typedef {string} lunr.Index~QueryString
 * @example <caption>Simple single term query</caption>
 * hello
 * @example <caption>Multiple term query</caption>
 * hello world
 * @example <caption>term scoped to a field</caption>
 * title:hello
 * @example <caption>term with a boost of 10</caption>
 * hello^10
 * @example <caption>term with an edit distance of 2</caption>
 * hello~2
 * @example <caption>terms with presence modifiers</caption>
 * -foo +bar baz
 */
```

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

### TokenSet Builder Initialization

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Initializes a new TokenSet builder with a previous word, root TokenSet, and collections for unchecked and minimized nodes.

```javascript
lunr.TokenSet.Builder = function () {
  this.previousWord = ""
  this.root = new lunr.TokenSet
  this.uncheckedNodes = []
  this.minimizedNodes = {}
}
```

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

### Builder Methods

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/modules.html

Methods for configuring and managing the index builder.

```APIDOC
## Builder Methods

### `ref(ref: string)`

Sets the document field used as the document reference. Every document must have this field. The type of this field in the document should be a string, if it is not a string it will be coerced into a string by calling toString. The default ref is 'id'. The ref should not be changed during indexing, it should be set before any documents are added to the index. Changing it during indexing can lead to inconsistent results.

### `field(fieldName: string, attributes?: { boost?: number, extractor?: function })`

Adds a field to the list of document fields that will be indexed. Every document being indexed should have this field. Null values for this field in indexed documents will not cause errors but will limit the chance of that document being retrieved by searches. All fields should be added before adding documents to the index. Adding fields after a document has been indexed will have no effect on already indexed documents. Fields can be boosted at build time. This allows terms within that field to have more importance when ranking search results. Use a field boost to specify that matches within one field are more important than other fields.

Throws: RangeError if fieldName contains unsupported characters '/'.

### `b(number: number)`

A parameter to tune the amount of field length normalisation that is applied when calculating relevance scores. A value of 0 will completely disable any normalisation and a value of 1 will fully normalise field lengths. The default is 0.75. Values of b will be clamped to the range 0 - 1.

### `k1(number: number)`

A parameter that controls the speed at which a rise in term frequency results in term frequency saturation. The default value is 1.2. Setting this to a higher value will give slower saturation levels, a lower value will result in quicker saturation.

### `add(doc: object, attributes?: { boost?: number })`

Adds a document to the index. Before adding fields to the index the index should have been fully setup, with the document ref and all fields to index already having been specified. The document must have a field name as specified by the ref (by default this is 'id') and it should have all fields defined for indexing, though null or undefined values will not cause errors. Entire documents can be boosted at build time. Applying a boost to a document indicates that this document should rank higher in search results than other documents.
```

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

### lunr.MatchData Constructor

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Represents and collects metadata about a matching document. An instance is returned as part of every lunr.Index~Result.

```APIDOC
/**
 * Contains and collects metadata about a matching document.
 * A single instance of lunr.MatchData is returned as part of every
 * lunr.Index~Result.
 *
 * @constructor
 * @param {string} term - The term this match data is associated with
 * @param {string} field - The field in which the term was found
 * @param {object} metadata - The metadata recorded about this term in this field
 * @property {object} metadata - A cloned collection of metadata associated with this document.
 * @see {@link lunr.Index~Result}
 */
lunr.MatchData = function (term, field, metadata) {
  var clonedMetadata = Object.create(null),
    metadataKeys = Object.keys(metadata || {})

  // Cloning the metadata to prevent the original
  // being mutated during match data combination.
  // Metadata is kept in an array within the inverted
  // index so cloning the data can be done with
  // Array#slice
  for (var i = 0; i < metadataKeys.length; i++) {
    var key = metadataKeys[i]
    clonedMetadata[key] = metadata[key].slice()
  }

  this.metadata = Object.create(null)

  if (term !== undefined) {
    this.metadata[term] = Object.create(null)
    this.metadata[term][field] = clonedMetadata
  }
}
```

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

### Build Lunr Index

Source: https://github.com/tanstack/react-charts/blob/beta/typedocs/index.html

Completes the indexing process by creating an instance of lunr.Index. Should only be called after all documents have been added.

```javascript
lunr.Builder.prototype.build = function () {
  this.calculateAverageFieldLengths()
  this.createFieldVectors()
  this.createTokenSet()

  return new lunr.Index({
    invertedIndex: this.invertedIndex,
    fieldVectors: this.fieldVectors,
    tokenSet: this.tokenSet,
    fields: Object.keys(this._fields),
    pipeline: this.searchPipeline
  })
}
```