Added attention on bubble && scatter charts

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, createContext } from "react";
 
 import OpenSettingsIconDark from "./assets/open-settings-icon-dark-theme.png";
 import OpenSettingsIconLight from "./assets/open-settings-icon-light-theme.png";
@@ -9,6 +9,8 @@ import Charts from "./components/Charts/Charts";
 import Donwload from "./components/Donwload/Donwload";
 import ThemeChanger from "./components/ThemeChanger/ThemeChanger";
 
+export const Theme = createContext("without provider");
+
 function App() {
   const [theme, setTheme] = useState(true);
 
@@ -41,7 +43,9 @@ function App() {
       <div className={`content-${theme ? "dark" : "light"}`}>
         <div className={`chart-container-${theme ? "dark" : "light"}`}>
           {/* ValueState - which radio button is clicked */}
-          <Charts valueState={radioValue} data={data} />
+          <Theme.Provider value={theme}>
+            <Charts valueState={radioValue} data={data} />
+          </Theme.Provider>
         </div>
         <Settings
           open={settingsOpen}

src/components/Charts/Attention/Attention.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useContext } from "react";
+import { Theme } from "../../../App";
+import AttentionIcon from "../../../assets/attention-icon.png";
+
+function Attention() {
+  const [isOpen, setOpen] = useState(false);
+
+  const theme = useContext(Theme);
+
+  function changeOpen() {
+    setOpen(!isOpen);
+  }
+
+  return (
+    <>
+      <div className="attention">
+        <img src={AttentionIcon} alt="attention icon" onClick={changeOpen} />
+        <div
+          className={`attention-content__${
+            isOpen ? "visible" : "hidden"
+          } attention-content__${theme ? "dark" : "light"}`}
+        >
+          <h2>Внимание!</h2>
+          <p>
+            Этот график принимает только числовые значения (в том числе и в
+            названии столбцов)
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Attention;

src/components/Charts/Bubble/Bubble.jsx

@@ -1,19 +1,23 @@
 import { Bubble } from "react-chartjs-2";
+import Attention from "../Attention/Attention";
 
 function BubbleChart(props) {
   return (
-    <Bubble
-      data={{
-        labels: props.data.labels,
-        datasets: [
-          {
-            id: 1,
-            label: "",
-            data: props.data.data,
-          },
-        ],
-      }}
-    />
+    <>
+      <Bubble
+        data={{
+          labels: props.data.labels,
+          datasets: [
+            {
+              id: 1,
+              label: "",
+              data: props.data.data,
+            },
+          ],
+        }}
+      />
+      <Attention />
+    </>
   );
 }
 

src/components/Charts/Scatter/Scatter.jsx

@@ -1,19 +1,23 @@
 import { Scatter } from "react-chartjs-2";
+import Attention from "../Attention/Attention";
 
 function ScatterChart(props) {
   return (
-    <Scatter
-      data={{
-        labels: props.data.labels,
-        datasets: [
-          {
-            id: 1,
-            label: "",
-            data: props.data.data,
-          },
-        ],
-      }}
-    />
+    <>
+      <Scatter
+        data={{
+          labels: props.data.labels,
+          datasets: [
+            {
+              id: 1,
+              label: "",
+              data: props.data.data,
+            },
+          ],
+        }}
+      />
+      <Attention />
+    </>
   );
 }
 

src/index.scss

@@ -7,4 +7,5 @@
 @import './scss/components/Settings';
 @import './scss/components/Buttons';
 @import './scss/components/Donwload';
-@import './scss/components/ThemeChanger';
+@import './scss/components/ThemeChanger';
+@import './scss/components/Attention';

src/scss/common/_extends.scss

@@ -52,3 +52,16 @@
   width: 100svw;
   transition: 0.3s ease background-color;
 }
+
+%attention {
+  font-size: 20px;
+  text-align: center;
+  z-index: -1;
+  padding: 20px;
+  background-color: #aaaaaa10;
+  border-radius: 20px;
+  transition: 0.3s ease height, 0.3s ease padding;
+  p {
+    width: 150px;
+  }
+}

src/scss/components/_Attention.scss

@@ -0,0 +1,27 @@
+.attention {
+  position: absolute;
+  left: 40px;
+  top: 30px;
+  overflow: hidden;
+  img {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+  }
+  .attention-content__hidden {
+    @extend %attention;
+    height: 0;
+    padding: 0;
+  }
+  .attention-content__visible {
+    @extend %attention;
+    height: 260px;
+    padding: 20px;
+  }
+  .attention-content__dark {
+    color: white;
+  }
+  .attention-content__light {
+    color: black;
+  }
+}