diff --git a/src/forms/output/BenefitsLines.js b/src/forms/output/BenefitsLines.js index 68f654d4..3333348d 100644 --- a/src/forms/output/BenefitsLines.js +++ b/src/forms/output/BenefitsLines.js @@ -81,21 +81,21 @@ class BenefitsLinesComp extends Component { classes += ` ` + className; } - const multiplier = multipliers[ timescale ], - resources = activePrograms, - currentEarned = client.current.earned * multiplier, - getText = textFromTranslatedElement; + let multiplier = multipliers[ timescale ], + resources = activePrograms, + currentEarned = client.current.earned * multiplier, + getText = textFromTranslatedElement; // Adjust to time-interval. Highcharts will round // for displayed ticks. - const max = (limits.max * multiplier), - interval = ((max / 100) / 10); + let max = (limits.max * multiplier), + interval = ((max / 100) / 10); - const xRange = range(limits.min, max, interval), // x-axis/earned income numbers - datasets = getChartData(xRange, multiplier, client, resources, {}); + let xRange = range(limits.min, max, interval), // x-axis/earned income numbers + datasets = getChartData(xRange, multiplier, client, resources, {}); // Individual benefit lines - const lines = []; + let lines = []; for (let dataset of datasets) { let line = ( ${getText(translations.i_beforeMoney)}`, - labelHeaderFormatEnd = `{point.key:,.2f}${getText(translations.i_afterMoney)}
`, - labelHeaderFormat = labelHeaderFormatStart + labelHeaderFormatEnd; + let labelHeaderFormatStart = `${getText(translations.i_beforeMoney)}`, + labelHeaderFormatEnd = `{point.key:,.2f}${getText(translations.i_afterMoney)}
`, + labelHeaderFormat = labelHeaderFormatStart + labelHeaderFormatEnd; - const plotOptions = { line: { pointInterval: interval }}; + let plotOptions = { line: { pointInterval: interval }}; return (
@@ -265,10 +265,10 @@ class BenefitsLinesComp extends Component { this.setState({ altKeyClass: `` }); } }; -}; +}; // Ends -const BenefitsLines = withHighcharts(BenefitsLinesComp, Highcharts); +let BenefitsLines = withHighcharts(BenefitsLinesComp, Highcharts); export { BenefitsLines }; diff --git a/src/forms/output/BenefitsTable.js b/src/forms/output/BenefitsTable.js index eb2e81a6..c9052400 100644 --- a/src/forms/output/BenefitsTable.js +++ b/src/forms/output/BenefitsTable.js @@ -9,15 +9,14 @@ import { applyAndPushBenefits } from '../../programs/applyAndPushBenefits'; import { cloneDeep } from 'lodash'; +// @todo Move to utils file somewhere? const getSignSymbol = function (num) { if (num > 0) { - return '+'; - } - else if (num < 0) { - return '-'; - } - else { return ''; } -}; // End getSignSymbol() + return `+`; + } else if (num < 0) { + return `-`; + } else { return ``; } +}; const BenefitsTable = function ({ client, translations }) { @@ -49,77 +48,75 @@ const BenefitsTable = function ({ client, translations }) { }; applyAndPushBenefits (futureCalcData); - const earned = allData.earned; + let earned = allData.earned; - const currentBenefits = {}; - const futureBenefits = {}; - const benefitDiffs = {}; - let totalDiff = 0; - let totalBenefitCurrent = 0; - let totalBenefitFuture = 0; + let currentBenefits = {}, + futureBenefits = {}, + benefitDiffs = {}, + totalDiff = 0, + totalBenefitCurrent = 0, + totalBenefitFuture = 0; for (let benefitIndex = 0; benefitIndex < curr.benefits.length; benefitIndex++) { - const benefit = curr.benefits[ benefitIndex ]; - - const benefitData = allData[ benefit ]; + + let benefit = curr.benefits[ benefitIndex ], + benefitData = allData[ benefit ]; if (benefitData) { - const [ + let [ currentBenefit, futureBenefit, ] = benefitData; currentBenefits[ benefit ] = Math.round(currentBenefit); - - futureBenefits[ benefit ] = Math.round(futureBenefit); + futureBenefits[ benefit ] = Math.round(futureBenefit); totalBenefitCurrent += currentBenefits[ benefit ]; - totalBenefitFuture += futureBenefits[ benefit ]; - } - else { + totalBenefitFuture += futureBenefits[ benefit ]; + } else { currentBenefits[ benefit ] = 0; - - futureBenefits[ benefit ] = 0; + futureBenefits[ benefit ] = 0; } benefitDiffs[ benefit ] = futureBenefits[ benefit ] - currentBenefits[ benefit ]; totalDiff += benefitDiffs[ benefit ]; } - const earnedCurrent = Math.round(earned[ 0 ]), - earnedFuture = Math.round(earned[ 1 ]), - earnedDiff = earnedFuture - earnedCurrent, - netCurrent = totalBenefitCurrent + earnedCurrent, - netFuture = totalBenefitFuture + earnedFuture, - netDiff = totalDiff + earnedDiff; - - const columnHeaderStyle = { - background: 'rgba(0, 181, 173, 1)', - color: 'white', - fontSize: '1.3em', - fontWeight: 900, - textAlign: 'center', - borderRadius: 'inherit', - letterSpacing: '0.02em', - }, - totalsRowStyle = { - borderTop: '2px solid rgba(0, 181, 173, 1)', - fontWeight: 700, - fontSize: '1.1em', - padingTop: '0.25em', - }, - rowHeaderStyle = { - fontSize: '1.1em', - fontWeight: 700, - textAlign: 'left', - }, - totalsRowHeaderStyle = { - fontSize: '1.2em', - fontWeight: 700, - textAlign: 'left', - borderTop: '2px solid rgba(0, 181, 173, 1)', - padingTop: '0.25em', - }; + let earnedCurrent = Math.round(earned[ 0 ]), + earnedFuture = Math.round(earned[ 1 ]), + earnedDiff = earnedFuture - earnedCurrent, + netCurrent = totalBenefitCurrent + earnedCurrent, + netFuture = totalBenefitFuture + earnedFuture, + netDiff = totalDiff + earnedDiff; + + // @todo Possible to break the following components out? + let columnHeaderStyle = { + background: `rgba(0, 181, 173, 1)`, + color: `white`, + fontSize: `1.3em`, + fontWeight: 900, + textAlign: `center`, + borderRadius: `inherit`, + letterSpacing: `0.02em`, + }, + totalsRowStyle = { + borderTop: `2px solid rgba(0, 181, 173, 1)`, + fontWeight: 700, + fontSize: `1.1em`, + padingTop: `0.25em`, + }, + rowHeaderStyle = { + fontSize: `1.1em`, + fontWeight: 700, + textAlign: `left`, + }, + totalsRowHeaderStyle = { + fontSize: `1.2em`, + fontWeight: 700, + textAlign: `left`, + borderTop: `2px solid rgba(0, 181, 173, 1)`, + padingTop: `0.25em`, + }; const TotalBenefitsRow = function({ client, translations }){ if (client.current.benefits.length <= 1) { @@ -129,24 +126,28 @@ const BenefitsTable = function ({ client, translations }) { return ( { translations.i_rowTotalBenefits } + textAlign = { `right` } + width = { 3 } + style = { totalsRowHeaderStyle }> + { translations.i_rowTotalBenefits } { translations.i_beforeMoneyWithTime }{totalBenefitCurrent}{ translations.i_afterMoneyWithTime } + textAlign = { `right` } + width = { 3 } + style = { totalsRowStyle }> + { translations.i_beforeMoneyWithTime }{totalBenefitCurrent}{ translations.i_afterMoneyWithTime } { translations.i_beforeMoneyWithTime }{totalBenefitFuture}{ translations.i_afterMoneyWithTime } + textAlign = { `right` } + width = { 3 } + style = { totalsRowStyle }> + { translations.i_beforeMoneyWithTime }{totalBenefitFuture}{ translations.i_afterMoneyWithTime } { getSignSymbol(totalDiff) } { translations.i_beforeMoneyWithTime }{ Math.abs(totalDiff) }{ translations.i_afterMoneyWithTime } + textAlign = { `right` } + width = { 3 } + style = { totalsRowStyle }> + { getSignSymbol(totalDiff) } { translations.i_beforeMoneyWithTime }{ Math.abs(totalDiff) }{ translations.i_afterMoneyWithTime } ); @@ -156,35 +157,39 @@ const BenefitsTable = function ({ client, translations }) { return ( { translations.i_rowEarned } - { translations.i_beforeMoneyWithTime }{earnedCurrent}{ translations.i_afterMoneyWithTime } - { translations.i_beforeMoneyWithTime }{earnedFuture}{ translations.i_afterMoneyWithTime } - { getSignSymbol(earnedDiff) } { translations.i_beforeMoneyWithTime }{ Math.abs(earnedDiff) }{ translations.i_afterMoneyWithTime } + { translations.i_beforeMoneyWithTime }{earnedCurrent}{ translations.i_afterMoneyWithTime } + { translations.i_beforeMoneyWithTime }{earnedFuture}{ translations.i_afterMoneyWithTime } + { getSignSymbol(earnedDiff) } { translations.i_beforeMoneyWithTime }{ Math.abs(earnedDiff) }{ translations.i_afterMoneyWithTime } ); }; const TotalsRow = function ({ translations }) { return ( - + { translations.i_rowNetTotal } + textAlign = { `right` } + width = { 3 } + style = { totalsRowHeaderStyle }> + { translations.i_rowNetTotal } { translations.i_beforeMoneyWithTime }{netCurrent}{ translations.i_afterMoneyWithTime } + textAlign = { `right` } + width = { 3 } + style = { totalsRowStyle }> + { translations.i_beforeMoneyWithTime }{netCurrent}{ translations.i_afterMoneyWithTime } { translations.i_beforeMoneyWithTime }{netFuture}{ translations.i_afterMoneyWithTime } + textAlign = { `right` } + width = { 3 } + style = { totalsRowStyle }> + { translations.i_beforeMoneyWithTime }{netFuture}{ translations.i_afterMoneyWithTime } { getSignSymbol(netDiff) } { translations.i_beforeMoneyWithTime }{ Math.abs(netDiff) }{ translations.i_afterMoneyWithTime } + textAlign = { `right` } + width = { 3 } + style = { totalsRowStyle }> + { getSignSymbol(netDiff) } { translations.i_beforeMoneyWithTime }{ Math.abs(netDiff) }{ translations.i_afterMoneyWithTime } ); @@ -193,59 +198,60 @@ const BenefitsTable = function ({ client, translations }) { const benefitRows = []; for (let benefitIndex = 0; benefitIndex < curr.benefits.length; benefitIndex++) { - const benefit = curr.benefits[ benefitIndex ]; - - const diff = benefitDiffs[ benefit ]; - - const label = translations[ `i_row_${benefit}` ]; + let benefit = curr.benefits[ benefitIndex ], + diff = benefitDiffs[ benefit ], + label = translations[ `i_row_${benefit}` ]; benefitRows.push( { label } - { translations.i_beforeMoneyWithTime }{currentBenefits[ benefit ]}{ translations.i_afterMoneyWithTime } - { translations.i_beforeMoneyWithTime }{futureBenefits[ benefit ]}{ translations.i_afterMoneyWithTime } - { getSignSymbol(diff) } { translations.i_beforeMoneyWithTime }{ Math.abs(diff) }{ translations.i_afterMoneyWithTime } + { translations.i_beforeMoneyWithTime }{currentBenefits[ benefit ]}{ translations.i_afterMoneyWithTime } + { translations.i_beforeMoneyWithTime }{futureBenefits[ benefit ]}{ translations.i_afterMoneyWithTime } + { getSignSymbol(diff) } { translations.i_beforeMoneyWithTime }{ Math.abs(diff) }{ translations.i_afterMoneyWithTime } ); } return ( -
- - - - { translations.i_columnBenefit } - - { translations.i_columnCurrentBenefits } - - { translations.i_columnNewEstimate } - - { translations.i_columnDifference } - - - - - {benefitRows} - - - - -
-
+ + + + + { translations.i_columnBenefit } + + + { translations.i_columnCurrentBenefits } + + + { translations.i_columnNewEstimate } + + + { translations.i_columnDifference } + + + + + + { benefitRows } + + + + +
); -}; // End BenefitsTable(<>) +}; // Ends export { BenefitsTable }; diff --git a/src/forms/output/GraphHolder.js b/src/forms/output/GraphHolder.js index 9e757368..31771c6d 100644 --- a/src/forms/output/GraphHolder.js +++ b/src/forms/output/GraphHolder.js @@ -5,11 +5,14 @@ import { Message } from 'semantic-ui-react'; import { GraphTimeButtons } from '../../components/GraphTimeButtons'; +/** Keeps track of time interval currently requested + * (weekly/monthly/yearly) and, if needed, shows + * 'no graph' message. */ class GraphHolder extends Component { constructor (props) { super(props); - this.state = { activeID: 'Monthly' }; + this.state = { activeID: `Monthly` }; } onClick = (evnt) => { @@ -18,33 +21,32 @@ class GraphHolder extends Component { }; render () { - const { activeID } = this.state, + const { activeID } = this.state, { Graph, client, translations } = this.props, - { current } = client, + { current } = client, // The ids later used to access all program-specific data and functions // Only active programs are added - activePrograms = [ ...current.benefits ]; + activePrograms = [ ...current.benefits ]; if (activePrograms.length === 0) { return { translations.i_noBenefitsSelected }; } return ( -
+
+ activeID = { activeID } + onClick = { this.onClick } /> + translations = { translations } />
); - }; // End render() - -}; // End + }; // Ends render() +}; // Ends export { GraphHolder }; diff --git a/src/forms/output/ResourcesColumns.js b/src/forms/output/ResourcesColumns.js index 7ba3fe5c..7aae30fa 100644 --- a/src/forms/output/ResourcesColumns.js +++ b/src/forms/output/ResourcesColumns.js @@ -68,11 +68,11 @@ class ResourcesColumnsComp extends Component { // Adjust to time-interval. Highcharts will round // for displayed ticks. - const xRange = [ - currentEarned, - futureEarned, - ], // x-axis/earned income numbers - datasets = getChartData(xRange, multiplier, clone, resources, {}); + let xRange = [ + currentEarned, + futureEarned, + ], // x-axis/earned income numbers + datasets = getChartData(xRange, multiplier, clone, resources, {}); // Columns and categories for each pay amount let columns = [], @@ -98,7 +98,7 @@ class ResourcesColumnsComp extends Component { categories.push(formatted); } } - } + } // ends for every dataset const plotOptions = { column: { stacking: `normal` }}; @@ -108,8 +108,8 @@ class ResourcesColumnsComp extends Component { { getText(translations.i_stackedBarGraphTitle) } @@ -146,10 +146,9 @@ class ResourcesColumnsComp extends Component { -
); - } // Ends render() + }; // Ends render() /** Adds translation-specific money designations @@ -174,7 +173,7 @@ class ResourcesColumnsComp extends Component { formatMoneyWithK = (highchartsObject) => { return formatMoneyWithK(highchartsObject, this.props.translations); }; -}; +}; // Ends const ResourcesColumns = withHighcharts(ResourcesColumnsComp, Highcharts); diff --git a/src/forms/output/StackedResources.js b/src/forms/output/StackedResources.js index e569107c..99af73b1 100644 --- a/src/forms/output/StackedResources.js +++ b/src/forms/output/StackedResources.js @@ -86,21 +86,21 @@ class StackedResourcesComp extends Component { classes += ` ` + className; } - const multiplier = multipliers[ timescale ], - resources = [ `earned` ].concat(activePrograms), - currentEarned = client.current.earned * multiplier, - getText = textFromTranslatedElement; + let multiplier = multipliers[ timescale ], + resources = [ `earned` ].concat(activePrograms), + currentEarned = client.current.earned * multiplier, + getText = textFromTranslatedElement; // Adjust to time-interval. Highcharts will round // for displayed ticks. - const max = (limits.max * multiplier), - interval = ((max / 100) / 10); + let max = (limits.max * multiplier), + interval = ((max / 100) / 10); - const xRange = range(limits.min, max, interval), // x-axis/earned income numbers - datasets = getChartData(xRange, multiplier, client, resources, {}); + let xRange = range(limits.min, max, interval), // x-axis/earned income numbers + datasets = getChartData(xRange, multiplier, client, resources, {}); // Data to stack - const lines = []; + let lines = []; for (let dataseti = 0; dataseti < datasets.length; dataseti++) { let dataset = datasets[ dataseti ], line = ( @@ -119,12 +119,12 @@ class StackedResourcesComp extends Component { // Label for split tooltip 'labels'/'label headers' that appear // at the bottom. Really long. // @todo Change to prep for context, like in @knod 'other-expenses' branch - const bottomTooltipFormatStart = `${getText(translations.i_beforeMoney)}`, - bottomTooltipFormatEnd = `{point.key:,.2f}${getText(translations.i_afterMoney)}
`, - bottomTooltipFormat = bottomTooltipFormatStart + bottomTooltipFormatEnd; + let bottomTooltipFormatStart = `${getText(translations.i_beforeMoney)}`, + bottomTooltipFormatEnd = `{point.key:,.2f}${getText(translations.i_afterMoney)}
`, + bottomTooltipFormat = bottomTooltipFormatStart + bottomTooltipFormatEnd; - const plotOptions = { + let plotOptions = { area: { stacking: `normal`, pointInterval: interval }, series: { marker: { enabled: false }}, // No dots on the lines }; @@ -277,10 +277,10 @@ class StackedResourcesComp extends Component { this.setState({ altKeyClass: `` }); } }; -}; +}; // Ends -const StackedResources = withHighcharts(StackedResourcesComp, Highcharts); +let StackedResources = withHighcharts(StackedResourcesComp, Highcharts); export { StackedResources }; diff --git a/src/forms/output/Summary.js b/src/forms/output/Summary.js index 331586af..44e0ea7c 100644 --- a/src/forms/output/Summary.js +++ b/src/forms/output/Summary.js @@ -1,6 +1,11 @@ +/** @module */ + // REACT COMPONENTS import React from 'react'; -import { Header, Button } from 'semantic-ui-react'; +import { + Header, + Button, +} from 'semantic-ui-react'; // DATA // Colors and text for parts of the chart @@ -14,7 +19,7 @@ import { toMoneyStr } from '../../utils/prettifiers'; import { applyAndPushBenefits } from '../../programs/applyAndPushBenefits'; -let EARNED_MONTHLY_INCREMENT_AMOUNT = 50; // About a 25 cent raise in monthly amount for 40hrs/week? +const EARNED_MONTHLY_INCREMENT_AMOUNT = 50; // About a 25 cent raise in monthly amount for 40hrs/week? /** Rounds money values, turns them into money-formatted @@ -210,6 +215,7 @@ let getBenefitData = function(client, resourceKeys) { clientToChange: clone, timeframe: `current`, }; + let currentCalcData = defaultProps; applyAndPushBenefits(currentCalcData); let futureCalcData = { ...defaultProps, timeframe: `future` }; @@ -220,8 +226,8 @@ let getBenefitData = function(client, resourceKeys) { // Fill earned values for both current and future earned objects result.current = fillInMoneyValues(resourceKeys, accumulated, 0); result.future = fillInMoneyValues(resourceKeys, accumulated, 1); - let resultCurr = result.current, - resultFutr = result.future; + let resultCurr = result.current, + resultFutr = result.future; // 3. Get difference between totals, partly to // see if we need to get cliff info. @@ -245,7 +251,7 @@ let getBenefitData = function(client, resourceKeys) { result.recovery.total = recoveryAmount; result.recovery.earned = earned[ earned.length - 1 ]; - } // ends if hit dramatic cliff + } // ends if hit dramatic cliff (implicit taxes > 100%) return result; }; // Ends getBenefitData() @@ -328,7 +334,7 @@ const Summary = function ({ client, openFeedback, translations }) { fBenefit = future.benefits[ benefiti ]; benefitList.push( -
  • +
  • {cBenefit.label} {translations.i_from} {translations.i_beforeMoneyWithTime}{round$(cBenefit.amount)} {` `} {translations.i_to} {translations.i_beforeMoneyWithTime}{round$(fBenefit.amount)} {translations.i_eachTimeInterval}{translations.i_period}
    • @@ -340,9 +346,7 @@ const Summary = function ({ client, openFeedback, translations }) { // that the tool is still a prototype let feedbackAsk = (

    - - { translations.i_feedbackAsk } - + { translations.i_feedbackAsk }