@buildcanada/charts 0.1.0

package/src/grapher/dataTable/DataTable.sample.ts

@@ -0,0 +1,206 @@
+import { DimensionProperty } from "../../utils/index.js"
+import { GrapherState } from "../core/GrapherState"
+import {
+    GRAPHER_TAB_CONFIG_OPTIONS,
+    GrapherInterface,
+} from "../../types/index.js"
+import {
+    TestMetadata,
+    createOwidTestDataset,
+    fakeEntities,
+} from "../testData/OwidTestData"
+import { legacyToOwidTableAndDimensionsWithMandatorySlug } from "../core/LegacyToOwidTable.js"
+
+export const childMortalityGrapher = (
+    props: Partial<GrapherInterface> = {}
+): GrapherState => {
+    const childMortalityId = 104402
+    const childMortalityMetadata: TestMetadata = {
+        id: childMortalityId,
+        display: {
+            name: "Child mortality",
+            unit: "%",
+            shortUnit: "%",
+            conversionFactor: 0.1,
+        },
+    }
+    const childMortalityData = [
+        { year: 1950, entity: fakeEntities.Afghanistan, value: 224.45 },
+        { year: 1950, entity: fakeEntities.Iceland, value: 333.68 },
+
+        { year: 2005, entity: fakeEntities.Afghanistan, value: 295.59 },
+        { year: 2005, entity: fakeEntities.Iceland, value: 246.12 },
+
+        { year: 2019, entity: fakeEntities.Afghanistan, value: 215.59 },
+        { year: 2019, entity: fakeEntities.Iceland, value: 226.12 },
+    ]
+    const dimensions = [
+        {
+            variableId: childMortalityId,
+            property: DimensionProperty.y,
+        },
+    ]
+    const owidDataset = createOwidTestDataset([
+        {
+            metadata: childMortalityMetadata,
+            data: childMortalityData,
+        },
+    ])
+    const state = new GrapherState({
+        hasMapTab: true,
+        tab: GRAPHER_TAB_CONFIG_OPTIONS.map,
+        dimensions,
+        ...props,
+    })
+    state.inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug(
+        owidDataset,
+        dimensions,
+        {}
+    )
+    return state
+}
+
+export const GrapherWithIncompleteData = (
+    props: Partial<GrapherInterface> = {}
+): GrapherState => {
+    const indicatorId = 3512
+    const metadata = { id: indicatorId, shortUnit: "%" }
+    const data = [
+        { year: 2000, entity: fakeEntities.Iceland, value: 4 },
+        { year: 2001, entity: fakeEntities.France, value: 22 },
+        { year: 2010, entity: fakeEntities.Afghanistan, value: 20 },
+        { year: 2009, entity: fakeEntities.Iceland, value: 34 },
+    ]
+    const dimensions = [
+        {
+            variableId: indicatorId,
+            property: DimensionProperty.y,
+            display: {
+                name: "",
+                unit: "% of children under 5",
+                tolerance: 1,
+                isProjection: false,
+            },
+        },
+        {
+            variableId: indicatorId,
+            property: DimensionProperty.x,
+            targetYear: 2010,
+            display: {
+                name: "Children in 2010",
+                unit: "% of children under 5",
+                tolerance: 1,
+                isProjection: false,
+            },
+        },
+    ]
+    const inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug(
+        createOwidTestDataset([{ metadata, data }]),
+        dimensions,
+        {}
+    )
+    return new GrapherState({
+        tab: GRAPHER_TAB_CONFIG_OPTIONS.table,
+        selectedEntityNames: ["Iceland", "France", "Afghanistan"],
+        dimensions,
+        ...props,
+        table: inputTable,
+    })
+}
+
+export const GrapherWithAggregates = (
+    props: Partial<GrapherInterface> = {}
+): GrapherState => {
+    const childMortalityId = 104402
+    const childMortalityMetadata: TestMetadata = {
+        id: childMortalityId,
+        display: {
+            name: "Child mortality",
+            unit: "%",
+            shortUnit: "%",
+            conversionFactor: 0.1,
+        },
+    }
+    const childMortalityData = [
+        { year: 1950, entity: fakeEntities.Afghanistan, value: 224.45 },
+        { year: 1950, entity: fakeEntities.Iceland, value: 333.68 },
+        { year: 1950, entity: fakeEntities.World, value: 456.33 },
+
+        { year: 2005, entity: fakeEntities.Afghanistan, value: 295.59 },
+        { year: 2005, entity: fakeEntities.Iceland, value: 246.12 },
+        { year: 2005, entity: fakeEntities.World, value: 298.87 },
+
+        { year: 2019, entity: fakeEntities.Afghanistan, value: 215.59 },
+        { year: 2019, entity: fakeEntities.Iceland, value: 226.12 },
+        { year: 2019, entity: fakeEntities.World, value: 450.87 },
+    ]
+    const dimensions = [
+        {
+            variableId: childMortalityId,
+            property: DimensionProperty.y,
+        },
+    ]
+    const inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug(
+        createOwidTestDataset([
+            { metadata: childMortalityMetadata, data: childMortalityData },
+        ]),
+        dimensions,
+        {}
+    )
+    return new GrapherState({
+        tab: GRAPHER_TAB_CONFIG_OPTIONS.table,
+        dimensions,
+        selectedEntityNames: ["Afghanistan", "Iceland", "World"],
+        ...props,
+        table: inputTable,
+    })
+}
+
+export const GrapherWithMultipleVariablesAndMultipleYears = (
+    props: Partial<GrapherInterface> = {}
+): GrapherState => {
+    const abovePovertyLineId = 514050
+    const belowPovertyLineId = 472265
+
+    const dimensions = [
+        {
+            variableId: abovePovertyLineId,
+            property: DimensionProperty.y,
+        },
+        {
+            variableId: belowPovertyLineId,
+            property: DimensionProperty.y,
+        },
+    ]
+
+    const abovePovertyLineDataset = {
+        metadata: { id: abovePovertyLineId },
+        data: [
+            { year: 1950, entity: fakeEntities.World, value: 10 },
+            { year: 2005, entity: fakeEntities.World, value: 20 },
+            { year: 2019, entity: fakeEntities.World, value: 30 },
+        ],
+    }
+    const belowPovertyLineDataset = {
+        metadata: { id: belowPovertyLineId },
+        data: [
+            { year: 1950, entity: fakeEntities.World, value: 5 },
+            { year: 2005, entity: fakeEntities.World, value: 15 },
+            { year: 2019, entity: fakeEntities.World, value: 10 },
+        ],
+    }
+    const inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug(
+        createOwidTestDataset([
+            abovePovertyLineDataset,
+            belowPovertyLineDataset,
+        ]),
+        dimensions,
+        {}
+    )
+    return new GrapherState({
+        tab: GRAPHER_TAB_CONFIG_OPTIONS.table,
+        dimensions,
+        ...props,
+        table: inputTable,
+    })
+}

