Skip to content

Commit

Permalink
Temporary Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@danyx23
danyx23 committed Oct 24, 2023
1 parent 1a9bcfc commit 487bef0
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 61 deletions.
60 changes: 60 additions & 0 deletions packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<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">
<SimpleMarkdownText
text={props.descriptionProcessing}
/>
</div>
</div>
)}
</>
)
}
2 changes: 2 additions & 0 deletions packages/@ourworldindata/components/src/index.ts
View file
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
67 changes: 6 additions & 61 deletions site/DataPageV2Content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -443,67 +444,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

0 comments on commit 487bef0

Please sign in to comment.