@buildcanada/charts 0.1.0 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@buildcanada/charts",
-  "version": "0.1.0",
-  "description": "A configurable data visualization library for creating interactive charts. Extracted from Our World in Data's Grapher.",
+  "version": "0.2.0",
+  "description": "A configurable data visualization library for creating interactive charts.",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,16 +32,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "engines": {
-    "node": ">=22.0"
-  },
   "scripts": {
-    "build": "storybook build -o storybook-static",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "storybook": "storybook dev -p 6006",
-    "serve-storybook": "serve storybook-static -p 6006"
+    "test:watch": "vitest"
   },
   "keywords": [
     "charts",
@@ -70,6 +64,7 @@
     "classnames": "^2.5.1",
     "colorbrewer": "^1.3.0",
     "d3": "^7.9.0",
+    "d3-transition": "^3.0.1",
     "dayjs": "^1.11.11",
     "fparser": "^3.1.0",
     "fuzzysort": "^3.1.0",
@@ -99,9 +94,7 @@
     "versor": "^0.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/react": "^10.1.11",
-    "@storybook/react-vite": "^10.1.11",
+    "@storybook/react-dom-shim": "^10.1.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -113,25 +106,17 @@
     "@types/lodash-es": "^4",
     "@types/mousetrap": "^1.6.9",
     "@types/papaparse": "^5.3.16",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
     "@types/string-pixel-width": "^1.7.2",
     "@types/topojson-client": "^3.1.1",
     "@types/url-parse": "^1.4.8",
-    "@vitejs/plugin-react": "^5.1.1",
+    "debug": "^4.4.3",
     "eslint": "^9.37.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "happy-dom": "^20.1.0",
     "jsdom": "^27.4.0",
-    "mobx": "^6.13.7",
-    "mobx-react": "^7.6.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "sass": "^1.77.0",
-    "serve": "^14.2.5",
-    "storybook": "^10.1.11",
-    "typescript": "~5.9.2",
-    "vite": "^6.0.0",
+    "object-assign": "^4.1.1",
+    "side-channel": "^1.1.0",
+    "timezone-mock": "^1.3.6",
     "vitest": "^4.0.15"
   }
 }

package/src/components/Button/Button.scss

