Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data pages: extract shared component IndicatorProcessing #2841

Merged
merged 1 commit into from
Oct 24, 2023
+71 −63
Merged

Data pages: extract shared component IndicatorProcessing #2841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from "react"
import { SimpleMarkdownText } from "../SimpleMarkdownText.js"

export interface IndicatorProcessingProps {
descriptionProcessing: string | undefined
}

export const IndicatorProcessing = (props: IndicatorProcessingProps) => {
return (
<>
<div className="data-processing grid span-cols-12">
<h3 className="data-processing__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
How we process data at Our World in Data
</h3>
<div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
<div className="data-processing__content">
<p className="data-processing__paragraph">
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.
</p>
<p className="data-processing__paragraph">
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.
</p>
</div>
<a
href="https://docs.owid.io/projects/etl/"
target="_blank"
rel="nopener noreferrer"
className="data-processing__link"
>
Read about our data pipeline
</a>
</div>
</div>
{props.descriptionProcessing && (
<div className="variable-processing-info col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
<h5 className="variable-processing-info__header">
Notes on our processing step for this indicator
</h5>
<div className="variable-processing-info__description">
<p className="article-block__text">
<SimpleMarkdownText
text={props.descriptionProcessing}
/>
</p>
</div>
</div>
)}
</>
)
}
2 changes: 2 additions & 0 deletions packages/@ourworldindata/components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
70 changes: 7 additions & 63 deletions site/DataPageV2Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { useEffect } from "react"
import { Grapher, GrapherInterface } from "@ourworldindata/grapher"
import {
markdownToEnrichedTextBlock,
IndicatorBrief,
CodeSnippet,
REUSE_THIS_WORK_SECTION_ID,
OriginSubset,
IndicatorSources,
DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
IndicatorProcessing,
} from "@ourworldindata/components"
import ReactDOM from "react-dom"
import { GrapherWithFallback } from "./GrapherWithFallback.js"
Expand Down Expand Up @@ -167,7 +167,7 @@ export const DataPageV2Content = ({
const lastUpdated = dayjs(datapageData.lastUpdated, ["YYYY", "YYYY-MM-DD"])
const yearOfUpdate = lastUpdated.year()
const citationShort = `${attributionPotentiallyShortened} – with ${processedAdapted} by Our World In Data (${yearOfUpdate})`
const citationLonger = `${attributionPotentiallyShortened} – with ${processedAdapted} by Our World In Data (${yearOfUpdate})`
const citationLonger = `${attributionUnshortened} – with ${processedAdapted} by Our World In Data (${yearOfUpdate})`
const originsLong = uniq(
datapageData.origins.map(
(o) => `${o.producer}, ${o.title ?? o.titleSnapshot}`
Expand Down Expand Up @@ -443,67 +443,11 @@ export const DataPageV2Content = ({
Sources and processing
</h2>
<IndicatorSources origins={origins} />
<div className="data-processing grid span-cols-12">
<h3 className="data-processing__heading span-cols-2 span-lg-cols-3 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
How we process data at Our World in Data
</h3>
<div className="col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
<div className="data-processing__content">
<p className="data-processing__paragraph">
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.
</p>
<p className="data-processing__paragraph">
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.
</p>
</div>
<a
href="https://docs.owid.io/projects/etl/"
target="_blank"
rel="nopener noreferrer"
className="data-processing__link"
>
Read about our data pipeline
</a>
</div>
</div>
{datapageData?.descriptionProcessing && (
<div className="variable-processing-info col-start-4 span-cols-6 col-lg-start-5 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12">
<h5 className="variable-processing-info__header">
Notes on our processing step for
this indicator
</h5>
<div className="variable-processing-info__description">
<ArticleBlocks
blocks={[
markdownToEnrichedTextBlock(
datapageData.descriptionProcessing
),
]}
containerType="datapage"
/>
</div>
</div>
)}
<IndicatorProcessing
descriptionProcessing={
datapageData.descriptionProcessing
}
/>
</div>
<div className="section-wrapper grid">
<h2
Expand Down
Loading