= await createGraph('line', options, {
- labels: [...Array(contributions.length + 1).keys()].slice(1),
+ labels: contribution_dates,
series: [{ value: contributions }],
});
diff --git a/src/fetcher.ts b/src/fetcher.ts
index d5341a1..9d404bc 100644
--- a/src/fetcher.ts
+++ b/src/fetcher.ts
@@ -51,6 +51,24 @@ export const fetch: fetcher = (data: query) =>
data,
});
+const getContrubutionDates = () => {
+ const days = [];
+ for (
+ const date = new Date();
+ days.length < 31;
+ date.setDate(date.getUTCDate() - 1)
+ ) {
+ const current = new Date(date);
+ days.push(
+ current.toLocaleString('default', { month: 'short' }) +
+ ' ' +
+ current.getUTCDate().toString()
+ );
+ }
+
+ return days.reverse();
+};
+
export const fetchContributions: fetchContribution = async (
username: string,
graphqlQuery: gqlQuery, //Dependency Injection
@@ -63,25 +81,27 @@ export const fetchContributions: fetchContribution = async (
else {
const userData: userDetails = {
contributions: [],
+ contribution_dates: getContrubutionDates(),
name: apiResponse.data.data.user.name,
};
//filtering the week data from API response
const weeks: week[] =
apiResponse.data.data.user.contributionsCollection.contributionCalendar
.weeks;
+
+ const contributions: number[] = [];
//slicing last 6 weeks
weeks.slice(weeks.length - 6, weeks.length).map((week: week) =>
week.contributionDays.map((contributionCount: contributionCount) => {
- userData.contributions.push(contributionCount.contributionCount);
+ contributions.push(contributionCount.contributionCount);
})
);
- //returning data of last 31 days
- const presentDay = new Date().getDay();
- userData.contributions = userData.contributions.slice(
- 5 + presentDay,
- 36 + presentDay
- );
+ // get 31 days contributions
+ for (let i = contributions.length - 31; i < contributions.length; i++) {
+ userData.contributions.push(contributions[i]);
+ }
+
return userData;
}
} catch (error) {
diff --git a/src/utils.ts b/src/utils.ts
index bd3a66a..f5a8976 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -90,7 +90,8 @@ export const getGraph =
);
const getChart: string = await graph.chart(
- fetchCalendarData.contributions
+ fetchCalendarData.contributions,
+ fetchCalendarData.contribution_dates
);
setHttpHeader(res, 'public, max-age=1800');
diff --git a/styles/graphStyle.ts b/styles/graphStyle.ts
index 2dc68d1..2c5458f 100644
--- a/styles/graphStyle.ts
+++ b/styles/graphStyle.ts
@@ -114,4 +114,15 @@ export const graphStyle = (
.ct-label .ct-horizontal {
transform: rotate(-90deg)
}
+
+ .ct-label.ct-horizontal.ct-end {
+ transform: rotate(-30deg);
+ -webkit-transform: rotate(-30deg);
+ -moz-transform: rotate(-30deg);
+ -o-transform: rotate(-30deg);
+ -ms-transform: rotate(-30deg);
+ transform-box: fill-box;
+ transform-origin: 100% 0;
+ text-anchor: end;
+ }
`;
diff --git a/styles/themes.ts b/styles/themes.ts
index 004ff9d..d2ee21b 100644
--- a/styles/themes.ts
+++ b/styles/themes.ts
@@ -128,6 +128,51 @@ export const selectColors = (queryString: string): colors => {
lineColor: 'c792ea',
pointColor: '89ddff',
};
+ case 'green':
+ return {
+ areaColor: '588157',
+ borderColor: 'ffffff',
+ bgColor: 'dad7cd',
+ color: '3a5a40',
+ lineColor: '588157',
+ pointColor: '344e41',
+ };
+ case 'gotham':
+ return {
+ areaColor: '2aa889',
+ bgColor: '0c1014',
+ borderColor: '2aa889',
+ color: '2aa889',
+ lineColor: '599cab',
+ pointColor: '99d1ce',
+ };
+ case 'noctis-minimus':
+ return {
+ areaColor: '72b7c0',
+ borderColor: 'ffffff',
+ bgColor: '1b2932',
+ color: 'd3b692',
+ lineColor: '72b7c0',
+ pointColor: 'c5cdd3',
+ };
+ case 'one-dark':
+ return {
+ areaColor: 'e5c17c',
+ borderColor: 'ffffff',
+ bgColor: '282C34',
+ color: 'abb2bf',
+ lineColor: 'e5c17c',
+ pointColor: 'e06c75',
+ };
+ case 'monokai':
+ return {
+ areaColor: 'ff6188',
+ borderColor: 'ffffff',
+ bgColor: '2D2A2E',
+ color: 'fcfcfa',
+ lineColor: 'ff6188',
+ pointColor: 'ffd866',
+ };
default:
return {
areaColor: '9e4c98',
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy