@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/dataTable/DataTable.js

@@ -0,0 +1,934 @@
+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 * as React from "react";
+import { computed, observable, action, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import classnames from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowDownLong,
+  faArrowUpLong,
+  faInfoCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { scaleLinear } from "d3-scale";
+import { extent } from "d3-array";
+import { line } from "d3-shape";
+import {
+  SortOrder,
+  ChartsTableSlugs,
+  VariableRoundingMode
+} from "../../types/index.js";
+import {
+  valuesByEntityAtTimes,
+  es6mapValues,
+  exposeInstanceOnWindow,
+  Bounds,
+  Tippy,
+  excludeUndefined,
+  joinTitleFragments,
+  FuzzySearch
+} from "../../utils/index.js";
+import {
+  DEFAULT_GRAPHER_BOUNDS,
+  DEFAULT_GRAPHER_ENTITY_TYPE,
+  SVG_STYLE_PROPS
+} from "../core/GrapherConstants.js";
+import * as R from "remeda";
+import { makeSelectionArray } from "../chart/ChartUtils.js";
+import { isEntityRegionType } from "../core/EntitiesByRegionType.js";
+import { NoDataModal } from "../noDataModal/NoDataModal.js";
+import {
+  RangeColumnKey,
+  PointColumnKey,
+  TargetTimeMode,
+  COMMON_DATA_TABLE_FILTERS,
+  SparklineKey
+} from "./DataTableConstants.js";
+import { GRAY_30 } from "../color/ColorConstants.js";
+const ENTITY_SORT_INDEX = -1;
+const DEFAULT_SORT_STATE = {
+  dimIndex: ENTITY_SORT_INDEX,
+  columnKey: void 0,
+  order: SortOrder.asc
+};
+const columnNameByType = {
+  single: "Value",
+  start: "Start",
+  end: "End",
+  delta: "Absolute Change",
+  deltaRatio: "Relative Change",
+  sparkline: "Sparkline"
+};
+const inverseSortOrder = (order) => order === SortOrder.asc ? SortOrder.desc : SortOrder.asc;
+let DataTable = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.storedState = {
+      sort: DEFAULT_SORT_STATE
+    };
+    this.AUTO_SELECTION_THRESHOLD_PERCENTAGE = 0.5;
+    makeObservable(this, {
+      storedState: observable
+    });
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get selectionArray() {
+    return makeSelectionArray(this.manager.dataTableSelection);
+  }
+  get tableConfig() {
+    return this.manager.dataTableConfig;
+  }
+  get timelineMinTime() {
+    return this.manager.closestTimelineMinTime;
+  }
+  get timelineMaxTime() {
+    return this.manager.closestTimelineMaxTime;
+  }
+  get table() {
+    let table = this.manager.filteredTableForDisplay;
+    table = table.filterByTimeRange(
+      this.manager.closestTimelineMinTime ?? -Infinity,
+      this.manager.closestTimelineMaxTime ?? Infinity
+    );
+    return table;
+  }
+  get tableState() {
+    return { sort: this.sortState };
+  }
+  get sortState() {
+    let { dimIndex, columnKey, order } = {
+      ...DEFAULT_SORT_STATE,
+      ...this.storedState.sort
+    };
+    dimIndex = Math.min(dimIndex, this.table.numColumns - 1);
+    if (dimIndex !== ENTITY_SORT_INDEX) {
+      const availableColumns = this.dataTableDimensionsWithValues[dimIndex].columnDefinitions.map((colDef) => colDef.key);
+      if (columnKey === void 0 || !availableColumns.includes(columnKey))
+        columnKey = availableColumns[0];
+    }
+    return {
+      dimIndex,
+      columnKey,
+      order
+    };
+  }
+  get entityType() {
+    return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE;
+  }
+  get sortValueMapper() {
+    const { dimIndex: sortIndex, columnKey, order } = this.tableState.sort;
+    if (sortIndex === ENTITY_SORT_INDEX)
+      return (row) => row.entityName;
+    return (row) => {
+      const dv = row.values[sortIndex];
+      let value;
+      if (dv) {
+        if (isSingleValue(dv)) {
+          value = dv.single?.value;
+        } else if (isRangeValue(dv) && columnKey !== void 0 && isRangeColumnKey(columnKey)) {
+          value = dv[columnKey]?.value;
+        }
+      }
+      if (value === void 0 || typeof value === "number" && (!isFinite(value) || isNaN(value)))
+        return order === SortOrder.asc ? Infinity : -Infinity;
+      return value;
+    };
+  }
+  get hasSubheaders() {
+    return !this.hasDimensionHeaders || this.dataTableDimensionsWithValues.some(
+      (header) => header.columnDefinitions.length > 1
+    );
+  }
+  updateSort(dimIndex, columnKey) {
+    const { sort } = this.tableState;
+    const order = sort.dimIndex === dimIndex && sort.columnKey === columnKey ? inverseSortOrder(sort.order) : dimIndex === ENTITY_SORT_INDEX ? SortOrder.asc : SortOrder.desc;
+    this.storedState.sort.dimIndex = dimIndex;
+    this.storedState.sort.columnKey = columnKey;
+    this.storedState.sort.order = order;
+  }
+  get entityHeaderText() {
+    return _.capitalize(this.entityType);
+  }
+  get entityHeader() {
+    const { sort } = this.tableState;
+    return /* @__PURE__ */ React.createElement(
+      ColumnHeader,
+      {
+        key: "entity",
+        sortable: this.entityCount > 1,
+        sortedCol: sort.dimIndex === ENTITY_SORT_INDEX,
+        sortOrder: sort.order,
+        onClick: () => this.updateSort(ENTITY_SORT_INDEX),
+        headerText: this.entityHeaderText,
+        colType: "entity"
+      }
+    );
+  }
+  get hasDimensionHeaders() {
+    return this.dataTableDimensionsWithValues.length > 1;
+  }
+  get singleDataColumnStyle() {
+    if (this.manager.isNarrow) return;
+    const hasSingleDataColumn = this.displayDimensions.length === 1 && this.displayDimensions[0].columnDefinitions.length === 1;
+    if (!hasSingleDataColumn) return;
+    const dimension = this.displayDimensions[0];
+    const column = this.displayDimensions[0].columnDefinitions[0];
+    const headerText = this.subheaderText(column, dimension);
+    const values = excludeUndefined(
+      this.displayRows.map(
+        (row) => (row?.values[0]).single
+      )
+    );
+    const accessor = (row) => typeof row.value === "string" ? row.value.length : row.value;
+    const maxValue = _.maxBy(values, accessor);
+    const minValue = _.minBy(values, accessor);
+    const measureWidth = (text) => Bounds.forText(text, { fontSize: 14 }).width;
+    const contentMaxWidth = Math.ceil(
+      Math.max(
+        measureWidth(maxValue?.displayValue ?? "") + 20,
+        // 20px accounts for a possible info icon
+        measureWidth(minValue?.displayValue ?? "") + 20,
+        // 20px accounts for a possible info icon
+        measureWidth(headerText) + 26
+        // 26px accounts for the sort icon
+      )
+    );
+    const minWidth = 0.66 * this.bounds.width;
+    if (minWidth - contentMaxWidth < 320) return;
+    return { minWidth, contentMaxWidth };
+  }
+  get dimensionHeaders() {
+    const { sort } = this.tableState;
+    return this.displayDimensions.map((dim, dimIndex) => {
+      const { coreTableColumn, display } = dim;
+      const singleColumn = dim.columnDefinitions.find(
+        (column) => column.key === PointColumnKey.single
+      );
+      const targetTime = singleColumn?.targetTime;
+      const title = _.upperFirst(display.columnName.title);
+      const titleFragments = joinTitleFragments(
+        display.columnName.attributionShort,
+        display.columnName.titleVariant
+      );
+      const dimensionHeaderText = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "name",
+          title: titleFragments ? `${title} \u2013 ${titleFragments}` : title
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "title-text" }, title, " "),
+        /* @__PURE__ */ React.createElement("span", { className: "title-fragments" }, titleFragments)
+      ), /* @__PURE__ */ React.createElement("div", { className: "description" }, /* @__PURE__ */ React.createElement("span", { className: "unit" }, display.unit), /* @__PURE__ */ React.createElement("span", null, display.unit && targetTime !== void 0 && ","), " ", /* @__PURE__ */ React.createElement("span", { className: "time" }, targetTime !== void 0 && coreTableColumn.formatTime(targetTime))));
+      const onClick = dim.sortable ? () => this.updateSort(dimIndex, PointColumnKey.single) : void 0;
+      const props = {
+        sortable: dim.sortable,
+        sortedCol: dim.sortable && sort.dimIndex === dimIndex,
+        sortOrder: sort.order,
+        onClick,
+        colSpan: dim.columnDefinitions.length,
+        headerText: dimensionHeaderText,
+        colType: "dimension"
+      };
+      return /* @__PURE__ */ React.createElement(ColumnHeader, { key: coreTableColumn.slug, ...props });
+    });
+  }
+  subheaderText(column, dimension) {
+    const col = dimension.coreTableColumn;
+    if (column.key === SparklineKey.sparkline) {
+      const minTime = col.formatTime(this.timelineMinTime);
+      const maxTime = col.formatTime(this.timelineMaxTime);
+      return `${minTime}\u2013${maxTime}`;
+    }
+    return isDeltaColumn(column.key) ? columnNameByType[column.key] : col.formatTime(column.targetTime);
+  }
+  get dimensionSubheaders() {
+    const { sort } = this.tableState;
+    return this.displayDimensions.map(
+      (dim, dimIndex) => dim.columnDefinitions.map((column, colIndex) => {
+        const headerText = this.subheaderText(column, dim);
+        const onClick = column.sortable ? () => this.updateSort(dimIndex, column.key) : void 0;
+        return /* @__PURE__ */ React.createElement(
+          ColumnHeader,
+          {
+            key: column.key,
+            sortable: column.sortable,
+            sortedCol: sort.dimIndex === dimIndex && sort.columnKey === column.key,
+            sortOrder: sort.order,
+            onClick,
+            headerText,
+            colType: "subdimension",
+            classNames: classnames({
+              "subdimension-first": colIndex === 0
+            }),
+            minWidth: this.singleDataColumnStyle?.minWidth,
+            contentMaxWidth: this.singleDataColumnStyle?.contentMaxWidth
+          }
+        );
+      })
+    );
+  }
+  get headerRow() {
+    const { hasDimensionHeaders, hasSubheaders } = this;
+    return hasDimensionHeaders && hasSubheaders ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: "above-entity" }), this.dimensionHeaders), /* @__PURE__ */ React.createElement("tr", null, this.entityHeader, this.dimensionSubheaders)) : /* @__PURE__ */ React.createElement("tr", null, this.entityHeader, hasSubheaders ? this.dimensionSubheaders : this.dimensionHeaders);
+  }
+  renderValueCellContent({
+    columnDefinition,
+    valuesForEntity,
+    formatTime
+  }) {
+    if (!valuesForEntity) return null;
+    if (!(columnDefinition.key in valuesForEntity)) return null;
+    const value = getValueForEntityByKey(
+      valuesForEntity,
+      columnDefinition.key
+    );
+    if (!value) return null;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      ClosestTimeNotice,
+      {
+        value,
+        columnDefinition,
+        formatTime
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, value.displayValue));
+  }
+  renderSparklineCellContent({
+    columnDefinition,
+    valuesForEntity,
+    isProjection
+  }) {
+    if (columnDefinition.key !== SparklineKey.sparkline || !valuesForEntity?.sparkline)
+      return null;
+    const highlights = [];
+    const start = isRangeValue(valuesForEntity) ? valuesForEntity.start : valuesForEntity.single;
+    const startTime = start?.time ?? this.targetTimes?.[0];
+    const end = isRangeValue(valuesForEntity) ? valuesForEntity.end : valuesForEntity.single;
+    const endTime = end?.time ?? this.targetTimes?.[1];
+    if (startTime !== void 0) {
+      const value = typeof start?.value === "string" ? void 0 : start?.value;
+      const showMarker = this.manager.timelineDragTarget === "start" || this.manager.timelineDragTarget === "both";
+      highlights.push({ time: startTime, value, showMarker });
+    }
+    if (endTime !== void 0 && endTime !== startTime) {
+      const value = typeof end?.value === "string" ? void 0 : end?.value;
+      const showMarker = this.manager.timelineDragTarget === "end" || this.manager.timelineDragTarget === "both";
+      highlights.push({ time: endTime, value, showMarker });
+    }
+    return /* @__PURE__ */ React.createElement(
+      Sparkline,
+      {
+        dataRows: valuesForEntity.sparkline,
+        minTime: this.timelineMinTime,
+        maxTime: this.timelineMaxTime,
+        highlights,
+        strokeStyle: isProjection ? "dotted" : "solid"
+      }
+    );
+  }
+  renderEntityRow(row, dimensions) {
+    return /* @__PURE__ */ React.createElement("tr", { key: row.entityName }, /* @__PURE__ */ React.createElement("td", { key: "entity", className: classnames({ entity: true }) }, row.entityName), row.values.map((valuesForEntity, dimIndex) => {
+      const dimension = dimensions[dimIndex];
+      const { isProjection } = dimension.coreTableColumn;
+      return dimension.columnDefinitions.map(
+        (columnDefinition, colIndex) => {
+          const key = `${dimIndex}-${colIndex}`;
+          const formatTime = (time) => dimension.coreTableColumn.formatTime(time);
+          if (columnDefinition.key === SparklineKey.sparkline)
+            return /* @__PURE__ */ React.createElement(
+              ValueCell,
+              {
+                key,
+                columnKey: columnDefinition.key,
+                isFirstColumn: colIndex === 0
+              },
+              this.renderSparklineCellContent({
+                columnDefinition,
+                valuesForEntity,
+                isProjection
+              })
+            );
+          return /* @__PURE__ */ React.createElement(
+            ValueCell,
+            {
+              key,
+              columnKey: columnDefinition.key,
+              isFirstColumn: colIndex === 0,
+              maxWidth: this.singleDataColumnStyle?.contentMaxWidth
+            },
+            this.renderValueCellContent({
+              columnDefinition,
+              valuesForEntity,
+              formatTime
+            })
+          );
+        }
+      );
+    }));
+  }
+  get bounds() {
+    return this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS;
+  }
+  get tableCaption() {
+    if (this.hasDimensionHeaders) return null;
+    if (this.displayDimensions.length === 0) return null;
+    const singleDimension = this.displayDimensions[0];
+    const titleFragments = singleDimension.display.columnName.attributionShort || singleDimension.display.columnName.titleVariant ? joinTitleFragments(
+      singleDimension.display.columnName.attributionShort,
+      singleDimension.display.columnName.titleVariant
+    ) : void 0;
+    return singleDimension ? /* @__PURE__ */ React.createElement("div", { className: "caption" }, singleDimension.display.columnName.title, " ", /* @__PURE__ */ React.createElement("span", { className: "title-fragments" }, titleFragments, singleDimension.display.unit && ` (${singleDimension.display.unit})`)) : null;
+  }
+  renderNoDataModal() {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        width: this.bounds.width,
+        height: this.bounds.height,
+        style: SVG_STYLE_PROPS
+      },
+      /* @__PURE__ */ React.createElement(
+        NoDataModal,
+        {
+          manager: this.manager,
+          bounds: this.bounds,
+          message: `No ${this.entityType} matches this query`,
+          helpText: "Try checking for typos or searching for something else",
+          hideTextOutline: true
+        }
+      )
+    );
+  }
+  render() {
+    if (this.sortedDisplayRows.length === 0) return this.renderNoDataModal();
+    return /* @__PURE__ */ React.createElement("div", { className: "DataTable" }, this.tableCaption, /* @__PURE__ */ React.createElement("div", { className: "table-wrapper" }, /* @__PURE__ */ React.createElement("table", null, /* @__PURE__ */ React.createElement("thead", null, this.headerRow), /* @__PURE__ */ React.createElement("tbody", null, this.sortedDisplayRows.map(
+      (row) => this.renderEntityRow(
+        row,
+        this.displayDimensions
+      )
+    )))));
+  }
+  get loadedWithData() {
+    return this.columnsToShow.length > 0;
+  }
+  get autoSelectedStartTime() {
+    let autoSelectedStartTime = void 0;
+    if (!this.loadedWithData) return void 0;
+    const numEntitiesInTable = this.entityNames.length;
+    this.columnsToShow.forEach((column) => {
+      const numberOfEntitiesWithDataSortedByTime = _.sortBy(
+        Object.entries(R.countBy(column.uniqTimesAsc, R.identity())),
+        ([time, _count]) => parseInt(time)
+      );
+      const firstTimeWithSufficientData = numberOfEntitiesWithDataSortedByTime.find((time) => {
+        const numEntitiesWithData = time[1];
+        const percentEntitiesWithData = numEntitiesWithData / numEntitiesInTable;
+        return percentEntitiesWithData >= this.AUTO_SELECTION_THRESHOLD_PERCENTAGE;
+      })?.[0];
+      if (firstTimeWithSufficientData) {
+        autoSelectedStartTime = parseInt(firstTimeWithSufficientData);
+        return false;
+      }
+      return true;
+    });
+    return autoSelectedStartTime;
+  }
+  get columnsToShow() {
+    const slugs = this.manager.dataTableSlugs ?? [];
+    if (slugs.length)
+      return slugs.map((slug) => {
+        const col = this.table.get(slug);
+        if (!col)
+          console.warn(`Warning: column '${slug}' not found`);
+        return col;
+      }).filter((col) => col);
+    const skips = new Set(Object.keys(ChartsTableSlugs));
+    return this.table.columnsAsArray.filter(
+      (column) => !skips.has(column.slug) && //  dim.property !== "color" &&
+      (column.display?.includeInTable ?? true)
+    );
+  }
+  get availableEntityNames() {
+    return _.union(
+      ...this.columnsToShow.map(
+        (col) => this.table.get(col.slug).uniqEntityNames
+      )
+    );
+  }
+  get fuzzy() {
+    return FuzzySearch.withKey(
+      this.availableEntityNames,
+      (entityName) => entityName
+    );
+  }
+  get entityNames() {
+    if (!this.tableConfig.search) return this.availableEntityNames;
+    return this.fuzzy.search(this.tableConfig.search);
+  }
+  get entityCount() {
+    return this.entityNames.length;
+  }
+  get isSortable() {
+    return this.entityCount > 1;
+  }
+  componentDidMount() {
+    exposeInstanceOnWindow(this, "dataTable");
+  }
+  formatValue(column, value, formattingOverrides) {
+    if (value === void 0) return void 0;
+    return column.formatValueShort(value, {
+      roundingMode: VariableRoundingMode.decimalPlaces,
+      numberAbbreviation: false,
+      trailingZeroes: true,
+      useNoBreakSpace: true,
+      ...formattingOverrides
+    });
+  }
+  get targetTimes() {
+    const { startTime, endTime } = this.manager;
+    if (startTime === void 0 || endTime === void 0) return void 0;
+    if (startTime !== endTime) return [startTime, endTime];
+    return [endTime];
+  }
+  getTargetTimesForColumn(coreTableColumn) {
+    if (coreTableColumn.def.targetTime !== void 0)
+      return [coreTableColumn.def.targetTime];
+    if (this.targetTimes !== void 0) return this.targetTimes;
+    return [coreTableColumn.maxTime];
+  }
+  get dataTableDimensionsWithValues() {
+    return this.columnsToShow.map((coreTableColumn) => {
+      const targetTimes = this.getTargetTimesForColumn(coreTableColumn);
+      const targetTimeMode = targetTimes.length < 2 ? TargetTimeMode.point : TargetTimeMode.range;
+      const targetValuesByEntity = this.interpolateTargetValues({
+        coreTableColumn,
+        targetTimes
+      });
+      const valuesByEntityName = this.calculateDataValuesForTargetTimeMode({
+        targetValuesByEntity,
+        coreTableColumn,
+        targetTimeMode
+      });
+      if (this.columnHasSparkline(coreTableColumn)) {
+        for (const [entityName, values] of valuesByEntityName) {
+          values.sparkline = coreTableColumn.dataRowsByEntityName.get(entityName);
+        }
+      }
+      const columnDefinitions = this.constructColumnDefinitions({
+        coreTableColumn,
+        targetTimes,
+        targetTimeMode
+      });
+      return { columnDefinitions, valuesByEntityName, coreTableColumn };
+    });
+  }
+  columnHasSparkline(coreTableColumn) {
+    return this.timelineMinTime !== void 0 && this.timelineMaxTime !== void 0 && this.timelineMinTime !== this.timelineMaxTime && coreTableColumn.hasNumberFormatting && // For columns with a target time, the data table is fixed at that time.
+    // It thus doesn't make sense to show a sparkline
+    coreTableColumn.def.targetTime === void 0;
+  }
+  constructColumnDefinitions({
+    coreTableColumn,
+    targetTimes,
+    targetTimeMode
+  }) {
+    const deltaColumns = [];
+    if (coreTableColumn.hasNumberFormatting) {
+      if (targetTimeMode === TargetTimeMode.range) {
+        const { tableDisplay = {} } = coreTableColumn.display ?? {};
+        if (!tableDisplay.hideAbsoluteChange)
+          deltaColumns.push({
+            key: RangeColumnKey.delta,
+            sortable: this.isSortable
+          });
+        if (!tableDisplay.hideRelativeChange)
+          deltaColumns.push({
+            key: RangeColumnKey.deltaRatio,
+            sortable: this.isSortable
+          });
+      }
+    }
+    const valueColumns = targetTimes.map(
+      (targetTime, index) => ({
+        key: targetTimeMode === TargetTimeMode.range ? index === 0 ? RangeColumnKey.start : RangeColumnKey.end : PointColumnKey.single,
+        targetTime,
+        sortable: this.isSortable
+      })
+    );
+    const sparklineColumn = this.columnHasSparkline(coreTableColumn) ? { key: SparklineKey.sparkline, sortable: false } : void 0;
+    return excludeUndefined([
+      ...valueColumns,
+      sparklineColumn,
+      ...deltaColumns
+    ]);
+  }
+  interpolateTargetValues({
+    coreTableColumn,
+    targetTimes
+  }) {
+    return valuesByEntityAtTimes(
+      coreTableColumn.valueByEntityNameAndOriginalTime,
+      targetTimes,
+      coreTableColumn.tolerance
+    );
+  }
+  calculateDataValuesForTargetTimeMode({
+    targetValuesByEntity,
+    targetTimeMode,
+    coreTableColumn
+  }) {
+    return es6mapValues(targetValuesByEntity, (dvs) => {
+      if (targetTimeMode === TargetTimeMode.range) {
+        const [start, end] = dvs;
+        const result = {
+          start: {
+            ...start,
+            displayValue: this.formatValue(
+              coreTableColumn,
+              start?.value
+            )
+          },
+          end: {
+            ...end,
+            displayValue: this.formatValue(
+              coreTableColumn,
+              end?.value
+            )
+          },
+          delta: void 0,
+          deltaRatio: void 0
+        };
+        if (start !== void 0 && end !== void 0 && typeof start.value === "number" && typeof end.value === "number" && // sanity check: start time should always be <= end time
+        start.time !== void 0 && end.time !== void 0 && start.time <= end.time) {
+          const deltaValue = end.value - start.value;
+          const deltaRatioValue = deltaValue / Math.abs(start.value);
+          result.delta = {
+            value: deltaValue,
+            displayValue: this.formatValue(
+              coreTableColumn,
+              deltaValue,
+              {
+                showPlus: true,
+                unit: coreTableColumn.shortUnit === "%" ? "pp" : coreTableColumn.shortUnit
+              }
+            )
+          };
+          result.deltaRatio = {
+            value: deltaRatioValue,
+            displayValue: isFinite(deltaRatioValue) && !isNaN(deltaRatioValue) ? this.formatValue(
+              coreTableColumn,
+              deltaRatioValue * 100,
+              {
+                unit: "%",
+                numDecimalPlaces: 0,
+                showPlus: true
+              }
+            ) : void 0
+          };
+        }
+        return result;
+      } else {
+        const dv = dvs[0];
+        const result = {
+          single: { ...dv }
+        };
+        if (dv !== void 0)
+          result.single.displayValue = this.formatValue(
+            coreTableColumn,
+            dv.value
+          );
+        return result;
+      }
+    });
+  }
+  get displayDimensions() {
+    return this.dataTableDimensionsWithValues.map((d) => {
+      const coreTableColumn = d.coreTableColumn;
+      const columnName = coreTableColumn.titlePublicOrDisplayName;
+      const unit = coreTableColumn.unit === "%" ? "percent" : coreTableColumn.unit;
+      return {
+        coreTableColumn,
+        columnDefinitions: d.columnDefinitions,
+        display: { columnName, unit },
+        sortable: !this.hasSubheaders
+      };
+    });
+  }
+  get displayRows() {
+    return this.entityNames.map((entityName) => {
+      return {
+        entityName,
+        values: this.dataTableDimensionsWithValues.map(
+          (d) => d.valuesByEntityName.get(entityName)
+        )
+      };
+    });
+  }
+  get sortedDisplayRows() {
+    const { order } = this.tableState.sort;
+    return _.orderBy(this.displayRows, this.sortValueMapper, order);
+  }
+};
+__decorateClass([
+  computed
+], DataTable.prototype, "manager", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "selectionArray", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "tableConfig", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "timelineMinTime", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "timelineMaxTime", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "table", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "tableState", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "sortState", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "entityType", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "sortValueMapper", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "hasSubheaders", 1);
+__decorateClass([
+  action.bound
+], DataTable.prototype, "updateSort", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "hasDimensionHeaders", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "singleDataColumnStyle", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "bounds", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "tableCaption", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "loadedWithData", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "autoSelectedStartTime", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "columnsToShow", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "availableEntityNames", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "fuzzy", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "entityNames", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "entityCount", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "isSortable", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "targetTimes", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "dataTableDimensionsWithValues", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "displayDimensions", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "displayRows", 1);
+__decorateClass([
+  computed
+], DataTable.prototype, "sortedDisplayRows", 1);
+DataTable = __decorateClass([
+  observer
+], DataTable);
+function ColumnHeader(props) {
+  const { sortable, sortedCol, colType } = props;
+  const isEntityColumn = colType === "entity";
+  const sortIcon = sortable && /* @__PURE__ */ React.createElement(
+    SortIcon,
+    {
+      isActiveIcon: sortedCol,
+      order: sortedCol ? props.sortOrder : isEntityColumn ? SortOrder.asc : SortOrder.desc
+    }
+  );
+  return /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      className: classnames(props.classNames, colType, { sortable }),
+      rowSpan: props.rowSpan ?? 1,
+      colSpan: props.colSpan ?? 1,
+      onClick: props.onClick,
+      style: { minWidth: props.minWidth }
+    },
+    /* @__PURE__ */ React.createElement(CellContent, { maxWidth: props.contentMaxWidth }, /* @__PURE__ */ React.createElement("div", { className: "content" }, !isEntityColumn && sortIcon, /* @__PURE__ */ React.createElement("span", null, props.headerText), isEntityColumn && sortIcon))
+  );
+}
+function CellContent(props) {
+  if (!props.maxWidth) return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+  return /* @__PURE__ */ React.createElement("div", { style: { maxWidth: props.maxWidth } }, props.children);
+}
+function ValueCell(props) {
+  const className = classnames([
+    "cell",
+    `cell-${props.columnKey}`,
+    { "cell-first": props.isFirstColumn }
+  ]);
+  return /* @__PURE__ */ React.createElement("td", { className }, /* @__PURE__ */ React.createElement(CellContent, { maxWidth: props.maxWidth }, props.children));
+}
+function SortIcon(props) {
+  const isActiveIcon = props.isActiveIcon ?? false;
+  const activeIcon = props.order === SortOrder.desc ? faArrowUpLong : faArrowDownLong;
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: classnames({ "sort-icon": true, active: isActiveIcon })
+    },
+    isActiveIcon ? /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: activeIcon }) : /* @__PURE__ */ React.createElement("span", { style: { display: "inline-block", width: "max-content" } }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faArrowUpLong }), /* @__PURE__ */ React.createElement(
+      FontAwesomeIcon,
+      {
+        icon: faArrowDownLong,
+        style: { marginLeft: "-2px" }
+      }
+    ))
+  );
+}
+function ClosestTimeNotice({
+  value,
+  columnDefinition,
+  formatTime
+}) {
+  const shouldShowClosestTimeNotice = !isDeltaColumn(columnDefinition.key) && columnDefinition.targetTime !== value.time;
+  if (value.time === void 0 || columnDefinition.targetTime === void 0 || !shouldShowClosestTimeNotice)
+    return null;
+  const targetTime = formatTime(columnDefinition.targetTime);
+  const closestTime = formatTime(value.time);
+  return /* @__PURE__ */ React.createElement(
+    Tippy,
+    {
+      content: /* @__PURE__ */ React.createElement("div", { className: "closest-time-notice-tippy" }, /* @__PURE__ */ React.createElement("strong", null, "Data not available for ", targetTime), /* @__PURE__ */ React.createElement("br", null), "Showing closest available data point (", closestTime, ")"),
+      arrow: false
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "closest-time-notice-icon" }, /* @__PURE__ */ React.createElement("span", { className: "icon" }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faInfoCircle })))
+  );
+}
+function Sparkline({
+  width = 75,
+  height = 18,
+  dataRows,
+  minTime,
+  maxTime,
+  highlights = [],
+  dotSize = 3.5,
+  color = "#4C6A9C",
+  strokeStyle = "solid"
+}) {
+  if (dataRows.length <= 1) return null;
+  const bounds = new Bounds(0, 0, width, height).padWidth(dotSize);
+  const xDomain = [minTime, maxTime];
+  const xScale = scaleLinear().domain(xDomain).range([bounds.left, bounds.right]);
+  const yDomain = extent(dataRows.map((row) => row.value));
+  const yScale = scaleLinear().domain(yDomain).range([bounds.bottom, bounds.top]);
+  const makePath = line().x((row) => xScale(row.originalTime)).y((row) => yScale(row.value));
+  const path = makePath(dataRows);
+  if (!path) return null;
+  const strokeDasharray = strokeStyle === "dotted" ? "2,3" : void 0;
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      style: { overflow: "visible" }
+    },
+    highlights.filter((highlight) => highlight.showMarker).map((highlight) => /* @__PURE__ */ React.createElement(
+      "line",
+      {
+        key: highlight.time,
+        x1: xScale(highlight.time),
+        x2: xScale(highlight.time),
+        y1: 0,
+        y2: height,
+        stroke: GRAY_30
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: path,
+        stroke: color,
+        fill: "none",
+        strokeWidth: 1.5,
+        strokeDasharray
+      }
+    ),
+    highlights.filter((highlight) => highlight.value !== void 0).map((highlight) => /* @__PURE__ */ React.createElement(
+      "circle",
+      {
+        key: highlight.time,
+        cx: xScale(highlight.time),
+        cy: yScale(highlight.value),
+        r: dotSize,
+        fill: color,
+        stroke: "#fff"
+      }
+    ))
+  );
+}
+function getValueForEntityByKey(dimensionValue, columnKey) {
+  if (isSingleValue(dimensionValue)) {
+    return dimensionValue[columnKey];
+  } else if (isRangeValue(dimensionValue)) {
+    return dimensionValue[columnKey];
+  }
+  return void 0;
+}
+function isRangeColumnKey(key) {
+  return Object.values(RangeColumnKey).includes(key);
+}
+function isRangeValue(value) {
+  return "start" in value;
+}
+function isSingleValue(value) {
+  return "single" in value;
+}
+function isDeltaColumn(columnKey) {
+  return columnKey === "delta" || columnKey === "deltaRatio";
+}
+function isCommonDataTableFilter(candidate) {
+  return COMMON_DATA_TABLE_FILTERS.includes(candidate);
+}
+function isValidDataTableFilter(candidate) {
+  return isCommonDataTableFilter(candidate) || isEntityRegionType(candidate);
+}
+export {
+  DataTable,
+  isValidDataTableFilter
+};