### Install @splunk/react-page Package

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

Installs the @splunk/react-page package and its peer dependencies using npm. It first installs react, react-dom, and styled-components, then installs the main package.

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

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

### Install @splunk/search-job Package

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

Installs the @splunk/search-job package, which simplifies creating and accessing Splunk search jobs. Installation is done using npm.

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

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

### Install @splunk/react-visualization-utils Package

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

Installs the @splunk/react-visualization-utils package, which provides utilities for visualization props. Installation can be done using either npm or yarn.

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

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

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

### Splunk DataSource Setup and Teardown

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

Implement setup and teardown logic for Splunk DataSources. The `setup` method is used for initialization tasks like creating search jobs, while `teardown` handles cleanup, such as destroying connections or search jobs. These methods can only be called once per data source.

```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/react-sparkline Package

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

Installs the @splunk/react-sparkline package and its peer dependencies using npm. It first installs react, react-dom, and styled-components, then installs the main package.

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

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

### Install @splunk/react-toast-notifications Package

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

Installs the @splunk/react-toast-notifications package and its peer dependencies using npm. It first installs react and styled-components, then installs the main package.

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

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

### Install splunk-utils package

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

Installs the splunk-utils package, which provides a collection of utilities for working with Splunk Enterprise.

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

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

### Example Meta Object

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

An example of a `meta` object providing additional information about the data, such as the total count of results and the current search progress.

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

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

### Install splunk-ui-kit-crawler with npm

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

Installs the splunk-ui-kit-crawler package and its dependencies as a development dependency using npm. This command should be run after installing peer dependencies.

```bash
npm install --save-dev @splunk/webpack-configs
```

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

### Example: Splunk Babel Preset Usage in babel.config.js

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

Demonstrates how to configure @splunk/babel-preset in your Babel configuration file. This setup includes the preset and allows for passing specific options to its underlying presets.

```JSON
{
    "presets": ["@splunk/babel-preset"]
}
```

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

### Example Splunk Visualization Data Sources

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

Illustrates the structure of the `dataSources` prop for the SplunkVisualization component. It shows an example with 'primary' data, including request parameters, data fields and columns, and metadata.

```jsx
dataSources={{
    primary: {
        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 },
    },
}}

```

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

### Install @splunk/babel-preset Package

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

Command to install the @splunk/babel-preset package as a development dependency in your project.

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

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

### Install Project Dependencies

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

Command to install project dependencies using Yarn. This command should be run after generating the project structure with `@splunk/create`.

```bash
$ yarn setup
```

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

### Install @splunk/visualizations Peer Dependencies

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

Lists the required peer dependencies for the `@splunk/visualizations` package, including React, ReactDOM, styled-components, and @splunk/visualization-context. These must be installed before the main package.

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

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

### Install @splunk/stylelint-config

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

Installs the @splunk/stylelint-config package, a standardized stylelint configuration designed to work well with styled-components and prettier.

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

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

### Install @splunk/react-search Package

Source: https://github.com/kundeng/splunk-ui-kit-crawler/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. Installation can be done using either npm or yarn.

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

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

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

### Install @splunk/themes package

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

Installs the @splunk/themes package, which provides Splunk software theme variables and mixins for use in React, styled-components, and other frameworks.

```bash
yarn add @splunk/themes

npm install @splunk/themes
```

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

### Install @splunk/visualizations Package

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

Provides the npm command to install the `@splunk/visualizations` package after its peer dependencies have been met. This package contains React components for data visualization.

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

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

### Install @splunk/react-time-range Package

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

Installs the @splunk/react-time-range package, which provides time range picker components. Installation can be done using either npm or yarn.

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

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

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

### Example Splunk Visualization Configuration Object

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

This snippet shows an example of a Visualization configuration object used in Splunk. It defines essential properties like key, name, icon, and schemas for options and editor configuration, enabling programmatic reasoning about visualizations at build and runtime.

```javascript
const LinkGraphConfig = {
    key: 'splunk.linkgraph',
    name: 'Link Graph',
    icon: LinkGraphIcon,
    optionsSchema: {},
    editorConfig: {},
    events: {},
};
```

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

### Install @splunk/react-field-summary

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

Installs the @splunk/react-field-summary package, which provides a Field Summary List component to display fields from a query and their common values.

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

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

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

### Install @splunk/react-events-viewer

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

Installs the @splunk/react-events-viewer package, which provides an Events Viewer component for selecting display styles and configuring pagination and event numbers.

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

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

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

### Install @splunk/moment

Source: https://github.com/kundeng/splunk-ui-kit-crawler/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 formatting.

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

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

### Basic Events Table Example

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

A basic example of an Events table visualization. This table displays event data with columns for 'Time' and 'Event'. It includes sample entries with timestamps and log data, demonstrating structured event logging.

```javascript
| Time| Event
---|---
| [4/2/2018
7:33:49.691 PM]()| `

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

`[Show as raw text]()

