From 689cac535e45c47a4f603b236dc129dd456efcc9 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Thu, 30 Mar 2017 12:46:47 -0400 Subject: PLT-2713/PLT-6028 Added System Users list to System Console (#5882) * PLT-2713 Added ability for admins to list users not in any team * Updated style of unit test * Split SearchableUserList to give better control over its properties * Added users without any teams to the user store * Added ManageUsers page * Renamed ManageUsers to SystemUsers * Added ability to search by user id in SystemUsers page * Added SystemUsersDropdown * Removed unnecessary injectIntl * Created TeamUtils * Reduced scope of system console heading CSS * Added team filter to TeamAnalytics page * Updated admin console sidebar * Removed unnecessary TODO * Removed unused reference to deleted modal * Fixed system console sidebar not scrolling on first load * Fixed TeamAnalytics page not rendering on first load * Fixed chart.js throwing an error when switching between teams * Changed TeamAnalytics header to show the team's display name * Fixed appearance of TeamAnalytics and SystemUsers on small screen widths * Fixed placement of 'No users found' message * Fixed teams not appearing in SystemUsers on first load * Updated user count text for SystemUsers * Changed search by id fallback to trigger less often * Fixed SystemUsers list items not updating when searching * Fixed localization strings for SystemUsers page --- webapp/components/analytics/line_chart.jsx | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) (limited to 'webapp/components/analytics/line_chart.jsx') diff --git a/webapp/components/analytics/line_chart.jsx b/webapp/components/analytics/line_chart.jsx index aa603d819..5ae80f9e9 100644 --- a/webapp/components/analytics/line_chart.jsx +++ b/webapp/components/analytics/line_chart.jsx @@ -21,14 +21,33 @@ export default class LineChart extends React.Component { this.initChart(); } + componentWillUpdate(nextProps) { + const willHaveData = nextProps.data && nextProps.data.labels.length > 0; + const hasChart = Boolean(this.chart); + + if (!willHaveData && hasChart) { + // Clean up the rendered chart before we render and destroy its context + this.chart.destroy(); + this.chart = null; + } + } + componentDidUpdate(prevProps) { - if (!Utils.areObjectsEqual(prevProps.data, this.props.data) || !Utils.areObjectsEqual(prevProps.options, this.props.options)) { - this.initChart(true); + if (Utils.areObjectsEqual(prevProps.data, this.props.data) && Utils.areObjectsEqual(prevProps.options, this.props.options)) { + return; + } + + const hasData = this.props.data && this.props.data.labels.length > 0; + const hasChart = Boolean(this.chart); + + if (hasData) { + // Update the rendered chart or initialize it as necessary + this.initChart(hasChart); } } componentWillUnmount() { - if (this.chart && this.refs.canvas) { + if (this.chart) { this.chart.destroy(); } } @@ -37,9 +56,11 @@ export default class LineChart extends React.Component { if (!this.refs.canvas) { return; } + var el = ReactDOM.findDOMNode(this.refs.canvas); var ctx = el.getContext('2d'); - this.chart = new Chart(ctx, {type: 'line', data: this.props.data, options: this.props.options || {}}); //eslint-disable-line new-cap + this.chart = new Chart(ctx, {type: 'line', data: this.props.data, options: this.props.options || {}}); // eslint-disable-line new-cap + if (update) { this.chart.update(); } -- cgit v1.2.3-1-g7c22