feat report UI

Pirika-Pirilala-Popolina-Peperuto · Dec 29, 2021 · 2e15a50 · 2e15a50
1 parent a3d29a8
commit 2e15a50
Show file tree

Hide file tree

Showing 16 changed files with 4,814 additions and 4,814 deletions.
diff --git a/R/API.R b/R/API.R
@@ -1,29 +1,29 @@
-library("plotly")
-library("plumber")
-setwd("D:\\NTUT\\大三上\\資料庫管理\\project\\finacial_app\\R")
-
-#* @get /main_income
-#* @serializer png
-main_income <- function(){
-
- data <- data.frame(name = c("大衛", "大帥", "大王"), percent = c(0.4, 0.3, 0.2))
-  # 
-  #
-  # fig <- plot_ly(data, labels = ~name, values = ~percent, type = "pie", 
-  #                textinfo = "label+percent", insidetextorientation = "radial") 
-  # fig <- fig %>% layout(title = "收入主要來源商品", 
-  #                       xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE), 
-  #                       yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE))
-
-  fig <- ggplot(data, aes(x = "", y = percent, fill = name)) +
-    geom_bar(stat = "identity", width=1, color = "white")+
-    coord_polar("y", start = 0) +
-    theme_void()
-
-
-  return(print(fig))
-}
-
-
-#pr <- plumber::plumb("API.R")
-#pr$run(port = "3812")
+library("plotly")
+library("plumber")
+setwd("D:\\NTUT\\大三上\\資料庫管理\\project\\finacial_app\\R")
+
+#* @get /main_income
+#* @serializer png
+main_income <- function(){
+
+ data <- data.frame(name = c("大衛", "大帥", "大王"), percent = c(0.4, 0.3, 0.2))
+  # 
+  #
+  # fig <- plot_ly(data, labels = ~name, values = ~percent, type = "pie", 
+  #                textinfo = "label+percent", insidetextorientation = "radial") 
+  # fig <- fig %>% layout(title = "收入主要來源商品", 
+  #                       xaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE), 
+  #                       yaxis = list(showgrid = FALSE, zeroline = FALSE, showticklabels = FALSE))
+
+  fig <- ggplot(data, aes(x = "", y = percent, fill = name)) +
+    geom_bar(stat = "identity", width=1, color = "white")+
+    coord_polar("y", start = 0) +
+    theme_void()
+
+
+  return(print(fig))
+}
+
+
+#pr <- plumber::plumb("API.R")
+#pr$run(port = "3812")
diff --git a/README.md b/README.md
@@ -1,34 +1,34 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/components/HandingOrders.js b/components/HandingOrders.js
@@ -1,88 +1,88 @@
-import styled from "@emotion/styled";
-import useHandingOrdersService from "../hooks/useHandingOrdersService";
-
-const HandingOrders = function () {
-  //const {test} = test_grcp();
-  const { orders } = useHandingOrdersService();
-  const rows = orders.map(renderOrderRows);
-  return (
-    <OrdersTableWrapper className="cssHandingOrders">
-      <h2>Order</h2>
-      <OrdersTable>
-        <thead>
-          <tr>
-            <th>商品編號</th>
-            <th>商品名稱</th>
-            <th>商品數量</th>
-            <th>商品價錢</th>
-          </tr>
-        </thead>
-        <tbody>{rows}</tbody>
-      </OrdersTable>
-    </OrdersTableWrapper>
-  );
-};
-
-const renderOrderRows = function (order) {
-  return (
-    <tr>
-      <td>{order.no}</td>
-      <td>{order.name}</td>
-      <td>{order.quantity}</td>
-      <td>{order.price}</td>
-    </tr>
-  );
-};
-
-const OrdersTable = styled.table`
-  border-collapse: collapse;
-  width: 100%;
-
-  th {
-    font-family:微軟正黑體;
-    //border: black;
-    background-color: #EEEEEE;
-    color: #777777;
-
-  }
-
-  td:nth-of-type(1),
-  td:nth-of-type(3),
-  td:nth-of-type(4) {
-    width: 100px;
-    
-  }
-
-  th,
-  td {
-    text-align: left;
-    padding: 10px;
-  }
-
-  td:nth-of-type(3),
-  td:nth-of-type(4),
-  th:nth-of-type(3),
-  th:nth-of-type(4) {
-    text-align: right;
-  }
-
-  tbody,
-  td:not(:nth-of-type(0)) {
-    border-bottom: #cccccc 2px solid;
-    padding: 15px;
-  }
-`;
-
-const OrdersTableWrapper = styled.div`
-  width: 60%;
-  max-width: 800px;
-
-  padding: 25px;
-  border-radius: 7px;
-  box-shadow: #666666 0px 0px 6px;
-  background: #fff;
-  margin: 3% 0 0 3%;
-  text-align: left
-`;
-
-export default HandingOrders;
+import styled from "@emotion/styled";
+import useHandingOrdersService from "../hooks/useHandingOrdersService";
+
+const HandingOrders = function () {
+  //const {test} = test_grcp();
+  const { orders } = useHandingOrdersService();
+  const rows = orders.map(renderOrderRows);
+  return (
+    <OrdersTableWrapper className="cssHandingOrders">
+      <h2>Order</h2>
+      <OrdersTable>
+        <thead>
+          <tr>
+            <th>商品編號</th>
+            <th>商品名稱</th>
+            <th>商品數量</th>
+            <th>商品價錢</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </OrdersTable>
+    </OrdersTableWrapper>
+  );
+};
+
+const renderOrderRows = function (order) {
+  return (
+    <tr>
+      <td>{order.no}</td>
+      <td>{order.name}</td>
+      <td>{order.quantity}</td>
+      <td>{order.price}</td>
+    </tr>
+  );
+};
+
+const OrdersTable = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+
+  th {
+    font-family:微軟正黑體;
+    //border: black;
+    background-color: #EEEEEE;
+    color: #777777;
+
+  }
+
+  td:nth-of-type(1),
+  td:nth-of-type(3),
+  td:nth-of-type(4) {
+    width: 100px;
+    
+  }
+
+  th,
+  td {
+    text-align: left;
+    padding: 10px;
+  }
+
+  td:nth-of-type(3),
+  td:nth-of-type(4),
+  th:nth-of-type(3),
+  th:nth-of-type(4) {
+    text-align: right;
+  }
+
+  tbody,
+  td:not(:nth-of-type(0)) {
+    border-bottom: #cccccc 2px solid;
+    padding: 15px;
+  }
+`;
+
+const OrdersTableWrapper = styled.div`
+  width: 60%;
+  max-width: 800px;
+
+  padding: 25px;
+  border-radius: 7px;
+  box-shadow: #666666 0px 0px 6px;
+  background: #fff;
+  margin: 3% 0 0 3%;
+  text-align: left
+`;
+
+export default HandingOrders;
diff --git a/components/MainIncomes.js b/components/MainIncomes.js
@@ -1,34 +1,34 @@
-import styled from "@emotion/styled";
-import Image from "next/image";
-import Chart from "./chart";
-import 'chart.js/auto';
-import { Line, Pie } from "react-chartjs-2";
-
-const MainIncomes = function () {
-  return <MainIncomesPic></MainIncomesPic>;
-};
-
-const MainIncomesPic = function () {
-  const data = {
-    labels: ["Red", "Blue", "Yellow"],
-    datasets: [
-      {
-        data: [300, 50, 100],
-        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
-        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
-      },
-    ],
-  };
-
-
-  return (
-    <Chart>
-      <h2>pie chart</h2>
-      <Pie data={data} width={400} height={400} />
-    </Chart>
-  );
-};
-
-
-
-export default MainIncomes;
+import styled from "@emotion/styled";
+import Image from "next/image";
+import Chart from "./chart";
+import 'chart.js/auto';
+import { Line, Pie } from "react-chartjs-2";
+
+const MainIncomes = function () {
+  return <MainIncomesPic></MainIncomesPic>;
+};
+
+const MainIncomesPic = function () {
+  const data = {
+    labels: ["Red", "Blue", "Yellow"],
+    datasets: [
+      {
+        data: [300, 50, 100],
+        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
+        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
+      },
+    ],
+  };
+
+
+  return (
+    <Chart>
+      <h2>pie chart</h2>
+      <Pie data={data} width={400} height={400} />
+    </Chart>
+  );
+};
+
+
+
+export default MainIncomes;