| [4/2/2018
7:33:49.691 PM]()| 04-02-2018 16:33:49.691 -0700 INFO Metrics - group=thruput,
name=thruput, instantaneous_kbps=0.8775482519547254,
instantaneous_eps=3.5802456751680514, average_kbps=0.7280928568987709,
total_k_processed=4794, kb=27.20703125, ev=111, load_average=2.87744140625

| [4/2/2018
7:33:49.691 PM]()| 04-02-2018 16:33:49.691 -0700 INFO Metrics - group=thruput,
name=thruput, instantaneous_kbps=0.8775482519547254,
instantaneous_eps=3.5802456751680514, average_kbps=0.7280928568987709,
total_k_processed=4794, kb=27.20703125, ev=111, load_average=2.87744140625

| [4/2/2018
7:33:49.691 PM]()| 04-02-2018 16:33:49.691 -0700 INFO Metrics - group=thruput,
name=thruput, instantaneous_kbps=0.8775482519547254,
instantaneous_eps=3.5802456751680514, average_kbps=0.7280928568987709,
total_k_processed=4794, kb=27.20703125, ev=111, load_average=2.87744140625

| [4/2/2018
7:33:49.691 PM]()| 04-02-2018 16:33:49.691 -0700 INFO Metrics - group=thruput,
name=thruput, instantaneous_kbps=0.8775482519547254,
instantaneous_eps=3.5802456751680514, average_kbps=0.7280928568987709,
total_k_processed=4794, kb=27.20703125, ev=111, load_average=2.87744140625

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.
```

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

### Example Data Contract Definition

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

An example of a `dataContract` object that specifies required and optional data sources, along with 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 },
    },
};
```

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

### Install @splunk/react-icons

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

Installs the @splunk/react-icons package and its peer dependencies (React and styled-components). This package provides a library of various icons in React.

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

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

### Example: Object Rest and Spread Syntax with @splunk/babel-preset

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

Illustrates the usage of object rest properties and spread syntax for destructuring and creating objects, facilitated by the @babel/plugin-proposal-object-rest-spread in @splunk/babel-preset.

```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 }
```

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

### Example RequestParams for Data Fetching

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

Defines the parameters for fetching data, specifically requesting the first 20 results from a given data source. It includes offset and count for pagination.

```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 },
}
```

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

### Basic Bar Chart Example

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

A basic example of a Bar chart visualization. This chart has 3 bars, with 'component' on the X-axis and 'admin' on the Y-axis, showing a range from 0 to 10000.

```javascript
<!-- Basic example for Bar -->
```

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

### Install @splunk/time-range-utils via npm or yarn

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

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

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

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

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

### Example: Customizing @splunk/babel-preset Options

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

Illustrates how to pass custom options to the presets included within @splunk/babel-preset, such as configuring @babel/preset-env, @babel/preset-react, and @babel/preset-typescript.

```JSON
{
    "presets": ["@splunk/babel-preset", {
        "envPresetOptions": { ... },
        "reactPresetOptions" : { ... },
        "typescriptPresetOptions": { ... }
    }]
}
```

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

### Webpack Base Configuration with JS

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

Applies a base Webpack configuration using webpack-merge and the default configuration from @splunk/webpack-configs. This snippet demonstrates how to extend the base setup for entry and output points.

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

module.exports = webpackMerge(baseConfig, {
    entry: {...},
    output: {...},
});
```

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

### Create a Splunk App Todo List Page with @splunk/create

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

This tutorial demonstrates how to scaffold a new Splunk app and create a basic todo list page using the @splunk/create package. It guides through setting up the project with specific inputs and updating React and style files to implement the todo list functionality.

```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
```

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

### Install @splunk/eslint-config

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

Installs the @splunk/eslint-config package and its peer dependencies. ESLint requires these dependencies to be installed as peer dependencies.

```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
```

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

### Run Local React Page Demo

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

Develop and preview a React page independently of Splunk using a local development environment. Navigate to the page's directory and start the demo server. Changes in the page's source files will automatically update in the demo.

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

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

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

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

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

Command to install the core Babel dependency required before installing the @splunk/babel-preset package. Ensure version 7 or higher is used.

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

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

### Package Splunk App using @splunk/create

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

Instructions for packaging a Splunk app using the 'splunk package app' command and the OS archive command. This process is essential for deploying applications to Splunk environments.

```bash
$ cd $SPLUNK_HOME/bin
$ splunk package app my-splunk-app
```

```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>/
```

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

### Create a New Splunk App and Page

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

Generate the boilerplate files for a new Splunk app and page using the @splunk/create command. This process involves interactive prompts to name the app, page, and select a page type. Dependencies are then installed using yarn.

```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

$ yarn setup
```

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

### Install Peer Dependencies with npm

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

Installs essential development dependencies like Babel core, webpack, and related loaders using npm. These are typically required before installing the main package.

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

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

### Link and Run Splunk App Demo

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

Integrate a developed Splunk app with a local Splunk instance and run the development server. This involves navigating to the app directory, linking it to the Splunk instance, restarting Splunk, and starting the app's watcher to enable rebundling of changes.

```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
```

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

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

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

This snippet shows how to use the @splunk/create command-line tool to add a new page to an existing Splunk application. It includes steps for navigating to the project, running the command, selecting page options, installing 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
```

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

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

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

CLI commands to create a new Splunk application project using the `@splunk/create` tool. This involves creating a project folder, navigating into it, and running the generator, which prompts for app and page names.

```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 Kit Crawler - Version 0.0.1 Release Notes

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

Initial release notes for version 0.0.1 of the splunk-ui-kit-crawler project, introducing core components and PropTypes.

```APIDOC
## Version 0.0.1 Release Notes

### Summary
Initial release of the splunk-ui-kit-crawler project, including the search input bar, timerange picker, search button, and PropTypes.

### Added

  * Search input bar
  * Timerange picker
  * Search button
  * Allow custom syntax in JSON formatted file
  * PropTypes to conform to the base viz api
```

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

### Install Dashboard Extension Webpack Plugin (npm)

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

This command installs the '@splunk/dashboard-extension-webpack-plugin' package as a development dependency. This plugin is used for building Splunk dashboard extensions with Webpack.

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

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

### Set Up Splunk Environment Variables

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

Configure the necessary environment variables for Splunk development. This involves setting the SPLUNK_HOME directory and adding the Splunk bin directory to the system's PATH. Ensure these are correctly set before running Splunk commands.

```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
```

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

### Dashboard Definition Example (JSON)

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

An example JSON structure representing a dashboard title and its associated visualizations, including table, bar, column, and line chart types with data source configurations.

```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"
            }
        }
    }
}
```

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

### Import takeFocus from @splunk/ui-utils/focus

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

Demonstrates importing the `takeFocus` function from the `@splunk/ui-utils/focus` module. This is one of the many common UI utilities provided by the library.

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

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

### Basic Area Chart Example

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

A basic example of an Area chart visualization. This chart displays time on the X-axis and a numerical value on the Y-axis, with data points ranging from 2018-05-02 21:10:46 to 2018-05-02 21:15:50.

```javascript
<!-- Basic example for Area -->
```

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

### Scope Selector for Popover Elements (Example)

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

This example demonstrates how to scope a selector to target an element within a popover. It is useful when the target element is rendered outside the main component and requires a specific ID for accurate selection.

```css
#${popoverId} [data-test="filter"]
```

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

### Create a Custom Data Source with JavaScript

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

Provides a JavaScript example for creating a custom data source using the `@splunk/datasources` package. This custom data source repeatedly increments a count and returns it as a `DataSet`. It utilizes `setInterval` for periodic updates and includes logic for handling potential integer overflows. Dependencies include `@splunk/datasource-utils` and `@splunk/datasources`.

```javascript
import { DataSet, DS_STATUS } from '@splunk/datasource-utils';
import { DataSource } from '@splunk/datasources';

