DEV Community: Dheeraj

Building a responsive chart in React with Plotly.js

Dheeraj — Sat, 11 Sep 2021 10:38:32 +0000

If you are building a web application that involves a lot of charts, Plotly.js is one of the best open source choice you can find. Built on top of D3 Plotly is a high level charting library which has over 40 types of charts including ones in 3D.

To get plotly running in react you need to use a react wrapper called react-plotly.js. This library comes with a dependency of needing plotly.js, despite it's huge bundle size; 6Mb unminified, and minifies to just over 2Mb(There are ways to bring down the bundle size, but more on that later) I still believe it is still one of the easiest high-level declarative charting library that you can use with react today.

Installing and using react-plotly

npm install react-plotly.js plotly.js

A point to note here, as of the time of writing this blog, ploty.js is a client-side rendering library and doesn't yet support server side rendering.

The most basic usage goes like...

import React from 'react';
import Plot from 'react-plotly.js';

export function PlotlyChart() {

    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            marker: {color: 'red'},
          },
        ]}
        layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
      />
    );
}

Bringing the bundle size down

As I mentioned Plotly support over 40 types of charts, you may not need all of them, or ever half of them in your project. Having a 2MB dependency hanging around in you project is not always the best idea.

Plotly provides couple of ways to get around this issues. One of them is Partial bundles, a subset of all the plotly charts which comes in a smaller bundle size. You can find complete details on these over here

Or else, if you are feeling a bit hacky you can create a custom bundle tailor made for your project with only the charts you need. More on that here

For this tutorial let's go with minified plotly.js basic partial bundle which packages around 999 kB.

install using

npm i plotly.js-basic-dist-min

Using this version require a bit of a work than before.

1. import the minified package that we just added

import Plotly from "plotly.js-basic-dist-min";

2. Import react-plotly factory function

import createPlotlyComponent from "react-plotly.js/factory";

3. Create the Plot component form the Plotly import using the factory function

const Plot = createPlotlyComponent(Plotly);

Well there you go, you can now use your Plotly chart as the Polt component.

Oh, and it’s now safe to remove the Plotly.js dependency from your package.json file. We are not using it anymore.

import React from 'react';
import Plotly from "plotly.js-basic-dist-min";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

export function PlotlyChart() {

    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            marker: {color: 'red'},
          },
        ]}
        layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
      />
    );
}

Adding typescript support

react-plotly.js does not come with native typescript support, but you can get the declaration provided by @types/react-plotly.js

npm install -d @types/react-plotly.js

One big problem here is, if you are using the partial bundles, you may not get a type declaration for that specific bundle at all. But there is workaround for that.

Add type roots to you tsconfig file.

"typeRoots": [
    "src/types/customTypings", // this path may vary depending on you project set up.
    "node_modules/@types"
  ]

create a plotly.js-cartesian-dist-min.d.ts file in your custom typings folder and add the below code.

declare module "plotly.js-cartesian-dist-min" {
  import * as Plotly from "plotly.js";
  export default Plotly;
}

We are importing plotly.js declarations that came with @types/react-plotly.js and exporting it as declarations for plotly.js-cartesian-dist-min. This will provides all the types required for the Plot component and our partial bundle.

Making the chart responsive

To make the chart responsive when the window is resized, define height and width either by using styles prop or by using className and of cause you can use width: 100%; height: 100%.

You also need to set useResizeHandler prop to true, while setting layout.autosize to true and leaving layout.height and layout.width undefined.

import React from 'react';
import Plotly from "plotly.js-basic-dist-min";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

export function PlotlyChart() {

    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            marker: {color: 'red'},
          },
        ]}
        layout={{autosize: true, title: 'A Fancy Plot'}}
        useResizeHandler
        className="w-full h-full" // I am using tailwind.css here, scss or just css would work fine as well
      />
    );
}

The Problem

Now, the key thing to note here is

To make the chart responsive when the window is resized

What if your window size doesn't change? what if you have some element, let's say a sidebar that pops in and out which changes the width of you component?

Plotly's resize function depends on window resizing, it will only trigger when it detects a change in window size.

The Solution

Trigger the resize function manually!

Plotly.Plots.resize()

Ya I know, it doesn't sounds like much, But I had to searched far and wide to finally find a solution to get this working. So here you go. The basics goes like this.

use an effect to trigger the layout resize function
Find a trigger in your app to run the effect. This depends on your use case.

In my case, I triggered the effect every time the sidebar came in and out.

  useEffect(() => {
    Plotly.Plots.resize();
  }, [showSideBar]);

Don't want all your charts to resize? Yep, I got that covered as well..

Add a prop divId to your Plot component and use this as an argument to the resize function.

the final code would look something like

import React from 'react';
import Plotly from "plotly.js-basic-dist-min";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

