Forem: Divyesh Parmar

Understanding chart.js to showcase analytical metrics

Divyesh Parmar — Sun, 10 Apr 2022 15:01:19 +0000

There is a dire need of including a chart based library to showcase metrics at my workplace ecosystem. While building features from scratch, we realised a lot feature parity that comes from Looker dashboards. It was a joint exercise to explore varius analytics dashboards that uses charts to show different metrics.

As an engineer/developer, there should be significant amount of data manipulation/transformation processes done in order to understand what metric should be rendered in what format.

Going through chart.js library and the documentation, the learning curve is short. The support for different set of data with several entities in one chart makes it more flexible. This helped align our product requirements to data in a flexible way.

For the purpose of explaining the base design of code, we will directly jump into the code part. This can be divided into two major things.

A wrapper component on top of chart.js to support base React.js

A custom function (or React-hook) to separate business logic

Custom wrapper component

import React, { useEffect, useRef, useState } from 'react';
import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import 'chartjs-adapter-moment';
import { PropTypes } from 'mobx-react';

/**
 * @returns JSX Element
 * Native Chart accepts three basic props to render a chart with chartjs library.
 * type : explains the kind of chart mentioned in CHART_TYPES
 * data : the values and the labels that chart should renders
 * options : all the relevant options that should be providing a layout or design the chart.
 */
 export default function NativeChart (props) {
  const [chart, setChart] = useState(null);

  const chartRef = useRef(null);

  useEffect(() => {
    let config = {
      data: props.data,
      plugins: [ChartDataLabels],
      options: props.options
    };

    // Set and override chart types only if the prop 'type' is provided
    props.type && (config['type'] = props.type);

    let chart = new Chart(chartRef.current, config);
    setChart(chart);

    return () => {
      chart.destroy();
      setChart(null);
    };
  }, [props.data, props.options]);

  return (
    <div className='native-chart'>
      <canvas ref={chartRef} />
    </div>
  );
}

NativeChart.propTypes = {
  type: PropTypes.string,
  data: PropTypes.object,
  options: PropTypes.object
};

This is a basic component setup that chart.js recommends. This includes the key canvas element which is where chart.js draws the chart. This canvas element draws the chart with the instance of config. Config is made up of three major items, which are getting as prop passed to this component.

type : type of chart i.e., bar, line, area, doughnut, pie, etc.

data: A simple mapping object includes all the data points, x-axis ticks, y-axis ticks, axes names, entities lenged, etc.

const labels = ['Mar 21', 'April 21', 'May 21']; //Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
}

options: Chart options are the key to modify the look and feel of the chart based on product specs. This allows to modify text, color, aeshtetics, truncate long strings, interactions with charts like click and hover, transformation of data points.

Function for Business logic (custom react-hook)

The wrapper/native chart component can be reutilised in the container page of choice. This is where it requires the type, data and options available readily. To separate this part, we at Reporting have came up with a function that acts more like a custom react hooks. As mentioned it returns us with type, data and options. In order for it to formulate these three components, we can pass in major data and methods to mainly operate functionalities for these charts.

This separation also helps us in formualting the data before chart renders, so we as engineers can make sure our rendering cycle is not dynamic with data changes.

// container page of the Chart wrapper/native component

...
  let { chartType, chartData, chartOptions } = generateChart(rep.value, currentTheme, reportGroup, populateDrills, setTileActive, executeScroll);
...
return (
  <>
  ...
  <NativeChart
    key={rep.value.id} // only required when there are list of charts 
    type={chartType}
    data={chartData}
    options={chartOptions}
  />
  ...
  <>
)

In this above snippet, generateChart is that function which takes in

all the data that comes from Backend (e.g., reporting-api)

Several other functions based on state of the app, as well as functionalities to define interactions on top of chart

The internal structure of this function/custom-hook follows the same methodolgy to traverse through chart-data.

The chart-type can come predefined from the backend mentioning the kind of chart to render.

As we iterate over the chart-data, there can be several checks based on the type of chart. All these checks can transform the chart-data in a way that our wrapper component can be hydrated. Along with this, logic should be specified to modify the default chart-options. This way chart.js has clear instructions to render with set of colors, level of details, readibility and view changes.

