@buildcanada/charts 0.1.1 → 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 +2 -2
- 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/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 +46 -46
- 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 +12 -12
- 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 +3 -3
- 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/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/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 +2 -2
- 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 +50 -50
- 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/src/types/OwidVariable.ts +0 -133
|
@@ -16,11 +16,11 @@ import {
|
|
|
16
16
|
SortOrder,
|
|
17
17
|
Time,
|
|
18
18
|
EntityName,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
ChartsTableSlugs,
|
|
20
|
+
VariableRoundingMode,
|
|
21
|
+
VariableRow,
|
|
22
22
|
} from "../../types/index.js"
|
|
23
|
-
import {
|
|
23
|
+
import { ChartsTable, CoreColumn } from "../../core-table/index.js"
|
|
24
24
|
import {
|
|
25
25
|
valuesByEntityAtTimes,
|
|
26
26
|
es6mapValues,
|
|
@@ -56,7 +56,7 @@ import {
|
|
|
56
56
|
PointColumnKey,
|
|
57
57
|
SparklineHighlight,
|
|
58
58
|
TargetTimeMode,
|
|
59
|
-
|
|
59
|
+
MinimalRow,
|
|
60
60
|
DataTableConfig,
|
|
61
61
|
DataTableSortState,
|
|
62
62
|
DataTableState,
|
|
@@ -127,7 +127,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
127
127
|
return this.manager.closestTimelineMaxTime
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
@computed get table():
|
|
130
|
+
@computed get table(): ChartsTable {
|
|
131
131
|
let table = this.manager.filteredTableForDisplay
|
|
132
132
|
|
|
133
133
|
// make sure the given table doesn't contain any rows outside of the time range
|
|
@@ -283,7 +283,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
283
283
|
)
|
|
284
284
|
)
|
|
285
285
|
|
|
286
|
-
const accessor = (row:
|
|
286
|
+
const accessor = (row: MinimalRow): number | undefined =>
|
|
287
287
|
typeof row.value === "string" ? row.value.length : row.value
|
|
288
288
|
const maxValue = _.maxBy(values, accessor)
|
|
289
289
|
const minValue = _.minBy(values, accessor)
|
|
@@ -528,7 +528,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
528
528
|
|
|
529
529
|
return (
|
|
530
530
|
<Sparkline
|
|
531
|
-
|
|
531
|
+
dataRows={valuesForEntity.sparkline}
|
|
532
532
|
minTime={this.timelineMinTime!}
|
|
533
533
|
maxTime={this.timelineMaxTime!}
|
|
534
534
|
highlights={highlights}
|
|
@@ -723,7 +723,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
723
723
|
})
|
|
724
724
|
.filter((col) => col)
|
|
725
725
|
|
|
726
|
-
const skips = new Set(Object.keys(
|
|
726
|
+
const skips = new Set(Object.keys(ChartsTableSlugs))
|
|
727
727
|
return this.table.columnsAsArray.filter(
|
|
728
728
|
(column) =>
|
|
729
729
|
!skips.has(column.slug) &&
|
|
@@ -771,7 +771,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
771
771
|
): string | undefined {
|
|
772
772
|
if (value === undefined) return undefined
|
|
773
773
|
return column.formatValueShort(value, {
|
|
774
|
-
roundingMode:
|
|
774
|
+
roundingMode: VariableRoundingMode.decimalPlaces,
|
|
775
775
|
numberAbbreviation: false,
|
|
776
776
|
trailingZeroes: true,
|
|
777
777
|
useNoBreakSpace: true,
|
|
@@ -826,7 +826,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
826
826
|
if (this.columnHasSparkline(coreTableColumn)) {
|
|
827
827
|
for (const [entityName, values] of valuesByEntityName) {
|
|
828
828
|
values.sparkline =
|
|
829
|
-
coreTableColumn.
|
|
829
|
+
coreTableColumn.dataRowsByEntityName.get(entityName)
|
|
830
830
|
}
|
|
831
831
|
}
|
|
832
832
|
|
|
@@ -934,7 +934,7 @@ export class DataTable extends React.Component<DataTableProps> {
|
|
|
934
934
|
// There is always a column, but not always a data value (in the delta column the
|
|
935
935
|
// value needs to be calculated)
|
|
936
936
|
if (targetTimeMode === TargetTimeMode.range) {
|
|
937
|
-
const [start, end]: (
|
|
937
|
+
const [start, end]: (MinimalRow | undefined)[] = dvs
|
|
938
938
|
const result: RangeValuesForEntity = {
|
|
939
939
|
start: {
|
|
940
940
|
...start,
|
|
@@ -1155,7 +1155,7 @@ function ClosestTimeNotice({
|
|
|
1155
1155
|
columnDefinition,
|
|
1156
1156
|
formatTime,
|
|
1157
1157
|
}: {
|
|
1158
|
-
value:
|
|
1158
|
+
value: MinimalRow
|
|
1159
1159
|
columnDefinition: DataTableColumnDefinition
|
|
1160
1160
|
formatTime: (time: Time) => string
|
|
1161
1161
|
}): React.ReactElement | null {
|
|
@@ -1196,7 +1196,7 @@ function ClosestTimeNotice({
|
|
|
1196
1196
|
function Sparkline({
|
|
1197
1197
|
width = 75,
|
|
1198
1198
|
height = 18,
|
|
1199
|
-
|
|
1199
|
+
dataRows,
|
|
1200
1200
|
minTime,
|
|
1201
1201
|
maxTime,
|
|
1202
1202
|
highlights = [],
|
|
@@ -1206,7 +1206,7 @@ function Sparkline({
|
|
|
1206
1206
|
}: {
|
|
1207
1207
|
width?: number
|
|
1208
1208
|
height?: number
|
|
1209
|
-
|
|
1209
|
+
dataRows: VariableRow<number>[]
|
|
1210
1210
|
minTime: number
|
|
1211
1211
|
maxTime: number
|
|
1212
1212
|
highlights?: SparklineHighlight[]
|
|
@@ -1214,7 +1214,7 @@ function Sparkline({
|
|
|
1214
1214
|
color?: string
|
|
1215
1215
|
strokeStyle?: "solid" | "dotted"
|
|
1216
1216
|
}): React.ReactElement | null {
|
|
1217
|
-
if (
|
|
1217
|
+
if (dataRows.length <= 1) return null
|
|
1218
1218
|
|
|
1219
1219
|
// add a little padding so the dots don't overflow
|
|
1220
1220
|
const bounds = new Bounds(0, 0, width, height).padWidth(dotSize)
|
|
@@ -1226,16 +1226,16 @@ function Sparkline({
|
|
|
1226
1226
|
.range([bounds.left, bounds.right])
|
|
1227
1227
|
|
|
1228
1228
|
// calculate y-scale
|
|
1229
|
-
const yDomain = extent(
|
|
1229
|
+
const yDomain = extent(dataRows.map((row) => row.value)) as [number, number]
|
|
1230
1230
|
const yScale = scaleLinear()
|
|
1231
1231
|
.domain(yDomain)
|
|
1232
1232
|
.range([bounds.bottom, bounds.top])
|
|
1233
1233
|
|
|
1234
|
-
const makePath = line<
|
|
1234
|
+
const makePath = line<VariableRow<number>>()
|
|
1235
1235
|
.x((row) => xScale(row.originalTime))
|
|
1236
1236
|
.y((row) => yScale(row.value))
|
|
1237
1237
|
|
|
1238
|
-
const path = makePath(
|
|
1238
|
+
const path = makePath(dataRows)
|
|
1239
1239
|
if (!path) return null
|
|
1240
1240
|
|
|
1241
1241
|
const strokeDasharray = strokeStyle === "dotted" ? "2,3" : undefined
|
|
@@ -1290,11 +1290,11 @@ function Sparkline({
|
|
|
1290
1290
|
function getValueForEntityByKey(
|
|
1291
1291
|
dimensionValue: DataTableValuesForEntity,
|
|
1292
1292
|
columnKey: DataTableColumnKey
|
|
1293
|
-
):
|
|
1293
|
+
): MinimalRow | undefined {
|
|
1294
1294
|
if (isSingleValue(dimensionValue)) {
|
|
1295
|
-
return dimensionValue[columnKey as PointColumnKey] as
|
|
1295
|
+
return dimensionValue[columnKey as PointColumnKey] as MinimalRow
|
|
1296
1296
|
} else if (isRangeValue(dimensionValue)) {
|
|
1297
|
-
return dimensionValue[columnKey as RangeColumnKey] as
|
|
1297
|
+
return dimensionValue[columnKey as RangeColumnKey] as MinimalRow
|
|
1298
1298
|
}
|
|
1299
1299
|
return undefined
|
|
1300
1300
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { CoreColumn,
|
|
1
|
+
import { CoreColumn, ChartsTable } from "../../core-table/index.js"
|
|
2
2
|
import {
|
|
3
3
|
ColumnSlug,
|
|
4
4
|
EntityName,
|
|
5
5
|
IndicatorTitleWithFragments,
|
|
6
|
-
|
|
6
|
+
VariableRow,
|
|
7
7
|
SortOrder,
|
|
8
8
|
Time,
|
|
9
9
|
} from "../../types/index.js"
|
|
@@ -24,8 +24,8 @@ import { TimelineDragTarget } from "../timeline/TimelineController"
|
|
|
24
24
|
// columns
|
|
25
25
|
|
|
26
26
|
export interface DataTableManager {
|
|
27
|
-
table:
|
|
28
|
-
filteredTableForDisplay:
|
|
27
|
+
table: ChartsTable // not used here, but required in type `ChartManager`
|
|
28
|
+
filteredTableForDisplay: ChartsTable
|
|
29
29
|
entityType?: string
|
|
30
30
|
endTime?: Time
|
|
31
31
|
startTime?: Time
|
|
@@ -131,8 +131,8 @@ export enum RangeColumnKey {
|
|
|
131
131
|
* when TargetTimeMode is set to 'point' (single time selection).
|
|
132
132
|
*/
|
|
133
133
|
export type PointValuesForEntity = Partial<
|
|
134
|
-
Record<PointColumnKey,
|
|
135
|
-
Record<SparklineKey,
|
|
134
|
+
Record<PointColumnKey, MinimalRow> &
|
|
135
|
+
Record<SparklineKey, VariableRow<number>[]>
|
|
136
136
|
>
|
|
137
137
|
|
|
138
138
|
/**
|
|
@@ -141,8 +141,8 @@ export type PointValuesForEntity = Partial<
|
|
|
141
141
|
* start and end values and absolute and relative change columns.
|
|
142
142
|
*/
|
|
143
143
|
export type RangeValuesForEntity = Partial<
|
|
144
|
-
Record<RangeColumnKey,
|
|
145
|
-
Record<SparklineKey,
|
|
144
|
+
Record<RangeColumnKey, MinimalRow> &
|
|
145
|
+
Record<SparklineKey, VariableRow<number>[]>
|
|
146
146
|
>
|
|
147
147
|
|
|
148
148
|
export type DataTableValuesForEntity =
|
|
@@ -151,7 +151,7 @@ export type DataTableValuesForEntity =
|
|
|
151
151
|
|
|
152
152
|
export type DataTableColumnKey = PointColumnKey | RangeColumnKey | SparklineKey
|
|
153
153
|
|
|
154
|
-
export interface
|
|
154
|
+
export interface MinimalRow {
|
|
155
155
|
value?: string | number
|
|
156
156
|
displayValue?: string
|
|
157
157
|
time?: Time
|
|
@@ -24,7 +24,7 @@ import {
|
|
|
24
24
|
getUserNavigatorLanguagesNonEnglish,
|
|
25
25
|
getRegionAlternativeNames,
|
|
26
26
|
convertDaysSinceEpochToDate,
|
|
27
|
-
|
|
27
|
+
checkIsIncomeGroupName,
|
|
28
28
|
checkHasMembers,
|
|
29
29
|
Region,
|
|
30
30
|
getRegionByName,
|
|
@@ -55,7 +55,7 @@ import {
|
|
|
55
55
|
isPopulationVariableETLPath,
|
|
56
56
|
isWorldEntityName,
|
|
57
57
|
} from "../core/GrapherConstants"
|
|
58
|
-
import { CoreColumn,
|
|
58
|
+
import { CoreColumn, ChartsTable } from "../../core-table/index.js"
|
|
59
59
|
import { SortIcon } from "../controls/SortIcon"
|
|
60
60
|
import { Dropdown } from "../controls/Dropdown"
|
|
61
61
|
import { scaleLinear, type ScaleLinear } from "d3-scale"
|
|
@@ -63,13 +63,13 @@ import {
|
|
|
63
63
|
AdditionalGrapherDataFetchFn,
|
|
64
64
|
ColumnSlug,
|
|
65
65
|
EntityName,
|
|
66
|
-
|
|
66
|
+
ColumnDef,
|
|
67
67
|
ProjectionColumnInfo,
|
|
68
68
|
Time,
|
|
69
69
|
ToleranceStrategy,
|
|
70
70
|
type EntitySelectorEvent,
|
|
71
71
|
} from "../../types/index.js"
|
|
72
|
-
import { buildVariableTable } from "../core/
|
|
72
|
+
import { buildVariableTable } from "../core/LegacyToChartsTable"
|
|
73
73
|
import { DrawerContext } from "../slideInDrawer/SlideInDrawer.js"
|
|
74
74
|
import * as R from "remeda"
|
|
75
75
|
import { MapConfig } from "../mapCharts/MapConfig"
|
|
@@ -105,8 +105,8 @@ export interface EntitySelectorState {
|
|
|
105
105
|
|
|
106
106
|
export interface EntitySelectorManager {
|
|
107
107
|
entitySelectorState: Partial<EntitySelectorState>
|
|
108
|
-
table:
|
|
109
|
-
tableForSelection:
|
|
108
|
+
table: ChartsTable
|
|
109
|
+
tableForSelection: ChartsTable
|
|
110
110
|
selection: SelectionArray
|
|
111
111
|
entityType?: string
|
|
112
112
|
entityTypePlural?: string
|
|
@@ -183,7 +183,7 @@ const EXTERNAL_SORT_INDICATOR_DEFINITIONS = [
|
|
|
183
183
|
|
|
184
184
|
// then check the catalog path
|
|
185
185
|
return isPopulationVariableETLPath(
|
|
186
|
-
(column.def as
|
|
186
|
+
(column.def as ColumnDef)?.catalogPath ?? ""
|
|
187
187
|
)
|
|
188
188
|
},
|
|
189
189
|
},
|
|
@@ -388,7 +388,7 @@ export class EntitySelector extends React.Component<EntitySelectorProps> {
|
|
|
388
388
|
|
|
389
389
|
const countryRegionsWithoutIncomeGroups = localCountryInfo.regions
|
|
390
390
|
? localCountryInfo.regions.filter(
|
|
391
|
-
(region) => !
|
|
391
|
+
(region) => !checkIsIncomeGroupName(region)
|
|
392
392
|
)
|
|
393
393
|
: []
|
|
394
394
|
|
|
@@ -462,7 +462,7 @@ export class EntitySelector extends React.Component<EntitySelectorProps> {
|
|
|
462
462
|
|
|
463
463
|
private interpolateAndCombineSortColumns(
|
|
464
464
|
info: ProjectionColumnInfo
|
|
465
|
-
):
|
|
465
|
+
): ChartsTable {
|
|
466
466
|
const { projectedSlug, historicalSlug } = info
|
|
467
467
|
|
|
468
468
|
// Interpolate the historical and projected columns separately
|
|
@@ -673,11 +673,11 @@ export class EntitySelector extends React.Component<EntitySelectorProps> {
|
|
|
673
673
|
)
|
|
674
674
|
}
|
|
675
675
|
|
|
676
|
-
@computed private get inputTable():
|
|
676
|
+
@computed private get inputTable(): ChartsTable {
|
|
677
677
|
return this.manager.table
|
|
678
678
|
}
|
|
679
679
|
|
|
680
|
-
@computed private get table():
|
|
680
|
+
@computed private get table(): ChartsTable {
|
|
681
681
|
return this.manager.tableForSelection
|
|
682
682
|
}
|
|
683
683
|
|
|
@@ -1040,7 +1040,7 @@ export class EntitySelector extends React.Component<EntitySelectorProps> {
|
|
|
1040
1040
|
}
|
|
1041
1041
|
}
|
|
1042
1042
|
|
|
1043
|
-
const row = column.
|
|
1043
|
+
const row = column.dataRowByEntityNameAndTime
|
|
1044
1044
|
.get(entityName)
|
|
1045
1045
|
?.get(time)
|
|
1046
1046
|
|
|
@@ -47,7 +47,7 @@ import {
|
|
|
47
47
|
PlacedFacetSeries,
|
|
48
48
|
FacetChartManager,
|
|
49
49
|
} from "./FacetChartConstants"
|
|
50
|
-
import {
|
|
50
|
+
import { ChartsTable, CoreColumn } from "../../core-table/index.js"
|
|
51
51
|
import { autoDetectYColumnSlugs, makeSelectionArray } from "../chart/ChartUtils"
|
|
52
52
|
import { SelectionArray } from "../selection/SelectionArray"
|
|
53
53
|
import { AxisConfig } from "../axis/AxisConfig"
|
|
@@ -131,15 +131,15 @@ export class FacetChart
|
|
|
131
131
|
})
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
transformTable(table:
|
|
134
|
+
transformTable(table: ChartsTable): ChartsTable {
|
|
135
135
|
return table
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
@computed get inputTable():
|
|
138
|
+
@computed get inputTable(): ChartsTable {
|
|
139
139
|
return this.manager.table
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
@computed get transformedTable():
|
|
142
|
+
@computed get transformedTable(): ChartsTable {
|
|
143
143
|
return (
|
|
144
144
|
this.manager.transformedTable ??
|
|
145
145
|
this.transformTable(this.inputTable)
|
|
@@ -33,7 +33,7 @@ import {
|
|
|
33
33
|
FacetMapProps,
|
|
34
34
|
PlacedMapFacetSeries,
|
|
35
35
|
} from "./FacetMapConstants"
|
|
36
|
-
import {
|
|
36
|
+
import { ChartsTable } from "../../core-table/index.js"
|
|
37
37
|
import {
|
|
38
38
|
HorizontalCategoricalColorLegend,
|
|
39
39
|
HorizontalColorLegendManager,
|
|
@@ -76,15 +76,15 @@ export class FacetMap
|
|
|
76
76
|
})
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
transformTable(table:
|
|
79
|
+
transformTable(table: ChartsTable): ChartsTable {
|
|
80
80
|
return table
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
@computed get inputTable():
|
|
83
|
+
@computed get inputTable(): ChartsTable {
|
|
84
84
|
return this.manager.table
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
@computed get transformedTable():
|
|
87
|
+
@computed get transformedTable(): ChartsTable {
|
|
88
88
|
return (
|
|
89
89
|
this.manager.transformedTable ??
|
|
90
90
|
this.transformTable(this.inputTable)
|
|
@@ -95,11 +95,11 @@ export class FacetMap
|
|
|
95
95
|
return this.props.manager
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
@computed private get table():
|
|
98
|
+
@computed private get table(): ChartsTable {
|
|
99
99
|
return this.manager.table
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
@computed private get transformedTableFromGrapher():
|
|
102
|
+
@computed private get transformedTableFromGrapher(): ChartsTable | undefined {
|
|
103
103
|
return this.manager.transformedTable
|
|
104
104
|
}
|
|
105
105
|
|
|
@@ -121,7 +121,7 @@ abstract class AbstractFooter<
|
|
|
121
121
|
|
|
122
122
|
@computed protected get licenseText(): string {
|
|
123
123
|
const branding = this.manager.branding
|
|
124
|
-
if (this.manager.
|
|
124
|
+
if (this.manager.hasLegacyLogo) {
|
|
125
125
|
return branding?.licenseText ?? "CC BY"
|
|
126
126
|
}
|
|
127
127
|
return branding?.poweredByText ?? "Powered by Build Canada Charts"
|
|
@@ -129,7 +129,7 @@ abstract class AbstractFooter<
|
|
|
129
129
|
|
|
130
130
|
@computed protected get licenseUrl(): string {
|
|
131
131
|
const branding = this.manager.branding
|
|
132
|
-
if (this.manager.
|
|
132
|
+
if (this.manager.hasLegacyLogo) {
|
|
133
133
|
return (
|
|
134
134
|
branding?.licenseUrl ??
|
|
135
135
|
"https://creativecommons.org/licenses/by/4.0/"
|
|
@@ -425,7 +425,7 @@ abstract class AbstractFooter<
|
|
|
425
425
|
</>
|
|
426
426
|
)}
|
|
427
427
|
<a
|
|
428
|
-
className={this.manager.
|
|
428
|
+
className={this.manager.hasLegacyLogo ? "cclogo" : undefined}
|
|
429
429
|
href={this.licenseUrl}
|
|
430
430
|
style={{ textDecoration: "none" }}
|
|
431
431
|
{...(this.manager.isInIFrame && {
|
|
@@ -460,7 +460,7 @@ abstract class AbstractFooter<
|
|
|
460
460
|
|
|
461
461
|
// if embbedded, open the sources modal
|
|
462
462
|
if (
|
|
463
|
-
this.manager.
|
|
463
|
+
this.manager.isEmbeddedInPage ||
|
|
464
464
|
this.manager.isInIFrame
|
|
465
465
|
) {
|
|
466
466
|
this.manager.activeModal = GrapherModal.Sources
|
|
@@ -22,7 +22,7 @@ export interface FooterBranding {
|
|
|
22
22
|
export interface FooterManager extends TooltipManager, ActionButtonsManager {
|
|
23
23
|
sourcesLine?: string
|
|
24
24
|
note?: string
|
|
25
|
-
|
|
25
|
+
hasLegacyLogo?: boolean
|
|
26
26
|
originUrlWithProtocol?: string
|
|
27
27
|
detailsOrderedByReference?: string[]
|
|
28
28
|
shouldIncludeDetailsInStaticExport?: boolean
|
|
@@ -32,7 +32,7 @@ export interface FooterManager extends TooltipManager, ActionButtonsManager {
|
|
|
32
32
|
useBaseFontSize?: boolean
|
|
33
33
|
fontSize?: number
|
|
34
34
|
isInFullScreenMode?: boolean
|
|
35
|
-
|
|
35
|
+
isEmbeddedInPage?: boolean
|
|
36
36
|
isEmbeddedInADataPage?: boolean
|
|
37
37
|
hideNote?: boolean
|
|
38
38
|
hideOriginUrl?: boolean
|
|
@@ -70,13 +70,13 @@ abstract class AbstractHeader<
|
|
|
70
70
|
@computed get logo(): Logo | undefined {
|
|
71
71
|
const { manager } = this
|
|
72
72
|
if (manager.hideLogo) return undefined
|
|
73
|
-
const
|
|
73
|
+
const isDefaultLogo = !manager.logo || manager.logo === LogoOption.legacy
|
|
74
74
|
return new Logo({
|
|
75
75
|
logo: manager.logo as any,
|
|
76
|
-
isLink: !!manager.
|
|
77
|
-
// if it's the
|
|
78
|
-
heightScale: manager.isSmall && !
|
|
79
|
-
useSmallVersion: manager.isSmall &&
|
|
76
|
+
isLink: !!manager.shouldLinkToSource,
|
|
77
|
+
// if it's the legacy logo, use the small version; otherwise, decrease the size
|
|
78
|
+
heightScale: manager.isSmall && !isDefaultLogo ? 0.775 : 1,
|
|
79
|
+
useSmallVersion: manager.isSmall && isDefaultLogo,
|
|
80
80
|
})
|
|
81
81
|
}
|
|
82
82
|
|
package/src/grapher/index.ts
CHANGED
|
@@ -45,8 +45,8 @@ export { ColorScale } from "./color/ColorScale"
|
|
|
45
45
|
export { ColorScaleConfig } from "./color/ColorScaleConfig"
|
|
46
46
|
export { ColorScheme } from "./color/ColorScheme"
|
|
47
47
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
getColorNameDistinctAndSemanticPalettes,
|
|
49
|
+
getColorNameDistinctLinesAndSemanticPalettes,
|
|
50
50
|
} from "./color/CustomSchemes"
|
|
51
51
|
export { ColorSchemes } from "./color/ColorSchemes"
|
|
52
52
|
export { DimensionSlot } from "./chart/DimensionSlot"
|
|
@@ -75,9 +75,9 @@ export { GrapherAnalytics } from "./core/GrapherAnalytics"
|
|
|
75
75
|
export { hydrateGlobalEntitySelectorIfAny } from "./controls/globalEntitySelector/GlobalEntitySelector"
|
|
76
76
|
export { legacyToCurrentGrapherUrl } from "./core/GrapherUrlMigrations"
|
|
77
77
|
export {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
} from "./core/
|
|
78
|
+
legacyToChartsTableAndDimensions,
|
|
79
|
+
legacyToChartsTableAndDimensionsWithMandatorySlug,
|
|
80
|
+
} from "./core/LegacyToChartsTable"
|
|
81
81
|
export { getErrorMessageRelatedQuestionUrl } from "./core/relatedQuestion"
|
|
82
82
|
export { MapChartState } from "./mapCharts/MapChartState"
|
|
83
83
|
export { MapConfig } from "./mapCharts/MapConfig"
|
|
@@ -142,11 +142,11 @@ export type { ChartSeries } from "./chart/ChartInterface"
|
|
|
142
142
|
// Test data helpers (useful for demos and testing)
|
|
143
143
|
export {
|
|
144
144
|
fakeEntities,
|
|
145
|
-
|
|
145
|
+
createTestDataset,
|
|
146
146
|
type TestData,
|
|
147
147
|
type TestMetadata,
|
|
148
|
-
} from "./testData/
|
|
149
|
-
export { LifeExpectancyGrapher } from "./testData/
|
|
148
|
+
} from "./testData/TestData"
|
|
149
|
+
export { LifeExpectancyGrapher } from "./testData/TestData.sample"
|
|
150
150
|
export type { LineChartState } from "./lineCharts/LineChartState.js"
|
|
151
151
|
export type { SlopeChartState } from "./slopeCharts/SlopeChartState"
|
|
152
152
|
export type { DiscreteBarChartState } from "./barCharts/DiscreteBarChartState.js"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _ from "lodash-es"
|
|
2
|
-
import {
|
|
2
|
+
import { ChartsTable } from "../../core-table/index.js"
|
|
3
3
|
import {
|
|
4
4
|
AxisAlign,
|
|
5
5
|
AxisConfigInterface,
|
|
@@ -91,7 +91,7 @@ export function getColorKey({
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
export function getAnnotationsMap(
|
|
94
|
-
table:
|
|
94
|
+
table: ChartsTable,
|
|
95
95
|
slug: ColumnSlug
|
|
96
96
|
): AnnotationsMap | undefined {
|
|
97
97
|
return table
|
|
@@ -117,7 +117,7 @@ export function getYAxisConfigDefaults(
|
|
|
117
117
|
nice: config?.scaleType !== ScaleType.log,
|
|
118
118
|
// if we only have a single y value (probably 0), we want the
|
|
119
119
|
// horizontal axis to be at the bottom of the chart.
|
|
120
|
-
// see
|
|
120
|
+
// see # legacy PR 975#issuecomment-890798547
|
|
121
121
|
singleValueAxisPointAlign: AxisAlign.start,
|
|
122
122
|
// default to 0 if not set
|
|
123
123
|
min: 0,
|
|
@@ -22,7 +22,7 @@ import {
|
|
|
22
22
|
DEFAULT_LINE_COLOR,
|
|
23
23
|
} from "./LineChartConstants"
|
|
24
24
|
import {
|
|
25
|
-
|
|
25
|
+
ChartsTable,
|
|
26
26
|
CoreColumn,
|
|
27
27
|
isNotErrorValue,
|
|
28
28
|
} from "../../core-table/index.js"
|
|
@@ -37,7 +37,7 @@ import { ColorScheme } from "../color/ColorScheme"
|
|
|
37
37
|
import { SelectionArray } from "../selection/SelectionArray"
|
|
38
38
|
import { ColorScale, ColorScaleManager } from "../color/ColorScale"
|
|
39
39
|
import { ColorScaleConfig } from "../color/ColorScaleConfig"
|
|
40
|
-
import {
|
|
40
|
+
import { NO_DATA_GRAY } from "../color/ColorConstants"
|
|
41
41
|
import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner"
|
|
42
42
|
import { getColorKey, getDisplayName, getSeriesName } from "./LineChartHelpers"
|
|
43
43
|
import { FocusArray } from "../focus/FocusArray"
|
|
@@ -48,8 +48,8 @@ export class LineChartState implements ChartState, ColorScaleManager {
|
|
|
48
48
|
manager: LineChartManager
|
|
49
49
|
|
|
50
50
|
colorScale: ColorScale
|
|
51
|
-
defaultBaseColorScheme = ColorSchemeName.
|
|
52
|
-
defaultNoDataColor =
|
|
51
|
+
defaultBaseColorScheme = ColorSchemeName.DistinctLines
|
|
52
|
+
defaultNoDataColor = NO_DATA_GRAY
|
|
53
53
|
|
|
54
54
|
constructor({ manager }: { manager: LineChartManager }) {
|
|
55
55
|
this.manager = manager
|
|
@@ -57,18 +57,18 @@ export class LineChartState implements ChartState, ColorScaleManager {
|
|
|
57
57
|
makeObservable(this)
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
@computed get inputTable():
|
|
60
|
+
@computed get inputTable(): ChartsTable {
|
|
61
61
|
return this.manager.table
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
@computed get transformedTableFromGrapher():
|
|
64
|
+
@computed get transformedTableFromGrapher(): ChartsTable {
|
|
65
65
|
return (
|
|
66
66
|
this.manager.transformedTable ??
|
|
67
67
|
this.transformTable(this.inputTable)
|
|
68
68
|
)
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
@computed get transformedTable():
|
|
71
|
+
@computed get transformedTable(): ChartsTable {
|
|
72
72
|
let table = this.transformedTableFromGrapher
|
|
73
73
|
// The % growth transform cannot be applied in transformTable() because it will filter out
|
|
74
74
|
// any rows before startHandleTimeBound and change the timeline bounds.
|
|
@@ -82,7 +82,7 @@ export class LineChartState implements ChartState, ColorScaleManager {
|
|
|
82
82
|
return table
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
transformTable(table:
|
|
85
|
+
transformTable(table: ChartsTable): ChartsTable {
|
|
86
86
|
table = table.filterByEntityNames(
|
|
87
87
|
this.selectionArray.selectedEntityNames
|
|
88
88
|
)
|
|
@@ -114,7 +114,7 @@ export class LineChartState implements ChartState, ColorScaleManager {
|
|
|
114
114
|
return table
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
transformTableForSelection(table:
|
|
117
|
+
transformTableForSelection(table: ChartsTable): ChartsTable {
|
|
118
118
|
// if entities with partial data are not plotted,
|
|
119
119
|
// make sure they don't show up in the entity selector
|
|
120
120
|
if (this.missingDataStrategy === MissingDataStrategy.hide) {
|
|
@@ -658,7 +658,7 @@ export class ChoroplethGlobe extends React.Component<{
|
|
|
658
658
|
override componentDidMount(): void {
|
|
659
659
|
// rotate to the selected region
|
|
660
660
|
if (isValidGlobeRegionName(this.mapConfig.region)) {
|
|
661
|
-
this.globeController.
|
|
661
|
+
this.globeController.jumpToContinent(this.mapConfig.region)
|
|
662
662
|
}
|
|
663
663
|
|
|
664
664
|
document.addEventListener("touchstart", this.onDocumentClick, {
|
|
@@ -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
|