React simple data graphics – Learn how to make a progress bar

Learn how to create graphical data with React vector drawing rectangles in the React application

The rectangle.

Photo by Samuel Zeller.

preface

Last month I attended meetup’s ReactJS panel in Boston to discuss some of the data visualization strategies in the React framework. The host is Adam Mark, a user interface engineer at MC10. Adam’s posts range from the funky and sophisticated to the very simple. He made an incredibly simple progress bar with an SVG vector rectangle in the React framework that was incredibly simple, yet clean and concise.

If you just want the code and not the tutorial, go to Adam’s GitHubGist home page, which has all the Meter Component code for the React bar.

What are we going to make?

What we are going to do is a data progress bar with different colors, shapes, sizes and animations:

If you’re interested in this tutorial, I highly recommend checking out the three best React JS lessons I’ve written. In this course, you’ll learn how to build some large-scale, real-world React applications.

The SVG code

Our React component dynamically generates SVG code based on input variables. The following example shows how SVG code for drawing a progress bar should look:

<svg width="100" height="10">
  <rect width="100" height="10" fill="#ccc" rx="0" ry="0"></rect>
  <rect width="20" height="10" fill="#0078bc" rx="0" ry="0"></rect></svg>
Copy the code

That’s all.

Defines an SVG object that contains two RecT objects (rectangles). The first rectangle is 100 pixels wide and gray. Render a smaller blue rectangle on top of this one, only 20 pixels wide. It looks something like this:

Wow, the progress bar is out. Cool.

Simply rendering a colored rectangle on top of a gray rectangle produces a progress bar that looks great.

But how do you dynamically generate such SVG code? This is where react comes in. Pass all the data to a React component via properties (props), and the component will render the rectangles correctly.

React Project establishment

This project we’re going to use [the create – react – app] (https://github.com/facebookincubator/create-react-app) as a foundation, on the basis of this model the react of the step by step to make a can run the application:

create-react-app react-svg-meter
cd react-svg-meter
npm start
Copy the code

Once the server program is started, you can browse the address [http://localhost:3000/](http://localhost:3000/) and see the boilerplate code in action.

Now is the fun part. Create a file called meter. js in the SRC folder, import the react module, and output a function called Meter. In this function, you only need to return a test value for now.

import React from 'react';
Copy the code
var Meter = function (props) {
  return(
    <div>test</div>
  );
}
Copy the code
export default Meter;
Copy the code

Now import this function in the app.js file:

`import Meter from './Meter'; `Copy the code

Finally, modify the return statement in the app.js file to return the Meter component:

return (
  <div className="App">
    <Meter />
  </div>
);
Copy the code

Good. Step one is done. Now a browser visiting the address [http://localhost:3000/](http://localhost:3000/) should see the word ‘test’.

Meter. Js file

The meter.js file is the magic of this program. But it’s actually not magic, it’s pretty simple. First, we’ll set some default properties:

Var Meter = function (props) {var {percent = 0, // Numbers: 0 to 1, including 0 and 1. Width = 100, // Progress bar width = 10, rounded = true, rounded = "# 0078BC ", rounded = rounded // animate = false, // if true, use animation.Copy the code
/ /... }Copy the code

The comments above should make it clear what each attribute does. We can now use these properties to dynamically create and return an SVG diagram progress bar.

Think about the previous code and draw a blue bar with 20% progress:

<svg width="100" height="10">
  <rect width="100" height="10" fill="#ccc" rx="0" ry="0"></rect>
  <rect width="20" height="10" fill="#0078bc" rx="0" ry="0"></rect></svg>
Copy the code

Now we will replace the input fixed value with a variable and return the SVG element. This is what it looks like:

return (
  <svg width={width} height={height} aria-label={label}>
    <rect width={width} height={height} fill="#ccc" rx={r} ry={r}/>
    <rect width={w} height={height} fill={color} rx={r} ry={r}   style={style}/>
  </svg>
);
Copy the code

As you can see, there are several variables that need to be evaluated: r (rounded corners), W (width), and style (style).

  • rCreate rounded corners if needed:
var r = rounded ? Math.ceil(height / 2) : 0;
Copy the code
  • wCalculate the width of the painted rectangle to form the progress bar effect:
var w = percent ? Math.max(height, width * Math.min(percent, 1)): 0;
Copy the code
  • styleAdd an animation to the progress bar if necessary:
var style = animate ? { "transition": "width 500ms, fill 250ms" } : null;
Copy the code

You now have a progress bar component that dynamically returns an SVG graph object based on the input properties. If no properties are passed in, the component has default values and returns a gray bar with 0% progress.

Send messages from the app.js file

Now there is only one more step, how to pass the data from the app.js file. Here is an example of what the code should look like to create various progress bars using the app.js file:

// By default, an empty progress bar **<Meter />**Copy the code
Meter Percent ={.8} />**Copy the code
Rounded ={.6} Rounded ={false} /> rounded={.6} rounded={false} rounded={Copy the code
Rounded ={.4} width={250} height={17} rounded={false} />**Copy the code

Code link:

  • Check out the meter.js file on Adam’s Gist home page.
  • My GitHub home page shows the entire React application including the meter.js file.
  • You can see a practical demonstration on Codepen.

To complete the

This is just a simple graphical representation of the data using React. I post some files and tutorials every week and would like to add them to my weekly email notification list, please enter your email here.

If you’re interested in this kind of tutorial, and want to learn how to make more stylish things with React, check out the three best React JS lessons here.

If this post is helpful, please show your support by clicking the clap 👏 button below a few times. ⬇ ⬇