a-chart/README.md

A-Chart is a ReactJS Library/Package to address all posibilities of Reporting Functionality

A-Chart is a customisable ReactJS Library/Package  to address all posibilities of Reporting Functionality, Including different types data representations like Grid, Charts, etc...
<img src="https://drive.google.com/uc?export=view&id=1wB0RvjNc9IZPXnGu6Q6Z22WtHNk-eDrV" />

```js
var data=[] // Either Array of objects or URL which will give json data ; 
var config={};
var data ="https://example.com/data";// You can give direct URL to get array of data
<List items={data} config={config} />
```
#### Any suggestions, Issues, Please write us to <a href="mailto:achartsprt@gmail.com?Subject=Support" target="_top">achartsprt@gmail.com</a> 

### Usage (Working example).
```js
import React, { Component } from 'react';
import List from 'a-chart'
class App extends React.Component {
  render() {
    const data = [
      { id: 1, make: "Toyota", model: "RAV4", price: 26500, cur: "USD" },
      { id: 2, make: "Toyota", model: "Camry Hybrid", price: 27562, cur: "USD" },
      { id: 3, make: "Mazda", model: "CX-5", price: 32345, cur: "USD" },
      { id: 4, make: "Mazda", model: "CX-3", price: 20390, cur: "USD" }
    ];
    var config = {
       width:"555",// width of chart
      headers: ["Sl. No.", "Make", "Model", "Price", "Currency"],
       headerConfig: {"id":{width:"80px", align:"center"},"price":{align:"right"}},// configure style properties of header with and align etc (more fetures will support)
      formatters: {
        price: function (val) {
          return val.toFixed(2) + " " + this.cur;
        }
      },
      columnsToHide: "cur", //Comma seprated string, to hide specific column from grid,  **optional
      columnsForSort: "make,model,price", //Comma seprated string, to enable sorting for columns  **optional
      analyticalColumns: "price", //Comma seprated string, to show sum of numerical columns  **optional
      rowFocus: false, // Default  false   **optional
      export: "xls",// export data to xls or csv (now will support only one type in single config)  Default  false   **optional
      exportFileName: "DataExport",
      mode: "Multi", //multi,single,none   Default  none   **optional,
      fieldsToEdit:"make,model",//Comma seprated string, these fields can edit from grid  **optional
      search:true,// Search functionality **optional // Default  false
      searchFields:"",// **IN DEVELOPMENT**  Comma seprated string, Search will happen only against these columns  **optional
      "searchScope": false,// this will give an opption to choose fields to search in **optional // Default  false
    }
    function getSelected() {
      var items = List.getSelectedItems();
      alert(items);
    }

    return (<div>
      <button onClick={getSelected}>Get Selected Items</button><br /><br />
      <List items={data} config={config} />
    </div>);
  }
}

render(<App />, document.getElementById("root"));

```
### Features Supported
 - `Dynamic Data Grid`  *Now Supports only for Array of Objects
- `Search Functionality` 
- `Custom formating of column values` 
- `Hide and Show Columns`
- `Editable Columns`
- `Get changed value sets`
- `Column Header Managing`
- `Column Sorting`
- `Analytical Columns( Show sum of numeric fields if configured)`
- `Excel Or CSV export`
- `Multi Selection mode (User can select specfic items and get it for custom data processing)`

### Public Methods (Component Scope)
- `getSelectedItems()` -- This will return selected items if `mode:"Multi"`
- `getChangedItems()` -- This will return Cahnged items if `fieldsToEdit has configured"`
- `setEditable(true/false)` -- this will enable/disable  edit functionality of fields which are configured,`Default false`
- `setMode(Multi/false)` -- this will enable/disable selection of  items
- `export` -- export table data to xls or csv format    `'csv' or 'xls'`   default is 'xls'
- `getEditable` -- return true or false 
- `getMode` -- return  current mode of the table (Multi or None)

### Complete default config

```js

defConfig = {
            header: true, // Default  true
            headers: [],    //  **optional
            formatters:{},  //**optional
            //Type:collection of ojects// property of dsiplay array
            //formatters are giving a option to apply your formatting logic(display format like amount and currency format) while rendering cells.
            //Also inside the function you will get hte complete scope of the cuurent row in "this" Object
            //Example:   name is column property
            // formatters: {
            //     name: function(val){
            //       return  this.col2+"---"+val
            //     }
            //   }

            columnsToHide: "", //Comma seprated string, to hide specific columns from grid   **optional
            columnsForSort: "", //Comma seprated string, to enable sorting for columns  **optional
            analyticalColumns:"", //Comma seprated string, to show sum of numerical columns  **optional
            rowFocus:false, // Default  false   **optional
            export: "xls",// export data to xls or csv (now will support only one type in single config)  Default  false   **optional

        }

```
### How to change style of grid(CSS config)
`You have full control over css to change display, below are some exmaples`
`Explore more....`
```css
/* How to change main table display*/
.aChart table.achart-grid{ margin: 0px; border-collapse: collapse; border-radius: 5px; width: auto;
    table-layout: fixed;font-family:inherit; font-size: 85%}
/* How to change main table header style*/
    .aChart .achart-gridHeader th {

    }

/* class to change sorting icons */
.aChart .achart-column-header-sort::after {
  position: absolute; content: '\21C5';right:2px;
	top: 22%;cursor: pointer}

```

Any bug fixes, feature request or feedback you can write us to <a href="mailto:achartsprt@gmail.com?Subject=Support" target="_top">achartsprt@gmail.com</a>, We are happy to help you.