constructor(
		svg: Selection<BaseType, {}, HTMLElement, any>,
		dataLength: number,
		drawLine: (idx: number, off: number) => string) {
		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement
		const viewNode: SVGGElement = svg.select('g').node() as SVGGElement
		const t = new ViewWindowTransform(viewNode.transform.baseVal)
		t.setViewPort(div.clientWidth, div.clientHeight)

		const minY = -5
		const maxY = 83
		const minX = animateCosDown(dataLength / 2, 0, 0)
		const maxX = minX + dataLength / 2
		t.setViewWindow(minX, maxX, minY, maxY)

		const paths = svg.select('g.view').selectAll('path')

		let off = 0
		animateBench((elapsed: number) => {
			// Redraw path
			paths.attr('d', (cityIdx: number) => drawLine(cityIdx, off))
			off += 1
		})
	}

  private info(main: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, cls: string, label: string, value1: any, value2: any) {
    if (value1 == value2) {
      let attr = main.append("span")
        .classed("attr", true);
      attr.append("span")
        .classed("desc", true)
        .text(label + ": ");
      attr.append("span")
        .classed(cls, true)
        .text(value1);
    } else {
      let attr1 = main.append("span")
        .classed("attr dbefore", true);
      attr1.append("span")
        .classed("desc", true)
        .text(label + ": ");
      attr1.append("span")
        .classed(cls, true)
        .text(value1);

      let attr2 = main.append("span")
        .classed("attr dafter", true);
      attr2.append("span")
        .classed("desc", true)
        .text(label + ": ");
      attr2.append("span")
        .classed(cls, true)
        .text(value2);
    }
  }

	constructor(
		svg: Selection<BaseType, {}, HTMLElement, any>,
		legend: Selection<BaseType, {}, HTMLElement, any>,
		startTime: number, timeStep: number,
		data: Array<[number, number]>,
		buildSegmentTreeTupleNy: (index: number, elements: any) => IMinMax,
		buildSegmentTreeTupleSf: (index: number, elements: any) => IMinMax,
		zoomHandler: () => void,
		mouseMoveHandler: () => void) {

		this.legendTime = legend.select('.chart-legend__time')
		this.legendGreen = legend.select('.chart-legend__green_value')
		this.legendBlue = legend.select('.chart-legend__blue_value')

		// здесь второй базис образован не двумя точками, а
		// эквивалентно точкой и вектором
		// хорошо бы сделать например basisAR1PV()
		// типа смарт-конструктор
		// интересно что есть короткая эквивалентная формулировка
		// this.idxToSpace = new AR1(startTime, timeStep)
		// но она возвращает нас к координатному мышлению
		this.idxToTime = betweenTBasesAR1(bUnit, new AR1Basis(startTime, startTime + timeStep))

		// при добавлении точки первый и второй элемент
		// становятся на место нулевого и первого соответственно
		this.idxShift = betweenTBasesAR1(new AR1Basis(1, 2), bUnit)
		this.buildSegmentTreeTupleNy = buildSegmentTreeTupleNy
		this.buildSegmentTreeTupleSf = buildSegmentTreeTupleSf
		this.zoomHandler = zoomHandler
		this.mouseMoveHandler = mouseMoveHandler
		this.bIndexFull = new AR1Basis(0, data.length - 1)
		this.drawChart(svg, data)
	}

  private env_field(element: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, env: EnvironmentItemData) {
    element.append("span")
      .classed("key", true)
      .text(env.name);

    element.append("span")
      .classed("equal", true)
      .text(" = ");

    element.append("span")
      .classed("value", true)
      .text(env.value);

  }

 private env_li(element: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>, cls: string, env: EnvironmentItemData) {
   this.env_field(
     element.append("li")
       .classed(cls, true),
     env
   )
 }

 .on("click", () => {
   this.load(
     this.d3node.select(".script-options").property("value"),
     this.d3node.select(".exec-selection").property("value"),
     this.d3node.select(".summarize").property("checked"),
   )
 })

 private showTooltip(d: TrialNodeData, trial_id: number) {
   this.tooltipDiv.classed("hidden", false);
   this.tooltipDiv.transition()
     .duration(200)
     .style("opacity", 0.9);
   this.tooltipDiv.html(d.tooltip[trial_id])
     .style("left", (d3_event.pageX - 3) + "px")
     .style("top", (d3_event.pageY - 28) + "px");
 }

  public render(data: DataPointT[]) {
    let markWidth = this.bounds.width / data.length;

    let toHex = function(val: [number, number, number]): string {
      let acc = "#";
      val.forEach(v => {
        let hex = Math.floor(v).toString(16);
        if (hex.length === 1) {
          hex = "0" + hex;
        }
        acc = acc + hex;
      });
      return acc;
    };

    this.myG.selectAll('.' + this.className)
      .data(data)
      .enter()
      .append('rect')
      .attr('class', this.className)
      .attr('width', 1.01 * markWidth)
      .attr('height', this.bounds.height)
      .attr('x', (d: DataPointT, i: number) => {
        return this.bounds.xPos + (i * markWidth);
      })
      .attr('y', this.bounds.yPos)
      .attr('fill', (d: DataPointT) => toHex(this.colorFn(this.intensityFn(d))));
  }