Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import ReactDOM from "react-dom";
- import React from "react";
- import _ from "lodash";
- // --------------------------------
- // With width / hegit HOC for D3.js
- // --------------------------------
- const WithSize = Child =>
- class extends React.Component {
- state = {
- width: null,
- height: null
- };
- constructor(props) {
- super(props);
- this.setSize = this.setSize.bind(this);
- this.setSizeDebounced = _.debounce(this.setSize, 1000);
- window.addEventListener("resize", this.setSizeDebounced);
- }
- componentDidMount() {
- this.setSize();
- }
- componentWillUnmount() {
- window.removeEventListener("resize", this.setSizeDebounced);
- }
- setSize() {
- const width = ReactDOM.findDOMNode(this).clientWidth;
- const height = ReactDOM.findDOMNode(this).clientHeight;
- this.setState({ width, height });
- }
- render() {
- const { width, height } = this.state;
- return (
- <div style={{ width: "100%", height: "100%" }}>
- {width && height ? <Child width={width} height={height} {...this.props} /> : null}
- </div>
- );
- }
- };
- // --------------------------------
- // Usage
- // --------------------------------
- import React from "react";
- import * as d3 from "d3";
- import WithSize from "../../shared/with-size";
- class Chart1 extends React.Component {
- static displayName = "D3Chart";
- state = {
- data: [...],
- scaleX: null,
- scaleY: null
- };
- componentDidMount() {
- this.setState({
- scaleX: this.createScaleX(),
- scaleY: this.createScaleY()
- });
- }
- compomentDidUpdate(prevProps) {
- // width / height props from WithSize HOC
- if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
- this.setState({
- scaleX: this.createScaleX(),
- scaleY: this.createScaleY()
- });
- }
- }
- createScaleX() {
- return d3
- .scaleLinear()
- .domain([0, d3.max(this.state.data)])
- // width / height props from WithSize HOC
- .range([0, this.props.width]);
- }
- createScaleY() {
- return d3
- .scaleBand()
- .domain(this.state.data)
- // width / height props from WithSize HOC
- .range([0, this.props.height])
- .padding(0.1);
- }
- render() {
- // Render bars, rect etc, use this.state scales
- }
- }
- export default WithSize(HorisontalBarChart1);
Add Comment
Please, Sign In to add comment