@buildcanada/charts 0.1.0

package/src/grapher/dataTable/DataTableConstants.ts

@@ -0,0 +1,186 @@
+import { CoreColumn, OwidTable } from "../../core-table/index.js"
+import {
+    ColumnSlug,
+    EntityName,
+    IndicatorTitleWithFragments,
+    OwidVariableRow,
+    SortOrder,
+    Time,
+} from "../../types/index.js"
+import {
+    EntityNamesByRegionType,
+    EntityRegionType,
+} from "../core/EntitiesByRegionType"
+import { SelectionArray } from "../selection/SelectionArray"
+import { TimelineDragTarget } from "../timeline/TimelineController"
+
+// Grapher's rendered data table is organized into groups, where
+// each group corresponds to an indicator from the core table.
+// Each indicator group contains a set of columns, depending on
+// the current time selection:
+// - Single time selection: one column per indicator showing the value
+// - Start and end time selection: two to four columns per indicator, including
+//   start value, end value, and optionally absolute change and relative change
+//   columns
+
+export interface DataTableManager {
+    table: OwidTable // not used here, but required in type `ChartManager`
+    filteredTableForDisplay: OwidTable
+    entityType?: string
+    endTime?: Time
+    startTime?: Time
+    dataTableSlugs?: ColumnSlug[]
+    isNarrow?: boolean
+    dataTableConfig: DataTableConfig
+    dataTableSelection?: SelectionArray | EntityName[]
+    entityNamesByRegionType?: EntityNamesByRegionType
+    timelineDragTarget?: TimelineDragTarget
+    closestTimelineMinTime?: Time
+    closestTimelineMaxTime?: Time
+}
+
+/**
+ * DataTableDimension represents an indicator from the core table that is
+ * displayed in the data table as a group with one or more columns.
+ *
+ * A DataTableDimension contains:
+ * - columnDefinitions: Defines which columns to display for this indicator
+ *   (e.g., start/end columns, change columns)
+ * - valuesByEntityName: The actual data for each column, grouped by entity
+ * - coreTableColumn: Reference to the original indicator from the core table
+ */
+export interface DataTableDimension {
+    columnDefinitions: DataTableColumnDefinition[]
+    valuesByEntityName: Map<EntityName, DataTableValuesForEntity>
+    coreTableColumn: CoreColumn
+}
+
+/**
+ * DisplayDataTableDimension represents an indicator from the core table that is
+ * displayed in the data table as a group with one or more columns. Unlike
+ * DataTableDimension, it doesn't contain the actual data values but only the
+ * metadata needed for display purposes.
+ */
+export interface DisplayDataTableDimension
+    extends Omit<DataTableDimension, "valuesByEntityName"> {
+    sortable: boolean
+    display: { columnName: IndicatorTitleWithFragments; unit?: string }
+}
+
+/**
+ * DataTableColumnDefinition defines the configuration for a single column
+ * within a data table dimension. It specifies which type of data should be
+ * displayed (e.g., start/end values or absolute/relative change).
+ */
+export interface DataTableColumnDefinition {
+    key: DataTableColumnKey
+    targetTime?: Time
+    sortable: boolean
+}
+
+/**
+ * DataTableRow represents a single row in the data table, corresponding to
+ * one entity. It contains the entity name and an array of data table values,
+ * where each element maps to a data table dimension.
+ */
+export interface DataTableRow {
+    entityName: EntityName
+    values: (DataTableValuesForEntity | undefined)[] // TODO make it not undefined
+}
+
+/**
+ * TargetTimeMode determines how time selection affects the data table display.
+ * - point: Single time selection, showing one value per indicator
+ * - range: Time range selection, showing start/end values and absolute/relative change
+ */
+export enum TargetTimeMode {
+    point = "point",
+    range = "range",
+}
+
+export enum SparklineKey {
+    sparkline = "sparkline",
+}
+
+/**
+ * PointColumnKey defines the available column types when displaying single
+ * time point data. Used when TargetTimeMode is set to 'point'.
+ * - single: The data value for the selected time
+ */
+export enum PointColumnKey {
+    single = "single",
+}
+
+/**
+ * RangeColumnKey defines the available column types when displaying time
+ * range data. Used when TargetTimeMode is set to 'range'.
+ * - start: Value at the beginning of the time range
+ * - end: Value at the end of the time range
+ * - delta: Absolute change between start and end values
+ * - deltaRatio: Relative change between start and end values
+ */
+export enum RangeColumnKey {
+    start = "start",
+    end = "end",
+    delta = "delta",
+    deltaRatio = "deltaRatio",
+}
+
+/**
+ * PointValuesForEntity holds data for a single entity within a data table dimension
+ * when TargetTimeMode is set to 'point' (single time selection).
+ */
+export type PointValuesForEntity = Partial<
+    Record<PointColumnKey, MinimalOwidRow> &
+        Record<SparklineKey, OwidVariableRow<number>[]>
+>
+
+/**
+ * RangeValuesForEntity holds data for a single entity within a data table dimension
+ * when TargetTimeMode is set to 'range' (time range selection). This includes
+ * start and end values and absolute and relative change columns.
+ */
+export type RangeValuesForEntity = Partial<
+    Record<RangeColumnKey, MinimalOwidRow> &
+        Record<SparklineKey, OwidVariableRow<number>[]>
+>
+
+export type DataTableValuesForEntity =
+    | PointValuesForEntity
+    | RangeValuesForEntity
+
+export type DataTableColumnKey = PointColumnKey | RangeColumnKey | SparklineKey
+
+export interface MinimalOwidRow {
+    value?: string | number
+    displayValue?: string
+    time?: Time
+}
+
+export const COMMON_DATA_TABLE_FILTERS = ["all", "selection"] as const
+export type CommonDataTableFilter = (typeof COMMON_DATA_TABLE_FILTERS)[number]
+
+export type DataTableFilter = CommonDataTableFilter | EntityRegionType
+
+export interface DataTableConfig {
+    filter: DataTableFilter
+    search: string
+}
+
+export interface DataTableState {
+    sort: DataTableSortState
+}
+
+export interface DataTableSortState {
+    dimIndex: DimensionSortIndex
+    columnKey: DataTableColumnKey | undefined
+    order: SortOrder
+}
+
+export type DimensionSortIndex = number
+
+export interface SparklineHighlight {
+    time: Time
+    value?: number
+    showMarker?: boolean
+}

