Skip to content

Commit

Permalink
enhancement: modify the display effect on the xAxis of tooltip charts (…
Browse files Browse the repository at this point in the history 
…#792)

* style/improve-tooltip-chart

* style:improve XAxis style

* change back

* style:further changes

* fix:add judgment

* fix:add judgment

* fix:add judgment criteria to all charts

* fix:omission
  • Loading branch information
@wangyantong2000
wangyantong2000 authored Apr 29, 2024
1 parent bd52b28 commit 7ac2f0a
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 20 deletions.
27 changes: 24 additions & 3 deletions src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,14 @@ interface ForkChartProps {

const ForkChart = (props: ForkChartProps): JSX.Element => {
const { theme, width, height, data } = props;

const startTime = Number(data[0][0].split('-')[0]);
const endTime = Number(data[data.length - 1][0].split('-')[0]);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;

const option: echarts.EChartsOption = {
tooltip: {
trigger: 'axis',
Expand All @@ -52,10 +55,11 @@ const ForkChart = (props: ForkChartProps): JSX.Element => {
xAxis: {
type: 'time',
// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
splitLine: {
show: false,
},

minInterval: minInterval,
axisLabel: {
color: TH.FG_COLOR,
formatter: {
Expand Down Expand Up @@ -137,6 +141,23 @@ const ForkChart = (props: ForkChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
}
}, []);
Expand Down
25 changes: 23 additions & 2 deletions src/pages/ContentScripts/features/repo-header-labels/ActivityChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ interface ActivityChartProps {

const ActivityChart = (props: ActivityChartProps): JSX.Element => {
const { theme, width, height, data } = props;

const startTime = Number(data[0][0].split('-')[0]);
const endTime = Number(data[data.length - 1][0].split('-')[0]);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
Expand All @@ -52,7 +56,7 @@ const ActivityChart = (props: ActivityChartProps): JSX.Element => {
xAxis: {
type: 'time',
// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -136,6 +140,23 @@ const ActivityChart = (props: ActivityChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
}
}, []);
Expand Down
26 changes: 23 additions & 3 deletions src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@ interface ContributorChartProps {

const ContributorChart = (props: ContributorChartProps): JSX.Element => {
const { theme, width, height, data } = props;

const startTime = Number(data[0][0].split('-')[0]);
const endTime = Number(data[data.length - 1][0].split('-')[0]);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;

const option: echarts.EChartsOption = {
Expand All @@ -52,7 +55,7 @@ const ContributorChart = (props: ContributorChartProps): JSX.Element => {
xAxis: {
type: 'time',
// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -136,6 +139,23 @@ const ContributorChart = (props: ContributorChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
}
}, []);
Expand Down
25 changes: 23 additions & 2 deletions src/pages/ContentScripts/features/repo-header-labels/OpenRankChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ interface OpenRankChartProps {

const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
const { theme, width, height, data } = props;

const startTime = Number(data[0][0].split('-')[0]);
const endTime = Number(data[data.length - 1][0].split('-')[0]);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
Expand All @@ -52,7 +56,7 @@ const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
xAxis: {
type: 'time',
// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -136,6 +140,23 @@ const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
}
}, []);
Expand Down
25 changes: 23 additions & 2 deletions src/pages/ContentScripts/features/repo-header-labels/ParticipantChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ interface ParticipantChartProps {

const ParticipantChart = (props: ParticipantChartProps): JSX.Element => {
const { theme, width, height, data } = props;

const startTime = Number(data[0][0].split('-')[0]);
const endTime = Number(data[data.length - 1][0].split('-')[0]);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
Expand All @@ -52,7 +56,7 @@ const ParticipantChart = (props: ParticipantChartProps): JSX.Element => {
xAxis: {
type: 'time',
// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -136,6 +140,23 @@ const ParticipantChart = (props: ParticipantChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
}
}, []);
Expand Down
28 changes: 26 additions & 2 deletions src/pages/ContentScripts/features/repo-issue-tooltip/IssueChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,14 @@ interface IssueChartProps {

const IssueChart = (props: IssueChartProps): JSX.Element => {
const { theme, width, height, data, onClick } = props;

const issueCommentsData = data['issueComments'];
const startTime = Number(issueCommentsData[0][0].split('-')[0]);
const endTime = Number(
issueCommentsData[issueCommentsData.length - 1][0].split('-')[0]
);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
Expand Down Expand Up @@ -63,7 +70,7 @@ const IssueChart = (props: IssueChartProps): JSX.Element => {
xAxis: {
type: 'time',
// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 30 * 3600 * 24 * 1000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -157,6 +164,23 @@ const IssueChart = (props: IssueChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
if (onClick) {
instance.on('click', (params) => {
Expand Down
29 changes: 27 additions & 2 deletions src/pages/ContentScripts/features/repo-pr-tooltip/MergedLinesChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,14 @@ interface MergedLinesChartProps {

const MergedLinesChart = (props: MergedLinesChartProps): JSX.Element => {
const { theme, width, height, data } = props;

const mergedCodeAdditionData = data['mergedCodeAddition'];
const startTime = Number(mergedCodeAdditionData[0][0].split('-')[0]);
const endTime = Number(
mergedCodeAdditionData[mergedCodeAdditionData.length - 1][0].split('-')[0]
);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
Expand Down Expand Up @@ -60,8 +67,9 @@ const MergedLinesChart = (props: MergedLinesChartProps): JSX.Element => {
},
xAxis: {
type: 'time',

// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -150,6 +158,23 @@ const MergedLinesChart = (props: MergedLinesChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
}
}, []);
Expand Down
29 changes: 27 additions & 2 deletions src/pages/ContentScripts/features/repo-pr-tooltip/PRChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,14 @@ interface PRChartProps {

const PRChart = (props: PRChartProps): JSX.Element => {
const { theme, width, height, data, onClick } = props;

const PROpenedData = data['PROpened'];
const startTime = Number(PROpenedData[0][0].split('-')[0]);
const endTime = Number(
PROpenedData[PROpenedData.length - 1][0].split('-')[0]
);
const timeLength = endTime - startTime;
const minInterval =
timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
const divEL = useRef(null);

const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
Expand Down Expand Up @@ -62,8 +69,9 @@ const PRChart = (props: PRChartProps): JSX.Element => {
},
xAxis: {
type: 'time',

// 30 * 3600 * 24 * 1000 milliseconds
minInterval: 2592000000,
minInterval: minInterval,
splitLine: {
show: false,
},
Expand Down Expand Up @@ -157,6 +165,23 @@ const PRChart = (props: PRChartProps): JSX.Element => {
let chartDOM = divEL.current;
const instance = echarts.getInstanceByDom(chartDOM as any);
if (instance) {
if (timeLength > 2) {
instance.on('dataZoom', (params: any) => {
let option = instance.getOption() as {
xAxis: { minInterval?: any }[];
};
const startValue = params.batch[0].start;
const endValue = params.batch[0].end;
let minInterval: number;
if (startValue == 0 && endValue == 100) {
minInterval = 365 * 24 * 3600 * 1000;
} else {
minInterval = 30 * 24 * 3600 * 1000;
}
option.xAxis[0].minInterval = minInterval;
instance.setOption(option);
});
}
instance.setOption(option);
if (onClick) {
instance.on('click', (params) => {
Expand Down
Loading

0 comments on commit 7ac2f0a

Please sign in to comment.