add reserved bankroll, data card changes,

- migrated the data cards to their own functions and added a custom tooltip
- added a descriptions.ts folder that can be used to include descriptions of data across the app
- added the ability to use reserved funds
- improved the undefined calls across the app
- added the ability to delete all data on reset.
- merged the config save / update buttons together so when saving config settings it automatically refreshes the data.

src/app/Components/Charts/DataCards/Card.tsx

@@ -1,15 +1,33 @@
 import React from 'react';
 
+import CardTooltip from './CustomToolTip';
+
 // import './Card.scss';
+// " is calculated by taking your total DCA Max Risk of 35,746 and dividing it by your current bankroll of 14,644." 
 
-const Card = ({title, metric}: {title: string, metric: number | string}) => {
+const Card = ({ title, metric, message }: { title: string, metric: number | string, message?: string }) => {
 
-    return (
+    const content = () => (
         <div className="dataCard boxData">
             <h2>{metric}</h2>
             <h4>{title}</h4>
         </div>
     )
+
+    if (message) {
+        return (<CardTooltip
+            title={
+                <React.Fragment>
+                    <strong>{title} </strong>{message}
+                </React.Fragment>
+            }
+        >
+            {content()}
+        </CardTooltip>)
+    } else {
+        return content()
+    }
+
 }
 
 export default Card;

src/app/Components/Charts/DataCards/CustomToolTip.ts

@@ -0,0 +1,18 @@
+// import React from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+// import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+// import Typography from '@material-ui/core/Typography';
+
+const CardTooltip = withStyles((theme) => ({
+    tooltip: {
+      backgroundColor: '#f5f5f9',
+      color: 'rgba(0, 0, 0, 0.87)',
+      maxWidth: 220,
+      fontSize: '.9em',
+      fontWeight: 300,
+      border: '1px solid #dadde9',
+    },
+  }))(Tooltip);
+
+export default CardTooltip

src/app/Components/Charts/DataCards/index.ts

@@ -0,0 +1,30 @@
+import Card_ActiveDeals from "./metrics/ActiveDeals";
+import Card_totalInDeals from "./metrics/TotalInDeals";
+import Card_MaxDca from "./metrics/MaxDca";
+import Card_TotalBankRoll from "./metrics/TotalBankRoll";
+import Card_TotalProfit from "./metrics/TotalProfit";
+import Card_EnabledBots from "./metrics/EnabledBots";
+import Card_DropCoverage from "./metrics/DropCoverage";
+import Card_MaxRiskPercent from "./metrics/MaxRiskPercent";
+import Card_TotalBoughtVolume from "./metrics/TotalBoughtVolume";
+import Card_TotalDeals from "./metrics/TotalDeals";
+import Card_TotalRoi from "./metrics/TotalRoi";
+import Card_AverageDailyProfit from "./metrics/AverageDailyProfit";
+import Card_AverageDealHours from "./metrics/AverageDealHours";
+
+
+export {
+    Card_ActiveDeals,
+    Card_totalInDeals,
+    Card_MaxDca,
+    Card_TotalBankRoll,
+    Card_TotalProfit,
+    Card_EnabledBots,
+    Card_DropCoverage,
+    Card_MaxRiskPercent,
+    Card_TotalBoughtVolume,
+    Card_TotalDeals,
+    Card_TotalRoi,
+    Card_AverageDailyProfit,
+    Card_AverageDealHours
+}

src/app/Components/Charts/DataCards/metrics/ActiveDeals.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the activeDealCount metric from the global data store.
+ */
+const Card_ActiveDeals = ({metric}:Type_Card) => {
+
+    const title = "Active Deals"
+    const message = descriptions.calculations.activeDeals
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={metric} />
+    )
+}
+
+export default Card_ActiveDeals;

src/app/Components/Charts/DataCards/metrics/AverageDailyProfit.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+import { parseNumber } from "@/utils/number_formatting"
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the averageDailyProfit metric from the global data store.
+ */
+const Card_AverageDailyProfit = ({metric}:Type_Card) => {
+
+    const title = "Average Daily Profit"
+    const message = descriptions.metrics.averageDailyProfit
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={parseNumber(metric)} />
+    )
+}
+
+export default Card_AverageDailyProfit;

