Documentation

Class

ChartView

kiss.ui.ChartView(config)

The Chart derives from DataComponent.

It's a powerful chart view with the following features:

Constructor

# new ChartView(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 myChartView = document.createElement("a-chartview").init(config)

Or use the shorthand for it:

const myChartView = createChartView({
  id: "my-chartview",
  color: "#00aaee",
  collection: kiss.app.collections["opportunity"],
  chartType: "bar",
  categoryField: "Country"
})

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

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

The data source collection
dashboard boolean <optional>

true if the chart is part of a dashboard. Default is false.
record object <optional>

Record to persist the view configuration into the db
chartType string <optional>

bar | line | pie | doughnut
isTimeSeries string <optional>

true if the chart is a time series. It will manage the timeField and timePeriod for X axis.
categoryField string <optional>

Field to group by, if not a time series
timeField string <optional>

Field to use as time axis, if a time series
timePeriod string <optional>

Grouping unit for time axis, if a time series: day, week, month, quarter, year
operationType string <optional>

"count" or "summary"
summaryOperation string <optional>

"sum", "average". Only used if operationType is "summary"
valueField string <optional>

Field to use as value (Y axis)
precision number <optional>

Number of decimal places to show, only for "number" charts. Default is 0.
startAtZero boolean <optional>

true to start the Y axis at zero. Not used for pie & doughnut charts
showLegend boolean <optional>

true to show the legend
legendPosition string <optional>

top, bottom, left, right
showValues boolean <optional>

true to show the values on the chart
showLabels boolean <optional>

true to show the labels on the chart
centerLabels boolean <optional>

true to center labels inside the chart. Default is true.
labelColor string <optional>

Hexa color code for labels inside the chart. Ex: #00aaee
color string <optional>

Hexa color code. Ex: #00aaee
showToolbar boolean <optional>

false to hide the toolbar (default = true)
showActions boolean <optional>

false to hide the custom actions menu (default = true)
canSort boolean <optional>

false to hide the sort button (default = true)
canFilter boolean <optional>

false to hide the filter button (default = true)
actions Array.<object> <optional>

Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}}
useCDN boolean <optional>

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

View Source client/ui/data/chartview.js, line 54

this

Generated markup

<a-chartview class="a-chartview">
     <div class="chartview-header">
         <div class="chartview-title">
             <!-- Chart title -->
         </div>
         <div class="chartview-toolbar">
             <!-- Chart view toolbar items -->
         </div>
     </div>
     <div class="chartview-chart">
         <!-- Embedded chart component -->
     </div>
</a-chartview>

Methods

# _consolidateData(rawData, interval, operation) → {Array}

Consolidates data for temporal display in Chart.js

Parameters:
Name Type Description
rawData Array

Array of raw data [{ x: , y: }]
interval String

Sampling interval ("day", "week", "month", "quarter", "year")
operation String

Aggregation operation ("count", "sum", "average")

View Source client/ui/data/chartview.js, line 1251

  • Consolidated dataset for Chart.js
Array

# _getCategoryColor(groupFieldId, columnValue) → {string}

Get the color of a category, if any

Parameters:
Name Type Description
groupFieldId string
columnValue *

View Source client/ui/data/chartview.js, line 1804

The color of the category

string

# setColor(newColor)

Update the chart color (toolbar buttons + modal windows)

Parameters:
Name Type Description
newColor string

View Source client/ui/data/chartview.js, line 187

# setTitle(newTitle)

Set the chart title

Parameters:
Name Type Description
newTitle string

View Source client/ui/data/chartview.js, line 178

# async showRecords(categoryopt)

Display the source records of the chart

Parameters:
Name Type Attributes Description
category string <optional>

Optional category to filter the records

View Source client/ui/data/chartview.js, line 880

# showSetupWindow()

Display the setup window to configure the chart

View Source client/ui/data/chartview.js, line 221

# updateLayout()

Update the chart layout

View Source client/ui/data/chartview.js, line 197