-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add contributor in repo-header-labels (#794)
- Loading branch information
1 parent
4a09f0d
commit bd52b28
Showing
6 changed files
with
198 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import * as echarts from 'echarts'; | ||
|
|
||
| import { formatNum, numberWithCommas } from '../../../../helpers/formatter'; | ||
|
|
||
| const LIGHT_THEME = { | ||
| FG_COLOR: '#24292F', | ||
| BG_COLOR: '#ffffff', | ||
| SPLIT_LINE_COLOR: '#D0D7DE', | ||
| BAR_COLOR: '#3E90F1', | ||
| LINE_COLOR: '#267FE8', | ||
| }; | ||
|
|
||
| const DARK_THEME = { | ||
| FG_COLOR: '#c9d1d9', | ||
| BG_COLOR: '#0d1118', | ||
| SPLIT_LINE_COLOR: '#30363D', | ||
| BAR_COLOR: '#3E90F1', | ||
| LINE_COLOR: '#82BBFF', | ||
| }; | ||
|
|
||
| interface ContributorChartProps { | ||
| theme: 'light' | 'dark'; | ||
| width: number; | ||
| height: number; | ||
| data: [string, number][]; | ||
| } | ||
|
|
||
| const ContributorChart = (props: ContributorChartProps): JSX.Element => { | ||
| const { theme, width, height, data } = props; | ||
|
|
||
| const divEL = useRef(null); | ||
|
|
||
| const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME; | ||
|
|
||
| const option: echarts.EChartsOption = { | ||
| tooltip: { | ||
| trigger: 'axis', | ||
| textStyle: { | ||
| color: TH.FG_COLOR, | ||
| }, | ||
| backgroundColor: TH.BG_COLOR, | ||
| formatter: tooltipFormatter, | ||
| }, | ||
| grid: { | ||
| top: '10%', | ||
| bottom: '5%', | ||
| left: '8%', | ||
| right: '5%', | ||
| containLabel: true, | ||
| }, | ||
| xAxis: { | ||
| type: 'time', | ||
| // 30 * 3600 * 24 * 1000 milliseconds | ||
| minInterval: 2592000000, | ||
| splitLine: { | ||
| show: false, | ||
| }, | ||
| axisLabel: { | ||
| color: TH.FG_COLOR, | ||
| formatter: { | ||
| year: '{yearStyle|{yy}}', | ||
| month: '{MMM}', | ||
| }, | ||
| rich: { | ||
| yearStyle: { | ||
| fontWeight: 'bold', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| yAxis: [ | ||
| { | ||
| type: 'value', | ||
| position: 'left', | ||
| axisLabel: { | ||
| color: TH.FG_COLOR, | ||
| formatter: formatNum, | ||
| }, | ||
| splitLine: { | ||
| lineStyle: { | ||
| color: TH.SPLIT_LINE_COLOR, | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| dataZoom: [ | ||
| { | ||
| type: 'inside', | ||
| start: 0, | ||
| end: 100, | ||
| minValueSpan: 3600 * 24 * 1000 * 180, | ||
| }, | ||
| ], | ||
| series: [ | ||
| { | ||
| type: 'bar', | ||
| data: data, | ||
| itemStyle: { | ||
| color: '#ff8061', | ||
| }, | ||
| emphasis: { | ||
| focus: 'series', | ||
| }, | ||
| yAxisIndex: 0, | ||
| }, | ||
| { | ||
| type: 'line', | ||
| symbol: 'none', | ||
| lineStyle: { | ||
| color: '#ff8061', | ||
| }, | ||
| data: data, | ||
| emphasis: { | ||
| focus: 'series', | ||
| }, | ||
| yAxisIndex: 0, | ||
| }, | ||
| ], | ||
| animationEasing: 'elasticOut', | ||
| animationDelayUpdate: function (idx: any) { | ||
| return idx * 5; | ||
| }, | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| let chartDOM = divEL.current; | ||
| const instance = echarts.init(chartDOM as any); | ||
|
|
||
| return () => { | ||
| instance.dispose(); | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| let chartDOM = divEL.current; | ||
| const instance = echarts.getInstanceByDom(chartDOM as any); | ||
| if (instance) { | ||
| instance.setOption(option); | ||
| } | ||
| }, []); | ||
|
|
||
| return <div ref={divEL} style={{ width, height }}></div>; | ||
| }; | ||
|
|
||
| const tooltipFormatter = (params: any) => { | ||
| const res = ` | ||
| ${params[0].data[0]}<br/> | ||
| ${params[0].marker} | ||
| <span style="font-weight:bold;"> | ||
| ${numberWithCommas(params[0].data[1])} | ||
| </span> | ||
| `; | ||
| return res; | ||
| }; | ||
|
|
||
| export default ContributorChart; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters