Skip to content

Commit

Permalink
Clean Wrapped Styling (#236)
Browse files Browse the repository at this point in the history
  • Loading branch information
@avgupta456
avgupta456 authored Nov 23, 2023
1 parent f1485ad commit 5c29a20
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 57 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 };
18 changes: 11 additions & 7 deletions frontend/src/components/Wrapped/Specifics/Calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const Calendar = ({
endDate,
highlightDays,
highlightColors,
downloadLoading,
}) => {
const newData = data?.calendar_data?.days || [];

Expand Down Expand Up @@ -69,12 +70,14 @@ const Calendar = ({
<p className="text-lg lg:text-xl font-semibold">
Contribution Calendar
</p>
<Input
className="hidden lg:block w-48 border-2 border-gray-300"
options={valueOptions}
selectedOption={value}
setSelectedOption={setValue}
/>
{!downloadLoading && (
<Input
className="hidden lg:block w-48 border-2 border-gray-300"
options={valueOptions}
selectedOption={value}
setSelectedOption={setValue}
/>
)}
</div>
<div className="flex flex-col h-48">
<p className="lg:text-lg">{`${numEvents} ${value.label}`}</p>
Expand All @@ -89,7 +92,7 @@ const Calendar = ({
to={endDate}
emptyColor="#EBEDF0"
colors={['#9BE9A8', '#40C463', '#30A14E', '#216E39']}
margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
margin={{ top: 10, right: 0, bottom: 0, left: 0 }}
monthBorderColor="#ffffff"
dayBorderWidth={2}
dayBorderColor="#ffffff"
Expand All @@ -112,6 +115,7 @@ Calendar.propTypes = {
endDate: PropTypes.string.isRequired,
highlightDays: PropTypes.arrayOf(PropTypes.number),
highlightColors: PropTypes.arrayOf(PropTypes.string).isRequired,
downloadLoading: PropTypes.bool.isRequired,
};

Calendar.defaultProps = {
Expand Down
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 };
23 changes: 13 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 @@ -133,6 +135,7 @@ const WrappedScreen = () => {
endDate={`${year}-12-31`}
highlightDays={highlightDays}
highlightColors={highlightColors}
downloadLoading={downloadLoading}
/>
</div>
<div className="w-1/2 md:w-1/4 lg:w-1/5">
Expand Down Expand Up @@ -224,10 +227,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 +265,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 +289,7 @@ const WrappedScreen = () => {
setTimeout(() => {
downloadImage();
setDownloadLoading(false);
}, 1000);
}, 10);
}}
>
{downloadLoading ? (
Expand Down

0 comments on commit 5c29a20

Please sign in to comment.