### Install @splunk/visualizations Package

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Provides the command to install the `@splunk/visualizations` package after its peer dependencies have been installed.

```bash
npm install @splunk/visualizations
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

After generating your Splunk application, install all necessary project dependencies using the yarn setup command. This ensures all packages are correctly linked and ready for development.

```bash
yarn setup
```

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

### Install @splunk/ui-utils

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Shows how to install the `@splunk/ui-utils` package, which contains a library of common UI utilities for Splunk applications.

```bash
npm install @splunk/ui-utils
```

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

### DataSource setup and teardown

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Details on overriding `setup` and `teardown` methods for Splunk DataSource modules.

```APIDOC
## `setup` and `teardown`

The `setup` and `teardown` methods can be called only once per data source. Override these functions to run bootstrap cleanup such as establishing and destroying connections.

For example:

```javascript
import { DataSource } from '@splunk/datasources';

class MyDataSource extends DataSource {
    setup() {
        this.searchJob = this.createSearchJob();
    }

    teardown() {
        this.searchJob.destroy();
        delete this.searchJob;
    }

    createSearchJob() {
        // ...
    }
}
```
```

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

### Install @splunk/webpack-configs

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Instructions for installing the @splunk/webpack-configs package and its peer dependencies.

```APIDOC
## Install @splunk/webpack-configs

### Description

Install the package and its dependencies.

### Steps

1. **Install peer dependencies:**
   ```bash
   npm install --save-dev @babel/core@^7 babel-loader@^8 webpack@^4
   ```

2. **Install the package:**
   ```bash
   npm install --save-dev @splunk/webpack-configs
   ```
```

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

### Install @splunk/search-job with npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/search-job package, which simplifies the creation and access of Splunk search jobs.

```bash
npm install @splunk/search-job
```

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

### Install Project Dependencies

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs all necessary project dependencies using Yarn. This command should be run after creating a new Splunk app project.

```bash
$ yarn setup
```

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

### Install @splunk/babel-preset Package

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/babel-preset package as a development dependency in your project. This should be done after installing peer dependencies.

```bash
npm install --save-dev @splunk/babel-preset
```

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

### Install @splunk/visualizations Peer Dependencies

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Lists the required peer dependencies for installing the `@splunk/visualizations` package, including React, ReactDOM, styled-components, and @splunk/visualization-context.

```bash
npm install react@^18 react-dom@^18 styled-components@5 @splunk/visualization-context --save
```

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

### Install @splunk/react-page with npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-page package and its peer dependencies. Requires react, react-dom, and styled-components.

```bash
npm install react@^16 react-dom@^16 styled-components@^5
npm install @splunk/react-page
```

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

### Project Setup

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Instructions for setting up your Splunk development environment and creating a new Splunk app and page.

```APIDOC
## Setting up Splunk Home

```bash
# Set SPLUNK_HOME to point to the top-level installation directory
$ export SPLUNK_HOME=/opt/splunk

# Add $SPLUNK_HOME/bin to the shell’s path.
$ export PATH=$SPLUNK_HOME/bin:$PATH
```

## Getting started with @splunk/create

To generate files for a Splunk app, run `npx @splunk/create` from an empty project folder.

```bash
$ mkdir project-folder
$ cd project-folder
$ npx @splunk/create
#? What do you want to name your Splunk app?: MySplunkApp
#? What do you want to name your new page?: MyPage
#? What type of page would you like to create?: Add a Basic Page
```

Next, install project dependencies:

```bash
$ yarn setup
```

This will create two main directories:
* `packages/my-page`
* `packages/my-splunk-app`
```

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

### Splunk Demo Setup

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Steps to link your local app to a Splunk instance and run the development server.

```APIDOC
## Splunk demo

Splunk demo will allow you to view your new app inside your local Splunk instance:

