Skip to content
This repository was archived by the owner on Jul 5, 2019. It is now read-only.

Commit b9cd9d2

Browse files
klvenkyklvenky
committed
Graphs move in sync
1 parent ac7110a commit b9cd9d2

File tree

6 files changed

+60
-185
lines changed

6 files changed

+60
-185
lines changed

‎public/index.html

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<meta name="theme-color" content="#000000">
@@ -18,22 +18,22 @@
1818
work correctly both with client-side routing and a non-root public URL.
1919
Learn how to configure a non-root public URL by running `npm run build`.
2020
-->
21-
<title>Graph Example</title>
22-
</head>
23-
<body>
24-
<noscript>
25-
You need to enable JavaScript to run this app.
26-
</noscript>
27-
<div id="root"></div>
28-
<!--
29-
This HTML file is a template.
30-
If you open it directly in the browser, you will see an empty page.
21+
<title>User Stats</title>
22+
</head>
23+
<body>
24+
<noscript>
25+
You need to enable JavaScript to run this app.
26+
</noscript>
27+
<div id="root"></div>
28+
<!--
29+
This HTML file is a template.
30+
If you open it directly in the browser, you will see an empty page.
3131
32-
You can add webfonts, meta tags, or analytics to this file.
33-
The build step will place the bundled scripts into the <body> tag.
32+
You can add webfonts, meta tags, or analytics to this file.
33+
The build step will place the bundled scripts into the <body> tag.
3434
35-
To begin the development, run `npm start` or `yarn start`.
36-
To create a production bundle, use `npm run build` or `yarn build`.
37-
-->
38-
</body>
35+
To begin the development, run `npm start` or `yarn start`.
36+
To create a production bundle, use `npm run build` or `yarn build`.
37+
-->
38+
</body>
3939
</html>

‎src/App.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
.App-header {
1111
background-color: limegreen;
12-
height: 40px;
12+
height: 60px;
1313
padding: 20px;
1414
color: white;
1515
}

‎src/App.js