export default class CustomDataSource extends DataSource {
    /**
     * 
     * @param {Object} options.data static data set
     * @param {Number} options.delay
     * @param {*} context
     */
    constructor(options = {}, context = {}) {
        super(options, context);
        this.counter = 0;
    }

    request() {
        return (observer) => {
            const interval = setInterval(() => {
                if (this.counter <= Number.MAX_SAFE_INTEGER) {
                    this.counter += 1;
                } else {
                    this.counter = 0;
                }

                observer.next({
                    data: DataSet.fromJSONCols(
                        [
                            {
                                name: 'count',
                            },
                        ],
                        [[this.counter]]
                    ),
                    meta: {
                        isRealTimeSearch: true,
                        totalCount: 1,
                        status: DS_STATUS.RUNNING,
                        lastUpdated: Date.now(),
                    },
                });
            }, 2000);
            return () => {
                clearInterval(interval);
            };
        };
    }
}
```

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

### DSL Variable Resolution Example for Visualization

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

Demonstrates how the DSL resolves variables by first checking local scope and then global scopes (context, datasources, options, themes). This example shows how 'color' resolves to 1 and 'value' resolves to 3.

```javascript
<SampleViz
    context={{
        foo: 2,
        bar: 3,
    }}
    options={{
        foo: 1,
        // the DSL will first look at the local scope before searching through context.foo, datasources.foo, and themes.foo
        // in this case, color will be resolved as 1
        color: '> foo',
        // since there is no local match, the DSL will look through the global scopes to find a corresponding identifier
        // in this case, value will be resolved as 3
        value: '> bar',
    }}
/>
```

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

### Basic Column Chart Example

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

A basic example of a Column chart visualization. This chart displays 6 bars, with '_time' on the X-axis and 'admin' on the Y-axis. The time range spans from 2018-05-02 21:10:46 to 2018-05-02 21:17:30, and the Y-axis range is 0 to 100.

```javascript
<!-- Basic example for Column -->
```

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

### Splunk UI Kit Crawler - Version 1.1.0 Release Notes

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

Release notes for version 1.1.0 of the splunk-ui-kit-crawler project. This version standardizes theme imports and adjusts border radiuses for the search bar.

```APIDOC
## Version 1.1.0 Release Notes

### Summary
Standardized theme import path and ensured consistent border radiuses for the search bar.

### Changed

  * Moved the themes import to be consistent with other components so the import is now: `import { themes } from '@splunk/react-search/themes;`
  * Made the search bar have consistent border radiuses (SCP-25631)
```

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

### Styled Components Theming with Splunk Themes

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

Demonstrates how to use `pick`, `variables`, and `mixins` from `@splunk/themes` to style React components with styled-components. It shows how to apply theme-specific colors based on different environments like 'enterprise' and 'prisma'.

```javascript
import { pick, variables, mixins } from '@splunk/themes';
import styled from 'styled-components';