// define default/base chart-type
let chartType = '',

// define default chart-data
let chartData = {
    labels: report.data.labels,
    datasets: []
  };

// define default chart-options
let chartOptions = {
    animation: false,
    maintainAspectRatio: false,
    scales: {
      x: {
        title: {
          display: report.data.title && report.data.title.x ? true : false,
          text: report.data.title && report.data.title.x ? report.data.title.x : '',
          color: currentTheme['content-color-secondary'],
          font: 'Inter',
          padding: {
            top: 8,
            bottom: 8
          }
        },
        ticks: {
          display: true,
          color: currentTheme['content-color-tertiary'],
          padding: 8
        },
        grid: {
          drawOnChartArea: false,
          drawTicks: false,
          borderColor: currentTheme['grey-05'],
          color: currentTheme['grey-05'],
          z: -1
        },
        offset: true
      },
      y: {
        title: {
          display: report.data.title && report.data.title.y ? true : false,
          text: report.data.title && report.data.title.y ? report.data.title.y : '',
          color: currentTheme['content-color-secondary'],
          font: 'Inter',
          padding: {
            bottom: 16
          }
        },
        grid: {
          drawOnChartArea: false,
          drawTicks: false,
          borderColor: currentTheme['grey-05'],
          color: currentTheme['grey-05']
        },
        ticks: {
          display: true,
          padding: 16,
          crossAlign: 'near',
          color: currentTheme['content-color-tertiary'],
          autoSkipPadding: 20
        },
        beginAtZero: true
      }
    },
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          usePointStyle: true,
          color: currentTheme['content-color-primary'],
          boxWidth: 8,
          generateLabels: () => {},
          }
      },
      onHover: (e) => e.chart.canvas.style.cursor = 'pointer',
      onLeave: (e) => e.chart.canvas.style.cursor = 'default',
      onClick: function (e, legendItem, legend){}
      },
      datalabels: {
        display: 'auto',
        anchor: 'center',
        clamp: true,
        font: {
          weight: 600,
          size: 11,
          lineHeight: 1.8
        }
     },

While this file can also hold other wrapper functions and conditionals for the different functionalities, the basic logic is to iterate over the provieded chart-data from backend and extract information and feed to this fundamental elements to returns, i.e., chart-type, chart-data, chart-options.