export function PlotlyChart({sideBarOpen}) {

useEffect(() => {
 Plotly.Plots.resize("plotlyChart");
  }, [sideBarOpen]);

    return (
      <Plot
        divId="plotlyChart"
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            marker: {color: 'red'},
          },
        ]}
        layout={{autosize: true, title: 'A Fancy Plot'}}
        useResizeHandler
        className="w-full h-full" // I am using tailwind.css here, scss or just css would work fine as well
      />
    );
}

Bonus Tip

Because the way how react-plotly works, the chart type is actually defined by the data.type prop of the Plot component.

let's say you want to change our line chart example to a bar chat(assuming that the layout stays the same, in most cases you won't be needing to change it), the only thing that changes here is the data prop. you can extract it out to keep only a single chart component for your entire project. Neat, eh?!

File Upload in react with FilePond

Dheeraj — Fri, 07 Aug 2020 17:07:44 +0000

FilePond is javascript library that that can upload almost anything you through at it. It is one of the best and all rounded file uploading solutions out there IMO.

In this tutorial, we'll create a simple file upload component and configure it, with react, hooks and typescript.

Getting the dependencies

Let's start by adding filepond and it's react implementation to our project dependency.

npm install react-filepond filepond --save

FilePond comes with a lot of extensions that you can use to add extra functionalities like file size validation, image preview etc.. But For now this is just enough to get us started.

Creating your react component

Let's create a component, which will have a prop as a callback once the upload is complete, and on for the list of accepted file types.

1  import React from 'react';
2  
3  interface FileUploaderProps {
4    onUploadComplete: () => void;
5    fileTypes: string[];
5  }
6  
7  export const FileUploader = (props: FileUploaderProps) => {
8  
9   return (
10   <div className={styles.wrapper}>
11   // filePond will go here ..
12   </div>
13  )
14 }
15

Introducing filepond

Now lets bring file pond into the mix.

First we import FilePond along with File type def from react-filepond.

2  import { FilePond, File } from 'react-filepond';

now we need a state to store the file once it's uploaded.

This state we will pass to the file prop of the filePond component and the setFiles dispatch will be passed to onupdatefiles prop.

8  export const FileUploader = (props: FileUploaderProps) => {
9  const [files, setFiles] = useState<File[]>([]);

Add FilePond to our wrapper with some basic props.

11   return (
12     <div className={styles.wrapper}>
13      <FilePond
14        files={files}
15        onupdatefiles={setFiles}
16        allowMultiple
17        server="/api" // your file upload api
18        name="files"
19      />
20    </div>
21   )

lets also add the css to get the awesome file upload styles going.

1  import React, { useState } from 'react';
2  import { FilePond, File } from 'react-filepond';
3  
4  import 'filepond/dist/filepond.min.css';

Well we are almost done. Let's add few more tweaks.

Adding drag and drop

Pass dropOnPage to add drag and drop files, additionally you can add dropValidation flag to validate files on drop.

11   return (
12     <div className={styles.wrapper}>
13      <FilePond
14        files={files}
15        onupdatefiles={setFiles}
16        allowMultiple={false}
17        dropOnPage
18        server="/api" // your file upload api
19        name="files"
20        dropOnPage
21        dropValidation
22      />
23    </div>
24   )

Adding pluggings

File pond supports a ton of plugging, you can find a full list over here.

For now, let's add file type validation plugin.

First we install the plugin.

npm install filepond-plugin-file-validate-size

Then, import registerPlugin from react-filepond.

2  import { FilePond, File, registerPlugin } from 'react-filepond';

now import filepond-plugin-file-validate-size and register the plugin with filePond

1  import React, { useState } from 'react';
2  import { FilePond, File, registerPlugin } from 'react-filepond';
3  
4  import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
5
6  registerPlugin(FilePondPluginFileValidateType);
7  
8  import 'filepond/dist/filepond.min.css';

FilePond component should now take in a props called acceptedFileTypes which takes in array of MIME types. you can get a list of common MIME types here.

Since we are getting the fileTypes as a prop, lets pass it here.

11   return (
12     <div className={styles.wrapper}>
13      <FilePond
14        files={files}
15        onupdatefiles={setFiles}
16        allowMultiple={false}
17        dropOnPage
18        server="/api" // your file upload api
19        name="files"
20        dropOnPage
21        dropValidation
22        acceptedFileTypes={props.fileTypes}
23      />
24    </div>
25   )

You can even go a bit deeper and configure the server prop to add more control over how the files are handled.

Configuring server

The server prop takes in a the API url as a string or an configuration object.

Let's add some basic configurations.

11   return (
12     <div className={styles.wrapper}>
13      <FilePond
14        files={files}
15        onupdatefiles={setFiles}
16        allowMultiple={false}
17        dropOnPage
18        server={{
19          process: {
20            url: "/api/url",
21            headers: {
22              Authorization: `Bearer eyJH18ui0...`,
23            },
24            ondata: (formData) => {
25              formData.append('extraField', value);
26              return formData;
27            },
28            onload: () => {
29              props.onUploadComplete();
30            },
31          }
32        }}
33        name="files"
34        dropOnPage
35        dropValidation
36        acceptedFileTypes={props.fileTypes}
37      />
38    </div>
39   )

ondata callback let's us add extra fields to the post request's formData.

onload is called once the file upload is completed and server responds OK. Now this is where we call our onUploadComplete prop which we are passing on to our component.

Find more on server configurations, here.

That’s it!!

Finally the component

1  import React, { useState } from 'react';
2  import { FilePond, File, registerPlugin } from 'react-filepond';
3  
4  import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
5
6  registerPlugin(FilePondPluginFileValidateType);
7  
8  import 'filepond/dist/filepond.min.css';
9
10  export const FileUploader = (props: FileUploaderProps) => {
11  const [files, setFiles] = useState<File[]>([]);
12
13   return (
14     <div className={styles.wrapper}>
15      <FilePond
16        files={files}
17        onupdatefiles={setFiles}
18        allowMultiple={false}
19        dropOnPage
20        server={{
21          process: {
22            url: "/api/url",
23            headers: {
24              Authorization: `Bearer eyJH18ui0...`,
25            },
26            ondata: (formData) => {
27              formData.append('extraField', value);
28              return formData;
29            },
30            onload: () => {
31              props.onUploadComplete();
32            },
33          }
34        }}
35        name="files"
36        dropOnPage
37        dropValidation
38        acceptedFileTypes={props.fileTypes}
39      />
40    </div>
41   )
42 }
43

Well, that's pretty much it for this tutorial, but the features and configuration for filePond dosen't end there, check out their documentation for more.

Happy coding ;)

