React-Vis Graph with Million Points and Zoom

 

In this post we will review how to display a react-vis graph with million points, including zoom support.

React-Vis is a great library that can display many times of charts. In this post we will use a simple line chart with react and redux. We also include a zoom support. 

Another important issue in this post is handling millions of points. If we try to display millions of points, the react-vis library starts slowing down, hence we add special handling in transforming the original huge amount of points to up to 1000 visible points. We use a transformation to join several points into one average point to get to this requirement.

First, let review the reduce slice.

slice.js

import {createSlice} from '@reduxjs/toolkit'


const maxPoints = 1000

const initialState = {
  selections: {},
  points: {},
  series: {},
}


function getSelectedPoints(points,selection) {
  if (!selection) {
    return points
  }
  const selectedPoints = []

  points.forEach(point => {
    if (point.x >= selection.left && point.x <= selection.right) {
      selectedPoints.push(point)
    }
  })
  return selectedPoints
}

function reducePoints(points, ratio) {
  if (ratio <= 1) {
    return points
  }

  const reduced = []
  let slice = []
  points.forEach(point => {
    slice.push(point)
    if (slice.length === ratio) {
      let x = 0
      let y = 0
      slice.forEach(slicePoint => {
        x += slicePoint.x
        y += slicePoint.y
      })


      const averagePoint = {
        x: x / slice.length,
        y: y / slice.length,
      }

      reduced.push(averagePoint)

      slice = []
    }
  })
  return reduced
}

function convertPoints(state,graphId) {
  const selection = state.selections[graphId]
  const points = state.points[graphId]
  const xWidth = points[points.length - 1].x - points[0].x
  const selectedPoints = getSelectedPoints(points,selection)

  let allowedPoints
  if (selection) {
    const selectedWidth = Math.trunc(selection.right - selection.left)
    allowedPoints = Math.trunc(maxPoints * xWidth / selectedWidth)
  } else {
    allowedPoints = maxPoints
  }

  const ratio = Math.trunc(points.length / allowedPoints)
  return reducePoints(selectedPoints, ratio)
}

function updateSeries(state, graphId) {
  state.series[graphId] = [
    {
      title: 'Apples',
      disabled: false,
      data: convertPoints(state,graphId),
    },
  ]
}


export const slice = createSlice({
  name: 'graph',
  initialState,
  reducers: {
    setPoints: (state, action) => {
      const {graphId, points} = action.payload
      state.points[graphId] = points
      updateSeries(state,graphId)
    },
    setSelection: (state, action) => {
      const {graphId, selection} = action.payload
      state.selections[graphId] = selection
      updateSeries(state,graphId)
    },
    clearSelection: (state, action) => {
      const {graphId} = action.payload
      delete state.selections[graphId]
      updateSeries(state,graphId)
    },
  },
})

export const {setSelection, clearSelection, setPoints} = slice.actions


export function selectState(state) {
  return state.graph
}

export default slice.reducer

 We supply 3 actions: set points, set selection (for zoom), and clear selection (for zoom removal).

The convertPoints function, first selects only the relevant points according to the zoom selection area, and the reduce the points according to the amount of points. For example, if we have 1,000,000 points, and we zoom on scale 400,000-500,000, then we're left with 100,000 points. Then we convert each 100 points to a single average point so we only use 1000 points for the actual display.

The following class controls the way the axis labels are displayed:

custom-axis-label.js

import React, { PureComponent } from 'react';
import './index.css'

class CustomAxisLabel extends PureComponent {

  render() {

    const yLabelOffset = {
      y: this.props.marginTop + this.props.innerHeight / 2 + this.props.title.length*2,
      x: 10
    };

    const xLabelOffset = {
      x: this.props.marginLeft + (this.props.innerWidth)/2 - this.props.title.length*2,
      y: 1.2 * this.props.innerHeight
    };

    const transform = this.props.xAxis
      ? `translate(${xLabelOffset.x}, ${xLabelOffset.y})`
      : `translate(${yLabelOffset.x}, ${yLabelOffset.y}) rotate(-90)`;

    return (
      <g transform={transform}>
        <text className= 'unselectable axis-labels'>
          {this.props.title}
        </text>
      </g>
    );
  }
}

