From 3fd62d5822b3ca05b201573af20f21bd0eea9fc2 Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Sun, 5 Sep 2021 12:48:05 +0530 Subject: [PATCH 1/7] feature: dates on x axis --- interfaces/interface.ts | 1 + src/GraphCards.ts | 11 +++++++---- src/fetcher.ts | 22 +++++++++++++++++++++- src/utils.ts | 3 ++- styles/graphStyle.ts | 11 +++++++++++ 5 files changed, 42 insertions(+), 6 deletions(-) diff --git a/interfaces/interface.ts b/interfaces/interface.ts index cd3ff1e..37e235a 100644 --- a/interfaces/interface.ts +++ b/interfaces/interface.ts @@ -46,6 +46,7 @@ export interface graphArgs { export interface userDetails { contributions: number[]; + contribution_dates: string[]; name: string; } diff --git a/src/GraphCards.ts b/src/GraphCards.ts index e1404f4..cf595a0 100644 --- a/src/GraphCards.ts +++ b/src/GraphCards.ts @@ -22,7 +22,10 @@ export class Card { this.area = area; } - async chart(contributions: number[]): Promise { + async chart( + contributions: number[], + contribution_dates: string[] + ): Promise { //Options to pass in createGraph function const options = { width: this.width, @@ -36,8 +39,8 @@ export class Card { }, }, axisX: { - title: 'Days', - offset: 50, + title: 'Dates', + offset: 70, labelOffset: { x: -4.5, }, @@ -54,7 +57,7 @@ export class Card { //Construction of graph from node-chartist const line: Promise = 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..974d86b 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,6 +81,7 @@ 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 @@ -77,11 +96,12 @@ export const fetchContributions: fetchContribution = async ( ); //returning data of last 31 days - const presentDay = new Date().getDay(); + const presentDay = new Date().getUTCDay(); userData.contributions = userData.contributions.slice( 5 + presentDay, 36 + presentDay ); + 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; + } `; From d6da57d9ed7d30f1aad10c315d47693e578ee30b Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Wed, 29 Sep 2021 18:41:25 +0530 Subject: [PATCH 2/7] update: test for dates feature --- __test__/__snapshots__/svgs.test.ts.snap | 24 +++++++++++++++++++++++- __test__/svgs.test.ts | 2 +- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/__test__/__snapshots__/svgs.test.ts.snap b/__test__/__snapshots__/svgs.test.ts.snap index 6beb888..59e5aeb 100644 --- a/__test__/__snapshots__/svgs.test.ts.snap +++ b/__test__/__snapshots__/svgs.test.ts.snap @@ -135,6 +135,17 @@ exports[`Test SVGs 1`] = ` .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; + } @keyframes blink { @@ -324,6 +335,17 @@ exports[`chart SVGs 1`] = ` .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; + } @keyframes blink { @@ -352,7 +374,7 @@ exports[`chart SVGs 1`] = ` xyz's Contribution Graph - + " `; diff --git a/__test__/svgs.test.ts b/__test__/svgs.test.ts index bde0585..315abee 100644 --- a/__test__/svgs.test.ts +++ b/__test__/svgs.test.ts @@ -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], ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5']) ).toMatchSnapshot(); }); From 91329ad602cb182a1b6b7efebcbf5c815faaf166 Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Wed, 29 Sep 2021 18:52:02 +0530 Subject: [PATCH 3/7] update: wrokflow file for actions --- .github/workflows/node.js.yml | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 65bb9f2..28e73e2 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -5,13 +5,12 @@ name: Node.js CI on: push: - branches: [ main ] + branches: [main, dates-feature] pull_request: - branches: [ main ] + branches: [main, dates-feature] jobs: build: - runs-on: ubuntu-latest strategy: @@ -20,10 +19,10 @@ jobs: # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - - uses: actions/checkout@v2 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - run: npm ci - - run: npm test + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm ci + - run: npm test From b8022600c846da25e5e39a8ba7a55a9771eed58a Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Fri, 1 Oct 2021 19:18:16 +0530 Subject: [PATCH 4/7] add: green theme --- __test__/fakeInputs.ts | 8 ++++++++ __test__/themes.test.ts | 1 + styles/themes.ts | 9 +++++++++ 3 files changed, 18 insertions(+) diff --git a/__test__/fakeInputs.ts b/__test__/fakeInputs.ts index f0dd1c8..e742460 100644 --- a/__test__/fakeInputs.ts +++ b/__test__/fakeInputs.ts @@ -542,6 +542,14 @@ export const themes = { lineColor: 'c792ea', pointColor: '89ddff', }, + green: { + areaColor: '588157', + borderColor: 'ffffff', + bgColor: 'dad7cd', + color: '3a5a40', + lineColor: '588157', + pointColor: '344e41', + }, default: { areaColor: '9e4c98', bgColor: 'ffcfe9', diff --git a/__test__/themes.test.ts b/__test__/themes.test.ts index e43659b..3a3354d 100644 --- a/__test__/themes.test.ts +++ b/__test__/themes.test.ts @@ -19,5 +19,6 @@ test('Theme testing', () => { expect(selectColors('material-palenight')).toEqual( themes['materialPalenight'] ); + expect(selectColors('green')).toEqual(themes['green']); expect(selectColors('default')).toEqual(themes['default']); }); diff --git a/styles/themes.ts b/styles/themes.ts index 004ff9d..21ac3be 100644 --- a/styles/themes.ts +++ b/styles/themes.ts @@ -128,6 +128,15 @@ 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', + }; default: return { areaColor: '9e4c98', From b2fbea81683df3edc7965099cb0c6b7d06d1a27d Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Sat, 2 Oct 2021 20:30:42 +0530 Subject: [PATCH 5/7] add: gotham theme --- __test__/fakeInputs.ts | 8 ++++++++ __test__/themes.test.ts | 3 ++- styles/themes.ts | 9 +++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/__test__/fakeInputs.ts b/__test__/fakeInputs.ts index e742460..36a9b7f 100644 --- a/__test__/fakeInputs.ts +++ b/__test__/fakeInputs.ts @@ -550,6 +550,14 @@ export const themes = { lineColor: '588157', pointColor: '344e41', }, + gotham: { + areaColor: '2aa889', + bgColor: '0c1014', + borderColor: '2aa889', + color: '2aa889', + lineColor: '599cab', + pointColor: '99d1ce', + }, default: { areaColor: '9e4c98', bgColor: 'ffcfe9', diff --git a/__test__/themes.test.ts b/__test__/themes.test.ts index 3a3354d..80b8147 100644 --- a/__test__/themes.test.ts +++ b/__test__/themes.test.ts @@ -2,7 +2,7 @@ import { selectColors } from '../styles/themes'; import { themes } from './fakeInputs'; test('Theme testing', () => { - expect.assertions(15); + expect.assertions(17); expect(selectColors('dracula')).toEqual(themes['dracula']); expect(selectColors('gruvbox')).toEqual(themes['gruvbox']); expect(selectColors('github')).toEqual(themes['github']); @@ -19,6 +19,7 @@ test('Theme testing', () => { expect(selectColors('material-palenight')).toEqual( themes['materialPalenight'] ); + expect(selectColors('gotham')).toEqual(themes['gotham']); expect(selectColors('green')).toEqual(themes['green']); expect(selectColors('default')).toEqual(themes['default']); }); diff --git a/styles/themes.ts b/styles/themes.ts index 21ac3be..d52a90e 100644 --- a/styles/themes.ts +++ b/styles/themes.ts @@ -137,6 +137,15 @@ export const selectColors = (queryString: string): colors => { lineColor: '588157', pointColor: '344e41', }; + case 'gotham': + return { + areaColor: '2aa889', + bgColor: '0c1014', + borderColor: '2aa889', + color: '2aa889', + lineColor: '599cab', + pointColor: '99d1ce', + }; default: return { areaColor: '9e4c98', From ba8d804c7c4d06d5ce5b24011ed5d89c0b5fc696 Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Sun, 3 Oct 2021 17:46:15 +0530 Subject: [PATCH 6/7] fix: ref to #85 -> some calculation changes --- src/fetcher.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/fetcher.ts b/src/fetcher.ts index 974d86b..9d404bc 100644 --- a/src/fetcher.ts +++ b/src/fetcher.ts @@ -88,19 +88,19 @@ export const fetchContributions: fetchContribution = async ( 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().getUTCDay(); - 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; } From 0761ed2f83f383d69209c4417b4470e611171e43 Mon Sep 17 00:00:00 2001 From: Ashutosh00710 Date: Mon, 4 Oct 2021 23:04:22 +0530 Subject: [PATCH 7/7] add: test for one dark, monokai, noctis minimus theme --- __test__/fakeInputs.ts | 24 ++++++++++++++++++++++++ __test__/themes.test.ts | 7 ++++++- styles/themes.ts | 27 +++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 1 deletion(-) diff --git a/__test__/fakeInputs.ts b/__test__/fakeInputs.ts index 36a9b7f..75d2586 100644 --- a/__test__/fakeInputs.ts +++ b/__test__/fakeInputs.ts @@ -558,6 +558,30 @@ export const themes = { lineColor: '599cab', pointColor: '99d1ce', }, + noctis_minimus: { + areaColor: '72b7c0', + borderColor: 'ffffff', + bgColor: '1b2932', + color: 'd3b692', + lineColor: '72b7c0', + pointColor: 'c5cdd3', + }, + one_dark: { + areaColor: 'e5c17c', + borderColor: 'ffffff', + bgColor: '282C34', + color: 'abb2bf', + lineColor: 'e5c17c', + pointColor: 'e06c75', + }, + monokai: { + areaColor: 'ff6188', + borderColor: 'ffffff', + bgColor: '2D2A2E', + color: 'fcfcfa', + lineColor: 'ff6188', + pointColor: 'ffd866', + }, default: { areaColor: '9e4c98', bgColor: 'ffcfe9', diff --git a/__test__/themes.test.ts b/__test__/themes.test.ts index 80b8147..89de853 100644 --- a/__test__/themes.test.ts +++ b/__test__/themes.test.ts @@ -2,7 +2,7 @@ import { selectColors } from '../styles/themes'; import { themes } from './fakeInputs'; test('Theme testing', () => { - expect.assertions(17); + expect.assertions(20); expect(selectColors('dracula')).toEqual(themes['dracula']); expect(selectColors('gruvbox')).toEqual(themes['gruvbox']); expect(selectColors('github')).toEqual(themes['github']); @@ -19,6 +19,11 @@ test('Theme testing', () => { expect(selectColors('material-palenight')).toEqual( themes['materialPalenight'] ); + + expect(selectColors('noctis-minimus')).toEqual(themes['noctis_minimus']); + expect(selectColors('one-dark')).toEqual(themes['one_dark']); + expect(selectColors('monokai')).toEqual(themes['monokai']); + expect(selectColors('gotham')).toEqual(themes['gotham']); expect(selectColors('green')).toEqual(themes['green']); expect(selectColors('default')).toEqual(themes['default']); diff --git a/styles/themes.ts b/styles/themes.ts index d52a90e..d2ee21b 100644 --- a/styles/themes.ts +++ b/styles/themes.ts @@ -146,6 +146,33 @@ export const selectColors = (queryString: string): colors => { 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