@buildcanada/charts 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +9 -24
- package/src/components/Button/Button.scss +17 -17
- package/src/components/Button/Button.tsx +4 -4
- package/src/components/MarkdownTextWrap/MarkdownTextWrap.tsx +1 -1
- package/src/components/index.ts +1 -1
- package/src/components/stubs/DataCitation.tsx +1 -1
- package/src/components/stubs/IndicatorKeyData.tsx +1 -1
- package/src/components/stubs/IndicatorProcessing.tsx +1 -1
- package/src/components/stubs/IndicatorSources.tsx +1 -1
- package/src/components/styles/colors.scss +1 -1
- package/src/components/styles/mixins.scss +5 -5
- package/src/core-table/{OwidTable.ts → ChartsTable.ts} +31 -31
- package/src/core-table/CoreTable.ts +12 -12
- package/src/core-table/CoreTableColumns.ts +24 -24
- package/src/core-table/CoreTableUtils.ts +7 -7
- package/src/core-table/{OwidTableSynthesizers.ts → TableSynthesizers.ts} +24 -24
- package/src/core-table/{OwidTableUtil.ts → TableUtil.ts} +5 -5
- package/src/core-table/index.ts +3 -3
- package/src/explorer/ColumnGrammar.ts +1 -1
- package/src/explorer/Explorer.sample.ts +7 -7
- package/src/explorer/Explorer.scss +1 -1
- package/src/explorer/Explorer.tsx +23 -23
- package/src/explorer/ExplorerConstants.ts +2 -2
- package/src/explorer/ExplorerGrammar.ts +3 -3
- package/src/explorer/ExplorerProgram.ts +21 -18
- package/src/explorer/ExplorerUtils.ts +1 -1
- package/src/explorer/gridLang/readme.md +1 -1
- package/src/grapher/axis/Axis.ts +3 -3
- package/src/grapher/barCharts/DiscreteBarChart.tsx +2 -2
- package/src/grapher/barCharts/DiscreteBarChartState.ts +8 -8
- package/src/grapher/captionedChart/Logos.tsx +11 -13
- package/src/grapher/captionedChart/LogosSVG.tsx +2 -2
- package/src/grapher/chart/ChartAreaContent.tsx +1 -1
- package/src/grapher/chart/ChartDimension.ts +15 -15
- package/src/grapher/chart/ChartInterface.ts +6 -6
- package/src/grapher/chart/ChartManager.ts +3 -3
- package/src/grapher/chart/ChartUtils.tsx +3 -3
- package/src/grapher/color/ColorConstants.ts +2 -2
- package/src/grapher/color/ColorScale.ts +4 -4
- package/src/grapher/color/ColorSchemes.ts +26 -26
- package/src/grapher/color/CustomSchemes.ts +227 -227
- package/src/grapher/controls/ContentSwitchers.tsx +1 -1
- package/src/grapher/controls/DataTableFilterDropdown.tsx +2 -2
- package/src/grapher/controls/MapZoomDropdown.tsx +3 -3
- package/src/grapher/controls/ShareMenu.tsx +1 -1
- package/src/grapher/controls/entityPicker/EntityPicker.tsx +8 -8
- package/src/grapher/controls/entityPicker/EntityPickerConstants.ts +3 -3
- package/src/grapher/controls/globalEntitySelector/GlobalEntitySelector.tsx +1 -1
- package/src/grapher/core/EntitiesByRegionType.ts +4 -4
- package/src/grapher/core/EntityUrlBuilder.ts +2 -2
- package/src/grapher/core/FetchingGrapher.tsx +4 -4
- package/src/grapher/core/Grapher.tsx +10 -10
- package/src/grapher/core/GrapherState.tsx +47 -50
- package/src/grapher/core/GrapherUseHelpers.tsx +4 -4
- package/src/grapher/core/{LegacyToOwidTable.ts → LegacyToChartsTable.ts} +100 -100
- package/src/grapher/core/loadGrapherTableHelpers.ts +13 -13
- package/src/grapher/core/loadVariable.ts +5 -5
- package/src/grapher/dataTable/DataTable.sample.ts +12 -12
- package/src/grapher/dataTable/DataTable.tsx +22 -22
- package/src/grapher/dataTable/DataTableConstants.ts +9 -9
- package/src/grapher/entitySelector/EntitySelector.tsx +13 -13
- package/src/grapher/facet/FacetChart.tsx +4 -4
- package/src/grapher/facet/FacetMap.tsx +6 -6
- package/src/grapher/footer/Footer.tsx +4 -4
- package/src/grapher/footer/FooterManager.ts +2 -2
- package/src/grapher/header/Header.tsx +5 -5
- package/src/grapher/header/HeaderManager.ts +1 -1
- package/src/grapher/index.ts +8 -8
- package/src/grapher/lineCharts/LineChartHelpers.ts +4 -4
- package/src/grapher/lineCharts/LineChartState.ts +9 -9
- package/src/grapher/mapCharts/ChoroplethGlobe.tsx +1 -1
- package/src/grapher/mapCharts/GlobeController.ts +9 -9
- package/src/grapher/mapCharts/MapChartState.ts +16 -16
- package/src/grapher/mapCharts/MapSparkline.tsx +5 -5
- package/src/grapher/mapCharts/MapTooltip.tsx +13 -13
- package/src/grapher/modal/DownloadModal.scss +3 -3
- package/src/grapher/modal/DownloadModal.tsx +24 -29
- package/src/grapher/modal/SourcesDescriptions.scss +1 -1
- package/src/grapher/modal/SourcesKeyDataTable.tsx +2 -2
- package/src/grapher/modal/SourcesModal.tsx +15 -15
- package/src/grapher/scatterCharts/ScatterPlotChart.tsx +2 -2
- package/src/grapher/scatterCharts/ScatterPlotChartConstants.ts +2 -2
- package/src/grapher/scatterCharts/ScatterPlotChartState.ts +8 -8
- package/src/grapher/scatterCharts/ScatterSizeLegend.tsx +2 -2
- package/src/grapher/scatterCharts/ScatterUtils.ts +2 -2
- package/src/grapher/schema/grapher-schema.009.yaml +18 -18
- package/src/grapher/schema/migrations/migrations.ts +4 -4
- package/src/grapher/selection/MapSelectionArray.ts +1 -1
- package/src/grapher/selection/readme.md +1 -1
- package/src/grapher/slopeCharts/SlopeChartConstants.ts +3 -3
- package/src/grapher/slopeCharts/SlopeChartHelpers.ts +1 -1
- package/src/grapher/slopeCharts/SlopeChartState.ts +10 -10
- package/src/grapher/stackedCharts/AbstractStackedChartState.ts +8 -8
- package/src/grapher/stackedCharts/MarimekkoChart.tsx +5 -5
- package/src/grapher/stackedCharts/MarimekkoChartConstants.ts +2 -2
- package/src/grapher/stackedCharts/MarimekkoChartState.ts +12 -12
- package/src/grapher/stackedCharts/StackedBarChartState.ts +1 -1
- package/src/grapher/stackedCharts/StackedConstants.ts +2 -2
- package/src/grapher/stackedCharts/StackedDiscreteBarChartState.ts +12 -12
- package/src/grapher/stackedCharts/StackedDiscreteBars.tsx +2 -2
- package/src/grapher/tabs/Tabs.tsx +1 -1
- package/src/grapher/testData/{OwidTestData.sample.ts → TestData.sample.ts} +7 -7
- package/src/grapher/testData/{OwidTestData.ts → TestData.ts} +5 -5
- package/src/index.ts +7 -7
- package/src/types/{OwidOrigin.ts → Origin.ts} +3 -3
- package/src/types/{OwidSource.ts → Source.ts} +1 -1
- package/src/types/Variable.ts +133 -0
- package/src/types/{OwidVariableDisplayConfigInterface.ts → VariableDisplayConfigInterface.ts} +11 -11
- package/src/types/domainTypes/ContentGraph.ts +3 -3
- package/src/types/domainTypes/CoreTableTypes.ts +29 -29
- package/src/types/domainTypes/Posts.ts +2 -2
- package/src/types/domainTypes/Search.ts +6 -6
- package/src/types/domainTypes/Various.ts +1 -1
- package/src/types/gdocTypes/Gdoc.ts +42 -42
- package/src/types/grapherTypes/GrapherTypes.ts +21 -21
- package/src/types/index.ts +51 -51
- package/src/utils/MultiDimDataPageConfig.ts +1 -1
- package/src/utils/Util.ts +61 -55
- package/src/utils/{OwidVariable.ts → Variable.ts} +15 -15
- package/src/utils/formatValue.ts +12 -12
- package/src/utils/image.ts +12 -12
- package/src/utils/index.ts +5 -5
- package/src/utils/metadataHelpers.ts +19 -19
- package/src/utils/regions.ts +9 -9
- package/LICENSE.md +0 -8
- package/README.md +0 -113
- package/src/types/OwidVariable.ts +0 -133
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
excludeUndefined,
|
|
10
10
|
PartialBy,
|
|
11
11
|
PointVector,
|
|
12
|
-
|
|
12
|
+
checkIsContinent,
|
|
13
13
|
getCountryNamesForRegion,
|
|
14
14
|
getRegionByName,
|
|
15
15
|
checkHasMembers,
|
|
@@ -105,8 +105,8 @@ export class GlobeController {
|
|
|
105
105
|
void this.rotateTo(target)
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
|
|
109
|
-
const target =
|
|
108
|
+
jumpToContinent(continent: GlobeRegionName): void {
|
|
109
|
+
const target = calculateTargetForContinent(continent)
|
|
110
110
|
this.jumpTo(target)
|
|
111
111
|
}
|
|
112
112
|
|
|
@@ -115,8 +115,8 @@ export class GlobeController {
|
|
|
115
115
|
if (target) this.showGlobeAndRotateTo(target)
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
|
|
119
|
-
const target =
|
|
118
|
+
rotateToContinent(continent: GlobeRegionName): void {
|
|
119
|
+
const target = calculateTargetForContinent(continent)
|
|
120
120
|
this.showGlobeAndRotateTo(target)
|
|
121
121
|
}
|
|
122
122
|
|
|
@@ -269,7 +269,7 @@ function calculateZoomToFitForBounds(bounds: Bounds): number {
|
|
|
269
269
|
return zoom
|
|
270
270
|
}
|
|
271
271
|
|
|
272
|
-
function
|
|
272
|
+
function calculateTargetForContinent(continent: GlobeRegionName): Target {
|
|
273
273
|
const viewport = GLOBE_VIEWPORTS[continent]
|
|
274
274
|
return { coords: viewport.rotation, zoom: viewport.zoom }
|
|
275
275
|
}
|
|
@@ -296,13 +296,13 @@ function calculateTargetForSelection(
|
|
|
296
296
|
)
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
// if a single
|
|
299
|
+
// if a single continent is selected, then rotate to it
|
|
300
300
|
// (the hard-coded coords/zoom values are nicer than dynamically computing it)
|
|
301
301
|
if (
|
|
302
302
|
selection.selectedRegions.length === 1 &&
|
|
303
|
-
|
|
303
|
+
checkIsContinent(selection.selectedRegions[0])
|
|
304
304
|
) {
|
|
305
|
-
return
|
|
305
|
+
return calculateTargetForContinent(
|
|
306
306
|
MAP_REGION_NAMES[
|
|
307
307
|
selection.selectedRegions[0].name
|
|
308
308
|
] as GlobeRegionName
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
import {
|
|
12
12
|
CoreColumn,
|
|
13
13
|
ErrorValueTypes,
|
|
14
|
-
|
|
14
|
+
ChartsTable,
|
|
15
15
|
} from "../../core-table/index.js"
|
|
16
16
|
import { match, P } from "ts-pattern"
|
|
17
17
|
import {
|
|
@@ -64,7 +64,7 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
64
64
|
makeObservable(this)
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
transformTable(table:
|
|
67
|
+
transformTable(table: ChartsTable): ChartsTable {
|
|
68
68
|
// Drop non-mappable entities from the table
|
|
69
69
|
table = this.dropNonMapEntities(table)
|
|
70
70
|
|
|
@@ -79,12 +79,12 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
private transformTableForSingleMapColumn(
|
|
82
|
-
table:
|
|
82
|
+
table: ChartsTable,
|
|
83
83
|
mapColumnInfo: Extract<
|
|
84
84
|
MapColumnInfo,
|
|
85
85
|
{ type: "historical" | "projected" }
|
|
86
86
|
>
|
|
87
|
-
):
|
|
87
|
+
): ChartsTable {
|
|
88
88
|
return table
|
|
89
89
|
.dropRowsWithErrorValuesForColumn(mapColumnInfo.slug)
|
|
90
90
|
.interpolateColumnWithTolerance(mapColumnInfo.slug, {
|
|
@@ -94,9 +94,9 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
private transformTableForCombinedMapColumn(
|
|
97
|
-
table:
|
|
97
|
+
table: ChartsTable,
|
|
98
98
|
mapColumnInfo: Extract<MapColumnInfo, { type: "historical+projected" }>
|
|
99
|
-
):
|
|
99
|
+
): ChartsTable {
|
|
100
100
|
const { historicalSlug, projectedSlug, combinedSlug } = mapColumnInfo
|
|
101
101
|
|
|
102
102
|
// Interpolate both columns separately
|
|
@@ -121,14 +121,14 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
121
121
|
return table
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
transformTableForSelection(table:
|
|
124
|
+
transformTableForSelection(table: ChartsTable): ChartsTable {
|
|
125
125
|
table = this.addMissingMapEntities(table)
|
|
126
126
|
table = this.dropNonMapEntitiesForSelection(table)
|
|
127
127
|
table = this.dropAntarctica(table)
|
|
128
128
|
return table
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
private dropAntarctica(table:
|
|
131
|
+
private dropAntarctica(table: ChartsTable): ChartsTable {
|
|
132
132
|
// We prefer to not offer Antarctica in the entity selector on the map
|
|
133
133
|
// tab to avoid confusion since it's shown on the globe, but not on the map.
|
|
134
134
|
return table.filterByEntityNamesUsingIncludeExcludePattern({
|
|
@@ -136,7 +136,7 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
136
136
|
})
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
-
private dropNonMapEntities(table:
|
|
139
|
+
private dropNonMapEntities(table: ChartsTable): ChartsTable {
|
|
140
140
|
// For Canada region, filter by Canadian provinces/territories
|
|
141
141
|
if (this.mapConfig.region === MapRegionName.Canada) {
|
|
142
142
|
const entityNamesToSelect =
|
|
@@ -150,12 +150,12 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
150
150
|
return table.filterByEntityNames(entityNamesToSelect)
|
|
151
151
|
}
|
|
152
152
|
|
|
153
|
-
private dropNonMapEntitiesForSelection(table:
|
|
153
|
+
private dropNonMapEntitiesForSelection(table: ChartsTable): ChartsTable {
|
|
154
154
|
const { selectionArray, mapConfig } = this
|
|
155
155
|
|
|
156
156
|
const allMappableCountryNames = mappableCountries.map((c) => c.name)
|
|
157
157
|
const allRegionNames = regions
|
|
158
|
-
.filter((r) => checkHasMembers(r) && r.code !== "
|
|
158
|
+
.filter((r) => checkHasMembers(r) && r.code !== "WRL")
|
|
159
159
|
.map((r) => r.name)
|
|
160
160
|
|
|
161
161
|
const mappableCountryNameSet = new Set(allMappableCountryNames)
|
|
@@ -204,7 +204,7 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
204
204
|
)
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
private addMissingMapEntities(table:
|
|
207
|
+
private addMissingMapEntities(table: ChartsTable): ChartsTable {
|
|
208
208
|
// the given table might not have data for all mappable countries, but
|
|
209
209
|
// on the map tab, we do want every country to be selectable, even if
|
|
210
210
|
// it doesn't have data for any of the years. that's why we add a
|
|
@@ -227,7 +227,7 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
227
227
|
return table
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
@computed get inputTable():
|
|
230
|
+
@computed get inputTable(): ChartsTable {
|
|
231
231
|
const { mapColumnInfo } = this
|
|
232
232
|
const { table } = this.manager
|
|
233
233
|
|
|
@@ -239,14 +239,14 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
239
239
|
: table
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
-
@computed get transformedTableFromGrapher():
|
|
242
|
+
@computed get transformedTableFromGrapher(): ChartsTable {
|
|
243
243
|
return (
|
|
244
244
|
this.manager.transformedTable ??
|
|
245
245
|
this.transformTable(this.inputTable)
|
|
246
246
|
)
|
|
247
247
|
}
|
|
248
248
|
|
|
249
|
-
@computed get transformedTable():
|
|
249
|
+
@computed get transformedTable(): ChartsTable {
|
|
250
250
|
let table = this.transformedTableFromGrapher
|
|
251
251
|
|
|
252
252
|
// A target time is set for faceted maps
|
|
@@ -364,7 +364,7 @@ export class MapChartState implements ChartState, ColorScaleManager {
|
|
|
364
364
|
if (mapColumn.isMissing) return []
|
|
365
365
|
if (targetTime === undefined) return []
|
|
366
366
|
|
|
367
|
-
return mapColumn.
|
|
367
|
+
return mapColumn.dataRows
|
|
368
368
|
.map((row) => {
|
|
369
369
|
const { entityName, value, originalTime } = row
|
|
370
370
|
const color =
|
|
@@ -6,10 +6,10 @@ import {
|
|
|
6
6
|
AxisConfigInterface,
|
|
7
7
|
ColumnSlug,
|
|
8
8
|
EntityName,
|
|
9
|
-
|
|
9
|
+
VariableRoundingMode,
|
|
10
10
|
Time,
|
|
11
11
|
} from "../../types/index.js"
|
|
12
|
-
import {
|
|
12
|
+
import { ChartsTable } from "../../core-table/index.js"
|
|
13
13
|
import { LineChart } from "../lineCharts/LineChart"
|
|
14
14
|
import { LineChartState } from "../lineCharts/LineChartState"
|
|
15
15
|
import { Bounds, checkIsVeryShortUnit } from "../../utils/index.js"
|
|
@@ -28,7 +28,7 @@ const SPARKLINE_NUDGE = 3 // step away from the axis
|
|
|
28
28
|
export interface MapSparklineManager {
|
|
29
29
|
mapColumnSlug: ColumnSlug
|
|
30
30
|
mapColumnInfo: MapColumnInfo
|
|
31
|
-
timeSeriesTable:
|
|
31
|
+
timeSeriesTable: ChartsTable
|
|
32
32
|
targetTime?: Time
|
|
33
33
|
entityName: EntityName
|
|
34
34
|
lineColorScale?: ColorScale
|
|
@@ -64,7 +64,7 @@ export class MapSparkline extends React.Component<MapSparklineProps> {
|
|
|
64
64
|
return this.manager.mapColumnSlug
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
@computed private get sparklineTable():
|
|
67
|
+
@computed private get sparklineTable(): ChartsTable {
|
|
68
68
|
return this.manager.timeSeriesTable
|
|
69
69
|
.filterByEntityNames([this.manager.entityName])
|
|
70
70
|
.columnFilter(
|
|
@@ -200,7 +200,7 @@ export class MapSparkline extends React.Component<MapSparklineProps> {
|
|
|
200
200
|
|
|
201
201
|
const { mapColumnSlug, formatValueForTooltip } = this.manager
|
|
202
202
|
|
|
203
|
-
const roundingMode =
|
|
203
|
+
const roundingMode = VariableRoundingMode.decimalPlaces
|
|
204
204
|
const { yAxisConfig } = this.sparklineManager,
|
|
205
205
|
yColumn = this.sparklineTable.get(mapColumnSlug),
|
|
206
206
|
minVal = _.min([yColumn.minValue, yAxisConfig?.min]) ?? 0,
|
|
@@ -20,12 +20,12 @@ import { ColorScale } from "../color/ColorScale"
|
|
|
20
20
|
import {
|
|
21
21
|
Time,
|
|
22
22
|
EntityName,
|
|
23
|
-
|
|
23
|
+
VariableRow,
|
|
24
24
|
AxisConfigInterface,
|
|
25
25
|
ColumnSlug,
|
|
26
26
|
PrimitiveType,
|
|
27
27
|
} from "../../types/index.js"
|
|
28
|
-
import { CoreColumn,
|
|
28
|
+
import { CoreColumn, ChartsTable } from "../../core-table/index.js"
|
|
29
29
|
import {
|
|
30
30
|
calculateTrendDirection,
|
|
31
31
|
excludeUndefined,
|
|
@@ -43,7 +43,7 @@ interface MapTooltipProps {
|
|
|
43
43
|
mapColumnInfo: MapColumnInfo
|
|
44
44
|
position?: PointVector
|
|
45
45
|
lineColorScale: ColorScale
|
|
46
|
-
timeSeriesTable:
|
|
46
|
+
timeSeriesTable: ChartsTable
|
|
47
47
|
targetTime?: Time // show tooltip values for a specific point in time
|
|
48
48
|
targetTimes?: [Time, Time] // show tooltip values for a specific time range (start and end times)
|
|
49
49
|
sparklineWidth?: number
|
|
@@ -109,30 +109,30 @@ export class MapTooltip
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
// Table pre-filtered by targetTime, excludes time series
|
|
112
|
-
@computed private get entityTable():
|
|
112
|
+
@computed private get entityTable(): ChartsTable {
|
|
113
113
|
const table =
|
|
114
114
|
this.props.manager.transformedTable ?? this.props.manager.table
|
|
115
115
|
return table.filterByEntityNames([this.entityName])
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
@computed get timeSeriesTable():
|
|
118
|
+
@computed get timeSeriesTable(): ChartsTable {
|
|
119
119
|
return this.props.timeSeriesTable
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
@computed private get startDatum():
|
|
123
|
-
|
|
|
123
|
+
| VariableRow<number | string>
|
|
124
124
|
| undefined {
|
|
125
125
|
if (this.startTime === undefined) return undefined
|
|
126
|
-
return this.mapColumn.
|
|
126
|
+
return this.mapColumn.dataRowByEntityNameAndTime
|
|
127
127
|
.get(this.entityName)
|
|
128
128
|
?.get(this.startTime)
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
@computed private get endDatum():
|
|
132
|
-
|
|
|
132
|
+
| VariableRow<number | string>
|
|
133
133
|
| undefined {
|
|
134
134
|
if (this.endTime === undefined) return undefined
|
|
135
|
-
return this.mapColumn.
|
|
135
|
+
return this.mapColumn.dataRowByEntityNameAndTime
|
|
136
136
|
.get(this.entityName)
|
|
137
137
|
?.get(this.endTime)
|
|
138
138
|
}
|
|
@@ -175,7 +175,7 @@ export class MapTooltip
|
|
|
175
175
|
{ type: "historical+projected" },
|
|
176
176
|
(info) =>
|
|
177
177
|
this.entityTable.get(info.slugForIsProjectionColumn)
|
|
178
|
-
.
|
|
178
|
+
.dataRows[0]?.value
|
|
179
179
|
)
|
|
180
180
|
.exhaustive()
|
|
181
181
|
}
|
|
@@ -341,7 +341,7 @@ function MapTooltipValue({
|
|
|
341
341
|
isProjection = false,
|
|
342
342
|
}: {
|
|
343
343
|
mapColumn: CoreColumn
|
|
344
|
-
datum?:
|
|
344
|
+
datum?: VariableRow<number | string>
|
|
345
345
|
formattedValue?: string
|
|
346
346
|
colorScale: ColorScale
|
|
347
347
|
isProjection?: boolean
|
|
@@ -370,8 +370,8 @@ function MapTooltipRangeValues({
|
|
|
370
370
|
colorScale,
|
|
371
371
|
}: {
|
|
372
372
|
mapColumn: CoreColumn
|
|
373
|
-
startDatum?:
|
|
374
|
-
endDatum?:
|
|
373
|
+
startDatum?: VariableRow<number | string>
|
|
374
|
+
endDatum?: VariableRow<number | string>
|
|
375
375
|
formattedStartValue?: ReturnType<MapFormatValueForTooltip>
|
|
376
376
|
formattedEndValue?: ReturnType<MapFormatValueForTooltip>
|
|
377
377
|
colorScale: ColorScale
|
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
a {
|
|
227
|
-
@include
|
|
227
|
+
@include link-90;
|
|
228
228
|
color: $gray-80;
|
|
229
229
|
}
|
|
230
230
|
}
|
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
a {
|
|
260
|
-
@include
|
|
260
|
+
@include link-60;
|
|
261
261
|
text-underline-offset: 2px;
|
|
262
262
|
}
|
|
263
263
|
}
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
a {
|
|
290
|
-
@include
|
|
290
|
+
@include link-90;
|
|
291
291
|
color: $gray-70;
|
|
292
292
|
}
|
|
293
293
|
}
|
|
@@ -30,14 +30,14 @@ import {
|
|
|
30
30
|
faSpinner,
|
|
31
31
|
} from "@fortawesome/free-solid-svg-icons"
|
|
32
32
|
import {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
ColumnDef,
|
|
34
|
+
Origin,
|
|
35
35
|
QueryParams,
|
|
36
36
|
type GrapherImageDownloadEvent,
|
|
37
37
|
} from "../../types/index.js"
|
|
38
38
|
import {
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
BlankChartsTable,
|
|
40
|
+
ChartsTable,
|
|
41
41
|
CoreColumn,
|
|
42
42
|
} from "../../core-table/index.js"
|
|
43
43
|
import { Modal } from "./Modal"
|
|
@@ -63,9 +63,9 @@ export interface DownloadModalManager {
|
|
|
63
63
|
baseUrl?: string
|
|
64
64
|
queryStr?: string
|
|
65
65
|
externalQueryParams?: QueryParams
|
|
66
|
-
inputTable?:
|
|
67
|
-
transformedTable?:
|
|
68
|
-
filteredTableForDisplay?:
|
|
66
|
+
inputTable?: ChartsTable
|
|
67
|
+
transformedTable?: ChartsTable
|
|
68
|
+
filteredTableForDisplay?: ChartsTable
|
|
69
69
|
yColumnsFromDimensionsOrSlugsOrAuto?: CoreColumn[]
|
|
70
70
|
detailsOrderedByReference?: string[]
|
|
71
71
|
activeModal?: GrapherModal
|
|
@@ -601,8 +601,8 @@ interface DataDownloadContextClientSide extends DataDownloadContextBase {
|
|
|
601
601
|
shortColNames: boolean
|
|
602
602
|
|
|
603
603
|
// Only needed for local CSV generation
|
|
604
|
-
fullTable:
|
|
605
|
-
filteredTable:
|
|
604
|
+
fullTable: ChartsTable
|
|
605
|
+
filteredTable: ChartsTable
|
|
606
606
|
activeColumnSlugs: string[] | undefined
|
|
607
607
|
}
|
|
608
608
|
|
|
@@ -653,12 +653,12 @@ const getDownloadUrl = (
|
|
|
653
653
|
}
|
|
654
654
|
|
|
655
655
|
export const getNonRedistributableInfo = (
|
|
656
|
-
table:
|
|
656
|
+
table: ChartsTable | undefined
|
|
657
657
|
): { cols: CoreColumn[] | undefined; sourceLinks: string[] | undefined } => {
|
|
658
658
|
if (!table) return { cols: undefined, sourceLinks: undefined }
|
|
659
659
|
|
|
660
660
|
const nonRedistributableCols = table.columnsAsArray.filter(
|
|
661
|
-
(col) => (col.def as
|
|
661
|
+
(col) => (col.def as ColumnDef).nonRedistributable
|
|
662
662
|
)
|
|
663
663
|
|
|
664
664
|
if (!nonRedistributableCols.length)
|
|
@@ -666,7 +666,7 @@ export const getNonRedistributableInfo = (
|
|
|
666
666
|
|
|
667
667
|
const sourceLinks = nonRedistributableCols
|
|
668
668
|
.map((col) => {
|
|
669
|
-
const def = col.def as
|
|
669
|
+
const def = col.def as ColumnDef
|
|
670
670
|
return def.sourceLink ?? def.origins?.[0]?.urlMain
|
|
671
671
|
})
|
|
672
672
|
.filter((link): link is string => !!link)
|
|
@@ -716,7 +716,7 @@ metadata <- fromJSON("${props.metadataUrl}")`,
|
|
|
716
716
|
)
|
|
717
717
|
}
|
|
718
718
|
|
|
719
|
-
const SourceAndCitationSection = ({ table }: { table?:
|
|
719
|
+
const SourceAndCitationSection = ({ table }: { table?: ChartsTable }) => {
|
|
720
720
|
// Sources can come either from origins (new format) or from the source field of the column (old format)
|
|
721
721
|
const origins =
|
|
722
722
|
table?.defs
|
|
@@ -728,7 +728,7 @@ const SourceAndCitationSection = ({ table }: { table?: OwidTable }) => {
|
|
|
728
728
|
.map((col) => col.source)
|
|
729
729
|
.filter((s) => s !== undefined && s.dataPublishedBy !== undefined)
|
|
730
730
|
.map(
|
|
731
|
-
(s):
|
|
731
|
+
(s): Origin => ({
|
|
732
732
|
producer: s.dataPublishedBy,
|
|
733
733
|
urlMain: s.link,
|
|
734
734
|
})
|
|
@@ -756,19 +756,19 @@ const SourceAndCitationSection = ({ table }: { table?: OwidTable }) => {
|
|
|
756
756
|
)
|
|
757
757
|
|
|
758
758
|
// Find the highest processing level of all columns
|
|
759
|
-
const
|
|
760
|
-
.map((col) => (col.def as
|
|
759
|
+
const processingLevel = table?.columnsAsArray
|
|
760
|
+
.map((col) => (col.def as ColumnDef).processingLevel)
|
|
761
761
|
.reduce((prev, curr) => {
|
|
762
762
|
if (prev === "major" || curr === "major") return "major" as const
|
|
763
763
|
if (prev === "minor" || curr === "minor") return "minor" as const
|
|
764
764
|
return undefined
|
|
765
765
|
}, undefined)
|
|
766
766
|
|
|
767
|
-
const
|
|
767
|
+
const sourceIsExternal =
|
|
768
768
|
attributions.length === 1 &&
|
|
769
769
|
attributions[0].toLowerCase() === "our world in data"
|
|
770
|
-
const processingLevelPhrase = !
|
|
771
|
-
? getPhraseForProcessingLevel(
|
|
770
|
+
const processingLevelPhrase = !sourceIsExternal
|
|
771
|
+
? getPhraseForProcessingLevel(processingLevel)
|
|
772
772
|
: undefined
|
|
773
773
|
const fullProcessingPhrase = processingLevelPhrase ? (
|
|
774
774
|
<>
|
|
@@ -802,7 +802,7 @@ const SourceAndCitationSection = ({ table }: { table?: OwidTable }) => {
|
|
|
802
802
|
|
|
803
803
|
const ApiAndCodeExamplesSection = (props: {
|
|
804
804
|
downloadCtxBase: DataDownloadContextBase
|
|
805
|
-
firstYColDef?:
|
|
805
|
+
firstYColDef?: ColumnDef
|
|
806
806
|
}) => {
|
|
807
807
|
const [onlyVisible, setOnlyVisible] = useState(false)
|
|
808
808
|
const [shortColNames, setShortColNames] = useState(true)
|
|
@@ -841,12 +841,7 @@ const ApiAndCodeExamplesSection = (props: {
|
|
|
841
841
|
<p className="grapher_label-2-regular">
|
|
842
842
|
Use these URLs to programmatically access this chart's
|
|
843
843
|
data and configure your requests with the options below.{" "}
|
|
844
|
-
<
|
|
845
|
-
href="https://docs.owid.io/projects/etl/api/"
|
|
846
|
-
data-track-note="chart_download_modal_api_docs"
|
|
847
|
-
>
|
|
848
|
-
Our documentation provides more information
|
|
849
|
-
</a>{" "}
|
|
844
|
+
<span>Documentation provides more information</span>{" "}
|
|
850
845
|
on how to use the API, and you can find a few code
|
|
851
846
|
examples below.
|
|
852
847
|
</p>
|
|
@@ -946,11 +941,11 @@ export const DownloadModalDataTab = (props: DownloadModalProps) => {
|
|
|
946
941
|
props.manager.baseUrl ??
|
|
947
942
|
`/grapher/${props.manager.displaySlug}`,
|
|
948
943
|
|
|
949
|
-
fullTable: props.manager.inputTable ??
|
|
944
|
+
fullTable: props.manager.inputTable ?? BlankChartsTable(),
|
|
950
945
|
filteredTable:
|
|
951
946
|
(props.manager.isOnTableTab
|
|
952
947
|
? props.manager.filteredTableForDisplay
|
|
953
|
-
: props.manager.transformedTable) ??
|
|
948
|
+
: props.manager.transformedTable) ?? BlankChartsTable(),
|
|
954
949
|
activeColumnSlugs: props.manager.activeColumnSlugs,
|
|
955
950
|
}
|
|
956
951
|
}, [
|
|
@@ -1065,7 +1060,7 @@ export const DownloadModalDataTab = (props: DownloadModalProps) => {
|
|
|
1065
1060
|
</p>
|
|
1066
1061
|
)
|
|
1067
1062
|
|
|
1068
|
-
const firstYColDef = yColumns?.[0]?.def as
|
|
1063
|
+
const firstYColDef = yColumns?.[0]?.def as ColumnDef | undefined
|
|
1069
1064
|
|
|
1070
1065
|
const fullDataDescription = `Includes all entities and time points`
|
|
1071
1066
|
const filteredDataDescription = `Includes only the entities and time points currently visible in the chart`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
import { Fragment } from "react"
|
|
3
3
|
import cx from "classnames"
|
|
4
|
-
import {
|
|
4
|
+
import { ProcessingLevel, excludeNull } from "../../utils/index.js"
|
|
5
5
|
import {
|
|
6
6
|
makeSource,
|
|
7
7
|
makeLastUpdated,
|
|
@@ -19,7 +19,7 @@ interface SourcesKeyDataTableProps {
|
|
|
19
19
|
lastUpdated?: string
|
|
20
20
|
nextUpdate?: string
|
|
21
21
|
unit?: string
|
|
22
|
-
|
|
22
|
+
processingLevel?: ProcessingLevel
|
|
23
23
|
link?: string
|
|
24
24
|
unitConversionFactor?: number
|
|
25
25
|
isEmbeddedInADataPage?: boolean // true by default
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
excludeUndefined,
|
|
9
9
|
DisplaySource,
|
|
10
10
|
prepareSourcesForDisplay,
|
|
11
|
-
|
|
11
|
+
Source,
|
|
12
12
|
IndicatorTitleWithFragments,
|
|
13
13
|
joinTitleFragments,
|
|
14
14
|
getCitationShort,
|
|
@@ -30,7 +30,7 @@ import { action, computed, makeObservable, observable } from "mobx"
|
|
|
30
30
|
import { observer } from "mobx-react"
|
|
31
31
|
import { faPencilAlt } from "@fortawesome/free-solid-svg-icons"
|
|
32
32
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
33
|
-
import {
|
|
33
|
+
import { ColumnDef } from "../../types/index.js"
|
|
34
34
|
import { CoreColumn } from "../../core-table/index.js"
|
|
35
35
|
import { Modal } from "./Modal"
|
|
36
36
|
import { SourcesKeyDataTable } from "./SourcesKeyDataTable"
|
|
@@ -97,7 +97,7 @@ export class SourcesModal extends React.Component<SourcesModalProps> {
|
|
|
97
97
|
|
|
98
98
|
@computed private get modalBounds(): Bounds {
|
|
99
99
|
const maxWidth = MAX_CONTENT_WIDTH + 220
|
|
100
|
-
// using 15px instead of 16px to make sure the modal fully covers the
|
|
100
|
+
// using 15px instead of 16px to make sure the modal fully covers the logo in the header
|
|
101
101
|
const padWidth = Math.max(15, (this.frameBounds.width - maxWidth) / 2)
|
|
102
102
|
return this.frameBounds.padHeight(15).padWidth(padWidth)
|
|
103
103
|
}
|
|
@@ -182,7 +182,7 @@ export class SourcesModal extends React.Component<SourcesModalProps> {
|
|
|
182
182
|
): React.ReactElement | null {
|
|
183
183
|
if (!column) return null
|
|
184
184
|
return (
|
|
185
|
-
<
|
|
185
|
+
<SourceDisplay
|
|
186
186
|
column={column}
|
|
187
187
|
editBaseUrl={this.editBaseUrl}
|
|
188
188
|
isEmbeddedInADataPage={
|
|
@@ -343,7 +343,7 @@ interface SourceProps {
|
|
|
343
343
|
}
|
|
344
344
|
|
|
345
345
|
@observer
|
|
346
|
-
export class
|
|
346
|
+
export class SourceDisplay extends React.Component<SourceProps> {
|
|
347
347
|
constructor(props: SourceProps) {
|
|
348
348
|
super(props)
|
|
349
349
|
makeObservable(this)
|
|
@@ -353,7 +353,7 @@ export class Source extends React.Component<SourceProps> {
|
|
|
353
353
|
return this.props.column
|
|
354
354
|
}
|
|
355
355
|
|
|
356
|
-
@computed get def():
|
|
356
|
+
@computed get def(): ColumnDef & { source?: Source } {
|
|
357
357
|
return { ...this.column.def, source: this.column.source }
|
|
358
358
|
}
|
|
359
359
|
|
|
@@ -361,7 +361,7 @@ export class Source extends React.Component<SourceProps> {
|
|
|
361
361
|
return getCitationShort(
|
|
362
362
|
this.def.origins ?? [],
|
|
363
363
|
getAttributionFragmentsFromVariable(this.def),
|
|
364
|
-
this.def.
|
|
364
|
+
this.def.processingLevel
|
|
365
365
|
)
|
|
366
366
|
}
|
|
367
367
|
|
|
@@ -373,13 +373,13 @@ export class Source extends React.Component<SourceProps> {
|
|
|
373
373
|
getAttributionFragmentsFromVariable(this.def),
|
|
374
374
|
this.def.presentation?.attributionShort,
|
|
375
375
|
this.def.presentation?.titleVariant,
|
|
376
|
-
this.def.
|
|
376
|
+
this.def.processingLevel,
|
|
377
377
|
undefined,
|
|
378
378
|
undefined
|
|
379
379
|
)
|
|
380
380
|
}
|
|
381
381
|
|
|
382
|
-
@computed private get source():
|
|
382
|
+
@computed private get source(): Source {
|
|
383
383
|
return this.def.source ?? {}
|
|
384
384
|
}
|
|
385
385
|
|
|
@@ -391,8 +391,8 @@ export class Source extends React.Component<SourceProps> {
|
|
|
391
391
|
if (!this.props.editBaseUrl) return undefined
|
|
392
392
|
|
|
393
393
|
// point user directly to the variable edit page if possible
|
|
394
|
-
if (this.def.
|
|
395
|
-
return `${this.props.editBaseUrl}/variables/${this.def.
|
|
394
|
+
if (this.def.variableId) {
|
|
395
|
+
return `${this.props.editBaseUrl}/variables/${this.def.variableId}`
|
|
396
396
|
}
|
|
397
397
|
|
|
398
398
|
// if that's not possible, point user to the dataset edit page
|
|
@@ -450,11 +450,11 @@ export class Source extends React.Component<SourceProps> {
|
|
|
450
450
|
}
|
|
451
451
|
|
|
452
452
|
@computed private get hideSourcesForDisplay(): boolean {
|
|
453
|
-
// the "Continent" variable
|
|
453
|
+
// the "Continent" variable is used in many charts but doesn't come with useful source information.
|
|
454
454
|
// that's why we hide the sources section for this indicator for now, but we might decide to show it in the future.
|
|
455
455
|
return (
|
|
456
|
-
!!this.def.
|
|
457
|
-
isContinentsVariableId(this.def.
|
|
456
|
+
!!this.def.variableId &&
|
|
457
|
+
isContinentsVariableId(this.def.variableId)
|
|
458
458
|
)
|
|
459
459
|
}
|
|
460
460
|
|
|
@@ -496,7 +496,7 @@ export class Source extends React.Component<SourceProps> {
|
|
|
496
496
|
)}
|
|
497
497
|
<SourcesKeyDataTable
|
|
498
498
|
attribution={this.attributions}
|
|
499
|
-
|
|
499
|
+
processingLevel={this.def.processingLevel}
|
|
500
500
|
dateRange={this.def.timespan}
|
|
501
501
|
lastUpdated={this.lastUpdated}
|
|
502
502
|
nextUpdate={this.nextUpdate}
|
|
@@ -23,7 +23,7 @@ import {
|
|
|
23
23
|
DEFAULT_GRAPHER_BOUNDS,
|
|
24
24
|
} from "../core/GrapherConstants"
|
|
25
25
|
import {
|
|
26
|
-
|
|
26
|
+
ChartsTable,
|
|
27
27
|
isNotErrorValue,
|
|
28
28
|
CoreColumn,
|
|
29
29
|
} from "../../core-table/index.js"
|
|
@@ -120,7 +120,7 @@ export class ScatterPlotChart
|
|
|
120
120
|
return this.chartState.colorScale
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
@computed private get transformedTable():
|
|
123
|
+
@computed private get transformedTable(): ChartsTable {
|
|
124
124
|
return this.chartState.transformedTable
|
|
125
125
|
}
|
|
126
126
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ScaleLinear } from "d3-scale"
|
|
2
2
|
import { Quadtree } from "d3-quadtree"
|
|
3
|
-
import {
|
|
3
|
+
import { ChartsTable } from "../../core-table/index.js"
|
|
4
4
|
import { DualAxis } from "../axis/Axis"
|
|
5
5
|
import { ChartManager } from "../chart/ChartManager"
|
|
6
6
|
import { NoDataModalManager } from "../noDataModal/NoDataModal"
|
|
@@ -29,7 +29,7 @@ export interface ScatterPlotManager extends ChartManager {
|
|
|
29
29
|
scatterPointLabelStrategy?: ScatterPointLabelStrategy
|
|
30
30
|
addCountryMode?: EntitySelectionMode
|
|
31
31
|
xOverrideTime?: Time | undefined
|
|
32
|
-
tableAfterAuthorTimelineAndActiveChartTransform?:
|
|
32
|
+
tableAfterAuthorTimelineAndActiveChartTransform?: ChartsTable
|
|
33
33
|
startTime?: Time
|
|
34
34
|
endTime?: Time
|
|
35
35
|
hasTimeline?: boolean
|