in packages/showcase/plot/custom-svg-all-the-marks.js [41:86]
y: reversed ? (5 - rowIndex) * 5 : rowIndex * 5,
size: (index + 1) * 3,
customComponent: row
};
});
return acc.concat(cellsInRow);
},
[]
);
}
const DATA = generateData(false);
const REVERSED_DATA = generateData(true);
const tipStyle = {
display: 'flex',
color: '#fff',
background: '#000',
alignItems: 'center',
padding: '5px'
};
export default class Example extends React.Component {
state = {
reverse: false
};
render() {
const {reverse, hoveredCell} = this.state;
return (
<div>
<ShowcaseButton
buttonContent="REVERSE"
onClick={() => this.setState({reverse: !reverse})}
/>
<XYPlot margin={50} width={300} height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<CustomSVGSeries
animation
style={{stroke: 'red', fill: 'orange'}}
data={reverse ? REVERSED_DATA : DATA}
onValueMouseOver={v => {