### Start Tile Server GL

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/offlinemaps.htm

Use this command to start the Tile Server GL, specifying the map data file and the desired port. Ensure the port does not conflict with existing KX installations.

```bash
tileserver-gl 2024-06-25-planet.mbtiles -p 8082
```

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

### Install TileServer-GL from Source

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/offlinemaps.htm

Use these commands to clone the repository and install dependencies locally for a source-based installation.

```bash
git clone https://github.com/maptiler/tileserver-gl.git
    cd tileserver-gl
    npm install
```

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

### Basic Analyst Visual Grammar of Graphics Example

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/analystvisual.htm

This code demonstrates a basic setup for a Grammar of Graphics visualization within KX Dashboards using an Analyst connection. Ensure an Analyst connection and data source are configured prior to use.

```q
.gg.dash.go 
.qp.theme[.gg.dash.dark] 
.qp.point[([]x:til 45); `x; `x; ::]
```

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

### Install TileServer-GL Globally

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/offlinemaps.htm

Use this command to install the TileServer-GL package globally via npm.

```bash
npm install -g tileserver-gl
```

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

### Create Date Source for Date Range Picker

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/daterangepicker.htm

Example q syntax to create a data source with 365 sequential date values starting from March 1, 2024. This data source must return values of kdb+ type 'date'.

```q
([]
        d: (2024.03.01 + til 365))
```

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

### Sunburst Chart Setup and Configuration

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/sunburst.htm

This section covers the initial setup and detailed property configuration for the Sunburst Chart component.

```APIDOC
## Sunburst Chart Setup and Configuration

### Description
This section describes how to set up and configure the Sunburst Chart component, which displays hierarchical data with inner circles and outer rings.

### Set up a Sunburst Chart
To set up a Sunburst Chart component:
1. Drag and drop the component into the workspace.
2. Assign a data source.
3. Set 'Breakdown' with a view state parameter of type `list`, using categories from your data source.

### Sunburst Chart Properties

#### Basics

| Field | Description |
|---|---|
| Name | A user-defined name for the component. |
| Data Source | Reference to the data source configuration. |
| Focus | A view state parameter for linking components. |
| Node Click | Defines chart behavior on node interaction: `default` (fixed chart) or `rootToNode` (redraws based on selection). |
| Selected Value | A view state parameter to store the selected hierarchy level. |
| Selected Value Attribute | Attribute used for 'Selected Value': `name`, `value`, or `dataIndex`. |

#### Data

| Field | Description |
|---|---|
| Breakdown | A `list` type view state parameter defining hierarchical levels from the data source. |
| Weight | A numeric variable from the data source that determines node size. |
| Color | Options for node coloring: `default` (shared across hierarchies), `fixed` (single color), `level` (different colors per hierarchy level), `visual map` (gradient by Weight). |
| Data column | Column selected from the data source. |

#### Config

##### Radius

| Field | Description |
|---|---|
| Radius Inner | A value above zero creates a doughnut hole in the chart. |
| Radius Outer | A value of 100 bounds the chart to the component's top and bottom edges. |

##### Label

| Field | Description |
|---|---|
| Show | Toggles the display of labels for each node value. |
| Display | Values for labels are taken from a data source column. |
| Color | Font color for labels. |
| Rotate | Sets the position and alignment of labels. |
| Position | Label position. |
| Align | Label alignment. |

###### Font

| Field | Description |
|---|---|
| Radius Outer | Sets the font size and style of node labels. |
| Radius Inner | Sets the font size and style of node labels. |

###### Format

| Field | Description |
|---|---|
| Format | Format of the label. |
| Decimal | For numeric formats. |
| Hide Trailing Zeroes | Hides trailing zeros in numeric formats. |
| Date/Time Format | For datetime formats. |
| Prefix | Text to display before the label (e.g., currency symbol). |
| Suffix | Text to display after the label (e.g., percentage). |
| Threshold | Frequency of node labels. |
| Fit Text | Options for label fitting: `Shorten Text` or `Overflow`. |

#### Visual map

| Field | Description |
|---|---|
| Type | Gradient type: `continuous` or `piecewise`. |
| Label Color | Font color for the labels of `piecewise` sections. |
| Min | Minimum value for the visual map gradient. |
| Max | Maximum value for the visual map gradient. |
| Pieces | Number of `piecewise` sections for the visual map. |

### Tooltip
Enable to display tooltips on node rollover.

### Highlight Rules
Refer to Highlight Rules for details.

### Style, Format, Margins
Refer to Style for details.
```

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

