0
Попытка рассчитать ширину моей диаграммы рассеивания на лету, чтобы я мог передать ее в качестве опоры для моего компонента d3. У меня нет проблем с консольным протоколированием в функции handleResize, вызываемой window.addEventListener ('resize', this.handleResize) в моем ComponentDidMount, но я не могу установитьState в функции handleResize или, похоже, получить доступ к чему-либо за пределами этого , Я также пробовал var self = this; для его повторного воспроизведения, но я все равно получаю либо this.setState не является функцией, либо self.setState не является функцией.setState после изменения размера окна с реакцией. Попытка пропустить динамическую ширину в качестве реквизита
import React, { PropTypes, Component } from 'react';
import { getDataRange, getTeams, getFile, getAllHitsData, getPlayers} from 'api/index.js';
import {Table, Thead, Th, Tr, Td} from 'components/Reactable';
import Autosuggest from 'react-autosuggest';
import { Link } from 'react-router';
import ScatterChart from 'components/scatterchart';
import DashboardStats from 'components/dashboard-stats';
import DateRangeComponent from 'components/date-range';
import AdminSquare from 'components/admin-square';
import { connect } from 'react-redux';
import { changeStartDate, changeEndDate } from '../../redux/modules/redux-date-change';
import { sendHitData } from '../../redux/modules/send-hit.js';
import { Loading } from 'react-loading';
let allHitDatas = [];
let hitDatas = [];
let teams = [];
// let selectedTeamID = null;
// let selectedTeamName = 'all_teams';
let newFile = '';
// let teamId = '';
let players = [];
let width;
class Dashboard extends Component {
static propTypes = {
team: PropTypes.object.isRequired,
startDate: PropTypes.string.isRequired,
endDate: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired
};
static contextTypes = {
router: PropTypes.object
};
constructor(props, context) {
super(props, context);
this.state = {
showRangePicker: false,
hitDatas: [],
teams: [],
start: "",
end: "",
team: this.props.team,
selectedTeamID: null,
selectedTeamName: "",
newFileConfirmation: false,
players: [],
allHitDatas: [],
suggestions: this.getSuggestions(''),
selected: '',
showDatePickerControls: false,
// maxHic: 0
// showScatterPlot: true
};
this.onChange = this.onChange.bind(this);
this.onSuggestionsUpdateRequested = this.onSuggestionsUpdateRequested.bind(this);
}
componentWillReceiveProps() {
this.setState({
maxHic: 0,
team: this.props.team,
selectedTeamID: this.props.team.id,
startDate: this.props.startDate,
endDate: this.props.endDate
// allHitDatas: []
},() => {
// this.getDomains();
this.dataChangeHelper();
return this.state;
});
}
componentDidMount() {
this.dataChangeHelper();
window.addEventListener('resize', this.handleResize);
getTeams().then((response) => {
teams = response.data;
this.setState({teams: teams});
});
getPlayers().then((response) => {
players = response.data;
this.setState({
players: players
},() => {
return this.state;
});
});
}
getDomains() {
let dates = [];
let hicArray = [];
console.log(this.state.allHitDatas);
if (this.state.allHitDatas.length === 0) {
return allHitDatas.map((hitData) => {
let date = Date.parse(hitData.EventTime);
dates.push(date);
hicArray.push(hitData.Hic);
let maxDate = Math.max.apply(null, dates);
let maxHic = 0;
let minDate = Math.min.apply(null, dates);
let minHic = 0;
this.setState({
minDate: minDate,
maxDate: maxDate,
minHic: minHic,
maxHic: maxHic
},() => {
console.log(this.state.maxHic);
return this.state;
});
});
}
return this.state.allHitDatas.map((hitData) => {
let date = Date.parse(hitData.EventTime);
dates.push(date);
hicArray.push(hitData.Hic);
let maxDate = Math.max.apply(null, dates);
let maxHic = Math.max.apply(null, hicArray);
let minDate = Math.min.apply(null, dates);
let minHic = Math.min.apply(null, hicArray);
this.setState({
minDate: minDate,
maxDate: maxDate,
minHic: minHic,
maxHic: maxHic
},() => {
console.log(this.state.maxHic)
return this.state;
});
});
}
dataChangeHelper() {
const newConfig = {
start: this.props.startDate,
end: this.props.endDate,
team: this.props.team.id
};
getDataRange(newConfig)
.then((response) => {
hitDatas = response.data;
this.setState({
hitDatas: hitDatas
},() => {
return this.state;
});
});
getAllHitsData(newConfig)
.then((response) => {
allHitDatas = response.data;
this.setState({
allHitDatas: allHitDatas
},() => {
this.getDomains();
return this.state;
});
});
}
handleResize() {
// const self = this;
let elem = document.getElementById('scatter-chart');
width = elem.offsetWidth * 0.9;
console.log(width);
this.setState({
scatterWidth: width
},() => {
console.log(this.state.scatterWidth);
});
}
render() {
if (this.state.teams.length === 0 || this.state.players.length === 0) {
return (
<div className="no-data-container">
<div className="no-data-message">We don't have any data for you right now. Would you like
to add some players, teams, or devices?
</div>
<ul className="no-data-links">
<AdminSquare title="PLAYER ADMIN" icon="person" link="/player"/>
<AdminSquare title="TEAM ADMIN" icon="group" link="/team"/>
<AdminSquare title="DEVICE ADMIN" icon="sd_storage" link="/device"/>
</ul>
</div>
);
}
const { value, suggestions } = this.state;
const inputProps = {
placeholder: 'Search for a player',
value,
onChange: this.onChange
};
return (
<div>
<ScatterChart
data={this.state.allHitDatas}
domain={{x: [this.state.minDate, this.state.maxDate], y: [this.state.maxHic, 0]}}
statOneTitle="HIC"
sendHitData={(d) => this.handleImpactClick(d)}
width={ width }
/>
</div>
);
}
}
function mapStateToProps(state) {
console.log(state);
return {
startDate: state.startDate,
endDate: state.endDate
};
}
export default connect(mapStateToProps)(Dashboard);