# 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",
chartValueField: "Amount",
group: ["Country"]
})
myChartView.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
collection |
Collection
|
The data source collection |
|
record |
object
|
<optional> |
Record to persist the view configuration into the db |
chartType |
string
|
<optional> |
pie, bar, line... |
chartValueField |
string
|
<optional> |
Field used to display the values |
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() {}} |
width |
number
|
string
|
<optional> |
|
height |
number
|
string
|
<optional> |
this
Generated markup
<a-chartview class="a-chartview">
<div class="chartview-toolbar">
<!-- Chart view toolbar items -->
</div>
<div class="chartview-chart">
<!-- Embedded chart -->
</div>
</a-chartview>
Methods
# _getCategoryColor(groupFieldId, columnValue) → {string}
Get the color of a category, if any
Parameters:
| Name | Type | Description |
|---|---|---|
groupFieldId |
string
|
|
columnValue |
*
|
The color of the category
string
# refresh()
Generic method to refresh / re-render the view
Note: used in dataComponent (parent class) showSearchBar method. This method is invoked to refresh the view after a full-text search has been performed
# async setColor(newColor)
Update the chart color (toolbar buttons + modal windows)
Parameters:
| Name | Type | Description |
|---|---|---|
newColor |
string
|
# showFieldsWindow()
Show the window just under the fields selector button
# showFilterWindow()
Show the window just under the filter button
# showSetupWindow()
Display the setup window to configure the chart:
- page 1: choose the chart type
- page 2: choose the grouping field
- page 3: choose the value field
# showSortWindow()
Show the window just under the sorting button
# updateLayout()
Update the chart size (recomputes its width and height functions)