Allow the component to take relative values for width and height.

Author: twisty

src/index.js

@@ -6,10 +6,10 @@ import { CanvasRenderer } from './renderers/';
 type fillStyle = string | CanvasGradient | CanvasPattern;
 
 type Props = {
-  /** The width of the canvas element, in pixels */
-  width: number,
-  /** The height of the canvas element, in pixels */
-  height: number,
+  /** The CSS width of the element */
+  width: number | string,
+  /** The CSS height of the element */
+  height: number | string,
   /** The total number of steps to complete the ring */
   steps: number,
   /** The current step */
@@ -154,36 +154,42 @@ export class RadialProgress extends React.Component<Props, State> {
       );
     };
     const label = (steps, proportion) => {
-      return (
-        <div
-          className="RadialProgressIndicator__label"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: this.props.width,
-            height: this.props.height,
-            lineHeight: `${this.props.height}px`,
-            textAlign: 'center',
-            fontSize: `${this.props.height / 4}px`,
-            color: this.props.ringFgColour,
-          }}
-        >
-          {this.props.text(steps, proportion)}
-        </div>
-      );
+      if (this.graphic && this.graphic.canvas) {
+        const rect = this.graphic.canvas.getBoundingClientRect();
+        const diameter = Math.min(rect.height, rect.width);
+        const style = {
+          position: 'absolute',
+          textAlign: 'center',
+          color: this.props.ringFgColour,
+          fontSize: `${diameter / 4}px`,
+        };
+        return (
+          <div className="RadialProgressIndicator__label" style={style}>
+            {this.props.text(steps, proportion)}
+          </div>
+        );
+      }
+      return null;
     };
     const startProportion = this.props.startStep / this.props.steps;
     const endProportion = this.props.step / this.props.steps;
     const proportion =
       startProportion +
       (endProportion - startProportion) * this.getProportion();
     return (
-      <div className="RadialProgressIndicator" style={{ position: 'relative' }}>
+      <div
+        className="RadialProgressIndicator"
+        style={{
+          position: 'relative',
+          width: this.props.width,
+          height: this.props.height,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
         <CanvasRenderer
           ref={ref => (this.graphic = ref)}
-          width={this.props.width}
-          height={this.props.height}
           proportion={proportion}
           showIntermediateProgress={this.props.showIntermediateProgress}
           segmented={this.props.segmented}

src/renderers/index.js

@@ -9,7 +9,6 @@ type fillStyle = string | CanvasGradient | CanvasPattern;
 type Props = {
   backgroundColour: fillStyle,
   backgroundTransparent: boolean,
-  height: number,
   proportion: number,
   ringBgColour: fillStyle,
   ringFgColour: fillStyle,
@@ -18,14 +17,12 @@ type Props = {
   showIntermediateProgress: boolean,
   segmented: boolean,
   steps: number,
-  width: number,
 };
 
 export class CanvasRenderer extends React.Component<Props> {
   static defaultProps = {
     backgroundColour: '#fff',
     backgroundTransparent: true,
-    height: 100,
     proportion: 0,
     ringBgColour: '#ccc',
     ringFgColour: '#3c763d',
@@ -34,32 +31,38 @@ export class CanvasRenderer extends React.Component<Props> {
     showIntermediateProgress: false,
     segmented: true,
     steps: 360,
-    width: 100,
   };
 
   ctx: CanvasRenderingContext2D;
 
   canvas: HTMLCanvasElement | null;
 
   componentDidMount = () => {
-    if (this.canvas) {
-      this.ctx = getCanvasContext(this.canvas);
-      this.draw();
+    if (this.canvas !== null) {
+      // Assign canvas to local variable to work around a flow refinement invalidation.
+      // https://flow.org/en/docs/lang/refinements/#toc-refinement-invalidations
+      const canvas = this.canvas;
+      this.ctx = getCanvasContext(canvas);
+      this.draw(canvas);
     }
   };
 
-  componentDidUpdate() {
-    if (this.canvas) {
-      this.draw();
+  componentDidUpdate = () => {
+    if (this.canvas !== null) {
+      this.draw(this.canvas);
     }
-  }
+  };
+
+  draw = (canvasElement: HTMLCanvasElement) => {
+    const rect = canvasElement.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
 
-  draw = () => {
-    const x = this.props.width * 0.5;
-    const y = this.props.height * 0.5;
+    const x = width * 0.5;
+    const y = height * 0.5;
 
     const radius = radiusProportion => {
-      return (this.props.width / 2) * radiusProportion;
+      return (Math.min(width, height) / 2) * radiusProportion;
     };
 
     const step = Math.floor(this.props.steps * this.props.proportion);
@@ -69,7 +72,7 @@ export class CanvasRenderer extends React.Component<Props> {
     const stepDegree = (360 / this.props.steps) * step;
 
     // Clear the canvas
-    this.ctx.clearRect(0, 0, this.props.width, this.props.height);
+    this.ctx.clearRect(0, 0, width, height);
 
     // Draw the background circle
     drawSegment(this.ctx, x, y, radius(1), 0, 360);
@@ -128,8 +131,8 @@ export class CanvasRenderer extends React.Component<Props> {
       <canvas
         ref={ref => (this.canvas = ref)}
         style={{
-          width: this.props.width,
-          height: this.props.height,
+          width: '100%',
+          height: '100%',
         }}
       />
     );