Skip to content

Commit 01440a8

Browse files
jonwkjonwk
committed
Code tidy up done
1 parent 180dca6 commit 01440a8

10 files changed

Lines changed: 4 additions & 514 deletions

File tree

‎sample-app/components/Charts.js‎

Lines changed: 1 addition & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,15 @@ import { PieChartComp, BarChartComp } from "../components/charts/";
66
import { ResponsiveContainer } from "recharts";
77
import { mockRepoData } from "../mock";
88
import { langColors } from "../util";
9-
// import { error } from "console";
10-
// const Charts = ({ repostarChartData }) => {
11-
12-
// Create Most Starred chart
139

1410
const Charts = ({ repoData }) => {
1511
// const Charts = () => {
1612
const ChartWidth = 300;
1713
const ChartHeight = 300;
18-
// const [starChartData, setStarChartData] = useState([{}]);
1914
const [starChartConfig, setStarChartConfig] = useState({});
20-
// const [langChartData, setLangChartData] = useState([{}]);
2115
const [langChartConfig, setLangChartConfig] = useState({});
2216
const [langStarChartConfig, setLangStarChartConfig] = useState({});
2317

24-
// const repoData = mockRepoData;
2518
const initStarChart = () => {
2619
const LIMIT = 5;
2720
const sortProperty = "stargazers_count";
@@ -36,9 +29,6 @@ const Charts = ({ repoData }) => {
3629
data.push({ name: labels[i], stars: stars[i] });
3730
}
3831

39-
console.log(data);
40-
// setStarChartData(data);
41-
4232
if (data.length > 0) {
4333
const width = ChartWidth;
4434
const height = ChartHeight;
@@ -63,10 +53,7 @@ const Charts = ({ repoData }) => {
6353
YKey,
6454
BarTPColor,
6555
};
66-
console.log(starBarChartConfig);
6756
setStarChartConfig(starBarChartConfig);
68-
console.log(starBarChartConfig);
69-
// console.log(starBarChartConfig);
7057
}
7158
};
7259

@@ -124,15 +111,6 @@ const Charts = ({ repoData }) => {
124111
};
125112

126113
const colorsArr = (langData) => {
127-
// let colors = Array.from(langData, ({ key, value, color }) => color);
128-
// colors = colors.map(v => (v === undefined ? getRandomColor() : v));
129-
// colors = colors.filter(x => x !== undefined);
130-
// colors = colors.map(color => {
131-
// var len = color == null ? 0 : color.length;
132-
// if (len > 0) {
133-
// return `#${len > 4 ? color.slice(1) : color.slice(1).repeat(2)}FF`;
134-
// }
135-
// });
136114
return Array.from(langData, ({ key, value, color }) => color)
137115
.map((v) => (v === undefined ? getRandomColor() : v))
138116
.filter((x) => x !== undefined)
@@ -146,20 +124,9 @@ const Charts = ({ repoData }) => {
146124

147125
const initLangChart = () => {
148126
const langData = getLangData(repoData);
149-
// setLangChartData(langData);
150127
const labels = langData.map((lang) => lang.label);
151128
const data = langData;
152-
// const borderColor = labels.map((label) => {
153-
// if (langColors[label.toLowerCase()] !== undefined) {
154-
// return langColors[label.toLowerCase()];
155-
// } else {
156-
// return getRandomColor();
157-
// }
158-
// });
159-
// const sectorColors = borderColor.map((color) => `${color}FF`);
160-
161129
const sectorColors = colorsArr(langData);
162-
// setLangChartData(data);
163130

164131
if (data.length > 0) {
165132
const width = ChartWidth;
@@ -198,10 +165,7 @@ const Charts = ({ repoData }) => {
198165
}
199166
};
200167

201-
// Create Stars per language chart
202-
// const [thirdChartData, setThirdChartData] = useState(null);
203168
const initLangStarChart = () => {
204-
// const ctx = document.getElementById("thirdChart");
205169
const filteredRepos = repoData.filter(
206170
(repo) => !repo.fork && repo.stargazers_count > 0
207171
);
@@ -214,15 +178,6 @@ const Charts = ({ repoData }) => {
214178
return { lang: lang, repos: starSum };
215179
});
216180

217-
// const langData = getLangData(repoData);
218-
// setLangChartData(langData);
219-
// const labels = langData.map((lang) => lang.label);
220-
// const data = langData;
221-
// const sectorColors = colorsArr(langData);
222-
// setLangChartData(data);
223-
224-
// setThirdChartData(data);
225-
226181
if (data.length > 0) {
227182
console.log("third chart data:", data);
228183
const borderColor = labels.map((label) => {
@@ -263,22 +218,8 @@ const Charts = ({ repoData }) => {
263218
label,
264219
sectorColors,
265220
};
266-
// console.log("langChartConfig - ", pieChartConfig);
221+
267222
setLangStarChartConfig(pieChartConfig);
268-
// console.log("langChartConfig - ", pieChartConfig);
269-
// console.log(backgroundColor)
270-
// const config = {
271-
// ctx,
272-
// chartType,
273-
// labels,
274-
// data,
275-
// backgroundColor,
276-
// borderColor,
277-
// axes,
278-
// legend,
279-
// };
280-
// console.log(config);
281-
// buildChart(config);
282223
}
283224
};
284225

@@ -287,9 +228,6 @@ const Charts = ({ repoData }) => {
287228
initStarChart();
288229
initLangChart();
289230
initLangStarChart();
290-
// console.log(starChartData);
291-
// console.log(langChartData);
292-
// initThirdChart();
293231
}
294232
}, []);
295233

@@ -328,14 +266,8 @@ const Charts = ({ repoData }) => {
328266
</header>
329267

330268
<div className="chart-container">
331-
{/* <BarChartComp config={starBarChartConfig} /> */}
332-
{/* {starBarChartConfig.starChartData && ( */}
333269
{starChartError && <p>Not Enough Data!</p>}
334270
<BarChartComp config={starChartConfig} />
335-
{/* )} */}
336-
337-
{/* {langChartError && <p>Nothing to see here!</p>} */}
338-
{/* <canvas id="langChart" width={chartSize} height={chartSize} /> */}
339271
</div>
340272
</div>
341273
<div className="chart">
@@ -344,12 +276,8 @@ const Charts = ({ repoData }) => {
344276
</header>
345277

346278
<div className="chart-container">
347-
{/* <PieChartComp /> */}
348279
{langChartError && <p>Not Enough Data!</p>}
349280
<PieChartComp config={langStarChartConfig} />
350-
351-
{/* {langChartError && <p>Nothing to see here!</p>} */}
352-
{/* <canvas id="langChart" width={chartSize} height={chartSize} /> */}
353281
</div>
354282
</div>
355283
</ChartsStyles>

‎sample-app/components/UserInfo.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
// import Octicon, { Briefcase, Calendar, Location } from '@primer/octicons-react';
4-
// const feather = require("feather-icons");
53
import UserInfoStyles from "./styles/UserInfoStyles";
64
import { Section } from "../styles";
75
import { Briefcase, Calendar, MapPin } from "react-feather";
8-
// import { theme } from "../styles";
9-
// const { colors } = theme;
106
import { colors } from "../styles";
117

128
const UserInfo = ({ userData }) => (
@@ -36,7 +32,6 @@ const UserInfo = ({ userData }) => (
3632
<div className="info">
3733
{userData.company && (
3834
<span className="info__item">
39-
{/* <Octicon icon={Briefcase} size="small" /> */}
4035
<Briefcase
4136
className="icon"
4237
color={colors.grey}
@@ -49,7 +44,6 @@ const UserInfo = ({ userData }) => (
4944

5045
{userData.location && (
5146
<span className="info__item">
52-
{/* <Octicon icon={Location} size="small" /> */}
5347
<MapPin
5448
className="icon"
5549
color={colors.grey}
@@ -62,7 +56,6 @@ const UserInfo = ({ userData }) => (
6256

6357
{userData.created_at && (
6458
<span className="info__item">
65-
{/* <Octicon icon={Calendar} size="small" /> */}
6659
<Calendar
6760
className="icon"
6861
color={colors.grey}

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

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,9 @@ import {
1414
const BarChartComp = ({ config }) => {
1515
const { width, height, margin, data, colors, XKey, YKey, BarTPColor } =
1616
config;
17-
console.log(config);
18-
// const config = props.config;
19-
// console.log(config);
20-
21-
// const data = config != null ? config.data : [{}];
22-
// console.log(config.data);
23-
// const colors = config.colors;
24-
// console.log(data);
25-
// return (
26-
// <BarChart
27-
// width={config.width}
28-
// height={config.height}
29-
// data={config.data}
30-
// margin={config.margin}
31-
// >
32-
// <XAxis dataKey={config.XKey} />
33-
// <YAxis dataKey={config.YKey} />
34-
// <Tooltip cursor={{ fill: "transparent" }} />
35-
// <Bar dataKey={config.YKey} fill={config.BarTPColor}>
36-
// {data &&
37-
// data.map((entry, index) => (
38-
// <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
39-
// ))}
40-
// </Bar>
41-
// </BarChart>
42-
// );
4317
return (
4418
<BarChart width={width} height={height} data={data} margin={margin}>
45-
<XAxis dataKey={XKey} fill="none" />
19+
<XAxis dataKey={XKey} fill="none" />
4620
<YAxis dataKey={YKey} />
4721
<Tooltip cursor={{ fill: "transparent" }} />
4822
<Bar dataKey={YKey}>

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

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,6 @@ const PieChartComp = ({ config }) => {
9999
label,
100100
} = config;
101101

102-
// console.log(config);
103-
104102
const [activeIndex, setActiveIndex] = useState(0);
105103
const onPieEnter = useCallback(
106104
(_, index) => {
@@ -142,32 +140,6 @@ const PieChartComp = ({ config }) => {
142140
</Pie>
143141
</PieChart>
144142
</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>
171143
);
172144
};
173145

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

Lines changed: 0 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,5 @@
11
import styled from "styled-components";
22
import { colors, theme, helper, media } from "../../styles";
3-
// const { colors } = theme;
4-
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`
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-
// `};
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-
// `};
41-
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-
// `};
58-
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-
// `;
803

814
const ChartsStyles = styled.div`
825
max-width: 1200px !important;

0 commit comments

Comments
 (0)