diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx new file mode 100644 index 00000000000..86486af8016 --- /dev/null +++ b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx @@ -0,0 +1,60 @@ +import React from "react" +import { SimpleMarkdownText } from "../SimpleMarkdownText.js" + +export interface IndicatorProcessingProps { + descriptionProcessing: string | undefined +} + +export const IndicatorProcessing = (props: IndicatorProcessingProps) => { + return ( + <> +
+

+ How we process data at Our World in Data +

+
+
+

+ All data and visualizations on Our World in Data + rely on data sourced from one or several original + data providers. Preparing this original data + involves several processing steps. Depending on the + data, this can include standardizing country names + and world region definitions, converting units, + calculating derived indicators such as per capita + measures, as well as adding or adapting metadata + such as the name or the description given to an + indicator. +

+

+ At the link below you can find a detailed + description of the structure of our data pipeline, + including links to all the code used to prepare data + across Our World in Data. +

+
+ + Read about our data pipeline + +
+
+ {props.descriptionProcessing && ( +
+
+ Notes on our processing step for this indicator +
+
+ +
+
+ )} + + ) +} diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts index 249d02cf71a..3ba23fb1bda 100644 --- a/packages/@ourworldindata/components/src/index.ts +++ b/packages/@ourworldindata/components/src/index.ts @@ -28,6 +28,8 @@ export { ExpandableToggle } from "./ExpandableToggle/ExpandableToggle.js" export { IndicatorBrief } from "./IndicatorBrief/IndicatorBrief.js" +export { IndicatorProcessing } from "./IndicatorProcessing/IndicatorProcessing.js" + export { IndicatorSources, type OriginSubset, diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx index eec59fdb83e..64cb50ce8a6 100644 --- a/site/DataPageV2Content.tsx +++ b/site/DataPageV2Content.tsx @@ -8,6 +8,7 @@ import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID, OriginSubset, IndicatorSources, + IndicatorProcessing, } from "@ourworldindata/components" import ReactDOM from "react-dom" import { GrapherWithFallback } from "./GrapherWithFallback.js" @@ -443,67 +444,11 @@ export const DataPageV2Content = ({ Sources and processing -
-

- How we process data at Our World in Data -

-
-
-

- All data and visualizations on - Our World in Data rely on data - sourced from one or several - original data providers. - Preparing this original data - involves several processing - steps. Depending on the data, - this can include standardizing - country names and world region - definitions, converting units, - calculating derived indicators - such as per capita measures, as - well as adding or adapting - metadata such as the name or the - description given to an - indicator. -

-

- At the link below you can find a - detailed description of the - structure of our data pipeline, - including links to all the code - used to prepare data across Our - World in Data. -

-
- - Read about our data pipeline - -
-
- {datapageData?.descriptionProcessing && ( -
-
- Notes on our processing step for - this indicator -
-
- -
-
- )} +