```bash
# navigate to your app folder
$ cd packages/my-splunk-app

# link the app to your local Splunk instance
$ yarn link:app

# check that the link is set (optional)
$ ls -l $SPLUNK_HOME/etc/apps/my-splunk-app

# restart Splunk (will start Splunk if not already started)
$ splunk restart

# navigate to the root project directory
$ cd ../../

# start the Splunk app
$ yarn start
```

This will watch both your `my-splunk-app` and `my-page` folders for changes and rebundle. Your app should be visible at `https://localhost:8000`.
```

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

### Install @splunk/react-visualization-utils with npm or yarn

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-visualization-utils package, which provides utilities for visualization data manipulation.

```bash
npm install @splunk/react-visualization-utils
```

```bash
yarn add @splunk/react-visualization-utils
```

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

### Start Local React Page Development Demo

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Develop and preview your React page independently from Splunk using the yarn run start:demo command. This command launches a local development server, allowing for faster iteration and hot-reloading of your React components.

```bash
# navigate to the page directory
cd packages/my-page

# start the local development demo
yarn run start:demo
```

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

### Example Meta Object

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This snippet shows an example of a Meta object, which provides additional information to the visualization, such as the total count of results and the current search progress.

```javascript
{
    totalCount: 100, // total results
    progress: 50, // 0-100, current search progress
}
```

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

### Splunk DataSource Setup and Teardown

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Demonstrates how to override the `setup` and `teardown` methods within a Splunk DataSource class. These methods are used for one-time bootstrap and cleanup operations, such as establishing and destroying connections.

```javascript
import { DataSource } from '@splunk/datasources';

class MyDataSource extends DataSource {
    setup() {
        this.searchJob = this.createSearchJob();
    }

    teardown() {
        this.searchJob.destroy();
        delete this.searchJob;
    }

