VectorToMatrixMapper

VectorToMatrixMapper

by evgkch

HTML

<div id="app"></div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  display: flex;
  background: #fff;
  transition: all 0.2s;
  padding: 5px;
}

.chart__wrapper {
  background: #20262E;
  flex: 1;
  color: white;
}

React

class App extends React.Component {

  constructor(props) {
    super(props)
    
  }
  
  render() {
    return (
    	<Vector2MatrixMapper
        rowLength={ 3 }
        elementRatio={ 16 / 9 }
        minWidth={ 230 }
        margin={ 5 }
      >
    	  {Array.from({ length: 7 }, (v, k) =>
          <ChartWrapper key={k}>
            
          </ChartWrapper>
        )}
    	</Vector2MatrixMapper>
    );
  }
};

class Vector2MatrixMapper extends React.Component {

  constructor(props) {
    super(props);
    const data = Tensor.mapVectorToMatrix(this.props.children, this.props.rowLength);
    this.state = {
    	clientHeight: 0,
      minWidth: this.props.minWidth ? `${this.props.minWidth * this.props.rowLength}px` : '100%',
      colLength: data.length,
      data,
    };
    this.resize = this.resize.bind(this);
  }
  
  componentDidMount() {
  	this.resize();
   	window.addEventListener('resize', this.resize, true);
  }
  
  componentWillUnmount() {
  	document.removeEventListener('resize', this.load);
  }
  
  resize() {
  	const { elementRatio = 16 / 9, rowLength } = this.props;
    const { colLength } = this.state;
  	const elementsRation = colLength / (elementRatio * rowLength);
  	this.setState({ clientHeight: this.el.clientWidth * elementsRation });
  }
  
  render() {
  	const { margin = 0 } = this.props;
    const { clientHeight, minWidth, data } = this.state;
    return (
    	<div
        className="v2m"
        style={{
        	display: 'flex',
          flexDirection: 'column',
          flex: 1,
        	height: `${clientHeight}px`,
          minWidth,
        }}
        ref={(el) => this.el = el}
      >
    	  {data.map((col, i) =>
    			<div
            key={i}
            className="v2m__col"
            style={{
            	display: 'flex',
              flex: 1,
            }}
          >
            {col.map((el, j) =>
            	<div
                key={j}
                style={{
                	display: 'flex',
              ...