Added hide border option

Ashutosh00710 · Feb 18, 2021 · 88bd2c3 · 88bd2c3
1 parent 266fef8
commit 88bd2c3
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 21 deletions.
diff --git a/__test__/__snapshots__/svgs.test.js.snap b/__test__/__snapshots__/svgs.test.js.snap
@@ -10,7 +10,7 @@ exports[`Test SVGs 1`] = `
  xmlns=\\"http:https://www.w3.org/2000/svg\\">
  <rect xmlns=\\"http:https://www.w3.org/2000/svg\\" data-testid=\\"card_bg\\" id=\\"cardBg\\" 
  x=\\"0\\" y=\\"0\\" rx=\\"2.5\\" height=\\"100%\\" stroke=\\"#E4E2E2\\" fill-opacity=\\"1\\" 
- width=\\"100%\\" fill=\\"#undefined\\" stroke-opacity=\\"1\\" style=\\"stroke:#ffffff; stroke-width:1;\\"/>
+ width=\\"100%\\" fill=\\"#undefined\\" stroke-opacity=\\"1\\" style=\\"stroke:#undefined; stroke-width:1;\\"/>
  
  <style>
  body {

diff --git a/__test__/fakeInputs.js b/__test__/fakeInputs.js
@@ -32,13 +32,23 @@ let fakeQueryString = [
  point: 'bd93f9',
  area: true,
  },
+ {
+ username: 'githubusername',
+ bg_color: '44475a',
+ color: 'f8f8f2',
+ line: 'ff79c6',
+ point: 'bd93f9',
+ area: true,
+ hide_border: true,
+ },
 ];
 
 let fakeQueryStringRes = [
  {
  username: 'githubusername',
  colors: {
  bgColor: 'ffcfe9',
+ borderColor: 'ffffff',
  color: '9e4c98',
  lineColor: '9e4c98',
  pointColor: '403d3d',
@@ -49,6 +59,7 @@ let fakeQueryStringRes = [
  username: 'githubusername',
  colors: {
  bgColor: '44475a',
+ borderColor: 'ffffff',
  color: '9e4c98',
  lineColor: '9e4c98',
  pointColor: '403d3d',
@@ -59,6 +70,7 @@ let fakeQueryStringRes = [
  username: 'githubusername',
  colors: {
  bgColor: '44475a',
+ borderColor: 'ffffff',
  color: '000000',
  lineColor: '9e4c98',
  pointColor: '403d3d',
@@ -69,6 +81,7 @@ let fakeQueryStringRes = [
  username: 'githubusername',
  colors: {
  bgColor: '44475a',
+ borderColor: 'ffffff',
  color: '000000',
  lineColor: '9e4c98',
  pointColor: '403d3d',
@@ -79,6 +92,7 @@ let fakeQueryStringRes = [
  username: 'githubusername',
  colors: {
  bgColor: '44475a',
+ borderColor: 'ffffff',
  color: '000000',
  lineColor: '9e4c98',
  pointColor: '44475a',
@@ -89,6 +103,18 @@ let fakeQueryStringRes = [
  username: 'githubusername',
  colors: {
  bgColor: '44475a',
+ borderColor: 'ffffff',
+ color: 'f8f8f2',
+ lineColor: 'ff79c6',
+ pointColor: 'bd93f9',
+ },
+ area: true,
+ },
+ {
+ username: 'githubusername',
+ colors: {
+ bgColor: '44475a',
+ borderColor: '0000',
  color: 'f8f8f2',
  lineColor: 'ff79c6',
  pointColor: 'bd93f9',
@@ -321,48 +347,56 @@ const dummyWeeksData = [
 const themes = {
  dracula: {
  bgColor: '44475a',
+ borderColor: 'ffffff',
  color: 'f8f8f2',
  lineColor: 'ff79c6',
  pointColor: 'bd93f9',
  },
  gruvbox: {
  bgColor: '504945',
+ borderColor: 'ffffff',
  color: 'd4be98',
  lineColor: 'd8a657',
  pointColor: 'e78a4e',
  },
  github: {
  bgColor: '293036',
+ borderColor: 'ffffff',
  color: 'ffffff',
  lineColor: '9ecbff',
  pointColor: 'f97583',
  },
  rogue: {
  bgColor: '172030',
+ borderColor: 'ffffff',
  color: 'a3b09a',
  lineColor: 'b18bb1',
  pointColor: 'c6797e',
  },
  xcode: {
  bgColor: '202124',
+ borderColor: 'ffffff',
  color: 'fcfcfa',
  lineColor: 'c4e3ff',
  pointColor: 'ff8070',
  },
  redical: {
  bgColor: '141321',
+ borderColor: 'ffffff',
  color: 'a9fef7',
  lineColor: 'fe428e',
  pointColor: 'f8d847',
  },
  coral: {
  bgColor: '9a3838',
+ borderColor: 'ffffff',
  color: 'f9fae9',
  lineColor: 'f4e23d',
  pointColor: 'f4e7e7',
  },
  default: {
  bgColor: 'ffcfe9',
+ borderColor: 'ffffff',
  color: '9e4c98',
  lineColor: '9e4c98',
  pointColor: '403d3d',

diff --git a/interfaces/interface.ts b/interfaces/interface.ts
@@ -7,6 +7,7 @@ export interface query {
 
 export interface colors {
  bgColor: string;
+ borderColor: string;
  color: string;
  lineColor: string;
  pointColor: string;
@@ -21,6 +22,7 @@ export interface queryOption {
 export interface ParsedQs {
  username?: string;
  bg_color?: string;
+ hide_border?: boolean;
  color?: string;
  line?: string;
  point?: string;

diff --git a/src/svgs.ts b/src/svgs.ts
@@ -13,7 +13,7 @@ export const graphSvg = (props: graphArgs) => `
  x="0" y="0" rx="2.5" height="100%" stroke="#E4E2E2" fill-opacity="1" 
  width="100%" fill="#${
  props.colors.bgColor