Here we check the data and for each dataset we indentify several options and actual data paremeters to render. This setup provides strong ability to include several type of charts in one canavas to draw. e.g., we have chart Used slots over time chart on this report-page (https://cooper.postman-beta.co/reports/resource-usage ) includes two sets of bar charts along with a line chart.

...
chartData.datasets = _.map(report.data.dataset, (set, index) => {

  if(set.type === DOUGHNUT){
    ...
    // 1. transform chart-data to feed
    ... 
    // 2. transform chart-options according to product-specs and requirements e.g.,
    // 2.1 also modify the CSS here for better look and feel
     _.set(chartOptions, 'scales.x.display', false);
      _.set(chartOptions, 'scales.y.display', false);
      // we hide away ticks from showing up on any axis 

    // 3. Provide the defined colour set to this chart-options e.g., 
    newSet.backgroundColor = DATASETS_COLOURS.slice(0, newSet.data.length);
    newSet.borderColor = DATASETS_COLOURS.slice(0, newSet.data.length);

    // 4. set or unset onClick, onHover behaviours on chart, chart-data-points, etc.
    _.set(chartOptions, 'onClick', () => {})

  }  

  if(set.type == BAR){
    // same as above
  }

  if(set.type == AREA){
    // same as above
  }

  if(set.type == LINE){
    // same as above
  }

}
...

On top of all this logic chart.js provides a specific functionality, where it understands the incremental values that can be computed automatically. This is really beneficial to automatically render x-axis/y-axis ticks. At Reporting, we have taken advantage of this and send the data from backend-api in a format that supports a bucket of range, as well as the type. We call this as timeseries charts. They can span through any range of dates/time with a start and end point. A format should be provided based on spec. Example as follows;

// continue in the previous code snippet
if (/*report data suggests that it is a timeseries chart*/) {
      // setup the values based on bucket and other things
      _.set(chartOptions, 'scales.x', {
        ...chartOptions.scales.x,
        type: 'time',
        min: report.data.startLabel,
        max: report.data.endLabel,
        time: {
          unit: report.data.bucket,
          displayFormats: {
            [report.data.bucket]: report.data.labelFormat
          }
        }
      });

Once all this is setup, this custom functions, makes a complete dish of chart-type, chart-data & chart-options that can be fed to wrapper/native component to render.

This document is a comprehensive walkthrough of code design. I’ve aimed at solving the need of data-transformation such that different teams can modulate their data to achieve the best possible viewing results.

References

https://www.chartjs.org/
https://chartjs-plugin-datalabels.netlify.app/ We have used this to modify the view and interactions of data labels
Helper libraries like Lodash, moment.js, classnames.
Alas, https://www.stackoverflow.com/

Today's javascript interview questions

Divyesh Parmar — Tue, 01 Oct 2019 10:56:55 +0000

let a = [1, 2, 3, 4, 5];
a = a.map(item => item<3);

let a = [1, 2, 3, 4, 5];
a = a.map(item => item<3);

let a = [1, 2, 3, 4, 5];
a = a.some(item => item< 3);

which he told will return the mixture of .map() and .filter() 's result :D

then question on writing a reducer function to return the sum of an array which I thnk I have wrote wrong

const sum = arr.reduce((total, value) => total + value, 0);

Redux

are Providers a Higher Order Components? there was no mention of Consumer and he took the mention of consumer with regards to how react-redux connect function works instead of how it works in Context API
what is actions in Redux
why is Reducer needed when we can directly mutate the state?

React

How much do you rate yourself in React :D :D :D :D
What is portal in React?
What are fragments in React?

HTML

How much do you rate yourself in HTML :D :D :D :D
What does HTML provide to do drag and drop? to which I only said I have used 3rd party libraries and never used the native solution provided by HTML.
Further question was how such libraries work behind the scenes and what code does it bring in to use HTML which I completely didn't know about.

Today's javascript interview questions. Honestly after giving many interviews I felt like this was a kiddy and useless interviews since I personally (don't know about generally) direct Google about such array methods to use. I pity and find it funny for myself that I couldn't answer upto the expectations, but because of the experience

I must say when someone asks you how much do you rate your self in this sexy tech library/feature
you know its going to be a pretty bad interview.^{Doesn't apply to interviews in other countries I guess}

Today's JavaScript React Developer Questions

Divyesh Parmar — Mon, 19 Aug 2019 14:51:28 +0000

Again the interview spree is going on and this is today's interview questions:

1) prevent page from refreshing (event prevent default)
2) types of inputs in CSS
3) Destructure/spread operator in JS
4) changing value while destructuring
5) execution context
6) sum(4,5) sum(4,5,6,7,8) number of arguments pass may change using recursion or closures
7) undefined VS null
8) position property in CSS
9) display line, display block, block-inline
10) sort number of 1's and 0's
11) Find pairs (i,j) which sum upto given value if array is sorted.
12) var , let and const
13) const a = [1,2,3,4] can we mutate this array?
14) IIFE
15) convert IIFE to module
16) create a module using ES6 and ES5 syntax
17) Create calendar using inbuilt html dropdown
18) Write regular expression for PAN number
19) uncontrolled vs controlled components
20) JS problem on execution context
21) map/reduce/filter method
22) Invert object using functional programming keys should become values and values should become keys
23) Immutability
24) recursion problem to solve sum(a,b) function
25) Binary search and sorting problem

The next rounded included the following ones:
How to reduce web page loading time?
How to check data type in JS?
How to create a copy of object? ->> I said object.assign() he said any other method I said spread operator ...
How to change particular key of an object?
There is a calculator with multiple buttons and it creates alert box how will you handle this onclick events? My answer: Inside of adding on click on each button we will add cllick event on parent element so this will be event delegation. Event will bubble up. He said yes got it
What are primitive types in JS ?

Basically I made this list for today. Hope It helps

A fun conversation to understand (arrowFunction).prototype

Divyesh Parmar — Sun, 11 Aug 2019 06:21:36 +0000

I'm writing this post to document a conversation I had with /u/senocular on reddit. I was asking about if it is disadvantageous to that arrow functions lexically bind "this"?