### Example Usage of api.subscribe

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/apidatasource.htm

An example of how to use the api.subscribe function with a callback to handle data updates.

```javascript
api.subscribe(dataSource, function (meta, data, error) {
    // Apply to component
});
```

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

### Install KX Dashboards via Helm

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/kubernetes-deployment.htm

Deploys the dash-web chart from a local filesystem path using a specific values file.

```bash
helm install dash ./helm/dash-web -f dash-web-devval.yaml
```

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

### Launch KX Dashboards and Sample Data

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/standard-deploy.htm

Commands to start the sample data process and the dashboard server in a terminal environment.

```Bash
$ q sample/demo.q -u 1 &
$ q dash.q -p 10001 -u 1
```

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

### Configure Logo Background

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/themes/logochange.htm

Examples for setting the background image for the login logo.

```CSS
background: transparent url("login_logo.svg") no-repeat 1px 10px;
```

```CSS
url("../images/login_logo.svg")
```

```CSS
div#appdiv .quick-base.login-dialog .logo {
 background: transparent url("login_logo.svg") no-repeat 1px 10px;
}
```

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

### Composite Sparklines Example

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/datagrid.htm

Example JSON configuration for creating a composite sparkline that combines bar and line charts.

```APIDOC
## Composite Sparklines
A composite sparkline combines multiple individual sparklines into a single chart.

### Request Example
```json
[
  {
    "type": "bar",
    "composite": false,
    "height": "29px",
    "width": "100%"
  },
  {
    "type": "line",
    "composite": true,
    "fillColor": "rgba(0,255,0, 0.2)",
    "lineColor": "#00ff00",
    "height": "29px",
    "width": "100%"
  }
]
```
```

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

### Define Action Tracker Dictionary Keys

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/actiontracker.htm

Example format for dictionary keys when specifying parameters in the UI.

```text
`sym`alertkey`source`description`alertClass`tag1`tag2`tag10
```

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

### Query Data Table Example

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/map.htm

Example of a data table structure for lines query. This format can be downloaded as a CSV or a datasource query.

```q
Stop         long      lat      Line
------------------------------------
Tallaght     -6.374589 53.28749 Red
Hospital     -6.37885  53.28937 Red
Cookstown    -6.384397 53.29351 Red
Belgard      -6.374886 53.29929 Red
Kingswood    -6.36525  53.30369 Red
Red_Cow      -6.369872 53.31683 Red
Kylemore     -6.343444 53.32666 Red
Bluebell     -6.333792 53.3293  Red
Blackhorse   -6.327394 53.33426 Red
Drimnagh     -6.318161 53.33536 Red
Goldenbridge -6.313569 53.33589 Red
Suir_Road    -6.307211 53.33662 Red
Rialto       -6.297242 53.33791 Red
Fatima       -6.292547 53.33844 Red
Jamess       -6.293361 53.34194 Red
Heuston      -6.291808 53.34665 Red
Museum       -6.286714 53.34787 Red
Smithfield   -6.277728 53.34713 Red
Four_Courts  -6.273436 53.34686 Red
Jervis       -6.265333 53.34769 Red
..

```

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

### Install KX Dashboards via Helm

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/kubernetes-deployment.htm

Deploys the KX Dashboards client using the specified Helm chart and configuration file.

```bash
$ helm install dash kxi-repo/dash-web --version="{version}" -f path/to/dash-web-devval.yaml
```

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

### Run KX Dashboards with Docker Compose

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/docker-install.htm

Command to start all services defined in the `docker-compose.yml` file. Navigate to the directory containing the file before execution.

```bash
docker compose up
                    
```

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

### Data Form Component Setup

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/dataform.htm

Steps to set up a Data Form component in the KX Dashboards workspace.

```APIDOC
## Set up a Data Form

To set up a Data Form component, click-and-drag the component into the workspace and configure the following:
  1. Ensure your data source is a parameterized function.
  2. Use either text inputs or dropdown menus for each parameter in your data form, defined by Parameter Type.
  3. If using a data source to build the contents of the dropdown, use data source mapping to assign value and text elements. Otherwise, use Items to add a selection option.
  4. Additional styling for the data form can be found in the style menu.

Refer to Data Form properties described in the next section for details on additional properties.
```

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

### Configure Vega Chart Data Source

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/vegachart.htm

