Skip to content

Commit 80dc4cf

Browse files
jonwkjonwk
committed
Did some CSS work
1 parent d09fcce commit 80dc4cf

4 files changed

Lines changed: 169 additions & 92 deletions

File tree

‎sample-app/components/Charts.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ const Charts = ({ repoData }) => {
265265
};
266266
// console.log("langChartConfig - ", pieChartConfig);
267267
setLangStarChartConfig(pieChartConfig);
268-
console.log("langChartConfig - ", pieChartConfig);
268+
// console.log("langChartConfig - ", pieChartConfig);
269269
// console.log(backgroundColor)
270270
// const config = {
271271
// ctx,
@@ -310,11 +310,11 @@ const Charts = ({ repoData }) => {
310310
const langStarChartError = errorHandler(langStarChartConfig);
311311

312312
return (
313-
<Section dark>
313+
<Section>
314314
<ChartsStyles>
315315
<div className="chart">
316316
<header>
317-
<h2>Top Languages</h2>
317+
<span className="heading">Top Languages</span>
318318
</header>
319319

320320
<div className="chart-container">
@@ -324,7 +324,7 @@ const Charts = ({ repoData }) => {
324324
</div>
325325
<div className="chart">
326326
<header>
327-
<h2>Top Starred Repos</h2>
327+
<span className="heading">Top Starred Repos</span>
328328
</header>
329329

330330
<div className="chart-container">
@@ -340,7 +340,7 @@ const Charts = ({ repoData }) => {
340340
</div>
341341
<div className="chart">
342342
<header>
343-
<h2>Starred Languages</h2>
343+
<span className="heading">Starred Languages</span>
344344
</header>
345345

346346
<div className="chart-container">

‎sample-app/components/charts/PieChartComp.js‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,14 @@ const renderActiveShape = (props) => {
7070
textAnchor={textAnchor}
7171
fill="#fff"
7272
>{`${repos + " " + (repos > 1 ? `${label}s` : `${label}`)}`}</text>
73-
{/* >
74-
{`${repos}`}
75-
</text> */}
7673
<text
7774
x={ex + (cos >= 0 ? 1 : -1) * 12}
7875
y={ey}
7976
dy={18}
8077
textAnchor={textAnchor}
8178
fill="#999"
8279
>
83-
{`(${(percent * 100).toFixed(2)}%)`}
80+
{`(${(percent * 100).toFixed(0)}%)`}
8481
</text>
8582
</g>
8683
);
@@ -113,33 +110,64 @@ const PieChartComp = ({ config }) => {
113110
);
114111

115112
return (
116-
<PieChart width={width} height={height} margin={margin} overflow="visible">
117-
<Pie
118-
activeIndex={activeIndex}
119-
activeShape={renderActiveShape}
120-
// label={}
121-
data={data}
122-
cx={cx}
123-
cy={cy}
124-
innerRadius={innerRadius}
125-
outerRadius={outerRadius}
126-
paddingAngle={paddingAngle}
127-
dataKey={dataKey}
128-
onMouseEnter={onPieEnter}
129-
stroke="none"
130-
fill="transparent"
113+
<ResponsiveContainer width="50%" height={height}>
114+
<PieChart
115+
width={width}
116+
height={height}
117+
margin={margin}
118+
overflow="visible"
131119
>
132-
{data &&
133-
data.map((entry, index) => (
134-
<Cell
135-
label={label}
136-
key={`cell-${index}`}
137-
fill={sectorColors[index % sectorColors.length]}
138-
139-
/>
140-
))}
141-
</Pie>
142-
</PieChart>
120+
<Pie
121+
activeIndex={activeIndex}
122+
activeShape={renderActiveShape}
123+
data={data}
124+
cx={cx}
125+
cy={cy}
126+
innerRadius={innerRadius}
127+
outerRadius={outerRadius}
128+
paddingAngle={paddingAngle}
129+
dataKey={dataKey}
130+
onMouseEnter={onPieEnter}
131+
stroke="none"
132+
fill="transparent"
133+
>
134+
{data &&
135+
data.map((entry, index) => (
136+
<Cell
137+
label={label}
138+
key={`cell-${index}`}
139+
fill={sectorColors[index % sectorColors.length]}
140+
/>
141+
))}
142+
</Pie>
143+
</PieChart>
144+
</ResponsiveContainer>
145+
// <PieChart width={width} height={height} margin={margin} overflow="visible">
146+
// <Pie
147+
// activeIndex={activeIndex}
148+
// activeShape={renderActiveShape}
149+
// data={data}
150+
// cx={cx}
151+
// cy={cy}
152+
// innerRadius={innerRadius}
153+
// outerRadius={outerRadius}
154+
// paddingAngle={paddingAngle}
155+
// dataKey={dataKey}
156+
// onMouseEnter={onPieEnter}
157+
// stroke="none"
158+
// fill="transparent"
159+
// >
160+
// {data &&
161+
// data.map((entry, index) => (
162+
// <Cell
163+
// // repos={data.dataKey}
164+
// label={label}
165+
// key={`cell-${index}`}
166+
// fill={sectorColors[index % sectorColors.length]}
167+
// />
168+
// ))}
169+
// </Pie>
170+
// </PieChart>
143171
);
144172
};
145173

‎sample-app/components/styles/ChartsStyles.js‎

Lines changed: 100 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,126 @@ import styled from "styled-components";
22
import { colors, theme, helper, media } from "../../styles";
33
// const { colors } = theme;
44

5-
// https://codepen.io/wyarejali/pen/VwwQRQz
6-
const ChartsStyles = styled.div`
7-
${helper.flexCenter} ;
5+
// https://codepen.io/wyarejali/pen/VwwQRQz
6+
// const ChartsStyles = styled.div`
7+
// ${helper.flexCenter} ;
8+
// // height:fit-content;
9+
// border-radius: 1rem;
10+
// background: #24292e;
11+
// box-shadow: inset -24px -24px 39px #1e2226, inset 24px 24px 39px #2a3036;
12+
// width: 95% !important;
13+
// height: fit-content !important;
14+
// justify-content: center ;
15+
16+
// ${media.bp400`
817
// height:fit-content;
9-
border-radius: 1rem;
10-
background: #24292e;
11-
box-shadow: inset -24px -24px 39px #1e2226, inset 24px 24px 39px #2a3036;
12-
width: 95% !important;
13-
height: fit-content !important;
14-
justify-content: center ;
15-
16-
${media.bp400`
17-
height:fit-content;
18-
min-height:1000px;
19-
display: grid;
20-
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
21-
grid-gap: 2rem;
22-
justify-items: center;
23-
align-items: center;
24-
`};
18+
// min-height:1000px;
19+
// display: grid;
20+
// grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
21+
// grid-gap: 2rem;
22+
// justify-items: center;
23+
// align-items: center;
24+
// `};
25+
26+
// ${media.bp600`
27+
// display: grid;
28+
// grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
29+
// grid-gap: 2rem ;
30+
// justify-items: center;
31+
// `};
32+
33+
// ${media.bp900`
34+
// margin-top: -8rem;
35+
// max-height:50%;
36+
// display: grid;
37+
// grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
38+
// grid-gap: 2rem !important;
39+
// justify-items: center;
40+
// `};
2541

26-
${media.bp600`
27-
display: grid;
28-
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
29-
grid-gap: 2rem;
30-
justify-items: center;
31-
`};
42+
// .chart {
43+
// background-color: ${colors.white};
44+
// // background-color: transparent;
45+
// max-width: 500px;
46+
// // overflow: auto;
47+
// margin: 5% 0%;
48+
// padding: 0 5%;
49+
// padding:1 rem;
50+
// border-radius: 0.25rem;
51+
// box-shadow: 0 5px 30px -15px rgba(0, 0, 0, 0.2);
52+
// ${media.bp400`
53+
// padding-top: 2rem;
54+
// `};
55+
// ${media.bp900`
56+
// padding-top: 2rem;
57+
// `};
3258

33-
${media.bp900`
34-
margin-top: -8rem;
35-
max-height:50%;
59+
// header {
60+
// // ${helper.flexBetween};
61+
// margins:2rem 0;
62+
// h2 {
63+
// background: none;
64+
// color: rgba(200, 225, 255, 0.7);
65+
// font-size: 1.5rem;
66+
// }
67+
// }
68+
// p {
69+
// color: ${colors.grey2};
70+
// }
71+
// }
72+
73+
// .chart-container {
74+
// overflow:visible;
75+
// box-shadow : 0px -0px 10px transparent
76+
// // display: flex;
77+
// // justify-content: space-around;
78+
// }
79+
// `;
80+
81+
const ChartsStyles = styled.div`
82+
max-width: 1200px !important;
83+
margin-top: -8rem !important;
84+
// background: #24292e;
85+
// box-shadow: inset -24px -24px 39px #1e2226, inset 24px 24px 39px #2a3036;
3686
display: grid;
3787
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
38-
grid-gap: 10%;
39-
justify-items: center;
40-
`};
88+
grid-gap: 2rem;
89+
justify-content: center;
90+
${media.bp900`
91+
justify-items: center;
92+
`};
4193
4294
.chart {
95+
border-radius: 10px;
96+
background: #24292e;
97+
box-shadow: inset -24px -24px 39px #1e2226, inset 24px 24px 39px #2a3036;
4398
// background-color: ${colors.white};
44-
// background-color: transparent;
4599
max-width: 500px;
46-
// overflow: auto;
47-
margin: 5% 0%;
48-
padding: 0 5%;
49-
border-radius: 0.25rem;
50-
box-shadow: 0 5px 30px -15px rgba(0, 0, 0, 0.2);
51-
${media.bp400`
52-
padding-top: 2rem;
100+
padding: 2rem;
101+
// border-radius: 0.25rem;
102+
// box-shadow: 0 5px 30px -15px rgba(0, 0, 0, 0.2);
103+
${media.bp400`
104+
width:100%;
105+
padding: 1rem 1rem;
53106
`};
54-
${media.bp900`
55-
padding-top: 2rem;
107+
${media.bp600`
108+
width:100%;
109+
padding: 2rem 2rem;
56110
`};
57111
58112
header {
59-
// ${helper.flexBetween};
60-
margins:2rem 0;
61-
h2 {
62-
background: none;
63-
color: rgba(200, 225, 255, 0.7);
113+
${helper.flexBetween};
114+
.heading {
115+
// color: rgba(200, 225, 255, 0.7);
116+
color: ${colors.grey};
64117
font-size: 1.5rem;
118+
font-weight: 450;
65119
}
66120
}
67121
p {
68122
color: ${colors.grey2};
69123
}
70124
}
71-
72-
.chart-container {
73-
overflow:visible;
74-
box-shadow : 0px -0px 10000px transparent
75-
display: flex;
76-
justify-content: space-around;
77-
}
78125
`;
79126

80127
export default ChartsStyles;

‎sample-app/styles/Section.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import { theme, media, helper } from "../styles";
33
const { colors } = theme;
44

55
const Section = styled.section`
6-
height: fit-content;
6+
// height: fit-content;
77
88
padding: 3rem 5rem;
9-
${helper.flexCenter};
9+
background: #24292e;
10+
box-shadow: inset -24px -24px 39px #1e2226, inset 24px 24px 39px #2a3036;
11+
12+
// ${helper.flexCenter};
1013
${media.bp900`
1114
padding: 2rem;
1215
`};
@@ -22,9 +25,8 @@ const Section = styled.section`
2225
background-color: ${colors.black};
2326
box-shadow: inset -27px 27px 100px #0a0c0e, inset 27px -27px 100px #2a3036;
2427
${media.bp900`
25-
2628
padding-top: 2rem;
27-
// padding-bottom: 10rem;
29+
padding-bottom: 10rem;
2830
`};
2931
`};
3032

0 commit comments

Comments
 (0)