nus-fintech-sg
/
DevToolKit1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add svg pieChart

Browse Source
main
yikth 5 years ago
parent 1902e4049e
commit 47af5e49e3
6 changed files with 267 additions and 85 deletions
Show Stats Download Patch File Download Diff File

52
README.md
Unescape Escape View File

@ -30,3 +30,55 @@ Developer Kit : Frontend
* add `debugger` to code to stop and debug at chrome * add `debugger` to code to stop and debug at chrome
* [VS Code Debugger](https://code.visualstudio.com/docs/editor/debugging) * [VS Code Debugger](https://code.visualstudio.com/docs/editor/debugging)
## Prepare Project
* ReactJS view is coded in xml markup and compiled using babel to plain R
React code
### Frontend with ReactJS (Client)
* Packages
+ create-react-app
```
$ npm -g install create-react-app
```
+ Create project "frontend_client" using React Framework code
```
$ npx create-react-app frontend_client
```
+ Start the client
```
$ cd frontend_client
$ npm start
```
+ Use Browser to browse "http://localhost:3001"
+ Misc : bootstrap css component for styling
```sh
$ npm i bootstrap
```
+ index.js
```javascript
import 'bootstrap/dist/css/bootstrap.css'
```
+ VScode Extension
+ Simple React Snippet
+ Debugging : Chrome React Developer Tool Extension
### Backend with ExpressJS (Server)
* Packages
+ express
```
$ npm install -g express-generator
```
+ Create project "backend_server" using Express Framework code with pug (Jade) view
```
# express --view=pug backend_server
```
+ Start the Server
```
$ cd backend_server
$ npm start
```
+ Use Browser to browse "http://localhost:3000"

19
chart4/svgChart3.html
Unescape Escape View File

@ -1,8 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<style> <style>
.arc text { .arc text {
font: 18px arial; font: 18px arial;
@ -19,15 +17,10 @@
font-weight: italic; font-weight: italic;
} }
</style> </style>
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
</head> <svg width="400" height="450"></svg>
<body>
<svg width = "400" height = "450"></svg>
<script src="svgChart3.js"></script> <script src="svgChart3.js"></script>
</body>
</body>
</html> </html>

66
chart4/svgChart3.js
Unescape Escape View File

@ -1,60 +1,70 @@
var svg = d3.select("svg"), var svg = d3.select("svg"),
width = svg.attr("width"), width = svg.attr("width"),
height = svg.attr("height"), height = svg.attr("height"),
radius = Math.min(width, height) / 2; radius = Math.min(width, height) / 2;
var g = svg.append("g") var g = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal([ var color = d3.scaleOrdinal([
'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple' "gray",
]); "green",
"brown",
var pie = d3.pie().value(function(d) { "orange",
"yellow",
"red",
"purple",
]);
var pie = d3.pie().value(function (d) {
return d.amt; return d.amt;
}); });
var path = d3.arc() var path = d3
.outerRadius(radius - 10).innerRadius(0); .arc()
.outerRadius(radius - 10)
.innerRadius(0);
var label = d3.arc() var label = d3
.outerRadius(radius).innerRadius(radius - 80); .arc()
.outerRadius(radius)
d3.csv("expenses.csv", function(data) { .innerRadius(radius - 80);
d3.csv("expenses.csv").then(function (data) {
console.log(data); console.log(data);
/* if (error) { /* if (error) {
throw error; throw error;
} }
*/ */
var arc = g.selectAll(".arc") var arc = g
.selectAll(".arc")
.data(pie(data)) .data(pie(data))
.enter() .enter()
.append("g") .append("g")
.attr("class", "arc"); .attr("class", "arc");
arc.append("path") arc.append("path")
.attr("d", path) .attr("d", path)
.attr("fill", function(d) { return color(d.data.items); }); .attr("fill", function (d) {
return color(d.data.items);
});
console.log(arc); console.log(arc);
arc.append("text").attr("transform", function(d) { arc.append("text")
.attr("transform", function (d) {
return "translate(" + label.centroid(d) + ")"; return "translate(" + label.centroid(d) + ")";
}) })
.text(function(d) { return d.data.items; }); .text(function (d) {
return d.data.items;
}); });
});
svg.append("g") svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")") .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text").text("Expenses this Month - July 2020") .append("text")
.attr("class", "title") .text("Expenses this Month - July 2020")
.attr("class", "title");

3
playground/pieChart.css
Unescape Escape View File

@ -0,0 +1,3 @@
svg {
height: 200px; // the contents will scale to fit because of viewBox
}

82
playground/pieChart.html
Unescape Escape View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Use svg</title>
<link rel="stylesheet" href="./pieChart.css" />
</head>
<body>
<svg viewBox="-1 -1 2 2" style="transform: rotate(-90deg)"></svg>
<script src="pieChart.js"></script>
<br />
<!-- curves sample -->
<!-- C x1 y1, x2 y2, x y -->
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10 10 C 20 20, 40 20, 50 10"
stroke="black"
fill="transparent"
/>
<path
d="M 70 10 C 70 20, 110 20, 110 10"
stroke="black"
fill="transparent"
/>
<path
d="M 130 10 C 120 20, 180 20, 170 10"
stroke="black"
fill="transparent"
/>
<path
d="M 10 60 C 20 80, 40 80, 50 60"
stroke="black"
fill="transparent"
/>
<path
d="M 70 60 C 70 80, 110 80, 110 60"
stroke="black"
fill="transparent"
/>
<path
d="M 130 60 C 120 80, 180 80, 170 60"
stroke="black"
fill="transparent"
/>
<path
d="M 10 110 C 20 140, 40 140, 50 110"
stroke="black"
fill="transparent"
/>
<path
d="M 70 110 C 70 140, 110 140, 110 110"
stroke="black"
fill="transparent"
/>
<path
d="M 130 110 C 120 140, 180 140, 170 110"
stroke="black"
fill="transparent"
/>
</svg>
<br />
<!-- Sample Arc -->
<!-- A rx ry x-axis-rotation large-arc-flag sweep-flag x y -->
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<path
d="M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10"
stroke="black"
fill="green"
stroke-width="2"
fill-opacity="0.5"
/>
</svg>
</body>
</html>

42
playground/pieChart.js
Unescape Escape View File

@ -0,0 +1,42 @@
const svgEl = document.querySelector("svg");
const slices = [
{ percent: 0.1, color: "Coral" },
{ percent: 0.65, color: "CornflowerBlue" },
{ percent: 0.2, color: "#00ab6b" },
];
let cumulativePercent = 0;
function getCoordinatesForPercent(percent) {
const x = Math.cos(2 * Math.PI * percent);
const y = Math.sin(2 * Math.PI * percent);
return [x, y];
}
slices.forEach((slice) => {
// destructuring assignment sets the two variables at once
const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
// each slice starts where the last slice ended, so keep a cumulative percent
cumulativePercent += slice.percent;
const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
// if the slice is more than 50%, take the large arc (the long way around)
const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
// create an array and join it just for code readability
const pathData = [
`M ${startX} ${startY}`, // Move
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
`L 0 0`, // Line
].join(" ");
// create a <path> and append it to the <svg> element
const pathEl = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);
pathEl.setAttribute("d", pathData);
pathEl.setAttribute("fill", slice.color);
svgEl.appendChild(pathEl);
});
Write Preview
Loading…
Cancel
Save