init()

in src/views/dashboard/related/trace/utils/d3-trace-list.ts [88:126]

• 39 lines of code
• 6 McCabe index (conditional complexity)

  init(data: Recordable, row: Recordable[], fixSpansSize: number) {
    d3.select(`.${this.el?.className} .trace-xaxis`).remove();
    d3.select("#trace-action-box").style("display", "none");
    this.row = row;
    this.data = data;
    this.min = d3.min(this.row.map((i) => i.startTime));
    this.max = d3.max(this.row.map((i) => i.endTime - this.min)) || 0;
    this.list = Array.from(new Set(this.row.map((i) => i.serviceCode)));
    this.xScale = d3
      .scaleLinear()
      .range([0, this.width * 0.387])
      .domain([0, this.max]);
    this.xAxis = d3.axisTop(this.xScale).tickFormat((d: any) => {
      if (d === 0) return 0;
      if (d >= 1000) return d / 1000 + "s";
      return d;
    });
    this.svg.attr("height", (this.row.length + fixSpansSize + 1) * this.barHeight);
    this.svg
      .append("g")
      .attr("class", "trace-xaxis")
      .attr("transform", `translate(${this.width * 0.618 - 20},${30})`)
      .call(this.xAxis);
    this.sequentialScale = d3
      .scaleSequential()
      .domain([0, this.list.length + 1])
      .interpolator(d3.interpolateCool);
    this.root = d3.hierarchy(this.data, (d) => d.children);
    this.root.x0 = 0;
    this.root.y0 = 0;
    const t = this;
    d3.select("svg.trace-list").on("click", function (event: MouseEvent) {
      if (event.target === this) {
        d3.select("#trace-action-box").style("display", "none");
        t.selectedNode && t.selectedNode.classed("highlighted", false);
        t.clearParentHighlight();
      }
    });
  }