Я работаю над тем, чтобы подогнать мои данные к этому графику Победы, но по какой-то причине они не выходят так, как ожидалось. Мне не нужна ось Y, но по оси X я пытаюсь перечислить записи в моем наборе данных от самого раннего до последнего. Компонент, кажется, получает данные, но график не отображается должным образом. Пример здесь https://formidable.com/open-source/victory/guides/zoom-large-data/
Компонент
class CustomChart extends React.Component {
constructor(props) {
super();
this.entireDomain = this.getEntireDomain(props);
this.state = {
zoomedXDomain: this.entireDomain.x,
};
}
onDomainChange(domain) {
this.setState({
zoomedXDomain: domain.x,
});
}
getData() {
const { zoomedXDomain } = this.state;
const { data, maxPoints } = this.props;
const filtered = data.action.filter(
(action) => (action.timestamp >= zoomedXDomain[0] && action.timestamp <= zoomedXDomain[1]));
if (filtered.length > maxPoints ) {
const k = Math.ceil(filtered.length / maxPoints);
return filtered.filter(
(d, i) => ((i % k) === 0)
);
}
return filtered;
}
getEntireDomain(props) {
const { data } = props;
return {
y: [_.minBy(data.action, action => action.timestamp).timestamp, _.maxBy(data.action, action => action.timestamp).timestamp],
x: [ data.action[0].timestamp, _.last(data.action).timestamp ]
};
}
getZoomFactor() {
const { zoomedXDomain } = this.state;
const factor = 10 / (zoomedXDomain[1] - zoomedXDomain[0]);
return _.round(factor, factor < 3 ? 1 : 0);
}
render() {
const renderedData = this.getData();
return (
<div>
<VictoryChart
domain={this.entireDomain}
containerComponent={<VictoryZoomContainer
zoomDimension="x"
onZoomDomainChange={this.onDomainChange.bind(this)}
minimumZoom={{x: 1/10000}}
/>}
>
<VictoryScatter data={renderedData} />
</VictoryChart>
<div>
{this.getZoomFactor()}x zoom;
rendering {renderedData.length} of {this.props.data.length}
</div>
</div>
);
}//render
}//component
export default graphql(getObjectsQuery,
{ options: (ownProps) => {
console.log('CustomChart getObjectsQuery:', ownProps.startTime);
return ({ second: { startTime: ownProps.startTime,
endTime: ownProps.endTime
}
})
}
})(CustomChart);
Данные