@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/lineCharts/LineChart.js

@@ -0,0 +1,912 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as _ from "lodash-es";
+import React from "react";
+import * as R from "remeda";
+import {
+  guid,
+  excludeNullish,
+  getRelativeMouse,
+  exposeInstanceOnWindow,
+  excludeUndefined,
+  isMobile,
+  HorizontalAlign,
+  isTouchDevice
+} from "../../utils/index.js";
+import { computed, action, observable, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import { select } from "d3-selection";
+import { easeLinear } from "d3-ease";
+import { DualAxisComponent } from "../axis/AxisViews.js";
+import { DualAxis } from "../axis/Axis.js";
+import { LineLegend } from "../lineLegend/LineLegend.js";
+import { TooltipFooterIcon } from "../tooltip/TooltipProps.js";
+import {
+  Tooltip,
+  TooltipState,
+  TooltipTable,
+  makeTooltipRoundingNotice,
+  toTooltipTableColumns
+} from "../tooltip/Tooltip.js";
+import { NoDataModal } from "../noDataModal/NoDataModal.js";
+import { extent } from "d3-array";
+import { VerticalAlign } from "../../types/index.js";
+import {
+  BASE_FONT_SIZE,
+  DEFAULT_GRAPHER_BOUNDS,
+  GRAPHER_OPACITY_MUTE
+} from "../core/GrapherConstants.js";
+import {
+  CATEGORICAL_LEGEND_STYLE,
+  NUMERIC_LEGEND_STYLE,
+  LEGEND_PADDING,
+  VARIABLE_COLOR_STROKE_WIDTH,
+  DEFAULT_STROKE_WIDTH,
+  VARIABLE_COLOR_LINE_OUTLINE_WIDTH,
+  DEFAULT_LINE_OUTLINE_WIDTH,
+  DISCONNECTED_DOTS_MARKER_RADIUS,
+  VARIABLE_COLOR_MARKER_RADIUS,
+  STATIC_SMALL_MARKER_RADIUS,
+  DEFAULT_MARKER_RADIUS,
+  LINE_CHART_CLASS_NAME
+} from "./LineChartConstants.js";
+import {
+  getHoverStateForSeries,
+  getSeriesKey,
+  isTargetOutsideElement,
+  makeClipPath
+} from "../chart/ChartUtils.js";
+import { CategoricalBin } from "../color/ColorScaleBin.js";
+import { GRAPHER_BACKGROUND_DEFAULT, GRAY_50 } from "../color/ColorConstants.js";
+import { darkenColorForLine } from "../color/ColorUtils.js";
+import {
+  HorizontalNumericColorLegend
+} from "../legend/HorizontalColorLegends.js";
+import {
+  getAnnotationsForSeries,
+  getAnnotationsMap,
+  getYAxisConfigDefaults,
+  toPlacedLineChartSeries,
+  toRenderLineChartSeries
+} from "./LineChartHelpers.js";
+import { Lines } from "./Lines.js";
+import { AxisConfig } from "../axis/AxisConfig.js";
+let LineChart = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.base = React.createRef();
+    this.tooltipState = new TooltipState({
+      fade: "immediate"
+    });
+    this.defaultRightPadding = 1;
+    this.lineLegendHoveredSeriesName = void 0;
+    this.hoverTimer = void 0;
+    this.numericBinSize = 6;
+    this.legendTickSize = 1;
+    // Used when faceted
+    this.categoricalLegendStyleConfig = CATEGORICAL_LEGEND_STYLE;
+    // Used when the lines are colored by a numeric scale
+    this.numericLegendStyleConfig = NUMERIC_LEGEND_STYLE;
+    makeObservable(this, {
+      tooltipState: observable,
+      lineLegendHoveredSeriesName: observable,
+      hoverTimer: observable
+    });
+  }
+  get chartState() {
+    return this.props.chartState;
+  }
+  get isStatic() {
+    return this.manager.isStatic ?? false;
+  }
+  get detailsOrderedByReference() {
+    return this.manager.detailsOrderedByReference ?? [];
+  }
+  get annotationsMap() {
+    return getAnnotationsMap(
+      this.chartState.inputTable,
+      this.yColumnSlugs[0]
+    );
+  }
+  dismissTooltip() {
+    this.tooltipState.target = null;
+  }
+  onCursorLeave() {
+    if (!this.manager.shouldPinTooltipToBottom) {
+      this.dismissTooltip();
+    }
+    this.clearHighlightedSeries();
+  }
+  get allValues() {
+    return this.placedSeries.flatMap((series) => series.points);
+  }
+  onCursorMove(ev) {
+    const ref = this.base.current, parentRef = this.manager.base?.current;
+    if (parentRef) {
+      this.tooltipState.position = getRelativeMouse(parentRef, ev);
+    }
+    if (!ref) return;
+    const mouse = getRelativeMouse(ref, ev);
+    const boxPadding = isMobile() ? 44 : 25;
+    const boundedBox = this.dualAxis.innerBounds.expand({
+      left: boxPadding,
+      right: boxPadding
+    });
+    let hoverTime;
+    if (boundedBox.contains(mouse)) {
+      const invertedX = this.dualAxis.horizontalAxis.invert(mouse.x);
+      const closestValue = _.minBy(
+        this.allValues,
+        (point) => Math.abs(invertedX - point.x)
+      );
+      hoverTime = closestValue?.x;
+    }
+    if (this.dualAxis.innerBounds.contains(mouse)) {
+      this.clearLineLegendHover();
+    }
+    this.tooltipState.target = hoverTime === void 0 ? null : { time: hoverTime };
+  }
+  get manager() {
+    return this.chartState.manager;
+  }
+  get bounds() {
+    return this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS;
+  }
+  get boundsWithoutColorLegend() {
+    return this.bounds.padTop(
+      this.hasColorLegend ? this.legendHeight + LEGEND_PADDING : 0
+    );
+  }
+  get maxLineLegendWidth() {
+    return this.bounds.width / 3;
+  }
+  get lineStrokeWidth() {
+    if (this.manager.lineStrokeWidth) return this.manager.lineStrokeWidth;
+    const factor = this.manager.isStaticAndSmall ? 2 : 1;
+    return this.hasColorScale ? factor * VARIABLE_COLOR_STROKE_WIDTH : factor * DEFAULT_STROKE_WIDTH;
+  }
+  get lineOutlineWidth() {
+    return this.hasColorScale ? VARIABLE_COLOR_LINE_OUTLINE_WIDTH : DEFAULT_LINE_OUTLINE_WIDTH;
+  }
+  get markerRadius() {
+    if (this.hasMarkersOnlySeries) return DISCONNECTED_DOTS_MARKER_RADIUS;
+    if (this.hasColorScale) return VARIABLE_COLOR_MARKER_RADIUS;
+    if (this.manager.isStaticAndSmall) return STATIC_SMALL_MARKER_RADIUS;
+    return DEFAULT_MARKER_RADIUS;
+  }
+  get activeTimes() {
+    const { highlightedTimesInLineChart = [] } = this.manager;
+    return _.uniq(
+      this.tooltipState.target?.time ? [
+        this.tooltipState.target.time,
+        ...highlightedTimesInLineChart
+      ] : highlightedTimesInLineChart
+    );
+  }
+  get activeXVerticalLines() {
+    const { activeTimes, dualAxis } = this;
+    const { horizontalAxis, verticalAxis } = dualAxis;
+    if (!activeTimes) return null;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, activeTimes.map((time) => /* @__PURE__ */ React.createElement("g", { className: "hoverIndicator", key: time }, /* @__PURE__ */ React.createElement(
+      "line",
+      {
+        x1: horizontalAxis.place(time),
+        y1: verticalAxis.range[0],
+        x2: horizontalAxis.place(time),
+        y2: verticalAxis.range[1],
+        stroke: "rgba(180,180,180,.4)"
+      }
+    ), this.renderSeries.map((series, index) => {
+      const point = series.points.find(
+        (point2) => point2.x === time
+      );
+      if (!point || series.hover.background) return null;
+      const valueColor = this.hasColorScale ? darkenColorForLine(
+        this.chartState.getColorScaleColor(
+          point.colorValue
+        )
+      ) : series.color;
+      const color = !series.focus.background || series.hover.active ? valueColor : GRAY_50;
+      return /* @__PURE__ */ React.createElement(
+        "circle",
+        {
+          key: getSeriesKey(series, index),
+          cx: horizontalAxis.place(point.x),
+          cy: verticalAxis.place(point.y),
+          r: this.lineStrokeWidth / 2 + 3.5,
+          fill: color,
+          stroke: this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT,
+          strokeWidth: 0.5
+        }
+      );
+    }))));
+  }
+  get tooltipId() {
+    return this.renderUid;
+  }
+  get isTooltipActive() {
+    return this.manager.tooltip?.get()?.id === this.tooltipId;
+  }
+  get tooltip() {
+    const { formatColumn, colorColumn, hasColorScale } = this;
+    const { target, position, fading } = this.tooltipState;
+    if (!target) return void 0;
+    const seriesSegments = _.mapValues(
+      _.groupBy(this.series, "seriesName"),
+      (segments) => segments.find(
+        (series) => (
+          // Ideally pick series with a defined value at the target time
+          series.points.find((point) => point.x === target.time)
+        )
+      ) ?? segments.find((series) => {
+        const [startX, endX] = extent(series.points, ({ x }) => x);
+        return _.isNumber(startX) && _.isNumber(endX) && startX < target.time && target.time < endX;
+      }) ?? null
+      // If neither series matches, exclude the entity from the tooltip altogether
+    );
+    const sortedData = _.sortBy(
+      excludeNullish(R.values(seriesSegments)),
+      (series) => {
+        const value = series.points.find(
+          (point) => point.x === target.time
+        );
+        return value !== void 0 ? -value.y : Infinity;
+      }
+    );
+    const formattedTime = formatColumn.formatTime(target.time), { displayUnit: unitLabel } = formatColumn, { isRelativeMode, startTime } = this.manager;
+    const title = formattedTime;
+    const titleAnnotation = this.xAxis.label ? `(${this.xAxis.label})` : "";
+    const columns = [formatColumn];
+    if (hasColorScale && colorColumn.slug !== formatColumn.slug)
+      columns.push(colorColumn);
+    const subtitle = isRelativeMode && startTime ? `% change since ${formatColumn.formatTime(startTime)}` : unitLabel;
+    const subtitleFormat = subtitle === unitLabel ? "unit" : void 0;
+    const projectionNotice = sortedData.some(
+      (series) => series.isProjection
+    ) ? { icon: TooltipFooterIcon.Stripes, text: "Projected data" } : void 0;
+    const roundingNotice = formatColumn.roundsToSignificantFigures ? {
+      icon: TooltipFooterIcon.None,
+      text: makeTooltipRoundingNotice([
+        formatColumn.numSignificantFigures
+      ])
+    } : void 0;
+    const footer = excludeUndefined([projectionNotice, roundingNotice]);
+    return /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        id: this.tooltipId,
+        tooltipManager: this.manager,
+        x: position.x,
+        y: position.y,
+        style: { maxWidth: "400px" },
+        offsetXDirection: "left",
+        offsetX: 20,
+        offsetY: -16,
+        title,
+        titleAnnotation,
+        subtitle,
+        subtitleFormat,
+        footer,
+        dissolve: fading,
+        dismiss: this.dismissTooltip
+      },
+      /* @__PURE__ */ React.createElement(
+        TooltipTable,
+        {
+          columns: toTooltipTableColumns(columns),
+          rows: sortedData.map((series) => {
+            const {
+              seriesName,
+              displayName,
+              isProjection: striped
+            } = series;
+            const annotation = getAnnotationsForSeries(
+              this.annotationsMap,
+              seriesName
+            );
+            const point = series.points.find(
+              (point2) => point2.x === target.time
+            );
+            const blurred = this.hoverStateForSeries(series).background || series.focus.background || point === void 0;
+            const color = this.hasColorScale ? darkenColorForLine(
+              this.chartState.getColorScaleColor(
+                point?.colorValue
+              )
+            ) : series.color;
+            const opacity = blurred ? GRAPHER_OPACITY_MUTE : 1;
+            const swatch = { color, opacity };
+            const values = excludeUndefined([
+              point?.y,
+              point?.colorValue
+            ]);
+            return {
+              name: displayName,
+              annotation,
+              swatch,
+              blurred,
+              striped,
+              values
+            };
+          })
+        }
+      )
+    );
+  }
+  onLineLegendMouseOver(seriesName) {
+    clearTimeout(this.hoverTimer);
+    this.lineLegendHoveredSeriesName = seriesName;
+  }
+  clearLineLegendHover() {
+    this.lineLegendHoveredSeriesName = void 0;
+  }
+  clearHighlightedSeries() {
+    clearTimeout(this.hoverTimer);
+    this.hoverTimer = window.setTimeout(() => {
+      this.clearLineLegendHover();
+    }, 200);
+  }
+  onLineLegendMouseLeave() {
+    this.clearHighlightedSeries();
+  }
+  onLineLegendClick(seriesName) {
+    this.chartState.focusArray.toggle(seriesName);
+  }
+  get hoveredSeriesNames() {
+    const { externalLegendHoverBin } = this.manager;
+    const hoveredSeriesNames = excludeUndefined([
+      this.lineLegendHoveredSeriesName
+    ]);
+    if (externalLegendHoverBin) {
+      hoveredSeriesNames.push(
+        ...this.series.map((s) => s.seriesName).filter((name) => externalLegendHoverBin.contains(name))
+      );
+    }
+    return hoveredSeriesNames;
+  }
+  get isHoverModeActive() {
+    return this.hoveredSeriesNames.length > 0 || // if the external legend is hovered, we want to mute
+    // all non-hovered series even if the chart doesn't plot
+    // the currently hovered series
+    !!this.manager.externalLegendHoverBin && !this.hasColorScale;
+  }
+  get canToggleFocusMode() {
+    return !isTouchDevice() && this.series.length > 1;
+  }
+  get hasTimeHighlights() {
+    const { highlightedTimesInLineChart = [] } = this.manager;
+    return highlightedTimesInLineChart.length > 0;
+  }
+  onDocumentClick(e) {
+    const chartContainer = this.manager.base?.current;
+    if (!chartContainer) return;
+    const chartAreas = chartContainer.getElementsByClassName(
+      LINE_CHART_CLASS_NAME
+    );
+    const isTargetOutsideChartAreas = Array.from(chartAreas).every(
+      (chartArea) => isTargetOutsideElement(e.target, chartArea)
+    );
+    if (isTargetOutsideChartAreas) {
+      this.dismissTooltip();
+    }
+  }
+  componentDidMount() {
+    if (!this.manager.disableIntroAnimation) {
+      this.runFancyIntroAnimation();
+    }
+    exposeInstanceOnWindow(this);
+    document.addEventListener("click", this.onDocumentClick, {
+      capture: true
+    });
+  }
+  componentWillUnmount() {
+    if (this.animSelection) this.animSelection.interrupt();
+    document.removeEventListener("click", this.onDocumentClick, {
+      capture: true
+    });
+  }
+  get renderUid() {
+    return guid();
+  }
+  get fontSize() {
+    return this.manager.fontSize ?? BASE_FONT_SIZE;
+  }
+  get fontWeight() {
+    return this.hasColorScale ? 700 : 400;
+  }
+  get hidePoints() {
+    return !!this.manager.hidePoints;
+  }
+  get lineLegendX() {
+    return this.bounds.right - this.lineLegendWidth;
+  }
+  get lineLegendY() {
+    return [
+      this.boundsWithoutColorLegend.top,
+      this.boundsWithoutColorLegend.bottom
+    ];
+  }
+  get clipPathBounds() {
+    const { dualAxis, boundsWithoutColorLegend } = this;
+    return boundsWithoutColorLegend.set({ x: dualAxis.innerBounds.x }).expand(10);
+  }
+  get clipPath() {
+    return makeClipPath({
+      renderUid: this.renderUid,
+      box: this.clipPathBounds
+    });
+  }
+  runFancyIntroAnimation() {
+    this.animSelection = select(this.base.current).selectAll("clipPath > rect").attr("width", 0);
+    this.animSelection.transition().duration(800).ease(easeLinear).attr("width", this.clipPathBounds.width).on("end", () => this.forceUpdate());
+  }
+  get lineLegendWidth() {
+    if (!this.manager.showLegend) return 0;
+    return LineLegend.stableWidth({
+      series: this.lineLegendSeries,
+      maxWidth: this.maxLineLegendWidth,
+      fontSize: this.fontSize,
+      fontWeight: this.fontWeight,
+      verticalAlign: VerticalAlign.top
+    });
+  }
+  renderDualAxis() {
+    const { manager, dualAxis } = this;
+    return /* @__PURE__ */ React.createElement(
+      DualAxisComponent,
+      {
+        dualAxis,
+        showTickMarks: true,
+        detailsMarker: manager.detailsMarkerInSvg,
+        backgroundColor: manager.backgroundColor
+      }
+    );
+  }
+  renderColorLegend() {
+    if (!this.hasColorLegend) return null;
+    return /* @__PURE__ */ React.createElement(HorizontalNumericColorLegend, { manager: this });
+  }
+  /**
+   * Render the lines themselves and their labels
+   */
+  renderChartElements() {
+    const { manager } = this;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, manager.showLegend && /* @__PURE__ */ React.createElement(
+      LineLegend,
+      {
+        series: this.lineLegendSeries,
+        yAxis: this.yAxis,
+        x: this.lineLegendX,
+        yRange: this.lineLegendY,
+        maxWidth: this.maxLineLegendWidth,
+        verticalAlign: VerticalAlign.top,
+        fontSize: this.fontSize,
+        fontWeight: this.fontWeight,
+        isStatic: this.isStatic,
+        onMouseOver: this.onLineLegendMouseOver,
+        onMouseLeave: this.onLineLegendMouseLeave,
+        onClick: this.canToggleFocusMode ? this.onLineLegendClick : void 0
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Lines,
+      {
+        dualAxis: this.dualAxis,
+        series: this.renderSeries,
+        multiColor: this.hasColorScale,
+        hidePoints: this.hidePoints,
+        lineStrokeWidth: this.lineStrokeWidth,
+        lineOutlineWidth: this.lineOutlineWidth,
+        backgroundColor: this.manager.backgroundColor,
+        markerRadius: this.markerRadius,
+        isStatic: manager.isStatic
+      }
+    ));
+  }
+  renderStatic() {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderColorLegend(), this.renderDualAxis(), this.renderChartElements());
+  }
+  renderInteractive() {
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        ref: this.base,
+        className: LINE_CHART_CLASS_NAME,
+        onMouseLeave: this.onCursorLeave,
+        onTouchEnd: this.onCursorLeave,
+        onTouchCancel: this.onCursorLeave,
+        onMouseMove: this.onCursorMove,
+        onTouchStart: this.onCursorMove,
+        onTouchMove: this.onCursorMove
+      },
+      this.clipPath.element,
+      /* @__PURE__ */ React.createElement("rect", { ...this.bounds.toProps(), fillOpacity: "0" }),
+      this.renderColorLegend(),
+      this.renderDualAxis(),
+      /* @__PURE__ */ React.createElement("g", { clipPath: this.clipPath.id }, this.renderChartElements()),
+      (this.isTooltipActive || this.hasTimeHighlights) && this.activeXVerticalLines,
+      this.tooltip
+    );
+  }
+  render() {
+    const { manager, dualAxis } = this;
+    if (this.chartState.errorInfo.reason)
+      return /* @__PURE__ */ React.createElement("g", null, this.renderDualAxis(), /* @__PURE__ */ React.createElement(
+        NoDataModal,
+        {
+          manager,
+          bounds: dualAxis.innerBounds,
+          message: this.chartState.errorInfo.reason
+        }
+      ));
+    return manager.isStatic ? this.renderStatic() : this.renderInteractive();
+  }
+  get yColumnSlugs() {
+    return this.chartState.yColumnSlugs;
+  }
+  get colorColumn() {
+    return this.chartState.colorColumn;
+  }
+  get formatColumn() {
+    return this.chartState.formatColumn;
+  }
+  get hasColorScale() {
+    return this.chartState.hasColorScale;
+  }
+  get hasColorLegend() {
+    return this.hasColorScale && !!this.manager.showLegend && !this.manager.isDisplayedAlongsideComplementaryTable;
+  }
+  get legendX() {
+    return this.bounds.x;
+  }
+  get legendMaxWidth() {
+    return this.bounds.width;
+  }
+  get legendAlign() {
+    return HorizontalAlign.center;
+  }
+  get colorScale() {
+    return this.chartState.colorScale;
+  }
+  get numericLegendData() {
+    return _.sortBy(
+      this.colorScale.legendBins,
+      (bin) => bin instanceof CategoricalBin
+    );
+  }
+  get numericLegend() {
+    return this.hasColorScale && this.manager.showLegend ? new HorizontalNumericColorLegend({ manager: this }) : void 0;
+  }
+  get numericLegendY() {
+    return this.bounds.top;
+  }
+  get legendTitle() {
+    return this.hasColorScale ? this.colorScale.legendDescription : void 0;
+  }
+  get legendHeight() {
+    return this.numericLegend?.height ?? 0;
+  }
+  get series() {
+    return this.chartState.series;
+  }
+  get hasMarkersOnlySeries() {
+    return this.series.some((series) => series.plotMarkersOnly);
+  }
+  get placedSeries() {
+    return toPlacedLineChartSeries(this.series, {
+      chartState: this.chartState,
+      dualAxis: this.dualAxis
+    });
+  }
+  hoverStateForSeries(series) {
+    return getHoverStateForSeries(series, {
+      isHoverModeActive: this.isHoverModeActive,
+      hoveredSeriesNames: this.hoveredSeriesNames
+    });
+  }
+  get renderSeries() {
+    return toRenderLineChartSeries(this.placedSeries, {
+      isFocusModeActive: this.chartState.isFocusModeActive,
+      isHoverModeActive: this.isHoverModeActive,
+      hoveredSeriesNames: this.hoveredSeriesNames
+    });
+  }
+  get lineLegendSeries() {
+    let series = this.series;
+    if (series.some((series2) => !!series2.isProjection))
+      series = series.filter((series2) => series2.isProjection);
+    const deduplicatedSeries = [];
+    const seriesGroupedByName = _.groupBy(series, "seriesName");
+    for (const duplicates of Object.values(seriesGroupedByName)) {
+      deduplicatedSeries.push(R.last(duplicates));
+    }
+    return deduplicatedSeries.map((series2) => {
+      const { seriesName, displayName, color } = series2;
+      const lastValue = R.last(series2.points).y;
+      return {
+        color,
+        seriesName,
+        // E.g. https://ourworldindata.org/grapher/size-poverty-gap-world
+        label: !this.manager.showLegend ? "" : displayName,
+        annotation: getAnnotationsForSeries(
+          this.annotationsMap,
+          seriesName
+        ),
+        yValue: lastValue,
+        focus: series2.focus,
+        hover: this.hoverStateForSeries(series2)
+      };
+    });
+  }
+  get yAxisConfig() {
+    const { yAxisConfig } = this.manager;
+    const defaults = getYAxisConfigDefaults(yAxisConfig);
+    return new AxisConfig({ ...defaults, ...yAxisConfig }, this);
+  }
+  get xAxisConfig() {
+    const { xAxisConfig } = this.manager;
+    const custom = { hideGridlines: true };
+    return new AxisConfig({ ...custom, ...xAxisConfig }, this);
+  }
+  get horizontalAxisPart() {
+    return this.chartState.toHorizontalAxis(this.xAxisConfig);
+  }
+  get verticalAxisPart() {
+    return this.chartState.toVerticalAxis(this.yAxisConfig);
+  }
+  get innerBounds() {
+    return this.boundsWithoutColorLegend.padRight(
+      this.manager.showLegend ? this.lineLegendWidth : this.defaultRightPadding
+    ).padTop(this.chartState.isLogScale ? 0 : 6).padBottom(2);
+  }
+  get dualAxis() {
+    return new DualAxis({
+      bounds: this.innerBounds,
+      verticalAxis: this.verticalAxisPart,
+      horizontalAxis: this.horizontalAxisPart,
+      comparisonLines: this.manager.comparisonLines
+    });
+  }
+  get yAxis() {
+    return this.dualAxis.verticalAxis;
+  }
+  get xAxis() {
+    return this.dualAxis.horizontalAxis;
+  }
+  get externalLegend() {
+    if (!this.manager.showLegend) {
+      const numericLegendData = this.hasColorScale ? this.numericLegendData : [];
+      const categoricalLegendData = this.hasColorScale ? [] : this.series.map(
+        (series, index) => new CategoricalBin({
+          index,
+          value: series.seriesName,
+          label: series.displayName,
+          color: series.color
+        })
+      );
+      return {
+        legendTitle: this.legendTitle,
+        legendTickSize: this.legendTickSize,
+        numericBinSize: this.numericBinSize,
+        numericLegendData,
+        categoricalLegendData,
+        categoricalLegendStyleConfig: this.categoricalLegendStyleConfig,
+        numericLegendStyleConfig: this.numericLegendStyleConfig
+      };
+    }
+    return void 0;
+  }
+};
+__decorateClass([
+  computed
+], LineChart.prototype, "chartState", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "isStatic", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "detailsOrderedByReference", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "annotationsMap", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "dismissTooltip", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "onCursorLeave", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "allValues", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "onCursorMove", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "manager", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "bounds", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "boundsWithoutColorLegend", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "maxLineLegendWidth", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "lineStrokeWidth", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "lineOutlineWidth", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "markerRadius", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "activeTimes", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "activeXVerticalLines", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "tooltipId", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "isTooltipActive", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "tooltip", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "onLineLegendMouseOver", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "clearLineLegendHover", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "clearHighlightedSeries", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "onLineLegendMouseLeave", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "onLineLegendClick", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "hoveredSeriesNames", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "isHoverModeActive", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "canToggleFocusMode", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "hasTimeHighlights", 1);
+__decorateClass([
+  action.bound
+], LineChart.prototype, "onDocumentClick", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "renderUid", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "fontSize", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "fontWeight", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "hidePoints", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "lineLegendX", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "lineLegendY", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "clipPathBounds", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "clipPath", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "lineLegendWidth", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "yColumnSlugs", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "colorColumn", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "formatColumn", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "hasColorScale", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "hasColorLegend", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "legendX", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "legendMaxWidth", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "legendAlign", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "colorScale", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "numericLegendData", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "numericLegend", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "numericLegendY", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "legendTitle", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "legendHeight", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "series", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "hasMarkersOnlySeries", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "placedSeries", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "renderSeries", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "lineLegendSeries", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "yAxisConfig", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "xAxisConfig", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "horizontalAxisPart", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "verticalAxisPart", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "innerBounds", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "dualAxis", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "yAxis", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "xAxis", 1);
+__decorateClass([
+  computed
+], LineChart.prototype, "externalLegend", 1);
+LineChart = __decorateClass([
+  observer
+], LineChart);
+export {
+  LineChart
+};