linechart.js

import * as d3 from "d3";
import { BaseChartWidget } from "./base";

export class LineChartWidget extends BaseChartWidget {
  constructor(title = "", description, data, options = {}) {
    if (options.transform) data = (data ?? []).map(options.transform);

    super(title, description, data, options);
  }

  plot(divWidth, divHeight) {
    const [width, height] = this.clearAndScaleSvg(divWidth, divHeight);
    this.drawTitle();

    if (!this.dataIsValid) {
      this.showErrorMessage(divWidth, divHeight);
      return this.wrapper.innerHTML;
    }

    const [xMin, xMax] = d3.extent(this.data, (d) => d.column1);

    const xScale = d3.scaleTime().domain([xMin, xMax]).range([0, width]);

    this.appendXAxis(xScale, height);
    this.appendXAxisLabel(width, height);
    this.appendYAxisLabel();

    const yMax = d3.max(this.data, (d) => +d.column2);

    const yScale = d3.scaleLinear().domain([0, yMax]).range([height, 0]);

    this.g.append("g").call(d3.axisLeft(yScale));

    const color = d3.scaleOrdinal().range(this.colorRange);

    this.g
      .append("path")
      .datum(this.data)
      .attr("stroke", (d) => color(d.column2))
      .attr("class", "chart-path")
      .attr(
        "d",
        d3
          .line()
          .x((d) => xScale(d.column1))
          .y((d) => yScale(d.column2))
      );

    if (this.options.showLegend)
      this.showLegend(
        this.data.map((e) => e.column1),
        color,
        divWidth
      );

    return this.wrapper.innerHTML;
  }
}