From f8b8a0b0663c798bc20990775c4e4af4d414333e Mon Sep 17 00:00:00 2001 From: Sean Landsman Date: Fri, 26 May 2017 11:12:43 +0100 Subject: [PATCH] AG-420 Improve React implementation --- package.json | 12 +- src-full-width/index.js | 18 - src-full-width/myApp.css | 28 -- src-full-width/myApp.jsx | 356 ------------------ src-grouped/ColDefFactory.jsx | 17 - src-grouped/index.js | 18 - src-grouped/myApp.css | 28 -- src-grouped/myApp.jsx | 99 ----- src-standard/ColDefFactory.jsx | 90 ----- src-standard/MyReactDateComponent.jsx | 167 -------- src-standard/MyReactHeaderComponent.jsx | 76 ---- src-standard/MyReactHeaderGroupComponent.jsx | 41 -- src-standard/NameCellEditor.jsx | 117 ------ src-standard/ProficiencyCellRenderer.jsx | 25 -- src-standard/ProficiencyFilter.jsx | 73 ---- src-standard/RefData.js | 128 ------- src-standard/RowDataFactory.js | 45 --- src-standard/SkillsCellRenderer.jsx | 26 -- src-standard/SkillsFilter.jsx | 115 ------ src-standard/index.js | 18 - src-standard/myApp.css | 28 -- src-standard/myApp.jsx | 224 ----------- .../components/TopMoversGrid.jsx | 30 +- src-trader-dashboard/index.html | 2 +- src/index.html | 2 +- webpack.config.examples.js | 2 +- webpack.config.full-width.js | 27 -- webpack.config.grouped.js | 27 -- webpack.config.standard.js | 27 -- webpack.config.trader.js | 2 +- 30 files changed, 13 insertions(+), 1855 deletions(-) delete mode 100644 src-full-width/index.js delete mode 100644 src-full-width/myApp.css delete mode 100644 src-full-width/myApp.jsx delete mode 100644 src-grouped/ColDefFactory.jsx delete mode 100644 src-grouped/index.js delete mode 100644 src-grouped/myApp.css delete mode 100644 src-grouped/myApp.jsx delete mode 100644 src-standard/ColDefFactory.jsx delete mode 100644 src-standard/MyReactDateComponent.jsx delete mode 100644 src-standard/MyReactHeaderComponent.jsx delete mode 100644 src-standard/MyReactHeaderGroupComponent.jsx delete mode 100644 src-standard/NameCellEditor.jsx delete mode 100644 src-standard/ProficiencyCellRenderer.jsx delete mode 100644 src-standard/ProficiencyFilter.jsx delete mode 100644 src-standard/RefData.js delete mode 100644 src-standard/RowDataFactory.js delete mode 100644 src-standard/SkillsCellRenderer.jsx delete mode 100644 src-standard/SkillsFilter.jsx delete mode 100644 src-standard/index.js delete mode 100644 src-standard/myApp.css delete mode 100644 src-standard/myApp.jsx delete mode 100644 webpack.config.full-width.js delete mode 100644 webpack.config.grouped.js delete mode 100644 webpack.config.standard.js diff --git a/package.json b/package.json index 0d70f68..badf39f 100644 --- a/package.json +++ b/package.json @@ -4,14 +4,18 @@ "description": "Example Reach applicaiton using ag-Grid.", "main": "dist/ag-grid-react-example.js", "scripts": { - "full-width": "webpack-dev-server --config webpack.config.full-width.js --progress --colors --hot --inline", - "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline", - "grouped": "webpack-dev-server --config webpack.config.grouped.js --progress --colors --hot --inline", "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config webpack.config.trader.js --progress --colors --hot --inline", "examples": "webpack-dev-server --content-base src/ --config webpack.config.examples.js --progress --colors --hot --inline", "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline", + + "clean": "rimraf dist", - "build-standard": "npm run clean && webpack --config webpack.config.standard.js --progress --profile --bail" + "mkdirs": "mkdir -p dist/trader/dist dist/examples/dist", + "copy": "cp -r images dist/examples && cp src/index.html dist/examples && cp src-trader-dashboard/index.html dist/trader && cp dist/react-examples.js dist/examples/dist && cp dist/react-trader.js dist/trader/dist", + "build-examples": "webpack --config webpack.config.examples.js --progress --profile --bail", + "build-dashboard": "webpack --config webpack.config.trader.js --progress --profile --bail", + "build-all": "npm run build-examples && npm run build-dashboard", + "build" : "npm run clean && npm run mkdirs && npm run build-all && npm run copy" }, "repository": { "type": "git", diff --git a/src-full-width/index.js b/src-full-width/index.js deleted file mode 100644 index 2c44f4d..0000000 --- a/src-full-width/index.js +++ /dev/null @@ -1,18 +0,0 @@ -'use strict'; - -import ReactDOM from 'react-dom'; -import React from 'react'; -import MyApp from './myApp.jsx'; -// is there a better way of doing this? -import 'ag-grid-root/dist/styles/ag-grid.css'; -import 'ag-grid-root/dist/styles/theme-fresh.css'; - -// waiting for dom to load before booting react. we could alternatively -// put the index.js reference at the end fo the index.html, but i prefer this way. -document.addEventListener('DOMContentLoaded', ()=> { - var container = document.getElementById('myAppContainer'); - ReactDOM.render( - React.createElement(MyApp), - container - ); -}); diff --git a/src-full-width/myApp.css b/src-full-width/myApp.css deleted file mode 100644 index 5e7e6f8..0000000 --- a/src-full-width/myApp.css +++ /dev/null @@ -1,28 +0,0 @@ - -.ag-cell { - padding-top: 2px !important; - padding-bottom: 2px !important; -} - -label { - font-weight: normal !important; -} - -.div-percent-bar { - display: inline-block; - height: 20px; - position: relative; -} - -.div-percent-value { - position: absolute; - padding-left: 4px; - font-weight: bold; - font-size: 13px; -} - -.div-outer-div { - display: inline-block; - height: 100%; - width: 100%; -} diff --git a/src-full-width/myApp.jsx b/src-full-width/myApp.jsx deleted file mode 100644 index e97ac25..0000000 --- a/src-full-width/myApp.jsx +++ /dev/null @@ -1,356 +0,0 @@ -import React from "react"; -import {AgGridReact} from "ag-grid-react"; -import "./myApp.css"; -import "ag-grid-enterprise"; - - -export class DetailPanelCellRenderer extends React.Component{ - - - - render (){ - return
-
-
Name: +parentRecord.name+
-
Account: +parentRecord.account+
-
-
-
- - - - - -
-
; - } -} - - - -// take this line out if you do not want to use ag-Grid-Enterprise -// a list of names we pick from when generating data -var firstnames = ['Sophia','Emma','Olivia','Isabella','Mia','Ava','Lily','Zoe','Emily','Chloe','Layla','Madison','Madelyn','Abigail','Aubrey','Charlotte','Amelia','Ella','Kaylee','Avery','Aaliyah','Hailey','Hannah','Addison','Riley','Harper','Aria','Arianna','Mackenzie','Lila','Evelyn','Adalyn','Grace','Brooklyn','Ellie','Anna','Kaitlyn','Isabelle','Sophie','Scarlett','Natalie','Leah','Sarah','Nora','Mila','Elizabeth','Lillian','Kylie','Audrey','Lucy','Maya']; -var lastnames = ['Smith','Jones','Williams','Taylor','Brown','Davies','Evans','Wilson','Thomas','Johnson']; - -var images = ['niall','sean','alberto','statue','horse']; -// each call gets a unique id, nothing to do with the grid, just help make the sample -// data more realistic -var callIdSequence = 555; - -// method creates all the data, both the top level grid and the lower level grids -function createRowData() { - var rowData = []; - - for (var i = 0; i < 20; i++) { - var firstName = firstnames[Math.floor(Math.random()*firstnames.length)]; - var lastName = lastnames[Math.floor(Math.random()*lastnames.length)]; - - var image = images[i % images.length]; - - var totalDuration = 0; - - var callRecords = []; - // call count is random number between 20 and 120 - var callCount = Math.floor(Math.random() * 100) + 20; - for (var j = 0; j.5) ? 'In' : 'Out', - // made up number - number: '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000) - }; - callRecords.push(callRecord); - totalDuration += callDuration; - } - - var record = { - name: firstName + ' ' + lastName, - account: i + 177000, - totalCalls: callCount, - image: image, - // convert from seconds to minutes - totalMinutes: totalDuration / 60, - callRecords: callRecords - }; - rowData.push(record); - } - - return rowData; -} - -var minuteCellFormatter = function (params) { - return params.value.toLocaleString() + 'm'; -}; - -var secondCellFormatter= function (params) { - return params.value.toLocaleString() + 's'; -}; - -var masterColumnDefs = [ - {headerName: 'Name', field: 'name', - // left column is going to act as group column, with the expand / contract controls - cellRenderer: 'group', - // we don't want the child count - it would be one each time anyway as each parent - // not has exactly one child node - cellRendererParams: { suppressCount: true } - }, - {headerName: 'Account', field: 'account'}, - {headerName: 'Calls', field: 'totalCalls'}, - {headerName: 'Minutes', field: 'totalMinutes', cellFormatter: minuteCellFormatter} -]; - -var detailColumnDefs = [ - {headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell'}, - {headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell'}, - {headerName: 'Number', field: 'number', cellClass: 'call-record-cell'}, - {headerName: 'Duration', field: 'duration', cellClass: 'call-record-cell', cellFormatter: secondCellFormatter}, - {headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'} -]; - -var rowData = createRowData(); -export default class MyApp extends React.Component { - - constructor() { - super(); - - this.state = { - quickFilterText: null, - showGrid: true, - showToolPanel: false, - icons: { - columnRemoveFromGroup: '', - filter: '', - sortAscending: '', - sortDescending: '', - groupExpanded: '', - groupContracted: '', - columnGroupOpened: '', - columnGroupClosed: '' - } - }; - - // the grid options are optional, because you can provide every property - // to the grid via standard React properties. however, the react interface - // doesn't block you from using the standard JavaScript interface if you - // wish. Maybe you have the gridOptions stored as JSON on your server? If - // you do, the providing the gridOptions as a standalone object is just - // what you want! - this.gridOptions = { - columnDefs: masterColumnDefs, - rowData: rowData, - //We register the react date component that ag-grid will use to render - // this is how you listen for events using gridOptions - onModelUpdated: function () { - console.log('event onModelUpdated received'); - }, - defaultColDef : { - headerComponentParams : { - menuIcon: 'fa-bars' - } - }, - // this is a simple property - rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios - }; - } - - onShowGrid(show) { - this.setState({ - showGrid: show - }); - } - - onToggleToolPanel(event) { - this.setState({showToolPanel: event.target.checked}); - } - - onGridReady(params) { - this.api = params.api; - this.columnApi = params.columnApi; - params.api.sizeColumnsToFit(); - } - - selectAll() { - this.api.selectAll(); - } - - deselectAll() { - this.api.deselectAll(); - } - - setCountryVisible(visible) { - this.columnApi.setColumnVisible('country', visible); - } - - onQuickFilterText(event) { - this.setState({quickFilterText: event.target.value}); - } - - onCellClicked(event) { - console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex); - } - - onRowSelected(event) { - console.log('onRowSelected: ' + event.node.data.name); - } - - onRefreshData() { - var newRowData = new RowDataFactory().createRowData(); - this.setState({ - rowData: newRowData - }); - } - - invokeSkillsFilterMethod() { - var skillsFilter = this.api.getFilterInstance('skills'); - var componentInstance = skillsFilter.getFrameworkComponentInstance(); - componentInstance.helloFromSkillsFilter(); - } - - dobFilter () { - let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob'); - dateFilterComponent.setFilterType('equals'); - dateFilterComponent.setDateFrom('2000-01-01'); - this.gridOptions.api.onFilterChanged(); - - } - - onIsFullWidthCell (rowNode) { - return rowNode.level === 1; - } - - onGetRowHeight (params) { - var rowIsDetailRow = params.node.level===1; - // return 100 when detail row, otherwise return 25 - return rowIsDetailRow ? 75 : 25; - } - - onGetNodeChildDetails (record) { - if (record.callRecords) { - return { - group: true, - // the key is used by the default group cellRenderer - key: record.name, - // provide ag-Grid with the children of this group - children: [record.callRecords], - // for demo, expand the third row by default - expanded: record.account === 177005 - }; - } else { - return null; - } - } - - render() { - var gridTemplate; - var bottomHeaderTemplate; - var topHeaderTemplate; - - topHeaderTemplate = ( -
-
- - - -
-
- Employees Skills and Contact Details -
-
- ); - - // showing the bottom header and grid is optional, so we put in a switch - if (this.state.showGrid) { - bottomHeaderTemplate = ( -
-
- - Grid API: - - - - - Column API: - - - -
-
-
- - - - - - Filter API: - - - -
-
-
- ); - gridTemplate = ( -
- -
- ); - } - - return
-
- {topHeaderTemplate} - {bottomHeaderTemplate} - {gridTemplate} -
-
; - } - -} \ No newline at end of file diff --git a/src-grouped/ColDefFactory.jsx b/src-grouped/ColDefFactory.jsx deleted file mode 100644 index b53d820..0000000 --- a/src-grouped/ColDefFactory.jsx +++ /dev/null @@ -1,17 +0,0 @@ -export default class ColDefFactory { - createColDefs() { - return [ - {headerName: "Athlete", field: "athlete", width: 200}, - {headerName: "Age", field: "age", width: 90}, - {headerName: "Gold", field: "gold", width: 100, aggFunc: 'sum'}, - {headerName: "Silver", field: "silver", width: 100, aggFunc: 'sum'}, - {headerName: "Bronze", field: "bronze", width: 100, aggFunc: 'sum'}, - {headerName: "Total", field: "total", width: 100, aggFunc: 'sum'}, - {headerName: "Country", field: "country", width: 120, rowGroupIndex: 0}, - {headerName: "Year", field: "year", width: 90}, - {headerName: "Date", field: "date", width: 110}, - {headerName: "Sport", field: "sport", width: 110} - ]; - } -} - diff --git a/src-grouped/index.js b/src-grouped/index.js deleted file mode 100644 index 2c44f4d..0000000 --- a/src-grouped/index.js +++ /dev/null @@ -1,18 +0,0 @@ -'use strict'; - -import ReactDOM from 'react-dom'; -import React from 'react'; -import MyApp from './myApp.jsx'; -// is there a better way of doing this? -import 'ag-grid-root/dist/styles/ag-grid.css'; -import 'ag-grid-root/dist/styles/theme-fresh.css'; - -// waiting for dom to load before booting react. we could alternatively -// put the index.js reference at the end fo the index.html, but i prefer this way. -document.addEventListener('DOMContentLoaded', ()=> { - var container = document.getElementById('myAppContainer'); - ReactDOM.render( - React.createElement(MyApp), - container - ); -}); diff --git a/src-grouped/myApp.css b/src-grouped/myApp.css deleted file mode 100644 index 5e7e6f8..0000000 --- a/src-grouped/myApp.css +++ /dev/null @@ -1,28 +0,0 @@ - -.ag-cell { - padding-top: 2px !important; - padding-bottom: 2px !important; -} - -label { - font-weight: normal !important; -} - -.div-percent-bar { - display: inline-block; - height: 20px; - position: relative; -} - -.div-percent-value { - position: absolute; - padding-left: 4px; - font-weight: bold; - font-size: 13px; -} - -.div-outer-div { - display: inline-block; - height: 100%; - width: 100%; -} diff --git a/src-grouped/myApp.jsx b/src-grouped/myApp.jsx deleted file mode 100644 index 5fc4c6a..0000000 --- a/src-grouped/myApp.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from "react"; -import {AgGridReact} from "ag-grid-react"; -import ColDefFactory from "./ColDefFactory.jsx"; -import "./myApp.css"; - -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; - - -export default class MyApp extends React.Component { - - constructor() { - super(); - - this.state = { - showToolPanel: false, - columnDefs: new ColDefFactory().createColDefs(), - rowData: null, - }; - - this.gridOptions = { - groupRowInnerRenderer: function (params) { - var FLAG_CODES = { - 'Ireland': 'ie', - 'United States': 'us', - 'Russia': 'ru', - 'Australia': 'au', - 'Canada': 'ca', - 'Norway': 'no', - 'China': 'cn', - 'Zimbabwe': 'zw', - 'Netherlands': 'nl', - 'South Korea': 'kr', - 'Croatia': 'hr', - 'France': 'fr' - }; - - var flagCode = FLAG_CODES[params.node.key]; - - var html = ''; - if (flagCode) { - html += '' - } - - html += ' COUNTRY_NAME'.replace('COUNTRY_NAME', params.node.key); - html += ' Gold: GOLD_COUNT'.replace('GOLD_COUNT', params.data.gold); - html += ' Silver: SILVER_COUNT'.replace('SILVER_COUNT', params.data.silver); - html += ' Bronze: BRONZE_COUNT'.replace('BRONZE_COUNT', params.data.bronze); - - return html; - } - }; - } - - onGridReady(params) { - this.api = params.api; - this.columnApi = params.columnApi; - - var that = this; - var httpRequest = new XMLHttpRequest(); - httpRequest.open('GET', '/olympicWinners.json'); - httpRequest.send(); - httpRequest.onreadystatechange = function() { - if (httpRequest.readyState == 4 && httpRequest.status == 200) { - var httpResult = JSON.parse(httpRequest.responseText); - that.api.setRowData(httpResult); - } - }; - - } - - render() { - var gridTemplate = ( -
- -
- ); - - return
-
- {gridTemplate} -
-
; - } - -} diff --git a/src-standard/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx deleted file mode 100644 index d68d513..0000000 --- a/src-standard/ColDefFactory.jsx +++ /dev/null @@ -1,90 +0,0 @@ -import SkillsCellRenderer from './SkillsCellRenderer.jsx'; -import NameCellEditor from './NameCellEditor.jsx'; -import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx'; -import RefData from './RefData'; -import SkillsFilter from './SkillsFilter.jsx'; -import ProficiencyFilter from './ProficiencyFilter.jsx'; -import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx'; - -export default class ColDefFactory { - - createColDefs() { - - var columnDefs = [ - {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true, - suppressMenu: true, pinned: true}, - { - headerName: 'Employee', - headerGroupComponentFramework: MyReactHeaderGroupComponent, - children: [ - { - headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true, - width: 150, pinned: true, editable: true, - // use a React cellEditor - cellEditorFramework: NameCellEditor - }, { - headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true, - // an example of using a non-React cell renderer - cellRenderer: countryCellRenderer, pinned: true, - filterParams: { - cellRenderer: countryCellRenderer, cellHeight: 20 - }, columnGroupShow: 'open' - }, { - headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date', - pinned: true, cellRenderer: function(params) { - return pad(params.value.getDate(), 2) + '/' + - pad(params.value.getMonth() + 1, 2)+ '/' + - params.value.getFullYear(); - }, columnGroupShow: 'open' - } - ] - }, - { - headerName: 'IT Skills', - children: [ - {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true, - // supply a React component - cellRendererFramework: SkillsCellRenderer, - // supply a React component - filterFramework: SkillsFilter - }, - {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true, - // supply a React component - cellRendererFramework: ProficiencyCellRenderer, - // supply a React component - filterFramework: ProficiencyFilter - } - ] - }, - { - headerName: 'Contact', - children: [ - {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'}, - {headerName: "Land-line", field: "landline", width: 150, filter: 'text'}, - {headerName: "Address", field: "address", width: 500, filter: 'text'} - ] - } - ]; - return columnDefs; - } -} - -// this is a simple cell renderer, putting together static html, no -// need to use React for it. -function countryCellRenderer(params) { - if (params.value) { - var flag = ""; - return flag + " " + params.value; - } else { - return null; - } -} - -//Utility function used to pad the date formatting. -function pad(num, totalStringSize) { - let asString = num + ""; - while (asString.length < totalStringSize) asString = "0" + asString; - return asString; -} diff --git a/src-standard/MyReactDateComponent.jsx b/src-standard/MyReactDateComponent.jsx deleted file mode 100644 index d298abc..0000000 --- a/src-standard/MyReactDateComponent.jsx +++ /dev/null @@ -1,167 +0,0 @@ -import React from 'react'; - -// Date Component to be used in the date filter. -// This is a very simple example of how a React component can be plugged as a DateComponentFramework -// as you can see, the only requirement is that the React component implements the required methods -// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes. -export default class MyReactDateComponent extends React.Component { - - constructor(props) { - super(props); - //The state of this component is represented of: - // The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank - // The current values that the user types in the input boxes, by default '' - - //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through - // the usage of the button DOB equals to 01/01/2000 in the example page. - this.state = { - date: null, - textBoxes: { - dd: '', - mm: '', - yyyy: '' - } - } - } - - render() { - //Inlining styles to make simpler the component - let filterStyle = { - margin:'2px' - }; - let ddStyle = { - width: '30px' - }; - let mmStyle = { - width: '30px' - }; - let yyyyStyle = { - width: '60px' - }; - let resetStyle = { - padding: '2px', - backgroundColor: 'red', - borderRadius: '3px', - fontSize: '10px', - marginRight: '5px', - color: 'white' - }; - - return ( -
- x - / - / - -
- ); - } - - //********************************************************************************* - // METHODS REQUIRED BY AG-GRID - //********************************************************************************* - - getDate (){ - //ag-grid will call us here when in need to check what the current date value is hold by this - //component. - return this.state.date; - } - - setDate (date){ - //ag-grid will call us here when it needs this component to update the date that it holds. - this.setState({ - date:date, - textBoxes:{ - dd: date.getDate(), - mm: date.getMonth() + 1, - yyyy: date.getFullYear() - } - }) - } - - //********************************************************************************* - // LINKS THE INTERNAL STATE AND AG-GRID - //********************************************************************************* - - updateAndNotifyAgGrid (date, textBoxes){ - this.setState ({ - date: date, - textBoxes:textBoxes - }, - //Callback after the state is set. This is where we tell ag-grid that the date has changed so - //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate - this.props.onDateChanged - ); - } - - - //********************************************************************************* - // LINKING THE UI, THE STATE AND AG-GRID - //********************************************************************************* - - resetDate (){ - let date = null; - let textBoxes = { - dd : '', - mm : '', - yyyy : '', - }; - - this.updateAndNotifyAgGrid(date, textBoxes) - } - - onDateChanged () { - let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value); - let textBoxes = { - dd : this.refs.dd.value, - mm : this.refs.mm.value, - yyyy : this.refs.yyyy.value, - }; - - this.updateAndNotifyAgGrid(date, textBoxes) - } - - //********************************************************************************* - // INTERNAL LOGIC - //********************************************************************************* - - parseDate (dd, mm, yyyy){ - //If any of the three input date fields are empty, stop and return null - if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') { - return null; - } - - let day = Number(dd); - let month = Number(mm); - let year = Number(yyyy); - - let date = new Date(year, month - 1, day); - - //If the date is not valid - if (isNaN(date.getTime())){ - return null; - } - - //Given that new Date takes any garbage in, it is possible for the user to specify a new Date - //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will - //return Sat Dec 01 1 00:00:00 GMT+0000 (GMT) - Go figure... - //To ensure that we are not letting non sensical dates to go through we check that the resultant - //javascript date parts (month, year and day) match the given date fields provided as parameters. - //If the javascript date parts don't match the provided fields, we assume that the input is non - //sensical... ie: Day=-1 or month=14, if this is the case, we return null - //This also protects us from non sensical dates like dd=31, mm=2 of any year - if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year){ - return null; - } - - return date; - } -} - -// the grid will always pass in one props called 'params', -// which is the grid passing you the params for the cellRenderer. -// this piece is optional. the grid will always pass the 'params' -// props, so little need for adding this validation meta-data. -MyReactDateComponent.propTypes = { - params: React.PropTypes.object -}; \ No newline at end of file diff --git a/src-standard/MyReactHeaderComponent.jsx b/src-standard/MyReactHeaderComponent.jsx deleted file mode 100644 index 2c5d098..0000000 --- a/src-standard/MyReactHeaderComponent.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; - -// Header component to be used as default for all the columns. -export default class MyReactHeaderComponent extends React.Component { - - constructor(props) { - super(props); - - this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this)); - - //The state of this component contains the current sort state of this column - //The possible values are: 'asc', 'desc' and '' - this.state = { - sorted: '' - } - } - - - render() { - let sortElements = []; - if (this.props.enableSorting){ - let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : ""); - let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : ""); - let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : ""); - - sortElements.push(
) - sortElements.push(
) - sortElements.push(
) - } - - - let menuButton = null; - if (this.props.enableMenu){ - menuButton =
- } - - return
- {menuButton} -
{this.props.displayName}
- {sortElements} -
- } - - onSortRequested (order, event) { - this.props.setSort (order, event.shiftKey); - }; - - onSortChanged (){ - if (this.props.column.isSortAscending()){ - this.setState({ - sorted: 'asc' - }) - } else if (this.props.column.isSortDescending()){ - this.setState({ - sorted: 'desc' - }) - } else { - this.setState({ - sorted: '' - }) - } - }; - - onMenuClick (){ - this.props.showColumnMenu (this.refs.menuButton); - }; - -} - -// the grid will always pass in one props called 'params', -// which is the grid passing you the params for the cellRenderer. -// this piece is optional. the grid will always pass the 'params' -// props, so little need for adding this validation meta-data. -MyReactHeaderComponent.propTypes = { - params: React.PropTypes.object -}; \ No newline at end of file diff --git a/src-standard/MyReactHeaderGroupComponent.jsx b/src-standard/MyReactHeaderGroupComponent.jsx deleted file mode 100644 index 7fe3037..0000000 --- a/src-standard/MyReactHeaderGroupComponent.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; - -// Header component to be used as default for all the columns. -export default class MyReactHeaderGroupComponent extends React.Component { - - constructor(props) { - super(props); - this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this)); - this.state = { - expanded:null - } - this.onExpandChanged(); - } - - render() { - let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded": " collapsed"); - - return
-
{this.props.displayName}
-
-
- } - - expandOrCollapse (){ - this.props.setExpanded(!this.state.expanded); - }; - - onExpandChanged (){ - this.setState({ - expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded() - }) - } -} - -// the grid will always pass in one props called 'params', -// which is the grid passing you the params for the cellRenderer. -// this piece is optional. the grid will always pass the 'params' -// props, so little need for adding this validation meta-data. -MyReactHeaderGroupComponent.propTypes = { - params: React.PropTypes.object -}; \ No newline at end of file diff --git a/src-standard/NameCellEditor.jsx b/src-standard/NameCellEditor.jsx deleted file mode 100644 index 2433631..0000000 --- a/src-standard/NameCellEditor.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; -import RefData from './RefData'; - -var KEY_BACKSPACE = 8; -var KEY_DELETE = 46; -var KEY_F2 = 113; - -// cell renderer for the proficiency column. this is a very basic cell editor, -export default class NameCellEditor extends React.Component { - - constructor(props) { - super(props); - // the entire ag-Grid properties are passed as one single object inside the params - this.state = this.createInitialState(props); - } - - // work out how to present the data based on what the user hit. you don't need to do any of - // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user - // experience is similar to Excel - createInitialState(props) { - - var startValue; - var putCursorAtEndOnFocus = false; - var highlightAllOnFocus = false; - - if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) { - // if backspace or delete pressed, we clear the cell - startValue = ''; - } else if (props.charPress) { - // if a letter was pressed, we start with the letter - startValue = props.charPress; - } else { - // otherwise we start with the current value - startValue = props.value; - if (props.keyPress === KEY_F2) { - this.putCursorAtEndOnFocus = true; - } else { - this.highlightAllOnFocus = true; - } - } - - return { - value: startValue, - putCursorAtEndOnFocus: putCursorAtEndOnFocus, - highlightAllOnFocus: highlightAllOnFocus - } - } - - render() { - return ( - - ); - } - - onChangeListener(event) { - // if doing React, you will probably be using a library for managing immutable - // objects better. to keep this example simple, we don't use one. - var newState = { - value: event.target.value, - putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus, - highlightAllOnFocus: this.state.highlightAllOnFocus - }; - this.setState(newState); - } - - // called by ag-Grid, to get the final value - getValue() { - return this.state.value; - } - - // cannot use componentDidMount because although the component might be ready from React's point of - // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work - afterGuiAttached() { - // get ref from React component - var eInput = this.refs.textField; - eInput.focus(); - if (this.highlightAllOnFocus) { - eInput.select(); - } else { - // when we started editing, we want the carot at the end, not the start. - // this comes into play in two scenarios: a) when user hits F2 and b) - // when user hits a printable character, then on IE (and only IE) the carot - // was placed after the first character, thus 'apply' would end up as 'pplea' - var length = eInput.value ? eInput.value.length : 0; - if (length > 0) { - eInput.setSelectionRange(length, length); - } - } - } - - // if we want the editor to appear in a popup, then return true. - isPopup() { - return false; - } - - // return true here if you don't want to allow editing on the cell. - isCancelBeforeStart() { - return false; - } - - // just to demonstrate, if you type in 'cancel' then the edit will not take effect - isCancelAfterEnd() { - if (this.state.value && this.state.value.toUpperCase()==='CANCEL') { - return true; - } else { - return false; - } - } -} - -// the grid will always pass in one props called 'params', -// which is the grid passing you the params for the cellRenderer. -// this piece is optional. the grid will always pass the 'params' -// props, so little need for adding this validation meta-data. -NameCellEditor.propTypes = { - params: React.PropTypes.object -}; \ No newline at end of file diff --git a/src-standard/ProficiencyCellRenderer.jsx b/src-standard/ProficiencyCellRenderer.jsx deleted file mode 100644 index 5bc412b..0000000 --- a/src-standard/ProficiencyCellRenderer.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import RefData from './RefData'; - -// cell renderer for the proficiency column. this is a very basic cell renderer, -// it is arguable that we should not of used React and just returned a string of -// html as a normal ag-Grid cellRenderer. -export default class ProficiencyCellRenderer extends React.Component { - - render() { - var backgroundColor; - if (this.props.value < 20) { - backgroundColor = 'red'; - } else if (this.props.value < 60) { - backgroundColor = '#ff9900'; - } else { - backgroundColor = '#00A000'; - } - - return ( -
-
{this.props.value}%
-
- ); - } -} diff --git a/src-standard/ProficiencyFilter.jsx b/src-standard/ProficiencyFilter.jsx deleted file mode 100644 index 5925031..0000000 --- a/src-standard/ProficiencyFilter.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%']; - -// the proficiency filter component. this demonstrates how to integrate -// a React filter component with ag-Grid. -export default class ProficiencyFilter extends React.Component { - - constructor(props) { - super(); - this.state = { - selected: PROFICIENCY_NAMES[0] - }; - } - - // called by agGrid - doesFilterPass(params) { - var value = this.props.valueGetter(params); - var valueAsNumber = parseFloat(value); - - switch (this.state.selected) { - case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40; - case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60; - case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80; - default : return true; - } - }; - - // called by agGrid - isFilterActive() { - return this.state.selected !== PROFICIENCY_NAMES[0]; - }; - - onButtonPressed(name) { - console.log(name); - var newState = {selected: name}; - // set the state, and once it is done, then call filterChangedCallback - this.setState(newState, this.props.filterChangedCallback); - console.log(name); - } - - render() { - var rows = []; - PROFICIENCY_NAMES.forEach( (name)=> { - var selected = this.state.selected === name; - rows.push( -
- -
- ); - }); - - return ( -
-
- Custom Proficiency Filter -
- {rows} -
- ); - } - - // these are other method that agGrid calls that we - // could of implemented, but they are optional and - // we have no use for them in this particular filter. - //getApi() {} - //afterGuiAttached(params) {} - //onNewRowsLoaded() {} - //onAnyFilterChanged() {} -} diff --git a/src-standard/RefData.js b/src-standard/RefData.js deleted file mode 100644 index 3ded99b..0000000 --- a/src-standard/RefData.js +++ /dev/null @@ -1,128 +0,0 @@ -export default class RefData {} - -RefData.FIRST_NAMES = [ - "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella", - "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby", - "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla" - ]; - -RefData.LAST_NAMES = [ - "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell", - "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane", - "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner", - "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane", - "Keating", "Keegan", "Kingston", "Kobe" - ]; - -RefData.COUNTRY_CODES = { - Ireland: "ie", - Spain: "es", - "United Kingdom": "gb", - France: "fr", - Germany: "de", - Sweden: "se", - Italy: "it", - Greece: "gr", - Iceland: "is", - Portugal: "pt", - Malta: "mt", - Norway: "no", - Brazil: "br", - Argentina: "ar", - Colombia: "co", - Peru: "pe", - Venezuela: "ve", - Uruguay: "uy" - }; - -RefData.COUNTRIES = [ - {country: "Ireland", continent: "Europe", language: "English"}, - {country: "Spain", continent: "Europe", language: "Spanish"}, - {country: "United Kingdom", continent: "Europe", language: "English"}, - {country: "France", continent: "Europe", language: "French"}, - {country: "Germany", continent: "Europe", language: "(other)"}, - {country: "Sweden", continent: "Europe", language: "(other)"}, - {country: "Norway", continent: "Europe", language: "(other)"}, - {country: "Italy", continent: "Europe", language: "(other)"}, - {country: "Greece", continent: "Europe", language: "(other)"}, - {country: "Iceland", continent: "Europe", language: "(other)"}, - {country: "Portugal", continent: "Europe", language: "Portuguese"}, - {country: "Malta", continent: "Europe", language: "(other)"}, - {country: "Brazil", continent: "South America", language: "Portuguese"}, - {country: "Argentina", continent: "South America", language: "Spanish"}, - {country: "Colombia", continent: "South America", language: "Spanish"}, - {country: "Peru", continent: "South America", language: "Spanish"}, - {country: "Venezuela", continent: "South America", language: "Spanish"}, - {country: "Uruguay", continent: "South America", language: "Spanish"} - ]; - -RefData.DOB = [ - new Date(2000, 0, 1 ), - new Date(2001, 1, 2 ), - new Date(2002, 2, 3 ), - new Date(2003, 3, 4 ), - new Date(2004, 4, 5 ), - new Date(2005, 5, 6 ), - new Date(2006, 6, 7 ), - new Date(2007, 7, 8 ), - new Date(2008, 8, 9 ), - new Date(2009, 9, 10 ), - new Date(2010, 10, 11 ), - new Date(2011, 11, 12 ) -]; - -RefData.ADDRESSES = [ - '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763', - '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215', - '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186', - '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634', - '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597', - '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911', - '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959', - '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160', - '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609', - '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673', - '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245', - '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767', - '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206', - '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348', - '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207', - '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213', - '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161', - '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526', - '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671', - '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310', - '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883', - '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192', - '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838', - '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730', - '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956', - '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257', - '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219', - '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427', - '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355', - '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225', - '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706', - '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596', - '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360', - '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859', - '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322', - '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239', - '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092', - '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973', - '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349', - '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138', - '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063', - '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024', - '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288', - '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157', - '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553', - '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445', - '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958', - '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888', - '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018', - '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433']; - -RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows']; - -RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows']; diff --git a/src-standard/RowDataFactory.js b/src-standard/RowDataFactory.js deleted file mode 100644 index 0c68143..0000000 --- a/src-standard/RowDataFactory.js +++ /dev/null @@ -1,45 +0,0 @@ -import RefData from './RefData'; - -export default class RowDataFactory { - - createRowData() { - var rowData = []; - - for (var i = 0; i < 200; i++) { - var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length]; - rowData.push({ - name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length], - skills: { - android: Math.random() < 0.4, - html5: Math.random() < 0.4, - mac: Math.random() < 0.4, - windows: Math.random() < 0.4, - css: Math.random() < 0.4 - }, - dob: RefData.DOB[i % RefData.DOB.length], - address: RefData.ADDRESSES[i % RefData.ADDRESSES.length], - years: Math.round(Math.random() * 100), - proficiency: Math.round(Math.random() * 100), - country: countryData.country, - continent: countryData.continent, - language: countryData.language, - mobile: this.createRandomPhoneNumber(), - landline: this.createRandomPhoneNumber() - }); - } - - return rowData; - } - - createRandomPhoneNumber() { - var result = '+'; - for (var i = 0; i < 12; i++) { - result += Math.round(Math.random() * 10); - if (i === 2 || i === 5 || i === 8) { - result += ' '; - } - } - return result; - } - -} \ No newline at end of file diff --git a/src-standard/SkillsCellRenderer.jsx b/src-standard/SkillsCellRenderer.jsx deleted file mode 100644 index 332de28..0000000 --- a/src-standard/SkillsCellRenderer.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import RefData from './RefData'; - -export default class SkillsCellRenderer extends React.Component { - - render() { - var skills = []; - var rowData = this.props.data; - RefData.IT_SKILLS.forEach( (skill) => { - if (rowData && rowData.skills && rowData.skills[skill]) { - skills.push(); - } - }); - - return {skills}; - } - -} - -// the grid will always pass in one props called 'params', -// which is the grid passing you the params for the cellRenderer. -// this piece is optional. the grid will always pass the 'params' -// props, so little need for adding this validation meta-data. -SkillsCellRenderer.propTypes = { - params: React.PropTypes.object -}; \ No newline at end of file diff --git a/src-standard/SkillsFilter.jsx b/src-standard/SkillsFilter.jsx deleted file mode 100644 index 381097c..0000000 --- a/src-standard/SkillsFilter.jsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import RefData from './RefData'; - -// the skills filter component. this can be laid out much better in a 'React' -// way. there are design patterns you can apply to layout out your React classes. -// however, i'm not worried, as the intention here is to show you ag-Grid -// working with React, and that's all. i'm not looking for any awards for my -// React design skills. -export default class SkillsFilter extends React.Component { - - constructor(props) { - super(props); - this.state = { - android: false, - css: false, - html5: false, - mac: false, - windows: false - }; - } - - getModel() { - return { - android: this.state.android, - css: this.state.css, - html5: this.state.html5, - mac: this.state.mac, - windows: this.state.windows - } - } - - setModel(model) { - this.setState({ - android: model.android, - css: model.css, - html5: model.html5, - mac: model.mac, - windows: model.windows - }); - } - - // called by agGrid - doesFilterPass(params) { - - var rowSkills = params.data.skills; - var passed = true; - - RefData.IT_SKILLS.forEach( (skill) => { - if (this.state[skill]) { - if (!rowSkills[skill]) { - passed = false; - } - } - }); - - return passed; - }; - - // called by agGrid - isFilterActive() { - var somethingSelected = this.state.android || this.state.css || - this.state.html5 || this.state.mac || this.state.windows; - return somethingSelected; - }; - - onSkillChanged(skill, event) { - var newValue = event.target.checked; - var newModel = {}; - newModel[skill] = newValue; - // set the state, and once it is done, then call filterChangedCallback - this.setState(newModel, this.props.filterChangedCallback ); - } - - helloFromSkillsFilter() { - alert("Hello From The Skills Filter!"); - } - - render() { - - var skillsTemplates = []; - RefData.IT_SKILLS.forEach( (skill, index) => { - - var skillName = RefData.IT_SKILLS_NAMES[index]; - var template = ( - - ); - - skillsTemplates.push(template); - }); - - return ( -
-
- Custom Skills Filter -
- {skillsTemplates} -
- ); - } - - // these are other method that agGrid calls that we - // could of implemented, but they are optional and - // we have no use for them in this particular filter. - //afterGuiAttached(params) {} - //onNewRowsLoaded() {} - //onAnyFilterChanged() {} -} diff --git a/src-standard/index.js b/src-standard/index.js deleted file mode 100644 index 001f895..0000000 --- a/src-standard/index.js +++ /dev/null @@ -1,18 +0,0 @@ -'use strict'; - -import ReactDOM from 'react-dom'; -import React from 'react'; -import MyApp from './myApp.jsx'; - -import 'ag-grid-root/dist/styles/ag-grid.css'; -import 'ag-grid-root/dist/styles/theme-fresh.css'; - -// waiting for dom to load before booting react. we could alternatively -// put the index.js reference at the end fo the index.html, but i prefer this way. -document.addEventListener('DOMContentLoaded', ()=> { - var container = document.getElementById('myAppContainer'); - ReactDOM.render( - React.createElement(MyApp), - container - ); -}); diff --git a/src-standard/myApp.css b/src-standard/myApp.css deleted file mode 100644 index 5e7e6f8..0000000 --- a/src-standard/myApp.css +++ /dev/null @@ -1,28 +0,0 @@ - -.ag-cell { - padding-top: 2px !important; - padding-bottom: 2px !important; -} - -label { - font-weight: normal !important; -} - -.div-percent-bar { - display: inline-block; - height: 20px; - position: relative; -} - -.div-percent-value { - position: absolute; - padding-left: 4px; - font-weight: bold; - font-size: 13px; -} - -.div-outer-div { - display: inline-block; - height: 100%; - width: 100%; -} diff --git a/src-standard/myApp.jsx b/src-standard/myApp.jsx deleted file mode 100644 index 2d06bb7..0000000 --- a/src-standard/myApp.jsx +++ /dev/null @@ -1,224 +0,0 @@ -import React from "react"; -import {AgGridReact} from "ag-grid-react"; -import RowDataFactory from "./RowDataFactory"; -import ColDefFactory from "./ColDefFactory.jsx"; -import MyReactDateComponent from "./MyReactDateComponent.jsx"; -import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx"; -import "./myApp.css"; -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; - -export default class MyApp extends React.Component { - - constructor() { - super(); - - this.state = { - quickFilterText: null, - showGrid: true, - showToolPanel: false, - columnDefs: new ColDefFactory().createColDefs(), - rowData: new RowDataFactory().createRowData(), - icons: { - columnRemoveFromGroup: '', - filter: '', - sortAscending: '', - sortDescending: '', - groupExpanded: '', - groupContracted: '', - columnGroupOpened: '', - columnGroupClosed: '' - } - }; - - // the grid options are optional, because you can provide every property - // to the grid via standard React properties. however, the react interface - // doesn't block you from using the standard JavaScript interface if you - // wish. Maybe you have the gridOptions stored as JSON on your server? If - // you do, the providing the gridOptions as a standalone object is just - // what you want! - this.gridOptions = { - //We register the react date component that ag-grid will use to render - dateComponentFramework: MyReactDateComponent, - // this is how you listen for events using gridOptions - onModelUpdated: function () { - console.log('event onModelUpdated received'); - }, - defaultColDef: { - headerComponentFramework: MyReactHeaderComponent, - headerComponentParams: { - menuIcon: 'fa-bars' - } - }, - // this is a simple property - rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios - }; - - this.onGridReady = this.onGridReady.bind(this); - this.onRowSelected = this.onRowSelected.bind(this); - this.onCellClicked = this.onCellClicked.bind(this); - } - - onShowGrid(show) { - this.setState({ - showGrid: show - }); - } - - onToggleToolPanel(event) { - this.setState({showToolPanel: event.target.checked}); - } - - onGridReady(params) { - this.api = params.api; - this.columnApi = params.columnApi; - } - - selectAll() { - this.api.selectAll(); - } - - deselectAll() { - this.api.deselectAll(); - } - - setCountryVisible(visible) { - this.columnApi.setColumnVisible('country', visible); - } - - onQuickFilterText(event) { - this.setState({quickFilterText: event.target.value}); - } - - onCellClicked(event) { - console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex); - } - - onRowSelected(event) { - console.log('onRowSelected: ' + event.node.data.name); - } - - onRefreshData() { - var newRowData = new RowDataFactory().createRowData(); - this.setState({ - rowData: newRowData - }); - } - - invokeSkillsFilterMethod() { - var skillsFilter = this.api.getFilterInstance('skills'); - var componentInstance = skillsFilter.getFrameworkComponentInstance(); - componentInstance.helloFromSkillsFilter(); - } - - dobFilter() { - let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob'); - dateFilterComponent.setFilterType('equals'); - dateFilterComponent.setDateFrom('2000-01-01'); - this.gridOptions.api.onFilterChanged(); - - } - - render() { - var gridTemplate; - var bottomHeaderTemplate; - var topHeaderTemplate; - - topHeaderTemplate = ( -
-
- - - -
-
- Employees Skills and Contact Details -
-
- ); - - // showing the bottom header and grid is optional, so we put in a switch - if (this.state.showGrid) { - bottomHeaderTemplate = ( -
-
- - Grid API: - - - - - Column API: - - - -
-
-
- - - - - - Filter API: - - - -
-
-
- ); - gridTemplate = ( -
- -
- ); - } - - return
-
- {topHeaderTemplate} - {bottomHeaderTemplate} - {gridTemplate} -
-
; - } - -} diff --git a/src-trader-dashboard/components/TopMoversGrid.jsx b/src-trader-dashboard/components/TopMoversGrid.jsx index eb7a5e5..f3a220b 100644 --- a/src-trader-dashboard/components/TopMoversGrid.jsx +++ b/src-trader-dashboard/components/TopMoversGrid.jsx @@ -33,6 +33,7 @@ class TopMoversGrid extends Component { headerClass: 'align-right', cellRenderer: 'animateShowChange', cellClass: 'align-right', + sort: 'desc', cellFormatter(params) { return params.value.toFixed(2) } @@ -53,38 +54,9 @@ class TopMoversGrid extends Component { this.gridApi = params.api; this.columnApi = params.columnApi; - // if (this.props.rowData) { - // this.gridApi.setRowData(this.props.rowData); - // } this.gridApi.sizeColumnsToFit(); } - // componentWillReceiveProps(nextProps) { - // let newRowData = nextProps.rowData; - // let model = this.gridApi.getModel(); - // - // // remove nodes not in new data set - // let nodesToRemove = []; - // for (let rowIndex = 0; rowIndex < model.getRowCount(); rowIndex++) { - // let rowNode = model.getRow(rowIndex); - // if (rowNode.data.symbol !== newRowData[rowIndex].symbol) { - // nodesToRemove.push(rowNode); - // } - // } - // this.gridApi.removeItems(nodesToRemove); - // - // // add new items in set - // for (let rowIndex = 0; rowIndex < newRowData.length; rowIndex++) { - // let model = this.gridApi.getModel(); - // let rowNode = model.getRow(rowIndex); - // - // if (!rowNode || - // rowNode.data.symbol !== newRowData[rowIndex].symbol) { - // this.gridApi.insertItemsAtIndex(rowIndex, [newRowData[rowIndex]]) - // } - // } - // } - render() { return (
- +