diff --git a/config/webpack.config.examples.js b/config/webpack.config.examples.js index 8cd462c..3895e6e 100644 --- a/config/webpack.config.examples.js +++ b/config/webpack.config.examples.js @@ -3,16 +3,17 @@ const path = require('path'); const SRC_DIR = path.resolve(__dirname, '../src-examples'); module.exports = { + mode: 'production', entry: SRC_DIR + "/index.js", output: { path: path.resolve(__dirname, '../'), filename: "dist/react-examples.js" }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loader: "style!css" + loader: "style-loader!css-loader" }, { test: /\.js$|\.jsx$/, @@ -24,7 +25,7 @@ module.exports = { }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, - loader: 'file?name=[path]/[name].[ext]' + loader: 'file-loader?name=[path]/[name].[ext]' } ] }, @@ -34,11 +35,12 @@ module.exports = { "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), react: path.resolve('./node_modules/react') }, - extensions: ['', '.js', '.jsx'] + extensions: ['.js', '.jsx'] + }, + performance: { + hints: false }, devServer: { - historyApiFallback: true, - contentBase: './', - hot: true + port: 8080, } }; \ No newline at end of file diff --git a/config/webpack.config.large.js b/config/webpack.config.large.js index 708071e..4bf831c 100644 --- a/config/webpack.config.large.js +++ b/config/webpack.config.large.js @@ -3,16 +3,17 @@ const path = require('path'); const SRC_DIR = path.resolve(__dirname, '../src-large-data'); module.exports = { + mode: 'production', entry: SRC_DIR + "/index.js", output: { path: path.resolve(__dirname, '../'), filename: "dist/react-large.js" }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loader: "style!css" + loader: "style-loader!css-loader" }, { test: /\.js$|\.jsx$/, @@ -30,6 +31,12 @@ module.exports = { "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), react: path.resolve('./node_modules/react') }, - extensions: ['', '.js', '.jsx'] + extensions: ['.js', '.jsx'] + }, + performance: { + hints: false + }, + devServer: { + port: 8080, } }; \ No newline at end of file diff --git a/config/webpack.config.trader.js b/config/webpack.config.trader.js index 83f7fb7..e63ccbc 100644 --- a/config/webpack.config.trader.js +++ b/config/webpack.config.trader.js @@ -3,16 +3,17 @@ const path = require('path'); const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard'); module.exports = { + mode: 'production', entry: SRC_DIR + "/index.js", output: { path: path.resolve(__dirname, '../'), filename: "dist/react-trader.js" }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loader: "style!css" + loader: "style-loader!css-loader" }, { test: /\.js$|\.jsx$/, @@ -30,6 +31,12 @@ module.exports = { "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), react: path.resolve('./node_modules/react') }, - extensions: ['', '.js', '.jsx'] + extensions: ['.js', '.jsx'] + }, + performance: { + hints: false + }, + devServer: { + port: 8080, } }; \ No newline at end of file diff --git a/package.json b/package.json index 1922608..751910b 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "description": "Example Reach applicaiton using ag-Grid.", "main": "dist/ag-grid-react-example.js", "scripts": { - "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --progress --colors --hot --inline", - "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --progress --colors --hot --inline", - "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --progress --colors --hot --inline", + "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --mode development --open", + "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open", + "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --mode development --open", "clean": "rimraf dist", "mkdirs": "mkdirp dist/trader/dist dist/examples/dist", "copy-examples": "ncp src-examples/images dist/examples/images && ncp src-examples/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src-examples/ dist/examples/src", @@ -37,24 +37,24 @@ }, "homepage": "http://www.ag-grid.com/", "devDependencies": { - "babel-core": "6.24.x", - "babel-loader": "6.4.x", - "babel-preset-es2015": "6.24.x", - "babel-preset-react": "6.24.x", - "babel-preset-stage-0": "6.24.x", - "babel-preset-stage-1": "6.24.x", - "css-loader": "0.23.x", + "babel-core": "6.26.3", + "babel-loader": "7.1.5", + "babel-preset-es2015": "6.24.1", + "babel-preset-react": "6.24.1", + "babel-preset-stage-0": "6.24.1", + "babel-preset-stage-1": "6.24.1", + "css-loader": "1.0.0", + "file-loader": "1.1.11", + "gulp": "3.9.1", + "merge2": "1.0.x", "mkdirp": "0.5.1", "ncp": "2.0.0", - "prop-types": "15.6.0", + "prop-types": "15.6.2", "rimraf": "2.5.x", - "style-loader": "0.13.x", - "webpack": "1.12.x", - "webpack-dev-server": "1.14.x", - "gulp": "3.9.x", - "gulp-typescript": "3.1.x", - "merge2": "1.0.x", - "typescript": "2.3.x" + "style-loader": "0.21.0", + "webpack": "^4.16.1", + "webpack-cli": "^3.0.8", + "webpack-dev-server": "^3.1.4" }, "dependencies": { "ag-grid": "^18.1.0", @@ -62,13 +62,11 @@ "ag-grid-react": "^18.1.0", "bootstrap": "3.3.7", "d3": "4.9.1", - "file-loader": "0.11.1", "lodash": "4.17.4", "react": "16.4.1", "react-dom": "16.4.1", - "react-redux": "5.0.x", - "react-router-dom": "4.2.x", - "redux": "3.6.x", - "url-search-params-polyfill": "1.2.0" + "react-redux": "5.0.7", + "react-router-dom": "4.3.1", + "redux": "4.0.0" } } diff --git a/src-trader-dashboard/components/PriceChangesGrid.jsx b/src-trader-dashboard/components/PriceChangesGrid.jsx index 8dc3a87..03d5adf 100644 --- a/src-trader-dashboard/components/PriceChangesGrid.jsx +++ b/src-trader-dashboard/components/PriceChangesGrid.jsx @@ -24,21 +24,21 @@ export default class extends Component { field: 'price', headerName: 'Price', valueFormatter: this.numberFormatter, - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellStyle: {'text-align': 'right'} }, { field: 'bid', headerName: 'Bid', valueFormatter: this.numberFormatter, - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellStyle: {'text-align': 'right'} }, { field: 'ask', headerName: 'Ask', valueFormatter: this.numberFormatter, - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellStyle: {'text-align': 'right'} } ] diff --git a/src-trader-dashboard/components/TopMoversGrid.jsx b/src-trader-dashboard/components/TopMoversGrid.jsx index 0ab18a3..d786026 100644 --- a/src-trader-dashboard/components/TopMoversGrid.jsx +++ b/src-trader-dashboard/components/TopMoversGrid.jsx @@ -17,21 +17,21 @@ class TopMoversGrid extends Component { field: 'last', headerName: 'Last', headerClass: 'align-right', - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellClass: 'align-right' }, { field: 'net', headerName: 'Net', headerClass: 'align-right', - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellClass: 'align-right' }, { field: 'pct_net_change', headerName: '% NC', headerClass: 'align-right', - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellClass: 'align-right', sort: 'desc', valueFormatter(params) { diff --git a/src-trader-dashboard/services/FxDataService.jsx b/src-trader-dashboard/services/FxDataService.jsx index d9ade8c..a7ffd46 100644 --- a/src-trader-dashboard/services/FxDataService.jsx +++ b/src-trader-dashboard/services/FxDataService.jsx @@ -120,7 +120,7 @@ const FX_DELTA_HEADERS = [ field: 'last', headerName: 'Last', headerClass: 'align-right', - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellClass: 'align-right', width: 100 }, @@ -128,7 +128,7 @@ const FX_DELTA_HEADERS = [ field: 'net', headerName: 'Net', headerClass: 'align-right', - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellClass: 'align-right', width: 90 }, @@ -145,7 +145,7 @@ const FX_DELTA_HEADERS = [ headerName: symbol, width: 67, cellClass: 'align-right', - cellRenderer: 'animateShowChange', + cellRenderer: 'agAnimateShowChangeCellRenderer', cellClassRules: { 'fx-positive': 'x > 0.8', 'fx-null': 'x === null',