const React = require('React'); const Styled = require('styled-components'); const GraphNodeButton = require('./graph-node-button'); const GraphNodeMetrics = require('./graph-node-metrics'); const HeartIcon = require( '!babel-loader!svg-react-loader!./icon-heart.svg?name=HeartIcon' ); const { default: styled } = Styled; const StyledRect = styled.rect` stroke: #343434; fill: #464646; stroke-width: 1.5; rx: 4; ry: 4; `; const StyledShadowRect = styled.rect` fill: #464646; opacity: 0.33; rx: 4; ry: 4; `; const StyledLine = styled.line` stroke: #343434; stroke-width: 1.5; `; const StyledText = styled.text` fill: white; font-family: LibreFranklin; font-size: 16px; font-weight: 600; `; const StyledInfoText = styled.text` fill: white; font-family: LibreFranklin; font-size: 12px; `; class GraphNode extends React.Component { render() { const { data, index, size } = this.props; const { width, height } = size; const halfWidth = width/2; const halfHeight = height/2; const lineY = 48 - halfHeight; const lineX = 140 - halfWidth; const buttonRect = { x: lineX, y: -halfHeight, width: width - 140, height: 48 } const onButtonClick = (evt) => { console.log('Rect clicked!!!'); } console.log('data = ', data); const paddingLeft = 18-halfWidth; const metricsPosition = { x: paddingLeft, y: 89 - halfHeight } return ( {data.id} ); } } module.exports = GraphNode;