Expandable Chart Card
- Shows an expandable card with Chart and Selecting feature.
Example Link
Features/Functionality
- Shows card with expand and collapse feature.
- Labels are also shown.
- Labels can be selected.
- Component is responsive.
- It is cross browser compatible. (Edge, Firefox, chrome).
Basic Usage
Dependencies
- jquery
- font-awesome
- shared styles
Definition
<cst-expandable-chart-card schema.bind="${schema}"></cst-expandable-chart-card>
Schema Description
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| chartSchema | object type | Schema to show chart data. |
| selectedId | string type | Id which is selected. |
| object type | Heading of the card. | |
| object type | Options for icon component. | |
| object array type | Array of labels to be shown. | |
| elmInstance | any type | Icon element instance. |
| customParentContext | any type | Parent Context to call callback methods. |
Item
| Property | Value | Description | Value |
|---|---|---|---|
| id | string type | Id | |
| label | string type | Label to be shown. | |
| color | string type | Color to be shown. |
options
| Property | Value | Description | Value |
|---|---|---|---|
| isCardOpen | boolean type | If card should be opened or closed |
Schema Example
let schema = {
chartSchema: {}, // Instance of Single Chart
heading: {},
options: {
isCardOpen:
},
sideLabelArr: [
{
id:'',
label: '',
color: ''
}
]
elmInstance: {},
customParentContext: {}