IO-306 Further development of dashboard.

2021-06-14 19:37:17 -07:00
parent db76992c70
commit a42da5b6da
15 changed files with 786 additions and 106 deletions
--- a/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx
+++ b/client/src/components/dashboard-components/monthly-labor-sales/monthly-labor-sales.component.jsx
@@ -0,0 +1,148 @@
+import { Card } from "antd";
+import Dinero from "dinero.js";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardMonthlyLaborSales({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [activeIndex, setActiveIndex] = useState(0);
+  if (!data) return null;
+  if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
+
+  const laborData = {};
+
+  data.monthly_sales.forEach((job) => {
+    job.joblines.forEach((jobline) => {
+      if (!jobline.mod_lbr_ty) return;
+      if (!laborData[jobline.mod_lbr_ty])
+        laborData[jobline.mod_lbr_ty] = Dinero();
+      laborData[jobline.mod_lbr_ty] = laborData[jobline.mod_lbr_ty].add(
+        Dinero({
+          amount: Math.round(
+            (job[`rate_${jobline.mod_lbr_ty.toLowerCase()}`] || 0) * 100
+          ),
+        }).multiply(jobline.mod_lb_hrs || 0)
+      );
+    });
+  });
+
+  const chartData = Object.keys(laborData).map((key) => {
+    return {
+      name: t(`joblines.fields.lbr_types.${key.toUpperCase()}`),
+      value: laborData[key].getAmount() / 100,
+      // color: pieColor(i.status),
+    };
+  });
+  console.log(
+    "🚀  ~ file: monthly-parts-sales.component.jsx  ~ line 34  ~ chartData",
+    chartData
+  );
+
+  return (
+    <Card title={t("dashboard.titles.monthlylaborsales")} {...cardProps}>
+      <div style={{ height: "100%" }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart margin={0} padding={0}>
+            <Pie
+              data={chartData}
+              activeIndex={activeIndex}
+              activeShape={renderActiveShape}
+              cx="50%"
+              cy="50%"
+              innerRadius="60%"
+              //  outerRadius={80}
+              fill="#8884d8"
+              dataKey="value"
+              onMouseEnter={(throwaway, index) => setActiveIndex(index)}
+            >
+              {chartData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color} />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardMonthlyRevenueGraphGql = `
+
+`;
+
+const renderActiveShape = (props) => {
+  const RADIAN = Math.PI / 180;
+  const {
+    cx,
+    cy,
+    midAngle,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill,
+    payload,
+    percent,
+    value,
+  } = props;
+  const sin = Math.sin(-RADIAN * midAngle);
+  const cos = Math.cos(-RADIAN * midAngle);
+  const sx = cx + (outerRadius + 10) * cos;
+  const sy = cy + (outerRadius + 10) * sin;
+  const mx = cx + (outerRadius + 30) * cos;
+  const my = cy + (outerRadius + 30) * sin;
+  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+  const ey = my;
+  const textAnchor = cos >= 0 ? "start" : "end";
+
+  return (
+    <g>
+      <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
+        {payload.name}
+      </text>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        innerRadius={outerRadius + 6}
+        outerRadius={outerRadius + 10}
+        fill={fill}
+      />
+      <path
+        d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`}
+        stroke={fill}
+        fill="none"
+      />
+
+      <text
+        x={ex + (cos >= 0 ? 1 : -1) * 12}
+        y={ey}
+        textAnchor={textAnchor}
+        fill="#333"
+      >
+        {payload.name}
+      </text>
+      <text
+        x={ex + (cos >= 0 ? 1 : -1) * 12}
+        y={ey}
+        dy={18}
+        textAnchor={textAnchor}
+        fill="#999"
+      >
+        {Dinero({ amount: Math.round(value * 100) }).toFormat()}
+      </text>
+    </g>
+  );
+};