Feat: graph title and description (#34)

SummarizeMe · Apr 1, 2023 · 0e4322d · 0e4322d
1 parent 4eae4b7
commit 0e4322d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 10 deletions.
diff --git a/summe/public/index.html b/summe/public/index.html
@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/summe/src/component/graph/Blog.jsx b/summe/src/component/graph/Blog.jsx
@@ -41,11 +41,8 @@ export default function Blog({ state }) {
           chart: {
             height: 350,
             type: "treemap",
-          },
-          title: {
-            text: "Basic Treemap",
-          },
-        },
+          }
+        }
       });
     } catch (error) {
       console.error(error);
@@ -57,6 +54,6 @@ export default function Blog({ state }) {
   }, []);
 
   return (
-    <GraphWrapper data={data} type="treemap" height="350px" width="100%"/>
+    <GraphWrapper data={data} type="treemap" height="350px" width="100%" title="그래프 테스트" description="그래프 설명"/>
   );
 }
diff --git a/summe/src/component/graph/GraphTitle.css b/summe/src/component/graph/GraphTitle.css
@@ -0,0 +1,33 @@
+.description{
+    position: relative;
+    margin-left: 0.5rem;
+}
+
+.description>div{
+    display: none;
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    width: max-content;
+    font-size: 1rem;
+    background-color: #B0BEC5;
+    padding: 0.5rem;
+    color: white;
+    z-index: 1;
+}
+
+.description>div::before{
+    content: "";
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    width: 0;
+    height: 0;
+    border-left: 0.5rem solid transparent;
+    border-right: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid #B0BEC5;
+}
+
+.description:hover>div{
+    display: inline-block;
+}
diff --git a/summe/src/component/graph/GraphWrapper.jsx b/summe/src/component/graph/GraphWrapper.jsx
@@ -1,4 +1,5 @@
 import ApexCharts from "react-apexcharts";
+import "./GraphTitle.css";
 
 const LoadingBox = () => {
     return (
@@ -8,9 +9,23 @@ const LoadingBox = () => {
     );
 };
 
-export default function GraphWrapper({ data, type, height, width }) {
+const GraphTitle = ({ title, description }) => {
+    return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+            <div style={{ fontSize: "1.5rem", fontWeight: "bold" }}>{title}</div>
+            <div className="material-icons description" style={{color: "gray" }}>
+                help_outline
+                <div>{description}</div>
+            </div>
+        </div>
+    );
+
+};
+
+export default function GraphWrapper({ data, type, height, width, title = "그래프 제목", description = "그래프 설명"}) {
     return (
         <div style={{width:width,height:height,display:"inline-block"}}>
+            <GraphTitle title={title} description={description}/>
             {data
                 ? <ApexCharts
                     options={data.options}

diff --git a/summe/src/index.css b/summe/src/index.css
@@ -1,8 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
+
+html,body{
+  margin: 0;
+  padding: 0;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }