Skip to content

Instantly share code, notes, and snippets.

@spiermar

spiermar/FlameGraph.jsx

Last active July 11, 2019 16:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save spiermar/bdcf1a0f5e641f52c2e455f875b62a31 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save spiermar/bdcf1a0f5e641f52c2e455f875b62a31 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. spiermar revised this gist Jul 11, 2019. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion FlameGraph.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -83,7 +83,6 @@ class FlameGraph extends Component {

    FlameGraph.propTypes = {
    data: PropTypes.object.isRequired,
    granularity: PropTypes.string.isRequired,
    height: PropTypes.number,
    style: PropTypes.object,
    };
  2. spiermar created this gist Sep 20, 2017.
    91 changes: 91 additions & 0 deletions FlameGraph.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,91 @@
    /**
    *
    * Copyright 2017 Martin Spier <[email protected]>
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    *
    */

    /* eslint no-underscore-dangle: 0 */
    /* eslint no-unused-vars: "off" */

    import React, {Component} from 'react';
    import PropTypes from 'prop-types';
    import {fetchGUID} from '../../utils/IcarusUtils';
    import {select} from 'd3-selection';
    import flameGraph from 'd3-flame-graph';
    import 'd3-flame-graph/src/d3.flameGraph.css';

    class FlameGraph extends Component {
    constructor(props) {
    super(props);

    ['drawFlameGraph'].forEach((k) => {
    this[k] = this[k].bind(this);
    });

    this.state = {
    guid: fetchGUID(),
    chart: null,
    };
    }

    componentDidMount() {
    this.drawFlameGraph(
    this.state.guid,
    this.props.data,
    );
    }

    drawFlameGraph(element, data) {
    const width = this.refs[`FlameGraph_${this.state.guid}`].offsetWidth;
    const cellHeight = 22;
    const chart = flameGraph()
    .width(width)
    .cellHeight(cellHeight)
    .transitionDuration(750)
    .sort(true)
    .title('');

    if (this.props.height) {
    chart.height(this.props.height);
    }

    chart.color((d) => {
    return d.data.color;
    });

    select(`#FlameGraph_${element}`)
    .datum(data)
    .call(chart);
    }

    render() {
    return (
    <div
    ref={`FlameGraph_${this.state.guid}`}
    id={`FlameGraph_${this.state.guid}`}
    style={this.props.style}
    />
    );
    }
    }

    FlameGraph.propTypes = {
    data: PropTypes.object.isRequired,
    granularity: PropTypes.string.isRequired,
    height: PropTypes.number,
    style: PropTypes.object,
    };

    export default FlameGraph;