Skip to content

Commit

Permalink
Better screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@avgupta456
avgupta456 committed Nov 23, 2023
1 parent 82a3b21 commit fcaec2c
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 50 deletions.
46 changes: 26 additions & 20 deletions frontend/src/components/Wrapped/Specifics/Bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const dayNames = [
'Saturday',
];

const BarMonth = ({ data }) => {
const BarMonth = ({ data, downloadLoading }) => {
const newData = data?.month_data?.months || [];

// eslint-disable-next-line no-unused-vars
Expand All @@ -45,15 +45,17 @@ const BarMonth = ({ data }) => {
{displayContribs ? 'By Contribution Count' : 'By LOC Changed'}
</p>
</div>
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setDisplayContribs(!displayContribs)}
>
<span>Toggle</span>
</button>
</div>
{!downloadLoading && (
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setDisplayContribs(!displayContribs)}
>
<span>Toggle</span>
</button>
</div>
)}
</div>
{displayContribs ? (
<BarGraph
Expand Down Expand Up @@ -81,9 +83,10 @@ const BarMonth = ({ data }) => {

BarMonth.propTypes = {
data: PropTypes.object.isRequired,
downloadLoading: PropTypes.bool.isRequired,
};

const BarDay = ({ data }) => {
const BarDay = ({ data, downloadLoading }) => {
const newData = data?.day_data?.days || [];

const [displayContribs, setDisplayContribs] = useState(true);
Expand All @@ -98,15 +101,17 @@ const BarDay = ({ data }) => {
{displayContribs ? 'By Contribution Count' : 'By LOC Changed'}
</p>
</div>
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setDisplayContribs(!displayContribs)}
>
<span>Toggle</span>
</button>
</div>
{!downloadLoading && (
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setDisplayContribs(!displayContribs)}
>
<span>Toggle</span>
</button>
</div>
)}
</div>
{displayContribs ? (
<BarGraph
Expand Down Expand Up @@ -134,6 +139,7 @@ const BarDay = ({ data }) => {

BarDay.propTypes = {
data: PropTypes.object.isRequired,
downloadLoading: PropTypes.bool.isRequired,
};

export { BarMonth, BarDay };
46 changes: 26 additions & 20 deletions frontend/src/components/Wrapped/Specifics/Pie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
import { PieChart } from '../Templates';
import { WrappedCard } from '../Organization';

const PieLangs = ({ data }) => {
const PieLangs = ({ data, downloadLoading }) => {
const [useLOCAdded, setUseLOCAdded] = React.useState(false);

const metric = useLOCAdded ? 'added' : 'changed';
Expand All @@ -20,15 +20,17 @@ const PieLangs = ({ data }) => {
<p className="text-xl font-semibold">Most Used Languages</p>
<p>{useLOCAdded ? 'By LOC Added' : 'By LOC Changed'}</p>
</div>
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setUseLOCAdded(!useLOCAdded)}
>
<span>Toggle</span>
</button>
</div>
{!downloadLoading && (
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setUseLOCAdded(!useLOCAdded)}
>
<span>Toggle</span>
</button>
</div>
)}
</div>
<PieChart
data={newData}
Expand All @@ -43,9 +45,10 @@ const PieLangs = ({ data }) => {

PieLangs.propTypes = {
data: PropTypes.object.isRequired,
downloadLoading: PropTypes.bool.isRequired,
};

const PieRepos = ({ data }) => {
const PieRepos = ({ data, downloadLoading }) => {
const [useLOCAdded, setUseLOCAdded] = React.useState(false);

const metric = useLOCAdded ? 'added' : 'changed';
Expand All @@ -59,15 +62,17 @@ const PieRepos = ({ data }) => {
<p className="text-xl font-semibold">Most Active Repositories</p>
<p>{useLOCAdded ? 'By LOC Added' : 'By LOC Changed'}</p>
</div>
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setUseLOCAdded(!useLOCAdded)}
>
<span>Toggle</span>
</button>
</div>
{!downloadLoading && (
<div className="flex-shrink-0">
<button
type="button"
className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
onClick={() => setUseLOCAdded(!useLOCAdded)}
>
<span>Toggle</span>
</button>
</div>
)}
</div>
<PieChart
data={newData}
Expand All @@ -87,6 +92,7 @@ const PieRepos = ({ data }) => {

PieRepos.propTypes = {
data: PropTypes.object.isRequired,
downloadLoading: PropTypes.bool.isRequired,
};

export { PieLangs, PieRepos };
22 changes: 12 additions & 10 deletions frontend/src/pages/Wrapped/Wrapped.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,11 @@ const WrappedScreen = () => {
>
<WrappedSection useTitle={false}>
<div className="w-full h-auto flex flex-row flex-wrap -mb-4">
<Link to="/wrapped">
<LeftArrowIcon className="absolute ml-2 mt-2 h-8 w-8 text-gray-500 hover:text-gray-800" />
</Link>
{!downloadLoading && (
<Link to="/wrapped">
<LeftArrowIcon className="absolute ml-2 mt-2 h-8 w-8 text-gray-500 hover:text-gray-800" />
</Link>
)}
<p className="text-xl font-semibold text-center w-full">
{`${userId}'s`}
</p>
Expand Down Expand Up @@ -224,10 +226,10 @@ const WrappedScreen = () => {
</WrappedSection>
<WrappedSection title="Lines of Code (LOC) Analysis">
<div className="w-full md:w-1/2 xl:w-1/3">
<PieLangs data={data} />
<PieLangs data={data} downloadLoading={downloadLoading} />
</div>
<div className="w-full md:w-1/2 xl:w-1/3">
<PieRepos data={data} />
<PieRepos data={data} downloadLoading={downloadLoading} />
</div>
<div className="w-full xl:w-1/3 flex flex-wrap">
<div className="w-full md:w-1/2 lg:w-1/4 xl:w-1/2">
Expand Down Expand Up @@ -262,18 +264,18 @@ const WrappedScreen = () => {
<Radar data={data} />
</div>
<div className="w-full lg:w-2/3">
<BarMonth data={data} />
<BarMonth data={data} downloadLoading={downloadLoading} />
</div>
<div className="w-full lg:w-2/3">
<BarDay data={data} />
<BarDay data={data} downloadLoading={downloadLoading} />
</div>
<div className="w-full lg:w-1/3">
<SwarmDay data={data} />
</div>
</WrappedSection>
{downloadLoading && (
<div className="text-2xl md:text-3xl lg:text-4xl font-bold text-blue-500">
Get your own at www.githubtrends.io/wrapped
<div className="text-center text-2xl md:text-3xl lg:text-4xl font-bold text-blue-500">
Create your own at www.githubtrends.io/wrapped
</div>
)}
</div>
Expand All @@ -286,7 +288,7 @@ const WrappedScreen = () => {
setTimeout(() => {
downloadImage();
setDownloadLoading(false);
}, 1000);
}, 10);
}}
>
{downloadLoading ? (
Expand Down

0 comments on commit fcaec2c

Please sign in to comment.