Documentation

Class

Dashboard

kiss.ui.Dashboard(config)

The Dashboard derives from DataComponent.

A dashboard is a group of charts that are displayed together in a single screen.

Constructor

# new Dashboard(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the following methods:

Create the Web Component and call its init method:

const myDashboard = document.createElement("a-dashboard").init(config)

Or use the shorthand for it:

const myDashboard = createDashboard({
  id: "my-dashboard",
  collection: kiss.app.collections["opportunity"]
})

myDashboard.render()
Parameters:
Name Type Attributes Description
config object
name string

The dashboard title. We use the "name" property instead of "title" to be consistent with all view names.
collection Collection

The data source collection
record object <optional>

Record to persist the view configuration into the db
canEditView boolean <optional>

true if the user can edit the view setup. Default is true.
useCDN boolean <optional>

Set to false to use the local version of ChartJS. Default is true.

View Source client/ui/data/dashboard.js, line 32

this

Generated markup

<a-dashboard class="a-dashboard">
     <div class="dashboard-header">
         <div class="dashboard-title">
             <!-- Dashboard title -->
         </div>
         <div class="dashboard-toolbar">
             <!-- Dashboard toolbar items -->
         </div>
     </div>
     <div class="dashboard-container">
         <!-- Embedded charts -->
     </div>
</a-dashboard>

Methods

# _getCharts() → {Array.<HTMLElement>}

Get the charts of the dashboard

View Source client/ui/data/dashboard.js, line 919

  • The charts
Array.<HTMLElement>

# _showGroupSetup(groupId, event)

Show the menu to setup a group of charts

Parameters:
Name Type Description
groupId string
event object

The click event

View Source client/ui/data/dashboard.js, line 718

# async addChart(groupId)

Add a chart to a group of charts

Parameters:
Name Type Description
groupId string

View Source client/ui/data/dashboard.js, line 377

this

# async addGroup()

Add a group of charts to the dashboard

View Source client/ui/data/dashboard.js, line 224

this

# checkGroupMove(groupId) → {object}

Checks whether a group can be moved up or down.

Parameters:
Name Type Description
groupId string

The ID of the group to check.

View Source client/ui/data/dashboard.js, line 312

  • An object with up and down properties indicating the possible moves.
object

# async deleteChart(chartId)

Remove a chart from the dashboard

Parameters:
Name Type Description
chartId string

The chart ID to remove

View Source client/ui/data/dashboard.js, line 462

this

# async deleteGroup(groupId)

Delete a group of charts from the dashboard

Parameters:
Name Type Description
groupId string

The group ID to delete

View Source client/ui/data/dashboard.js, line 255

# getChart(chartId) → {HTMLElement}

Get a chart from its ID

Parameters:
Name Type Description
chartId string

View Source client/ui/data/dashboard.js, line 359

  • The chart element
HTMLElement

# getChartIndexInGroup(chartId) → {number}

Get the index of a chart in a group

Parameters:
Name Type Description
chartId string

View Source client/ui/data/dashboard.js, line 476

  • The chart index in the group
number

# getConfig() → {Array.<object>}

Get the current dashboard configuration

View Source client/ui/data/dashboard.js, line 487

  • The dashboard configuration, as an array of groups of charts
Array.<object>

# getGroupCharts(groupId) → {Array.<HTMLElement>}

Get the charts of a group

Parameters:
Name Type Description
groupId string

View Source client/ui/data/dashboard.js, line 349

  • The charts of the group
Array.<HTMLElement>

# getGroupCount() → {number}

Get the number of groups in the dashboard

View Source client/ui/data/dashboard.js, line 339

  • The number of groups
number

# getGroups() → {Array.<HTMLElement>}

Get the groups of the dashboard

View Source client/ui/data/dashboard.js, line 330

  • The groups of charts (1 group = 1 row in the dashboard)
Array.<HTMLElement>

# moveChart(chartId, targetChartId)

Move a chart to another position in the dashboard

Parameters:
Name Type Description
chartId string
targetChartId string

View Source client/ui/data/dashboard.js, line 406

this

# moveGroupDown(groupId)

Move a group down in the dashboard

Parameters:
Name Type Description
groupId string

View Source client/ui/data/dashboard.js, line 294

this

# moveGroupUp(groupId)

Move a group up in the dashboard

Parameters:
Name Type Description
groupId string

View Source client/ui/data/dashboard.js, line 276

this

# async print()

Print the dashboard - Work in progress

View Source client/ui/data/dashboard.js, line 565

# async saveConfig()

Save the current dashboard configuration

View Source client/ui/data/dashboard.js, line 545

this

# setColor(color)

Set the color of the dashboard (mainly buttons at the moment)

Parameters:
Name Type Description
color string

View Source client/ui/data/dashboard.js, line 210

this

# setTitle(newTitle)

Set the dashboard title

Parameters:
Name Type Description
newTitle string

View Source client/ui/data/dashboard.js, line 200

# updateLayout()

Update the layout of the dashboard

View Source client/ui/data/dashboard.js, line 558

this