Setting up your Mac for web development

Dheeraj — Thu, 06 Aug 2020 16:22:22 +0000

I’m just putting this here so that I can follow it as a checklist when setting up mine and it might help you guys too. I’m a web developer, focusing on javascript and node.

Getting Started

Once you are done booting up and going through the usual set up, make sure your mac is running the latest macOS version and you have Xcode downloaded from app store.

Tools

Homebrew

Homebrew is a package manager for mac, which helps you install your apps via comand line.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

once installed, give it an update.

brew update

Node.js

Download node.js form their website or install it through nvm. It’s better not to use homebrew for just this one. So you can easily switch between node versions.

Download nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

Ensure that nvm was installed correctly with nvm --version, which should return the version of nvm installed.

Install the latest LTS version with

nvm install --lts

Git

You should probably get git when you install Xcode, or you could simply run git from the Terminal the very first time.

git --version

If it is not already installed, it will prompt you to install it. You can also get a macOS installer from the git website.

or with Homebrew

brew install git

Additionally, you can download the GUI for GitHub from here. If thats your thing.

Window management tool

MacOS never had a built in window management solution as good has windows does, but you can get away with it with 3rd party apps like Rectangle, download from their website or with brew.

brew cask rectangle

Applications

Visual Studio code

It is my got to text editor for all things web, it got plenty of features, and you can always find an extension for almost anything.

Download it from here or

brew cask install visual-studio-code

Browsers

You’ve got Safari pre installed, and since its web development, you’d probably need to check you website in different browsers. So, lets get the rest of them...

Chrome — https://www.google.com/chrome/
Firefox — https://www.mozilla.org/en-US/firefox/new/
Opera — https://www.opera.com/hi

with brew;

brew cask install google-chrome firefox opera

Yarn

An alternative to npm.

brew install yarn

Spotify

Well, what is life without some music.

brew cask install spotify

ImageOptim

ImageOptim helps you optimise an compress images for your website, download it form here, or

brew cask install imageoptim

For messaging and communications

Microsoft Teams for work and WhatsApp for friends and family.

brew cask install microsoft-teams whatsapp

Settings and configurations

General

Try dark mode

Dock

Enable automatically hide and show doc.
Enable Show indicators for open applications
Disable show resent application in doc (it gets really messed up soon)

Users & Groups

Add “Rectangle” to Login items

Security and Privacy

Enable Require password immediately after sleep
Turn on FireVault for ssd encryption
Turn on Firewall

Keyboard

Disable “Correct spelling automatically”
Disable “Capitalize words automatically”
Disable “Add period with double-space”

Display

Make sure Night Shift is off

Sharing

Change computer name
Make sure all file sharing is disabled

Setting up the apps

VSCode

Install the extensions and themes

lastly,

To add code . command to open VSCode from mac Terminal. Press CMD + SHIFT + P and click "Install code command in PATH".

Thats pretty much it for now, hope it helped your process.
Let me know what are your go to apps and tools..