UI Updates added

Author: AbhijeetNandvikar

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackstrap/blink-npm",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "This repo contains the code for blink npm pakage",
   "author": "AbhijeetNandvikar",
   "license": "MIT",
@@ -65,6 +65,7 @@
     "dist"
   ],
   "dependencies": {
+    "@agney/react-loading": "^0.1.2",
     "@uiw/react-md-editor": "^3.4.2",
     "axios": "^0.21.1",
     "chart.js": "^3.3.2",

package.json

@@ -0,0 +1,53 @@
+::-webkit-scrollbar {
+  margin-top: 4px;
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(187, 187, 187);
+  outline: none;
+}
+
+.editableInput {
+  border: none;
+  font-size: medium;
+  color: rgb(49, 49, 49);
+  outline: none;
+  display: flex;
+  /* height: 3rem; */
+  position: relative;
+  /* padding-left: 12px; */
+  background-color: transparent;
+  width: 100%;
+}
+
+.MuiList-root {
+  max-height: 300px;
+}
+
+/* .ql-container {
+    min-height: 500px;
+  }
+  .ql-editor {
+    min-height: 500px;
+  }
+  
+  .ql-toolbar {
+    border-radius: 4px 4px 0px 0px;
+  }
+  
+  .ql-container {
+    border-radius: 0px 0px 4px 4px;
+  } */
+
+/* 
+  .editableInput:focus {
+    border: 1px solid rgb(8, 160, 8);
+    background-color: rgba(59, 255, 59, 0.26);
+  } */

src/App.css

@@ -41,7 +41,7 @@ import PieChartIcon from '@material-ui/icons/PieChart'
 import StartupScreen from './Components/StartupScreen/StartupScreen'
 import InvestorScreen from './Components/InvestorScreen/InvestorScreen'
 import { Button, Container, Hidden } from '@material-ui/core'
-
+import './App.css'
 const drawerWidth = 240
 
 const useStyles = makeStyles((theme: Theme) =>

src/App.tsx

@@ -4,6 +4,7 @@ import { Chart, registerables } from "chart.js";
 import { saveAs } from "file-saver";
 import { toSvg, toPng } from "html-to-image";
 import annotationPlugin from "chartjs-plugin-annotation";
+import { Bars } from "@agney/react-loading";
 
 import {
   Typography,
@@ -14,6 +15,7 @@ import {
   useTheme,
   FormControlLabel,
   Switch,
+  CircularProgress,
 } from "@material-ui/core";
 import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined";
 import { DateRange } from "react-date-range";
@@ -23,6 +25,8 @@ import { ContactsTwoTone } from "@material-ui/icons";
 import CloudUploadOutlinedIcon from "@material-ui/icons/CloudUploadOutlined";
 import { updateCollection } from "../fetch";
 import { ChartCard } from "../InvestorScreen/Dashboard/ValuationPage";
+import { KeyDownIcon } from "../StartupScreen/TablesView/NotesPage/NotesComponent/NotesComponent";
+// import ChartPlaceholder from "../ChartPlaceholder";
 
 Chart.register(annotationPlugin);
 
@@ -90,6 +94,13 @@ const useStyles = makeStyles((theme) => {
       display: "flex",
       alignItems: "center",
     },
+    dropDownBtn: {
+      display: "flex",
+      "&:focus": {
+        border: "1px solid #0066eb",
+        boxShadow: "0 0 1.5pt 1.5pt #78b3ff78",
+      },
+    },
   };
 });
 
@@ -142,7 +153,7 @@ const ChartComponent = ({
     let years = [];
     for (
       let i = new Date().getFullYear();
-      i > parseInt(currentYear) - 200;
+      i > parseInt(currentYear) - 100;
       i--
     ) {
       years = [...years, i.toString()];
@@ -182,7 +193,14 @@ const ChartComponent = ({
 
   return (
     <div className={classes.chartContainer}>
-      <div ref={thisContainer}>
+      <div
+        ref={thisContainer}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+        }}
+      >
         <div className={styles.infoContainer}>
           <div className={classes.title}>
             <Typography variant="h4">{title}</Typography>
@@ -193,8 +211,10 @@ const ChartComponent = ({
                 setShowYearConfig(!showYearConfig);
               }}
               variant="outlined"
+              className={classes.dropDownBtn}
             >
-              <Typography variant="body2">{currentYear}</Typography>
+              <Typography variant="body2">{currentYear}</Typography>{" "}
+              <KeyDownIcon />
             </Button>
             {showYearConfig ? (
               <div
@@ -304,7 +324,30 @@ const ChartComponent = ({
             <canvas className={classes.canvas} ref={thisGraph}></canvas>
           </div>
         ) : (
-          <Typography variant="h3">No Data Avaliable for this year</Typography>
+          <div
+            style={{
+              flexGrow: 1,
+              justifyContent: "center",
+              alignItems: "center",
+              display: "flex",
+            }}
+          >
+            <div>
+              <div style={{ maxWidth: "50px", margin: "auto", color: "gray" }}>
+                <Bars />
+              </div>
+              <Typography
+                variant="h4"
+                style={{
+                  textAlign: "center",
+                  marginTop: "1.5rem",
+                  color: "gray",
+                }}
+              >
+                Your Analytics is building
+              </Typography>
+            </div>
+          </div>
         )}
       </div>
       {chartControl ? (

src/Components/ChartsComponents/ChartComponent.jsx

@@ -9,16 +9,37 @@ Chart.register(...registerables);
 
 Chart.register(annotationPlugin);
 
-const ChartWrapper = ({ type, data, options }) => {
+const ChartWrapper = ({ type, data, options, gradient, backgroundColor }) => {
   const thisGraph = useRef(null);
 
   const renderChart = (ref) => {
-    if (ref.current !== null && data && options) {
-      return new Chart(ref.current, {
-        type,
-        data,
-        options,
-      });
+    if (ref.current !== null && options && data) {
+      if (gradient) {
+        const ctx = thisGraph.current.getContext("2d");
+        const gradient = ctx.createLinearGradient(0, 120, 0, 0);
+        gradient.addColorStop(1, backgroundColor + "bb");
+        gradient.addColorStop(0, backgroundColor + "00");
+        return new Chart(thisGraph.current, {
+          type,
+          data,
+          options: {
+            ...options,
+            backgroundColor: gradient,
+            maintainAspectRatio: false,
+            responsive: true,
+          },
+        });
+      } else {
+        return new Chart(thisGraph.current, {
+          type,
+          data,
+          options: {
+            ...options,
+            maintainAspectRatio: false,
+            responsive: true,
+          },
+        });
+      }
     }
   };
 
@@ -30,7 +51,7 @@ const ChartWrapper = ({ type, data, options }) => {
   }, []);
 
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       <canvas ref={thisGraph}></canvas>
     </div>
   );

src/Components/ChartsComponents/ChartWrapper.jsx

@@ -12,12 +12,16 @@ import {
   useTheme,
   FormControlLabel,
   Switch,
+  CircularProgress,
 } from "@material-ui/core";
 import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined";
 import { DateRange } from "react-date-range";
 import { globalContext } from "../../../AppContext";
 import CloudUploadOutlinedIcon from "@material-ui/icons/CloudUploadOutlined";
 import axios from "axios";
+import { KeyDownIcon } from "../../StartupScreen/TablesView/NotesPage/NotesComponent/NotesComponent";
+import { Bars } from "@agney/react-loading";
+// import ChartPlaceholder from "../../ChartPlaceholder";
 Chart.register(...registerables);
 
 const useStyles = makeStyles((theme) => {
@@ -79,6 +83,13 @@ const useStyles = makeStyles((theme) => {
       display: "flex",
       alignItems: "center",
     },
+    dropDownBtn: {
+      display: "flex",
+      "&:focus": {
+        border: "1px solid #0066eb",
+        boxShadow: "0 0 1.5pt 1.5pt #78b3ff78",
+      },
+    },
   };
 });
 const LineChartComponent = ({
@@ -143,7 +154,7 @@ const LineChartComponent = ({
     let years = [];
     for (
       let i = new Date().getFullYear();
-      i > parseInt(currentYear) - 200;
+      i > parseInt(currentYear) - 100;
       i--
     ) {
       years = [...years, i.toString()];
@@ -175,8 +186,10 @@ const LineChartComponent = ({
               setShowDatePicker(!showDatePicker);
             }}
             variant="outlined"
+            classes={classes.dropDownBtn}
           >
             <Typography variant="body2">{currentYear}</Typography>
+            <KeyDownIcon />
           </Button>
           {showDatePicker ? (
             <div
@@ -258,7 +271,30 @@ const LineChartComponent = ({
           <canvas className={classes.canvas} ref={thisGraph}></canvas>
         </div>
       ) : (
-        <Typography variant="h3">No Data Avaliable for this year</Typography>
+        <div
+          style={{
+            flexGrow: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            display: "flex",
+          }}
+        >
+          <div>
+            <div style={{ maxWidth: "50px", margin: "auto", color: "gray" }}>
+              <Bars />
+            </div>
+            <Typography
+              variant="h4"
+              style={{
+                textAlign: "center",
+                marginTop: "1.5rem",
+                color: "gray",
+              }}
+            >
+              Your Analytics is building
+            </Typography>
+          </div>
+        </div>
       )}
       {chartControl ? (
         <div className={classes.toggleContainer}>

src/Components/ChartsComponents/LineChart/LineChart.jsx

@@ -35,7 +35,7 @@
 
 .columnConfigBox {
   display: flex;
-  width: 141px;
+  min-width: 100px;
   flex-direction: column;
   align-items: flex-start;
   padding: 15px;
@@ -44,6 +44,7 @@
   position: absolute;
   z-index: 20;
   background-color: white;
-  max-height: 400px;
+  max-height: 150px;
   overflow-y: auto;
+  cursor: pointer;
 }

src/Components/ChartsComponents/LineChart/index.module.css

@@ -27,10 +27,9 @@
   width: 100%;
   margin-top: 2rem;
 }
-
 .columnConfigBox {
   display: flex;
-  width: 141px;
+  /* min-width: 100px; */
   flex-direction: column;
   align-items: flex-start;
   padding: 15px;
@@ -39,6 +38,7 @@
   position: absolute;
   z-index: 20;
   background-color: white;
-  max-height: 400px;
+  max-height: 150px;
   overflow-y: auto;
+  cursor: pointer;
 }

src/Components/ChartsComponents/index.module.css

@@ -147,7 +147,7 @@ const CustomerChurnRate = (props) => {
   }, [currentYear, props]);
 
   return (
-    <div>
+    <div style={{ height: "100%" }}>
       <LineChartComponent
         title="Customer Churn Rate (%)"
         description="Customer churn is the percentage of customers that stopped using your company's product or service during a certain time frame."