Bar Chart I

Prompt

Are you passionate about data visualization? Your challenge is to craft a Bar Chart using React.

The question's aim is to develop a bar chart component in React. This component will efficiently display a vertical bar chart derived from a structured array of data. Each element in this array will transform into a distinct bar in the chart, with its height proportional to the ticket count associated with each department.

What makes this bar chart stand out is its use of color. Each bar will be uniquely colored based on a predefined color code.

You can use the api.js file in the server folder to retrieve the mock data for rendering your bar chart. This data also includes colour information.

Example

Playground (Prompt 1)

Hint 1

You can use the getData function to fetch the chart data. This function returns a promise which resolves with the chartData. Remember to handle this promise correctly, typically using .then() method or async-await syntax.

Hint 2

To determine the maximum height among all the bars in your chart, consider using the Math.max function combined with the .map method. For example, you can calculate the maximum height like this

const maxHeight = Math.max(
  ...items.map((item) => item.ticketCount)
);

Hint 3

The reason for calculating the maximum bar height (maxHeight) is to use it as a reference for scaling the height of all other bars. By knowing the maximum height, you can proportionally calculate the height of each bar relative to this maximum, ensuring that all bar heights are accurately represented in your chart.

Solution (Prompt 1)

Common Pitfalls

Fetching the Data: The getData function is returning a new Promise which gets resolved after 100 milliseconds with the data array. If the engineer isn't familiar with how Promises work or how they are used to manage asynchronous operations in JavaScript, this might be confusing.
Calculating Bar Height: You need to calculate the height relative to maxHeight. For example, if the height is 80 and the maxHeight is 200, the getHeight function takes two parameters: height and maxHeight. It calculates (80 / 200) * 100, which equals 40%. Therefore, the function returns the string "40%".
Styling Bar Chart: If you are giving the height of a bar in percentages, which is most likely to be the case, then the parent container of a bar needs to have some fixed height for the bar to appear.

My Attempt (Prompt 1)

Interviewer Criteria

HTML/CSS

Does my layout accurately match the provided image?
Did you style the UI quickly (10 minutes or less)?
Did I consider using the name node from chart data for improving accessbility?
Are my CSS class names both self-explanatory and meaningful?

JavaScript

Was I successful in demonstrating my ability to fetch data from a mock API?
Was I able to sort the chart items in both ascending and descending order cleanly?
Do I know how the JavaScript sort method works?
Have I leveraged ES6 features efficiently, such as let, const, arrow functions, and destructuring?
Are my variable and function names descriptive, maintaining a consistent naming convention?
How swiftly was I able to develop the logic for identifying the bar with maximum height without significant obstacles or delays?
Was I able to cleanly calculate the height of bars relative to the one with maximum height?

React

Have I used the key prop appropriately on all iterated elements, ensuring efficient and correct re-rendering?
Have I considered handling the loading and error state when fetching the data?
Did I lift the state appropriately, such as lifting the mode state to the App to calculate the sorted chart items?
Did I derive the sorted chart items from chart items, instead of creating another state for storing sorted chart items?
Am I comfortable using React hooks?
Am I comfortable and proficient in using function components?

Component Architecture

Did I create separate components for <BarChart /> , <Bar /> , and <Controls /> ?
Are the names of my classes, functions, handlers, and components clear and understandable?

Performance

Am I able to discuss how to accommodate many data points without compromising the visual integrity and performance of the chart?

Time Checkpoints

10:00 AM
Interview starts 👥
10:03 AM
Prompt given by the interviewer
10:05 AM
Candidate reads the prompt, asks clarifying questions, and starts coding
10:10 AM
Data fetched from mock server and stored in state
10:20 AM
Chart rendered
10:30 AM
Styling completed
10:35 AM
Sorting logic implemented
10:50 AM
Support for data of any shape added
10:55 AM
Discussion with interviewer
11:00 AM
Interview ends ✅