Examples showing the initial URL-based data configuration and the subsequent override when a Data Source is applied.

```JSON
{
    "data": [{
        "name": "vectors",
        "url": "data/windvectors.csv",
        "format": {"type": "csv", "parse": "auto"}      
    }],
    .. 
}
```

```JSON
{
    "data": [{
        "name": "vectors",
        "values": [
            {
                longitude:7.5,
                latitude:4.3,
                ..
                speed:3.12
            },
            ..
        ]
    }],
    ..    
}
```

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

### Add Weekdays to NOW (Example)

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/viewstateparameters.htm

Illustrates adding 1 weekday to NOW. If NOW is a Friday, the result is the following Monday.

```q
NOW+1WD
```

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

### Custom Tooltip Example for Gauge Component

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/gauge.htm

A simple HTML example for defining a custom tooltip in the Gauge component. This template uses Handlebars syntax for conditional display and iteration.

```html
<table>
    {{#if this.0.title}}<thead><tr><th>{{this.0.title}}</thead><th></tr>{{/if}}
    <tbody>{{#each this}}
        <tr>
            <td>{{dataCol}}: </td>
            <td>{{dataVal}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>                    
```

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

### Define Simple Layer Data and Style

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/offlinemaps.htm

Examples of GeoJSON feature collection data and layer style properties.

```json
{ "type":"FeatureCollection", "features": [{ "type":"Feature", "properties": { "scalerank":3,"area_sqkm":1002.565, "featureclass":"Urban area" }, "geometry": { "type":"Polygon", "coordinates": [[[-121.37881303595779,38.39168793390614],[-121.37881303595779,38.39168793390614],[-121.37881303595779,38.39168793390614],[-121.42144609259859,38.3858743352733],[-121.48040890184362,38.39168793390614],[-121.51616899298959,38.444811306302185],[-121.58203060594559,38.4678848333205],[-121.5930118478076,38.626428127591964],[-121.46772233771595,38.671102403308296],[-121.39491024461671,38.75068410903778],[-121.31532853888723,38.82349620213702],[-121.23913163947286,38.82349620213702],[-121.19226111538413,38.73701569269657],[-121.13750993537089,38.65836416274834],[-121.19386308478518,38.61312144627681],[-121.26453060594432,38.58219310155013],[-121.32057369676485,38.53666616470099],[-121.37881303595779,38.4933096380081],[-121.37062232143953,38.43667226821621],[-121.37881303595779,38.39168793390614]]] } } }] }
```

```json
{ "id": "urban-areas-fill", "type": "fill", "source": "urban-areas", "layout": {}, "paint": { "fill-color": "#f08", "fill-opacity": 0.4 } }
```

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

### GET /getViewStates

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/DataModelInterface.QuickBase.ViewModelInterface.htm

Retrieves view states based on root and path.

```APIDOC
## GET /getViewStates

### Description
Retrieves view states filtered by root and optional path.

### Method
GET

### Parameters
#### Query Parameters
- **root** (any) - Required - The root object.
- **path** (string) - Optional - The path to filter by.
- **includeSettings** (boolean) - Optional - Whether to include settings.

### Response
#### Success Response (200)
- **void** - Returns the view states.
```

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

### Define TreeView Data Structure

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/treeview.htm

Example query defining the id, parent, level, name, and icon columns for a TreeView component.

