Switch to TS

package.json

@@ -11,9 +11,13 @@
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/d3-scale": "^2.1.1",
+    "@types/d3-scale-chromatic": "^1.3.1",
     "@types/material-ui": "^0.21.7",
+    "@types/moment": "^2.13.0",
     "@types/react": "^16.9.4",
     "@types/react-dom": "^16.9.1",
+    "@types/recharts": "^1.1.21",
     "airbnb-prop-types": "^2.8.1",
     "babel-eslint": "^7.2.1",
     "babel-loader": "^8.0.6",
@@ -23,6 +27,7 @@
     "css-loader": "^0.28.0",
     "css-modules-typescript-loader": "^3.0.1",
     "d3-scale": "^1.0.6",
+    "d3-scale-chromatic": "^1.5.0",
     "eslint": "^4.10.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-import-resolver-webpack": "^0.8.3",
@@ -43,7 +48,7 @@
     "html-webpack-plugin": "^3.2.0",
     "immutability-helper": "^2.1.2",
     "material-ui": "^0.19.4",
-    "moment": "^2.19.2",
+    "moment": "^2.24.0",
     "node-sass": "^4.5.2",
     "normalize.css": "^7.0.0",
     "prop-types": "^15.5.8",

tsconfig.json

@@ -8,6 +8,6 @@
         "strictNullChecks": true,
         "target": "es6",
         "jsx": "react",
-        "lib": ["es2017"]
+        "lib": ["es2017", "dom"]
     }
 }

web/src/components/Budgetron/index.tsx

@@ -0,0 +1,172 @@
+import Cashflow from "components/Cashflow";
+import Categories from "components/Categories";
+import * as React from "react";
+import RollingBudget from "components/RollingBudget";
+import ByTimeframe from "components/ByTimeframe";
+import IncomeExpenseRatio from "components/IncomeExpenseRatio";
+import { Report, TimedReportData, Transaction } from "util/data";
+import Chip from "material-ui/Chip";
+
+import Page from "components/Page";
+
+import * as style from "./style.scss";
+
+const componentConfig = (
+  type: "RollingBudget" | "Cashflow" | "Categories" | "IncomeExpenseRatio"
+) => {
+  const config: {
+    Component: string | React.ComponentType<any>;
+    count: number;
+  } = {
+    Component: "div",
+    count: 1
+  };
+  if (type === "RollingBudget") {
+    config.Component = RollingBudget;
+  } else if (type === "Cashflow") {
+    config.Component = Cashflow;
+    config.count = 4;
+  } else if (type === "Categories") {
+    config.Component = Categories;
+  } else if (type === "IncomeExpenseRatio") {
+    config.Component = IncomeExpenseRatio;
+    config.count = 100;
+  }
+
+  return config;
+};
+
+type TimeframeReportsProps = {
+  data: Array<Report>;
+  timeframe: "Year" | "Quarter" | "Month";
+  transactions: Map<string, Transaction>;
+  display: boolean;
+};
+
+const TimeframeReports = (props: TimeframeReportsProps) => {
+  if (props.display) {
+    return (
+      <>
+        {props.data.map(({ data, report, key }) => {
+          if (data instanceof TimedReportData) {
+            const dataByTimeframe = data.by(props.timeframe);
+            if (dataByTimeframe) {
+              return (
+                <ByTimeframe
+                  key={key}
+                  title={report.name}
+                  timeframe={props.timeframe}
+                  transactions={props.transactions}
+                  report={report}
+                  data={dataByTimeframe}
+                  className={style.report}
+                  {...componentConfig(report.config.type)}
+                />
+              );
+            }
+          }
+          return null;
+        })}
+      </>
+    );
+  }
+  return null;
+};
+
+type SimpleReportsProps = {
+  data: Array<Report>;
+};
+
+const SimpleReports = (props: SimpleReportsProps) => (
+  <>
+    {props.data.map(({ data, report, key }) => {
+      if (data instanceof TimedReportData) return null;
+      const cfg = componentConfig(report.config.type);
+      return (
+        <Page key={key} className={style.report} title={report.name}>
+          <cfg.Component
+            {...props}
+            count={cfg.count}
+            data={data}
+            report={report}
+          />
+        </Page>
+      );
+    })}
+  </>
+);
+
+type BudgetronProps = {
+  data: Array<Report>;
+  transactions: Map<string, Transaction>;
+};
+
+type BudgetronState = {
+  month: boolean;
+  quarter: boolean;
+  year: boolean;
+};
+
+class Budgetron extends React.Component<BudgetronProps, BudgetronState> {
+  constructor(props: BudgetronProps) {
+    super(props);
+
+    this.state = {
+      month: false,
+      quarter: false,
+      year: false
+    };
+  }
+
+  getChip(period: "month" | "quarter" | "year", description: string) {
+    let bg = undefined;
+    if (this.state[period]) {
+      bg = "#00FF00";
+    }
+    return (
+      <Chip backgroundColor={bg} onClick={() => this.toggle(period)}>
+        {description}
+      </Chip>
+    );
+  }
+
+  toggle(period: "month" | "quarter" | "year") {
+    const newState: Pick<BudgetronState, typeof period> = {
+      month: this.state.month,
+      quarter: this.state.quarter,
+      year: this.state.year
+    };
+    newState[period] = !newState[period];
+    this.setState(newState);
+  }
+
+  render() {
+    return (
+      <div className={style.mainContent}>
+        <div className={style.chipBag}>
+          {this.getChip("month", "By Month")}
+          {this.getChip("quarter", "By Quarter")}
+          {this.getChip("year", "By Year")}
+        </div>
+        <SimpleReports {...this.props} />
+        <TimeframeReports
+          display={this.state.month}
+          timeframe="Month"
+          {...this.props}
+        />
+        <TimeframeReports
+          display={this.state.quarter}
+          timeframe="Quarter"
+          {...this.props}
+        />
+        <TimeframeReports
+          display={this.state.year}
+          timeframe="Year"
+          {...this.props}
+        />
+      </div>
+    );
+  }
+}
+
+export default Budgetron;