From 4bb1ff3255b51d1cca2caf17e71602f4a9ae3f2c Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Sun, 25 Apr 2021 12:03:04 +0800
Subject: [PATCH 01/26] feat: add share icon

---
 src/constants.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 292861d..92687c3 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,12 +1,20 @@
 export const DEFAULT_OPTIONS = {
-  color: ['#39a85a', '#4385ee', '#fabc37', '#2dc1dd', '#f972cf', '#8331c8'],
+  color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
   legend: {
     top: "5%",
     data: []
   },
   toolbox: {
     feature: {
-      saveAsImage: {}
+      myShare: {
+        show: true,
+        title: "Share",
+        icon: 'path://M792.00002 751.96513437C792.00002 774.07578219 773.53628 792.00000219 751.96514 792.00000219L272.03486 792.00000219C249.9242 792.00000219 231.99998 773.53625563 231.99998 751.96513437L231.99998 272.03486656C231.99998 249.92422062 250.46372 231.99999969 272.03486 231.99999969L471.99998 231.99999969C494.09138 231.99999969 512 214.09139001 512 192.00000031 512 169.90860969 494.09138 152 471.99998 152L231.63182 152C188.45318 152 152 187.65237406 152 231.63180594L152 792.36819219C152 835.54685001 187.65236 872 231.63182 872L792.36818 872C835.54682 872 872 836.34762781 872 792.36819219L872 552.00000219C872 529.90860781 854.09138 512 831.99998 512 809.90864001 512 792.00002 529.90860781 792.00002 552.00000219L792.00002 751.96513437 792.00002 751.96513437ZM667.75663999 232.86022906C645.869 232.86022906 628.1255 214.30554219 628.1255 192.86022875 628.1255 170.76883906 645.3857 152.86022937 667.75663999 152.86022937L828.49442 152.86022937C839.37548 152.86022937 849.23234 157.44586063 856.39418 164.69260156 863.69792 171.50811031 868.1255 181.36796187 868.1255 192.49134781L868.1255 353.22911094C868.1255 375.1167725 849.57086 392.86023219 828.12554 392.86023219 806.03414 392.86023219 788.12552 375.60002094 788.12552 353.22911094L788.12552 289.42877187 437.02316 640.5311C421.3886 656.16569001 395.59412 655.71988438 380.43002 640.55575437 364.80902 624.93478437 365.20154 599.21564563 380.45462 583.96256L731.55698 232.86022906 667.75663999 232.86022906 667.75663999 232.86022906Z',
+        onclick: function() {
+          console.log('My Share');
+        }
+      },
+      saveAsImage: {},
     }
   },
   dataset: [],
@@ -27,7 +35,7 @@ export const DEFAULT_OPTIONS = {
 };
 
 export const DEFAULT_ACTIVITY_OPTIONS = {
-  color: ['#39a85a', '#4385ee', '#fabc37', '#2dc1dd', '#f972cf', '#8331c8'],
+  color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
   legend: {
     top: "5%",
     data: []
@@ -40,7 +48,8 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
   dataset: [],
   title: {
     text: "Monthly Active Contributors",
-    subtext: 'The number of contributors who committed to main branch in each month'
+    subtext:
+      "The number of contributors who committed to main branch in each month"
   },
   tooltip: {
     trigger: "axis"
@@ -55,4 +64,4 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
   series: []
 };
 
-export const DEFAULT_COLOR = '#39a85a';
\ No newline at end of file
+export const DEFAULT_COLOR = "#39a85a";

From ab9d021249a58ef4b68a837a230e582cd010d7c5 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Sun, 25 Apr 2021 12:31:58 +0800
Subject: [PATCH 02/26] feat: add share event

---
 src/components/contributor/index.js | 21 +++++++--
 src/constants.js                    | 71 +++++++++++++++--------------
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 2352653..78f2157 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -9,7 +9,7 @@ import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import CompareComponent from "../../components/compare";
 import { Button, ButtonGroup } from "@material-ui/core";
 import { getMonths } from "../../utils";
-import { DEFAULT_OPTIONS } from "../../constants";
+import { generateDefaultOption } from "../../constants";
 import { fetchData, fetchMergeContributor } from "./service";
 
 const ContributorLineChart = ({
@@ -24,9 +24,20 @@ const ContributorLineChart = ({
   const [dataSource, setDataSource] = React.useState({});
   const [activeDate, setActiveDate] = React.useState("max");
   const [xAxis, setXAxis] = React.useState([]);
-  const [option, setOption] = React.useState(DEFAULT_OPTIONS);
+  const [shareModalVisible, setShareModalVisible] = React.useState(false);
+  const [option, setOption] = React.useState( generateDefaultOption({
+    handleShareClick: () => {
+      setShareModalVisible(true);
+    }
+  }));
   const updateSeries = passXAxis => {
-    const newClonedOption = cloneDeep(DEFAULT_OPTIONS);
+    const newClonedOption = cloneDeep(
+      generateDefaultOption({
+        handleShareClick: () => {
+          setShareModalVisible(true);
+        }
+      })
+    );
     const datasetWithFilters = [
       ["ContributorNum", "Repo", "Date", "DateValue"]
     ];
@@ -89,6 +100,10 @@ const ContributorLineChart = ({
     setOption(newClonedOption);
   };
 
+  React.useEffect(() => {
+    console.log("shareModalVisible: ", shareModalVisible);
+  }, [shareModalVisible]);
+
   React.useEffect(() => {
     switch (activeDate) {
       case "1month":
diff --git a/src/constants.js b/src/constants.js
index 92687c3..0ab789d 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,37 +1,40 @@
-export const DEFAULT_OPTIONS = {
-  color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
-  legend: {
-    top: "5%",
-    data: []
-  },
-  toolbox: {
-    feature: {
-      myShare: {
-        show: true,
-        title: "Share",
-        icon: 'path://M792.00002 751.96513437C792.00002 774.07578219 773.53628 792.00000219 751.96514 792.00000219L272.03486 792.00000219C249.9242 792.00000219 231.99998 773.53625563 231.99998 751.96513437L231.99998 272.03486656C231.99998 249.92422062 250.46372 231.99999969 272.03486 231.99999969L471.99998 231.99999969C494.09138 231.99999969 512 214.09139001 512 192.00000031 512 169.90860969 494.09138 152 471.99998 152L231.63182 152C188.45318 152 152 187.65237406 152 231.63180594L152 792.36819219C152 835.54685001 187.65236 872 231.63182 872L792.36818 872C835.54682 872 872 836.34762781 872 792.36819219L872 552.00000219C872 529.90860781 854.09138 512 831.99998 512 809.90864001 512 792.00002 529.90860781 792.00002 552.00000219L792.00002 751.96513437 792.00002 751.96513437ZM667.75663999 232.86022906C645.869 232.86022906 628.1255 214.30554219 628.1255 192.86022875 628.1255 170.76883906 645.3857 152.86022937 667.75663999 152.86022937L828.49442 152.86022937C839.37548 152.86022937 849.23234 157.44586063 856.39418 164.69260156 863.69792 171.50811031 868.1255 181.36796187 868.1255 192.49134781L868.1255 353.22911094C868.1255 375.1167725 849.57086 392.86023219 828.12554 392.86023219 806.03414 392.86023219 788.12552 375.60002094 788.12552 353.22911094L788.12552 289.42877187 437.02316 640.5311C421.3886 656.16569001 395.59412 655.71988438 380.43002 640.55575437 364.80902 624.93478437 365.20154 599.21564563 380.45462 583.96256L731.55698 232.86022906 667.75663999 232.86022906 667.75663999 232.86022906Z',
-        onclick: function() {
-          console.log('My Share');
-        }
-      },
-      saveAsImage: {},
-    }
-  },
-  dataset: [],
-  title: {
-    text: "Contributor Over Time"
-  },
-  tooltip: {
-    trigger: "axis"
-  },
-  xAxis: {
-    type: "time",
-    nameLocation: "middle"
-  },
-  yAxis: {
-    name: ""
-  },
-  series: []
+export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
+  return {
+    color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
+    legend: {
+      top: "5%",
+      data: []
+    },
+    toolbox: {
+      feature: {
+        myShare: {
+          show: true,
+          title: "Share",
+          icon:
+            "path://M792.00002 751.96513437C792.00002 774.07578219 773.53628 792.00000219 751.96514 792.00000219L272.03486 792.00000219C249.9242 792.00000219 231.99998 773.53625563 231.99998 751.96513437L231.99998 272.03486656C231.99998 249.92422062 250.46372 231.99999969 272.03486 231.99999969L471.99998 231.99999969C494.09138 231.99999969 512 214.09139001 512 192.00000031 512 169.90860969 494.09138 152 471.99998 152L231.63182 152C188.45318 152 152 187.65237406 152 231.63180594L152 792.36819219C152 835.54685001 187.65236 872 231.63182 872L792.36818 872C835.54682 872 872 836.34762781 872 792.36819219L872 552.00000219C872 529.90860781 854.09138 512 831.99998 512 809.90864001 512 792.00002 529.90860781 792.00002 552.00000219L792.00002 751.96513437 792.00002 751.96513437ZM667.75663999 232.86022906C645.869 232.86022906 628.1255 214.30554219 628.1255 192.86022875 628.1255 170.76883906 645.3857 152.86022937 667.75663999 152.86022937L828.49442 152.86022937C839.37548 152.86022937 849.23234 157.44586063 856.39418 164.69260156 863.69792 171.50811031 868.1255 181.36796187 868.1255 192.49134781L868.1255 353.22911094C868.1255 375.1167725 849.57086 392.86023219 828.12554 392.86023219 806.03414 392.86023219 788.12552 375.60002094 788.12552 353.22911094L788.12552 289.42877187 437.02316 640.5311C421.3886 656.16569001 395.59412 655.71988438 380.43002 640.55575437 364.80902 624.93478437 365.20154 599.21564563 380.45462 583.96256L731.55698 232.86022906 667.75663999 232.86022906 667.75663999 232.86022906Z",
+          onclick: function() {
+            handleShareClick();
+          }
+        },
+        saveAsImage: {}
+      }
+    },
+    dataset: [],
+    title: {
+      text: "Contributor Over Time"
+    },
+    tooltip: {
+      trigger: "axis"
+    },
+    xAxis: {
+      type: "time",
+      nameLocation: "middle"
+    },
+    yAxis: {
+      name: ""
+    },
+    series: []
+  };
 };
 
 export const DEFAULT_ACTIVITY_OPTIONS = {

From f71a0ae737adeb83eac107548655c1a357fed39a Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Sun, 25 Apr 2021 13:47:46 +0800
Subject: [PATCH 03/26] feat: add dialog

---
 src/components/contributor/index.js | 26 ++++++--
 src/components/shareDialog/index.js | 99 +++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 5 deletions(-)
 create mode 100644 src/components/shareDialog/index.js

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 78f2157..f0ad74e 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -11,6 +11,7 @@ import { Button, ButtonGroup } from "@material-ui/core";
 import { getMonths } from "../../utils";
 import { generateDefaultOption } from "../../constants";
 import { fetchData, fetchMergeContributor } from "./service";
+import CustomizedDialogs from "../shareDialog";
 
 const ContributorLineChart = ({
   repoList = ["apache/apisix"],
@@ -25,11 +26,25 @@ const ContributorLineChart = ({
   const [activeDate, setActiveDate] = React.useState("max");
   const [xAxis, setXAxis] = React.useState([]);
   const [shareModalVisible, setShareModalVisible] = React.useState(false);
-  const [option, setOption] = React.useState( generateDefaultOption({
-    handleShareClick: () => {
-      setShareModalVisible(true);
-    }
-  }));
+  const [option, setOption] = React.useState(
+    generateDefaultOption({
+      handleShareClick: () => {
+        setShareModalVisible(true);
+      }
+    })
+  );
+
+  const Dialog = React.useCallback(() => {
+    return (
+      <CustomizedDialogs
+        open={shareModalVisible}
+        onChange={() => {
+          setShareModalVisible(false);
+        }}
+      />
+    );
+  }, [shareModalVisible]);
+
   const updateSeries = passXAxis => {
     const newClonedOption = cloneDeep(
       generateDefaultOption({
@@ -211,6 +226,7 @@ const ContributorLineChart = ({
           justifyContent: "center"
         }}
       >
+        <Dialog />
         <div className="right" style={{ width: "90%", marginTop: "10px" }}>
           <div style={{ marginTop: "10px" }}>
             <CompareComponent
diff --git a/src/components/shareDialog/index.js b/src/components/shareDialog/index.js
new file mode 100644
index 0000000..15365c8
--- /dev/null
+++ b/src/components/shareDialog/index.js
@@ -0,0 +1,99 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import MuiDialogTitle from "@material-ui/core/DialogTitle";
+import MuiDialogContent from "@material-ui/core/DialogContent";
+import MuiDialogActions from "@material-ui/core/DialogActions";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import Typography from "@material-ui/core/Typography";
+
+const styles = theme => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(2)
+  },
+  closeButton: {
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500]
+  }
+});
+
+const DialogTitle = withStyles(styles)(props => {
+  const { children, classes, onClose, ...other } = props;
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+const DialogContent = withStyles(theme => ({
+  root: {
+    padding: theme.spacing(2)
+  }
+}))(MuiDialogContent);
+
+const DialogActions = withStyles(theme => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(1)
+  }
+}))(MuiDialogActions);
+
+export default function CustomizedDialogs({
+  open = false,
+  onChange = () => {}
+}) {
+  const handleClose = () => {
+    console.log("close");
+    onChange(false);
+  };
+  return (
+    <div>
+      <Dialog
+        onClose={handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+      >
+        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
+          Modal title
+        </DialogTitle>
+        <DialogContent dividers>
+          <Typography gutterBottom>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
+            ac consectetur ac, vestibulum at eros.
+          </Typography>
+          <Typography gutterBottom>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+            auctor.
+          </Typography>
+          <Typography gutterBottom>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
+            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
+            dui. Donec ullamcorper nulla non metus auctor fringilla.
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose} color="primary">
+            Save changes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}

From 0bec736b7ef3982e3fdc853811eb37e0be332660 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Mon, 26 Apr 2021 09:29:53 +0800
Subject: [PATCH 04/26] feat: update

---
 src/components/shareDialog/index.js | 198 +++++++++++++++++++++++++---
 1 file changed, 179 insertions(+), 19 deletions(-)

diff --git a/src/components/shareDialog/index.js b/src/components/shareDialog/index.js
index 15365c8..4723d1d 100644
--- a/src/components/shareDialog/index.js
+++ b/src/components/shareDialog/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { withStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
+// import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import MuiDialogTitle from "@material-ui/core/DialogTitle";
 import MuiDialogContent from "@material-ui/core/DialogContent";
@@ -8,6 +8,13 @@ import MuiDialogActions from "@material-ui/core/DialogActions";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import Typography from "@material-ui/core/Typography";
+import Paper from "@material-ui/core/Paper";
+import Grid from "@material-ui/core/Grid";
+import { makeStyles } from "@material-ui/core/styles";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
 
 const styles = theme => ({
   root: {
@@ -22,6 +29,171 @@ const styles = theme => ({
   }
 });
 
+const ShareLink = () => {
+  return (
+    <>
+      <div style={{ marginTop: "50px", marginBottom: "10px" }}>
+        <div style={{ display: "flex", marginBottom: "30px" }}>
+          <TextField
+            id="standard-basic"
+            label="分享地址"
+            variant="outlined"
+            value={"www.baidu.com"}
+            style={{ width: "400px" }}
+          />
+          <Button variant="contained" color="primary">
+            复制
+          </Button>
+        </div>
+        <div style={{ display: "flex" }}>
+          <TextField
+            id="standard-basic"
+            label="图片地址"
+            variant="outlined"
+            value={"www.baidu.com"}
+            style={{ width: "400px" }}
+          />
+          <Button variant="contained" color="primary">
+            复制
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function CenteredGrid() {
+  const useStyles = makeStyles(theme => ({
+    root: {
+      flexGrow: 1
+    },
+    paper: {
+      padding: 0,
+      textAlign: "center",
+      color: theme.palette.text.secondary
+    }
+  }));
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={2}>
+          <Paper className={classes.paper} elevation={0}>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginBottom: "8px"
+              }}
+            >
+              <svg
+                viewBox="0 0 60 60"
+                preserveAspectRatio="xMidYMid meet"
+                focusable="false"
+                class="style-scope yt-icon"
+                style={{
+                  pointerEvents: "none",
+                  display: "block",
+                  width: "60px",
+                  height: "60px"
+                }}
+              >
+                <g class="style-scope yt-icon">
+                  <g
+                    fill="none"
+                    fill-rule="evenodd"
+                    class="style-scope yt-icon"
+                  >
+                    <path
+                      d="M28.486325 59.969298c-6.636404-.569063-11.56302-2.326956-16.321973-5.823932C4.443764 48.472116 0 39.646792 0 29.986934 0 15.11156 10.506778 2.798388 25.274412.36718c6.028107-.992411 12.703853.049265 18.28794 2.85363 13.576275 6.818095 19.7813 22.541053 14.64267 37.103159-3.527955 9.997705-12.789708 17.617785-23.391072 19.244938-2.085625.320112-5.065149.508645-6.327625.400391z"
+                      fill="#1DA1F2"
+                      fill-rule="nonzero"
+                      class="style-scope yt-icon"
+                    ></path>
+                    <path
+                      d="M45.089067 17.577067c-.929778.595555-3.064534 1.460977-4.117334 1.460977v.001778C39.7696 17.784 38.077156 17 36.200178 17c-3.645511 0-6.6016 2.956089-6.6016 6.600178 0 .50631.058666 1.000178.16711 1.473778h-.001066c-4.945066-.129778-10.353422-2.608356-13.609244-6.85049-2.001778 3.46489-.269511 7.3184 2.002133 8.72249-.7776.058666-2.209067-.0896-2.882844-.747023-.045156 2.299734 1.060622 5.346845 5.092622 6.452267-.776533.417778-2.151111.297956-2.7488.209067.209778 1.941333 2.928355 4.479289 5.901155 4.479289C22.46009 38.565156 18.4736 40.788089 14 40.080889 17.038222 41.929422 20.5792 43 24.327111 43c10.650667 0 18.921956-8.631822 18.4768-19.280356-.001778-.011733-.001778-.023466-.002844-.036266.001066-.027378.002844-.054756.002844-.0832 0-.033067-.002844-.064356-.003911-.096356.9696-.66311 2.270578-1.836089 3.2-3.37991-.539022.296888-2.156089.891377-3.6608 1.038932.965689-.521244 2.396444-2.228266 2.749867-3.585777"
+                      fill="#FFF"
+                      class="style-scope yt-icon"
+                    ></path>
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <span style={{ width: "1.3rem" }}>Twitter</span>
+          </Paper>
+        </Grid>
+        <Grid item xs={2}>
+          <Paper className={classes.paper} elevation={0}>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginBottom: "8px"
+              }}
+            >
+              <svg
+                viewBox="0 0 60 60"
+                preserveAspectRatio="xMidYMid meet"
+                focusable="false"
+                class="style-scope yt-icon"
+                style={{
+                  pointerEvents: "none",
+                  display: "block",
+                  width: "60px",
+                  height: "60px"
+                }}
+              >
+                <g class="style-scope yt-icon">
+                  <g
+                    fill="none"
+                    fill-rule="evenodd"
+                    class="style-scope yt-icon"
+                  >
+                    <path
+                      d="M28.486325 59.969298c-6.636404-.569063-11.56302-2.326956-16.321973-5.823932C4.443764 48.472116 0 39.646792 0 29.986934 0 15.11156 10.506778 2.798388 25.274412.36718c6.028107-.992411 12.703853.049265 18.28794 2.85363 13.576275 6.818095 19.7813 22.541053 14.64267 37.103159-3.527955 9.997705-12.789708 17.617785-23.391072 19.244938-2.085625.320112-5.065149.508645-6.327625.400391z"
+                      fill="#1DA1F2"
+                      fill-rule="nonzero"
+                      class="style-scope yt-icon"
+                    ></path>
+                    <path
+                      d="M45.089067 17.577067c-.929778.595555-3.064534 1.460977-4.117334 1.460977v.001778C39.7696 17.784 38.077156 17 36.200178 17c-3.645511 0-6.6016 2.956089-6.6016 6.600178 0 .50631.058666 1.000178.16711 1.473778h-.001066c-4.945066-.129778-10.353422-2.608356-13.609244-6.85049-2.001778 3.46489-.269511 7.3184 2.002133 8.72249-.7776.058666-2.209067-.0896-2.882844-.747023-.045156 2.299734 1.060622 5.346845 5.092622 6.452267-.776533.417778-2.151111.297956-2.7488.209067.209778 1.941333 2.928355 4.479289 5.901155 4.479289C22.46009 38.565156 18.4736 40.788089 14 40.080889 17.038222 41.929422 20.5792 43 24.327111 43c10.650667 0 18.921956-8.631822 18.4768-19.280356-.001778-.011733-.001778-.023466-.002844-.036266.001066-.027378.002844-.054756.002844-.0832 0-.033067-.002844-.064356-.003911-.096356.9696-.66311 2.270578-1.836089 3.2-3.37991-.539022.296888-2.156089.891377-3.6608 1.038932.965689-.521244 2.396444-2.228266 2.749867-3.585777"
+                      fill="#FFF"
+                      class="style-scope yt-icon"
+                    ></path>
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <span style={{ width: "1.3rem" }}>Twitter</span>
+          </Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+const MarkdownLink = ({ repoList = [], isMerge = false, mergeRepo = "" }) => {
+  return (
+    <div>
+      <p>
+        You can include the chart on your repository's README.md as follows:
+      </p>
+      <SyntaxHighlighter language="markdown" style={a11yDark}>
+        {`
+## Contributor over time
+
+[![Contributor over time](https://contributor-graph-api.apiseven.com/contributors-svg?repo=${
+          isMerge ? mergeRepo + "&merge=true" : repoList.join(",")
+        })](https://www.apiseven.com/en/contributor-graph?repo=${
+          isMerge ? mergeRepo + "&merge=true" : repoList.join(",")
+        })
+`}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
 const DialogTitle = withStyles(styles)(props => {
   const { children, classes, onClose, ...other } = props;
   return (
@@ -69,30 +241,18 @@ export default function CustomizedDialogs({
         open={open}
       >
         <DialogTitle id="customized-dialog-title" onClose={handleClose}>
-          Modal title
+          Share
         </DialogTitle>
         <DialogContent dividers>
-          <Typography gutterBottom>
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros.
-          </Typography>
-          <Typography gutterBottom>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-            auctor.
-          </Typography>
-          <Typography gutterBottom>
-            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
-            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
-            dui. Donec ullamcorper nulla non metus auctor fringilla.
-          </Typography>
+          <CenteredGrid />
+          <ShareLink />
+          {/* <MarkdownLink /> */}
         </DialogContent>
-        <DialogActions>
+        {/* <DialogActions>
           <Button autoFocus onClick={handleClose} color="primary">
             Save changes
           </Button>
-        </DialogActions>
+        </DialogActions> */}
       </Dialog>
     </div>
   );

From 64f2c5a89f3fdcdd0b3367f4e15b78eb95277515 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Mon, 26 Apr 2021 23:00:30 +0800
Subject: [PATCH 05/26] feat: refactor share

---
 package.json                        |   1 +
 src/components/contributor/index.js |  29 ++-----
 src/components/shareDialog/index.js | 127 ++++++++++------------------
 yarn.lock                           |  12 +++
 4 files changed, 67 insertions(+), 102 deletions(-)

diff --git a/package.json b/package.json
index 8ce4ace..d370707 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "bootstrap": "^4.6.0",
+    "copy-to-clipboard": "^3.3.1",
     "echarts": "^5.0.2",
     "echarts-for-react": "^3.0.1",
     "lodash.clonedeep": "^4.5.0",
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index f0ad74e..963140f 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -3,8 +3,6 @@ import cloneDeep from "lodash.clonedeep";
 import { Row, Col, Tab } from "react-bootstrap";
 import ReactECharts from "echarts-for-react";
 import omit from "lodash.omit";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 import CompareComponent from "../../components/compare";
 import { Button, ButtonGroup } from "@material-ui/core";
@@ -34,10 +32,18 @@ const ContributorLineChart = ({
     })
   );
 
+  const getShareParams = () => {
+    if (isMerge) {
+      return `?chart=contributorOverTime&repo=${mergeRepo}&merge=true`;
+    }
+    return `?chart=contributorOverTime&repo=${repoList.join(",")}`;
+  };
+
   const Dialog = React.useCallback(() => {
     return (
       <CustomizedDialogs
         open={shareModalVisible}
+        params={getShareParams()}
         onChange={() => {
           setShareModalVisible(false);
         }}
@@ -327,25 +333,6 @@ const ContributorLineChart = ({
                 </Col>
               </Row>
             </Tab.Container>
-            {Boolean(repoList.length) && (
-              <div>
-                <p>
-                  You can include the chart on your repository's README.md as
-                  follows:
-                </p>
-                <SyntaxHighlighter language="markdown" style={a11yDark}>
-                  {`
-## Contributor over time
-
-[![Contributor over time](https://contributor-graph-api.apiseven.com/contributors-svg?repo=${
-                    isMerge ? mergeRepo + "&merge=true" : repoList.join(",")
-                  })](https://www.apiseven.com/en/contributor-graph?repo=${
-                    isMerge ? mergeRepo + "&merge=true" : repoList.join(",")
-                  })
-`}
-                </SyntaxHighlighter>
-              </div>
-            )}
           </div>
         </div>
       </div>
diff --git a/src/components/shareDialog/index.js b/src/components/shareDialog/index.js
index 4723d1d..ace8ee5 100644
--- a/src/components/shareDialog/index.js
+++ b/src/components/shareDialog/index.js
@@ -1,10 +1,8 @@
 import React from "react";
 import { withStyles } from "@material-ui/core/styles";
-// import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import MuiDialogTitle from "@material-ui/core/DialogTitle";
 import MuiDialogContent from "@material-ui/core/DialogContent";
-import MuiDialogActions from "@material-ui/core/DialogActions";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import Typography from "@material-ui/core/Typography";
@@ -15,6 +13,7 @@ import SyntaxHighlighter from "react-syntax-highlighter";
 import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
+import copy from "copy-to-clipboard";
 
 const styles = theme => ({
   root: {
@@ -29,32 +28,50 @@ const styles = theme => ({
   }
 });
 
-const ShareLink = () => {
+const SHARE_BASE_URL = "https://www.apiseven.com/en/contributor-graph";
+const IMG_BASE_URL =
+  "https://contributor-graph-api.apiseven.com/contributors-svg";
+
+const ShareLink = ({ params = "" }) => {
   return (
     <>
       <div style={{ marginTop: "50px", marginBottom: "10px" }}>
         <div style={{ display: "flex", marginBottom: "30px" }}>
           <TextField
             id="standard-basic"
-            label="分享地址"
+            label="Share Link"
             variant="outlined"
-            value={"www.baidu.com"}
+            value={`${SHARE_BASE_URL}${params}`}
+            size="small"
             style={{ width: "400px" }}
           />
-          <Button variant="contained" color="primary">
-            复制
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              copy(SHARE_BASE_URL + params);
+            }}
+          >
+            Copy
           </Button>
         </div>
         <div style={{ display: "flex" }}>
           <TextField
             id="standard-basic"
-            label="图片地址"
+            label="Image Link"
             variant="outlined"
-            value={"www.baidu.com"}
+            value={`${IMG_BASE_URL}${params}`}
+            size="small"
             style={{ width: "400px" }}
           />
-          <Button variant="contained" color="primary">
-            复制
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              copy(IMG_BASE_URL + params);
+            }}
+          >
+            Copy
           </Button>
         </div>
       </div>
@@ -62,7 +79,7 @@ const ShareLink = () => {
   );
 };
 
-function CenteredGrid() {
+function CenteredGrid({ params = "" }) {
   const useStyles = makeStyles(theme => ({
     root: {
       flexGrow: 1
@@ -74,57 +91,20 @@ function CenteredGrid() {
     }
   }));
   const classes = useStyles();
+  const shareUrl = SHARE_BASE_URL + params;
 
   return (
     <div className={classes.root}>
       <Grid container spacing={3}>
         <Grid item xs={2}>
-          <Paper className={classes.paper} elevation={0}>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                marginBottom: "8px"
-              }}
-            >
-              <svg
-                viewBox="0 0 60 60"
-                preserveAspectRatio="xMidYMid meet"
-                focusable="false"
-                class="style-scope yt-icon"
-                style={{
-                  pointerEvents: "none",
-                  display: "block",
-                  width: "60px",
-                  height: "60px"
-                }}
-              >
-                <g class="style-scope yt-icon">
-                  <g
-                    fill="none"
-                    fill-rule="evenodd"
-                    class="style-scope yt-icon"
-                  >
-                    <path
-                      d="M28.486325 59.969298c-6.636404-.569063-11.56302-2.326956-16.321973-5.823932C4.443764 48.472116 0 39.646792 0 29.986934 0 15.11156 10.506778 2.798388 25.274412.36718c6.028107-.992411 12.703853.049265 18.28794 2.85363 13.576275 6.818095 19.7813 22.541053 14.64267 37.103159-3.527955 9.997705-12.789708 17.617785-23.391072 19.244938-2.085625.320112-5.065149.508645-6.327625.400391z"
-                      fill="#1DA1F2"
-                      fill-rule="nonzero"
-                      class="style-scope yt-icon"
-                    ></path>
-                    <path
-                      d="M45.089067 17.577067c-.929778.595555-3.064534 1.460977-4.117334 1.460977v.001778C39.7696 17.784 38.077156 17 36.200178 17c-3.645511 0-6.6016 2.956089-6.6016 6.600178 0 .50631.058666 1.000178.16711 1.473778h-.001066c-4.945066-.129778-10.353422-2.608356-13.609244-6.85049-2.001778 3.46489-.269511 7.3184 2.002133 8.72249-.7776.058666-2.209067-.0896-2.882844-.747023-.045156 2.299734 1.060622 5.346845 5.092622 6.452267-.776533.417778-2.151111.297956-2.7488.209067.209778 1.941333 2.928355 4.479289 5.901155 4.479289C22.46009 38.565156 18.4736 40.788089 14 40.080889 17.038222 41.929422 20.5792 43 24.327111 43c10.650667 0 18.921956-8.631822 18.4768-19.280356-.001778-.011733-.001778-.023466-.002844-.036266.001066-.027378.002844-.054756.002844-.0832 0-.033067-.002844-.064356-.003911-.096356.9696-.66311 2.270578-1.836089 3.2-3.37991-.539022.296888-2.156089.891377-3.6608 1.038932.965689-.521244 2.396444-2.228266 2.749867-3.585777"
-                      fill="#FFF"
-                      class="style-scope yt-icon"
-                    ></path>
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <span style={{ width: "1.3rem" }}>Twitter</span>
-          </Paper>
-        </Grid>
-        <Grid item xs={2}>
-          <Paper className={classes.paper} elevation={0}>
+          <Paper
+            className={classes.paper}
+            elevation={0}
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              window.location.href = `https://twitter.com/share?text=Amazing tools to view your repo contributor over time!&url=${shareUrl}`;
+            }}
+          >
             <div
               style={{
                 display: "flex",
@@ -173,7 +153,7 @@ function CenteredGrid() {
   );
 }
 
-const MarkdownLink = ({ repoList = [], isMerge = false, mergeRepo = "" }) => {
+const MarkdownLink = ({ params = "" }) => {
   return (
     <div>
       <p>
@@ -183,12 +163,8 @@ const MarkdownLink = ({ repoList = [], isMerge = false, mergeRepo = "" }) => {
         {`
 ## Contributor over time
 
-[![Contributor over time](https://contributor-graph-api.apiseven.com/contributors-svg?repo=${
-          isMerge ? mergeRepo + "&merge=true" : repoList.join(",")
-        })](https://www.apiseven.com/en/contributor-graph?repo=${
-          isMerge ? mergeRepo + "&merge=true" : repoList.join(",")
-        })
-`}
+[![Contributor over time](${IMG_BASE_URL + params})[${SHARE_BASE_URL +
+          params}]]`}
       </SyntaxHighlighter>
     </div>
   );
@@ -218,16 +194,10 @@ const DialogContent = withStyles(theme => ({
   }
 }))(MuiDialogContent);
 
-const DialogActions = withStyles(theme => ({
-  root: {
-    margin: 0,
-    padding: theme.spacing(1)
-  }
-}))(MuiDialogActions);
-
 export default function CustomizedDialogs({
   open = false,
-  onChange = () => {}
+  onChange = () => {},
+  params = ""
 }) {
   const handleClose = () => {
     console.log("close");
@@ -244,15 +214,10 @@ export default function CustomizedDialogs({
           Share
         </DialogTitle>
         <DialogContent dividers>
-          <CenteredGrid />
-          <ShareLink />
-          {/* <MarkdownLink /> */}
+          <CenteredGrid params={params} />
+          <ShareLink params={params} />
+          <MarkdownLink params={params} />
         </DialogContent>
-        {/* <DialogActions>
-          <Button autoFocus onClick={handleClose} color="primary">
-            Save changes
-          </Button>
-        </DialogActions> */}
       </Dialog>
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index e9a12e1..a0aae96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3053,6 +3053,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.8.1, core-js-compat@^3.9.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.1.tgz#4e572acfe90aff69d76d8c37759d21a5c59bb455"
@@ -10401,6 +10408,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"

From b95728a198aae289e1429cdedbc48672971c1bf7 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Mon, 26 Apr 2021 23:06:18 +0800
Subject: [PATCH 06/26] feat: update

---
 src/components/contributor/index.js |  2 +-
 src/constants.js                    | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 963140f..1015645 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -316,7 +316,7 @@ const ContributorLineChart = ({
                       </div>
                       <ReactECharts
                         option={option}
-                        opts={{ renderer: "svg" }}
+                        // opts={{ renderer: "svg" }}
                         ref={e => {
                           if (e) {
                             const echartInstance = e.getEchartsInstance();
diff --git a/src/constants.js b/src/constants.js
index 0ab789d..718ea0b 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -16,7 +16,10 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
             handleShareClick();
           }
         },
-        saveAsImage: {}
+        saveAsImage: {
+          show: true,
+          type: "png"
+        }
       }
     },
     dataset: [],
@@ -45,7 +48,10 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
   },
   toolbox: {
     feature: {
-      saveAsImage: {}
+      saveAsImage: {
+        show: true,
+        type: "png"
+      }
     }
   },
   dataset: [],

From 6bf9eaf8d39fd8559122216a49bc816345b18061 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 16:39:03 +0800
Subject: [PATCH 07/26] feat: update

---
 src/components/shareDialog/index.js | 15 ++++++++++++++-
 src/constants.js                    | 23 +++++++++++++++++++----
 src/utils.js                        |  8 ++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/shareDialog/index.js b/src/components/shareDialog/index.js
index ace8ee5..a594e7f 100644
--- a/src/components/shareDialog/index.js
+++ b/src/components/shareDialog/index.js
@@ -15,6 +15,8 @@ import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import copy from "copy-to-clipboard";
 
+import { inIframe } from "../../utils";
+
 const styles = theme => ({
   root: {
     margin: 0,
@@ -102,7 +104,18 @@ function CenteredGrid({ params = "" }) {
             elevation={0}
             style={{ cursor: "pointer" }}
             onClick={() => {
-              window.location.href = `https://twitter.com/share?text=Amazing tools to view your repo contributor over time!&url=${shareUrl}`;
+              if (!inIframe()) {
+                window.location.href = `https://twitter.com/share?text=Amazing tools to view your repo contributor over time!&url=${shareUrl}`;
+              }
+              window.parent.postMessage(
+                {
+                  share: {
+                    to: "twitter",
+                    url: shareUrl
+                  }
+                },
+                "*"
+              );
             }}
           >
             <div
diff --git a/src/constants.js b/src/constants.js
index 718ea0b..e36b7c7 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -3,7 +3,10 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
     color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
     legend: {
       top: "5%",
-      data: []
+      data: [],
+      textStyle: {
+        fontSize: 16
+      }
     },
     toolbox: {
       feature: {
@@ -11,7 +14,7 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
           show: true,
           title: "Share",
           icon:
-            "path://M792.00002 751.96513437C792.00002 774.07578219 773.53628 792.00000219 751.96514 792.00000219L272.03486 792.00000219C249.9242 792.00000219 231.99998 773.53625563 231.99998 751.96513437L231.99998 272.03486656C231.99998 249.92422062 250.46372 231.99999969 272.03486 231.99999969L471.99998 231.99999969C494.09138 231.99999969 512 214.09139001 512 192.00000031 512 169.90860969 494.09138 152 471.99998 152L231.63182 152C188.45318 152 152 187.65237406 152 231.63180594L152 792.36819219C152 835.54685001 187.65236 872 231.63182 872L792.36818 872C835.54682 872 872 836.34762781 872 792.36819219L872 552.00000219C872 529.90860781 854.09138 512 831.99998 512 809.90864001 512 792.00002 529.90860781 792.00002 552.00000219L792.00002 751.96513437 792.00002 751.96513437ZM667.75663999 232.86022906C645.869 232.86022906 628.1255 214.30554219 628.1255 192.86022875 628.1255 170.76883906 645.3857 152.86022937 667.75663999 152.86022937L828.49442 152.86022937C839.37548 152.86022937 849.23234 157.44586063 856.39418 164.69260156 863.69792 171.50811031 868.1255 181.36796187 868.1255 192.49134781L868.1255 353.22911094C868.1255 375.1167725 849.57086 392.86023219 828.12554 392.86023219 806.03414 392.86023219 788.12552 375.60002094 788.12552 353.22911094L788.12552 289.42877187 437.02316 640.5311C421.3886 656.16569001 395.59412 655.71988438 380.43002 640.55575437 364.80902 624.93478437 365.20154 599.21564563 380.45462 583.96256L731.55698 232.86022906 667.75663999 232.86022906 667.75663999 232.86022906Z",
+            "path://M830.506667 642.688c-57.344 0-104.192 30.72-126.037334 78.336l-277.162666-117.888c16.170667-25.045333 25.045333-55.722667 25.045333-88.832a167.253333 167.253333 0 0 0-4.864-40.362667l176.981333-137.301333c23.466667 17.749333 53.333333 28.245333 86.485334 28.245333 80 0 139.776-59.733333 139.776-138.88S790.912 87.04 710.954667 87.04c-80 0-139.008 59.733333-139.008 138.922667 0 20.181333 4.053333 38.741333 10.496 54.912L419.2 406.101333c-32.298667-48.469333-85.632-82.389333-146.218667-82.389333a178.944 178.944 0 0 0-179.413333 178.474667v0.853333a178.944 178.944 0 0 0 179.413333 179.2c37.12 0 71.893333-9.642667 100.181334-27.392l318.378666 135.68c4.053333 75.093333 62.250667 130.816 138.965334 130.816 80.042667 0 139.008-59.733333 139.008-138.922667 0-79.146667-59.818667-139.733333-138.965334-139.733333z",
           onclick: function() {
             handleShareClick();
           }
@@ -31,10 +34,22 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
     },
     xAxis: {
       type: "time",
-      nameLocation: "middle"
+      nameLocation: "middle",
+      axisLabel: {
+        show: true,
+        textStyle: {
+          fontSize: 14
+        }
+      }
     },
     yAxis: {
-      name: ""
+      name: "",
+      axisLabel: {
+        show: true,
+        textStyle: {
+          fontSize: 14
+        }
+      }
     },
     series: []
   };
diff --git a/src/utils.js b/src/utils.js
index 7582a17..38ac5cb 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -27,3 +27,11 @@ export const isSameDay = (d1, d2) => {
     d1.getDate() === d2.getDate()
   );
 };
+
+export const inIframe = () => {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+};

From b6d26d851b4b50e916f537afd77e1468660a4fdc Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 16:44:01 +0800
Subject: [PATCH 08/26] feat: change chip size to small

---
 src/components/chip.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/chip.js b/src/components/chip.js
index ff7a3b0..17099bd 100644
--- a/src/components/chip.js
+++ b/src/components/chip.js
@@ -23,6 +23,7 @@ export default function OutlinedChips({ list = [], onDelete }) {
           icon={<GitHubIcon />}
           label={item}
           key={item}
+          size="small"
           onDelete={() => onDelete(item)}
           color="primary"
           variant="outlined"

From 2d82a88ed4a3d8f10a857dc947f0cebb6dc8391f Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 16:49:34 +0800
Subject: [PATCH 09/26] feat: change tab switch to left

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 5182f18..60f1962 100644
--- a/src/App.js
+++ b/src/App.js
@@ -309,7 +309,7 @@ const App = () => {
               style={{
                 width: "100%",
                 display: "flex",
-                justifyContent: "center"
+                justifyContent: "left"
               }}
             >
               <Paper color="default" elevation={0}>

From 81d5dbe241f660c7601c7d1e7789533594d5bc2c Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 18:13:35 +0800
Subject: [PATCH 10/26] feat: update style

---
 src/App.js                          | 116 ++++++++++++++++------------
 src/components/contributor/index.js |  10 +--
 src/constants.js                    |   2 +-
 3 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/src/App.js b/src/App.js
index 60f1962..da640ee 100644
--- a/src/App.js
+++ b/src/App.js
@@ -225,9 +225,67 @@ const App = () => {
       </Snackbar>
       <div
         className="content"
-        style={{ display: "flex", justifyContent: "center" }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
       >
-        <div className="right" style={{ width: "90%", marginTop: "10px" }}>
+        {/* <Paper className={classes.root} elevation={0}>
+          <Autocomplete
+            freeSolo
+            className={classes.autocomplete}
+            size="small"
+            id="autocomplete"
+            disableClearable
+            options={searchOption}
+            onInputChange={(event, value, reason) => {
+              if (reason === "reset") {
+                setRepo(value);
+                updateChart(value);
+              }
+            }}
+            renderInput={params => (
+              <TextField
+                {...params}
+                label="Search Github Repository Name"
+                margin="normal"
+                variant="outlined"
+                helperText="Keep searching to complete the comparison"
+                className={classes.searchTextField}
+                onChange={e => {
+                  setRepo(e.target.value);
+                }}
+                onKeyPress={ev => {
+                  if (ev.key === "Enter") {
+                    updateChart(repo);
+                    ev.preventDefault();
+                  }
+                }}
+                InputProps={{ ...params.InputProps, type: "search" }}
+              />
+            )}
+          />
+          <IconButton
+            className={classes.iconButton}
+            aria-label="search"
+            onClick={() => {
+              updateChart(repo);
+            }}
+          >
+            <SearchIcon />
+          </IconButton>
+        </Paper> */}
+        <div
+          className="right"
+          style={{
+            width: "70%",
+            marginTop: "30px",
+            border: "1px solid #dadce0",
+            borderRadius: "12px"
+          }}
+        >
           <div style={{ display: "flex", justifyContent: "center" }}>
             <div
               className="search-container"
@@ -237,52 +295,7 @@ const App = () => {
                 flexDirection: "column"
               }}
             >
-              <Paper className={classes.root} elevation={0}>
-                <Autocomplete
-                  freeSolo
-                  className={classes.autocomplete}
-                  size="small"
-                  id="autocomplete"
-                  disableClearable
-                  options={searchOption}
-                  onInputChange={(event, value, reason) => {
-                    if (reason === "reset") {
-                      setRepo(value);
-                      updateChart(value);
-                    }
-                  }}
-                  renderInput={params => (
-                    <TextField
-                      {...params}
-                      label="Search Github Repository Name"
-                      margin="normal"
-                      variant="outlined"
-                      helperText="Keep searching to complete the comparison"
-                      className={classes.searchTextField}
-                      onChange={e => {
-                        setRepo(e.target.value);
-                      }}
-                      onKeyPress={ev => {
-                        if (ev.key === "Enter") {
-                          updateChart(repo);
-                          ev.preventDefault();
-                        }
-                      }}
-                      InputProps={{ ...params.InputProps, type: "search" }}
-                    />
-                  )}
-                />
-                <IconButton
-                  className={classes.iconButton}
-                  aria-label="search"
-                  onClick={() => {
-                    updateChart(repo);
-                  }}
-                >
-                  <SearchIcon />
-                </IconButton>
-              </Paper>
-              {Boolean(!value) && Boolean(showMergeButton) && (
+              {/* {Boolean(!value) && Boolean(showMergeButton) && (
                 <Button
                   variant="contained"
                   color="primary"
@@ -300,16 +313,17 @@ const App = () => {
                       }`
                     : "Cancel merge view"}
                 </Button>
-              )}
+              )} */}
             </div>
           </div>
 
-          <div className={classesTable.root} style={{ marginTop: "20px" }}>
+          <div>
             <div
               style={{
                 width: "100%",
                 display: "flex",
-                justifyContent: "left"
+                justifyContent: "left",
+                padding: "5px"
               }}
             >
               <Paper color="default" elevation={0}>
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 1015645..4c2f66f 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -233,8 +233,8 @@ const ContributorLineChart = ({
         }}
       >
         <Dialog />
-        <div className="right" style={{ width: "90%", marginTop: "10px" }}>
-          <div style={{ marginTop: "10px" }}>
+        <div className="right" style={{ width: "100%" }}>
+          {/* <div style={{ marginTop: "10px" }}>
             <CompareComponent
               list={Object.keys(dataSource)}
               onDelete={e => {
@@ -244,8 +244,8 @@ const ContributorLineChart = ({
                 onDelete(e);
               }}
             />
-          </div>
-          <div id="chart" style={{ marginTop: "30px" }}>
+          </div> */}
+          <div id="chart" style={{ marginTop: "20px", padding: "0px 40px" }}>
             <Tab.Container defaultActiveKey="contributor">
               <Row>
                 <Col>
@@ -324,7 +324,7 @@ const ContributorLineChart = ({
                             window.echartInstance = echartInstance;
                           }
                         }}
-                        style={{ height: 700, width: "100%" }}
+                        style={{ height: 600 }}
                         showLoading={loading}
                         notMerge
                       />
diff --git a/src/constants.js b/src/constants.js
index e36b7c7..d687ea9 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,7 +5,7 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
       top: "5%",
       data: [],
       textStyle: {
-        fontSize: 16
+        fontSize: 14
       }
     },
     toolbox: {

From aedfef77a9e2272865dcc34bccdf3246912db42e Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 18:16:28 +0800
Subject: [PATCH 11/26] feat: update line style

---
 src/components/contributor/index.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 4c2f66f..f0f8a9b 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import cloneDeep from "lodash.clonedeep";
 import { Row, Col, Tab } from "react-bootstrap";
 import ReactECharts from "echarts-for-react";
+import * as echarts from "echarts";
 import omit from "lodash.omit";
 
 import CompareComponent from "../../components/compare";
@@ -10,6 +11,7 @@ import { getMonths } from "../../utils";
 import { generateDefaultOption } from "../../constants";
 import { fetchData, fetchMergeContributor } from "./service";
 import CustomizedDialogs from "../shareDialog";
+import { DEFAULT_COLOR } from "../../constants";
 
 const ContributorLineChart = ({
   repoList = ["apache/apisix"],
@@ -108,6 +110,29 @@ const ContributorLineChart = ({
       }
     }));
 
+    if (series.length === 1) {
+      series[0].areaStyle = {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: DEFAULT_COLOR + "80"
+          },
+          {
+            offset: 1,
+            color: DEFAULT_COLOR + "00"
+          }
+        ])
+      };
+      series[0].itemStyle = {
+        normal: {
+          color: DEFAULT_COLOR,
+          lineStyle: {
+            color: DEFAULT_COLOR
+          }
+        }
+      };
+    }
+
     newClonedOption.dataset = [
       {
         id: "dataset_raw",

From 76a59e2b60c53f3574bee31919b34bd591a75226 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 18:53:36 +0800
Subject: [PATCH 12/26] feat: update

---
 src/App.js | 97 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 50 insertions(+), 47 deletions(-)

diff --git a/src/App.js b/src/App.js
index da640ee..00cd72f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -37,10 +37,11 @@ const useStyles = makeStyles(theme => ({
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
-    width: 600
+    width: "100%"
   },
   autocomplete: {
-    marginLeft: theme.spacing(1),
+    padding: "0 40px",
+    marginBottom: "10px",
     flex: 1
   },
   iconButton: {
@@ -232,51 +233,6 @@ const App = () => {
           alignItems: "center"
         }}
       >
-        {/* <Paper className={classes.root} elevation={0}>
-          <Autocomplete
-            freeSolo
-            className={classes.autocomplete}
-            size="small"
-            id="autocomplete"
-            disableClearable
-            options={searchOption}
-            onInputChange={(event, value, reason) => {
-              if (reason === "reset") {
-                setRepo(value);
-                updateChart(value);
-              }
-            }}
-            renderInput={params => (
-              <TextField
-                {...params}
-                label="Search Github Repository Name"
-                margin="normal"
-                variant="outlined"
-                helperText="Keep searching to complete the comparison"
-                className={classes.searchTextField}
-                onChange={e => {
-                  setRepo(e.target.value);
-                }}
-                onKeyPress={ev => {
-                  if (ev.key === "Enter") {
-                    updateChart(repo);
-                    ev.preventDefault();
-                  }
-                }}
-                InputProps={{ ...params.InputProps, type: "search" }}
-              />
-            )}
-          />
-          <IconButton
-            className={classes.iconButton}
-            aria-label="search"
-            onClick={() => {
-              updateChart(repo);
-            }}
-          >
-            <SearchIcon />
-          </IconButton>
-        </Paper> */}
         <div
           className="right"
           style={{
@@ -386,6 +342,53 @@ const App = () => {
               />
             </TabPanel>
           </div>
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <Paper className={classes.root} elevation={0}>
+              <Autocomplete
+                freeSolo
+                className={classes.autocomplete}
+                size="small"
+                id="autocomplete"
+                disableClearable
+                options={searchOption}
+                onInputChange={(event, value, reason) => {
+                  if (reason === "reset") {
+                    setRepo(value);
+                    updateChart(value);
+                  }
+                }}
+                renderInput={params => (
+                  <TextField
+                    {...params}
+                    label="Search Github Repository Name"
+                    margin="normal"
+                    variant="outlined"
+                    helperText="Keep searching to complete the comparison"
+                    className={classes.searchTextField}
+                    onChange={e => {
+                      setRepo(e.target.value);
+                    }}
+                    onKeyPress={ev => {
+                      if (ev.key === "Enter") {
+                        updateChart(repo);
+                        ev.preventDefault();
+                      }
+                    }}
+                    InputProps={{ ...params.InputProps, type: "search" }}
+                  />
+                )}
+              />
+              {/* <IconButton
+                className={classes.iconButton}
+                aria-label="search"
+                onClick={() => {
+                  updateChart(repo);
+                }}
+              >
+                <SearchIcon />
+              </IconButton> */}
+            </Paper>
+          </div>
         </div>
       </div>
     </>

From c47bfb03cc17d2a9b500fc9d1d1f8d5afd39abb4 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 27 Apr 2021 23:02:56 +0800
Subject: [PATCH 13/26] feat: update

---
 src/App.js | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 00cd72f..9066c1d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { makeStyles, Paper, IconButton, Snackbar } from "@material-ui/core";
 import TextField from "@material-ui/core/TextField";
-import SearchIcon from "@material-ui/icons/Search";
 import MuiAlert from "@material-ui/lab/Alert";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import Tabs from "@material-ui/core/Tabs";
@@ -9,11 +8,12 @@ import Tab from "@material-ui/core/Tab";
 import PropTypes from "prop-types";
 import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
-import Button from "@material-ui/core/Button";
+import cloneDeep from "lodash.clonedeep";
 
 import ContirbutorLineChart from "./components/contributor";
 import ActivityChart from "./components/activity";
 import { getParameterByName } from "./utils";
+import CompareComponent from "./components/compare";
 
 const Alert = props => {
   return <MuiAlert elevation={6} variant="filled" {...props} />;
@@ -342,7 +342,27 @@ const App = () => {
               />
             </TabPanel>
           </div>
-          <div style={{ display: "flex", justifyContent: "center" }}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              flexDirection: "column"
+            }}
+          >
+            <div style={{ padding: "0 40px" }}>
+              <CompareComponent
+                list={contributorRepoList}
+                onDelete={e => {
+                  const clonedContributorRepoList = cloneDeep(
+                    contributorRepoList
+                  );
+                  const newContributorRepoList = clonedContributorRepoList.filter(
+                    item => item !== e
+                  );
+                  setContributorRepoList(newContributorRepoList);
+                }}
+              />
+            </div>
             <Paper className={classes.root} elevation={0}>
               <Autocomplete
                 freeSolo

From 2f73f3beb4385373e2c95afc28272ac6c70edd01 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 28 Apr 2021 11:42:03 +0800
Subject: [PATCH 14/26] feat: update

---
 src/App.js                          | 142 ++++++++++++++--------------
 src/components/compare.js           |   2 +-
 src/components/contributor/index.js |   2 +-
 3 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9066c1d..ea892f3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,9 +40,8 @@ const useStyles = makeStyles(theme => ({
     width: "100%"
   },
   autocomplete: {
-    padding: "0 40px",
-    marginBottom: "10px",
-    flex: 1
+    flex: 1,
+    paddingTop: "5px"
   },
   iconButton: {
     padding: 10
@@ -224,6 +223,7 @@ const App = () => {
           {message}
         </Alert>
       </Snackbar>
+
       <div
         className="content"
         style={{
@@ -233,11 +233,78 @@ const App = () => {
           alignItems: "center"
         }}
       >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            flexDirection: "column",
+            width: "70%"
+          }}
+        >
+          <Paper className={classes.root} elevation={0}>
+            <Autocomplete
+              freeSolo
+              className={classes.autocomplete}
+              size="small"
+              id="autocomplete"
+              disableClearable
+              options={searchOption}
+              onInputChange={(event, value, reason) => {
+                if (reason === "reset") {
+                  setRepo(value);
+                  updateChart(value);
+                }
+              }}
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  label="Search Github Repository Name"
+                  margin="normal"
+                  variant="outlined"
+                  helperText="Keep searching to complete the comparison"
+                  className={classes.searchTextField}
+                  onChange={e => {
+                    setRepo(e.target.value);
+                  }}
+                  onKeyPress={ev => {
+                    if (ev.key === "Enter") {
+                      updateChart(repo);
+                      ev.preventDefault();
+                    }
+                  }}
+                  InputProps={{ ...params.InputProps, type: "search" }}
+                />
+              )}
+            />
+            {/* <IconButton
+                className={classes.iconButton}
+                aria-label="search"
+                onClick={() => {
+                  updateChart(repo);
+                }}
+              >
+                <SearchIcon />
+              </IconButton> */}
+          </Paper>
+          <div>
+            <CompareComponent
+              list={contributorRepoList}
+              onDelete={e => {
+                const clonedContributorRepoList = cloneDeep(
+                  contributorRepoList
+                );
+                const newContributorRepoList = clonedContributorRepoList.filter(
+                  item => item !== e
+                );
+                setContributorRepoList(newContributorRepoList);
+              }}
+            />
+          </div>
+        </div>
         <div
           className="right"
           style={{
             width: "70%",
-            marginTop: "30px",
             border: "1px solid #dadce0",
             borderRadius: "12px"
           }}
@@ -342,73 +409,6 @@ const App = () => {
               />
             </TabPanel>
           </div>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "column"
-            }}
-          >
-            <div style={{ padding: "0 40px" }}>
-              <CompareComponent
-                list={contributorRepoList}
-                onDelete={e => {
-                  const clonedContributorRepoList = cloneDeep(
-                    contributorRepoList
-                  );
-                  const newContributorRepoList = clonedContributorRepoList.filter(
-                    item => item !== e
-                  );
-                  setContributorRepoList(newContributorRepoList);
-                }}
-              />
-            </div>
-            <Paper className={classes.root} elevation={0}>
-              <Autocomplete
-                freeSolo
-                className={classes.autocomplete}
-                size="small"
-                id="autocomplete"
-                disableClearable
-                options={searchOption}
-                onInputChange={(event, value, reason) => {
-                  if (reason === "reset") {
-                    setRepo(value);
-                    updateChart(value);
-                  }
-                }}
-                renderInput={params => (
-                  <TextField
-                    {...params}
-                    label="Search Github Repository Name"
-                    margin="normal"
-                    variant="outlined"
-                    helperText="Keep searching to complete the comparison"
-                    className={classes.searchTextField}
-                    onChange={e => {
-                      setRepo(e.target.value);
-                    }}
-                    onKeyPress={ev => {
-                      if (ev.key === "Enter") {
-                        updateChart(repo);
-                        ev.preventDefault();
-                      }
-                    }}
-                    InputProps={{ ...params.InputProps, type: "search" }}
-                  />
-                )}
-              />
-              {/* <IconButton
-                className={classes.iconButton}
-                aria-label="search"
-                onClick={() => {
-                  updateChart(repo);
-                }}
-              >
-                <SearchIcon />
-              </IconButton> */}
-            </Paper>
-          </div>
         </div>
       </div>
     </>
diff --git a/src/components/compare.js b/src/components/compare.js
index 340b6a3..ef9c763 100644
--- a/src/components/compare.js
+++ b/src/components/compare.js
@@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
     flexWrap: "wrap",
     flexGrow: 1,
     "& > *": {
-      margin: theme.spacing(1),
+      margin: '0 0 8px 0',
       width: "100%",
       height: theme.spacing(8)
     }
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index f0f8a9b..375ab02 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -270,7 +270,7 @@ const ContributorLineChart = ({
               }}
             />
           </div> */}
-          <div id="chart" style={{ marginTop: "20px", padding: "0px 40px" }}>
+          <div id="chart" style={{ marginTop: "10px", padding: "0px 40px" }}>
             <Tab.Container defaultActiveKey="contributor">
               <Row>
                 <Col>

From 1ff465c63f508cbabdb461f205869991c43451fc Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 28 Apr 2021 11:49:54 +0800
Subject: [PATCH 15/26] feat: update

---
 src/App.js                          | 13 ++-----------
 src/components/activity/index.js    | 20 ++------------------
 src/components/contributor/index.js |  2 +-
 src/constants.js                    |  2 ++
 4 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/src/App.js b/src/App.js
index ea892f3..1176ee4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles, Paper, IconButton, Snackbar } from "@material-ui/core";
+import { makeStyles, Paper, Snackbar } from "@material-ui/core";
 import TextField from "@material-ui/core/TextField";
 import MuiAlert from "@material-ui/lab/Alert";
 import Autocomplete from "@material-ui/lab/Autocomplete";
@@ -85,14 +85,6 @@ function a11yProps(index) {
   };
 }
 
-const useTabStyles = makeStyles(theme => ({
-  root: {
-    flexGrow: 1,
-    width: "100%",
-    backgroundColor: theme.palette.background.paper
-  }
-}));
-
 const App = () => {
   const [repo, setRepo] = React.useState("apache/apisix");
   const [message, setMessage] = React.useState("");
@@ -100,7 +92,7 @@ const App = () => {
   const [alertType, setAlertType] = React.useState("success");
   const [searchOption, setSearchOption] = React.useState([]);
   const [contributorRepoList, setContributorRepoList] = React.useState([]);
-  const classesTable = useTabStyles();
+  // const classesTable = useTabStyles();
   const [value, setValue] = React.useState(0);
   const [tabdisabled, setTabDisabled] = React.useState(false);
   const [showMergeButton, setShowMergeButton] = React.useState(false);
@@ -223,7 +215,6 @@ const App = () => {
           {message}
         </Alert>
       </Snackbar>
-
       <div
         className="content"
         style={{
diff --git a/src/components/activity/index.js b/src/components/activity/index.js
index bd30a2f..3706b2d 100644
--- a/src/components/activity/index.js
+++ b/src/components/activity/index.js
@@ -5,7 +5,6 @@ import * as echarts from "echarts";
 import ReactECharts from "echarts-for-react";
 import omit from "lodash.omit";
 
-import CompareComponent from "../compare";
 import { DEFAULT_ACTIVITY_OPTIONS, DEFAULT_COLOR } from "../../constants";
 
 const ActivityChart = ({
@@ -254,22 +253,7 @@ const ActivityChart = ({
         }}
       >
         <div className="right" style={{ width: "90%", marginTop: "10px" }}>
-          <div style={{ marginTop: "10px" }}>
-            <CompareComponent
-              list={Object.keys(dataSource)}
-              onDelete={e => {
-                const clonedDataSource = cloneDeep(dataSource);
-                const newDataSource = omit(clonedDataSource, [e]);
-                setDataSource(newDataSource);
-                onDelete(e);
-              }}
-              onConfirm={e => {
-                if (!e) return;
-                updateChart(e);
-              }}
-            />
-          </div>
-          <div id="chart" style={{ marginTop: "30px" }}>
+          <div id="chart">
             <Tab.Container defaultActiveKey="contributor">
               <Row>
                 <Col>
@@ -285,7 +269,7 @@ const ActivityChart = ({
                             window.echartInstance = echartInstance;
                           }
                         }}
-                        style={{ height: 700, width: "100%" }}
+                        style={{ height: 600 }}
                         showLoading={loading}
                         notMerge
                       />
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 375ab02..76e8d8d 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -5,7 +5,7 @@ import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
 import omit from "lodash.omit";
 
-import CompareComponent from "../../components/compare";
+// import CompareComponent from "../../components/compare";
 import { Button, ButtonGroup } from "@material-ui/core";
 import { getMonths } from "../../utils";
 import { generateDefaultOption } from "../../constants";
diff --git a/src/constants.js b/src/constants.js
index d687ea9..ff89d5b 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -20,6 +20,7 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
           }
         },
         saveAsImage: {
+          title: "Save",
           show: true,
           type: "png"
         }
@@ -64,6 +65,7 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
   toolbox: {
     feature: {
       saveAsImage: {
+        title: "Save",
         show: true,
         type: "png"
       }

From 56326fee87cd8946d9ba671c9afe3a1c3c105506 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 28 Apr 2021 18:16:25 +0800
Subject: [PATCH 16/26] feat: update

---
 src/components/activity/index.js    | 25 +--------------------
 src/components/contributor/index.js | 34 +++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/activity/index.js b/src/components/activity/index.js
index 3706b2d..4b3a942 100644
--- a/src/components/activity/index.js
+++ b/src/components/activity/index.js
@@ -170,29 +170,6 @@ const ActivityChart = ({
     });
   };
 
-  const updateChart = repo => {
-    if (dataSource[repo]) return;
-    setLoading(true);
-    fetchData(repo)
-      .then(myJson => {
-        const { Contributors = [] } = myJson;
-        const data = Contributors.map(item => ({
-          repo,
-          contributorNum: item.Num,
-          date: item.Month
-        }));
-
-        const clonedDatasource = cloneDeep(dataSource);
-        if (!clonedDatasource[repo]) {
-          setDataSource({ ...clonedDatasource, ...{ [repo]: data } });
-        }
-        setLoading(false);
-      })
-      .catch(() => {
-        setLoading(false);
-      });
-  };
-
   React.useEffect(() => {
     updateSeries(xAxis);
     window.parent.postMessage({ legend: Object.keys(dataSource) }, "*");
@@ -269,7 +246,7 @@ const ActivityChart = ({
                             window.echartInstance = echartInstance;
                           }
                         }}
-                        style={{ height: 600 }}
+                        style={{ height: 550 }}
                         showLoading={loading}
                         notMerge
                       />
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 76e8d8d..5c0701f 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -5,7 +5,6 @@ import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
 import omit from "lodash.omit";
 
-// import CompareComponent from "../../components/compare";
 import { Button, ButtonGroup } from "@material-ui/core";
 import { getMonths } from "../../utils";
 import { generateDefaultOption } from "../../constants";
@@ -15,6 +14,7 @@ import { DEFAULT_COLOR } from "../../constants";
 
 const ContributorLineChart = ({
   repoList = ["apache/apisix"],
+
   showAlert,
   onDelete,
   onLoading,
@@ -34,6 +34,8 @@ const ContributorLineChart = ({
     })
   );
 
+  const [viewMerge, setViewMerge] = React.useState(false);
+
   const getShareParams = () => {
     if (isMerge) {
       return `?chart=contributorOverTime&repo=${mergeRepo}&merge=true`;
@@ -270,13 +272,25 @@ const ContributorLineChart = ({
               }}
             />
           </div> */}
-          <div id="chart" style={{ marginTop: "10px", padding: "0px 40px" }}>
+          <div
+            id="chart"
+            style={{
+              marginTop: "10px",
+              padding: "0px 40px"
+            }}
+          >
             <Tab.Container defaultActiveKey="contributor">
               <Row>
                 <Col>
                   <Tab.Content>
                     <Tab.Pane eventKey="contributor">
-                      <div style={{ marginBottom: "5px" }}>
+                      <div
+                        style={{
+                          marginBottom: "5px",
+                          display: "flex",
+                          justifyContent: "space-between"
+                        }}
+                      >
                         <ButtonGroup color="secondary" size="small">
                           <Button
                             variant={
@@ -338,6 +352,18 @@ const ContributorLineChart = ({
                             Max
                           </Button>
                         </ButtonGroup>
+
+                        {repoList.length > 1 && (
+                          <Button
+                            color="primary"
+                            variant="outlined"
+                            onClick={() => {
+                              setViewMerge(viewMerge => !viewMerge);
+                            }}
+                          >
+                            {!viewMerge ? "view merge" : "cancel merge view"}
+                          </Button>
+                        )}
                       </div>
                       <ReactECharts
                         option={option}
@@ -349,7 +375,7 @@ const ContributorLineChart = ({
                             window.echartInstance = echartInstance;
                           }
                         }}
-                        style={{ height: 600 }}
+                        style={{ height: 550 }}
                         showLoading={loading}
                         notMerge
                       />

From 94d0b4f3687deff7df6bbd0e9cede14fda5b8ed0 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 28 Apr 2021 18:37:49 +0800
Subject: [PATCH 17/26] feat: update

---
 src/App.js                            | 26 -----------
 src/components/contributor/index.js   | 25 +++++------
 src/components/contributor/service.js | 62 +++++++++++++--------------
 3 files changed, 41 insertions(+), 72 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1176ee4..de240b8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -92,12 +92,9 @@ const App = () => {
   const [alertType, setAlertType] = React.useState("success");
   const [searchOption, setSearchOption] = React.useState([]);
   const [contributorRepoList, setContributorRepoList] = React.useState([]);
-  // const classesTable = useTabStyles();
   const [value, setValue] = React.useState(0);
   const [tabdisabled, setTabDisabled] = React.useState(false);
-  const [showMergeButton, setShowMergeButton] = React.useState(false);
   const [mergeStatus, setMergeStatus] = React.useState(false);
-  const [mergeRepo, setMergeRepo] = React.useState("apache/apisix");
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -160,7 +157,6 @@ const App = () => {
       if (merge === "true" && index !== -1) {
         setTimeout(() => {
           setMergeStatus(true);
-          setShowMergeButton(true);
         }, 500);
       }
     }
@@ -182,26 +178,6 @@ const App = () => {
     );
   }, [value]);
 
-  React.useEffect(() => {
-    const index = ALLOW_MERGE_LIST.findIndex(item => repo.includes(item));
-    if (index !== -1) {
-      setShowMergeButton(true);
-    } else {
-      setShowMergeButton(false);
-      setMergeStatus(false);
-    }
-    if (contributorRepoList.length === 0) {
-      setMergeStatus(false);
-      setShowMergeButton(false);
-    }
-    if (repo.includes("skywalking")) {
-      setMergeRepo("apache/skywalking");
-    }
-    if (repo.includes("apisix")) {
-      setMergeRepo("apache/apisix");
-    }
-  }, [repo, contributorRepoList]);
-
   return (
     <>
       <Snackbar
@@ -368,8 +344,6 @@ const App = () => {
             <TabPanel value={value} index={0}>
               <ContirbutorLineChart
                 repoList={contributorRepoList}
-                isMerge={mergeStatus}
-                mergeRepo={mergeRepo}
                 showAlert={showAlert}
                 onLoading={e => {
                   setTabDisabled(e);
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 5c0701f..e636cdc 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -14,12 +14,9 @@ import { DEFAULT_COLOR } from "../../constants";
 
 const ContributorLineChart = ({
   repoList = ["apache/apisix"],
-
   showAlert,
   onDelete,
-  onLoading,
-  isMerge = false,
-  mergeRepo = ""
+  onLoading
 }) => {
   const [loading, setLoading] = React.useState(false);
   const [dataSource, setDataSource] = React.useState({});
@@ -37,8 +34,8 @@ const ContributorLineChart = ({
   const [viewMerge, setViewMerge] = React.useState(false);
 
   const getShareParams = () => {
-    if (isMerge) {
-      return `?chart=contributorOverTime&repo=${mergeRepo}&merge=true`;
+    if (viewMerge) {
+      return `?chart=contributorOverTime&repo=${repoList.join(",")}&merge=true`;
     }
     return `?chart=contributorOverTime&repo=${repoList.join(",")}`;
   };
@@ -200,7 +197,7 @@ const ContributorLineChart = ({
       return;
     }
 
-    if (!isMerge) {
+    if (!viewMerge) {
       setLoading(true);
       Promise.all(repoList.map(item => fetchData(item, showAlert, onDelete)))
         .then(data => {
@@ -225,30 +222,30 @@ const ContributorLineChart = ({
           setLoading(false);
         });
     } else {
-      if (!mergeRepo.length) return;
+      if (!repoList.length) return;
       setLoading(true);
-      fetchMergeContributor(mergeRepo, showAlert, onDelete)
+      fetchMergeContributor(repoList, showAlert, onDelete)
         .then(_data => {
           const tmpDataSouce = {};
           const { Contributors = [], repo } = _data;
           const data = Contributors.map(item => ({
-            repo,
+            repo: repo.join(","),
             contributorNum: item.idx,
             date: item.date
           }));
 
-          if (!tmpDataSouce[_data.repo]) {
-            tmpDataSouce[repo] = data;
+          if (!tmpDataSouce[repo.join(",")]) {
+            tmpDataSouce[repo.join(",")] = data;
           }
 
           setDataSource(tmpDataSouce);
           setLoading(false);
         })
-        .catch(() => {
+        .catch(e => {
           setLoading(false);
         });
     }
-  }, [repoList, isMerge]);
+  }, [repoList, viewMerge]);
 
   return (
     <>
diff --git a/src/components/contributor/service.js b/src/components/contributor/service.js
index 86ad0bd..4e09674 100644
--- a/src/components/contributor/service.js
+++ b/src/components/contributor/service.js
@@ -1,6 +1,5 @@
 import moment from "moment";
 import { isSameDay } from "../../utils";
-import { getGithubRepoList } from "../../api/service";
 
 export const fetchData = (repo, showAlert, onDelete) => {
   if (repo === "null" || repo === null) {
@@ -89,37 +88,36 @@ export const fetchData = (repo, showAlert, onDelete) => {
 
 export const fetchMergeContributor = (repo, showAlert) => {
   return new Promise((resolve, reject) => {
-    getGithubRepoList(repo).then(data => {
-      fetch(
-        `https://contributor-graph-api.apiseven.com/contributors-multi?repo=${data.join(
-          ","
-        )}`
-      )
-        .then(response => {
-          if (!response.ok) {
-            let message = "";
-            switch (response.status) {
-              case 403:
-                message = "Hit rate limit";
-                break;
-              case 404:
-                message = "Repo format error / Repo not found";
-                break;
-              default:
-                message = "Request Error";
-                break;
-            }
-            throw message;
+    fetch(
+      `https://contributor-graph-api.apiseven.com/contributors-multi?repo=${repo.join(
+        ","
+      )}`
+    )
+      .then(response => {
+        if (!response.ok) {
+          let message = "";
+          switch (response.status) {
+            case 403:
+              message = "Hit rate limit";
+              break;
+            case 404:
+              message = "Repo format error / Repo not found";
+              break;
+            default:
+              message = "Request Error";
+              break;
           }
-          return response.json();
-        })
-        .then(myJson => {
-          resolve({ repo, ...myJson });
-        })
-        .catch(e => {
-          showAlert(e, "error");
-          reject();
-        });
-    });
+          throw message;
+        }
+        return response.json();
+      })
+      .then(myJson => {
+        console.log('myJson: ', myJson);
+        resolve({ repo, ...myJson });
+      })
+      .catch(e => {
+        showAlert(e, "error");
+        reject();
+      });
   });
 };

From 614e55340ad49c71354689f23a13871c69877bec Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 29 Apr 2021 11:31:31 +0800
Subject: [PATCH 18/26] feat: update

---
 src/constants.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/constants.js b/src/constants.js
index ff89d5b..c3219b3 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -3,9 +3,33 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
     color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
     legend: {
       top: "5%",
+      // show: false,
       data: [],
       textStyle: {
         fontSize: 14
+      },
+      formatter: function(params) {
+        var newParamsName = "";
+        var paramsNameNumber = params.length;
+        var provideNumber = 80;
+        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+
+        if (paramsNameNumber > provideNumber) {
+          for (var p = 0; p < rowNumber; p++) {
+            var tempStr = "";
+            var start = p * provideNumber;
+            var end = start + provideNumber;
+            if (p == rowNumber - 1) {
+              tempStr = params.substring(start, paramsNameNumber);
+            } else {
+              tempStr = params.substring(start, end) + "\n";
+            }
+            newParamsName += tempStr;
+          }
+        } else {
+          newParamsName = params;
+        }
+        return newParamsName;
       }
     },
     toolbox: {

From 778ec7b36498538f7371a320b86f0f69a0b4699b Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Fri, 30 Apr 2021 15:06:16 +0800
Subject: [PATCH 19/26] feat: update

---
 src/components/contributor/index.js | 33 +++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index e636cdc..d6df1d2 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -32,6 +32,23 @@ const ContributorLineChart = ({
   );
 
   const [viewMerge, setViewMerge] = React.useState(false);
+  
+  const showMergeButton = React.useMemo(() => {
+    const lastItem = repoList[repoList.length - 1];
+    return lastItem === "apache/apisix" || lastItem === "apache/skywalking";
+  }, [repoList]);
+
+  const mergeRepo = React.useMemo(() => {
+    if (showMergeButton) {
+      return repoList[repoList.length - 1];
+    }
+    return "";
+  }, [repoList, showMergeButton]);
+
+  React.useEffect(() => {
+    // reset viewmerge when repo list change
+    setViewMerge(false);
+  }, [repoList.length]);
 
   const getShareParams = () => {
     if (viewMerge) {
@@ -145,10 +162,6 @@ const ContributorLineChart = ({
     setOption(newClonedOption);
   };
 
-  React.useEffect(() => {
-    console.log("shareModalVisible: ", shareModalVisible);
-  }, [shareModalVisible]);
-
   React.useEffect(() => {
     switch (activeDate) {
       case "1month":
@@ -222,9 +235,9 @@ const ContributorLineChart = ({
           setLoading(false);
         });
     } else {
-      if (!repoList.length) return;
+      if (!mergeRepo.length) return;
       setLoading(true);
-      fetchMergeContributor(repoList, showAlert, onDelete)
+      fetchMergeContributor([mergeRepo], showAlert, onDelete)
         .then(_data => {
           const tmpDataSouce = {};
           const { Contributors = [], repo } = _data;
@@ -350,21 +363,23 @@ const ContributorLineChart = ({
                           </Button>
                         </ButtonGroup>
 
-                        {repoList.length > 1 && (
+                        {showMergeButton && (
                           <Button
                             color="primary"
                             variant="outlined"
+                            size="smalls"
                             onClick={() => {
                               setViewMerge(viewMerge => !viewMerge);
                             }}
                           >
-                            {!viewMerge ? "view merge" : "cancel merge view"}
+                            {!viewMerge
+                              ? `view all repos related to ${mergeRepo}`
+                              : "cancel merge view"}
                           </Button>
                         )}
                       </div>
                       <ReactECharts
                         option={option}
-                        // opts={{ renderer: "svg" }}
                         ref={e => {
                           if (e) {
                             const echartInstance = e.getEchartsInstance();

From 4a4fe37a746c813774ba01bfff03203f24f6fd12 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Fri, 30 Apr 2021 15:16:17 +0800
Subject: [PATCH 20/26] feat: update

---
 src/components/contributor/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index d6df1d2..b9d24a9 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -32,17 +32,19 @@ const ContributorLineChart = ({
   );
 
   const [viewMerge, setViewMerge] = React.useState(false);
-  
+  const [mergeRepo, setMergerRepo] = React.useState("");
+
   const showMergeButton = React.useMemo(() => {
     const lastItem = repoList[repoList.length - 1];
     return lastItem === "apache/apisix" || lastItem === "apache/skywalking";
   }, [repoList]);
 
-  const mergeRepo = React.useMemo(() => {
+  React.useEffect(() => {
     if (showMergeButton) {
-      return repoList[repoList.length - 1];
+      setMergerRepo(repoList[repoList.length - 1]);
+      return;
     }
-    return "";
+    setMergerRepo("");
   }, [repoList, showMergeButton]);
 
   React.useEffect(() => {

From db6eceab55ea300b76fa8268acc730c0d31af8c7 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Mon, 3 May 2021 00:36:32 +0800
Subject: [PATCH 21/26] feat: update share

---
 src/App.js                          | 48 +++--------------------------
 src/components/contributor/index.js | 35 +++++++++++----------
 2 files changed, 23 insertions(+), 60 deletions(-)

diff --git a/src/App.js b/src/App.js
index de240b8..4042bca 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,8 +19,6 @@ const Alert = props => {
   return <MuiAlert elevation={6} variant="filled" {...props} />;
 };
 
-const ALLOW_MERGE_LIST = ["skywalking", "apisix"];
-
 const useStyles = makeStyles(theme => ({
   button: {
     margin: theme.spacing(1)
@@ -94,7 +92,6 @@ const App = () => {
   const [contributorRepoList, setContributorRepoList] = React.useState([]);
   const [value, setValue] = React.useState(0);
   const [tabdisabled, setTabDisabled] = React.useState(false);
-  const [mergeStatus, setMergeStatus] = React.useState(false);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -117,10 +114,6 @@ const App = () => {
   };
 
   const updateChart = repo => {
-    const index = ALLOW_MERGE_LIST.findIndex(item => repo.includes(item));
-    if (index === -1) {
-      setMergeStatus(false);
-    }
     if (!contributorRepoList.includes(repo)) {
       setContributorRepoList([...contributorRepoList, repo]);
     }
@@ -147,24 +140,14 @@ const App = () => {
   React.useEffect(() => {
     getSearchOptions();
     const repo = getParameterByName("repo") || "apache/apisix";
+    const repoArr = repo.split(",").filter(Boolean);
+    setContributorRepoList(repoArr);
+
     const chart = getParameterByName("chart");
     if (chart === "contributorMonthlyActivity") {
       setValue(1);
     } else {
-      const merge = getParameterByName("merge");
-      setRepo(repo);
-      const index = ALLOW_MERGE_LIST.findIndex(item => repo.includes(item));
-      if (merge === "true" && index !== -1) {
-        setTimeout(() => {
-          setMergeStatus(true);
-        }, 500);
-      }
-    }
-    if (repo) {
-      const repoArr = repo.split(",").filter(Boolean);
-      setContributorRepoList(repoArr);
-    } else {
-      setContributorRepoList(["apache/apisix"]);
+      setValue(0);
     }
   }, []);
 
@@ -285,25 +268,6 @@ const App = () => {
                 flexDirection: "column"
               }}
             >
-              {/* {Boolean(!value) && Boolean(showMergeButton) && (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  size="small"
-                  onClick={() => {
-                    setMergeStatus(!mergeStatus);
-                  }}
-                  style={{ width: "260px", marginLeft: "8px" }}
-                >
-                  {Boolean(!mergeStatus)
-                    ? `View all repos related to ${
-                        repo.includes("skywalking")
-                          ? "apache/skywalking"
-                          : "apache/apisix"
-                      }`
-                    : "Cancel merge view"}
-                </Button>
-              )} */}
             </div>
           </div>
 
@@ -349,10 +313,6 @@ const App = () => {
                   setTabDisabled(e);
                 }}
                 onDelete={e => {
-                  if (mergeStatus) {
-                    setMergeStatus(false);
-                    return;
-                  }
                   setContributorRepoList(
                     contributorRepoList.filter(item => item !== e)
                   );
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index b9d24a9..0e6ae0c 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -6,14 +6,14 @@ import * as echarts from "echarts";
 import omit from "lodash.omit";
 
 import { Button, ButtonGroup } from "@material-ui/core";
-import { getMonths } from "../../utils";
+import { getMonths, getParameterByName } from "../../utils";
 import { generateDefaultOption } from "../../constants";
 import { fetchData, fetchMergeContributor } from "./service";
 import CustomizedDialogs from "../shareDialog";
 import { DEFAULT_COLOR } from "../../constants";
 
 const ContributorLineChart = ({
-  repoList = ["apache/apisix"],
+  repoList = [],
   showAlert,
   onDelete,
   onLoading
@@ -49,12 +49,14 @@ const ContributorLineChart = ({
 
   React.useEffect(() => {
     // reset viewmerge when repo list change
-    setViewMerge(false);
+    if (!showMergeButton) {
+      setViewMerge(false);
+    }
   }, [repoList.length]);
 
   const getShareParams = () => {
     if (viewMerge) {
-      return `?chart=contributorOverTime&repo=${repoList.join(",")}&merge=true`;
+      return `?chart=contributorOverTime&repo=${mergeRepo}&merge=true`;
     }
     return `?chart=contributorOverTime&repo=${repoList.join(",")}`;
   };
@@ -262,6 +264,18 @@ const ContributorLineChart = ({
     }
   }, [repoList, viewMerge]);
 
+  React.useEffect(() => {
+    const merge = getParameterByName("merge");
+    const repo = getParameterByName("repo");
+    if (
+      (merge === "true" && repo === "apache/apisix") ||
+      repo === "apache/skywalking"
+    ) {
+      setMergerRepo(repo);
+      setViewMerge(true);
+    }
+  }, []);
+
   return (
     <>
       <div
@@ -273,17 +287,6 @@ const ContributorLineChart = ({
       >
         <Dialog />
         <div className="right" style={{ width: "100%" }}>
-          {/* <div style={{ marginTop: "10px" }}>
-            <CompareComponent
-              list={Object.keys(dataSource)}
-              onDelete={e => {
-                const clonedDataSource = cloneDeep(dataSource);
-                const newDataSource = omit(clonedDataSource, [e]);
-                setDataSource(newDataSource);
-                onDelete(e);
-              }}
-            />
-          </div> */}
           <div
             id="chart"
             style={{
@@ -369,7 +372,7 @@ const ContributorLineChart = ({
                           <Button
                             color="primary"
                             variant="outlined"
-                            size="smalls"
+                            size="small"
                             onClick={() => {
                               setViewMerge(viewMerge => !viewMerge);
                             }}

From e3df0351942db2c0434c6a932e3d9b6e6fc1d1fb Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 4 May 2021 11:24:27 +0800
Subject: [PATCH 22/26] feat: update

---
 src/App.js                          |  30 +++--
 src/components/chip.js              |   2 +-
 src/components/contributor/index.js | 188 ++++++++++++----------------
 3 files changed, 101 insertions(+), 119 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4042bca..44800cc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,9 @@ import Tab from "@material-ui/core/Tab";
 import PropTypes from "prop-types";
 import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
+import IconButton from "@material-ui/core/IconButton";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import SearchIcon from "@material-ui/icons/Search";
 import cloneDeep from "lodash.clonedeep";
 
 import ContirbutorLineChart from "./components/contributor";
@@ -222,19 +225,23 @@ const App = () => {
                       ev.preventDefault();
                     }
                   }}
-                  InputProps={{ ...params.InputProps, type: "search" }}
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: (
+                      <InputAdornment>
+                        <IconButton
+                          onClick={() => {
+                            updateChart(repo);
+                          }}
+                        >
+                          <SearchIcon />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
                 />
               )}
             />
-            {/* <IconButton
-                className={classes.iconButton}
-                aria-label="search"
-                onClick={() => {
-                  updateChart(repo);
-                }}
-              >
-                <SearchIcon />
-              </IconButton> */}
           </Paper>
           <div>
             <CompareComponent
@@ -267,8 +274,7 @@ const App = () => {
                 justifyContent: "center",
                 flexDirection: "column"
               }}
-            >
-            </div>
+            ></div>
           </div>
 
           <div>
diff --git a/src/components/chip.js b/src/components/chip.js
index 17099bd..c1544aa 100644
--- a/src/components/chip.js
+++ b/src/components/chip.js
@@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
     "& > *": {
       margin: theme.spacing(0.5)
     }
-  }
+  },
 }));
 
 export default function OutlinedChips({ list = [], onDelete }) {
diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 0e6ae0c..7fe1c3e 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -294,113 +294,89 @@ const ContributorLineChart = ({
               padding: "0px 40px"
             }}
           >
-            <Tab.Container defaultActiveKey="contributor">
-              <Row>
-                <Col>
-                  <Tab.Content>
-                    <Tab.Pane eventKey="contributor">
-                      <div
-                        style={{
-                          marginBottom: "5px",
-                          display: "flex",
-                          justifyContent: "space-between"
-                        }}
-                      >
-                        <ButtonGroup color="secondary" size="small">
-                          <Button
-                            variant={
-                              activeDate === "1month" ? "contained" : "outlined"
-                            }
-                            value="1month"
-                            onClick={e => {
-                              setActiveDate(e.currentTarget.value);
-                            }}
-                          >
-                            1 Month
-                          </Button>
-                          <Button
-                            variant={
-                              activeDate === "3months"
-                                ? "contained"
-                                : "outlined"
-                            }
-                            value="3months"
-                            onClick={e => {
-                              setActiveDate(e.currentTarget.value);
-                            }}
-                          >
-                            3 Months
-                          </Button>
-                          <Button
-                            variant={
-                              activeDate === "6months"
-                                ? "contained"
-                                : "outlined"
-                            }
-                            value="6months"
-                            onClick={e => {
-                              setActiveDate(e.currentTarget.value);
-                            }}
-                          >
-                            6 Months
-                          </Button>
-                          <Button
-                            variant={
-                              activeDate === "1year" ? "contained" : "outlined"
-                            }
-                            value="1year"
-                            onClick={e => {
-                              setActiveDate(e.currentTarget.value);
-                            }}
-                          >
-                            1 Year
-                          </Button>
-                          <Button
-                            variant={
-                              activeDate === "max" ? "contained" : "outlined"
-                            }
-                            value="max"
-                            onClick={e => {
-                              setActiveDate(e.currentTarget.value);
-                            }}
-                          >
-                            Max
-                          </Button>
-                        </ButtonGroup>
+            <div
+              style={{
+                marginBottom: "5px",
+                display: document.body.clientWidth > 670 ? "flex" : "unset",
+                justifyContent: "space-between"
+              }}
+            >
+              <ButtonGroup color="secondary" size="small">
+                <Button
+                  variant={activeDate === "1month" ? "contained" : "outlined"}
+                  value="1month"
+                  onClick={e => {
+                    setActiveDate(e.currentTarget.value);
+                  }}
+                >
+                  1 Month
+                </Button>
+                <Button
+                  variant={activeDate === "3months" ? "contained" : "outlined"}
+                  value="3months"
+                  onClick={e => {
+                    setActiveDate(e.currentTarget.value);
+                  }}
+                >
+                  3 Months
+                </Button>
+                <Button
+                  variant={activeDate === "6months" ? "contained" : "outlined"}
+                  value="6months"
+                  onClick={e => {
+                    setActiveDate(e.currentTarget.value);
+                  }}
+                >
+                  6 Months
+                </Button>
+                <Button
+                  variant={activeDate === "1year" ? "contained" : "outlined"}
+                  value="1year"
+                  onClick={e => {
+                    setActiveDate(e.currentTarget.value);
+                  }}
+                >
+                  1 Year
+                </Button>
+                <Button
+                  variant={activeDate === "max" ? "contained" : "outlined"}
+                  value="max"
+                  onClick={e => {
+                    setActiveDate(e.currentTarget.value);
+                  }}
+                >
+                  Max
+                </Button>
+              </ButtonGroup>
 
-                        {showMergeButton && (
-                          <Button
-                            color="primary"
-                            variant="outlined"
-                            size="small"
-                            onClick={() => {
-                              setViewMerge(viewMerge => !viewMerge);
-                            }}
-                          >
-                            {!viewMerge
-                              ? `view all repos related to ${mergeRepo}`
-                              : "cancel merge view"}
-                          </Button>
-                        )}
-                      </div>
-                      <ReactECharts
-                        option={option}
-                        ref={e => {
-                          if (e) {
-                            const echartInstance = e.getEchartsInstance();
-                            // then you can use any API of echarts.
-                            window.echartInstance = echartInstance;
-                          }
-                        }}
-                        style={{ height: 550 }}
-                        showLoading={loading}
-                        notMerge
-                      />
-                    </Tab.Pane>
-                  </Tab.Content>
-                </Col>
-              </Row>
-            </Tab.Container>
+              {showMergeButton && (
+                <Button
+                  color="primary"
+                  variant="outlined"
+                  size="small"
+                  onClick={() => {
+                    setViewMerge(viewMerge => !viewMerge);
+                  }}
+                >
+                  {!viewMerge
+                    ? `view all repos related to ${mergeRepo}`
+                    : "cancel merge view"}
+                </Button>
+              )}
+            </div>
+            <ReactECharts
+              option={option}
+              ref={e => {
+                if (e) {
+                  const echartInstance = e.getEchartsInstance();
+                  // then you can use any API of echarts.
+                  window.echartInstance = echartInstance;
+                }
+              }}
+              style={{ height: 550 }}
+              showLoading={loading}
+              notMerge
+            />
           </div>
         </div>
       </div>

From f9a8c4ab0e600ef59ae9da499a76a0fd6f66af18 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 11 May 2021 22:22:36 +0800
Subject: [PATCH 23/26] feat: remove border radius

---
 src/components/shareDialog/index.css | 3 +++
 src/components/shareDialog/index.js  | 8 ++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 src/components/shareDialog/index.css

diff --git a/src/components/shareDialog/index.css b/src/components/shareDialog/index.css
new file mode 100644
index 0000000..eaaef66
--- /dev/null
+++ b/src/components/shareDialog/index.css
@@ -0,0 +1,3 @@
+.shareInput .MuiOutlinedInput-root {
+  border-radius: 0px;
+}
diff --git a/src/components/shareDialog/index.js b/src/components/shareDialog/index.js
index d2602ac..ea90054 100644
--- a/src/components/shareDialog/index.js
+++ b/src/components/shareDialog/index.js
@@ -16,6 +16,7 @@ import TextField from "@material-ui/core/TextField";
 import copy from "copy-to-clipboard";
 
 import { inIframe } from "../../utils";
+import "./index.css";
 
 const styles = theme => ({
   root: {
@@ -43,13 +44,15 @@ const ShareLink = ({ params = "" }) => {
             id="standard-basic"
             label="Share Link"
             variant="outlined"
+            className="shareInput"
             value={`${SHARE_BASE_URL}${params}`}
             size="small"
-            style={{ width: "400px" }}
+            style={{ width: "400px", borderRadius: "0px" }}
           />
           <Button
             variant="contained"
             color="primary"
+            style={{ borderRadius: "0px" }}
             onClick={() => {
               copy(SHARE_BASE_URL + params);
             }}
@@ -59,9 +62,9 @@ const ShareLink = ({ params = "" }) => {
         </div>
         <div style={{ display: "flex" }}>
           <TextField
-            id="standard-basic"
             label="Image Link"
             variant="outlined"
+            className="shareInput"
             value={`${IMG_BASE_URL}${params}`}
             size="small"
             style={{ width: "400px" }}
@@ -69,6 +72,7 @@ const ShareLink = ({ params = "" }) => {
           <Button
             variant="contained"
             color="primary"
+            style={{ borderRadius: "0px" }}
             onClick={() => {
               copy(IMG_BASE_URL + params);
             }}

From 3de06729042f92b5ce0dceb252eb5dd570aa5007 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 11 May 2021 22:52:28 +0800
Subject: [PATCH 24/26] feat: update padding

---
 src/constants.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 2977ad3..eaa1163 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -6,7 +6,7 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
       data: [],
       textStyle: {
         fontSize: 14
-      },
+      }
     },
     toolbox: {
       feature: {
@@ -52,14 +52,19 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
         }
       }
     },
-    series: []
+    series: [],
+    grid: {
+      x: 40,
+      x2: 15,
+      y: 80
+    }
   };
 };
 
 export const DEFAULT_ACTIVITY_OPTIONS = {
   color: ["#39a85a", "#4385ee", "#fabc37", "#2dc1dd", "#f972cf", "#8331c8"],
   legend: {
-    top: "5%",
+    top: "10%",
     data: [],
     textStyle: {
       fontSize: 16
@@ -102,7 +107,12 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
       }
     }
   },
-  series: []
+  series: [],
+  grid: {
+    x: 30,
+    x2: 13,
+    y: 80
+  }
 };
 
 export const DEFAULT_COLOR = "#39a85a";

From 6bfd8830e2622e7733e00f70e5109ea603262b82 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 11 May 2021 22:56:25 +0800
Subject: [PATCH 25/26] feat: update

---
 src/App.js       | 2 +-
 src/constants.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 44800cc..f5df433 100644
--- a/src/App.js
+++ b/src/App.js
@@ -191,7 +191,7 @@ const App = () => {
             display: "flex",
             justifyContent: "center",
             flexDirection: "column",
-            width: "70%"
+            width: "40%"
           }}
         >
           <Paper className={classes.root} elevation={0}>
diff --git a/src/constants.js b/src/constants.js
index eaa1163..aa0155b 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -109,7 +109,7 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
   },
   series: [],
   grid: {
-    x: 30,
+    x: 31,
     x2: 13,
     y: 80
   }

From 0c3041e3d4d6f3a89c1a2e186cc57b7f780fb624 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Tue, 11 May 2021 23:02:21 +0800
Subject: [PATCH 26/26] feat: remove download icon

---
 src/components/contributor/index.js | 24 ++++++++++++++++++++++++
 src/components/shareDialog/index.js | 20 --------------------
 src/constants.js                    | 13 +------------
 3 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/src/components/contributor/index.js b/src/components/contributor/index.js
index 4979078..f2c56c4 100644
--- a/src/components/contributor/index.js
+++ b/src/components/contributor/index.js
@@ -10,6 +10,8 @@ import { generateDefaultOption } from "../../constants";
 import { fetchData, fetchMergeContributor } from "./service";
 import CustomizedDialogs from "../shareDialog";
 import { DEFAULT_COLOR } from "../../constants";
+import SyntaxHighlighter from "react-syntax-highlighter/dist/esm/default-highlight";
+import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 const ContributorLineChart = ({
   repoList = [],
@@ -38,6 +40,27 @@ const ContributorLineChart = ({
     return lastItem === "apache/apisix" || lastItem === "apache/skywalking";
   }, [repoList]);
 
+  const SHARE_BASE_URL = "https://www.apiseven.com/en/contributor-graph";
+  const IMG_BASE_URL =
+    "https://contributor-graph-api.apiseven.com/contributors-svg";
+
+  const MarkdownLink = ({ params = "" }) => {
+    return (
+      <div>
+        <p>
+          You can include the chart on your repository's README.md as follows:
+        </p>
+        <SyntaxHighlighter language="markdown" style={a11yDark}>
+          {`
+  ## Contributor over time
+  
+  [![Contributor over time](${IMG_BASE_URL + params})[${SHARE_BASE_URL +
+            params}]]`}
+        </SyntaxHighlighter>
+      </div>
+    );
+  };
+
   React.useEffect(() => {
     if (showMergeButton) {
       setMergerRepo(repoList[repoList.length - 1]);
@@ -376,6 +399,7 @@ const ContributorLineChart = ({
               showLoading={loading}
               notMerge
             />
+            <MarkdownLink params={getShareParams()} />
           </div>
         </div>
       </div>
diff --git a/src/components/shareDialog/index.js b/src/components/shareDialog/index.js
index ea90054..caf915c 100644
--- a/src/components/shareDialog/index.js
+++ b/src/components/shareDialog/index.js
@@ -9,8 +9,6 @@ import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
 import { makeStyles } from "@material-ui/core/styles";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import copy from "copy-to-clipboard";
@@ -170,23 +168,6 @@ function CenteredGrid({ params = "" }) {
   );
 }
 
-const MarkdownLink = ({ params = "" }) => {
-  return (
-    <div>
-      <p>
-        You can include the chart on your repository's README.md as follows:
-      </p>
-      <SyntaxHighlighter language="markdown" style={a11yDark}>
-        {`
-## Contributor over time
-
-[![Contributor over time](${IMG_BASE_URL + params})[${SHARE_BASE_URL +
-          params}]]`}
-      </SyntaxHighlighter>
-    </div>
-  );
-};
-
 const DialogTitle = withStyles(styles)(props => {
   const { children, classes, onClose, ...other } = props;
   return (
@@ -232,7 +213,6 @@ export default function CustomizedDialogs({
         <DialogContent dividers>
           <CenteredGrid params={params} />
           <ShareLink params={params} />
-          <MarkdownLink params={params} />
         </DialogContent>
       </Dialog>
     </div>
diff --git a/src/constants.js b/src/constants.js
index aa0155b..075e7a1 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -18,11 +18,6 @@ export const generateDefaultOption = ({ handleShareClick = () => {} }) => {
           onclick: function() {
             handleShareClick();
           }
-        },
-        saveAsImage: {
-          title: "Save",
-          show: true,
-          type: "png"
         }
       }
     },
@@ -71,13 +66,7 @@ export const DEFAULT_ACTIVITY_OPTIONS = {
     }
   },
   toolbox: {
-    feature: {
-      saveAsImage: {
-        title: "Save",
-        show: true,
-        type: "png"
-      }
-    }
+    feature: {}
   },
   dataset: [],
   title: {