Single Chart
Definition
<cst-single-chart>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-feature-flag/>
<sub-access-ctrl/>
<sub-raw-attributes/>
</cst-single-chart>
Example
<cst-single-chart id="" type="" data="" options="">
<sub-theme name=""/>
<sub-font name=""/>
<sub-style name="" width="" height=""/>
<sub-feature-flag show-chart-types="">
<sub-access-ctrl check="" can-view="" can-click="" can-change-type="">
<sub-raw-attributes class="">
</cst-single-chart>
OR
<cst-element name="single-chart" schema="" schema-prop=""/>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| variant | string type | Chart type to be shown. |
| array of objects type | Data to be shown in chart. | |
| object type | Data to call API. | |
| object type | Options for the component. | |
| onClick | string type | Callback method to be called on item click. |
| dataFormatCallback | string type | Callback method to be called to format data. |
| elmInstance | object type | Variable holding instance of component. |
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| object | Specifies what features to enable/disable. | |
| object | Specifies what access is given. | |
| object | Specifies raw attributes. | |
| other | any type | Any other info. |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
data
| Property | Value | Description |
|---|---|---|
| label | string type | Value to be shown in x axis. |
| value | number type | value to be shown. |
| items | array type | Array of Objects with label and value to create datasets. |
dataAPI
| Property | Value | Description |
|---|---|---|
| method | string type | API Request Method |
| url | string type | URL to be called. |
| body | object type | Body to be sent in request. |
options
| Property | Value | Description |
|---|---|---|
| object type | Labels to be shown. | |
| title | string type | Chart Title. |
| object type | yAxis options. | |
| yAxisTrimLabelLength | number type | Length of labels. |
| outsideSameColor | boolean type | To show the same or different colors of data points. |
| datasetSameColor | boolean type | To show the same or different colors of dataset. |
| shadeArr | array type | Array of shades to be shown. |
labels
| Property | Value | Description |
|---|---|---|
| yAxis | string type | Label to be shown in yAxis. |
| xAxis | string type | Label to be shown in xAxis. |
| items | array type | Label values to be shown on hover of chart. |
yAxis
| Property | Value | Description |
|---|---|---|
| startValue | number type | Start value of yAxis scale. |
| endValue | number type | End value of yAxis scale. |
| stepValue | number type | Step size. |
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom theme | Name of the theme. |
sub-font
| Property | Value | Description |
|---|---|---|
| name | primary (default roboto)/secondary/ custom font | Name of the font |
sub-style
| Property | Value | Description |
|---|---|---|
| name | primary (material default)/ secondary skeuomorphic(standard/filled/shaped-filled/outlined/shaped-outlined)/ custom | Name of design to be used. |
| width | percentage/pixels/string(small,medium,large) | Gives width/any other prop value |
sub-feature-flag
| Property | Value | Description |
|---|---|---|
| show-chart-types | ??? | Specifies which chart type to be shown. |
sub-access-ctrl
| Property | Value | Description |
|---|---|---|
| can-view | boolean type | Specifies if user has access to view component. |
| can-click | boolean type | Specifies if user has access to click on component. |
| can-change-type | boolean type | Specifies if user has access to change default type of chart. |
sub-raw-attributes
| Property | Value | Description |
|---|---|---|
| class | string | Specifies class name to be applied on component. |
Schema Examples
Full schema
{
id :'', //auto generates by defaults
type: 'bar/line',//default bar (external
data: [{ //default [] (external)
label: 'JAN',
items: [
{
label: 'Day1',
value: 70
},
{
label: 'Day7',
value: 80
}
]
},
{
label: 'FEB',
items: [
{
label: 'Day1',
value: 90
},
{
label: 'Day7',
value: 50
}
]
}, {
label: 'MAR',
items: [
{
label: 'Day1',
value: 40
},
{
label: 'Day7',
value: 30
}
]
}
],
dataAPI:{ //loader till chart shown, onDataFormatSingleChart called before using data
method:'GET',//default
url:'',
body:{}
},
options: {
labels:{
xAxis:'Months', //custom color UI
yAxis:'Count', //custom color UI
values:['Day1','Day7'] //data set & on hover labels
},
title:'',
yAxis: {
startValue: 0,
endValue: 100,
stepValue: 10
},
},
onClick: 'onClickSingleChart',
dataFormatCallback: 'onDataFormatSingleChart',
elmInstance:'',
subFeatureFlag:{
},
subAccessCtrl:{
},
subTheme:{
},
subFont:{
},
subStyle:{
},
subRawAttributes:{
class: ''
}
}
OverRidable Classes
Unit Test Screenshots
UI (Responsiveness) Test Screenshots
Design Images
Demo link
Check List File Link boolean type
Points
- fonts (text - Subtitle 1 - Regular 16, Label - Caption - Regular 12)
- EXT trigger cases
- Check logging, security, performance & flexibility