React Dashboard with background image and data boxes overlays done with ChatGPT assistance

I used ChatGPT's assistance to write a React program that shows a dashboard with background image and data boxes overlays. I am not in a position to share the code but I thought of providing the key points in this post. [Private folder, repo: DashboardwOverlays]

The initial version was for a fixed image with fixed data box positions for all window widths. The next versions were iterations to handle responsive dashboard for specific media query breakpoint ranges. Some key info. related to this work is given below.

Non-responsive component

1. Background image is coupled with data boxes overlays which are React generated.
2. Uses fixed dimensions for the image container
3. Absolutely positions overlays within that fixed container

Responsive component

ChatGPT provided code with scale approach. The issue with the scale approach is that it's a blunt tool: it scales the whole component, including paddings and spacings, which can lead to:

• Unnecessary shrinkage even when there's room
• Overlay box overlap (because text sizes don’t scale well with `transform: scale`)
• Wasted space on wider screens when not needed

So I dropped the scale approach.

I have different positions for data boxes based on breakpoint ranges:

• Mobile: 320px – 480px
• Small Tablets (Portrait): 601px – 768px
• Desktop & Tablets (Landscape): > 768px

Responsive Layouts + Image Switching + Workflow

For showing workflow from one data box step to another:

1. As the layout of the data boxes changes for various width ranges (3 ranges that we cater to), the graphics in the image showing the progression from one step to another (like say an arrow) has to also change.
2. One way to handle it is to have three different images for the 3 width ranges we support and the progression of step to step graphics can be suitably changed in each such image.
3. Further the image width size can also be different for these three ranges.
4. Implemented above approach.

The workflow is very artificial for the data shown in the test app. I did not want to spend time to make the earlier data a more suitable one for a workflow. 

The graphics used to show workflow is very primitive:

• As I did not want to spend much time on it. 
• I wanted to simply be able to show the coding concept working.
• ChatGPT took lot of time to provide a single image though it said it will generate 3 images for the 3 width ranges. So I did not use ChatGPT for the images.