ProgressionChart2021.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { memo } from "react";
import { useTranslation, Trans } from 'react-i18next';
const ProgressionChart2021 = () => {
const { t } = useTranslation();
return (
<>
<svg width="240px" height="318px" viewBox="0 0 240 318" 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="94" cy="102" r="0" data-r="85" id="Fill-115" fill="#A4D6CF" ></circle>
<circle cx="78" cy="217" r="0" data-r="31" id="Fill-116" fill="#6BC1BA"></circle>
<circle cx="96" cy="265" r="0" data-r="21" id="Fill-117" fill="#A4D6CF"></circle>
<circle cx="175" cy="230" r="0" data-r="65" id="Fill-118" fill="#DAEEEB"></circle>
<g id="Professional-Valuation-Services" className="115" opacity={0} transform={document.documentElement.lang === "fr-FR" ? "translate(50.000000, 83.000000)" : "translate(50.000000, 83.000000)" } fill="#1B193F" font-family="Gotham-ExtraLight, Gotham" font-size="18" font-weight="300">
<text id="Professional-Valuati">
<tspan x="0.273" y="14">{t('pro.professional')}</tspan>
<tspan x={t('pro.valuation.x')} y="35.6000073">{t('pro.Valuation')}</tspan>
<tspan x={t('pro.services.x')} y="57.2000146">{t('pro.Services')}</tspan>
</text>
</g>
<g id="Financial-Services" className="118" opacity={0} transform={document.documentElement.lang === "fr-FR" ? "translate(125.000000, 224.000000)" : "translate(125.000000, 224.000000)" } fill="#1B193F" font-family="Gotham-ExtraLight, Gotham" font-size="13" font-weight="300">
<text>
<tspan x="0.677" y="10">{t('pro.Financial Services')}</tspan>
<tspan x="17.395" y="25.6000053">{t('pro.Industry')}</tspan>
<tspan x="18.5585" y="41.2000105">{t('pro.Government')}</tspan>
</text>
</g>
<g id="Other" className="116" opacity={0} transform={document.documentElement.lang === "fr-FR" ? "translate(55.000000, 224.000000)" : "translate(63.000000, 224.000000)" } fill="#1B193F" font-family="Gotham-ExtraLight, Gotham" font-size="10" font-weight="300">
<text>
<tspan x="0.802" y="10">{t('pro.Retired')}</tspan>
</text>
</g>
<g id="50%" className="115" opacity={0} transform="translate(73.000000, 58.000000)" fill="#1B193F" font-family="Gotham-Bold, Gotham" font-size="18" font-weight="bold">
<text id="49%">
<tspan x="0.8076" y="14.8007812">50%</tspan>
</text>
</g>
<g id="34%" className="118" opacity={0} transform="translate(154.000000, 201.000000)" fill="#1B193F" font-family="Gotham-Bold, Gotham" font-size="18" font-weight="bold">
<text>
<tspan x="0.5856" y="14.800781">39%</tspan>
</text>
</g>
<g id="10%" className="116" opacity={0} transform="translate(66.000000, 204.000000)" fill="#1B193F" font-family="Gotham-Bold, Gotham" font-size="18" font-weight="bold">
<text>
<tspan x="0.2997" y="14.800781">7%</tspan>
</text>
</g>
<g id="Retired" className="117" opacity={0} transform="translate(76.000000, 308.000000)" fill="#FFFFFF" font-family="Gotham-ExtraLight, Gotham" font-size="11" font-weight="300">
<text>
<tspan x="0" y="9">{t('pro.Other')}</tspan>
</text>
</g>
<g id="6%" className="117" opacity={0} transform="translate(81.000000, 288.000000)" fill="#FFFFFF" font-family="Gotham-Medium, Gotham" font-size="18" font-weight="400">
<text>
<tspan x="0.2495" y="14.800781">4%</tspan>
</text>
</g>
<path className="117" opacity={0} d="M94.4777,289.2349 L94.4777,263.4129" id="Stroke-210" stroke="#FFFFFF" stroke-width="0.5"></path>
</g>
</g>
</svg>
</>
)
}
export default memo(ProgressionChart2021);