function lineStepChart(config) {
  function setReSizeEvent(data) {
    var resizeTimer;
    var interval = 500;
    window.removeEventListener("resize", function() {});
    window.addEventListener("resize", function(event) {
      if (resizeTimer !== false) {
        clearTimeout(resizeTimer);
      }
      resizeTimer = setTimeout(function() {
        $(data.mainDiv).empty();
        drawLineStepsChart(data);
        clearTimeout(resizeTimer);
      }, interval);
    });
  }

  drawLineStepsChart(config);
  setReSizeEvent(config);
}

function createLineStepChartLegend(mainDiv, data) {
  var z = d3.scaleOrdinal(d3.schemeCategory20);
  var mainDivName = mainDiv.substr(1, mainDiv.length);
  $(mainDiv).before(
    "<div id='Legend_" +
      mainDivName +
      "' class='pmd-card-body' style='margin-left:20px; margin-top:0; margin-bottom:0;'></div>"
  );
  data.forEach(function(d) {
    var cloloCode = z(d);
    $("#Legend_" + mainDivName).append(
      "<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
                  <span style='background:" +
        cloloCode +
        ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;opacity:0.3 '>&nbsp;</span>\
                  <span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" +
        d +
        " </span>\
              </span>"
    );
  });
}

function drawLineStepsChart(config) {
  var data = config.data;
  var lineColor = config.lineColor;
  var upLineValue = config.upLineValue;
  var typeFields = config.typeFields;
  var mainDiv = config.mainDiv;
  var minValueField = config.minValueField;
  var maxValueField = config.maxValueField;
  var mainDivName = mainDiv.substr(1, mainDiv.length);
  var z = d3.scaleOrdinal(d3.schemeCategory20);

  var legendData = new Set(
    data.map(function(d) {
      return d[typeFields];
    })
  );
  createLineStepChartLegend(mainDiv, legendData);

  d3
    .select(mainDiv)
    .append("svg")
    .attr("width", $(mainDiv).width())
    .attr("height", $(mainDiv).height());
  var svg = d3.select(mainDiv + " svg"),
    margin = {
      top: 20,
      right: 20,
      bottom: 40,
      left: 20
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

  var g = svg
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var minDateLabelg = svg
    .append("g")
    .attr("transform", "translate(" + 0 + "," + 0 + ")");
  var maxDateLabelg = svg
    .append("g")
    .attr("transform", "translate(" + 0 + "," + 0 + ")");

  data.map(function(d) {
    d[minValueField] = new Date(d[minValueField]);
    d[maxValueField] = new Date(d[maxValueField]);
  });
  var minValueDate = d3.min(data, function(d) {
    return d[minValueField];
  });

  var maxValueDate = d3.max(data, function(d) {
    return d[maxValueField];
  });

  var minValue = new Date(minValueDate).getTime() / (1000 * 60);
  var maxValue = new Date(maxValueDate).getTime() / (1000 * 60);
  var diffInMinutes = maxValue - minValue;

  var x = d3.scaleLinear().range([0, width]);
  x.domain([0, diffInMinutes]);

  var y = d3.scaleLinear().range([height, 0]);
  y.domain([0, height]);

  minDateLabelg
    .append("text")
    .attr("id", "textMinDateLabelg")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("font-size", "12px")
    .append("tspan")
    .attr("x", 0)
    .attr("y", height + margin.bottom)
    .text(d3.timeFormat("%Y-%m-%d %H:%M:%S")(minValueDate));

  maxDateLabelg
    .append("text")
    .attr("id", "textmaxDateLabelg")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("font-size", "12px")
    .append("tspan")
    .attr("x", $(mainDiv).width())
    .attr("y", height + margin.bottom)
    .text(d3.timeFormat("%Y-%m-%d %H:%M:%S")(maxValueDate));

  var dims = helpers.getDimensions("textmaxDateLabelg");
  d3
    .selectAll("#textmaxDateLabelg tspan")
    .attr("x", $(mainDiv).width() - dims.w);

  var prevX = 0;
  var prevY = 0;
  var yPos = 0;
  var pathg = "";
  var rectg = "";
  data.map(function(d, i) {
    if (upLineValue.indexOf(d[typeFields]) != -1) {
      yPos = height / 2;
    } else {
      yPos = height;
    }
    if (i == 0) {
      var startDateValue = d[minValueField].getTime() / (1000 * 60) - minValue;
      var endDateValue = d[maxValueField].getTime() / (1000 * 60) - minValue;

      pathg = g
        .append("path")
        .attr("class", "line")
        .attr("stroke", lineColor)
        .attr("stroke-width", "3px")
        .attr(
          "d",
          "M " +
            x(startDateValue) +
            " " +
            yPos +
            " L " +
            x(endDateValue) +
            " " +
            yPos
        );
      rectg = g
        .append("rect")
        .attr("class", "rectBackground")
        .attr("x", x(startDateValue))
        .attr("width", x(endDateValue) - x(startDateValue))
        .attr("height", height)
        .style("fill", z(d[typeFields]))
        .style("opacity", "0.3");
      prevX = x(endDateValue);
      prevY = yPos;
    } else {
      var startDateValue = d[minValueField].getTime() / (1000 * 60) - minValue;
      var endDateValue = d[maxValueField].getTime() / (1000 * 60) - minValue;

      if (prevY != yPos) {
        g
          .append("path")
          .attr("class", "line")
          .attr("stroke", lineColor)
          .attr("stroke-width", "3px")
          .attr(
            "d",
            "M " +
              x(startDateValue) +
              " " +
              prevY +
              " L " +
              x(startDateValue) +
              " " +
              yPos
          );

        pathg = g
          .append("path")
          .attr("class", "line")
          .attr("stroke", lineColor)
          .attr("stroke-width", "3px")
          .attr(
            "d",
            "M " +
              x(startDateValue) +
              " " +
              yPos +
              " L " +
              x(endDateValue) +
              " " +
              yPos
          );
      } else {
        pathg = g
          .append("path")
          .attr("class", "line")
          .attr("stroke", lineColor)
          .attr("stroke-width", "3px")
          .attr(
            "d",
            "M " +
              x(startDateValue) +
              " " +
              yPos +
              " L " +
              x(endDateValue) +
              " " +
              yPos
          );
      }
      rectg = g
        .append("rect")
        .attr("class", "rectBackground")
        .attr("x", x(startDateValue))
        .attr("width", x(endDateValue) - x(startDateValue))
        .attr("height", height)
        .style("fill", z(d[typeFields]))
        .style("opacity", "0.3");

      prevY = yPos;
    }
    rectg
      .on("mouseover", () => d3.select("#tooltipDiv").style("display", null))
      .on("mouseout", () => d3.select("#tooltipDiv").style("display", "none"))
      .on("mousemove", () => mousemove(this, d));
  });

  function mousemove(e, data) {
    d3.select("#tooltipDiv").style("top", d3.event.pageY + 15);
    d3.select("#tooltipDiv").style("left", d3.event.pageX - 10);
    d3
      .select("#startDate")
      .html(
        "Start Date:" + d3.timeFormat("%Y-%m-%d %H:%M:%S")(data[minValueField])
      );
    d3
      .select("#endDate")
      .html(
        "End Date:" + d3.timeFormat("%Y-%m-%d %H:%M:%S")(data[maxValueField])
      );
    d3.select("#processType").html("Process Type:" + data[typeFields]);
  }
}

var helpers = {
  getDimensions: function(id) {
    var el = document.getElementById(id);
    var w = 0,
      h = 0;
    if (el) {
      var dimensions = el.getBBox();
      w = dimensions.width;
      h = dimensions.height;
    } else {
      console.log("error: getDimensions() " + id + " not found.");
    }
    return {
      w: w,
      h: h
    };
  }
};