✅ switch to use google-chart

jsjx1995 · Dec 14, 2019 · f32c9c3 · f32c9c3
1 parent 12208c2
commit f32c9c3
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "query-string": "^6.9.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-google-charts": "^3.0.15",
     "react-helmet": "^5.2.1",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14"

diff --git a/src/components/menuItems/menuItems.stories.tsx b/src/components/menuItems/menuItems.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import MenuItems from '.'
-import data from '../../data/components.json'
+import data from '../../data/index/ja.json'
 
 storiesOf('MenuItems/SelfIntroduction', module)
   .add('default', () => (

diff --git a/src/components/menuItems/skillset.tsx b/src/components/menuItems/skillset.tsx
@@ -3,11 +3,12 @@ import React from 'react'
 import styled from '@emotion/styled'
 // import { HorizontalBar } from 'react-chartjs-2'
 import { graphql } from 'gatsby'
+import { Chart } from 'react-google-charts'
 import { Margins } from '../../style'
 
 interface ISkillData {
   categoryTitle: string
-  data: any
+  dataSets: any[]
   toolTipData: string[]
 }
 
@@ -25,38 +26,45 @@ const SkillSet = (props: Props) => {
   return (
     <Container>
       <Title>{menuItemTitle}</Title>
-      {skillDatum.map(({ categoryTitle, data, toolTipData }) => (
-        <div key={categoryTitle}>
+      {skillDatum.map(({ categoryTitle, dataSets }) => (
+        <ChartContainer key={categoryTitle}>
           <CategoryTitle>{categoryTitle}</CategoryTitle>
-          {/* <HorizontalBar
-            data={data}
+          <Chart
+            width="500px"
+            height="300px"
+            chartType="BarChart"
+            loader={<div>Loading Chart</div>}
+            data={[
+              [
+                'Element',
+                'Lv',
+                { role: 'style' },
+                { role: 'annotation' },
+              ],
+              ...dataSets.map(({
+                label, level, barColor, annotation,
+              }) => [label, level, barColor, annotation]),
+            ]}
             options={{
-              legend: {
-                display: false,
+              backgroundColor: { fill: 'transparent', opacity: 0.1 },
+              width: 320,
+              height: 300,
+              bar: { groupWidth: '70%' },
+              legend: { position: 'none' },
+              chartArea: {
+                height: '80%',
+                width: '70%',
               },
-              scales: {
-                xAxes: [
-                  {
-                    display: true,
-                    ticks: {
-                      suggestedMin: 0,
-                      suggestedMax: 5,
-                      stepSize: 1,
-                      callback: (value, index, values) => `Lv${value}`,
-                    },
-                  },
-                ],
-              },
-              tooltips: {
-                callbacks: {
-                  label(tooltipItem, data) {
-                    return toolTipData[+tooltipItem.index]
-                  },
+              hAxis: {
+                maxValue: 5,
+                format: 'decimal',
+                gridlines: {
+                  count: 5,
                 },
               },
             }}
-          /> */}
-        </div>
+          />
+        </ChartContainer>
       ))}
     </Container>
   )
@@ -68,14 +76,11 @@ export const dataQuery = graphql`
       menuItemTitle
       skillDatum {
         categoryTitle
-        data {
-          labels
-          datasets {
-            backgroundColor
-            data
-          }
+        dataSets {
+          label
+          level
+          barColor
         }
-        toolTipData
       }
     }
   }
@@ -88,6 +93,8 @@ const Container = styled.div`
   padding: 24px;
 `
 
+const ChartContainer = styled.div``
+
 const Title = styled.h1`
   text-align: center;
   margin-bottom: 28px;

diff --git a/src/data/index/en.json b/src/data/index/en.json
@@ -80,30 +80,45 @@
     "menuItemTitle": "Skillset",
     "skillDatum": [
       {
-        "categoryTitle": "Backend",
-        "data": {
-          "labels": ["Ruby / Rails", "Python", "NodeJS"],
-          "datasets": [
-            {
-              "backgroundColor": ["#F8545B", "#54B3F8", "#34D97A"],
-              "data": [5, 2, 3]
-            }
-          ]
-        },
-        "toolTipData": ["foo", "bar", "hello!"]
+        "categoryTitle": "バックエンド",
+        "dataSets": [
+          {
+            "label": "Ruby",
+            "level": 5,
+            "barColor": "#F8545B",
+            "annotation": "一番長くて得意"
+          },
+          {
+            "label": "NodeJS",
+            "level": 2,
+            "barColor": "#54B3F8"
+          },
+          {
+            "label": "Python",
+            "level": 3,
+            "barColor": "#34D97A"
+          }
+        ]
       },
       {
-        "categoryTitle": "Frontend",
-        "data": {
-          "labels": ["React", "Vue"],
-          "datasets": [
-            {
-              "backgroundColor": ["#F8545B", "#54B3F8"],
-              "data": [4, 2]
-            }
-          ]
-        },
-        "toolTipData": ["aaa", "bbb", "hello!"]
+        "categoryTitle": "フロントエンド",
+        "dataSets": [
+          {
+            "label": "React",
+            "level": 1,
+            "barColor": "#b87333"
+          },
+          {
+            "label": "Vue",
+            "level": 2,
+            "barColor": "#b87333"
+          },
+          {
+            "label": "Python",
+            "level": 3,
+            "barColor": "#b87333"
+          }
+        ]
       }
     ]
   },

diff --git a/src/data/index/ja.json b/src/data/index/ja.json
@@ -81,29 +81,44 @@
     "skillDatum": [
       {
         "categoryTitle": "バックエンド",
-        "data": {
-          "labels": ["Ruby", "node", "Python"],
-          "datasets": [
-            {
-              "backgroundColor": ["#F8545B", "#54B3F8", "#34D97A"],
-              "data": [5, 2, 3]
-            }
-          ]
-        },
-        "toolTipData": ["結構得意", "うーむ", "hello!"]
+        "dataSets": [
+          {
+            "label": "Ruby",
+            "level": 5,
+            "barColor": "#F8545B",
+            "annotation": "一番長くて得意"
+          },
+          {
+            "label": "NodeJS",
+            "level": 2,
+            "barColor": "#54B3F8"
+          },
+          {
+            "label": "Python",
+            "level": 3,
+            "barColor": "#34D97A"
+          }
+        ]
       },
       {
         "categoryTitle": "フロントエンド",
-        "data": {
-          "labels": ["React", "Vue"],
-          "datasets": [
-            {
-              "backgroundColor": ["#F8545B", "#54B3F8"],
-              "data": [4, 2]
-            }
-          ]
-        },
-        "toolTipData": ["結構得意", "うーむ", "hello!"]
+        "dataSets": [
+          {
+            "label": "React",
+            "level": 1,
+            "barColor": "#b87333"
+          },
+          {
+            "label": "Vue",
+            "level": 2,
+            "barColor": "#b87333"
+          },
+          {
+            "label": "Python",
+            "level": 3,
+            "barColor": "#b87333"
+          }
+        ]
       }
     ]
   },

diff --git a/yarn.lock b/yarn.lock
@@ -11907,6 +11907,13 @@ react-focus-lock@^1.18.3:
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.0"
 
+react-google-charts@^3.0.15:
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/react-google-charts/-/react-google-charts-3.0.15.tgz#30759a470f48336e744fd383d054122b039a1ff2"
+  integrity sha512-78s5xOQOJvL+jIewrWQZEHtlVk+5Yh4zZy+ODA1on1o1FaRjKWXxoo4n4JQl1XuqkF/A9NWque3KqM6pMggjzQ==
+  dependencies:
+    react-load-script "^0.0.6"
+
 react-helmet-async@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"
@@ -11969,6 +11976,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-load-script@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-load-script/-/react-load-script-0.0.6.tgz#db6851236aaa25bb622677a2eb51dad4f8d2c258"
+  integrity sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ==
+
 react-popper-tooltip@^2.8.3:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.10.0.tgz#4d8383644d1002a50bd2bf74b2d1214d84ffc77c"