src/app/Components/Charts/DataCards/metrics/AverageDealHours.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+import { parseNumber } from "@/utils/number_formatting"
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the averageDailyProfit metric from the global data store.
+ */
+const Card_AverageDealHours = ({metric}:Type_Card) => {
+
+    const title = "Avg. Deal Hours"
+    const message = descriptions.metrics.averageDealHours
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={metric.toFixed(2)} />
+    )
+}
+
+export default Card_AverageDealHours;

src/app/Components/Charts/DataCards/metrics/DropCoverage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the dropCoverage metric calculated locally.
+ */
+const Card_DropCoverage = ({metric}:Type_Card) => {
+
+    const title = "Drop Coverage %"
+    const message = descriptions.calculations.dropCoverage
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={metric.toFixed(2) + "%"} />
+    )
+}
+
+export default Card_DropCoverage;

src/app/Components/Charts/DataCards/metrics/EnabledBots.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the botCount metric. This is should be locally filtered and is the total number of enabled bots.
+ */
+const Card_EnabledBots = ({metric}:Type_Card) => {
+
+    const title = "Active Bots"
+    const message = descriptions.calculations.activeBots
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={metric} />
+    )
+}
+
+export default Card_EnabledBots;

src/app/Components/Charts/DataCards/metrics/MaxDca.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+import { parseNumber } from '@/utils/number_formatting'
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the `maxRisk` metric from the global data store.
+ */
+const Card_MaxDca = ({metric }:Type_Card) => {
+
+    const title = "Max DCA"
+    const message = descriptions.calculations.maxDca
+    const key = title.replace(/\s/g, '')
+
+    return (
+        <Card title={title} message={message} key={key} metric={parseNumber(metric)} />
+    )
+}
+
+export default Card_MaxDca;

src/app/Components/Charts/DataCards/metrics/MaxRiskPercent.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+
+
+interface Type_Card {
+    metric: number,
+    additionalData: { maxDCA:number , totalBankroll:number }
+}
+
+/**
+ * 
+ * @param metric - accepts the risk metric calculated locally.
+ * @param additionalData - accepts totalBankroll, maxDCA 
+ */
+const Card_MaxRiskPercent = ({metric, additionalData}:Type_Card) => {
+
+    const { totalBankroll, maxDCA } = additionalData;
+
+    const title = "Risk %"
+    const message = descriptions.calculations.risk(maxDCA, totalBankroll)
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={metric.toFixed(2) + "%"} />
+    )
+}
+
+export default Card_MaxRiskPercent;

src/app/Components/Charts/DataCards/metrics/TotalBankRoll.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+import { parseNumber } from '@/utils/number_formatting'
+
+interface Type_Card {
+    metric: number
+    additionalData: { position: number, totalBoughtVolume: number, reservedFundsTotal: number}
+}
+
+/**
+ * 
+ * @param metric - accepts the `totalBankroll` metric from the global data store.
+ * @param
+ */
+const Card_TotalBankRoll = ({metric, additionalData }:Type_Card) => {
+
+    const { position, totalBoughtVolume, reservedFundsTotal } = additionalData
+
+    const title = "Total bankroll"
+    const message = descriptions.calculations.totalBankRoll(position, totalBoughtVolume, reservedFundsTotal)
+    const key = title.replace(/\s/g, '')
+
+    return (
+        <Card title={title} message={message} key={key} metric={parseNumber(metric)} />
+    )
+}
+
+export default Card_TotalBankRoll;

src/app/Components/Charts/DataCards/metrics/TotalBoughtVolume.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+import { parseNumber } from "@/utils/number_formatting"
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the boughtVolume metric from the global data store.
+ */
+const Card_TotalBoughtVolume = ({metric}:Type_Card) => {
+
+    const title = "Total Bought Volume"
+    const message = descriptions.metrics.totalBoughtVolume
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={parseNumber(metric)} />
+    )
+}
+
+export default Card_TotalBoughtVolume;

src/app/Components/Charts/DataCards/metrics/TotalDeals.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import Card from "../Card";
+import descriptions from "@/descriptions";
+
+
+interface Type_Card {
+    metric: number
+}
+
+/**
+ * 
+ * @param metric - accepts the totalDeals metric from the global data store.
+ */
+const Card_TotalDeals = ({metric}:Type_Card) => {
+
+    const title = "Total Deals"
+    const message = descriptions.metrics.totalDeals
+    const key = title.replace(/\s/g, '')
+    return (
+        <Card title={title} message={message} key={key} metric={metric} />
+    )
+}
+
+export default Card_TotalDeals;