feat: add wakatime compact layout (#560)
* Add wakatime compact layout * Update readme * test: added & updated test snapshots Co-authored-by: Anurag <hazru.anurag@gmail.com>
This commit is contained in:
Willian Rodrigues
co-authored by
Anurag
Anurag
parent
6e82cfb32d
commit
94aeabe300
@@ -0,0 +1,312 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Test Render Wakatime Card should render correctly 1`] = `
|
||||
"
|
||||
<svg
|
||||
width=\\"495\\"
|
||||
height=\\"150\\"
|
||||
viewBox=\\"0 0 495 150\\"
|
||||
fill=\\"none\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
>
|
||||
<style>
|
||||
.header {
|
||||
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
|
||||
fill: #2f80ed;
|
||||
animation: fadeInAnimation 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333;
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: #4c71f2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: #2f80ed;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: #2f80ed;
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
undefined
|
||||
|
||||
<rect
|
||||
data-testid=\\"card-bg\\"
|
||||
x=\\"0.5\\"
|
||||
y=\\"0.5\\"
|
||||
rx=\\"4.5\\"
|
||||
height=\\"99%\\"
|
||||
stroke=\\"#E4E2E2\\"
|
||||
width=\\"494\\"
|
||||
fill=\\"#fffefe\\"
|
||||
stroke-opacity=\\"1\\"
|
||||
/>
|
||||
|
||||
|
||||
<g
|
||||
data-testid=\\"card-title\\"
|
||||
transform=\\"translate(25, 35)\\"
|
||||
>
|
||||
<g transform=\\"translate(0, 0)\\">
|
||||
<text
|
||||
x=\\"0\\"
|
||||
y=\\"0\\"
|
||||
class=\\"header\\"
|
||||
data-testid=\\"header\\"
|
||||
>Wakatime Week Stats</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g
|
||||
data-testid=\\"main-card-body\\"
|
||||
transform=\\"translate(0, 55)\\"
|
||||
>
|
||||
|
||||
<svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
|
||||
<g transform=\\"translate(0, 0)\\">
|
||||
<g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
|
||||
<text class=\\"stat bold\\" y=\\"12.5\\">Other:</text>
|
||||
<text
|
||||
class=\\"stat\\"
|
||||
x=\\"350\\"
|
||||
y=\\"12.5\\"
|
||||
data-testid=\\"Other\\"
|
||||
>19 mins</text>
|
||||
|
||||
<svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
|
||||
<rect rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\" width=\\"220\\" height=\\"8\\" fill=\\"#333\\"></rect>
|
||||
<rect
|
||||
height=\\"8\\"
|
||||
fill=\\"#2f80ed\\"
|
||||
rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\"
|
||||
data-testid=\\"lang-progress\\"
|
||||
width=\\"2%\\"
|
||||
>
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
</g>
|
||||
</g><g transform=\\"translate(0, 25)\\">
|
||||
<g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
|
||||
<text class=\\"stat bold\\" y=\\"12.5\\">TypeScript:</text>
|
||||
<text
|
||||
class=\\"stat\\"
|
||||
x=\\"350\\"
|
||||
y=\\"12.5\\"
|
||||
data-testid=\\"TypeScript\\"
|
||||
>1 min</text>
|
||||
|
||||
<svg width=\\"220\\" x=\\"110\\" y=\\"4\\">
|
||||
<rect rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\" width=\\"220\\" height=\\"8\\" fill=\\"#333\\"></rect>
|
||||
<rect
|
||||
height=\\"8\\"
|
||||
fill=\\"#2f80ed\\"
|
||||
rx=\\"5\\" ry=\\"5\\" x=\\"0\\" y=\\"0\\"
|
||||
data-testid=\\"lang-progress\\"
|
||||
width=\\"2%\\"
|
||||
>
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`Test Render Wakatime Card should render correctly with compact layout 1`] = `
|
||||
"
|
||||
<svg
|
||||
width=\\"495\\"
|
||||
height=\\"140\\"
|
||||
viewBox=\\"0 0 495 140\\"
|
||||
fill=\\"none\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
>
|
||||
<style>
|
||||
.header {
|
||||
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
|
||||
fill: #2f80ed;
|
||||
animation: fadeInAnimation 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333;
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: #4c71f2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: #2f80ed;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: #2f80ed;
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
undefined
|
||||
|
||||
<rect
|
||||
data-testid=\\"card-bg\\"
|
||||
x=\\"0.5\\"
|
||||
y=\\"0.5\\"
|
||||
rx=\\"4.5\\"
|
||||
height=\\"99%\\"
|
||||
stroke=\\"#E4E2E2\\"
|
||||
width=\\"494\\"
|
||||
fill=\\"#fffefe\\"
|
||||
stroke-opacity=\\"1\\"
|
||||
/>
|
||||
|
||||
|
||||
<g
|
||||
data-testid=\\"card-title\\"
|
||||
transform=\\"translate(25, 35)\\"
|
||||
>
|
||||
<g transform=\\"translate(0, 0)\\">
|
||||
<text
|
||||
x=\\"0\\"
|
||||
y=\\"0\\"
|
||||
class=\\"header\\"
|
||||
data-testid=\\"header\\"
|
||||
>Wakatime Week Stats</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g
|
||||
data-testid=\\"main-card-body\\"
|
||||
transform=\\"translate(0, 55)\\"
|
||||
>
|
||||
|
||||
<svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
|
||||
|
||||
<mask id=\\"rect-mask\\">
|
||||
<rect x=\\"25\\" y=\\"0\\" width=\\"440\\" height=\\"8\\" fill=\\"white\\" rx=\\"5\\" />
|
||||
</mask>
|
||||
|
||||
<rect
|
||||
mask=\\"url(#rect-mask)\\"
|
||||
data-testid=\\"lang-progress\\"
|
||||
x=\\"0\\"
|
||||
y=\\"0\\"
|
||||
width=\\"6.291999999999999\\"
|
||||
height=\\"8\\"
|
||||
fill=\\"#858585\\"
|
||||
/>
|
||||
|
||||
<rect
|
||||
mask=\\"url(#rect-mask)\\"
|
||||
data-testid=\\"lang-progress\\"
|
||||
x=\\"6.291999999999999\\"
|
||||
y=\\"0\\"
|
||||
width=\\"0.44\\"
|
||||
height=\\"8\\"
|
||||
fill=\\"#2b7489\\"
|
||||
/>
|
||||
|
||||
<rect
|
||||
mask=\\"url(#rect-mask)\\"
|
||||
data-testid=\\"lang-progress\\"
|
||||
x=\\"6.731999999999999\\"
|
||||
y=\\"0\\"
|
||||
width=\\"0.30800000000000005\\"
|
||||
height=\\"8\\"
|
||||
fill=\\"#cb171e\\"
|
||||
/>
|
||||
|
||||
|
||||
<g transform=\\"translate(25, 25)\\">
|
||||
<circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#858585\\" />
|
||||
<text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
|
||||
Other - 19 mins
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g transform=\\"translate(230, 25)\\">
|
||||
<circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#2b7489\\" />
|
||||
<text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
|
||||
TypeScript - 1 min
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g transform=\\"translate(25, 50)\\">
|
||||
<circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#cb171e\\" />
|
||||
<text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
|
||||
YAML - 0 secs
|
||||
</text>
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
"
|
||||
`;
|
||||
@@ -5,113 +5,15 @@ const { wakaTimeData } = require("./fetchWakatime.test");
|
||||
|
||||
describe("Test Render Wakatime Card", () => {
|
||||
it("should render correctly", () => {
|
||||
const card = renderWakatimeCard(wakaTimeData);
|
||||
const card = renderWakatimeCard(wakaTimeData.data);
|
||||
|
||||
expect(card).toMatchInlineSnapshot(`
|
||||
"
|
||||
<svg
|
||||
width=\\"495\\"
|
||||
height=\\"150\\"
|
||||
viewBox=\\"0 0 495 150\\"
|
||||
fill=\\"none\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
>
|
||||
<style>
|
||||
.header {
|
||||
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
|
||||
fill: #2f80ed;
|
||||
animation: fadeInAnimation 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
|
||||
.stat {
|
||||
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
|
||||
}
|
||||
.stagger {
|
||||
opacity: 0;
|
||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
.rank-text {
|
||||
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333;
|
||||
animation: scaleInAnimation 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: #4c71f2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rank-circle-rim {
|
||||
stroke: #2f80ed;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.rank-circle {
|
||||
stroke: #2f80ed;
|
||||
stroke-dasharray: 250;
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.8;
|
||||
transform-origin: -10px 8px;
|
||||
transform: rotate(-90deg);
|
||||
animation: rankAnimation 1s forwards ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
|
||||
|
||||
expect(card).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
</style>
|
||||
it("should render correctly with compact layout", () => {
|
||||
const card = renderWakatimeCard(wakaTimeData.data, { layout: "compact" });
|
||||
|
||||
undefined
|
||||
|
||||
<rect
|
||||
data-testid=\\"card-bg\\"
|
||||
x=\\"0.5\\"
|
||||
y=\\"0.5\\"
|
||||
rx=\\"4.5\\"
|
||||
height=\\"99%\\"
|
||||
stroke=\\"#E4E2E2\\"
|
||||
width=\\"494\\"
|
||||
fill=\\"#fffefe\\"
|
||||
stroke-opacity=\\"1\\"
|
||||
/>
|
||||
|
||||
|
||||
<g
|
||||
data-testid=\\"card-title\\"
|
||||
transform=\\"translate(25, 35)\\"
|
||||
>
|
||||
<g transform=\\"translate(0, 0)\\">
|
||||
<text
|
||||
x=\\"0\\"
|
||||
y=\\"0\\"
|
||||
class=\\"header\\"
|
||||
data-testid=\\"header\\"
|
||||
>Wakatime Week Stats</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g
|
||||
data-testid=\\"main-card-body\\"
|
||||
transform=\\"translate(0, 55)\\"
|
||||
>
|
||||
|
||||
<svg x=\\"0\\" y=\\"0\\" width=\\"100%\\">
|
||||
<g transform=\\"translate(0, 0)\\">
|
||||
<text x=\\"25\\" y=\\"11\\" class=\\"stat bold\\" fill=\\"#333\\">No coding activity this week</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
"
|
||||
`);
|
||||
expect(card).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should render translations", () => {
|
||||
|
||||
Reference in New Issue
Block a user