How to use d3-flame-graph - 5 common examples

if (!moduleColors[moduleName]) {
      moduleColors[moduleName] = getFakeRandomColor()
    }
    return moduleColors[moduleName]
  }

  const totalruntime = flameGraph.reduce((totalTime, spike) => totalTime + spike.value, 0)

  d3.select(innerFlame)
    .datum({
      name: '--task--',
      value: totalruntime,
      children: flameGraph,
    })
    .call(
      flamegraph()
        .width(window.innerWidth * 0.9)
        .cellHeight(18)
        .transitionDuration(750)
        .transitionEase(d3.easeCubic)
        .color(node => getModuleColor(node.data.moduleName)),
    )

  lastInnerFlame = innerFlame
}

renderChart() {
    const wrapper = this.wrapperRef.current;
    if (!wrapper) {
      return;
    }
    const flameGraph = flamegraph()
      .width(1600)
      .cellHeight(18)
      .transitionDuration(250)
      .minFrameSize(0.1)
      .inverted(true)
      .transitionEase(easeCubic)
      .sort(false)
      .onClick(this.onClickHandler.bind(this))
      .differential(false)
      .elided(false)
      .selfValue(false)
      .setColorMapper(this.colorMapper.bind(this))
      .label(this.labelMapper.bind(this));
    const chart = document.createElement("div");
    select(chart)
      .datum(this.props.flameGraphNode)

public paint() {
    if (this.isReady) {
      this.clearExistingGraph();

      this.width = this.container.nativeElement.clientWidth;

      const t = tip()
        .direction('s')
        .offset([8, 0])
        .attr('class', 'd3-flame-graph-tip')
        .html(d => `${d.data.name}: ${round2(d.data.value)}ms`);

      const fgraph = flamegraph()
        .width(this.width)
        .tooltip(t);

      d3.select(this.container.nativeElement)
        .datum(this.rootNode)
        .call(fgraph);
    }
  }

drawFlamegraph() {
        const { data } = this.state
        const { compare } = this.props
        const width = document.getElementById('flamegraph').offsetWidth

        const cellHeight = 16
        const chart = flamegraph()
            .width(width)
            .cellHeight(cellHeight)
            .transitionDuration(750)
            .sort(true)
            .title('')
            .differential(compare === 'differential' ? true : false)
            .minFrameSize(5)
            .inverted(this.state.layout === layout.icicle)
            .selfValue(true)

        var details = document.getElementById("details")
        chart.details(details)

        select(`#flamegraph`)
            .datum(data)
            .call(chart)

mounted () {
    const chart = flamegraph()
            .width(1110)
            .cellHeight(18)
            .transitionDuration(750)
            .sort(false)
            .title("");

    this.chartState = chart;
    const params = this.$route.params;
    if (params.flameJsonData !== undefined) {
      select(`#chart`)
            .datum(response.flameJsonData)
            .call(chart);
      this.loading = false;
    } else {
      const url = "/api/flames/" + params.eventType + "/" + params.pid + "/" + params.recording;
      this.$http.get(url)