CODEWITHSUNDEEP
javascriptreactjsreact-vis
Layik
Layik

Reputation: 43

How can I select VerticalBarSeries from a ReactVis series plot?

ReactVis API here outlines what is available which might be helpful. I have successfully added a "drag to select" function to my custom code. In the picture, we would be selecting 13 to 17 and turn the fill value to red for example.

More pseudo code question but code would be awesome.enter image description here

A container div in a Hook would look like this:

<div className="unselectable"
  style={{ position: 'relative' }}
  onMouseDown={(e) => {
    if (!x && !y) {
      setX(e.clientX); setY(e.clientY)
    }
  }}
  onMouseMove={(e) => {
    if (x && y) {
      const newX = e.clientX; const newY = e.clientY;
      setX1(newX); setY1(newY);
      setRect(
        <div style={{
          zIndex: 10000,
          position: 'fixed',
          left: x > newX ? newX : x, top: y > newY ? newY : y,
          width: Math.abs(newX - x), height: Math.abs(newY - y),
          backgroundColor: 'gray', opacity: 0.2
        }} />
      )
    }
  }}
  onMouseUp={(e) => {
    setX(null); setY(null); setX1(null); setY1(null);
    setRect(null);
  }}
>
    <XYPlot>
        //...
    </XYPlot>
    {rect}
</div>

Thank you very much.

Upvotes: 0

Views: 540

Answers (1)

Layik
Layik

Reputation: 43

In order to achieve "selected" vs "notSelected" state of the series, we need to use "datawithcolor" objects as our data object: {x: foo, y: bar, color:0}. Passing such an array to a react-series would be sufficient to render different coloured series (bars for example). For example: [{x: foo, y: bar, color:0}] where colorDomain would be [0, 1] and the colorRange would be some blue and red.

In order to have a listed of selected "values", we can hold on to a list of values in a react state (hooks or class), either during a dragging of a rectangle or after the rectangle has been drawn, in my case only during dragging. Every time the rectangle changes, the list must be updated.

On re-render generate a new "datawithcolor" array for React-vis bar-series with colour ranges and domains defined using indexes returned from onNearestX or similar React-vis callback.

How do we update the selected list?

<ReactSeries
          // see React-vis source of abstract-series.js for details
          /*
          onNearestX(value, {
            innerX: xScaleFn(value),
            index: valueIndex,
            event: event.nativeEvent
          });
          */
          onNearestX={(datapoint, { index, innerX }) => {
            // rect is mentioned in the question
            if (rect && isWithinRect({ x, x1, value: innerX })) {
              if (!selected.includes(index)) { // prevent rerender
                setSelected([...selected, index]);
              }
            } else {
              if (!rect) {              
                setSelected([index]); // single hover
              }
            }
          }}
          colorDomain={[0, 1]}
          colorRange={['red', 'blue']}
          data={dataWithColor} />

For full example see this.

Things to remember, managing the rectangle and selected list are two different things. React-vis colorRange should be clear by now, the docs were not so helpful to me.

Upvotes: 0

Related Questions