diff --git a/src-trader-dashboard/components/TopMoversGrid.jsx b/src-trader-dashboard/components/TopMoversGrid.jsx index f3a220b..1e6fa96 100644 --- a/src-trader-dashboard/components/TopMoversGrid.jsx +++ b/src-trader-dashboard/components/TopMoversGrid.jsx @@ -65,10 +65,10 @@ class TopMoversGrid extends Component { // properties columnDefs={this.state.columnDefs} rowData={this.props.rowData} - enableSorting="true" + enableSorting enableFilter="false" - animateRows="true" - enableImmutableMode="true" + animateRows + deltaRowDataMode getRowNodeId={this.getRowNodeId} // events diff --git a/src/App.jsx b/src/App.jsx index 6bfa3c5..c7e9675 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,6 +11,7 @@ import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExam import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample"; import FilterComponentExample from "./filterComponentExample/FilterComponentExample"; import MasterDetailExample from "./masterDetailExample/MasterDetailExample"; +import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample"; class App extends Component { constructor(props) { @@ -49,6 +50,7 @@ class App extends Component {
  • this.setExample("group-row")}>Grouped Row Inner Renderer Example
  • this.setExample("filter")}>Filters Component Example
  • this.setExample("master-detail")}>Master Detail Example
    • +
  • this.setExample("simple-redux")}>Simple Redux Example
    • ) } @@ -78,6 +80,9 @@ class App extends Component { case 'master-detail': example = ; break; + case 'simple-redux': + example = ; + break; default: example = ; } diff --git a/src/examples/alberto.png b/src/examples/alberto.png deleted file mode 100644 index e35f976..0000000 Binary files a/src/examples/alberto.png and /dev/null differ diff --git a/src/examples/favicon.ico b/src/examples/favicon.ico deleted file mode 100644 index b338d73..0000000 Binary files a/src/examples/favicon.ico and /dev/null differ diff --git a/src/examples/fire.png b/src/examples/fire.png deleted file mode 100644 index 2a81112..0000000 Binary files a/src/examples/fire.png and /dev/null differ diff --git a/src/examples/flags/ar.png b/src/examples/flags/ar.png deleted file mode 100644 index 159e8fd..0000000 Binary files a/src/examples/flags/ar.png and /dev/null differ diff --git a/src/examples/flags/br.png b/src/examples/flags/br.png deleted file mode 100644 index a549555..0000000 Binary files a/src/examples/flags/br.png and /dev/null differ diff --git a/src/examples/flags/co.png b/src/examples/flags/co.png deleted file mode 100644 index 477177b..0000000 Binary files a/src/examples/flags/co.png and /dev/null differ diff --git a/src/examples/flags/de.png b/src/examples/flags/de.png deleted file mode 100644 index 2dbd9b0..0000000 Binary files a/src/examples/flags/de.png and /dev/null differ diff --git a/src/examples/flags/es.png b/src/examples/flags/es.png deleted file mode 100644 index 4c31326..0000000 Binary files a/src/examples/flags/es.png and /dev/null differ diff --git a/src/examples/flags/fr.png b/src/examples/flags/fr.png deleted file mode 100644 index ac1412a..0000000 Binary files a/src/examples/flags/fr.png and /dev/null differ diff --git a/src/examples/flags/gb.png b/src/examples/flags/gb.png deleted file mode 100644 index be5145b..0000000 Binary files a/src/examples/flags/gb.png and /dev/null differ diff --git a/src/examples/flags/gr.png b/src/examples/flags/gr.png deleted file mode 100644 index f869622..0000000 Binary files a/src/examples/flags/gr.png and /dev/null differ diff --git a/src/examples/flags/ie.png b/src/examples/flags/ie.png deleted file mode 100644 index 52e2ad4..0000000 Binary files a/src/examples/flags/ie.png and /dev/null differ diff --git a/src/examples/flags/is.png b/src/examples/flags/is.png deleted file mode 100644 index 74c9e03..0000000 Binary files a/src/examples/flags/is.png and /dev/null differ diff --git a/src/examples/flags/it.png b/src/examples/flags/it.png deleted file mode 100644 index eb710fe..0000000 Binary files a/src/examples/flags/it.png and /dev/null differ diff --git a/src/examples/flags/mt.png b/src/examples/flags/mt.png deleted file mode 100644 index aef8060..0000000 Binary files a/src/examples/flags/mt.png and /dev/null differ diff --git a/src/examples/flags/no.png b/src/examples/flags/no.png deleted file mode 100644 index e14f90f..0000000 Binary files a/src/examples/flags/no.png and /dev/null differ diff --git a/src/examples/flags/pe.png b/src/examples/flags/pe.png deleted file mode 100644 index 73e9465..0000000 Binary files a/src/examples/flags/pe.png and /dev/null differ diff --git a/src/examples/flags/pt.png b/src/examples/flags/pt.png deleted file mode 100644 index a532665..0000000 Binary files a/src/examples/flags/pt.png and /dev/null differ diff --git a/src/examples/flags/se.png b/src/examples/flags/se.png deleted file mode 100644 index 9e12578..0000000 Binary files a/src/examples/flags/se.png and /dev/null differ diff --git a/src/examples/flags/uy.png b/src/examples/flags/uy.png deleted file mode 100644 index 98057bd..0000000 Binary files a/src/examples/flags/uy.png and /dev/null differ diff --git a/src/examples/flags/ve.png b/src/examples/flags/ve.png deleted file mode 100644 index a1aef2a..0000000 Binary files a/src/examples/flags/ve.png and /dev/null differ diff --git a/src/examples/frost.png b/src/examples/frost.png deleted file mode 100644 index d4cdac7..0000000 Binary files a/src/examples/frost.png and /dev/null differ diff --git a/src/examples/horse.png b/src/examples/horse.png deleted file mode 100644 index 660d861..0000000 Binary files a/src/examples/horse.png and /dev/null differ diff --git a/src/examples/niall.png b/src/examples/niall.png deleted file mode 100644 index 7074010..0000000 Binary files a/src/examples/niall.png and /dev/null differ diff --git a/src/examples/phone.png b/src/examples/phone.png deleted file mode 100644 index fd2c11f..0000000 Binary files a/src/examples/phone.png and /dev/null differ diff --git a/src/examples/sean.png b/src/examples/sean.png deleted file mode 100644 index ebae714..0000000 Binary files a/src/examples/sean.png and /dev/null differ diff --git a/src/examples/skills/android.png b/src/examples/skills/android.png deleted file mode 100644 index bece8fd..0000000 Binary files a/src/examples/skills/android.png and /dev/null differ diff --git a/src/examples/skills/css.png b/src/examples/skills/css.png deleted file mode 100644 index 66c82c6..0000000 Binary files a/src/examples/skills/css.png and /dev/null differ diff --git a/src/examples/skills/html5.png b/src/examples/skills/html5.png deleted file mode 100644 index 93c28c6..0000000 Binary files a/src/examples/skills/html5.png and /dev/null differ diff --git a/src/examples/skills/mac.png b/src/examples/skills/mac.png deleted file mode 100644 index d9b736b..0000000 Binary files a/src/examples/skills/mac.png and /dev/null differ diff --git a/src/examples/skills/windows.png b/src/examples/skills/windows.png deleted file mode 100644 index e047fd9..0000000 Binary files a/src/examples/skills/windows.png and /dev/null differ diff --git a/src/examples/smiley-sad.png b/src/examples/smiley-sad.png deleted file mode 100644 index 122f8ae..0000000 Binary files a/src/examples/smiley-sad.png and /dev/null differ diff --git a/src/examples/smiley.png b/src/examples/smiley.png deleted file mode 100644 index b4e3290..0000000 Binary files a/src/examples/smiley.png and /dev/null differ diff --git a/src/examples/statue.png b/src/examples/statue.png deleted file mode 100644 index a95f57f..0000000 Binary files a/src/examples/statue.png and /dev/null differ diff --git a/src/examples/sun.png b/src/examples/sun.png deleted file mode 100644 index ff082c8..0000000 Binary files a/src/examples/sun.png and /dev/null differ diff --git a/src/filterComponentExample/FilterComponentExample.jsx b/src/filterComponentExample/FilterComponentExample.jsx index a614de4..2e45842 100644 --- a/src/filterComponentExample/FilterComponentExample.jsx +++ b/src/filterComponentExample/FilterComponentExample.jsx @@ -67,7 +67,7 @@ export default class FilterComponentExample extends Component { return (
    -

    Group Row Renderer Example

    +

    Filter Component Example

    rowNode.id); + + this.props.dispatch(updateRowSelection(selectedIds)); + } + + setGroupingEnabled(enabled) { + if (enabled) { + this.columnApi.addRowGroupColumn('group'); + this.columnApi.setColumnVisible('group', false); + this.columnApi.setColumnVisible('symbol', false); + } else { + this.columnApi.removeRowGroupColumn('group'); + this.columnApi.setColumnVisible('group', true); + this.columnApi.setColumnVisible('symbol', true); + } + } + + // row data will be provided via redux on this.props.rowData + // we bind to this and using "deltaRowDataMode" the grid will only re-render rows that have changed + // this requires each row to have a uniquely identifying property - in this case the row data "symbol" (see getRowNodeId) + render() { + return ( +
    + data.symbol} + + // events + onGridReady={this.onGridReady} + onSelectionChanged={this.onSelectionChanged}> + +
    + ) + } +} + +// pull off row data changes +export default connect( + (state) => { + return { + rowData: state.rowData + } + }, + null, + null, + {withRef: true} +)(GridComponent); \ No newline at end of file diff --git a/src/simpleReduxExample/HeaderComponent.jsx b/src/simpleReduxExample/HeaderComponent.jsx new file mode 100644 index 0000000..568a483 --- /dev/null +++ b/src/simpleReduxExample/HeaderComponent.jsx @@ -0,0 +1,174 @@ +import React, {Component} from "react"; +import {connect} from "react-redux"; +// take this line out if you do not want to use ag-Grid-Enterprise +import "ag-grid-enterprise"; + +import {updateRowData} from "./gridDataActions"; + +/* + * This component serves both to host the demo controls, which in turn will drive row data state changes + */ +class HeaderComponent extends Component { + constructor(props) { + super(props); + + this.addFiveItems = this.addFiveItems.bind(this); + this.removeSelected = this.removeSelected.bind(this); + this.updatePrices = this.updatePrices.bind(this); + this.setGroupingEnabled = this.setGroupingEnabled.bind(this); + this.setItemVisible = this.setItemVisible.bind(this); + this.setSelectedToGroup = this.setSelectedToGroup.bind(this); + } + + componentDidMount() { + // provide the initial data to the store (which in turn will populate the grid) + this.props.dispatch(updateRowData(this.createRowData())); + } + + // add five new items to the row data and publish the change + addFiveItems() { + let newRowData = this.props.rowData.slice(); + for (let i = 0; i < 5; i++) { + let newItem = this.createItem(); + newRowData.push(newItem); + } + + this.props.dispatch(updateRowData(newRowData)); + } + + // remove selected rows from the data set and publish the change + removeSelected() { + let newRowData = this.props.rowData.filter((dataItem) => (this.props.rowSelection.indexOf(dataItem.symbol) < 0)); + this.props.dispatch(updateRowData(newRowData)); + } + + // group data based on selection and publish the change + setSelectedToGroup(newGroup) { + let selectedIds = this.props.rowSelection; + let newRowData = this.props.rowData.map((dataItem) => { + let itemSelected = selectedIds.indexOf(dataItem.symbol) >= 0; + if (itemSelected) { + return { + // symbol and price stay the same + symbol: dataItem.symbol, + price: dataItem.price, + // group gets the group + group: newGroup + }; + } else { + return dataItem; + } + }); + + this.props.dispatch(updateRowData(newRowData)); + } + + // randomly update prices in the row data and publish the change + updatePrices() { + let newRowData = []; + this.props.rowData.forEach(function (item) { + newRowData.push({ + // use same symbol as last time, this is the unique id + symbol: item.symbol, + // group also stays the same + group: item.group, + // add random price + price: Math.floor(Math.random() * 100) + }); + }); + + this.props.dispatch(updateRowData(newRowData)); + } + + + setGroupingEnabled(enabled) { + // let the parent (and the grid in turn) know about the grouping state change + this.props.setGroupingEnabled(enabled); + + // toggle the grouping buttons visibility + this.setItemVisible('groupingOn', !enabled); + this.setItemVisible('groupingOff', enabled); + } + + setItemVisible(id, visible) { + let element = document.querySelector('#' + id); + element.style.display = visible ? null : 'none'; + } + + render() { + return ( +
    + + + + + + + + + + Group Selected: + + + + +
    + ) + } + + // the following methods are for creating dummy row data + createRowData() { + let rowData = []; + + for (let i = 0; i < 14; i++) { + let newItem = this.createItem(); + rowData.push(newItem); + } + + return rowData; + } + + createItem() { + return { + group: 'A', + symbol: this.createUniqueRandomSymbol(), + price: Math.floor(Math.random() * 100) + }; + } + + // creates a unique symbol, eg 'ADG' or 'ZJD' + createUniqueRandomSymbol() { + let symbol; + let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + + let isUnique = false; + while (!isUnique) { + symbol = ''; + // create symbol + for (let i = 0; i < 3; i++) { + symbol += possible.charAt(Math.floor(Math.random() * possible.length)); + } + // check uniqueness + isUnique = true; + this.props.rowData.forEach(function (oldItem) { + if (oldItem.symbol === symbol) { + isUnique = false; + } + }); + } + + return symbol; + } +} + +// pull off row data and selected row changes +export default connect( + (state) => { + return { + rowData: state.rowData, + rowSelection: state.rowSelection + } + } +)(HeaderComponent); \ No newline at end of file diff --git a/src/simpleReduxExample/SimpleReduxExample.jsx b/src/simpleReduxExample/SimpleReduxExample.jsx new file mode 100644 index 0000000..4c2c928 --- /dev/null +++ b/src/simpleReduxExample/SimpleReduxExample.jsx @@ -0,0 +1,40 @@ +import React, {Component} from "react"; +import {Provider} from "react-redux"; +import {createStore} from "redux"; +// take this line out if you do not want to use ag-Grid-Enterprise +import "ag-grid-enterprise"; + +import HeaderComponent from "./HeaderComponent"; +import GridComponent from "./GridComponent"; + +import gridData from "./gridDataReducer"; + +let store = createStore(gridData); + +/* + * This component serves as a container for both the header and grid components. It's primarily here to act as a container + * for the redux Provider + */ +export default class SimpleReduxExample extends Component { + constructor(props) { + super(props); + + this.setGroupingEnabled = this.setGroupingEnabled.bind(this); + } + + setGroupingEnabled(enabled) { + this.grid.setGroupingEnabled(enabled); + } + + render() { + return ( + +
    +

    Simple Redux Example using ag-Grid's deltaRowMode

    + + { this.grid = grid ? grid.getWrappedInstance() : null }} /> +
    +     + ) + } +}; diff --git a/src/simpleReduxExample/gridDataActions.jsx b/src/simpleReduxExample/gridDataActions.jsx new file mode 100644 index 0000000..8768140 --- /dev/null +++ b/src/simpleReduxExample/gridDataActions.jsx @@ -0,0 +1,13 @@ +export function updateRowData(rowData) { + return { + type: 'ROW_DATA_CHANGED', + rowData + } +} + +export function updateRowSelection(rowSelection) { + return { + type: 'ROW_SELECTION_CHANGED', + rowSelection + } +} \ No newline at end of file diff --git a/src/simpleReduxExample/gridDataReducer.jsx b/src/simpleReduxExample/gridDataReducer.jsx new file mode 100644 index 0000000..6e7b867 --- /dev/null +++ b/src/simpleReduxExample/gridDataReducer.jsx @@ -0,0 +1,16 @@ +export default (state = {rowData: [], rowSelection: []}, action) => { + switch (action.type) { + case 'ROW_DATA_CHANGED': + return { + ...state, + rowData: action.rowData, + }; + case 'ROW_SELECTION_CHANGED': + return { + ...state, + rowSelection: action.rowSelection, + }; + default: + return state; + } +}; \ No newline at end of file