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 ) }) } |