Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { faChartLine } from "@fortawesome/free-solid-svg-icons/faChartLine"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import React, { useEffect, useState } from "react"
import ReactDOM from "react-dom"
import { DataValueProps } from "../clientUtils/owidTypes"
import { Grapher } from "../grapher/core/Grapher"
import { ENV } from "../settings/clientSettings"
import { DataValue, processTemplate } from "./DataValue"
import { SiteAnalytics } from "./SiteAnalytics"
const AnnotatingDataValue_name = "AnnotatingDataValue"
const analytics = new SiteAnalytics(ENV)
export const AnnotatingDataValue = ({
dataValueProps,
grapherInstance,
}: {
dataValueProps: DataValueProps
grapherInstance?: Grapher
}) => {
const [isInteractive, setInteractive] = useState(false)
const [label] = useState(processTemplate(dataValueProps))
const renderAnnotationInGrapher = () => {
grapherInstance?.renderAnnotation({
entityName: dataValueProps.entityName,
year: Number(dataValueProps.year),
})
analytics.logDataValueAnnotate(label)
}
useEffect(() => {
setInteractive(true)
}, [])
return (
<span className="annotating-data-value">
<script
data-type={AnnotatingDataValue_name}
type="component/props"
dangerouslySetInnerHTML={{
__html: JSON.stringify(dataValueProps),
}}
></script>
<span
onMouseEnter={renderAnnotationInGrapher}
onMouseLeave={grapherInstance?.resetAnnotation}
className={isInteractive ? "interactive" : ""}
>
<DataValue label={label}></DataValue>
{isInteractive ? <FontAwesomeIcon icon={faChartLine} /> : null}
</span>
</span>
)
}
export function hydrateAnnotatingDataValue(
grapherInstance: Grapher,
figure: Element
) {
// todo: handle more layouts
const annotatingDataValueConfigInPreviousColumn:
| NodeListOf<Element>
| undefined = figure
?.closest(".wp-block-column")
?.previousElementSibling?.querySelectorAll(
`[data-type=${AnnotatingDataValue_name}]`
)
annotatingDataValueConfigInPreviousColumn?.forEach((config) => {
const dataValueProps = JSON.parse(config.innerHTML)
ReactDOM.hydrate(
<AnnotatingDataValue
dataValueProps={dataValueProps}
grapherInstance={grapherInstance}
/>,
config.parentElement
)
})
}
|