<input type="checkbox" id="" disabled=""

Upgrade apexcharts.js about flashlight HOT 1 CLOSED

Almouro commented on May 26, 2024 1

Upgrade apexcharts.js

from flashlight.

Comments (1)

sweep-ai commented on May 26, 2024

✨ Track Sweep's progress on our progress dashboard!

⚡ Sweep Basic Tier: I'm using GPT-4. You have 4 GPT-4 tickets left for the month and 3 for the day. (tracking ID: b56c8e7056)

For more GPT-4 tickets, visit our payment portal. For a one week free trial, try Sweep Pro (unlimited GPT-4 tickets).

Tip

I can email you when I complete this pull request if you set up your email here!

Install Sweep Configs: Pull Request

Actions (click)

↻ Restart Sweep

GitHub Actions✓

Here are the GitHub Actions logs prior to making any changes:

Sandbox logs for b1fd23f

Checking package.json for syntax errors... ✅ package.json has no syntax errors! 1/1 ✓
Checking package.json for syntax errors...
✅ package.json has no syntax errors!

Sandbox passed on the latest main, so sandbox checks will be enabled for this issue.

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I think are relevant in decreasing order of relevance (click to expand). If some file is missing from here, you can mention the path in the ticket description.

flashlight/website/docs/guides/react-native/js-fps.md

Lines 30 to 35 in b1fd23f

    
           ![massive JS thread issue](./assets/js-thread-flashlight.png) 
        
           :::tip Your goal 
        
           Your goal should be to ensure that the JS thread doesn't appear in the **Processes with high CPU usage** section.   
        
           In fact, your goal should be that nothing appears there, in addition to having your average FPS close to 60.

flashlight/CONTRIBUTING.md