+6-20
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,19 @@
1-
import React, {Component} from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
4-
import Graph from './Graph';
1+
import React, {Component} from "react";
2+
import "./App.css";
3+
import Graph from "./Graph";
54
class App extends Component {
65
getRandoms() {
7-
// let randomPercentages = [], tempSum = 0;
8-
// let noOfGraphs = 3, lastGraphIndex = noOfGraphs - 1;
9-
// for (let currentIter = 0; currentIter < noOfGraphs; currentIter++) {
10-
// let currRandom = ((currentIter === lastGraphIndex) ? 100 - tempSum
11-
// : parseInt(Math.random() * (100 - tempSum)));
12-
// tempSum += currRandom;
13-
// randomPercentages.push(currRandom);
14-
// }
156
let randomPercentages = {
16-
25: {color: "#FF0000", name: "name 1"},
17-
50: {color: "#00FF00", name: "name 2"},
18-
75: {color: "#0000FF", name: "name 3"}
7+
25: {color: "#FF0000", name: "New users"},
8+
50: {color: "#a212ff", name: "Popularity"},
9+
75: {color: "#ff5108", name: "User Satisfaction"}
1910
};
2011
let graphs = [];
2112
for (let currPercentage in randomPercentages) {
22-
console.log('color : ', randomPercentages[currPercentage]);
23-
console.log('name : ', randomPercentages[currPercentage]);
2413
graphs.push(<Graph key={currPercentage} percentage={parseInt(currPercentage)}
2514
color={randomPercentages[currPercentage].color}
2615
name={randomPercentages[currPercentage].name}/>);
2716
}
28-
/*randomPercentages.map(randoms => {
29-
graphs.push(<Graph key={randoms} percentage={randoms}/>);
30-
});*/
3117
return graphs;
3218
}
3319

‎src/Graph.js

+31-31
Original file line numberDiff line numberDiff line change
@@ -10,48 +10,48 @@ export default class Graph extends Component {
1010
}
1111

1212
componentDidMount() {
13-
this.draw();
13+
this.createGraph();
1414
}
1515

16-
draw() {
17-
let outerCanvasContext = this.refs.canvas.getContext("2d");
18-
outerCanvasContext.beginPath();
19-
outerCanvasContext.arc(100, 75, 50, 0, 2 * Math.PI);
20-
outerCanvasContext.strokeStyle = "#000000";
21-
outerCanvasContext.stroke();
22-
outerCanvasContext.save();
23-
let innerCanvasContext = this.refs.canvas.getContext("2d");
24-
innerCanvasContext.beginPath();
25-
let divideIntoParts = 5, currDivision = 0;
26-
let x1 = 100, y1 = 75;
27-
this.update(currDivision, divideIntoParts, innerCanvasContext, x1, y1);
16+
createGraph() {
17+
let canvasContext = this.refs[this.props.name].getContext('2d'), timeToTakeInSeconds = 25, current = 0;
18+
this.clearAndDraw(canvasContext, timeToTakeInSeconds, current);
2819
}
2920

30-
update(currIteration, divideIntoParts, innerCanvasContext, x1, y1) {
31-
if (currIteration < divideIntoParts) {
32-
let angle = (this.props.percentage / 100) * 2 * (currIteration + 1) / divideIntoParts * Math.PI;
33-
console.log('currDivision :: ', currIteration);
34-
innerCanvasContext.clearRect(0, 0, innerCanvasContext.width, innerCanvasContext.height);
35-
innerCanvasContext.arc(x1, y1, 45, 0, angle);
36-
innerCanvasContext.strokeStyle = this.props.color;
37-
innerCanvasContext.font = "15px Arial";
38-
// innerCanvasContext.fillText(this.state.percentage, x1, y1);
39-
innerCanvasContext.closePath();
40-
innerCanvasContext.stroke();
41-
this.setState({percentage: (currIteration + 1) / divideIntoParts * this.props.percentage});
42-
setTimeout(() => {
43-
this.update(++currIteration, divideIntoParts, innerCanvasContext, x1, y1, this.state.percentage);
44-
}, 1000);
21+
clearAndDraw(canvasContext, timeToTakeInSeconds, current) {
22+
let innerRadius = 45, outerRadius = 50, startAngle = 0, fullCircleAngle = 2 * Math.PI,
23+
currText = (current * this.props.percentage / timeToTakeInSeconds),
24+
currAngle = (currText * fullCircleAngle) / 100;
25+
canvasContext.clearRect(0, 0, 400, 400);
26+
this.drawArc(canvasContext, 100, 100, outerRadius, startAngle, fullCircleAngle, null, "black");
27+
this.drawArc(canvasContext, 100, 100, innerRadius, startAngle, currAngle,
28+
(current * this.props.percentage) / timeToTakeInSeconds);
29+
current++;
30+
if (current < timeToTakeInSeconds + 1) {
31+
requestAnimationFrame(() => {
32+
this.clearAndDraw(canvasContext, timeToTakeInSeconds, current);
33+
});
4534
}
4635
}
4736

37+
drawArc(context, xPos, yPos, radius, startAngle, endAngle, text, color) {
38+
context.beginPath();
39+
context.arc(xPos, yPos, radius, startAngle, endAngle);
40+
if (text) {
41+
context.fillText(text, xPos - 8, yPos + 10);
42+
context.font = "15px Arial";
43+
}
44+
context.strokeStyle = color ? color : this.props.color;
45+
context.stroke();
46+
}
47+
4848
render() {
49-
let borderStyle = {border: "2px"}, percentageStyle = {"marginLeft": "-100px"},
49+
let borderStyle = {border: "2px"}, //percentageStyle = {"marginLeft": "-100px"},
5050
nameStyle = {"marginLeft": "-86px"};
5151
return (
5252
<span>
53-
<canvas ref="canvas" width="300" height="150" style={borderStyle}></canvas>
54-
<div style={percentageStyle}>{this.state.percentage}</div>
53+
<canvas ref={this.props.name} width="300" height="150" style={borderStyle}></canvas>
54+
{/*<div style={percentageStyle}>{this.state.percentage}</div>*/}
5555
<div style={nameStyle}>{this.props.name}</div>
5656
</span>
5757
);

‎src/index.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
// import Graph from './Graph';
6-
import registerServiceWorker from './registerServiceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.css";
4+
import App from "./App";
75

8-
ReactDOM.render(<App />, document.getElementById('root'));
9-
registerServiceWorker();
6+
ReactDOM.render(<App />, document.getElementById('root'));

‎src/registerServiceWorker.js

-108
This file was deleted.

0 commit comments

Comments
 (0)