Preface #

Initially I did not plan to use canvas for this task, but to use a div with block of span with solid colours.

However, for some bazaar reasons, that would cause the content to offset 1 pixel towards right and bottom.

Since React works directly with DOM elements, I would need to get the canvas context to draw.

The code #

Firstly, is the base class CanvasComponent, where all drawing component will derive from here.

Where except the data property, other props will be passed straightaway to the underlaying canvas element.

// CanvasComponent.tsx
import React, {CanvasHTMLAttributes, Component} from 'react';

export interface ICanvasComponentProps<T> extends CanvasHTMLAttributes<HTMLCanvasElement> {
  data: T;

  // must be present
  width: number;
  height: number;
}

abstract class CanvasComponent<P extends ICanvasComponentProps<T>, S, T> extends Component<P, S> {
  protected canvas?: HTMLCanvasElement;
  protected ctx?: CanvasRenderingContext2D;
  protected drawId: number = 0;

  private setupCanvas = (canvas: HTMLCanvasElement) => {
    this.canvas = canvas;
    if (canvas) {
      this.ctx = canvas.getContext('2d')!;
      this.dispatchDraw();
    }
  };

  render() {
    cancelAnimationFrame(this.drawId);
    this.drawId = requestAnimationFrame(this.dispatchDraw);

    const { data, ...props } = this.props;

    return (
      <canvas {...props} ref={this.setupCanvas} />
    );
  }

  abstract draw(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void;
  private dispatchDraw = () => {
    if (this.ctx && this.canvas) {
      this.draw(this.ctx, this.canvas);
    }
  };
}

export default CanvasComponent;

Then the actual component to implement the draw method, for example the StorageBar component to illustrate the storage usage:

import CanvasComponent, {ICanvasComponentProps} from "./CanvasComponent";

interface ICanvasData {
  used: number;
}

interface IPropsCanvas extends ICanvasComponentProps<ICanvasData> {

}

interface IState {

}

class StorageBar extends CanvasComponent<IPropsCanvas, IState, ICanvasData> {
  draw(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
    const { data, width, height } = this.props;
    const {
      used
    } = data;

    const w = width - 2;
    const h = height - 2;

    ctx.strokeStyle = '1px solid #000';
    ctx.strokeRect(0, 0, width, height);

    ctx.fillStyle = '#fff';
    ctx.fillRect(1, 1, w, h);

    const usedBar = w * used;
    ctx.fillStyle = '#4d9510';
    ctx.fillRect(1, 1, usedBar, h);
  }
}

export default StorageBar;

Finally, use it elsewhere like so:

<StorageBar
  className="storage-bar"
  data={{
    used: used / total
  }}
  width={100}
  height={16}
/>

How it looks #

You can also see it in action at stats.jixun.uk.