    createSearchJob() {
        // ...
    }
}
```

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

### Install @splunk/time-range-utils

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Provides instructions for installing the `@splunk/time-range-utils` package using npm or yarn. This package offers utilities for time ranges.

```bash
npm install @splunk/time-range-utils
```

```bash
yarn add @splunk/time-range-utils
```

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

### Install @splunk/react-sparkline with npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-sparkline package and its peer dependencies. Requires react, react-dom, and styled-components.

```bash
npm install react@^16 react-dom@^16 styled-components@^5
npm install @splunk/react-sparkline
```

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

### Install Splunk Webpack Configs

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/webpack-configs package and its peer dependencies using npm. This is the initial step for setting up webpack configurations.

```bash
npm install --save-dev @babel/core@^7 babel-loader@^8 webpack@^4
npm install --save-dev @splunk/webpack-configs
```

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

### Install @splunk/react-icons using npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-icons package and its peer dependencies (React, ReactDOM, styled-components).

```bash
npm install react@^16 react-dom@^16 styled-components@^5
npm install @splunk/react-icons
```

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

### Install @splunk/eslint-config using npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/eslint-config package and its peer dependencies using npm. ESLint requires peer dependencies to be installed separately.

```bash
npm install --save-dev babel-eslint@^10 eslint@^8 eslint-config-airbnb@^19 eslint-plugin-import@^2 eslint-plugin-jsx-a11y@^6 eslint-plugin-react@^7 eslint-plugin-react-hooks@^4
npm install --save-dev @splunk/eslint-config
```

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

### Install @splunk/splunk-utils with npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/splunk-utils package using npm. This package provides a collection of utilities for working with Splunk Enterprise.

```bash
npm install @splunk/splunk-utils
```

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

### Install Peer Dependencies for @splunk/babel-preset

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the core Babel dependency required by @splunk/babel-preset. Ensure you have Node.js and npm/yarn installed.

```bash
npm install --save-dev @babel/core^7
```

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

### Install @splunk/react-field-summary using npm or yarn

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-field-summary component, which displays a list of fields from a query and shows a summary panel with common values and statistics.

```bash
npm install @splunk/react-field-summary
```

```bash
yarn add @splunk/react-field-summary
```

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

### Install @splunk/react-search with npm or yarn

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-search package, which provides a search bar with time range picker and search button.

```bash
npm install @splunk/react-search
```

```bash
yarn add @splunk/react-search
```

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

### Install @splunk/react-toast-notifications with npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-toast-notifications package and its peer dependencies. Requires react and styled-components.

```bash
npm install react@^16 styled-components@^5
npm install @splunk/react-toast-notifications
```

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

### Example RequestParams for Data Fetching

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This example demonstrates how to set request parameters to fetch a specific number of results from a data source. It includes the structure for requestParams, data fields, columns, and meta information.

```javascript
{
    requestParams: { offset: 0, count: 20 },
    data: {
        fields: [{ name: 'component' }, { name: 'count' }, { name: 'percent' }],
        columns: [
                    [
                        'splunkd',
                        'splunkd_ui_access',
                        'splunkd_access',
                        'splunk_web_access',
                        'scheduler',
                        'splunk_web_service',
                    ],
                    ['600', '525', '295', '213', '122', '19'],
                    ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
        ],
    },
    meta: { totalCount: 100 },
}
```

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

### Splunk UI Toolkit Filler Gauge Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

An example visualization for a Filler Gauge from the '@splunk/visualizations' package, likely representing a percentage or progress.

```html
<!-- Basic example for FillerGauge -->
02040608010078
```

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

### Install @splunk/react-events-viewer using npm or yarn

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-events-viewer component, which provides an Events Viewer with options for display style, pagination, and number of events.

```bash
npm install @splunk/react-events-viewer
```

```bash
yarn add @splunk/react-events-viewer
```

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

### Example Data Contract Definition

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This example defines a data contract for a visualization, specifying required and optional data sources, as well as initial request parameters for the primary data source.

```javascript
const dataContract = {
    requiredDataSources: [
        {
            name: 'primary',
            description: 'DataSource that powers the visualization',
        },
    ],
    optionalDataSources: [
        {
            name: 'annotation',
            description: 'DataSource that populates event annotations',
        },
    ],
    initialRequestParams: {
        primary: { offset: 0, count: 10000 },
    },
};
```

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

### Link and Run Splunk App Locally

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Commands to link a Splunk app to a local Splunk instance, restart Splunk, and start the development server for the app. This allows for viewing and testing the app within a local Splunk environment.

```bash
# navigate to your app folder
$ cd packages/my-splunk-app

# link the app to your local Splunk instance
$ yarn link:app

# check that the link is set (optional)
$ ls -l $SPLUNK_HOME/etc/apps/my-splunk-app

# restart Splunk (will start Splunk if not already started)
$ splunk restart

# navigate to the root project directory
$ cd ../..

# start the Splunk app
$ yarn start
```

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

### Install @splunk/stylelint-config with npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/stylelint-config package and its peer dependencies using npm. This config provides standardized stylelint rules for Splunk projects.

```bash
npm install --save-dev stylelint@^13
npm install --save-dev @splunk/stylelint-config
```

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

### Install @splunk/react-time-range with npm or yarn

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/react-time-range package, which includes time range picker components and supporting utilities.

```bash
npm install @splunk/react-time-range
```

```bash
yarn add @splunk/react-time-range
```

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

### Basic Input Field Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This snippet demonstrates a basic input field, likely for search queries. It includes a label and a placeholder. No specific libraries or complex dependencies are shown, suggesting a standard HTML input element.

```html
<label>1</label>
<input type="text" placeholder="enter search here...">

```

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

### Install @splunk/moment using npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/moment package, which provides Moment.js and Moment Timezone plugins for Splunk Enterprise timezones and locale formatting.

```bash
npm install @splunk/moment
```

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

### Install @splunk/themes with yarn or npm

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/themes package using either yarn or npm. This package contains Splunk theme variables and mixins for use in React and styled-components.

```bash
yarn add @splunk/themes

npm install @splunk/themes
```

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

### Splunk UI Toolkit Events Data Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

An example of how event data is represented in the '@splunk/visualizations' package, showing a table with 'Time' and 'Event' columns, including structured log data.

```json
* {[-]Collapse all
*     datetime: "07-16-2018 16:38:11.545 -0700",
*     log_level: "INFO",
*     component: "KVStoreServerStats",
*     data: {[+]Shift click to expand all}
}

```

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

### Object Rest and Spread Properties Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Demonstrates the use of object rest properties to extract remaining properties and object spread syntax to combine objects, facilitated by @babel/plugin-proposal-object-rest-spread.

```javascript
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
//          ^-- { a: 3, b: 4 }

let n = { x, y, ...z }; // { x: 1, y: 2, a: 3, b: 4 }
```

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

### Static Initial RequestParams

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This example shows a static object defining the initial request parameters, specifying the offset and count for the first data fetch.

```javascript
initialRequestParams: {
    offset: 0,
    count: 10000,
}
```

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

### Splunk UI Toolkit Bar Chart Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

A basic example of a Bar chart from the '@splunk/visualizations' package. This chart displays categorical data with one X-axis for components and one Y-axis for a numerical value.

```html
<!-- Basic example for Bar -->
<!-- Bar chart with 3 bars. -->
<!-- Chart with 1 X axis displaying component. -->
<!-- Chart with 1 Y axis displaying admin. Range: 0 to 10000. -->
```

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

### Data Contract for Table Visualization

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This data contract example illustrates that the Table visualization only requires a 'primary' data source. It outlines the structure for defining required data sources.

```javascript
const dataContract = {
    requiredDataSources: [
        {
            name: 'primary',
            description: 'DataSource that powers the visualization',
        },
    ],
    //...
};
```

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

### Basic Table with Sortable Columns

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This example shows a basic table structure that supports sortable columns. It outlines the user interaction for picking up, moving, and dropping columns to reorder them, along with instructions for canceling the operation.

```html
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1.1</td>
      <td>Data 1.2</td>
    </tr>
    <tr>
      <td>Data 2.1</td>
      <td>Data 2.2</td>
    </tr>
  </tbody>
</table>

<p>To pick up a sortable column, press space or enter. Use the left and right arrow keys to update the position of the column. Press space or enter again to drop the column in its new position, or press escape to cancel.</p>

