feat: Responsive UI for Big Number with Time Comparison

[kgabryje]

SUMMARY

Currently the Big Number with Time Comparison is rendered only horizontally and is not responsive in small containers. This PR refactors a lot of styles of the chart (table display -> flex) and implements a ResizeObserver which controls the flex direction - row for wide containers and column for narrow containers.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2024-03-02.at.17.31.55.mov

TESTING INSTRUCTIONS

1. Create a Big Number with Time Comparison chart
2. Save and add to a dashboard
3. Play with chart container's width and height - in large container the numbers should be displayed horizontally, and in small - vertically

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 28 lines in your changes missing coverage. Please review.

Project coverage is 67.35%. Comparing base (89d49e5) to head (3c4ef6d).
Report is 1466 commits behind head on master.

Files with missing lines	Patch %	Lines
.../BigNumberPeriodOverPeriod/useOverflowDetection.ts	0.00%	20 Missing ⚠️
...src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx	0.00%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #27375      +/-   ##
==========================================
- Coverage   67.37%   67.35%   -0.02%     
==========================================
  Files        1908     1909       +1     
  Lines       74550    74571      +21     
  Branches     8317     8321       +4     
==========================================
  Hits        50225    50225              
- Misses      22272    22294      +22     
+ Partials     2053     2052       -1     

Flag	Coverage Δ
javascript	57.22% <0.00%> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sadpandajoe]

🏷️ preset:2024.8