Later on I got intrigued to know that arrow Function's doesn't have their constructor like how normal functions have in their prototype property.

It sounds like you're trying to ask about one thing, but really could be two...? First:

...if the arrow functions have their own constructor function...

This is a good question. And the answer is no. While arrow functions are functions (obviously), and inherit from the Function type, they do not have their own constructor - at least not one specific to arrow functions. Of the available function constructors, you have:

Function
GeneratorFunction
AsyncFunction
AsyncGeneratorFunction

Function is actually the only one thats globally accessible, the others are only accessible through instances of functions of their respective function types as created with the function keyword.

console.log(Function) // Function () {}
console.log(GeneratorFunction) // Error, not defined
console.log(AsyncFunction) // Error, not defined
console.log(AsyncGeneratorFunction) // Error, not defined

but

console.log(function * () {}).constructor) // GeneratorFunction () {}
console.log(async function () {}).constructor) // AsyncFunction () {}
console.log(async function * () {}).constructor) // AsyncGeneratorFunction () {}

Arrow functions, on the other hand, are just considered normal functions despite their unique behavior and syntax.

console.log((() => {}).constructor) // Function () {}

Variations of arrow functions also correlate to their respective function type

console.log((async () => {}).constructor) // AsyncFunction () {}

Note: arrow functions aren't supported for generators though there is a proposal for this in stage 1.

But if you use a function constructor to create a function, it will have normal function behavior, not arrow function behavior.

(() => this).call('value') // global (undefined in strict)
new Function('return this').call('value') // 'value'

You can consider this a limitation of the Function constructor. It simply doesn't support the creation of arrow functions much in the same way it doesn't support being able to create closures.

{
  let outer = 'value'
  new Function('return outer')() // Error, outer not defined
}

Now, all this could be unrelated to

...like how normal fucntions have in their prototypes?

This depends on what you mean by prototypes. Do you mean the prototype of the functions or do you mean the prototype property of the functions?

As objects, functions have prototypes which point to their respective types - what they inherit from, or more specifically the prototype property of their types. For example a normal function instance inherits from Function.prototype. This is where it gets methods like call and apply. We've also seen from above that other function variations have their own function types like GeneratorFunction and AsyncFunction which also have their own prototype properties those functions inherit from.

console.log(Object.getPrototypeOf(function * () {}) === GeneratorFunction.prototype) // true

In this sense, arrow functions also have prototypes which refer to their respective function types.

console.log(Object.getPrototypeOf(() => {}) === Function.prototype) // true

As you can see, this is still Function and not anything unique like ArrowFunction because arrow functions don't have their own specific constructor type.

On the other hand, arrow functions themselves do not have their own prototype property, meaning they can't be used as constructors or represent a type themselves.

const arrowFn = () => {}
console.log(arrowFn.prototype) // undefined
new arrowFn() // Error, not a constructor

In fact most function variations coming out of ES6+ don't have their own prototype properties and cannot be constructors.

const obj = { method () {} }
console.log(obj.method.prototype) // undefined
new obj.method() // Error, not a constructor

const asyncFn = async function () {}
console.log(asyncFn.prototype) // undefined
new asyncFn() // Error, not a constructor

Exceptions are class functions, as they are explicitly meant to represent constructors (but as with object methods above, class methods cannot be constructors), and generator functions which are a result of a bug in the spec that allowed them to be constructors in ES6. This bug was fixed in ES7 and while generators can no longer be constructors, their prototype property was still left behind

const genFn = function * () {}
console.log(genFn.prototype) // Object {}
new genFn() // Error, not a constructor

When it comes down to it, arrow functions are just variations of normal functions. They have the same constructors, but those constructors can't create them, and arrow functions themselves also can't be constructors.

Finally found a way to search on GitHub for projects

Divyesh Parmar — Sat, 10 Aug 2019 18:36:17 +0000

Since my previous post I have been looking for projects to practice and learn standard practices. Most projects that interests me are about adding videos to your react/react-native app. I would also like to learn and explore how a data manipulation happens when the size is exponentially bigger and how to make chunks which can later be rendered.

The 2 suggestions for such thing I found is:

For searching, I have tried out some approaches and found out few ways in general on how can one search for such projects.

