Multi Chart

Multi Chart component with Prev/Next and Drill down functionality.

Features/Functionality

Chart will be drawn by given data.
Previous/Next charts will be loaded for parent chart only.
Charts can be drilled down and a breadcrumb will be shown for drilled down charts.
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/multi_chart_elms"></require>
<cst-multi-chart item.bind="{data}" options.bind="{options}" evt-chart-click-callback.bind="{evtChartClickCallback}" evt-btn-click-callback.bind="{evtBtnClickCallback}"></cst-multi-chart>

Bindable Properties

Property Name	Data Type	Required	Description
item	Object	Yes	Data to show chart
options	Object	No	Component Options
evtChartClickCallback	method	No	Method to be called on click of graph
evtBtnClickCallback	method	No	Method to be called on click of prev/next btn.

Structure of bindable properties

item

{
    1: {
        chartData: {},
        chartOptions: {},
        type: '',
        runTimeChartTypes: [],
        chartHeading: '',
        isLast: true/false
    },...
}

options

options = {
    isPrevNext: false,
    pageLabel:{},
    pageColorData:{}
}

evtChartClickCallback

evtChartClickCallback(evt, info)
info = {
    parentContext: instance,
    loopParentContext: instance,
    doubleLoopParentContext: instance,
    value : {
        activeId: '',
        newActiveId:'',
        data: item
    }
}

evtBtnClickCallback

evtBtnClickCallback(evt, info)
info = {
    parentContext: instance,
    loopParentContext: instance,
    doubleLoopParentContext: instance,
    value : {
        activeId: '',
        newActiveId:'',
        data: item
    }
}

CSS Overriding

Following classes are given to override CSS:
- .cst-multi-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/multi_chart_elms/multi_chart_elm"></require>
  <div>
    <cst-multi-chart item.bind="data" options.bind="options" evt-chart-click-callback.bind="evtChartClickCallback" evt-btn-click-callback.bind="evtBtnClickCallback"></cst-multi-chart>
  </div>
</template>

class MyCls{
    constructor(){
        this.options = {
            isPrevNext: true
        }
    }

    evtBtnClickCallback(_event, _info){

    }

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