ProgressionChart2022.js
4.41 KB
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
import React, { memo } from "react";
import { useTranslation, Trans } from 'react-i18next';
const ProgressionChart2022 = () => {
const { t } = useTranslation();
return (
<>
<svg width="1024px" height="400px" viewBox="0 0 1024 400" version="1.1">
<title>sectors-2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="sectors-2">
<circle cx="450" cy="152" r="15" data-r="15" id="Fill-115" fill="#A4D6CF"></circle>
<circle cx="570" cy="165" r="6" data-r="6" id="Fill-116" fill="#6BC1BA"></circle>
<circle cx="600" cy="225" r="6" data-r="6" id="Fill-117" fill="#A4D6CF"></circle>
<circle cx="505" cy="270" r="10" data-r="10" id="Fill-118" fill="#DAEEEB"></circle>
<g id="Professional-Valuation-Services" className="115" opacity={0} transform={document.documentElement.lang === "fr-FR" ? "translate(0.000000, 160.000000)" : "translate(30.000000, 160.000000)" } fill="#1B193F" font-family="Gotham-Book, Gotham" font-size="18" font-weight="300">
<text id="Professional-Valuati">
<tspan x="0" y="0">{t('pro.professional')}</tspan>
<tspan x={document.documentElement.lang === "fr-FR" ? "78" : "115" } y="0">{t('pro.Valuation')}</tspan>
<tspan x={document.documentElement.lang === "fr-FR" ? "210" : "205" } y="0">{t('pro.Services')}</tspan>
</text>
</g>
<g id="Financial-Services" className="118" opacity={0} transform={document.documentElement.lang === "fr-FR" ? "translate(175.000000, 262.000000)" : "translate(175.000000, 262.000000)" } fill="#1B193F" font-family="Gotham-Book, Gotham" font-size="17" font-weight="300">
<text>
<tspan x={document.documentElement.lang === "fr-FR" ? "50" : "0" } y="0">{t('pro.Financial Services')}</tspan>
<tspan x="85" y="25">{t('pro.Government')}</tspan>
</text>
</g>
<g id="Other" className="116" opacity={0} transform={document.documentElement.lang === "fr-FR" ? "translate(710.000000, 218.000000)" : "translate(710.000000, 218.000000)" } fill="#1B193F" font-family="Gotham-ExtraLight, Gotham" font-size="16" font-weight="300">
<text>
<tspan x="0.802" y="10">{t('pro.Retired')}</tspan>
</text>
</g>
<g id="50%" class="115" opacity={0} transform="translate(415.000000, 165.000000)" fill="#221D58" font-family="Gotham-Bold, Gotham" font-size="36" font-weight="bold"><text id="49%"><tspan x="0" y="0">52%</tspan></text></g>
<g id="34%" class="118" opacity={0} transform="translate(470, 265)" fill="#1B193F" font-family="Gotham-Bold, Gotham" font-size="34" font-weight="bold"><text><tspan x="0.5856" y="14.800781">41%</tspan></text></g>
<g id="10%" class="116" opacity={0} transform="translate(557.000000, 158.000000)" fill="#1B193F" font-family="Gotham-Bold, Gotham" font-size="22" font-weight="bold"><text><tspan x="0.2997" y="14.800781">4%</tspan></text></g>
<g id="Retired" className="117" opacity={0} transform="translate(695.000000, 160.000000)" fill="#FFFFFF" font-family="Gotham-Bold, Gotham" font-size="16" font-weight="300">
<text>
<tspan x="0" y="9">{t('pro.Other')}</tspan>
</text>
</g>
<g id="6%" class="117" opacity={0} transform="translate(585.000000, 218.000000)" fill="#221D58" font-family="Gotham-Bold, Gotham" font-size="22" font-weight="700"><text><tspan x="0.2495" y="14.800781">3%</tspan></text></g>
<path class="115-line" opacity={0} d="M320,155 L390,155" id="Stroke-210" stroke="#AED5CF" stroke-width="1.5"></path>
<path class="118-line" opacity={0} d="M410,270 L460,270" id="Stroke-210" stroke="#DEEDEB" stroke-width="1.5"></path>
<path class="116-line" opacity={0} d="M680,165 L595,165" id="Stroke-210" stroke="#7FBFBA" stroke-width="1.5"></path>
<path class="117-line" opacity={0} d="M700,225 L625,225" id="Stroke-210" stroke="#AED5CF" stroke-width="1.5"></path>
</g>
</g>
</svg>
</>
)
}
export default memo(ProgressionChart2022);