Github has an article on this https://help.github.com/en/articles/finding-open-source-projects-on-github
Kent C Dodds have also made a wonderful article : https://kentcdodds.com/blog/what-open-source-project-should-i-contribute-to
Apart from this, going through your discovery feed may be a good option: https://github.com/discover

Alternatively, to find smaller projects you could try a custom search (this example I filtered for the react dependancy in package.json, with more than 10 stars, and written in js): https://github.com/search?l=&o=desc&q=%22react%22+filename%3Apackage.json+stars%3A%3E10+language%3AJavaScript&s=updated&type=Repositories

Another custom search for repositories containing issues tagged "good-first-issue": https://github.com/search?q=react+good-first-issues%3A%3E2

More on this: https://help.github.com/en/articles/helping-new-contributors-find-your-project-with-labels

As you guys suggested, I guess diving deep and just start doing it without thinking that it would be impossible would be the key here. Please do suggest more ways to do advanced searches on GitHub and other means like articles, blogs,etc.

Suggest some GitHub/GitLab react.js-redux projects

Divyesh Parmar — Fri, 09 Aug 2019 16:38:28 +0000

Hi, everyone I am looking to contribute or work on some of your projects that are available online GitHub, GitLab. I want to practice more on UI creation and implementing complex functionalities.

It would be more awesome if I can see something with react-native because I have had very less experience with the same. Today I mostly learn about how to search on github and look up to topics and discover sections like this : https://github.com/topics/react

I have also been recommended following projects:

but I'm not quite sure that I will be able to do something such huge and complicated projects so looking forward to some medium sized or intermediate level of Projects.

Why doesn't dev.to's app give notifications?

Divyesh Parmar — Mon, 05 Aug 2019 16:36:12 +0000

I have been using this app since few months and I would like to know why it never pops out notifications of new likes, comments, etc. Is it because of the PWA?

Share your experience to learn Test Driven Development in React.js

Divyesh Parmar — Sat, 03 Aug 2019 14:14:05 +0000

I have been wishing to learn how testing happens in any small or big complex level React.js projects. I have heard about JEST and other stuff but I want to go through it in an organised manner. So please share your articles, tutorials, and key experiences that would help. Thank you!

Today's JavaScript React Dev interview Question

Divyesh Parmar — Fri, 02 Aug 2019 13:22:02 +0000

I had these questions in the interview just now

const spaceShip = {
  name: 'Chandrayan',
  get1: () => {
    console.log(this.name);
  },
  get2: function (){
    console.log(this.name);
  }
}

spaceShip.get1()
spaceShip.get2()

now I know that spaceShip.get1() won't print out anything but if I want it to work the exact same way how the get2() works how do I bind it?

I was trying to bind this like get1.bind(spaceShip.this) or get1.bind(spaceShip) first and then execute but I'm not sure what should happen.

then in 2nd question

const person = this.state.person;

const person = {...this.state.person};

what if we change the value person.name I know in the second case the value will be changes because that person is a whole new object

but in the first case will it change the value in this.state.person too?

I was asked about writing polling function which I didn't know but I still attempted saying

function myPoll(fn, timeInterval, endTime){

var checkCondition = function(resolve, reject) {
        var result = fn();
        if(result) {
            resolve(result);
        }
        else if (// for the time checking) {
            setTimeout(checkCondition, interval, resolve, reject);
        }
        else {
            reject(error);
        }
    };
}

but then he dropped it.

4th question was to write polyfill for Promise.all

Promise.all([pr1, pr2, pr3]).then().catch();
var resolvedPromises = [];
[pr1, pr2, pr3].map((item, resolve, reject) => {
    var result = item();
    if(result){
       resolvedPromises.push(resolve(result));
    }
    else {
        return reject(result);
    }
})

so I tried explaining that I will store the promise in result and then push it into the array and at the end of all iteration the resolved values of all promises will be stored in that array.

But then again he asked that what if the promises doesn't get resolved or rejected than how should you tackle it so I modified the code this way

var resolvedPromises = [];
[pr1, pr2, pr3].map((item, resolve, reject) => {
   item().then((result) => {
        if(result){
            resolvedPromises.push(resolve(result));
        }
    });  //pr1;
    else {
        return reject(result);
    }
})