const Wrapper = styled.div`
    ${mixins.reset()};

    color: ${pick({
         enterprise: variables.textColor,
         prisma: variables.contentColorDefault
    })};
`;
```

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

### Basic Bubble Chart Example

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

A basic example of a Bubble chart visualization. This chart features 15 bubbles, plotting 'date_hour' on the X-axis and 'count' on the Y-axis, with bubble sizes representing an additional data dimension. The ranges are 2 to 24 for the X-axis and 500 to 2500 for the Y-axis.

```javascript
<!-- Basic example for Bubble -->
```

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

### Tree Component Clickable Expansion Example (React)

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

This example demonstrates how to implement a 'Tree' component with clickable expansion toggles using React and styled-components. It manages the expanded state of tree items using `useState` and `useCallback` for efficient state updates. The `TreeItemWithExpansion` component handles rendering the toggle icon based on the expanded state and whether the item has children.

```jsx
import React, { useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import ChevronDown from '@splunk/react-icons/ChevronDown';
import ChevronRight from '@splunk/react-icons/ChevronRight';
import Tree from '@splunk/react-ui/Tree';
import { variables } from '@splunk/themes';

const StyledExpansionToggleWrapper = styled.span`
  display: inline-flex;
  padding-inline-end: ${variables.spacingSmall};
  width: 16px;
`;

const StyledSpan = styled.span`
  display: inline-flex;
  padding: ${variables.spacingXSmall} 0;
`;

const ExpansionToggle = ({ expanded, treeItemId, onToggleExpansion }) => (
  <span onClick={(e) => {
    e.preventDefault();
    onToggleExpansion?.(e, { treeItemId });
  }} >
    {expanded ? <ChevronDown /> : <ChevronRight />}
  </span>
);

const TreeItemWithExpansion = ({ children, content, expanded, id, onToggleExpansion, ...otherTreeItemProps }) => {
  const contentWithExpansion = useMemo(() => {
    const renderExpansionToggle = () => {
      if (!children) {
        return undefined;
      }
      return (
        <ExpansionToggle expanded={expanded || false} onToggleExpansion={onToggleExpansion} treeItemId={id} />
      );
    };
    return (
      <StyledSpan>
        <StyledExpansionToggleWrapper>
          {renderExpansionToggle()}
        </StyledExpansionToggleWrapper>
        {content}
      </StyledSpan>
    );
  }, [children, content, expanded, id, onToggleExpansion]);

  return (
    <Tree.Item content={contentWithExpansion} expanded={expanded} id={id} onToggleExpansion={onToggleExpansion} {...otherTreeItemProps} >
      {children}
    </Tree.Item>
  );
};

export default function ClickableExpansion() {
  const [expandedIdsMap, setExpandedIdsMap] = useState(
    new Map([
      ['two', true],
      ['three', true],
    ])
  );

  const handleToggleExpansion = useCallback((event, { treeItemId } = {}) => {
    if (!treeItemId) {
      return;
    }
    setExpandedIdsMap((prevMap) => {
      const newMap = new Map(prevMap);
      if (newMap.has(treeItemId)) {
        newMap.delete(treeItemId);
      } else {
        newMap.set(treeItemId, true);
      }
      return newMap;
    });
  }, []);

  return (
    <Tree data-test="tree-fixture">
      <TreeItemWithExpansion content="node-0" id="one" />
      <TreeItemWithExpansion content="node-1" id="two" expanded={expandedIdsMap.has('two')} onToggleExpansion={handleToggleExpansion} >
        <TreeItemWithExpansion content="node-1-0" id="three" expanded={expandedIdsMap.has('three')} onToggleExpansion={handleToggleExpansion} >
          <TreeItemWithExpansion content="node-1-0-0" id="four" />
          <TreeItemWithExpansion content="node-1-0-1" id="five" />
        </TreeItemWithExpansion>
        <TreeItemWithExpansion content="node-1-1" id="six" />
      </TreeItemWithExpansion>
      <TreeItemWithExpansion content="node-2" id="seven" />
    </Tree>
  );
}
```

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

### pick Function

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

Creates theme-specific CSS by selecting appropriate variables or blocks of styles based on the current theme.

```APIDOC
## pick

### Description
Generates theme-specific CSS by picking values based on the active theme.

### Method
`pick(themeOptions)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **themeOptions** (object) - Required - An object containing theme-specific values or CSS blocks, keyed by theme name (e.g., `enterprise`, `prisma`) and potentially variants (e.g., `light`, `dark`).

### Request Example
**Selecting a variable:**
```javascript
import { pick, variables } from '@splunk/themes';

const Wrapper = styled.div`
    color: ${pick({
        enterprise: {
            light: variables.grey35,
            dark:  variables.grey92,
        },
        prisma: variables.contentColorDefault,
    })}
`;
```

**Selecting a CSS block:**
```javascript
import { pick, variables } from '@splunk/themes';
import css from 'styled-components';

const Label = styled.div`
    ${pick({
        enterprise: css`
            font-weight: ${variables.fontWeightSemiBold};
        `,
        prisma: css`
            color: ${variables.contentColorDefault);
        `,
    })}
`;
```

### Response
#### Success Response (200)
- Returns a function that is called by `styled-components` to provide theme context.

#### Response Example
N/A (Function return for styled-components)

```

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

### Cloud Search Data Source

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

Documentation for the `CloudSearch` data source component, used for running searches on SCS.

```APIDOC
## CloudSearch Data Source

### Description
A data source that can run searches on SCS. It requires `query` string and time range in the definition. Timezone defaults to GMT but can be specified with `timezone` along with `earliest` and `latest`.

### Parameters
#### Request Body
- **type** (String) - Required - Must be "ds.search"
- **options** (Object) - Required - Search options
  - **query** (String) - Required - The search query string
  - **queryParameters** (Object) - Optional - Parameters for the search query
    - **earliest** (String) - Optional - The earliest time for the search range
    - **latest** (String) - Optional - The latest time for the search range
    - **timezone** (String) - Optional - The timezone for the time range
  - **refresh** (Number) - Optional - Refresh interval in seconds
  - **refreshType** (String) - Optional - Controls when refresh happens

### Request Example
#### Search for data from last 24 hours
```json
{
 "type": "ds.search",
 "options": {
  "query": "from index:main | stats count()",
  "queryParameters": {
   "earliest": "-24h",
   "latest": "now",
   "timezone": "America/Los_Angeles"
  }
 }
}
```

### Response
#### Success Response (200)
- **data** (Array) - Results of the search query
- **fields** (Array) - Fields returned by the search

#### Response Example
```json
{
  "data": [
    {
      "count()": 100
    }
  ],
  "fields": [
    {
      "name": "count()",
      "type": "number"
    }
  ]
}
```
```

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

### Tree Component Expansion and Selection Example (React)

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

This React example showcases a 'Tree' component enhanced with both expansion toggles and item selection checkboxes. It utilizes `useState` to manage the expanded state and a similar pattern for selection. The `ItemSelectionCheckbox` component renders the checkbox, and `TreeItemWithExpansionAndSelection` integrates both the toggle and the checkbox into each tree item. Event handlers prevent default behavior to ensure proper interaction.

```jsx
import React, { useCallback, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import ChevronDown from '@splunk/react-icons/ChevronDown';
import ChevronRight from '@splunk/react-icons/ChevronRight';
import Checkbox from '@splunk/react-ui/Checkbox';
import Tree from '@splunk/react-ui/Tree';
import { variables } from '@splunk/themes';

const StyledExpansionToggleWrapper = styled.span`
  display: inline-flex;
  width: 16px;
`;

const StyledCheckbox = styled(Checkbox)`
  padding-inline: ${variables.spacingSmall};
`;

const StyledSpan = styled.span`
  align-items: center;
  display: inline-flex;
  min-height: 100%;
  padding: ${variables.spacingXSmall} 0;
`;

const ExpansionToggle = ({ expanded, onToggleExpansion, treeItemId }) => (
  <span onClick={(e) => {
    e.preventDefault();
    onToggleExpansion?.(e, { treeItemId });
  }} >
    {expanded ? <ChevronDown /> : <ChevronRight />}
  </span>
);

const ItemSelectionCheckbox = ({ selected, onToggleSelection, treeItemId }) => (
  <span onClick={(e) => {
    e.preventDefault();
    onToggleSelection?.(e, { treeItemId });
  }} style={{ display: 'inline-flex', userSelect: 'none' }} >
    <StyledCheckbox checked={selected} inert />
  </span>
);

const TreeItemWithExpansionAndSelection = ({ children, expanded, id, label, onToggleSelection, onToggleExpansion, selected, ...otherTreeItemProps }) => {
  const treeItemRef = useRef(null);

  const content = useMemo(() => {
    const renderExpansionToggle = () => {
      if (!children) {
        re
```

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

### Internationalization Utilities

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

Utilities for handling internationalization and translations. Provides functions for getting translated text and managing the translator function.

```APIDOC
## gettext(text)

### Description
Translates text using the shared translator. By default, this is `window.gettext` if it's available. Otherwise, the identify function is used.

### Method
`gettext` (function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **text** (String) - Required - The text to translate.

### Request Example
```json
{
  "text": "Hello, world!"
}
```

### Response
#### Success Response (200)
- **translatedText** (String) - The translated text.

#### Response Example
```json
{
  "translatedText": "Bonjour le monde!"
}
```

## _(text)

### Description
This is an alias for `gettext`.

### Method
`_` (function)

### Parameters
- **text** (String) - Required - The text to translate.

### Request Example
```json
{
  "text": "Hello, world!"
}
```

### Response
#### Success Response (200)
- **translatedText** (String) - The translated text.

#### Response Example
```json
{
  "translatedText": "Bonjour le monde!"
}
```

## setSharedTranslator(newTranslator)

### Description
Sets the shared translator. It is used by all subsequent calls of `gettext` and `_`.

### Method
`setSharedTranslator` (function)

### Parameters
- **newTranslator** (function) - Required - A function that returns the translated string.

### Request Example
```javascript
const myTranslator = (text) => `Translated: ${text}`;
setSharedTranslator(myTranslator);
```

### Response
#### Success Response (200)
No specific response body, operation is performed.

## resetSharedTranslator()

### Description
Resets the shared translator to `window.gettext` if available, and the identify function otherwise. This function is invoked automatically during module load.

### Method
`resetSharedTranslator` (function)

### Request Example
```javascript
resetSharedTranslator();
```

### Response
#### Success Response (200)
No specific response body, operation is performed.
```

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

### Create Simple SearchJob with splunk-ui-kit-crawler

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

Creates a new search job using the SearchJob.create method. Requires a search query and optional earliest/latest time parameters. Returns a SearchJob object.

```javascript
const mySearchJob = SearchJob.create({
    search: 'index=_internal | head 10',
    earliest_time: '-60m@m',
    latest_time: 'now',
});
```

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

### Webpack Configurations

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

Documentation for webpack configurations provided by @splunk/webpack-configs, including base configuration, component library build, and dashboard extensions.

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

### Description

Installs the package and its dependencies.

### Method

`npm install`

### Usage

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
   ```

## Base Configuration

### Description

Provides a base webpack configuration.

### Usage

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

module.exports = webpackMerge(baseConfig, {
    entry: {...},
    output: {...},
});
```

## Component Library Configuration

### Description

A configuration for building a library of shareable components.

### Usage

```javascript
const webpackMerge = require('webpack-merge');
const baseComponentConfig = require('@splunk/webpack-configs/component.config').default;

module.exports = webpackMerge(baseComponentConfig, {
    entry: {...},
    output: {...},
});
```

## Dashboard Extensions Configuration

### Description

Configuration for dashboard extensions.

### Usage

```javascript
const webpackMerge = require('webpack-merge');
const baseDashboardConfig = require('@splunk/webpack-configs/dashboard.config').default;

module.exports = webpackMerge(baseDashboardConfig, {
    entry: {...},
    output: {...},
});
```

**Note:** `@splunk/dashboard-extension-webpack-plugin` must be added as a dev dependency if this configuration is used.

## Options

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

### `babelTypescript`

- **Type:** `boolean`
- **Default:** `true`
- **Description:** Includes `.ts` and `.tsx` files in the `babel-loader` configuration used by all configurations.

### Usage with Options

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

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

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

### Get Field from DataFrame

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

Retrieves a field from a DataFrame object. This is a fundamental operation for accessing data within the Splunk UI Kit visualizations.

```javascript
/**
 * Retrieves a field from a DataFrame.
 * @param {object} dataFrame - The DataFrame object.
 * @param {string} fieldName - The name of the field to retrieve.
 * @returns {*} The value of the specified field, or undefined if not found.
 */
function getField(dataFrame, fieldName) {
  // Implementation details for retrieving the field
  return dataFrame[fieldName];
}
```

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

### Splunk UI Kit Crawler - Version 4.0.0 Release Notes

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

Release notes for version 4.0.0 of the splunk-ui-kit-crawler project. This version includes a relicensing to Apache-2.0.

```APIDOC
## Version 4.0.0 Release Notes

### Summary
Relicensed the project to Apache-2.0.

### Changed

  * [Breaking] Relicensed to Apache-2.0
```