<nav>
  <a href="#">Prev</a>
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  <a href="#">Next</a>
</nav>
```

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

### Data Contract for Line Chart Visualization

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This data contract example shows a Line Chart visualization that requires a 'primary' data source and optionally supports an 'annotation' data source.

```javascript
const dataContract = {
    requiredDataSources: [
        {
            name: 'primary',
            description: 'DataSource that powers the visualization',
        },
    ],
    optionalDataSources: [
        {
            name: 'annotation',
            description: 'DataSource that populates event annotations',
        },
    ],
    //...
};
```

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

### Dynamic Initial RequestParams Function

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This example defines initial request parameters using a function that takes visualization options and returns an object with offset and count. This allows for dynamic parameter generation based on visualization configuration.

```javascript
initialRequestParams: (options = {}) => ({
    offset: 0,
    count: options.count || 20,
})
```

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

### Create a Splunk App with a Basic Page - @splunk/create

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This snippet demonstrates how to use the @splunk/create CLI tool to scaffold a new Splunk app and a basic page. It outlines the prompts the user will encounter during the creation process, including naming the app and the page, and selecting the page type.

```bash
#? What do you want to name your Splunk app?: MyTodoListApp
#? What do you want to name your new page?: MyTodoListPage
#? What type of page would you like to create?: Add a Basic Page
```

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

### Filter DataFrame Fields with frameWithoutInternalFieldsExcept

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This snippet demonstrates how to use the `frameWithoutInternalFieldsExcept` function within a Splunk UI Toolkit Table component. It filters a DataFrame, removing internal fields (those starting with '_') except for those explicitly listed in the `names` argument. Non-internal fields passed as parameters are ignored. The example shows removing `_raw` while keeping `_time` and `_span`.

```javascript
<Table
    options={{
        table: '> primary | frameWithoutInternalFieldsExcept('_time', '_span')'
    }},
    dataSources={{
        primary: {{
            data: {{
                fields: [
                    {{
                        name: 'Name'
                    }},
                    {{
                        name: 'UserID'
                    }},
                    {{
                        name: '_time'
                    }},
                    {{
                        name: '_span'
                    }},
                    {{
                        name: '_raw'
                    }},
                ],
                columns: [
                    [
                        'Ms. Herman Beer',
                        'Joanne Emmerich',
                        'Jay Renner',
                        'Ora Borer',
                        'Dr. Bradford Gulgowski'
                    ],
                    [
                        'Enrico98',
                        'Francis8',
                        'Charley.Feeney85',
                        'Jensen_Jacobson74',
                        'Dora_Volkman'
                    ],
                    [
                        '2020-04-12T06:32:08-07:00',
                        '2020-09-26T16:06:03-07:00',
                        '2020-08-10T14:54:16-07:00',
                        '2020-08-11T16:49:24-07:00',
                        '2020-09-29T03:52:51-07:00'
                    ],
                    [
                        '1800',
                        '1800',
                        '1800',
                        '1800',
                        '1800'
                    ],
                    [
                        '2020-04-12T06:32:08-07:00',
                        '2020-09-26T16:06:03-07:00',
                        '2020-08-10T14:54:16-07:00',
                        '2020-08-11T16:49:24-07:00',
                        '2020-09-29T03:52:51-07:00'
                    ]
                ]
            }},
            meta: {{
                totalCount: 100
            }},
            requestParams {{
                count: 10,
                offset: 0
            }}
        }}
    }}
/>
```

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

### DataFrame Structure Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This example demonstrates the structure of a DataFrame, which is a list of DataSeries. Each DataSeries is a list of DataPoints, representing individual primitive values. The example shows nested arrays that can be interpreted as these data structures.

```javascript
{
    data: [
        [
            '2020-04-12T06:32:08-07:00',
            '2020-06-06T16:14:04-07:00',
            '2020-08-10T14:54:16-07:00',
            '2020-08-11T16:49:24-07:00',
            '2020-09-29T03:52:51-07:00'
        ],
        [
            'Ms. Herman Beer',
            'Crystal Ziemann',
            'Angel Krajcik',
            'Jay Renner',
            'Dr. Bradford Gulgowski'
        ],
        [
            'Candice_Carroll',
            'Elwin52',
            'Francis8',
            'Charley.Feeney85',
            'Dora_Volkman'
        ]
    ],
    meta: {
        totalCount: 100
    },
    requestParams: {
        count: 10,
        offset: 0
    }
}
```

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

### Start Local React Page Development Demo

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Initiates a local development server specifically for the React page, allowing for faster iteration without needing to restart the Splunk instance. Changes made to the page files will hot-reload in the browser.

```bash
# navigate to the page directory
$ cd packages/my-page

# start the local development demo
$ yarn run start:demo
```

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

### Local React Demo

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Instructions for running a local development environment for your React page.

```APIDOC
## Local React demo

Sometimes developing within Splunk is not the most efficient, which is why we also provide a local development environment specifically for your React page.

```bash
# navigate to the page directory
$ cd packages/my-page

# start the local development demo
$ yarn run start:demo
```

Go to `http://localhost:8080/` to see your new React page in action. Page files are located in `packages/my-page/src`.
```

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

### Generate Splunk App with @splunk/create CLI

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Use the npx @splunk/create command to generate a new Splunk application and its associated React page scaffolding. This CLI tool helps bootstrap your project with Splunk's recommended packages and structure.

```bash
mkdir project-folder
cd project-folder
npx @splunk/create
#? What do you want to name your Splunk app?: MySplunkApp
#? What do you want to name your new page?: MyPage
#? What type of page would you like to create?: Add a Basic Page
```

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

### Set Up Splunk Environment Variables

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Configures the necessary environment variables for Splunk. It sets the SPLUNK_HOME directory and adds the Splunk bin directory to the system's PATH.

```bash
# Set SPLUNK_HOME to point to the top-level installation directory
$ export SPLUNK_HOME=/opt/splunk

