Docs
API

    • grossloss

    Gross Loss column type

    Gross Loss is part of FancyGrid spark module.
    To config this spark use sparkConfig param.

    Example

    
columns: [{
...
},{
  title: 'Gross/Loss',
  index: 'change',
  type: 'grossloss',
  width: 75,
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  rightLocked: true
},{
...

    cls

    String

    Column css className.

     
    
.photo img {
  width: 80px;
  margin-top: -5px;
  margin-left: -10px;
}
...
columns: [{
  type: 'image',
  title: 'Photo',
  index: 'src',
  width: 80,
  cls: 'photo'
},{
...

    editable

    Boolean

    Enable column editing.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  editable: true
}
    False

    flex

    Number

    Auto-calc column width by fitting available width.

    If to set one column to 1 than column width will fit to available grid width.

    If to set one column to 1 and another to 2 than available width will be divided on 3.

     
    
columns: [{
  index: 'company',
  title: 'Company'
},{
  index: 'name',
  title: 'Name',
  sortable: true
},{
  index: 'surname',
  title: 'Sur Name'
},{
  index: 'age',
  title: 'Age',
  type: 'number',
  width: 50
},{
  index: 'education',
  title: 'Education',
  flex: 1
}]

    hidden

    Boolean

    Hide column on start.

     
    
{
  index: 'married',
  resizable: true,
  type: 'checkbox',
  title: 'Married',
  width: 100,
  hidden: true
}
    false

    index

    String|Number

    Data index.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  editable: true
}

    locked

    Boolean

    Locking column.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  locked: true
}
    False

    resizable

    Boolean

    Enable resizing of column.

     
    
resizable: true,
    False

    rightLocked

    Boolean

    Locking column to right side.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  rightLocked: true
}
    False

    sortable

    Boolean

    Enable column sorting.

     
    
sortable: true,
    False

    sparkConfig

    Object

    Spark config of module.

     
    
sparkConfig: {
	grossColor: '#6fb270',
	lossColor: '#dc6b67',
	showOnMax: true,
	percents: true
},

    title

    String

    Column title.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name'
}
    ''

    type

    String

    Column type.

     
    
{
  index: 'married',
  title: 'Married',
  type: 'grossloss'
}

    width

    Number

    column width.

     
    
{
  type: 'action',
  width: 65,
  items: [{
    text: 'Delete',
    cls: 'action-column-remove',
    action: 'remove'
  }]
}

    sparkConfig

    grossColor

    String

    Gross spark color.

     
    
{
  ...
  type: 'grossloss',
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  ...
}

    lossColor

    String

    Loss spark color.

     
    
{
  ...
  type: 'grossloss',
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  ...
}

    percents

    Boolean

    Enables percents mode.

    It used for adding sign % in tooltip.

     
    
{
  ...
  type: 'grossloss',
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  ...
}
    false

    showOnMax

    Boolean

    Change default maximum value from 100 to max value of column in data.

     
    
{
  ...
  type: 'grossloss',
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  ...
}
    false

    tipFormat

    Function

    ToolTip format function

     
    
{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}

    tipTpl

    String

    Change tooltip template.

     
    
{
  ...
  type: 'grossloss',
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  tipTpl: 'Value: {value} %'
  ...
}
    '<span style="color: {color};">●</span> {value} {suffix}'