[WIP] Clarifies 'Predictions' section, fixes #866

src/forms/output/Summary.js → src/forms/predictions/Summary.js

@@ -7,16 +7,11 @@ import {
   Button,
 } from 'semantic-ui-react';
 
-// DATA
-// Colors and text for parts of the chart
-import { BENEFIT_CHART_VALUES } from './BENEFIT_CHART_VALUES';
-
-// DATA MANIPULATION
-import { cloneDeep } from 'lodash';
-import { toMoneyStr } from '../../utils/prettifiers';
-
-// BENEFIT LOGIC
+// NON-COMPONENTS
 import { applyAndPushBenefits } from '../../benefits/applyAndPushBenefits';
+import { toMoneyStr } from '../../utils/prettifiers';
+import { benefitArrayDataToSingleData } from './build-resource-data';
+import { cloneDeep } from 'lodash';
 
 
 const EARNED_MONTHLY_INCREMENT_AMOUNT = 50;  // About a 25 cent raise in monthly amount for 40hrs/week?
@@ -50,105 +45,6 @@ let totalLastItemsOfArraysInObject = function (accumulated) {
   return total;
 };
 
-/** Returns values representing earned income and benefit
- *     amounts at the given index, as well as the sum of all
- *     those benefits and the sum of the earned income and
- *     those benefits.
- *
- * @param {array} keys Contains keys to use on `sourceObject`.
- * @param {object} sourceObject MUST CONTAIN `earned` property!
- *     Contains `earned` and benefit keys that each have an
- *     array of numerical values (which are meant to be money
- *     values right now).
- * @param {array} sourceObject.earned Earned income values.
- * @param {int} Which item in each array should be used to
- *      accumulate values.
- *
- * @example
- * // In BENEFIT_CHART_VALUES.js
- * let BENEFIT_CHART_VALUES = {
- *  benefit1: { name: "B1" },
- *  benefit2: { name: "B2" },
- * };
- * 
- * // In here
- * let keys = [
- *  'benefit1',
- *  'benefit2',
- * ];
- *
- * let accumulated = {
- *  earned:   [ 450, 500 ],
- *  benefit1: [ 80, 30 ],
- *  benefit2: [ 40, 10 ],
- * };
- * 
- * let index = 1;
- * 
- * var summaryData = fillInMoneyValues(keys, accumulated, index);
- * 
- * console.log(summaryData);
- * // {
- * //   earned: 500,
- * //   benefits: [
- * //     { label: "B1", amount: 30 },
- * //     { label: "B2", amount: 10 }
- * //   ],
- * //   benefitsTotal: 40,
- * //   total: 540,
- * // }
- * 
- * Unfortunately, stll relies on an outside value -
- *     BENEFIT_CHART_VALUES.
- * 
- * @typedef {object} benefit
- * @property {string} label Name to be displayed for the benefit
- * @property {number} amount Value of the benefit/subsidy
- *
- * @typedef {object} moneyValues
- * @property {number} earned Amount earned at a given index
- * @property {array.<benefit>} benefits
- * @property {number} benefitsTotal Sum of all benefit values at
- *     the given index
- * @property {number} total Sum of earned income and all benefits
- *     at the given index
- * 
- * @returns {object} moneyValues
- */
-let fillInMoneyValues = (keys, sourceObject, index) => {
-
-  if (!Array.isArray(sourceObject.earned)) {
-    throw new TypeError(`The given resources object requires an 'earned' property that is an array of numbers.`);
-  }
-
-  let moneyValues = {
-    earned:        0,
-    benefits:      [],  // [{ label, amount }]
-    benefitsTotal: 0,
-    total:         0,
-  };
-
-  // Item names can be `earned` or benefit keys
-  for (let itemKey of keys) {
-    let amount = sourceObject[ itemKey ][ index ];
-
-    if (itemKey === `earned`) {
-      moneyValues.earned = amount;
-    } else {
-      moneyValues.benefits.push({
-        label:  BENEFIT_CHART_VALUES[ itemKey ].name,
-        amount: amount,
-      });
-      // Add up all benefits (we're not including earned income)
-      moneyValues.benefitsTotal += amount;
-    }
-  }  // ends for every item key name
-
-  moneyValues.total = moneyValues.earned + moneyValues.benefitsTotal;
-
-  return moneyValues;
-};  // Ends fillInMoneyValues()
-
 
 /** Uses benefit data getter and reformats it to
  *     a format useful for identifying cliffs.
@@ -224,8 +120,8 @@ let getBenefitData = function(client, resourceKeys) {
 
   // 2. Get totals
   // Fill earned values for both current and future earned objects
-  result.current = fillInMoneyValues(resourceKeys, accumulated, 0);
-  result.future  = fillInMoneyValues(resourceKeys, accumulated, 1);
+  result.current = benefitArrayDataToSingleData(resourceKeys, accumulated, 0);
+  result.future  = benefitArrayDataToSingleData(resourceKeys, accumulated, 1);
   let resultCurr = result.current,
       resultFutr = result.future;
 
@@ -434,6 +330,5 @@ const Summary = function ({ client, openFeedback, translations }) {
 export {
   Summary,
   totalLastItemsOfArraysInObject,
-  fillInMoneyValues,
   getBenefitData,  
 };

src/forms/predictions/build-resource-data.js

@@ -0,0 +1,107 @@
+/** Functions used to rearrange resource data into useful formats
+ * @module
+ */
+
+import { BENEFIT_CHART_VALUES } from './BENEFIT_CHART_VALUES';
+
+/** Returns values representing earned income and benefit
+ *     amounts at the given index, as well as the sum of all
+ *     those benefits and the sum of the earned income and
+ *     those benefits.
+ *
+ * @param {array} keys Contains keys to use on `sourceObject`.
+ * @param {object} sourceObject MUST CONTAIN `earned` property!
+ *     Contains `earned` and benefit keys that each have an
+ *     array of numerical values (which are meant to be money
+ *     values right now).
+ * @param {array} sourceObject.earned Earned income values.
+ * @param {int} index Which item in each array should be used to
+ *      accumulate values.
+ *
+ * @example
+ * // In BENEFIT_CHART_VALUES.js
+ * let BENEFIT_CHART_VALUES = {
+ *  benefit1: { name: "B1" },
+ *  benefit2: { name: "B2" },
+ * };
+ * 
+ * // In here
+ * let keys = [
+ *  'benefit1',
+ *  'benefit2',
+ * ];
+ *
+ * let accumulated = {
+ *  earned:   [ 450, 500 ],
+ *  benefit1: [ 80, 30 ],
+ *  benefit2: [ 40, 10 ],
+ * };
+ * 
+ * let index = 1;
+ * 
+ * var summaryData = fillInMoneyValues(keys, accumulated, index);
+ * 
+ * console.log(summaryData);
+ * // {
+ * //   earned: 500,
+ * //   benefits: [
+ * //     { label: "B1", amount: 30 },
+ * //     { label: "B2", amount: 10 }
+ * //   ],
+ * //   benefitsTotal: 40,
+ * //   total: 540,
+ * // }
+ * 
+ * Unfortunately, stll relies on an outside value -
+ *     BENEFIT_CHART_VALUES.
+ * 
+ * @typedef {object} benefit
+ * @property {string} label Name to be displayed for the benefit
+ * @property {number} amount Value of the benefit/subsidy
+ *
+ * @typedef {object} moneyValues
+ * @property {number} earned Amount earned at a given index
+ * @property {array.<benefit>} benefits
+ * @property {number} benefitsTotal Sum of all benefit values at
+ *     the given index
+ * @property {number} total Sum of earned income and all benefits
+ *     at the given index
+ * 
+ * @returns {object} moneyValues
+ */
+let benefitArrayDataToSingleData = (keys, sourceObject, index) => {
+
+  if (!Array.isArray(sourceObject.earned)) {
+    throw new TypeError(`The given resources object requires an 'earned' property that is an array of numbers.`);
+  }
+
+  let moneyValues = {
+    earned:        0,
+    benefits:      [],  // [{ label, amount }]
+    benefitsTotal: 0,
+    total:         0,
+  };
+
+  // Item names can be `earned` or benefit keys
+  for (let itemKey of keys) {
+    let amount = sourceObject[ itemKey ][ index ];
+
+    if (itemKey === `earned`) {
+      moneyValues.earned = amount;
+    } else {
+      moneyValues.benefits.push({
+        label:  BENEFIT_CHART_VALUES[ itemKey ].name,
+        amount: amount,
+      });
+      // Add up all benefits (we're not including earned income)
+      moneyValues.benefitsTotal += amount;
+    }
+  }  // ends for every item key name
+
+  moneyValues.total = moneyValues.earned + moneyValues.benefitsTotal;
+
+  return moneyValues;
+};  // Ends benefitArrayDataToSingleData()
+
+
+export { benefitArrayDataToSingleData };

src/index.css

@@ -508,7 +508,6 @@ i.icon.details-icon {
 /* =============== */
 /* LAYOUT */
 /* =============== */
-/* Surrounder (general) */
 .question-spacer {
   display: block;
   height: 1em;
@@ -518,6 +517,7 @@ i.icon.details-icon {
   margin-bottom: 1em;
 }
 
+/* Surrounder (general) */
 .surrounder .horizontal,
 .surrounder .vertical {
   display: flex;
@@ -544,6 +544,10 @@ i.icon.details-icon {
   margin-bottom: 1em;
 }
 
+.show-on-yes .surrounder .center.horizontal {
+  align-items: center;
+}
+
 /* HomePage.js styles */
 
 #HomePage {

src/test/components/GraphTimeButtons.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import { GraphTimeButtons } from '../../forms/output/GraphTimeButtons';
+import { GraphTimeButtons } from '../../forms/predictions/GraphTimeButtons';
 
 describe('<GraphTimeButtons>', () => {
   it('renders Weekly, Monthly, and Yearly buttons', () => {

src/test/forms/output/BenefitsLines.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { cloneDeep, set } from 'lodash';
 
-import { BenefitsLines } from '../../../forms/output/BenefitsLines';
+import { BenefitsLines } from '../../../forms/predictions/BenefitsLines';
 import { CLIENT_DEFAULTS } from '../../../utils/CLIENT_DEFAULTS';
 
 // Skipping till highcharts testing is worked out

src/test/forms/output/BenefitsTable.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { cloneDeep, set } from 'lodash';
 
-import { BenefitsTable } from '../../../forms/output/BenefitsTable';
+import { BenefitsTable } from '../../../forms/predictions/BenefitsTable';
 import { translations } from '../../helpers';
 import { CLIENT_DEFAULTS } from '../../../utils/CLIENT_DEFAULTS';
 

src/test/forms/output/GraphHolder.test.js

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { cloneDeep, set } from 'lodash';
 
 import { CLIENT_DEFAULTS } from '../../../utils/CLIENT_DEFAULTS';
-import { GraphHolder } from '../../../forms/output/GraphHolder';
+import { GraphHolder } from '../../../forms/predictions/GraphHolder';
 
 const passedActivePrograms = (wrapper) => {
   return wrapper.find('Graph').prop('activePrograms');

src/test/forms/output/ResourcesColumns.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { cloneDeep, set } from 'lodash';
 
-import { ResourcesColumns } from '../../../forms/output/ResourcesColumns';
+import { ResourcesColumns } from '../../../forms/predictions/ResourcesColumns';
 import { CLIENT_DEFAULTS } from '../../../utils/CLIENT_DEFAULTS';
 
 // Skipping till highcharts testing is worked out

src/test/forms/output/StackedResources.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { cloneDeep, set } from 'lodash';
 
-import { StackedResources } from '../../../forms/output/StackedResources';
+import { StackedResources } from '../../../forms/predictions/StackedResources';
 import { CLIENT_DEFAULTS } from '../../../utils/CLIENT_DEFAULTS';
 
 // Skipping till highcharts testing is worked out

src/utils/CLIENT_DEFAULTS.js

@@ -28,7 +28,8 @@ const CLIENT_DEFAULTS = {
 
     // Income
     earned:                        0, // positive number (can have more than two decimal places)
-    TAFDC:                         0, // positive number
+    raise:                         0, // positive number (@todo doesn't really belong here, just in future)
+    TAFDC:                         0, // positive number 
     SSI:                           0, // positive number
     SSDI:                          0, // positive number
     childSupportIn:                0, // positive number