File size: 3,050 Bytes
0c20ea8 |
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 |
import { useState, useEffect } from "react";
import ParentSize from "@visx/responsive/lib/components/ParentSize";
import PieChart from "../../components/charts/pieChart/Pie";
import { Poi } from "../../redux/types/Poi";
import LegendChart from "../../components/generalInformation/legend/Legend";
import CloudWord from "../../components/charts/wordCloudChart/CloudWord";
import { characterizeSocioDemographicData } from "../../algorithm/WordCloud";
type DemographicsSectionProps = {
selectedPoi: Poi;
};
const DemographicsSection: React.FC<DemographicsSectionProps> = ({
selectedPoi,
}) => {
return (
<div className="demographicsSection">
<div className="mainDemoPie">
<div className="mainDemoPieTitle">Total Socio Demographics</div>
<ParentSize>
{({ width, height }) => (
<PieChart
data={selectedPoi?.data.socio_demography}
width={width}
height={height}
flag={0}
/>
)}
</ParentSize>
</div>
<div className="otherDemoPieWrapper">
<div className="menAndWomenPies">
<div className="menPie">
<div className="weekDistributionTitle">
Masculine Socio Demographics
</div>
<ParentSize>
{({ width, height }) => (
<PieChart
data={selectedPoi?.data.socio_demography.filter(
(item) => item.gender.toUpperCase() === "MALE"
)}
width={width}
height={height}
flag={1}
/>
)}
</ParentSize>
</div>
<div className="womenPie">
<div className="weekDistributionTitle">
Feminine Socio Demographics
</div>
<ParentSize>
{({ width, height }) => (
<PieChart
data={selectedPoi?.data.socio_demography.filter(
(item) => item.gender.toUpperCase() === "FEMALE"
)}
width={width}
height={height}
flag={2}
/>
)}
</ParentSize>
</div>
</div>
<div className="LegendChart">
<div className="wordCloud">
<ParentSize>
{({ width, height }) => (
<LegendChart width={width} height={height} />
)}
</ParentSize>
</div>
<div className="wordCloud">
<ParentSize>
{({ width, height }) => (
<CloudWord
demographicWords={characterizeSocioDemographicData(
selectedPoi?.data.socio_demography
)}
width={width}
height={height - 15}
/>
)}
</ParentSize>
</div>
</div>
</div>
</div>
);
};
export default DemographicsSection;
|