resize-observer-polyfill | A polyfill for the Resize Observer API | Frontend Plugin library

I am working with D3 charts, with react, I created bar chart and made it responsive. When I resize the browser the bars are taking width accordingly.

Issue

One thing I want to a achieve is dynamic label, like when I resize the page, the length of label is bit big so it is getting one over other

Like

So I want to overcome this, I googled a lot and found One example, there when it is rendered on full screen it looks like

And when I resize the browser to a small screen !it looks like this]3.

For above this is the reference I found

So same I want to achieve but not getting any idea.

What I did

I upgraded my angular project from 8 to 12. After that I migrated to eslint. Then onwards my compilation is not immediately invoked after saving any file. If I save any file after 2min the compilation starts in the terminal.

This is the issue I'm facing. Thanks in advance. Please let me know what is causing it to be slow and time taking. Is it with vscode or Angular config issues.

Package.json

I tried to test the hook, that used the ResizeObserver. Also, I need to check if the element was overflow or wasn't after resizing. So I wrote such a decision:

My Next.js website is using a slider https://github.com/nerdyman/react-compare-slider

It works great, but not on Safari, either Desktop or iPhone. here is my website https://wordpress-website-headless-v2-afjayn5e2.vercel.app/

Close to the bottom of page I am using a comparison slider, this is causing the error.

I googled it, and it looks like many sliders have this issue on Safari, and the solution is to add a polyfill (https://www.npmjs.com/package/resize-observer-polyfill), which I did (I think) but it still doesn't work.. This is my full page code.

To summarize, it works on Firefox and Chrome, but not Safari

I've a small project. I wanted to create a production built for the same. I used this command:

ng build --prod

But it was throwing some build errors. So I asked my tech lead and she told me add this import:

import ResizeObserver from 'resize-observer-polyfill'

The build was successful after this but now the files are not passing linting test. Since the import is not used anywhere else in this code. I'm getting this error:

ERROR: C:/Users/320035648/Angular/pinc-insights-ui/src/app/app.module.ts:29:1 - All imports on this line are unused. Lint errors found in the listed files.

So I added this line before the import:

/* tslint: disable: no-unused-variable */

But still I'm getting same error. Please help me.

For production build i am using ng build --prod command but getting this error

package.json

I have got a strange error after upgrading from Angular 7 to 8. Everytime I start the program with npm start the following error occurs: "ERROR in Cannot read property 'map' of undefined".

There is no more information on the console, so I couldn't find where the cause is. Therefore I have tried to comment out every occurance of .map in my code. Unfortunately the same error occurs. Additionly I updated all dependencies, but nothing has worked.

Has someone else got a similar problem after upgrading from 7 to 8? My package.json looks like this:

I would like to find out the dimensions of a DOM element in a reliable way.

My consideration was to use getBoundingClientRect for this.