import React from 'react';
import PropTypes from 'prop-types';


export default class CanvasPane extends React.Component {

    render() {
        const canvasLayerStyle = {
            position: 'absolute',
            width: this.props.width,
            height: this.props.height,
            background: this.props.style.backgroundColor,
        };

        return (
            <div style={canvasLayerStyle}>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
                     width={this.props.width} height={this.props.height}>
                    {this.drawWhiteboardCanvas()}
                </svg>
            </div>
        );
    }

    drawWhiteboardCanvas() {
        return this.props.dataset
            .filter((element, index, array) => {
                return element.values.length > 1;
            })
            .map((element, index, array) => {
                const k = index;
                const d = element.values.map((point, index, array) => {
                    if (index === 0) {
                        return 'M ' + point[0] + ' ' + point[1];
                    } else {
                        return 'L ' + point[0] + ' ' + point[1];
                    }
                });

                return (
                    <path key={k} d={d.join(' ')} fill="none" stroke={element.strokeColor} strokeWidth={element.strokeWidth}></path>
                );
            });
    }
}

CanvasPane.propTypes = {
    width: PropTypes.number,
    height: PropTypes.number,
    dataset: PropTypes.array,
    style: PropTypes.object,
};

@@ -518,37 +518,16 @@
 9/xlink%22
-%0A                    
  width=%7B
@@ -543,16 +543,37 @@
 s.width%7D
+%0A                    
  height=
@@ -790,38 +790,24 @@
 ter((element
-, index, array
 ) =%3E %7B%0A     
@@ -890,39 +890,32 @@
 ((element, index
-, array
 ) =%3E %7B%0A         
@@ -1000,15 +1000,8 @@
 ndex
-, array
 ) =%3E

Fix lint error