add svg pieChart

5 years ago · 47af5e49e3
parent 1902e4049e
commit 47af5e49e3
6 changed files with 267 additions and 85 deletions
--- a/README.md
+++ b/README.md
@ -30,3 +30,55 @@ Developer Kit : Frontend

 * add `debugger` to code to stop and debug at chrome
 * [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"
+
+
--- a/chart4/svgChart3.html
+++ b/chart4/svgChart3.html
@ -1,7 +1,5 @@
 <!DOCTYPE html>
 <html>
-
-   
    <head>
        <style>
            .arc text {
@ -19,15 +17,10 @@
                font-weight: italic;
            }
        </style>
-  <script src="https://d3js.org/d3.v4.min.js"></script>
-  
-
+        <script src="https://d3js.org/d3.v6.min.js"></script>
    </head>
    <body>
        <svg width="400" height="450"></svg>
        <script src="svgChart3.js"></script>
-    
    </body>
-
 </html>
-
--- a/chart4/svgChart3.js
+++ b/chart4/svgChart3.js
@ -3,58 +3,68 @@
    height = svg.attr("height"),
    radius = Math.min(width, height) / 2;

-  var g = svg.append("g")
+var g = svg
+    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

 var color = d3.scaleOrdinal([
-        'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
+    "gray",
+    "green",
+    "brown",
+    "orange",
+    "yellow",
+    "red",
+    "purple",
 ]);

 var pie = d3.pie().value(function (d) {
    return d.amt;
 });

-  var path = d3.arc()
-        .outerRadius(radius - 10).innerRadius(0);
-    
-  var label = d3.arc()
-        .outerRadius(radius).innerRadius(radius - 80);
+var path = d3
+    .arc()
+    .outerRadius(radius - 10)
+    .innerRadius(0);

-  d3.csv("expenses.csv", function(data) {
+var label = d3
+    .arc()
+    .outerRadius(radius)
+    .innerRadius(radius - 80);

+d3.csv("expenses.csv").then(function (data) {
    console.log(data);

-      
-  
    /*   if (error) {
           throw error;
        }
      */
- var arc = g.selectAll(".arc")
+    var arc = g
+        .selectAll(".arc")
        .data(pie(data))
        .enter()
        .append("g")
        .attr("class", "arc");

-          
-    
    arc.append("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);

-  arc.append("text").attr("transform", function(d) { 
+    arc.append("text")
+        .attr("transform", function (d) {
            return "translate(" + label.centroid(d) + ")";
        })

-        .text(function(d) { return d.data.items; });
-        
+        .text(function (d) {
+            return d.data.items;
+        });
 });

 svg.append("g")
    .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
-        .append("text").text("Expenses this Month - July 2020")
-        .attr("class", "title")
-  
+    .append("text")
+    .text("Expenses this Month - July 2020")
+    .attr("class", "title");
--- a/playground/pieChart.css
+++ b/playground/pieChart.css
@ -0,0 +1,3 @@
+svg {
+    height: 200px; // the contents will scale to fit because of viewBox
+}
--- a/playground/pieChart.html
+++ b/playground/pieChart.html
@ -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>
--- a/playground/pieChart.js
+++ b/playground/pieChart.js
@ -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);
+});