@@ -1,4 +1,4 @@
-.owid-btn {
+.charts-btn {
     @include body-3-medium;
     padding: 8.5px 24px;
     border: 1px solid transparent;
@@ -7,23 +7,23 @@
     display: block;
     cursor: pointer;
 
-    &.owid-btn--icon-only {
+    &.charts-btn--icon-only {
         padding: 4.5px 9px;
     }
 
     &:disabled {
         cursor: default;
 
-        &.owid-btn--solid-blue,
-        &.owid-btn--solid-dark-blue,
-        &.owid-btn--solid-light-blue,
-        &.owid-btn--solid-vermillion {
+        &.charts-btn--solid-blue,
+        &.charts-btn--solid-dark-blue,
+        &.charts-btn--solid-light-blue,
+        &.charts-btn--solid-vermillion {
             color: $blue-50;
             background-color: $blue-10;
         }
 
-        &.owid-btn--outline-vermillion,
-        &.owid-btn--outline-white {
+        &.charts-btn--outline-vermillion,
+        &.charts-btn--outline-white {
             color: $blue-40;
             border-color: $blue-40;
         }
@@ -34,15 +34,15 @@
     }
 }
 
-.owid-btn--icon-right {
+.charts-btn--icon-right {
     margin-left: 0.5rem;
 }
 
-.owid-btn--icon-left {
+.charts-btn--icon-left {
     margin-right: 0.5rem;
 }
 
-.owid-btn--solid-vermillion {
+.charts-btn--solid-vermillion {
     background-color: $vermillion;
     color: #fff;
 
@@ -51,7 +51,7 @@
     }
 }
 
-.owid-btn--outline-vermillion {
+.charts-btn--outline-vermillion {
     border-color: $vermillion;
     color: $vermillion;
 
@@ -61,7 +61,7 @@
     }
 }
 
-.owid-btn--solid-blue {
+.charts-btn--solid-blue {
     background-color: $blue-60;
     color: #fff;
 
@@ -70,7 +70,7 @@
     }
 }
 
-.owid-btn--solid-dark-blue {
+.charts-btn--solid-dark-blue {
     background-color: $blue-95;
     color: #fff;
 
@@ -79,7 +79,7 @@
     }
 }
 
-.owid-btn--solid-light-blue {
+.charts-btn--solid-light-blue {
     background-color: $blue-20;
     color: $blue-90;
 
@@ -88,7 +88,7 @@
     }
 }
 
-.owid-btn--outline-white {
+.charts-btn--outline-white {
     background-color: transparent;
     border-color: $white;
     color: $white;
@@ -99,7 +99,7 @@
     }
 }
 
-.owid-btn--outline-light-blue {
+.charts-btn--outline-light-blue {
     border-color: $blue-20;
     color: $blue-90;
 

package/src/components/Button/Button.tsx

@@ -52,21 +52,21 @@ export const Button = ({
     dataTrackNote,
     disabled,
 }: ButtonProps) => {
-    const classes = cx("owid-btn", `owid-btn--${theme}`, className, {
-        "owid-btn--icon-only": icon && !text,
+    const classes = cx("charts-btn", `charts-btn--${theme}`, className, {
+        "charts-btn--icon-only": icon && !text,
     })
     const content = (
         <>
             {iconPosition === "left" && icon && (
                 <FontAwesomeIcon
-                    className={cx({ "owid-btn--icon-left": text })}
+                    className={cx({ "charts-btn--icon-left": text })}
                     icon={icon}
                 />
             )}
             {text && <span>{text}</span>}
             {iconPosition !== "left" && icon && (
                 <FontAwesomeIcon
-                    className={cx({ "owid-btn--icon-right": text })}
+                    className={cx({ "charts-btn--icon-right": text })}
                     icon={icon}
                 />
             )}

package/src/components/MarkdownTextWrap/MarkdownTextWrap.tsx

@@ -427,7 +427,7 @@ export const isTextToken = (token: IRToken): token is IRText | IRWhitespace =>
  * translated.
  * This is to be run _just before_ rendering to HTML, because it loses some
  * information and is not easily reversible.
- * See also https://github.com/owid/owid-grapher/issues/1785
+ * See also # legacy issue 1785
  */
 export const recursiveMergeTextTokens = (
     tokens: IRToken[],

package/src/components/index.ts

@@ -47,7 +47,7 @@ export { reactRenderToStringClientOnly } from "./reactUtil.js"
 export { GrapherTabIcon } from "./GrapherTabIcon.js"
 export { GrapherTrendArrow } from "./GrapherTrendArrow.js"
 
-// Stub components for OWID data page features
+// Stub components for data page features
 export { CodeSnippet } from "./stubs/CodeSnippet.js"
 export {
     makeSource,

package/src/components/stubs/DataCitation.tsx

@@ -1,6 +1,6 @@
 /**
  * Stub component for DataCitation.
- * This is a placeholder for OWID data page functionality.
+ * This is a placeholder for data page functionality.
  */
 import React from "react"
 

package/src/components/stubs/IndicatorKeyData.tsx

@@ -1,6 +1,6 @@
 /**
  * Stub functions for IndicatorKeyData.
- * These are placeholders for OWID data page functionality.
+ * These are placeholders for data page functionality.
  */
 import React from "react"
 

package/src/components/stubs/IndicatorProcessing.tsx

@@ -1,6 +1,6 @@
 /**
  * Stub component for IndicatorProcessing.
- * This is a placeholder for OWID data page functionality.
+ * This is a placeholder for data page functionality.
  */
 import React from "react"
 

package/src/components/stubs/IndicatorSources.tsx

@@ -1,6 +1,6 @@
 /**
  * Stub component for IndicatorSources.
- * This is a placeholder for OWID data page functionality.
+ * This is a placeholder for data page functionality.
  */
 import React from "react"
 

package/src/components/styles/colors.scss

@@ -105,7 +105,7 @@ $sdgColors: (
 );
 
 :root {
-    // See also owidTypes.ts > OwidGdocPostContent > cover-color
+    // See also gdocTypes/Gdoc.ts > GdocPostContent > cover-color
     --amber: #{$amber};
     @each $i, $sdgColor in $sdgColors {
         --sdg-color-#{$i}: #{$sdgColor};

package/src/components/styles/mixins.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 
-@mixin owid-link-90 {
+@mixin link-90 {
     color: $blue-90;
     text-decoration: underline;
     text-underline-offset: 4px;
@@ -13,7 +13,7 @@
     }
 }
 
-@mixin owid-link-60 {
+@mixin link-60 {
     color: $blue-60;
     text-decoration: underline;
     text-underline-offset: 4px;
@@ -26,7 +26,7 @@
     }
 }
 
-@mixin owid-link-40 {
+@mixin link-40 {
     color: $blue-40;
     text-decoration: underline;
     text-underline-offset: 4px;
@@ -70,7 +70,7 @@
         }
 
         a {
-            @include owid-link-90;
+            @include link-90;
         }
     }
 }
@@ -517,7 +517,7 @@
     }
 }
 
-@mixin owid-checkbox {
+@mixin charts-checkbox {
     background: #fff;
     appearance: none;
     width: 16px;

package/src/core-table/{OwidTable.ts → ChartsTable.ts}

@@ -24,9 +24,9 @@ import {
     CoreValueType,
     ColumnTypeNames,
     EntityName,
-    OwidColumnDef,
-    OwidRow,
-    OwidTableSlugs,
+    ColumnDef,
+    Row,
+    ChartsTableSlugs,
     ErrorValue,
     ToleranceOptions,
 } from "../types/index.js"
@@ -39,7 +39,7 @@ import {
     makeOriginalStartTimeSlugFromColumnSlug,
     timeColumnSlugFromColumnDef,
     toPercentageColumnDef,
-} from "./OwidTableUtil.js"
+} from "./TableUtil.js"
 import {
     linearInterpolation,
     toleranceInterpolation,
@@ -49,10 +49,10 @@ import {
 } from "./CoreTableUtils.js"
 import { CoreColumn, ColumnTypeMap } from "./CoreTableColumns.js"
 
-// An OwidTable is a subset of Table. An OwidTable always has EntityName, EntityCode, EntityId, and Time columns,
+// An ChartsTable is a subset of Table. An ChartsTable always has EntityName, EntityCode, EntityId, and Time columns,
 // and value column(s). Whether or not we need in the long run is uncertain and it may just be a stepping stone
 // to go from our Variables paradigm to the Table paradigm.
-export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
+export class ChartsTable extends CoreTable<Row, ColumnDef> {
     @imemo get availableEntityNames(): any[] {
         return Array.from(this.availableEntityNameSet)
     }
@@ -64,7 +64,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
     @imemo override get entityNameColumn(): CoreColumn {
         return (
             this.getFirstColumnWithType(ColumnTypeNames.EntityName) ??
-            this.get(OwidTableSlugs.entityName)
+            this.get(ChartsTableSlugs.entityName)
         )
     }
 
@@ -84,7 +84,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         return this.rowIndex([this.entityNameSlug])
     }
 
-    getAnnotationColumnSlug(columnDef: OwidColumnDef): string | undefined {
+    getAnnotationColumnSlug(columnDef: ColumnDef): string | undefined {
         return _.isEmpty(columnDef?.annotationsColumnSlug)
             ? makeAnnotationsSlug(columnDef.slug)
             : columnDef.annotationsColumnSlug
@@ -92,7 +92,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
 
     // todo: instead of this we should probably make annotations another property on charts—something like "annotationsColumnSlugs"
     getAnnotationColumnForColumn(columnSlug: ColumnSlug): CoreColumn {
-        const def = this.get(columnSlug).def as OwidColumnDef
+        const def = this.get(columnSlug).def as ColumnDef
         const slug = this.getAnnotationColumnSlug(def)
         return this.get(slug)
     }
@@ -179,7 +179,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         const adjustedStart = start === Infinity ? this.maxTime! : start
         const adjustedEnd = end === -Infinity ? this.minTime! : end
         // todo: we should set a time column onload so we don't have to worry about it again.
-        const timeColumnSlug = this.timeColumn?.slug || OwidTableSlugs.time
+        const timeColumnSlug = this.timeColumn?.slug || ChartsTableSlugs.time
 
         const description = `Keep only rows with Time between ${adjustedStart} - ${adjustedEnd}`
 
@@ -543,7 +543,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
             columnSlugs.forEach((valueSlug) => {
                 let comparisonValue: number
                 rowsForSingleEntity = rowsForSingleEntity.map(
-                    (row: Readonly<OwidRow>) => {
+                    (row: Readonly<Row>) => {
                         const newRow = {
                             ...row,
                         }
@@ -658,11 +658,11 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
             this.getAverageAnnualChangeIndicesByEntity(columnSlugs)
 
         // Overwrite table rows
-        const rows: OwidRow[] = []
+        const rows: Row[] = []
         entityNameToIndices.forEach((indices) => {
             const [startRow, endRow] = this.rowsAt(indices)
 
-            const newRow: OwidRow = { ...endRow }
+            const newRow: Row = { ...endRow }
             columns.forEach((col) => {
                 const timeSlug = col.originalTimeColumnSlug
 
@@ -712,7 +712,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         )
     }
 
-    // Give our users a clean CSV of each Grapher. Assumes an Owid Table with entityName.
+    // Give our users a clean CSV of each Grapher. Assumes a ChartsTable with entityName.
     toPrettyCsv(
         useShortNames: boolean = false,
         activeColumnSlugs: string[] | undefined = undefined
@@ -720,8 +720,8 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         let table
         if (activeColumnSlugs?.length) {
             const timeColumnToInclude = [
-                OwidTableSlugs.year,
-                OwidTableSlugs.day,
+                ChartsTableSlugs.year,
+                ChartsTableSlugs.day,
                 this.timeColumn.slug, // needed for explorers, where the time column may be called anything
             ].find((colSlug) => this.has(colSlug))
 
@@ -737,9 +737,9 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
             ])
         } else {
             table = this.dropColumns([
-                OwidTableSlugs.entityId,
-                OwidTableSlugs.time,
-                OwidTableSlugs.entityColor,
+                ChartsTableSlugs.entityId,
+                ChartsTableSlugs.time,
+                ChartsTableSlugs.entityColor,
             ])
         }
         return table
@@ -750,7 +750,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
     @imemo get entityNameColorIndex(): Map<EntityName, Color> {
         return this.valueIndex(
             this.entityNameSlug,
-            OwidTableSlugs.entityColor
+            ChartsTableSlugs.entityColor
         ) as Map<EntityName, Color>
     }
 
@@ -836,7 +836,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         if (!this.has(columnSlug)) return this
 
         const column = this.get(columnSlug)
-        const columnDef = column.def as OwidColumnDef
+        const columnDef = column.def as ColumnDef
         const tolerance = toleranceOverride ?? column.tolerance ?? 0
         const toleranceStrategy =
             toleranceStrategyOverride ??
@@ -846,7 +846,7 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         const timeColumnOfTable = !this.timeColumn.isMissing
             ? this.timeColumn
             : // CovidTable does not have a day or year column so we need to use time.
-              (this.get(OwidTableSlugs.time) as CoreColumn)
+              (this.get(ChartsTableSlugs.time) as CoreColumn)
 
         const maybeTimeColumnOfValue =
             getOriginalTimeColumnSlug(this, columnSlug) ??
@@ -923,14 +923,14 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
         if (!this.has(columnSlug)) return this
 
         const column = this.get(columnSlug)
-        const columnDef = column?.def as OwidColumnDef
+        const columnDef = column?.def as ColumnDef
 
         const maybeTimeColumnSlug =
             getOriginalTimeColumnSlug(this, columnSlug) ??
             timeColumnSlugFromColumnDef(columnDef)
         const timeColumn =
             this.get(maybeTimeColumnSlug) ??
-            (this.get(OwidTableSlugs.time) as CoreColumn) // CovidTable does not have a day or year column so we need to use time.
+            (this.get(ChartsTableSlugs.time) as CoreColumn) // CovidTable does not have a day or year column so we need to use time.
 
         const originalColumnSlug =
             makeOriginalValueSlugFromColumnSlug(columnSlug)
@@ -1157,16 +1157,16 @@ export class OwidTable extends CoreTable<OwidRow, OwidColumnDef> {
 
 const BLANK_TABLE_MESSAGE = `Table is empty.`
 
-// This just assures that even an emtpty OwidTable will have an entityName column. Probably a cleaner way to do this pattern (add a defaultColumns prop??)
-export const BlankOwidTable = (
-    tableSlug = `blankOwidTable`,
+// This just assures that even an emtpty ChartsTable will have an entityName column. Probably a cleaner way to do this pattern (add a defaultColumns prop??)
+export const BlankChartsTable = (
+    tableSlug = `blankChartsTable`,
     extraTableDescription = ""
-): OwidTable =>
-    new OwidTable(
+): ChartsTable =>
+    new ChartsTable(
         undefined,
         [
-            { slug: OwidTableSlugs.entityName },
-            { slug: OwidTableSlugs.year, type: ColumnTypeNames.Year },
+            { slug: ChartsTableSlugs.entityName },
+            { slug: ChartsTableSlugs.year, type: ColumnTypeNames.Year },
         ],
         {
             tableDescription: BLANK_TABLE_MESSAGE + extraTableDescription,

package/src/core-table/CoreTable.ts

@@ -28,8 +28,8 @@ import {
     ColumnTypeNames,
     CoreColumnDef,
     JsTypes,
-    OwidTableSlugs,
-    OwidColumnDef,
+    ChartsTableSlugs,
+    ColumnDef,
 } from "../types/index.js"
 import {
     makeAutoTypeFn,
@@ -65,7 +65,7 @@ interface AdvancedOptions {
 }
 
 // The complex generic with default here just enables you to optionally specify a more
-// narrow interface for the input rows. This is helpful for OwidTable.
+// narrow interface for the input rows. This is helpful for ChartsTable.
 export class CoreTable<
     ROW_TYPE extends CoreRow = CoreRow,
     COL_DEF_TYPE extends CoreColumnDef = CoreColumnDef,
@@ -232,7 +232,7 @@ export class CoreTable<
         // If we ever pass Mobx observable arrays, we need to convert them to regular arrays.
         // Otherwise, operations like `.concat()` will break in unexpected ways.
         // See https://github.com/mobxjs/mobx/blob/mobx4and5/docs/best/pitfalls.md
-        // Also, see https://github.com/owid/owid-grapher/issues/2948 for an issue caused by this problem.
+        // Also, see # legacy issue 2948 for an issue caused by this problem.
         type CoreValueArrayThatMayBeMobxProxy = CoreValueType[] & {
             toJS?: () => CoreValueType[]
         }
@@ -468,14 +468,14 @@ export class CoreTable<
         )
     }
 
-    // todo: move this. time methods should not be in CoreTable, in OwidTable instead (which is really TimeSeriesTable).
+    // todo: move this. time methods should not be in CoreTable, in ChartsTable instead (which is really TimeSeriesTable).
     // TODO: remove this. Currently we use this to get the right day/year time formatting. For now a chart is either a "day chart" or a "year chart".
     // But we can have charts with multiple time columns. Ideally each place that needs access to the timeColumn, would get the specific column
     // and not the first time column from the table.
     @imemo get timeColumn(): TimeColumn | MissingColumn {
         // "time" is the canonical time column slug.
-        // See LegacyToOwidTable where this column is injected for all Graphers.
-        const maybeTimeColumn = this.get(OwidTableSlugs.time)
+        // See LegacyToChartsTable where this column is injected for all Graphers.
+        const maybeTimeColumn = this.get(ChartsTableSlugs.time)
         if (maybeTimeColumn instanceof ColumnTypeMap.Time)
             return maybeTimeColumn
         // If a valid "time" column doesn't exist, find _some_ time column to use.
@@ -496,15 +496,15 @@ export class CoreTable<
             maybeTimeColumn) as TimeColumn | MissingColumn
     }
 
-    // todo: should be on owidtable
+    // todo: should be on ChartsTable
     @imemo get entityNameColumn(): CoreColumn {
         return (
             this.getFirstColumnWithType(ColumnTypeNames.EntityName) ??
-            this.get(OwidTableSlugs.entityName)
+            this.get(ChartsTableSlugs.entityName)
         )
     }
 
-    // todo: should be on owidtable
+    // todo: should be on ChartsTable
     @imemo get entityNameSlug(): string {
         return this.entityNameColumn.slug
     }
@@ -854,8 +854,8 @@ export class CoreTable<
             this.columnsAsArray
                 .map((col) =>
                     csvEscape(
-                        useShortNames && (col.def as OwidColumnDef).shortName
-                            ? (col.def as OwidColumnDef).shortName
+                        useShortNames && (col.def as ColumnDef).shortName
+                            ? (col.def as ColumnDef).shortName
                             : col.name
                     )
                 )