- }" stroke-opacity="1" style="stroke:#ffffff; stroke-width:1;"/>
+ }" stroke-opacity="1" style="stroke:#${props.colors.borderColor}; stroke-width:1;"/>
  
  <style>
  body {

diff --git a/src/utils.ts b/src/utils.ts
@@ -14,30 +14,30 @@ import { selectColors } from '../styles/themes';
 export const queryOptions = (queryString: ParsedQs): queryOption => {
  let area: boolean = false;
  let colors: colors;
+ let theme: string = queryString.theme || 'default';
 
  if (String(queryString.area) === 'true') {
  area = true;
  }
 
- if (queryString.theme) {
- colors = selectColors(queryString.theme as string);
- } else {
- //Custom options for user
- colors = {
- bgColor: queryString.bg_color
- ? (queryString.bg_color as string)
- : selectColors('default').bgColor,
- color: queryString.color
- ? (queryString.color as string)
- : selectColors('default').color,
- lineColor: queryString.line
- ? (queryString.line as string)
- : selectColors('default').lineColor,
- pointColor: queryString.point
- ? (queryString.point as string)
- : selectColors('default').pointColor,
- };
- }
+ // Custom options for user
+ colors = {
+ bgColor: queryString.bg_color
+ ? queryString.bg_color
+ : selectColors(theme).bgColor,
+ borderColor: queryString.hide_border === true
+ ? "0000" // transparent
+ : selectColors(theme).borderColor,
+ color: queryString.color
+ ? queryString.color
+ : selectColors(theme).color,
+ lineColor: queryString.line
+ ? queryString.line
+ : selectColors(theme).lineColor,
+ pointColor: queryString.point
+ ? queryString.point
+ : selectColors(theme).pointColor,
+ };
 
  const options: queryOption = {
  username: String(queryString.username),

diff --git a/styles/themes.ts b/styles/themes.ts
@@ -5,55 +5,63 @@ export const selectColors = (queryString: string): colors => {
  case 'dracula':
  return {
  bgColor: '44475a',
+ borderColor: 'ffffff',
  color: 'f8f8f2',
  lineColor: 'ff79c6',
  pointColor: 'bd93f9',
  };
  case 'gruvbox':
  return {
  bgColor: '504945',
+ borderColor: 'ffffff',
  color: 'd4be98',
  lineColor: 'd8a657',
  pointColor: 'e78a4e',
  };
  case 'github':
  return {
  bgColor: '293036',
+ borderColor: 'ffffff',
  color: 'ffffff',
  lineColor: '9ecbff',
  pointColor: 'f97583',
  };
  case 'rogue':
  return {
  bgColor: '172030',
+ borderColor: 'ffffff',
  color: 'a3b09a',
  lineColor: 'b18bb1',
  pointColor: 'c6797e',
  };
  case 'xcode':
  return {
  bgColor: '202124',
+ borderColor: 'ffffff',
  color: 'fcfcfa',
  lineColor: 'c4e3ff',
  pointColor: 'ff8070',
  };
  case 'redical':
  return {
  bgColor: '141321',
+ borderColor: 'ffffff',
  color: 'a9fef7',
  lineColor: 'fe428e',
  pointColor: 'f8d847',
  };
  case 'coral':
  return {
  bgColor: '9a3838',
+ borderColor: 'ffffff',
  color: 'f9fae9',
  lineColor: 'f4e23d',
  pointColor: 'f4e7e7',
  };
  default:
  return {
  bgColor: 'ffcfe9',
+ borderColor: 'ffffff',
  color: '9e4c98',
  lineColor: '9e4c98',
  pointColor: '403d3d',