CustomAxisLabel.displayName = 'CustomAxisLabel';
CustomAxisLabel.requiresSVG = true;
export default CustomAxisLabel;

We set the labels orientation, and the margins for the labels.

The highlight class handles the zoom in the graph by sending and event with the selection zoom rectangle.

highlight.js

import React from "react";
import { ScaleUtils, AbstractSeries } from "react-vis";

export default class Highlight extends AbstractSeries {
  static displayName = "HighlightOverlay";
  static defaultProps = {
    allow: "x",
    color: "rgb(77, 182, 172)",
    opacity: 0.3
  };

  state = {
    drawing: false,
    drawArea: { top: 0, right: 0, bottom: 0, left: 0 },
    x_start: 0,
    y_start: 0,
    x_mode: false,
    y_mode: false,
    xy_mode: false
  };

  constructor(props){
    super(props);
    document.addEventListener("mouseup", function (e) {
      this.stopDrawing()
    }.bind(this));
  }

  _cropDimension(loc, startLoc, minLoc, maxLoc) {
    if (loc < startLoc) {
      return {
        start: Math.max(loc, minLoc),
        stop: startLoc
      };
    }

    return {
      stop: Math.min(loc, maxLoc),
      start: startLoc
    };
  }

  _getDrawArea(loc) {
    const { innerWidth, innerHeight } = this.props;
    const { x_mode, y_mode, xy_mode } = this.state;
    const { drawArea, x_start, y_start } = this.state;
    const { x, y } = loc;
    let out = drawArea;

    if (x_mode | xy_mode) {
      // X mode or XY mode
      const { start, stop } = this._cropDimension(x, x_start, 0, innerWidth);
      out = {
        ...out,
        left: start,
        right: stop
      }
    }
    if (y_mode | xy_mode) {
      // Y mode or XY mode
      const { start, stop } = this._cropDimension(y, y_start, 0, innerHeight);
      out = {
        ...out,
        top: innerHeight - start,
        bottom: innerHeight - stop
      }
    }
    return out
  }

  onParentMouseDown(e) {
    const { innerHeight, innerWidth, onBrushStart } = this.props;
    const { x, y } = this._getMousePosition(e);
    const y_rect = innerHeight - y;

    // Define zoom mode
    if (x < 0 & y >= 0) {
      // Y mode
      this.setState({
        y_mode: true,
        drawing: true,
        drawArea: {
          top: y_rect,
          right: innerWidth,
          bottom: y_rect,
          left: 0
        },
        y_start: y
      });

    } else if (x >= 0 & y < 0) {
      // X mode
      this.setState({
        x_mode: true,
        drawing: true,
        drawArea: {
          top: innerHeight,
          right: x,
          bottom: 0,
          left: x
        },
        x_start: x
      });

    } else if (x >= 0 & y >= 0) {
      // XY mode
      this.setState({
        xy_mode: true,
        drawing: true,
        drawArea: {
          top: y_rect,
          right: x,
          bottom: y_rect,
          left: x
        },
        x_start: x,
        y_start: y
      });
    }

    // onBrushStart callback
    if (onBrushStart) {
      onBrushStart(e);
    }

  }

  stopDrawing() {
    // Reset zoom state
    this.setState({
      x_mode: false,
      y_mode: false,
      xy_mode: false
    });

    // Quickly short-circuit if the user isn't drawing in our component
    if (!this.state.drawing) {
      return;
    }

    const { onBrushEnd } = this.props;
    const { drawArea } = this.state;
    const xScale = ScaleUtils.getAttributeScale(this.props, "x");
    const yScale = ScaleUtils.getAttributeScale(this.props, "y");

    // Clear the draw area
    this.setState({
      drawing: false,
      drawArea: { top: 0, right: 0, bottom: 0, left: 0 },
      x_start: 0,
      y_start: 0
    });

    // Invoke the callback with null if the selected area was < 5px
    if (Math.abs(drawArea.right - drawArea.left) < 5) {
      onBrushEnd(null);
      return;
    }

    // Compute the corresponding domain drawn
    const domainArea = {
      bottom: yScale.invert(drawArea.top),
      right: xScale.invert(drawArea.right),
      top: yScale.invert(drawArea.bottom),
      left: xScale.invert(drawArea.left)
    };

    if (onBrushEnd) {
      onBrushEnd(domainArea);
    }
  }

