ADM-975 [frontend]: change the style of charts

[zhou-yinyuan]

Summary

...

Before

Description

Screenshots
If applicable, add screenshots to help explain behavior of your code.

After

Description

Screenshots
If applicable, add screenshots to help explain behavior of your code.

Note

Null

[github-actions]

Hi @zhou-yinyuan! 👋
Thank you for submitting a pull request! We appreciate your contribution and will review your changes as soon as possible.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00%	✅ 100.00%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (d97cb01)	8175	8175	100.00%
Head commit (d411c00)	16360 (+8185)	16360 (+8185)	100.00% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#1532)	5	5	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

---

_{🚀 Don’t miss a bit, follow what’s new on Codacy.}

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[sonarqubecloud]

Quality Gate passed for 'heartbeat-backend'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[sonarqubecloud]

Quality Gate passed for 'au-heartbeat-heartbeat-frontend'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[guzhongren]

window.addEventListener('resize', resize); 给每一个chat 都增加了一个监听

1. chart 在页面上重新渲染，会多增加一个resize 监听, 要放在effect中 remvoe掉
2. 不能因为要写测试，写一个resizeChart 方法暴露出去，可以参考如下

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const resize = () => {
      console.log('Window resized');
    };

    window.addEventListener('resize', resize);

    return () => {
      window.removeEventListener('resize', resize);
    };
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

Test

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should call resize event listener on window resize', () => {
    // Mock console.log to verify the resize event handler was called
    console.log = jest.fn();

    // Render the component
    render(<MyComponent />);

    // Trigger the resize event
    window.dispatchEvent(new Event('resize'));

    // Check if console.log was called
    expect(console.log).toHaveBeenCalledWith('Window resized');
  });
});