y: reversed ?()

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 => {