# Add $SPLUNK_HOME/bin to the shell’s path.
$ export PATH=$SPLUNK_HOME/bin:$PATH
```

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

### Run Unit Tests for React Pages using Jest

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Commands to run unit tests for React pages, bootstrapped with Jest and testing-library. Includes options to run tests once or in watch mode. An example test file is located at `tests/my-page.unit.tsx`.

```bash
# navigate to the page directory
$ cd packages/my-page

# run tests once
$ yarn run test

# run tests in watch mode
$ yarn run test:watch
```

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

### Add a New Page to Splunk App using @splunk/create

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Command-line instructions to add a new page to a Splunk app using the @splunk/create package. This involves navigating to the project root, running the create command, following prompts to name and define the page type, setting up dependencies, and restarting Splunk.

```bash
# navigate to project root
$ cd /my-project

# run @splunk/create
$ npx @splunk/create

# follow prompts
#? What do you want to name your new page?: MySecondPage
#? What type of page would you like to create?: Add a Basic Page

# install the new pages package dependencies
$ yarn setup

# restart Splunk to see new page in Splunk instance
$ splunk restart

# start Splunk demo
$ yarn start
```

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

### Install @splunk/dashboard-extension-webpack-plugin (npm)

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Installs the @splunk/dashboard-extension-webpack-plugin using npm for use in development environments. This package is a Webpack plugin for building Splunk dashboard extensions.

```bash
npm install --save-dev @splunk/dashboard-extension-webpack-plugin
```

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

### Importing Format Utilities from @splunk/ui-utils

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Demonstrates importing the `smartTrim` function from the format module of `@splunk/ui-utils`.

```javascript
import { smartTrim } from '@splunk/ui-utils/format';
```

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

### Splunk UI Toolkit Column Chart Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

A basic example of a Column chart from the '@splunk/visualizations' package. This chart displays time-series data with one X-axis for time and one Y-axis for a numerical value.

```html
<!-- Basic example for Column -->
<!-- Bar chart with 6 bars. -->
<!-- Chart with 1 X axis displaying _time. Range: 2018-05-02 21:10:46 to 2018-05-02 21:17:30. -->
<!-- Chart with 1 Y axis displaying admin. Range: 0 to 100. -->
```

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

### Importing Focus Utilities from @splunk/ui-utils

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Shows how to import the `takeFocus` function from the focus module of `@splunk/ui-utils`.

```javascript
import { takeFocus } from '@splunk/ui-utils/focus';
```

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

### Splunk UI Toolkit Bubble Chart Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

A basic example of a Bubble chart from the '@splunk/visualizations' package. Bubble charts are scatter plots where each data point has a size value, with axes for date_hour and count.

```html
<!-- Basic example for Bubble -->
<!-- Bubble chart with 15 bubbles. -->
<!-- Chart with 1 X axis displaying date_hour. Range: 2 to 24. -->
<!-- Chart with 1 Y axis displaying count. Range: 500 to 2500. -->
```

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

### Create New Splunk App and Page

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Generates a new Splunk app and page structure using the @splunk/create package. This process involves interactive prompts to name the app, page, and choose a page type.

```bash
$ mkdir project-folder
$ cd project-folder
$ npx @splunk/create
#? What do you want to name your Splunk app?: MySplunkApp
#? What do you want to name your new page?: MyPage
#? What type of page would you like to create?: Add a Basic Page
```

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

### Splunk UI Toolkit Area Chart Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

A basic example of an Area chart from the '@splunk/visualizations' package. This chart visualizes time-series data with one X-axis for time and one Y-axis for a numerical value.

```html
<!-- Basic example for Area -->
<!-- Chart with 1 X axis displaying _time. Range: 2018-05-02 21:10:46 to 2018-05-02 21:15:50. -->
<!-- Chart with 1 Y axis displaying axis_5. Range: 0 to 750. -->
```

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

### Package Splunk App using tar command

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

This snippet shows an alternative method for packaging a Splunk app using the 'tar' command. It involves navigating to the Splunk apps directory and creating a compressed archive, excluding specific temporary or version-controlled files and directories.

```bash
cd $SPLUNK_HOME/etc/apps
COPYFILE_DISABLE=true tar -zcvh --exclude='.gitignore' --exclude='.git' --exclude='local/' --exclude='stage/' --exclude='local.meta' --exclude='.DS_Store' -f <filename>.tar.gz <app-name>/
```

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

### Dashboard Definition JSON Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

An example of a JSON structure representing a dashboard definition. This structure includes a title and defines various visualizations like tables, bar charts, column charts, and line charts, each with their own type and data source.

```json
{
    "title": "Dashboard Title",
    "visualizations": {
        "table": {
            "title": "Table",
            "type": "splunk.table",
            "dataSources": {
                "primary": "search1"
            }
        },
        "bar": {
            "title": "Bar Chart",
            "type": "splunk.bar",
            "dataSources": {
                "primary": "search1"
            }
        },
        "column": {
            "title": "Column Chart",
            "type": "splunk.column",
            "dataSources": {
                "primary": "search1"
            }
        },
        "line": {
            "title": "Line Chart",
            "type": "splunk.line",
            "dataSources": {
                "primary": "search1"
            }
        }
    }
}
```

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

### Basic Usage of @splunk/react-page

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Demonstrates basic usage of the @splunk/react-page layout component with a React element and optional configuration options.

```javascript
import layout from '@splunk/react-page';
import MyPage from 'pages/MyPage';

