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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 36x 36x 1x 1x 36x 36x 36x 1x 1x 36x 36x 1x 1x 36x 36x 1x 36x 36x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 1x 1x | import * as React from "react"
import { computed } from "mobx"
import { OWID_LOGO_SVG, CORE_LOGO_SVG, GV_LOGO_SVG } from "./LogosSVG"
export enum LogoOption {
owid = "owid",
"core+owid" = "core+owid",
"gv+owid" = "gv+owid",
}
interface LogoAttributes {
svg: string
width: number
height: number
targetHeight: number
url?: string
}
const logos: Record<LogoOption, LogoAttributes> = {
owid: {
svg: OWID_LOGO_SVG,
width: 210,
height: 120,
targetHeight: 35,
url: "https://ourworldindata.org",
},
"core+owid": {
svg: CORE_LOGO_SVG,
width: 102,
height: 37,
targetHeight: 35,
},
"gv+owid": {
svg: GV_LOGO_SVG,
width: 420,
height: 350,
targetHeight: 52,
},
}
interface LogoProps {
logo?: LogoOption
isLink: boolean
fontSize: number
}
export class Logo {
props: LogoProps
constructor(props: LogoProps) {
this.props = props
}
@computed private get spec(): LogoAttributes {
return this.props.logo !== undefined
? logos[this.props.logo]
: logos.owid
}
@computed private get scale(): number {
return this.spec.targetHeight / this.spec.height
}
@computed get width(): number {
return this.spec.width * this.scale
}
@computed get height(): number {
return this.spec.height * this.scale
}
renderSVG(targetX: number, targetY: number): JSX.Element {
const { scale } = this
const svg =
(this.spec.svg.match(/<svg>(.*)<\/svg>/) || "")[1] || this.spec.svg
return (
<g
transform={`translate(${Math.round(
targetX
)}, ${targetY}) scale(${parseFloat(scale.toFixed(2))})`}
dangerouslySetInnerHTML={{ __html: svg }}
/>
)
}
renderHTML(): JSX.Element {
const { spec } = this
const props: React.HTMLAttributes<HTMLDivElement & HTMLAnchorElement> =
{
className: "logo",
dangerouslySetInnerHTML: { __html: spec.svg },
style: { height: `${spec.targetHeight}px` },
}
if (this.props.isLink || !spec.url) return <div {...props} />
return <a {...props} href={spec.url} target="_blank" rel="noopener" />
}
}
|