package/src/grapher/entitySelector/EntitySelector.scss

@@ -0,0 +1,255 @@
+.entity-selector {
+    --padding: var(--modal-padding, 16px);
+
+    $sort-button-size: 32px;
+    $sort-button-margin: 8px;
+
+    color: $dark-text;
+
+    // necessary for scrolling
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    > * {
+        flex-shrink: 0;
+    }
+
+    .scrollable {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        width: 100%;
+        position: relative;
+    }
+
+    .entity-selector__search-bar {
+        padding: 0 var(--padding) 8px var(--padding);
+    }
+
+    .entity-selector__sort-bar {
+        padding: 0 var(--padding);
+        margin-top: 8px;
+        margin-bottom: 16px;
+
+        .entity-selector__sort-dropdown-and-button {
+            display: flex;
+            align-items: center;
+        }
+
+        .entity-selector__sort-dropdown {
+            flex-grow: 1;
+
+            .control .label svg {
+                transform: rotate(-90deg);
+            }
+        }
+
+        button.sort {
+            flex-shrink: 0;
+            margin-left: $sort-button-margin;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            position: relative;
+            height: $sort-button-size;
+            width: $sort-button-size;
+            padding: 7px;
+
+            color: $dark-text;
+            background: $gray-10;
+            border: none;
+            border-radius: 4px;
+
+            svg {
+                height: 14px;
+                width: 14px;
+            }
+
+            &:hover:not(:disabled) {
+                background: $gray-20;
+                cursor: pointer;
+            }
+
+            &:active:not(:disabled) {
+                color: $blue-90;
+                background: $blue-20;
+                border: 1px solid $blue-20;
+            }
+
+            &:disabled {
+                background: $gray-10;
+                color: $gray-60;
+            }
+        }
+    }
+
+    .entity-selector__sort-dropdown-menu {
+        // Make the sort dropdown menu span the full width of the sort bar.
+        width: calc(
+            var(--trigger-width) + $sort-button-margin + $sort-button-size
+        );
+    }
+
+    .entity-selector__filter-bar {
+        margin-top: 16px;
+        margin-bottom: 8px;
+    }
+
+    .entity-selector__content {
+        $row-border: 1px solid $gray-10;
+
+        margin: 0 var(--padding) 8px var(--padding);
+
+        .entity-section + .entity-section {
+            margin-top: 16px;
+        }
+
+        .entity-section__header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            button {
+                background: none;
+                border: none;
+                color: $dark-text;
+                font-size: 13px;
+                font-weight: 500;
+                letter-spacing: 0.01em;
+                text-decoration-line: underline;
+                text-underline-offset: 3px;
+                cursor: pointer;
+                margin-bottom: 8px;
+
+                &:hover {
+                    text-decoration: none;
+                }
+
+                &:active {
+                    background: $gray-5;
+                }
+
+                &:disabled {
+                    color: $gray-50;
+                    text-decoration: none;
+                    cursor: default;
+                }
+            }
+        }
+
+        .entity-section__title {
+            letter-spacing: 0.01em;
+            margin-bottom: 8px;
+        }
+
+        .entity-search-results {
+            margin-top: 8px;
+        }
+
+        .selectable-entity {
+            display: flex;
+            justify-content: space-between;
+
+            .checkbox,
+            .radio {
+                width: 100%;
+            }
+
+            label {
+                display: block;
+                padding: 9px 8px 9px 16px;
+                cursor: pointer;
+            }
+
+            .custom,
+            .outer {
+                left: 16px;
+                top: 9px;
+            }
+
+            &:hover {
+                background: rgba(219, 229, 240, 0.4);
+
+                .value {
+                    color: $gray-80;
+                }
+            }
+
+            &--muted {
+                opacity: 0.4;
+            }
+
+            &--with-bar:hover {
+                background: rgba(219, 229, 240, 0.6);
+            }
+
+            .value {
+                color: $gray-70;
+                white-space: nowrap;
+                margin-left: 12px;
+                padding-top: 9px;
+                padding-right: 8px;
+            }
+
+            .bar {
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                background: $blue-10;
+                z-index: -1;
+            }
+
+            .label-with-location-icon {
+                &--no-line-break {
+                    white-space: nowrap;
+                }
+
+                svg {
+                    margin-left: 6px;
+                    font-size: 0.9em;
+                    color: $gray-60;
+
+                    // hide focus outline when clicked
+                    &:focus:not(:focus-visible) {
+                        outline: none;
+                    }
+                }
+            }
+        }
+
+        li {
+            position: relative;
+            z-index: 0;
+            background: #fff;
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+        }
+
+        // add borders in between elements
+        li + li .selectable-entity {
+            border-top: $row-border;
+        }
+
+        // add a top border to the first element
+        li:first-of-type .selectable-entity {
+            border-top: $row-border;
+        }
+
+        // add a bottom border to the last element
+        li:last-of-type .selectable-entity {
+            border-bottom: $row-border;
+        }
+
+        // make an exception for the top border if requested
+        .hide-top-border li:first-of-type .selectable-entity {
+            border-top: none;
+        }
+    }
+}