Init

2024-10-12 02:08:44 +03:00
commit 680168f6de
34 changed files with 21951 additions and 0 deletions
@@ -0,0 +1,91 @@
+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;