Skip to content

Commit

Permalink
Merge pull request #80 from andinoriel/feature/days
Browse files Browse the repository at this point in the history 
Display actual dates on x-axis
  • Loading branch information
@Kshitij978
Kshitij978 authored Sep 4, 2021
2 parents 3c6a973 + 25f16ae commit 1d02ab0
Show file tree
Hide file tree
Showing 10 changed files with 72 additions and 10 deletions.
16 changes: 15 additions & 1 deletion __test__/__snapshots__/svgs.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,13 @@ exports[`Test SVGs 1`] = `
transform: rotate(-90deg)
}
.ct-label.ct-horizontal.ct-end {
transform: rotate(-30deg);
transform-box: fill-box;
transform-origin: 100% 0;
text-anchor: end;
}
@keyframes blink {
Expand Down Expand Up @@ -326,6 +333,13 @@ exports[`chart SVGs 1`] = `
transform: rotate(-90deg)
}
.ct-label.ct-horizontal.ct-end {
transform: rotate(-30deg);
transform-box: fill-box;
transform-origin: 100% 0;
text-anchor: end;
}
@keyframes blink {
Expand Down Expand Up @@ -354,7 +368,7 @@ exports[`chart SVGs 1`] = `
xyz's Contribution Graph
</h1>
</foreignObject>
<svg xmlns:ct=\\"http://gionkunz.github.com/chartist-js/ct\\" width=\\"1200\\" height=\\"420\\" class=\\"ct-chart-line\\"><g class=\\"ct-grids\\"><line x1=\\"90\\" x2=\\"90\\" y1=\\"80\\" y2=\\"350\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"355\\" x2=\\"355\\" y1=\\"80\\" y2=\\"350\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"620\\" x2=\\"620\\" y1=\\"80\\" y2=\\"350\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"885\\" x2=\\"885\\" y1=\\"80\\" y2=\\"350\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"1150\\" x2=\\"1150\\" y1=\\"80\\" y2=\\"350\\" class=\\"ct-grid ct-horizontal\\"></line><line y1=\\"350\\" y2=\\"350\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"282.5\\" y2=\\"282.5\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"215\\" y2=\\"215\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"147.5\\" y2=\\"147.5\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"80\\" y2=\\"80\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line></g><g><g class=\\"ct-series ct-series-a\\"><path d=\\"M90,350C178.333,327.5,266.667,305,355,282.5C443.333,260,531.667,237.5,620,215C708.333,192.5,796.667,170,885,147.5C973.333,125,1061.667,102.5,1150,80\\" class=\\"ct-line\\"></path><line x1=\\"90\\" y1=\\"350\\" x2=\\"90.01\\" y2=\\"350\\" class=\\"ct-point\\" ct:value=\\"1\\"></line><line x1=\\"355\\" y1=\\"282.5\\" x2=\\"355.01\\" y2=\\"282.5\\" class=\\"ct-point\\" ct:value=\\"2\\"></line><line x1=\\"620\\" y1=\\"215\\" x2=\\"620.01\\" y2=\\"215\\" class=\\"ct-point\\" ct:value=\\"3\\"></line><line x1=\\"885\\" y1=\\"147.5\\" x2=\\"885.01\\" y2=\\"147.5\\" class=\\"ct-point\\" ct:value=\\"4\\"></line><line x1=\\"1150\\" y1=\\"80\\" x2=\\"1150.01\\" y2=\\"80\\" class=\\"ct-point\\" ct:value=\\"5\\"></line></g></g><g class=\\"ct-labels\\"><text x=\\"85.5\\" y=\\"370\\" width=\\"265\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">1</text><text x=\\"350.5\\" y=\\"370\\" width=\\"265\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">2</text><text x=\\"615.5\\" y=\\"370\\" width=\\"265\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">3</text><text x=\\"880.5\\" y=\\"370\\" width=\\"265\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">4</text><text x=\\"1145.5\\" y=\\"370\\" width=\\"30\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">5</text><text y=\\"354.5\\" x=\\"80\\" height=\\"67.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">1</text><text y=\\"287\\" x=\\"80\\" height=\\"67.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">2</text><text y=\\"219.5\\" x=\\"80\\" height=\\"67.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">3</text><text y=\\"152\\" x=\\"80\\" height=\\"67.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">4</text><text y=\\"84.5\\" x=\\"80\\" height=\\"30\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">5</text></g><text class=\\"ct-axis-title ct-label\\" x=\\"620\\" y=\\"400\\" dominant-baseline=\\"text-after-edge\\" text-anchor=\\"middle\\">Days</text><text class=\\"ct-axis-title ct-label\\" x=\\"20\\" y=\\"215\\" transform=\\"rotate(-90, 20, 215)\\" dominant-baseline=\\"hanging\\" text-anchor=\\"middle\\">Contributions</text></svg>
<svg xmlns:ct=\\"http://gionkunz.github.com/chartist-js/ct\\" width=\\"1200\\" height=\\"420\\" class=\\"ct-chart-line\\"><g class=\\"ct-grids\\"><line x1=\\"90\\" x2=\\"90\\" y1=\\"80\\" y2=\\"330\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"355\\" x2=\\"355\\" y1=\\"80\\" y2=\\"330\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"620\\" x2=\\"620\\" y1=\\"80\\" y2=\\"330\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"885\\" x2=\\"885\\" y1=\\"80\\" y2=\\"330\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"1150\\" x2=\\"1150\\" y1=\\"80\\" y2=\\"330\\" class=\\"ct-grid ct-horizontal\\"></line><line y1=\\"330\\" y2=\\"330\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"267.5\\" y2=\\"267.5\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"205\\" y2=\\"205\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"142.5\\" y2=\\"142.5\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line><line y1=\\"80\\" y2=\\"80\\" x1=\\"90\\" x2=\\"1150\\" class=\\"ct-grid ct-vertical\\"></line></g><g><g class=\\"ct-series ct-series-a\\"><path d=\\"M90,330C178.333,309.167,266.667,288.333,355,267.5C443.333,246.667,531.667,225.833,620,205C708.333,184.167,796.667,163.333,885,142.5C973.333,121.667,1061.667,100.833,1150,80\\" class=\\"ct-line\\"></path><line x1=\\"90\\" y1=\\"330\\" x2=\\"90.01\\" y2=\\"330\\" class=\\"ct-point\\" ct:value=\\"1\\"></line><line x1=\\"355\\" y1=\\"267.5\\" x2=\\"355.01\\" y2=\\"267.5\\" class=\\"ct-point\\" ct:value=\\"2\\"></line><line x1=\\"620\\" y1=\\"205\\" x2=\\"620.01\\" y2=\\"205\\" class=\\"ct-point\\" ct:value=\\"3\\"></line><line x1=\\"885\\" y1=\\"142.5\\" x2=\\"885.01\\" y2=\\"142.5\\" class=\\"ct-point\\" ct:value=\\"4\\"></line><line x1=\\"1150\\" y1=\\"80\\" x2=\\"1150.01\\" y2=\\"80\\" class=\\"ct-point\\" ct:value=\\"5\\"></line></g></g><g class=\\"ct-labels\\"><text x=\\"85.5\\" y=\\"350\\" width=\\"265\\" height=\\"60\\" class=\\"ct-label ct-horizontal ct-end\\"></text><text x=\\"350.5\\" y=\\"350\\" width=\\"265\\" height=\\"60\\" class=\\"ct-label ct-horizontal ct-end\\"></text><text x=\\"615.5\\" y=\\"350\\" width=\\"265\\" height=\\"60\\" class=\\"ct-label ct-horizontal ct-end\\"></text><text x=\\"880.5\\" y=\\"350\\" width=\\"265\\" height=\\"60\\" class=\\"ct-label ct-horizontal ct-end\\"></text><text x=\\"1145.5\\" y=\\"350\\" width=\\"30\\" height=\\"60\\" class=\\"ct-label ct-horizontal ct-end\\"></text><text y=\\"334.5\\" x=\\"80\\" height=\\"62.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">1</text><text y=\\"272\\" x=\\"80\\" height=\\"62.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">2</text><text y=\\"209.5\\" x=\\"80\\" height=\\"62.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">3</text><text y=\\"147\\" x=\\"80\\" height=\\"62.5\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">4</text><text y=\\"84.5\\" x=\\"80\\" height=\\"30\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">5</text></g><text class=\\"ct-axis-title ct-label\\" x=\\"620\\" y=\\"400\\" dominant-baseline=\\"text-after-edge\\" text-anchor=\\"middle\\">Days</text><text class=\\"ct-axis-title ct-label\\" x=\\"20\\" y=\\"205\\" transform=\\"rotate(-90, 20, 205)\\" dominant-baseline=\\"hanging\\" text-anchor=\\"middle\\">Contributions</text></svg>
</svg>
"
`;
2 changes: 1 addition & 1 deletion __test__/__snapshots__/utils.test.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Graph Generation 1`] = `"<svg xmlns:ct=\\"http://gionkunz.github.com/chartist-js/ct\\" width=\\"10\\" height=\\"5\\" class=\\"ct-chart-line\\"><g class=\\"ct-grids\\"><line x1=\\"90\\" x2=\\"90\\" y1=\\"80\\" y2=\\"81\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"90.5\\" x2=\\"90.5\\" y1=\\"80\\" y2=\\"81\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"91\\" x2=\\"91\\" y1=\\"80\\" y2=\\"81\\" class=\\"ct-grid ct-horizontal\\"></line><line y1=\\"81\\" y2=\\"81\\" x1=\\"90\\" x2=\\"91\\" class=\\"ct-grid ct-vertical\\"></line></g><g><g class=\\"ct-series ct-series-a\\"><path d=\\"M90,81C90.167,80.833,90.333,80.667,90.5,80.5C90.667,80.333,90.833,80.167,91,80\\" class=\\"ct-line\\"></path><line x1=\\"90\\" y1=\\"81\\" x2=\\"90.01\\" y2=\\"81\\" class=\\"ct-point\\" ct:value=\\"1\\"></line><line x1=\\"90.5\\" y1=\\"80.5\\" x2=\\"90.51\\" y2=\\"80.5\\" class=\\"ct-point\\" ct:value=\\"2\\"></line><line x1=\\"91\\" y1=\\"80\\" x2=\\"91.01\\" y2=\\"80\\" class=\\"ct-point\\" ct:value=\\"3\\"></line></g></g><g class=\\"ct-labels\\"><text x=\\"85.5\\" y=\\"101\\" width=\\"0.5\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">1</text><text x=\\"86\\" y=\\"101\\" width=\\"0.5\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">2</text><text x=\\"86.5\\" y=\\"101\\" width=\\"30\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">3</text><text y=\\"85.5\\" x=\\"80\\" height=\\"30\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">1</text></g><text class=\\"ct-axis-title ct-label\\" x=\\"90.5\\" y=\\"131\\" dominant-baseline=\\"text-after-edge\\" text-anchor=\\"middle\\">Days</text><text class=\\"ct-axis-title ct-label\\" x=\\"20\\" y=\\"80.5\\" transform=\\"rotate(-90, 20, 80.5)\\" dominant-baseline=\\"hanging\\" text-anchor=\\"middle\\">Contributions</text></svg>"`;
exports[`Graph Generation 1`] = `"<svg xmlns:ct=\\"http://gionkunz.github.com/chartist-js/ct\\" width=\\"10\\" height=\\"5\\" class=\\"ct-chart-line\\"><g class=\\"ct-grids\\"><line x1=\\"90\\" x2=\\"90\\" y1=\\"80\\" y2=\\"81\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"90.5\\" x2=\\"90.5\\" y1=\\"80\\" y2=\\"81\\" class=\\"ct-grid ct-horizontal\\"></line><line x1=\\"91\\" x2=\\"91\\" y1=\\"80\\" y2=\\"81\\" class=\\"ct-grid ct-horizontal\\"></line><line y1=\\"81\\" y2=\\"81\\" x1=\\"90\\" x2=\\"91\\" class=\\"ct-grid ct-vertical\\"></line></g><g><g class=\\"ct-series ct-series-a\\"><path d=\\"M90,81C90.167,80.833,90.333,80.667,90.5,80.5C90.667,80.333,90.833,80.167,91,80\\" class=\\"ct-line\\"></path><line x1=\\"90\\" y1=\\"81\\" x2=\\"90.01\\" y2=\\"81\\" class=\\"ct-point\\" ct:value=\\"1\\"></line><line x1=\\"90.5\\" y1=\\"80.5\\" x2=\\"90.51\\" y2=\\"80.5\\" class=\\"ct-point\\" ct:value=\\"2\\"></line><line x1=\\"91\\" y1=\\"80\\" x2=\\"91.01\\" y2=\\"80\\" class=\\"ct-point\\" ct:value=\\"3\\"></line></g></g><g class=\\"ct-labels\\"><text x=\\"85.5\\" y=\\"101\\" width=\\"0.5\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">Sep 1</text><text x=\\"86\\" y=\\"101\\" width=\\"0.5\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">Sep 2</text><text x=\\"86.5\\" y=\\"101\\" width=\\"30\\" height=\\"40\\" class=\\"ct-label ct-horizontal ct-end\\">Sep 3</text><text y=\\"85.5\\" x=\\"80\\" height=\\"30\\" width=\\"60\\" class=\\"ct-label ct-vertical ct-start\\">1</text></g><text class=\\"ct-axis-title ct-label\\" x=\\"90.5\\" y=\\"131\\" dominant-baseline=\\"text-after-edge\\" text-anchor=\\"middle\\">Days</text><text class=\\"ct-axis-title ct-label\\" x=\\"20\\" y=\\"80.5\\" transform=\\"rotate(-90, 20, 80.5)\\" dominant-baseline=\\"hanging\\" text-anchor=\\"middle\\">Contributions</text></svg>"`;
3 changes: 2 additions & 1 deletion __test__/fetching.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ test('Query Test', () => {

//Fetching Contributions Testing ✔
test('Fetching Contributions Test', () => {
expect.assertions(4);
expect.assertions(5);
fetchContributions('ashutosh00710', mockQueryCorrect, mockFetchCorrect).then(
//@ts-ignore: will always return data of type userDetails
(data: userDetails) => {
expect(data.contributions).toEqual(expect.any(Array));
expect(data.contributions.length).toEqual(31);
expect(data.contributions_dates.length).toEqual(31);
expect(data.name).toEqual('Ashutosh Dwivedi');
}
);
Expand Down
2 changes: 1 addition & 1 deletion __test__/svgs.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@ test('chart SVGs', async () => {
fakeQueryStringRes[0].colors,
"xyz's Contribution Graph",
fakeQueryStringRes[0].area
).chart([1, 2, 3, 4, 5])
).chart([1, 2, 3, 4, 5], [])
).toMatchSnapshot();
});
17 changes: 16 additions & 1 deletion __test__/utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,23 @@ describe('GET /graph with incorrect credential', () => {
test('Graph Generation', async () => {
expect.assertions(1);
let contributions = [1, 2, 3];

let date = new Date();
date.setUTCMonth(8);
date.setUTCDate(1);
let contributions_dates = [
date.toLocaleString('default', { month: 'short' }) +
' ' +
date.getUTCDate().toString(), // Sep 1
date.toLocaleString('default', { month: 'short' }) +
' ' +
(date.getUTCDate() + 1).toString(), // Sep 2
date.toLocaleString('default', { month: 'short' }) +
' ' +
(date.getUTCDate() + 2).toString(), // Sep 3
];
const graph = await createGraph('line', options, {
labels: Array.from(Array(contributions.length).keys(), (day) => day + 1),
labels: contributions_dates,
series: [{ value: contributions }],
});
expect(graph).toMatchSnapshot();
Expand Down
1 change: 1 addition & 0 deletions interfaces/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export interface graphArgs {

export interface userDetails {
contributions: number[];
contributions_dates: string[];
name: string;
}

Expand Down
9 changes: 6 additions & 3 deletions src/GraphCards.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ export class Card {
this.area = area;
}

async chart(contributions: number[]): Promise<string> {
async chart(
contributions: number[],
contributions_dates: string[]
): Promise<string> {
//Options to pass in createGraph function
const options = {
width: this.width,
Expand All @@ -37,7 +40,7 @@ export class Card {
},
axisX: {
title: 'Days',
offset: 50,
offset: 70,
labelOffset: {
x: -4.5,
},
Expand All @@ -54,7 +57,7 @@ export class Card {

//Construction of graph from node-chartist
const line: Promise<string> = await createGraph('line', options, {
labels: [...Array(contributions.length + 1).keys()].slice(1),
labels: contributions_dates,
series: [{ value: contributions }],
});

Expand Down
22 changes: 21 additions & 1 deletion src/fetcher.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const fetchContributions: fetchContribution = async (
else {
const userData: userDetails = {
contributions: [],
contributions_dates: [],
name: apiResponse.data.data.user.name,
};
//filtering the week data from API response
Expand All @@ -76,12 +77,31 @@ export const fetchContributions: fetchContribution = async (
})
);

//returning data of last 31 days
//data of last 31 days
const presentDay = new Date().getDay();
userData.contributions = userData.contributions.slice(
5 + presentDay,
36 + presentDay
);
//contribution dates for the last 31 days
userData.contributions_dates = ((): string[] => {
const days = [];
for (
const date = new Date();
days.length < 31;
date.setDate(date.getDate() - 1)
) {
const current = new Date(date);
days.push(
current.toLocaleString('default', { month: 'short' }) +
' ' +
current.getUTCDate().toString()
);
}

return days.reverse();
})();

return userData;
}
} catch (error) {
Expand Down
3 changes: 2 additions & 1 deletion src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ export const getGraph =
);

const getChart: string = await graph.chart(
fetchCalendarData.contributions
fetchCalendarData.contributions,
fetchCalendarData.contributions_dates
);

setHttpHeader(res, 'public, max-age=1800');
Expand Down
7 changes: 7 additions & 0 deletions styles/graphStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,4 +115,11 @@ export const graphStyle = (
transform: rotate(-90deg)
}
.ct-label.ct-horizontal.ct-end {
transform: rotate(-30deg);
transform-box: fill-box;
transform-origin: 100% 0;
text-anchor: end;
}
`;

0 comments on commit 1d02ab0

Please sign in to comment.