constructor()

in src/views/dashboard/related/trace/utils/d3-trace-tree.ts [51:82]


  constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
    this.el = el;
    this.handleSelectSpan = handleSelectSpan;
    this.i = 0;
    this.topSlow = [];
    this.topChild = [];
    this.width = el.clientWidth - 20;
    this.height = el.clientHeight - 30;
    d3.select(`.${this.el?.className} .d3-trace-tree`).remove();
    this.body = d3
      .select(this.el)
      .append("svg")
      .attr("class", "d3-trace-tree")
      .attr("width", this.width > 0 ? this.width : 10)
      .attr("height", this.height > 0 ? this.height : 10);
    this.tip = (d3tip as any)()
      .attr("class", "d3-tip")
      .offset([-8, 0])
      .html(
        (d: Recordable) => `
      <div class="mb-5">${d.data.label}</div>
      ${d.data.dur ? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>" : ""}
      ${
        d.data.endTime - d.data.startTime
          ? '<div class="sm">TotalDuration: ' + (d.data.endTime - d.data.startTime) + "ms</div>"
          : ""
      }
      `,
      );
    this.svg = this.body.append("g").attr("transform", () => `translate(120, 0)`);
    this.svg.call(this.tip);
  }