making svg chart

gistfile1.txt

class Component extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const height = this.clientHeight,
      width = this.clientWidth;
      this.createSvg();
  }

  createPattern(size) {
    return `<pattern id="pattern" width="${size}" height="${size}" patternUnits="userSpaceOnUse">
              <path d="M 0 0 L ${size} 0 ${size} ${size} 0 ${size} z" stroke-width="1"></path>
            </pattern>`;
  }

  createPoints(data) {
    return data.map((col) => {
      return col.map((point) => `<circle class="point-value" cx="${point.value}" cy="${point.value}" r="2" fill="red"/>`);
    });
  }

  createLabels(params, data) {
    let {
      height,
      width,
      axis
    } = params;

    const container = document.createElement("g");
    container.className = `"labels ${axis}-labels"`;

    const stepSize = (axis == "x" ? width : height) / data.length;

    let stepPos = stepSize / data.length;

    let startPosX = axis == "x" ? stepPos + 15 : -30,
      startPosY = axis == "x" ? height + 20 : 110;

    let labels = `<g>${data
      .map(item => {
        let label = `<text fill="red" x="${Math.ceil(startPosX)}" y="${Math.ceil(startPosY)}">${item}</text>`;
        if (axis == "x") {
          startPosX += stepSize;
        } else {
          startPosY += stepSize;
        }
        return label;
      }).join(" ")};</g>`;
    return labels;
  }


  createSvg() {
    const height = this.clientHeight,
      width = this.clientWidth;
      let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="graph" aria-labelledby="title" role="img"">
                    <defs id="svg-defs"></defs>
                    <rect id="svg-fill" fill="url(#pattern)" height="${
                      height
                    }" width="${width - 6}" />
                    <g class="grid x-grid" id="xGrid">
                        <line x1="0" x2="0" y1="0" y2="${height}"></line>
                    </g>
                    <g class="grid y-grid" id="yGrid">
                        <line x1="0" x2="${width}" y1="${height}" y2="${height}"></line>
                    </g>;
                </svg>`;
    this.innerHTML = svg;
  }

  drawGrid(data) {
    const height = this.clientHeight,
      width = this.clientWidth;

    let {
      points,
      labels
    } = data;

    let defs = this.querySelector("#svg-defs");

    let xLabels = this.createLabels({
        height,
        width,
        axis: "y"
      },
      points.reverse()
    );

    let yLabels = this.createLabels({
        height,
        width,
        axis: "x"
      },
      labels
    );

    this.children[0].innerHTML = `${this.children[0].innerHTML}${yLabels}${xLabels}`;
  }
}

export default Component;