flame-chart-js


!image

$3

npm i flame-chart-js

$3

https://pyatyispyatil.github.io/flame-chart-js

$3

You can find some plans on the wiki

$3

#### Initialization

You can ignore any of the marks, data, or waterfall arguments to initialize only the items you want. The flame chart will automatically adjust and hide unused plugins.

``js
import FlameChart from 'flame-chart-js';

const canvas = document.getElementById('canvas');

canvas.width = 800;
canvas.height = 400;

const flameChart = new FlameChart({
canvas, // mandatory
data: [
{
name: 'foo',
start: 300,
duration: 200,
type: 'task',
children: [
{
name: 'foo',
start: 310,
duration: 50,
type: 'sub-task',
color: '#AA0000',
},
],
},
],
marks: [
{
shortName: 'DCL',
fullName: 'DOMContentLoaded',
timestamp: 500,
},
],
waterfall: {
/ ... /
},
colors: {
task: '#FFFFFF',
'sub-task': '#000000',
},
settings: {
options: {
tooltip: () => {
/.../
}, // see section "Custom Tooltip" below
timeUnits: 'ms',
},
styles: customStyles, // see section "Styles" below
},
});

flameChart.on('select', (node, type) => {
/.../
});
`

#### Public methods

`ts
// set zoom, which start argument is a left bound and end argument is a right bound
type setZoom = (start: number, end: number) => void;

// set only position of the flame-chart
type setFlameChartPosition = ({ x: number, y: number }) => void;

// render all when animationFrame fired
type render = () => void;

// set new data for the flame-chart
type setData = (data: Data) => void;

// set marks for marks plugin
type setMarks = (data: Marks) => void;

// resize canvas
type resize = (width: number, height: number) => void;

// apply new settings, which includes styles or something else
type setSettings = (settings: Object) => void;
`

#### Usage with plugins

`ts
import { FlameChartContainer, TimeGridPlugin, MarksPlugin, FlameChartPlugin } from 'flame-chart-js';

const canvas = document.getElementById('canvas');

canvas.width = 800;
canvas.height = 400;

const flameChart = new FlameChartContainer({
canvas, // mandatory
plugins: [
new TimeGridPlugin({ styles: timeGridPluginStyles }),
new MarksPlugin({ data: marks }),
new FlameChartPlugin({ data: flameChartData1, colors: flameChartColors, name: 'flameChart1' }),
new FlameChartPlugin({ data: flameChartData2, colors: flameChartColors, name: 'flameChart2' }),
],
settings: {
options: {
tooltip: () => {
/.../
}, // see section "Custom Tooltip" below
timeUnits: 'ms',
},
styles: customStyles, // see section "Styles" below
},
});
`

#### Settings

##### Default styles

`json
{
"main": {
"blockHeight": 16,
"blockPaddingLeftRight": 4,
"backgroundColor": "white",
"font": "10px sans-serif",
"fontColor": "black",
"tooltipHeaderFontColor": "black",
"tooltipBodyFontColor": "#688f45",
"tooltipBackgroundColor": "white",
"headerHeight": 14,
"headerColor": "rgba(112, 112, 112, 0.25)",
"headerStrokeColor": "rgba(112, 112, 112, 0.5)",
"headerTitleLeftPadding": 16
},
"timeGrid": {
"color": "rgb(126, 126, 126, 0.5)"
},
"timeGridPlugin": {
"font": "10px sans-serif",
"fontColor": "black"
},
"timeframeSelectorPlugin": {
"font": "9px sans-serif",
"fontColor": "black",
"overlayColor": "rgba(112, 112, 112, 0.5)",
"graphStrokeColor": "rgb(0, 0, 0, 0.2)",
"graphFillColor": "rgb(0, 0, 0, 0.25)",
"bottomLineColor": "rgb(0, 0, 0, 0.25)",
"knobColor": "rgb(131, 131, 131)",
"knobStrokeColor": "white",
"knobSize": 6,
"height": 60,
"backgroundColor": "white"
},
"waterfallPlugin": {
"defaultHeight": 150
},
"togglePlugin": {
"height": 16,
"color": "rgb(202,202,202, 0.25)",
"strokeColor": "rgb(138,138,138, 0.50)",
"dotsColor": "rgb(97,97,97)",
"fontColor": "black",
"font": "10px sans-serif",
"triangleWidth": 10,
"triangleHeight": 7,
"triangleColor": "black",
"leftPadding": 10
}
}
`

You can override whatever style you want. For example:

`json
{
"main": {
"blockHeight": 20
}
}
`

After applying this style, the blocks of the flame chart will be 20 pixels high instead of 16 pixels.

##### Custom Tooltip

You can override or prevent the tooltip render by defining this within the settings objet.

`ts
{
options: {
tooltip: undefined;
}
}
`

For example:

`ts
// prevent tooltip render
chart.setSettings({ options: { tooltip: false } });

// override tooltip render
chart.setSettings({
options: {
tooltip: (data, renderEngine, mouse) => undefined,
},
});
`

#### Data types

`ts
type Mark = {
shortName: string;
fullName: string;
timestamp: number;
color: string;
};

type Marks = Array;

type Node = {
name: string; // node name
start: number; // node start time
duration: number; // node duration
type?: string; // node type (use it for custom colorization)
color?: string; // node color (use it for current node colorization)
children?: Array; // node children (same structure as for node)
};

type Data = Array;

type WaterfallItems = Array<{
name: string;
intervals: string | WaterfallInterval;
timing: {
[string: key]: number;
};
}>;

type WaterfallInterval = {
name: string;
color: string;
type: 'block' | 'line';
start: string; // timing name
end: string; // timing name
};

type WaterfallIntervals = {
[string: intervalName]: WaterfallInterval;
};

type Waterfall = {
items: WaterfallItems;
intervals: WaterfallIntervals;
};
`

#### Updating

`js
flameChart.setData(newData);
flameChart.setMarks(newMarks);
flameChart.setWaterfall(newWaterfall);
`

#### Scaling

`js
window.addEventListener('resize', () => {
flameChart.resize(window.innerWidth, window.innerHeight);
});
`

#### Plugins

##### You can create your own plugin

`ts
import { UIPlugin } from 'flame-chart-js';

class MyPlugin extends UIPlugin {
constructor({ name = 'myOwnPlugin' }) {
super(name);
}

height = 100; // height of the plugin in pixels

// this method will be called on each render
override render() {
// do something
this.renderEngine.addRectToRenderQueue('red', 10, 10, 20);
}
}
`

Local Development

<<<<<<< HEAD
1. Checkout this repository
2. npm i
3. npm start
4. Open browser "http://localhost:10001/"
=======
`bash
npm i && npm start
``
>>>>>>> cpu-plugin