```q
([]
 id:(1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;21;22;23;24;25;26;27;28;29;30;31;32;33;34;35;36;37;38;39;40;41;42;43;44;45;46;47;48;49;50;51;52;53;54;55;56;57;58;59;60;62);
  parent:(0n;1;1;1;1;2;2;6;6;7;8;8;9;9;10;10;3;3;3;3;17;17;4;4;23;23;23;24;24;28;28;29;29;5;5;5;0n;37;37;37;37;37;37;37;37;37;37;0n;48;49;49;49;49;49;48;55;48;57;10;37;37);
 level:(1 2 2 2 2 3 3 4 4 4 5 5 5 5 5 5 3 3 3 3 4 5 3 3 4 4 4 4 4 5 5 5 5 3 3 3 1 2 2 2 2 2 2 2 2 2 2 1 2 3 3 3 3 3 2 3 2 3 5 2 2);


  name:(
    "What would you like to show?";"Comparison";"Distribution";"Composition";"Relationship";"Over Time";"Among Items";"Many Periods";"Few Periods";"Few Categories";"Linear Data";"Cyclical Data";"Single or Few Category";"Multi Category";"Many Items";"Few Items";"Single Variable";"Two Variables";"Three Variables";"Four Variables";"Few Data Points";"Many Data Points";"Static";"Changing over Time";"Simple Share of Total";"Simple Share Grouped";"Accumulation or substraction to total";"Few Periods";"Many Periods";"Only Relative Differences Matter";"Relative and Absolute Differences Matter";"Only Relative Differences Matter";"Relative and Absolute Differences Matter";"Two Variable";"Three Variables";"Four Variables";"Visual by Components";"Canvas Chart";"Chart GL";"3D Charts";"Vega Charts";"Contour Charts";"Sunburst";"BiPartite Chart";"Graph";"Radial";"Treemap";"Features";"Interactive Features";"Pivot Queries";"Viewstates";"Zoom";"Hover";"Tooltips";"Regex";"Wildcard Columns";"Customisation";"Highlight Rules"; "Many Categories";"Financial Chart";"Sparklines Grid");
  
  icon:("fa fa-question-circle";"fa fa-exchange";"fa fa-sitemap";"fa fa-object-ungroup";"fa fa-link";"fa fa-clock-o";"fa fa-object-group";"fa fa-th";"fa fa-th-large";"fa fa-th-large";"fa fa-line-chart";"fa fa-pie-chart";"fa fa-bar-chart";"fa fa-line-chart";"fa fa-bar-chart";"fa fa-bar-chart";"fa fa-circle";"fa fa-ellipsis-h";"fa fa-area-chart";"fa fa-cubes";"fa fa-bar-chart";"fa fa-line-chart";"fa fa-bolt";"fa fa-clock-o";"fa fa-pie-chart";"fa fa-th";"fa fa-sitemap";"fa fa-th-large";"fa fa-th";"fa fa-bar-chart";"fa fa-bar-chart";"fa fa-area-chart";"fa fa-area-chart";"fa fa-ellipsis-h";"fa fa-circle";"fa fa-cubes";"fa fa-tachometer";"fa fa-bar-chart";"fa fa-ellipsis-h";"fa fa-cubes";"fa fa-line-chart";"fa fa-globe";"fa fa-sun-o";"fa fa-area-chart";"fa fa-sitemap";"fa fa-pie-chart";"fa fa-tree";"fa fa-hand-pointer-o";"fa fa-cogs";"fa fa-table";"fa fa-eye";"fa fa-search-plus";"fa fa-mouse-pointer";"fa fa-tag";"fa fa-asterisk";"fa fa-bar-chart";"fa fa-cog";"fa fa-lightbulb-o";"fa fa-table";"fa fa-usd"; "fa fa-table")
  
  )
```

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

### Load PyKX Dashboard Extension

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/datasources.htm

Loads the PyKX Dashboard extension within a q session. Ensure PyKX is installed and configured correctly before running.

```q
q)\l pykx.q
```

```q
q).pykx.loadExtension["dashboards"]
```

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

### Customize Payload Panel with Handlebars

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/actiontracker.htm

Example HTML template using Handlebar helpers to display payload data.

```html
<div><span>{{payload.breachLevel}}</span><span>{{payload.sym}}</span></div>
```

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

### GET /getViewStateList

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/DataModelInterface.QuickBase.ViewModelInterface.htm

Retrieves the list of view states.

```APIDOC
## GET /getViewStateList

### Description
Fetches the list of available view states.

### Method
GET

### Parameters
#### Query Parameters
- **includeSettings** (boolean) - Optional - Whether to include settings in the response.

### Response
#### Success Response (200)
- **void** - Returns the view state list.
```

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

### Custom Binary Analytic for VWAP

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/datasources.htm

Example of a custom binary analytic function for calculating VWAP. This function takes bid size and bid value as inputs to compute the dividend and divisor.

```q
{[a;b] sum[a*b] % (sum[`long $ a])};`bidSize
```

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

### Rolling Syntax Expressions

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/viewstateparameters.htm

Examples of valid rolling syntax expressions used to calculate dynamic time values.

```text
NOW+24:00
```

```text
NOW+10
```

```text
NOW+30
```

```text
NOW-5
```

```text
NOW-10
```

```text
NOW+00:30
```

```text
NOW-48:00
```

```text
NOW+1:30:10
```

```text
NOW+1@12:00
```

```text
NOW-1@23:59:59
```

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

