pyatyispyatil / flame-chart-js Goto Github PK

The example of README doesn't worked,

import FlameChart from 'flame-chart-js'

throw no default error, so

import { FlameChart } from 'flame-chart-js'

Then flameChart = new FlameChart({...}), and it works, but flameChart.setData is undefined

Functions can be async, which means they have some waiting times for other async calls to finish.
Similar to the waterfall intervals, we should add that to the function nodes in flame chart.
Maybe function nodes can have an intervals entry as an array of arrays
e.g.

intervals: [[1, 2], [4.7]]

where first value in the intervals tuple is a start and second one is stop.

@pyatyispyatil not sure what you think about this, if this is not something you want we can then close this issue.

I am trying to run the code from the readme at https://playcode.io/

First problem is that the playground is unable to find the latest version of the library.

And then the example fails with this error.

TypeError: data is undefined
setData@https://preview-new.playcode.io/ line 18 > injectedScript:1960:7
WaterfallPlugin@https://preview-new.playcode.io/ line 18 > injectedScript:1907:12
FlameChart@https://preview-new.playcode.io/ line 18 > injectedScript:2240:27
@https://preview-new.playcode.io/ line 18 > injectedScript:85:18
dn@https://preview-new.playcode.io/ line 6 > injectedScript:18:5449

I will create this issue so we can have discussion about it here and to link pull request when I open one today or tomorrow

You already said in the issue I created about performance that you do not have specific roadmap and feature list but that you plan to maybe implement the timeframe selector

I created this ticket to have tracking of it.
Not sure how much time you plan to invest in this project and if this will not happen in the near future feel free to close this :D
I really enjoy this project and so far there is no better flame chart out there

I would contribute the feature but I am not the best with canvas API, I mostly messed with svgs and d3.js

Is there any way to set default time range of the chart. for example:
This

Instead of this:

Or better, set a default time range with the start and end of a specific Node?

Great tool. can you please produce a dist file to be able to use it directly from browser with vanilla JavaScript?

it's perfect if timeframe-selector support cpu usage show . Do you have a plan to show cpu usage just many points.

Hi, Would you accept a PR introduced prettier to auto-format the all the code? This would reduce PR review cost? So including all the .js, configs and examples?

Seems like rollup-plugin-uglify has a peer dep of rollup < 2 so npm install fails.
Also that plugin hasn't received an update for a long time.
Maybe we could move from rollup to esbuild?

Hi - Would you accept a PR to convert .js examples to .ts?

Is it not supported?
like this

If not supported? Can you provide a way to modify the source code?

How i can only use TimeLineGrid plugin into my already created Flamechart.

My Point of View

Wow! What a amazing project! Thank you so much to release this project to help us with performance optimization analysis needs. I will briefly explain what I think is the advantage of this project.Recently I am developing a tool to analyze online performance data. I have two options:

• Chrome DevTools: Powerful and comprehensive performance analysis tool, but it is too complicated, it is inconvenient to carry out secondary development and release a separate npm package, and it also requires the use of gn tools that are difficult to use.
• Trace Viewer: Old school performance tool that is also perfectly compatible with the trace format and is very lightweight, but its problem is that the code style is difficult to maintain.

So both options had their problems until I discovered this project, which provides clean code logic and a convenient plugin mechanism. Thanks again! Its an incredible project!

Why It Would Be Better To Have a Roadmap

Although this project is lightweight and easy to expand, it is believed that the arrival of a roadmap will make this project a very popular project! (so many programmers have the need to develop custom performance analysis tools)

Let me mention a few possible roadmaps and why this is needed：

• TypeScript: Bring in TS can make codebase easier to maintain, this codebase has been already complicated,using TS can bring stronger vitality to the project and facilitate more people to participate in the development.
• Compatible with Trace Event Format: Trace Event Format is the most popular profile format using in web developers,especially the flow event is incredible.Compatible with this format can make this project more powerful.

Finally,I have full enthusiasm to participate in the development of this project!

We should add some basic unit tests for data transformation, like nodes clustering etc...
Lots of these functions are testable.
Maybe jest would be an option?

We discussed and decided to introduce prettier + eslint.
We should start with basic rules that are matching the current code style of the project.

can u tell me?
i don't know how can i get selectedData in plugin usage?
it seems like not trigger?

The flame chart is amazing and probably the best out there
but I am currently struggling with performance where I have about 160k function calls to visualize

What I noticed there are extremely many calls to walk function and each takes about .5s
Also chart rerenders(repaints) all the time on click and mouse movies, zooms etc..
Maybe we could improve this somehow?
I could fork and commit a PR for improvements if you could give me an advice on what could be improved, which parts etc...

I can also provide a sample json file with data formatted and ready to be used in chart options

while onclick into flamegraph node into any point its not expanding and its only show border but it should be expand and show its children

Hello, it's me again. I somehow use your chart in a modal ( antd component but i think other modal still fail). And if you close modal and reopen it, the chart can not be rendered and error happen that Canvas Context Element can't render on div which width and heigh are 0.

it would be nice if we can add more styles
i sent a pull request but that was only for my needs
is there something else we can Add

Hi. Thank you for providing an excellent flamecharts library.
Can i ask for a way to modify span properties in flamechart, such as border Color, border radius, background color, .... . For example, I see someone can do gradient color. Below is an example.

Also, can we have a component like this:

which will follow our cursor. and also have hover effect on each span.

Project is now moved to typescript in non strict mode.
We should start adding strict types.
Some data types are already defined in the readme.

When 2 adjacent spans have starts and durations that cause an overlap, the first spans text is not occluded by the second span. See the top highlighted call out in the image above.

NOTE: This is a holder issue for me as I'm going to try and fix it myself.

When handling selected region in a plugin, if region.data === 0, null is returned. However, this.initialData[0] is a valid region and should return data instead of null

I'm am using flame chart as a toggle chart in react, by changing the parent height.
Which end up with an height of 0.
In truncateChildrenLayout() , I end up with an array of placements of static type or with an height of 0, which end up in an infinit loop.