Multiple chart

Definition

<cst-multi-chart>
   <sub-theme/> 
   <sub-font/>
   <sub-style/>

   <sub-feature-flag/>
   <sub-access-ctrl/>
   <sub-raw-attributes/>
</cst-multi-chart>     

Example

<cst-multi-chart>
   <sub-theme name="" clr-var1="" clr-var2=""/>
   <sub-font name="" font-var1="" font-var2=""/>
   <sub-style name="" width="" height=""/> 

   <sub-feature-flag show-chart-type="">
   <sub-access-ctrl can-view="" can-click="" can-change-type="">
   <sub-raw-attributes class="">
</cst-multi-chart>     

<cst-element name="multi-chart" schema="" schema-prop=""/>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-feature-flag	object	Specifies what features to enable/disable.
sub-access-ctrl	object	Specifies what access is given.
sub-raw-attributes	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

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-val1	string type	Value of color variables.

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-var1	string	Value of font variables.

sub-style

Property	Value	Description
name	material/skeuomorphic(standard/filled/shaped-filled/outlined/shaped-outlined)	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-feature-flag

Property	Value	Description
show-chart-type	boolean type	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 default
    type: 'bar/line',//default bar 
    charts:[{
      id :'', //auto generates by default
      data: [{ //default [] (external)
                label: 'JAN',
                values: [10, 20]
            },
            {
                label: 'FEB',
                values: [15, 30]
            }, {
                label: 'MAR',
                values: [40, 30]
            }
        ], 
    }],    
    initalIdsAPI:{ 
       method:'GET',//default
       url:'',
       body:{}
    }, 
    dataByIdsAPI:{ 
       method:'GET',//default
       url:'',
       body:{}
    }, 
    options: {
       labels:{
          xAxis:'Months', //custom color UI
          yAxis:'Count', //custom color UI
          values:['Tender Count','Auction Count'] //data set & on hover labels
       },
       title:'',
       accessCtrl: false //default, on true explicitly pass subAccessCtrl 
    },
    callbacks:{
       onClickMultipleChart:'onClickMultipleChart', //default if function exists in parentThis
       onChildToParentMultipleChart:'onChildToParentMultipleChart', //default if function exists in parentThis
       onDataFormatMultipleChart:'onDataFormatMultipleChart'
    },
    instance:'', //some parentContext variable holding instance
    subFeatureFlags:{
       showChartTypes:{
          bar: true, //default
          pie: true, //default
          line: true,
          card: false,
          table: false
       }
    },
   subAccessCtrl:{
       canView:false,
       canClick: false,
       canChangeType:false
    },
    subTheme:{
       name:'PRIMARY/ SECONDARY/ EXACT_COLOR_THEME',
       clrVar1:'',
       clrVar2:''
    },
    subFont:{
       name:'PRIMARY/ SECONDARY/ EXACT_FONT_STYLE',
       fontVar1:'',
       fontVar2:''
    },
    subStyle:{ //loop & add to element style
      name: '',
      width:'', //aspect ratio maintained if one given
      height:''
   },
   subRawAttributes:{ //loop & add to element style
      class: '',
   }
}

Multiple chart

Definition

Example

Attributes

Sub element attributes

sub-theme

sub-font

sub-style

sub-feature-flag

sub-access-ctrl

sub-raw-attributes

Schema Examples

Full schema

OverRidable Classes

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points

#Definition

#Example

#Attributes

#Sub element attributes

#sub-theme

#sub-font

#sub-style

#sub-feature-flag

#sub-access-ctrl

#sub-raw-attributes

#Schema Examples

#Full schema

#OverRidable Classes

#Unit Test Screenshots

#Responsiveness Test Screenshots

#Design Images

#Demo link

#Points

Definition

Example

Attributes

Sub element attributes

sub-theme

sub-font

sub-style

sub-feature-flag

sub-access-ctrl

sub-raw-attributes

Schema Examples

Full schema

OverRidable Classes

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points