### Add Business Days to NOW (Example)

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/viewstateparameters.htm

Illustrates adding 1 business day to NOW. If NOW is December 31st and January 1st is not a business day, the result is January 2nd.

```q
NOW+1BD
```

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

### Define Sparkline Data Formats

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/datagrid.htm

Examples of the expected data string formats for different sparkline chart types.

```text
10; 8; 9; 3; 5; 8; 5
```

```text
1; 1; 0; 1; -1; -1; 1; -1; 0; 0; 1; 1
```

```text
(1; 1; 2)(20; 50; 80)
```

```text
((1; 4); (2; 3); (3; 2); (4; 1))
```

```text
[3, 7, 1, 9, 5, 2, 8, 4, 0, 6, ...], [9, 1, 4, 7, 3, 2, 6, 0, 8, 5, ...]
```

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

### Configure GeoJSON Point Overlay Data

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/mapbox.htm

Define GeoJSON sources for point overlays, including properties like title and icon. This example shows a combination of sources.

```json
{
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"icon": "monument"
}
}, { 
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"icon": "harbor"
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
}
```

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

### Data Form Validation Query Example

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/dataform.htm

This q query validates user inputs for a Data Form. It accepts a dictionary of inputs and returns a dictionary of error messages. An empty dictionary signifies valid inputs.