then he was also confused on what to ask but that's how the interview ended, without even allowing me to ask them anything. I guess I shouldn't hope for a win today.

How to prepare for Front End Jobs 2019! My Collection of resources

Divyesh Parmar — Sat, 27 Jul 2019 20:07:30 +0000

So after giving almost half-a-century of interviews in past eleven months, I have made this stable list of resources to go through. Currently, I got fired so looking for a new opportunity.

To prepare for front end developer role you should prepare well on following topics :

Core JS - OOPS, ES6, Polyfills, Event Loop, Closures, Scope, Execution Context^(always lovely content from him)
CSS - Flexbox, CSS Grid
React - Core React Internals (VDOM), Context API, Hooks, Redux, Redux Saga
Any bundler e.g. Webpack
Caching , HTTP2, Security in Web Apps
Debounce, throttle, Promise, Async Await

I used to read most of the stuff from

jsvault.com,
javascript.info

Webpack docs are the best to start off with.

Webpack - Module bundler for Javascript Applications

I guess one should deep dive into webpack config. There are so many optimizations that one can do just by tweaking a bit. Vendor libs caching, code splitting are two such things.

A fun and important resource

http://www.thatjsdude.com/interview/

Keep modularity in mind while developing

https://github.com/MaximAbramchuck/awesome-interview-questions#javascript

for javascript interview questions github page :

https://github.com/sudheerj/javascript-interview-questions

for react.js questions github page :

https://github.com/sudheerj/reactjs-interview-questions

This is more comprehensive for Front-End Developer Interview Questions :

https://github.com/h5bp/Front-end-Developer-Interview-Questions

Just like quickies in real life this one is exciting : https://30secondsofinterviews.org/

While giving all these interviews one thing surpriced me is that when I was relaxed and chilled I was able to perform better with less doubt on myself.

Sometimes I just did more data structures and algorithm challanages or some Polyfill question from one day before the interview and if that stuff would make me confuse than during the interview I was lacking self-confidence while giving the answer. Even though I knew I have faced that asked question in some previous interview. So on a personal not always stay healthy, fresh, clear and light minded before you go for it.

Please do share any exciting more fun resources that helps one learn easily.

Communities or servers for remote jobs/gigs

Divyesh Parmar — Mon, 14 Jan 2019 19:02:12 +0000

I have my 3 months contract ending by this month and I'm really worried to get a new job because I have had 60+ odd interviews before this from January '17 to October '17 which made me really quit the IT jobs thing and maybe don't know what to do with my life. Finally I landed at this place in October with React+redux dev job and currently there I'm working on Node+Express+Next+React+Redux Fullstack. But it is ending by this month and I'm afraid to go on that interview spree again.

I read this article/post https://dev.to/colinmtech/how-i-find-six-figure-remote-software-developer-jobs-23jd but it seem to mentioning the main slack communities or discord channels part.

Can someone please share the list of Slack communities or discord servers to help me and others get remote jobs specifically with Javascript stack and/or remote gigs. that would be really beneficial.

The first one I can share is Reactiflux community which is officially mentioned in React Docs as well. So yeah keep sharing to help out. Also somewhere down the line I feel that for Indian developers the bar is way too high for interviews then other western countries and to get a job. May be simply because of sheer amount of volume here.

How to stop all those info: logs in terminal

Divyesh Parmar — Fri, 04 Jan 2019 10:41:56 +0000

Our project at work is using Node.js/Express.js Next.js with React-Redux app over it for admin dashboard side of the product.

Now this codebase is huge and it has confused me a lot over how Express router already defines a route and then redux action creator makes an api call to that and fetch, put, post, delete data.
so my query to make this post is about how do I stop nextJS to keep giving me info upon each page build. It keep logging a message as follows

info: GET /json 302 0ms statusCode=302, url=/json, host=[::1]:4002, method=GET, httpVersion=1.1, originalUrl=/json, , responseTime=0
  morgan log request +6ms
GET /json 302 1.093 ms - 46

for each second or millisecond I guess. I want to remove all that because I am not able to figure the console logs that I have put while hitting each API endpoint, this makes my terminal really clutter and harder to find the console logs as needed.