Lines 1 to 15 in b1fd23f

    
           # Contributing 
        
           ## Commit naming 
        
           We use [conventional changelogs](https://www.conventionalcommits.org/en/v1.0.0-beta.4/#summary) for commits and PR names 
        
           It should be like: 
        
           ``` 
        
           <type>[optional scope]: <description> 
        
           [optional body] 
        
           [optional footer] 
        
           ```

flashlight/CONTRIBUTING.md

Lines 15 to 30 in b1fd23f

    
           ``` 
        
           - [ ] with type = feat/fix/refactor/chore/docs/test/… 
        
           - [ ] description should be lowercase and start with a verb 
        
           Here are some examples https://www.conventionalcommits.org/en/v1.0.0-beta.4/#examples 
        
           ## Running `flashlight` commands locally 
        
           Start by building the whole project: 
        
           At the root of the repo: 
        
           ``` 
        
           yarn 
        
           yarn watch

flashlight/packages/commands/measure/src/__tests__/__snapshots__/measure.test.tsx.snap

Lines 15 to 30 in b1fd23f

    
           Frame Per Second. Your app should display 60 Frames Per Second to give an impression of fluidity. This number should be close to 60, otherwise it will seem laggy.  
        
           See 
        
           this video 
        
           for more details 
        
           Average CPU usage 
        
           83 % 
        
           An app might run at 60FPS but might be using too much processing power, so it's important to check CPU usage. 
        
            Depending on the device, this value can go up to  
        
           100% x number of cores 
        
           . For instance, a Samsung A10s has 4 cores, so the max value would be 400%. 
        
           High CPU Usage 
        
           0.5 s 
        
           Impacted threads: 
        
           -

flashlight/packages/commands/measure/src/__tests__/__snapshots__/measure.test.tsx.snap

Lines 3180 to 3195 in b1fd23f

    
           - 
        
           Time taken to run the test. 
        
           Can be helpful to measure Time To Interactive of your app, if the test is checking app start for instance. 
        
           Average FPS 
        
           - 
        
           Frame Per Second. Your app should display 60 Frames Per Second to give an impression of fluidity. This number should be close to 60, otherwise it will seem laggy.  
        
           See 
        
           this video 
        
           for more details 
        
           Average CPU usage 
        
           - 
        
           An app might run at 60FPS but might be using too much processing power, so it's important to check CPU usage. 
        
            Depending on the device, this value can go up to  
        
           100% x number of cores

flashlight/jest-setup.ts

Lines 1 to 16 in b1fd23f

    
           import { TextEncoder, TextDecoder } from "util"; 
        
           process.env.AWS_ACCESS_KEY_ID = "MOCK_AWS_ACCESS_KEY_ID"; 
        
           process.env.AWS_SECRET_ACCESS_KEY = "MOCK_AWS_SECRET_ACCESS_KEY"; 
        
           // See https://github.com/apexcharts/react-apexcharts/issues/52 
        
           jest.mock("react-apexcharts", () => "apex-charts"); 
        
           jest.mock("apexcharts", () => ({ exec: jest.fn() })); 
        
           Math.random = jest.fn(() => 0.5); 
        
           // Needed to be able to test socket.io v>=4.7.0 in a jsdom environment 
        
           // We use jsdom since we snapshot the webapp in the measure command while running the socket 
        
           global.TextEncoder = TextEncoder; 
        
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
        
           // @ts-ignore

flashlight/packages/commands/measure/src/__tests__/__snapshots__/measure.test.tsx.snap

Lines 480 to 495 in b1fd23f

    
                                 /> 
        
                               </svg> 
        
                             </div> 
        
                             <div 
        
                               class="cursor-default overflow-hidden transition-[height] duration-300" 
        
                               style="height: 0px;" 
        
                             > 
        
                               <div 
        
                                 class="text-neutral-400 text-sm" 
        
                               > 
        
                                 Frame Per Second. Your app should display 60 Frames Per Second to give an impression of fluidity. This number should be close to 60, otherwise it will seem laggy.  
        
                                 <br /> 
        
                                 See  
        
                                 <a 
        
                                   href="https://www.youtube.com/watch?v=CaMTIgxCSqU" 
        
                                   rel="noreferrer"

Step 2: ⌨️ Coding

Modify package.json ! No changes made Edit

Modify package.json with contents:
• Locate the `dependencies` or `devDependencies` section in the `package.json` file at the root of the repository.
• Within this section, find the entry for `apexcharts`. If `apexcharts` is not directly listed, it might be a dependency of another package, such as `react-apexcharts`. In this case, ensure `react-apexcharts` is the package being updated if it wraps `apexcharts`.
• Change the version number of `apexcharts` to `^3.45.2`. If the version is specified as a direct dependency, it would look like `"apexcharts": "^3.45.2"`.
• This modification ensures that the project requests the correct version of `apexcharts.js` when installing or updating dependencies.

Running GitHub Actions for package.json ✗ Edit

Check package.json with contents:

Modify yarn.lock ▶ Edit

Modify yarn.lock with contents:
• After modifying the `package.json` file, run `yarn upgrade apexcharts --latest` in the terminal at the root of the repository. This command updates `apexcharts` to the latest version specified in `package.json` and updates the `yarn.lock` file accordingly.
• This step is necessary to ensure that the exact version of the package and its dependencies are locked, preventing discrepancies in environments where the project is deployed or developed.
• Note: The `start_line` and `end_line` are marked as "unknown" because the `yarn.lock` file is auto-generated and its specific contents and line numbers can vary based on the entire dependency tree.

Running GitHub Actions for yarn.lock ▶ Edit

Check yarn.lock with contents:

Step 3: 🔁 Code Review

Working on it...

🎉 Latest improvements to Sweep:

New dashboard launched for real-time tracking of Sweep issues, covering all stages from search to coding.
Integration of OpenAI's latest Assistant API for more efficient and reliable code planning and editing, improving speed by 3x.
Use the GitHub issues extension for creating Sweep issues directly from your editor.

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.^{Something wrong? Let us know.}

This is an automated message generated by Sweep AI.

from flashlight.

Upgrade apexcharts.js about flashlight HOT 1 CLOSED

Comments (1)

✨ Track Sweep's progress on our progress dashboard!

Actions (click)

GitHub Actions✓

Step 1: 🔎 Searching

Step 2: ⌨️ Coding

Step 3: 🔁 Code Review

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent


	![massive JS thread issue](./assets/js-thread-flashlight.png)

	:::tip Your goal
	Your goal should be to ensure that the JS thread doesn't appear in the Processes with high CPU usage section.
	In fact, your goal should be that nothing appears there, in addition to having your average FPS close to 60.

	# Contributing

	## Commit naming

	We use [conventional changelogs](https://www.conventionalcommits.org/en/v1.0.0-beta.4/#summary) for commits and PR names

	It should be like:

	```
	<type>[optional scope]: <description>

	[optional body]

	[optional footer]
	```

	```

	- [ ] with type = feat/fix/refactor/chore/docs/test/…
	- [ ] description should be lowercase and start with a verb

	Here are some examples https://www.conventionalcommits.org/en/v1.0.0-beta.4/#examples

	## Running `flashlight` commands locally

	Start by building the whole project:

	At the root of the repo:

	```
	yarn
	yarn watch

	Frame Per Second. Your app should display 60 Frames Per Second to give an impression of fluidity. This number should be close to 60, otherwise it will seem laggy.
	See

	this video

	for more details
	Average CPU usage
	83 %
	An app might run at 60FPS but might be using too much processing power, so it's important to check CPU usage.
	Depending on the device, this value can go up to
	100% x number of cores
	. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
	High CPU Usage
	0.5 s
	Impacted threads:
	-

	-
	Time taken to run the test.
	Can be helpful to measure Time To Interactive of your app, if the test is checking app start for instance.
	Average FPS
	-
	Frame Per Second. Your app should display 60 Frames Per Second to give an impression of fluidity. This number should be close to 60, otherwise it will seem laggy.
	See

	this video

	for more details
	Average CPU usage
	-
	An app might run at 60FPS but might be using too much processing power, so it's important to check CPU usage.
	Depending on the device, this value can go up to
	100% x number of cores

	import { TextEncoder, TextDecoder } from "util";

	process.env.AWS_ACCESS_KEY_ID = "MOCK_AWS_ACCESS_KEY_ID";
	process.env.AWS_SECRET_ACCESS_KEY = "MOCK_AWS_SECRET_ACCESS_KEY";

	// See https://github.com/apexcharts/react-apexcharts/issues/52
	jest.mock("react-apexcharts", () => "apex-charts");
	jest.mock("apexcharts", () => ({ exec: jest.fn() }));

	Math.random = jest.fn(() => 0.5);

	// Needed to be able to test socket.io v>=4.7.0 in a jsdom environment
	// We use jsdom since we snapshot the webapp in the measure command while running the socket
	global.TextEncoder = TextEncoder;
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore

	/>
	</svg>
	</div>
	<div
	class="cursor-default overflow-hidden transition-[height] duration-300"
	style="height: 0px;"
	>
	<div
	class="text-neutral-400 text-sm"
	>
	Frame Per Second. Your app should display 60 Frames Per Second to give an impression of fluidity. This number should be close to 60, otherwise it will seem laggy.
	<br />
	See
	<a
	href="https://www.youtube.com/watch?v=CaMTIgxCSqU"
	rel="noreferrer"