Single Chart

Basic Chart component.

Features/Functionality

Chart can be drawn by giving data.
Types of charts can be changed on run time.
Reset method can be called directly by page using instance to empty all the chart information.
READABLE CODE
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

font-awesome
jquery
shared styles
shared scripts

HTML Structure

<require from="{user_path}/chart_elems/single_chart_elms"></require>
<cst-single-chart ext-item.bind="{data}" ext-type.bind="{type}" ext-run-time-chart-types.bind="{runTimeChartTypes}" ext-options.bind="{options}" instance-callback.bind="{instanceCallback}" evt-click-callback.bind="{evtClickCallback}"></cst-single-chart>

Bindable Properties

Property Name	Data Type	Required	Description
extItem	Object	Yes	Data to show chart
extType	String	No	Type of chart to be shown
extRunTimeChartTypes	Array	No	Chart types to be shown for run time change
extOptions	Object	No	Options for components
instanceCallback	method	No	Gives instance of component
evtClickCallback	method	No	Method to be called on click of graph
chartChangeCallback	method	No	Method to be called when chart is changed.
dirtyCheck	string	No	Two way bind prop, to stop ext methods from triggering

Structure of bindable properties

extItem

chartData = {
    labels: ["","","",""],
    dataSets: [
        {
            label: "",
            data: []
        }
    ]
}

extType

type = 'bar'

extRunTimeChartTypes

runTimeChartTypes = [
    {
        id: "",
        iconName: "",
        title: ""
    }
]

extOptions

options = {
    maintainAspectRatio: false
    xAxisLabel: '',
    yAxisLabel:'',
    pageLabel:{},
    pageColorData:{}
}

Note

While updating options, chart is not getting recreated. We are just capturing data and then when chart is recreated due to any other change, it will be reflected.

instanceCallback

instanceCallback(parentContext, instance)

evtClickCallback

evtClickCallback(evt, info)
info = {
    parentContext: instance,
    loopParentContext: instance,
    doubleLoopParentContext: instance,
    value : {
        datasetIndex: 0,
        itemIndex: null,
        itemLabel: '',
        itemValue: null
    }
}

chartChangeCallback

chartChangeCallback(info)
info = {
    parentContext: instance,
    value: {
        data:{},
        type: '',
        runTimeChartTypes: [],
        options: {}
    }
}

dirtyCheck

dirtyCheck = 'all/item/type/runTimeChartTypes/options'
This property stops triggering ext methods if given any of these values.
After assigning value, if value is getting reset in same mathod, then use timeout as aurelia applies code in batches.

Example:

this.dirtyCheck = 'type';
setTimeout(() => {
    // Do something
    this.dirtyCheck = '';
},20);

CSS Overriding

Following classes are given to override CSS:
- .cst-single-chart-container-override : Container Class

Note

While giving the classes in page, give them in nested structure.

Rules

Working Example

HTML

<template>
  <require from="./shared/custom_comp/chart_elems/single_chart_elms/single_chart_elm"></require>
  <div>
    <cst-single-chart ext-item.bind="data" ext-type.bind="type" ext-run-time-chart-types.bind="runTimeChartTypes" ext-options.bind="options" instance-callback.bind="instanceCallback" evt-click-callback.bind="evtClickCallback"></cst-single-chart>
  </div>
</template>

class MyCls{
    constructor(){
        this.options = {
            maintainAspectRatio: true
        }
        this.containerClass: 'cst-container-cls';
    }

    instanceCallback(_parentContext, _instance){

    }

    evtClickCallback(_event,_info) {
    
    }
}
export { MyCls }