92 lines
3.2 KiB
React
92 lines
3.2 KiB
React
|
import React from 'react';
|
||
|
|
|
||
|
|
import {Tooltip} from "react-tooltip";
|
||
|
|
import '../../styles/styles.scss';
|
||
|
|
|
||
|
|
const SOCIAL_MEDIA_BREAKPOINTS = {
|
||
|
|
Twitter: 11.06,
|
||
|
|
Instagram: 11.93
|
||
|
|
}
|
||
|
|
|
||
|
|
const SOCIAL_MEDIA_MATRIX = {
|
||
|
|
Twitter: [
|
||
|
|
'Social_Media_Influence',
|
||
|
|
null,
|
||
|
|
'Tweet_Views_Relative_to_Average',
|
||
|
|
'Tweet_Reposts_Relative_to_Average',
|
||
|
|
'Tweet_Quotes_Relative_to_Average',
|
||
|
|
'Tweet_Likes_Relative_to_Average',
|
||
|
|
'Tweet_Bookmarks_Relative_to_Average',
|
||
|
|
null,
|
||
|
|
'Tweet_Views',
|
||
|
|
'Tweet_Reposts',
|
||
|
|
'Tweet_Quotes',
|
||
|
|
'Tweet_Likes',
|
||
|
|
'Tweet_Bookmarks',
|
||
|
|
],
|
||
|
|
Instagram: [
|
||
|
|
"Social_Media_Influence",
|
||
|
|
null,
|
||
|
|
"Post_Comments_Relative_to_Average",
|
||
|
|
"Post_Likes_Relative_to_Average",
|
||
|
|
null,
|
||
|
|
"Post_Comments",
|
||
|
|
"Post_Likes",
|
||
|
|
]
|
||
|
|
}
|
||
|
|
const SocialMediaTooltips = ({product}) => {
|
||
|
|
const {socialMedia, name} = product;
|
||
|
|
const getTooltips = () => Object.keys(socialMedia)
|
||
|
|
.map(key => {
|
||
|
|
return {...socialMedia[key], type: key}
|
||
|
|
})
|
||
|
|
.sort((prev, current) => current.Social_Media_Influence - prev.Social_Media_Influence)
|
||
|
|
.map(smi => {
|
||
|
|
if (smi.found) {
|
||
|
|
return (<div className="tooltip__wrapper" key={smi.Social_Media_Influence + name}>
|
||
|
|
<div
|
||
|
|
className={`tooltip__confidence tooltip__confidence--${smi.Social_Media_Influence > SOCIAL_MEDIA_BREAKPOINTS[smi.type] ? "high" : "average"}`}
|
||
|
|
>
|
||
|
|
{smi.Social_Media_Influence}
|
||
|
|
</div>
|
||
|
|
<div className="tooltip__information"
|
||
|
|
data-tooltip-id={`${name}-${smi.type}`}
|
||
|
|
>
|
||
|
|
i
|
||
|
|
</div>
|
||
|
|
<Tooltip className="tooltip"
|
||
|
|
id={`${name}-${smi.type}`}
|
||
|
|
style={{
|
||
|
|
fontSize: "12px",
|
||
|
|
padding: "32px",
|
||
|
|
opacity: 1,
|
||
|
|
background: "#F0F0F0",
|
||
|
|
color: "#484848",
|
||
|
|
zIndex: 9999
|
||
|
|
}}
|
||
|
|
place="right-end">
|
||
|
|
<h3 className="tooltip__title">{smi.type}</h3>
|
||
|
|
{SOCIAL_MEDIA_MATRIX[smi.type]
|
||
|
|
.map(line => {
|
||
|
|
return line ? (<div
|
||
|
|
className={`tooltip__data tooltip__data--${line}`}
|
||
|
|
key={line + name}>
|
||
|
|
<div>{line?.replaceAll("_", " ")} </div>
|
||
|
|
<div>
|
||
|
|
<b>{smi[line].toLocaleString()}{line?.includes("Relative") ? "%" : ""}</b>
|
||
|
|
</div>
|
||
|
|
</div>) : <hr/>
|
||
|
|
})}
|
||
|
|
</Tooltip>
|
||
|
|
</div>);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{getTooltips()}</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default SocialMediaTooltips;
|