```q
    {[data]
        data2:()!();
        if[data[`price]>100;data2[`price]:`$"Price must be less than 100"];
        if[data[`instrument]<>`abc;data2[`instrument]:`$"Invalid Instument";];
        :.mo.data2:data2      
    }
```

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

### Two-Dimensional Pivot Query Example

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/datasources.htm

Use this query structure to create a two-dimensional pivot by specifying both breakdown columns and a column label. Ensure column names match your database.

```q
{[n]
  ([ 
      hub:n?`CHIA`XASX;
      country:n?`UK`USA`CANADA`FRANCE;
      account:n?`4;
      displayQueue:n?`NEW`ASSIGNED`CLOSED
    ]
    ncount:n?100) 
}
```

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

### Get Property Metadata

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/apiviewstates.htm

Retrieves detailed information about a property, including binding type and view state configuration.

```JavaScript
api.getPropertyMeta(path);
```

```JavaScript
api.getPropertyMeta('Basics.Selected');
```

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

### Regex grouping for legend items

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/chartgl.htm

Examples of regular expressions used to dynamically group legend items based on series name patterns.

```regex
/(.+?)\s(\d{4}-\d{2}-\d{2})/
```

```regex
/^nEngine(?<date>\d{4}\.\d{2}\.\d{2})_(?<stat>min|max|avg)$/
```

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

### Range Map Example

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/datagrid.htm

This JSON object demonstrates how to define a range map. It assigns specific values or ranges to colors, useful for conditional formatting in charts.

```json
{
1: "red",
"2:9": "yellow",
"10:": "red"
}
```

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

### Define Workdays in workweek.csv

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/viewstateparameters.htm

Example of defining Monday through Friday as work days in the workweek.csv file. Days are represented by numbers: 1=Sun, 2=Mon, etc.

```csv
2,3,4,5,6
```

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

### Apply Filtered Events in KDB

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/datafilter.htm

Example of a KDB function used to apply filter results to a data source, typically used within a Data Grid component.

```q
{[sym;startTime;endTime;filter] 
    res: dfxQuote;

    .dfilt.apply[res;filter]}
```

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

### GET /getByPath

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/DataModelInterface.QuickBase.ViewModelInterface.htm

Retrieves a ViewModelInterface instance by its path.

```APIDOC
## GET /getByPath

### Description
Retrieves a ViewModelInterface instance based on the provided path.

### Method
GET

### Parameters
#### Query Parameters
- **path** (string) - Required - The path to the view model.

### Response
#### Success Response (200)
- **ViewModelInterface** (object) - The requested view model instance.
```

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

### Exclude items with after

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/templates/helper-array.htm

Returns the items of an array after a starting index.

```Handlebars
<!-- array: ['a', 'b', 'c'] -->
{{after array 1}}
<!-- results in: '["c"]' -->
```

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

### Create HelloWorld Component

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/apiintro.htm

Defines a simple 'Hello World' component using AMD modules. This code should be placed in www/modules/HelloWorld/main.js.

```javascript
define(function () {
    return function (options) {
        options.el.textContent = "Hello World";
    }
});

```

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

### GET /toJSON

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/DataModelInterface.QuickBase.ViewModelInterface.htm

Converts the view model to a JSON representation.

```APIDOC
## GET /toJSON

### Description
Serializes the view model to a JSON object.

### Method
GET

### Parameters
#### Query Parameters
- **withAllProperties** (any) - Required - Flag to include all properties in the output.

### Response
#### Success Response (200)
- **Record<string, any>** - The JSON representation of the view model.
```

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

### PDF Server Configuration

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/publish.htm

Configuration steps to enable the PDF server for printing KX Dashboards.

```APIDOC
## PDF Server Setup

### Description
Instructions for installing and enabling the PDF server to allow dashboard printing via the Toolbar menu.

### Configuration
Update `/www/config.json` to enable the PDF server:

### Request Example
{
    "NewPdf": true,
    "pushStateBase": "",
    "PdfUrl": "http://localhost:5011/"
}
```

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

### loadSetting

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/DataModelInterface.QuickBase.ComponentInterface.htm

Load a setting from the .settings viewstate.

```APIDOC
## loadSetting

### Description
Load a setting from the .settings viewstate.

### Parameters
#### Path Parameters
- **key** (string) - Required
- **namespace** (any) - Required

### Response
- **Returns** (string) - The value of the setting.
```

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

### Add KX Helm Chart Repository

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/kubernetes-deployment.htm

Add the official KX Helm chart repository to your Helm configuration. Replace `<username>` and `<password>` with your KX Downloads Portal credentials.

```bash
helm repo add kxi-repo https://portal.dl.kx.com/assets/helm --username <username> --password <password>
```

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

### Run kdb+ Streaming Process

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/datasources.htm

Execute a kdb+ streaming process on a specified port. Ensure the 'stream.q' script is in the current directory.

```bash
C:\User\Desktop\Direct\sample> q stream.q -p 6814
```

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

### Sample Dropdown Data Source Query

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/dropdownlist.htm

Use this sample query to populate a dropdown list when connected to the htmlevalcongroup data connection source. Ensure the data source has values in the correct format and type.

```sql
select distinct src from dfxQuote
```

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

### kdb+/q In-Query Parameter Syntax

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/viewstateparameters.htm

Use <%param%> syntax in kdb+/q queries to substitute view state parameters. Ensure parameter types match between the view state and the query.

```q
select from table where column1 = <%x%>
```

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

### Define Holiday in holidayCalendar.csv

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/viewstateparameters.htm

Example of defining January 1, 2024 as a holiday in the holidayCalendar.csv file. Dates can be formatted as YYYY-MM-DD.

```csv
2024-01-01
```

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

### startsWith

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/templates/helper-string.htm

Tests whether a string begins with the given prefix.

```APIDOC
## startsWith

### Description
Tests whether a string begins with the given prefix.

### Parameters
- **prefix** (String) - Required
- **testString** (String) - Required
- **options** (String) - Required

### Returns
- **String**

### Request Example
{{#startsWith "Goodbye" "Hello, world!"}}
  Whoops
{{else}}
  Bro, do you even hello world?
{{/startsWith}}
```

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

### Login to KX Downloads Portal

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/docker-install.htm

Command to authenticate with the KX Downloads Portal using your username and bearer token. This is required before pulling images.

```bash
docker login portal.dl.kx.com -u <user_name> -p <bearer_token>                
```

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

### Configure PDF Server URL

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/publish.htm

Update the configuration file to enable the PDF server integration in KX Dashboards.

```json
{
    "NewPdf": true,
    "pushStateBase": "",
    "PdfUrl": "http://localhost:5011/"
}
```

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

### navigate

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/DataModelInterface.QuickBase.ComponentInterface.htm

Navigate to a given dashboard or screen.

```APIDOC
## navigate

### Description
Navigate to a given dashboard/screen.

### Parameters
#### Path Parameters
- **options** (string | Record<string, any>) - Required - Either a dashboard name or an object containing target dashboard, screen and/or viewstate parameters to pass.
```

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

### Create Kubernetes Secret for KX License

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/kubernetes-deployment.htm

Use this command to create a Kubernetes secret to store your KX license. Ensure the path points to your license file.

```bash
kubectl create secret generic kxi-license --from-file=license=path/to/*.lic
```

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

### Configure kdb query for file data

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/blobdownload.htm

Use this query to return a symbol string for the target filename, a symbol string for the target file mime-type, and a byte array for the binary file data. Ensure the byte array contains the correct file data.

```q
([]name:enlist `test.pdf; mimeType: enlist `$"application/pdf"; data: enlist (...))
```

```q
([]name:enlist test.pdf;mimeType: enlist$"application/pdf";data: enlist (0x255044462d312e330d0a25e2e3cfd30d0a0d0a312030206f626a0d0a3c3c0d0a2f54797065202f436174616c6f670d0a2f4f75746c696e65732032203020520d0a2f50616765732033203020520d0a3e3e0d0a656e646f626a0d0a0d0a322030206f626a0d0a3c3c0d0a2f54797065202f4f75746c696e65730d0a2f436f756e7420300d0a3e3e0d0a656e646f626a0d0a0d0a332030206f626a0d0a3c3c0d0a2f54797065202f50616765730d0a2f436f756e7420320d0a2f4b696473205b203420302052203620302052205d200d0a3e3e0d0a656e646f626a0d0a0d0a342030206f626a0d0a3c3c0d0a2f54797065202f506167650d0a2f506172656e742033203020520d0a2f5265736f7572636573203c3c0d0a2f466f6e74203c3c0d0a2f4631203920302052200d0a3e3e0d0a2f50726f635365742038203020520d0a3e3e0d0a2f4d65646961426f78205b302030203631322e30303030203739322e303030305d0d0a2f436f6e74656e74732035203020520d0a3e3e0d0a656e646f626a0d0a0d0a352030206f626a0d0a3c3c202f4c656e6774682031303734203e3e0d0a73747265616d0d0a32204a0d0a42540d0a30203020302072670d0a2f463120303032372054660d0a35372e33373530203732322e323830302054640d0a2820412053696d706c65205044462046696c65202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203638382e363038302054640d0a282054686973206973206120736d616c6c2064656d6f6e7374726174696f6e202e7064662066696c65202d202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203636342e373034302054640d0a28206a75737420666f722075736520696e20746865205669727475616c204d656368616e696373207475746f7269616c732e204d6f726520746578742e20416e64206d6f7265202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203635322e373532302054640d0a2820746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203633382e383438302054640d0a2820416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f7265202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203630342e393434302054640d0a2820746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203539322e393932302054640d0a2820416e64206d6f726520746578742e20416e64206d6f726520746578742e202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203535372e313336302054640d0a2820416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e204576656e206d6f72652e20436f6e74696e756564206f6e20706167652032202e2e2e2920546a0d0a45540d0a656e6473747265616d0d0a656e646f626a0d0a0d0a362030206f626a0d0a3c3c0d0a2f54797065202f506167650d0a2f506172656e742033203020520d0a2f5265736f7572636573203c3c0d0a2f466f6e74203c3c0d0a2f4631203920302052200d0a3e3e0d0a2f50726f635365742038203020520d0a3e3e0d0a2f4d65646961426f78205b302030203631322e30303030203739322e303030305d0d0a2f436f6e74656e74732037203020520d0a3e3e0d0a656e646f626a0d0a0d0a372030206f626a0d0a3c3c202f4c656e67746820363736203e3e0d0a73747265616d0d0a32204a0d0a42540d0a30203020302072670d0a2f463120303032372054660d0a35372e33373530203732322e323830302054640d0a282053696d706c65205044462046696c652032202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203638382e363038302054640d0a28202e2e2e636f6e74696e7565642066726f6d207061676520312e20596574206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203637362e363536302054640d0a2820416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f726520746578742e20416e64206d6f7265202920546a0d0a45540d0a42540d0a2f463120303031302054660d0a36392e32353030203636342e373034302054640d0a2820746578742e204f682c20686f7720626f72696e6720747970696e6720746869732073747566662e20427574206e6f7420617320626f72696e67206173207761746368696e67202920546a0d0a45540d0a42540d
```

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

### Basic Component Styling with CSS

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/apibasic.htm

Apply basic styling to your component using this CSS. Ensure the 'app.css' file is placed in the 'css' folder within your 'www/modules/Basic' directory.

```css
.basic {
    text-align: center;
    font-size: 2em;
}

```

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

### Get Property Value

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/apiviewstates.htm

Retrieves the current value of a property or its bound view state. Usage is typically unnecessary due to onSettingsChange updates.

```JavaScript
api.getProperty(path);
```

```JavaScript
api.getProperty('Basics.Selected');
```

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

### Execute kdb+/q Query

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/datasources.htm

Retrieves all data from the specified table using q language syntax.

```q
FXTradeData
```

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

### Iterate and Index Currency Pairs

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/template.htm

Display the index of each currency pair in a list.

```q
([] currencyPairs:(("EUR/USD";"BRL/GBP"); ("JPY/AUD";"CHF/CAD";"NOK/INR")))
```

```Handlebars
{{#each currencyPairs}}
    {{add @index 1}}:{{this}}
{{/each}}
```

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

### List Kubernetes Services

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/kubernetes-deployment.htm

Displays all services in the current namespace to identify the correct service name for port forwarding.

```bash
kubectl get svc
```

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

### Regex for Y-axis Data Exclusion

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/canvascharts.htm

Use regular expressions to define axes, for example, to plot all column data except the 'Date' column on a Y-axis.

```regex
Regex for Data
Regular Expressions can be used to define Axes instead of a data source column. For example, a Y-axis plot to show all column data except the `Date` column:
```

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

### Generate Sparkline Sample Data in kdb+/q

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/How_to/components/datagrid.htm

Use this query to create a data source containing various formats required for different sparkline chart types.

```q
([]
Single:{ ((60?30) - 5)}each 1_til 101;
Composite: {((20?10);(20?10))}each 1_til 101;
XandY: {((1;rand 10);(2;rand 10);(3;rand 10);(4;rand 10);(5;rand 10);(6;rand 10);(7;rand 10);(8;rand 10);(9;rand 10);(10;rand 10);(11;rand 10);(12;rand 10)) }each 1_til 101;
Stacked: {((3?10);(3?10);(3?10);(3?10);(3?10);(3?10);(3?10);(3?10);(3?10))}each 1_til 101;
Pie:{(3?20)}each 1_til 101;
Tristate:{(1- 60?3)}each 1_til 101
)
```

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

### onSettingsChange

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/api/messages.htm

Callback function to receive settings updates from the KX Dashboards Properties Panel.

```APIDOC
## onSettingsChange

### Description
The component should implement an `onSettingsChange` (settings) function to receive the settings from the KX Dashboards Properties Panel. The full settings object is provided on load, while subsequent changes are passed as a path to the changed property.

### Parameters
#### Request Body
- **settings** (object) - Required - The settings object or a partial object containing the path to the changed property.
```

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

### Test string prefix with startsWith

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Reference/templates/helper-string.htm

Checks if a string begins with a specified prefix and supports conditional blocks.

```Handlebars
{{#startsWith "Goodbye" "Hello, world!"}}
  Whoops
{{else}}
  Bro, do you even hello world?
{{/startsWith}}
```

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

### Docker Compose Configuration for KX Dashboards

Source: https://docs.kx.com/dashboards-direct-latest/dashboards/Get_Started/docker-install.htm

Defines the services, networks, and volumes for deploying KX Dashboards. Ensure to replace `<version>` with the desired image tag and uncomment the appropriate license volume path for your OS.

```yaml
volumes:
  gw-data:

services:
  dash-web:
    image: "portal.dl.kx.com/dash-web:<version>"
    ports: 
      - "9090:8080"
    networks:
      - kx
    restart: unless-stopped
    depends_on:
      - gui-gateway

  gui-gateway:   
    image: "portal.dl.kx.com/kxi-gui-gateway:<version>"
    ports:
      - "10001:10001"
    networks:
      - kx
    restart: unless-stopped
    volumes:
      - gw-data:/opt/kx/app/data
      # NOTE:! without kc.lic qpacker based containers like gui-gateway will not start
      # Uncomment for Windows - create lic directory with valid kc.lic file in it
      # - ./lic:/opt/kx/lic
      # Uncomment for Linux / MacOS - make sure kc.lic file is present in ${HOME}/.qp.licenses
      # - ${HOME}/.qp.licenses:/opt/kx/lic

  gui-data:
    image: "portal.dl.kx.com/kxi-gui-data:<version>"
    ports:
      - "6812:6812"
    restart: unless-stopped
    volumes:
      - .:/opt/kx/app/sample/hdb/date
      # Uncomment for Windows - create lic directory with valid kc.lic file
      # - ./lic:/opt/kx/lic
      # Uncomment for Linux / MacOS - make sure kc.lic file is present in ${HOME}/.qp.licenses
      # - ${HOME}/.qp.licenses:/opt/kx/lic
    networks:
      - kx

                    
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.