diff --git a/README.md b/README.md index 181187e..9397859 100644 --- 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" + + diff --git a/chart4/svgChart3.html b/chart4/svgChart3.html index 2beae12..e6d0dca 100644 --- a/chart4/svgChart3.html +++ b/chart4/svgChart3.html @@ -1,33 +1,26 @@ + + - - - - - - - - - + .arc path { + stroke: #fff; + } + .title { + fill: green; + font-size: 24px; + font-weight: italic; + } + + + + + + + - diff --git a/chart4/svgChart3.js b/chart4/svgChart3.js index 278c896..5f02f5f 100644 --- a/chart4/svgChart3.js +++ b/chart4/svgChart3.js @@ -1,60 +1,70 @@ - var svg = d3.select("svg"), - width = svg.attr("width"), - height = svg.attr("height"), - radius = Math.min(width, height) / 2; - - var g = svg.append("g") - .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); - - var color = d3.scaleOrdinal([ - '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); - - d3.csv("expenses.csv", function(data) { - - console.log(data); - - - +var svg = d3.select("svg"), + width = svg.attr("width"), + height = svg.attr("height"), + radius = Math.min(width, height) / 2; + +var g = svg + .append("g") + .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); + +var color = d3.scaleOrdinal([ + "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); + +d3.csv("expenses.csv").then(function (data) { + console.log(data); + /* if (error) { throw error; } - */ - 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); }); - - - console.log(arc); - - arc.append("text").attr("transform", function(d) { - return "translate(" + label.centroid(d) + ")"; - }) - - .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") - + */ + 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); + }); + + console.log(arc); + + arc.append("text") + .attr("transform", function (d) { + return "translate(" + label.centroid(d) + ")"; + }) + + .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"); diff --git a/playground/pieChart.css b/playground/pieChart.css new file mode 100644 index 0000000..efbe998 --- /dev/null +++ b/playground/pieChart.css @@ -0,0 +1,3 @@ +svg { + height: 200px; // the contents will scale to fit because of viewBox +} diff --git a/playground/pieChart.html b/playground/pieChart.html new file mode 100644 index 0000000..8b56433 --- /dev/null +++ b/playground/pieChart.html @@ -0,0 +1,82 @@ + + + + + + Use svg + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + diff --git a/playground/pieChart.js b/playground/pieChart.js new file mode 100644 index 0000000..92ce886 --- /dev/null +++ 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 and append it to the element + const pathEl = document.createElementNS( + "http://www.w3.org/2000/svg", + "path" + ); + pathEl.setAttribute("d", pathData); + pathEl.setAttribute("fill", slice.color); + svgEl.appendChild(pathEl); +});