package/src/grapher/dataTable/DataTable.scss

@@ -0,0 +1,249 @@
+.DataTableContainer {
+    $cell-border: 1px solid $gray-10;
+
+    // header
+    $header: $gray-5;
+    $header-hover: $gray-20;
+
+    // rows
+    $light-fill: $gray-5;
+    $hover-fill: #f0f0f0;
+    $dark-fill: $gray-20;
+
+    // closest time notice
+    $info-icon: $gray-30;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $dark-text;
+    font-size: 0.875em;
+
+    .DataTable {
+        width: 100%;
+        height: 100%;
+        display: flex; // necessary to make .table-wrapper scrollable
+        flex-direction: column;
+
+        .caption {
+            flex-shrink: 0;
+            font-weight: 700;
+            padding-top: 2px;
+            padding-bottom: 14px;
+
+            .title-fragments {
+                color: $light-text;
+                font-weight: 500;
+            }
+        }
+
+        .table-wrapper {
+            overflow: auto;
+            border: $cell-border;
+        }
+
+        .title-fragments {
+            color: $light-text;
+            font-weight: 500;
+        }
+    }
+
+    table {
+        line-height: 1.333em;
+        border: none;
+        background: white;
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0px;
+
+        // make header sticky
+        thead {
+            position: sticky;
+            z-index: 20;
+            top: 0;
+        }
+
+        // make entity column and entity header sticky
+        .entity,
+        .above-entity {
+            position: sticky;
+            left: 0;
+            z-index: 10;
+            background-color: #fff;
+        }
+
+        th.entity,
+        th.above-entity {
+            top: 0;
+            background-color: $header;
+        }
+
+        // make title row sticky
+        tr.title td:first-child {
+            position: sticky;
+            left: 0;
+            z-index: 10;
+        }
+
+        // applies to all cells
+        th,
+        td {
+            padding: 8px 16px;
+            white-space: nowrap;
+
+            &:not(.entity) {
+                vertical-align: bottom;
+                text-align: right;
+            }
+        }
+
+        // adds border on the right of the entity column
+        .entity,
+        .above-entity {
+            border-right: $cell-border;
+        }
+
+        // adds a border on the right of each dimension column
+        tr > th.dimension ~ th.dimension,
+        tr > th.subdimension-first ~ th.subdimension-first,
+        tr > td.cell-first ~ td.cell-first {
+            border-left: $cell-border;
+        }
+
+        thead {
+            th {
+                background-color: $header;
+                line-height: 19px;
+                border-bottom: $cell-border;
+                font-weight: 700;
+                vertical-align: bottom;
+
+                &.dimension,
+                &.entity,
+                &.subdimension {
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                }
+
+                &.dimension {
+                    text-align: left;
+
+                    .name {
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        line-clamp: 2;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        font-weight: 500;
+                        color: $light-text;
+
+                        .title-text {
+                            font-weight: 700;
+                            color: $dark-text;
+                        }
+                    }
+
+                    .title-fragments {
+                        text-wrap: auto;
+                    }
+
+                    .description {
+                        color: $dark-text;
+                        text-align: left;
+                        font-weight: 500;
+                    }
+                }
+            }
+
+            th.sortable {
+                cursor: pointer;
+
+                &:hover {
+                    background-color: $header-hover;
+                    border-color: $header-hover;
+                }
+
+                .content {
+                    display: flex;
+                    align-items: start;
+                    justify-content: flex-end;
+                    gap: 6px;
+                }
+
+                &.entity .content {
+                    justify-content: flex-start;
+                }
+
+                .sort-icon {
+                    color: $gray-50;
+                    font-size: 13px;
+                    width: 19px; // keeps column widths fixed when sorting
+                    text-align: right;
+
+                    &.active {
+                        color: $dark-text !important;
+                    }
+                }
+
+                &:hover .sort-icon {
+                    color: $gray-60;
+                }
+            }
+        }
+
+        tbody {
+            // alternating row colors
+            tr:not(.title):nth-child(2n) td {
+                background-color: $light-fill;
+            }
+
+            td.entity {
+                white-space: normal;
+            }
+
+            tr:not(.title):hover td {
+                background-color: $hover-fill !important;
+            }
+
+            tr.title td {
+                text-align: left;
+                background-color: $dark-fill;
+                font-weight: 700;
+            }
+
+            .closest-time-notice-icon {
+                cursor: default;
+
+                .icon {
+                    line-height: 12px;
+                    font-size: 12px;
+                    color: $info-icon;
+                }
+
+                & + span {
+                    margin-left: 6px;
+                }
+            }
+        }
+    }
+}
+
+&.GrapherComponentMedium {
+    .DataTable .caption {
+        padding-top: 4px;
+        padding-bottom: 8px;
+    }
+}
+
+&.GrapherComponentNarrow {
+    .DataTable .caption {
+        padding-bottom: 4px;
+    }
+}
+
+.closest-time-notice-tippy {
+    max-width: 208px;
+    text-align: center;
+    padding: 4px;
+}