layout(<MyPage />, { pageTitle: 'A React Page', hideFooter: true, layout: 'fixed' });
```

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

### DefinitionList Component API

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

API documentation for the DefinitionList component.

```APIDOC
## DefinitionList API

### Description
Provides a structured way to display definition lists.

### Props

- **children** (node) - Required - The content of the DefinitionList.
- **className** (string) - Optional - Additional CSS class names for styling.
- **component** (oneOfType(func, object)) - Optional - The component to use for rendering the DefinitionList.
- **layout** (oneOf('fixed', 'auto', 'stacked')) - Optional - The layout of the DefinitionList. Defaults to 'fixed'.
- **title** (string) - Optional - The title of the DefinitionList.
- **titleComponent** (string) - Optional - The component to use for rendering the title.
- **titleElement** (node) - Required - The element to use for rendering the title.
- **wrapperComponent** (oneOfType(func, object)) - Optional - The component to use for rendering the wrapper.
```

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

### TypeScript Class Properties Example

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Illustrates the usage of class field declarations and bound methods in TypeScript, enabled by @babel/plugin-proposal-class-properties.

```typescript
class Bork {
    //Property initializer syntax with type information
    sound: string = "bork";
    // Bound method
    public playSound = () => {
        return this.sound;
    }
}
const myBork = new Bork();
myBork.playSound // "bork"
```

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

### Webpack Configurations Options

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Explains the options available for creating webpack configurations, specifically the `babelTypescript` option.

```APIDOC
## Webpack Configurations Options

### Description

Details the options for the `create` function exported by Splunk webpack configurations.

### `create` Function Options

All configurations export a `create` function that accepts the following options:

*   **`babelTypescript`** (boolean) - Includes `.ts` and `.tsx` files in the `babel-loader` configuration. Defaults to `true`.

    ```javascript
    const webpackMerge = require('webpack-merge');
    const createBaseConfig = require('@splunk/webpack-configs').create;

    module.exports = webpackMerge(createBaseConfig({ babelTypescript: false }), {
        entry: {...},
        output: {...},
    });
    ```