  _getMousePosition(e) {
    // Get graph size
    const { marginLeft, marginTop, innerHeight } = this.props;

    // Compute position in pixels relative to axis
    const loc_x = e.nativeEvent.offsetX - marginLeft;
    const loc_y = innerHeight + marginTop - e.nativeEvent.offsetY;

    // Return (x, y) coordinates
    return {
      x: loc_x,
      y: loc_y
    }

  }

  onParentMouseMove(e) {
    const { drawing } = this.state;

    if (drawing) {
      const pos = this._getMousePosition(e);
      const newDrawArea = this._getDrawArea(pos);
      this.setState({ drawArea: newDrawArea });
    }

  }

  render() {
    const {
      marginLeft,
      marginTop,
      innerWidth,
      innerHeight,
      color,
      opacity
    } = this.props;
    const { drawArea: { left, right, top, bottom } } = this.state;
    return (
      <g
        transform={`translate(${marginLeft}, ${marginTop})`}
        className="highlight-container">
        <rect
          className="mouse-target"
          fill="black"
          opacity="0"
          x={0}
          y={0}
          width={innerWidth}
          height={innerHeight}
        />
        <rect
          className="highlight"
          pointerEvents="none"
          opacity={opacity}
          fill={color}
          x={left}
          y={bottom}
          width={right - left}
          height={top - bottom}
        />
      </g>
    );
  }
}

Last one is the graph class with uses all of the above.

component.js

import React from 'react'
import '../../node_modules/react-vis/dist/style.css'

import {
  Borders,
  DiscreteColorLegend,
  HorizontalGridLines,
  LineSeries,
  VerticalGridLines,
  XAxis,
  XYPlot,
  YAxis,
} from 'react-vis'
import Highlight from './highlight'
import {useDispatch, useSelector} from 'react-redux'
import {selectState, setSelection} from './slice'

function Graph(props) {
  const {graphId} = props
  const dispatch = useDispatch()
  const state = useSelector(selectState)
  const selection = state.selections[graphId]
  const series = state.series[graphId]

  if (!series) {
    return null
  }

  const width = 1000

  function highlightArea(area) {
    dispatch(setSelection({
      graphId,
      selection: area,
    }))
  }

  return (
    <div>
      <div className="legend">
        <DiscreteColorLegend
          width={180}
          items={series}/>
      </div>

      <div className="chart no-select" onDragStart={function (e) {
        e.preventDefault()
      }}>
        <XYPlot
          xDomain={selection && [selection.left, selection.right]}
          yDomain={selection && [selection.bottom, selection.top]}
          height={500}
          width={width}
          margin={{left: 45, right: 20, top: 10, bottom: 200}}>

          <HorizontalGridLines/>
          <VerticalGridLines/>

          {series.map(entry => (
            <LineSeries
              key={entry.title}
              data={entry.data}
            />
          ))}

          <Highlight
            onBrushEnd={highlightArea}
          />
          <Borders style={{all: {fill: '#fff'}}}/>
          <XAxis tickFormat={(v) => new Date(v * 3600 * 1000).toISOString()} tickLabelAngle={-60}/>
          <YAxis tickFormat={(v) => (<tspan className="unselectable"> {v} </tspan>)}/>
        </XYPlot>
      </div>
    </div>
  )
}

export default Graph

Notice that the graph supports multiple instance by using the graphId property. In this case we treat the x-axis as hours so we multiply it we 3600 seconds. The graph display a list of points, each including the x and y properties.

Final Note

While the react-vis response time is good, redux slows the GUI down. To prevent this, configure redux to skip the data of the reducer containing the huge amount of data. For example, to ignore the graph reducer data, use:

import {configureStore} from '@reduxjs/toolkit'

import notification from './notification/slice'
import dashboard from './dashboard/slice'
import graph from './graph/slice'
import histogram from './histogram/slice'

export const store = configureStore({
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    immutableCheck: {ignoredPaths: ['graph']},
    serializableCheck: {ignoredPaths: ['graph']},
  }),
  reducer: {
    dashboard,
    histogram,
    graph,
    notification,
  },
})