```

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

### Run Linter with ESLint and Stylelint using @splunk/create

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Command to run linters (eslint and stylelint) on a project bootstrapped with @splunk/create. This helps maintain code quality and consistency.

```bash
# navigate to project root
$ cd my-project

# run linter
$ yarn run lint
```

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

### Get Default Splunk Timezone

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Retrieves the name of the currently set default timezone. This can be useful for timezone conversion operations.

```javascript
moment.getDefaultSplunkTimezone()
```

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

### SingleValue Visualization with DSL

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Demonstrates how to use DSL to dynamically configure options for a SingleValue visualization, including data fetching and transformation.

```APIDOC
## SingleValue Visualization with DSL

### Description
This example shows a `SingleValue` visualization utilizing DSL to dynamically set its options. It fetches data from `dataSources.primary`, processes it using `seriesByIndex` and `delta` selectors, and then determines `trendColor` based on a defined range.

### Component
```jsx
import SingleValue from '@splunk/visualizations/SingleValue';

export default () => (
    <SingleValue
        context={{
            trendColorThresholds: [
                { from: 1321, value: '#00FFFF' },
                { to: 1321, value: '#FF00FF' },
            ],
        }}
        options={{
            // Resolves data series from primary datasource
            sparklineValues: '> primary | seriesByIndex(0)',
            // Calculates delta from sparklineValues
            trendValue: '> sparklineValues | delta(-2)',
            // Determines color based on trendValue and thresholds
            trendColor: '> trendValue | rangeValue(trendColorThresholds)',
        }}
        dataSources={{
            primary: {
                data: {
                    columns: [
                        ['1', '62', '103', '308', '587', '876', '930', '1320'],
                        [
                            '2018-08-19T00:00:00.000+00:00',
                            '2018-08-20T00:00:00.000+00:00',
                            '2018-08-21T00:00:00.000+00:00',
                            '2018-08-22T00:00:00.000+00:00',
                            '2018-08-23T00:00:00.000+00:00',
                            '2018-08-24T00:00:00.000+00:00',
                            '2018-08-25T00:00:00.000+00:00',
                            '2018-08-26T00:00:00.000+00:00',
                        ],
                    ],
                    fields: [
                        { name: 'foo' },
                        { name: 'bar' },
                    ],
                },
                meta: {},
            },
        }}
    />
);
```

### DSL Explanation
- `sparklineValues`: Reads data from the `primary` datasource and selects the first series.
- `trendValue`: Calculates the difference between the last two points of `sparklineValues`.
- `trendColor`: Maps the `trendValue` to a color based on the `trendColorThresholds` defined in the `context`.
```

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

### Configure ESLint with @splunk/eslint-config

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Adds configuration to your ESLint setup to extend Splunk's browser or Node.js configurations, with or without Prettier.

```json
{
    "extends": "@splunk/eslint-config/browser"
}
```

```json
{
    "extends": "@splunk/eslint-config/browser-prettier"
}
```

```json
{
    "extends": "@splunk/eslint-config/node"
}
```

```json
{
    "extends": "@splunk/eslint-config/node-prettier"
}
```

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

### Use FeatureFlagContextProvider for Feature Toggling

Source: https://github.com/kundeng/splunk-ui-toolkit-doc/blob/docs-only/splunk-ui-kit-complete-docs.md

Illustrates how to wrap a component with FeatureFlagContextProvider to enable or disable specific features. This example shows enabling 'visualizations_enableTrellis' for the SingleValue component.

```javascript
import FeatureFlagContext from '@splunk/visualization-context/FeatureFlagContext';

<FeatureFlagContextProvider value={{
    visualizations_enableTrellis: true
}}>
    <SingleValue … /> <!-- This component has visualizations_enableTrellis enabled -->
</FeatureFlagContextProvider>
```