Formatting html

This commit is contained in:
Ian Philips 2022-09-23 11:57:06 -04:00
parent 7d138d1ee9
commit 40a8067157
3 changed files with 52 additions and 34 deletions

View File

@ -7,9 +7,13 @@ const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 0, minimumFractionDigits: 0,
}) })
export function formatMoney(amount: number) { export function formatMoney(amount: number, explicitPositiveSign?: boolean) {
const newAmount = Math.round(amount) === 0 ? 0 : Math.floor(amount) // handle -0 case const newAmount = Math.round(amount) === 0 ? 0 : Math.floor(amount) // handle -0 case
return ENV_CONFIG.moneyMoniker + formatter.format(newAmount).replace('$', '') return (
(explicitPositiveSign && newAmount > 0 ? '+' : '') +
ENV_CONFIG.moneyMoniker +
formatter.format(newAmount).replace('$', '')
)
} }
export function formatMoneyWithDecimals(amount: number) { export function formatMoneyWithDecimals(amount: number) {

View File

@ -31,7 +31,7 @@
} }
th {color:#000000; font-size:14px;} th {color:#000000; font-size:14px;}
th, td {padding: 5px; } th, td {padding: 5px; }
td{ font-size: 20px} td{ font-size: 17px}
th, td { vertical-align: center; text-align: center } th, td { vertical-align: center; text-align: center }
a { vertical-align: center; text-align: left} a { vertical-align: center; text-align: left}
img { img {
@ -47,6 +47,15 @@
display: block; display: block;
margin: 13px 0; margin: 13px 0;
} }
p.change{
margin: 0; vertical-align: middle;font-size:16px;display: inline; padding: 2px; border-radius: 5px;
}
p.prob{
font-size: 20px;display: inline; vertical-align: middle;
}
a.question{
font-size: 18px;display: inline; vertical-align: middle; padding-bottom: 25px;
}
</style> </style>
<!--[if mso]> <!--[if mso]>
<noscript> <noscript>
@ -256,22 +265,22 @@
</tr> </tr>
<tr> <tr>
<!-- <td style="{{investment_value_style}}">-->
<td> <td>
<p style='display: inline'>
{{investment_value}} {{investment_value}}
<!-- M$10,000--> <!-- M$10,000-->
<p style='{{investment_change_style}}'> <p style='font-size:16px; margin-left:1px; display: inline; padding: 2px; border-radius: 5px; {{investment_change_style}}'>
{{investment_change}} {{investment_change}}
<!-- +17%--> <!-- +17%-->
</p> </p>
</p>
</td> </td>
<td> <td>
{{current_balance}} {{current_balance}}
</td> </td>
<td> <td>
<p style='font-size:16px; display: inline; padding: 2px; border-radius: 5px; {{tips_received_style}}' >
{{tips_received}} {{tips_received}}
</p>
<!-- +M$120-->
</td> </td>
<td> <td>
{{markets_created}} {{markets_created}}
@ -308,16 +317,16 @@
<tr> <tr>
<!-- <td style="{{investment_value_style}}">--> <!-- <td style="{{investment_value_style}}">-->
<td style='text-align: left'> <td style='text-align: left'>
<a href='{{question1Url}}'> <a class='question' href='{{question1Url}}'>
{{question1Title}} {{question1Title}}
<!-- Will the US economy recover from the pandemic?--> <!-- Will the US economy recover from the pandemic?-->
</a> </a>
</td> </td>
<td style='padding-left: 10px; min-width: 115px'> <td style='padding-left: 10px; min-width: 115px'>
<p style='font-size: 24px;display: inline'> <p class='prob'>
{{question1Prob}} {{question1Prob}}
<!-- 99.9%--> <!-- 99.9%-->
<p style='{{question1ChangeStyle}}'> <p class='change' style='{{question1ChangeStyle}}'>
{{question1Change}} {{question1Change}}
<!-- +17%--> <!-- +17%-->
</p> </p>
@ -326,16 +335,16 @@
</tr><tr> </tr><tr>
<!-- <td style="{{investment_value_style}}">--> <!-- <td style="{{investment_value_style}}">-->
<td style='text-align: left'> <td style='text-align: left'>
<a href='{{question2Url}}'> <a class='question' href='{{question2Url}}'>
{{question2Title}} {{question2Title}}
<!-- Will the US economy recover from the pandemic?--> <!-- Will the US economy recover from the pandemic?-->
</a> </a>
</td> </td>
<td style='padding-left: 10px; min-width: 115px'> <td style='padding-left: 10px; min-width: 115px'>
<p style='font-size: 24px;display: inline'> <p class='prob'>
{{question2Prob}} {{question2Prob}}
<!-- 99.9%--> <!-- 99.9%-->
<p style='{{question2ChangeStyle}}'> <p class='change' style='{{question2ChangeStyle}}'>
{{question2Change}} {{question2Change}}
<!-- +17%--> <!-- +17%-->
</p> </p>
@ -344,16 +353,16 @@
</tr><tr> </tr><tr>
<!-- <td style="{{investment_value_style}}">--> <!-- <td style="{{investment_value_style}}">-->
<td style='text-align: left'> <td style='text-align: left'>
<a href='{{question3Url}}'> <a class='question' href='{{question3Url}}'>
{{question3Title}} {{question3Title}}
<!-- Will the US economy recover from the pandemic?--> <!-- Will the US economy recover from the pandemic?-->
</a> </a>
</td> </td>
<td style='padding-left: 10px; min-width: 115px'> <td style='padding-left: 10px; min-width: 115px'>
<p style='font-size: 24px;display: inline'> <p class='prob'>
{{question3Prob}} {{question3Prob}}
<!-- 99.9%--> <!-- 99.9%-->
<p style='{{question3ChangeStyle}}'> <p class='change' style='{{question3ChangeStyle}}'>
{{question3Change}} {{question3Change}}
<!-- +17%--> <!-- +17%-->
</p> </p>
@ -362,16 +371,16 @@
</tr><tr> </tr><tr>
<!-- <td style="{{investment_value_style}}">--> <!-- <td style="{{investment_value_style}}">-->
<td style='text-align: left'> <td style='text-align: left'>
<a href='{{question4Url}}'> <a class='question' href='{{question4Url}}'>
{{question4Title}} {{question4Title}}
<!-- Will the US economy recover from the pandemic?--> <!-- Will the US economy recover from the pandemic?-->
</a> </a>
</td> </td>
<td style='padding-left: 10px; min-width: 115px'> <td style='padding-left: 10px; min-width: 115px'>
<p style='font-size: 24px;display: inline'> <p class='prob'>
{{question4Prob}} {{question4Prob}}
<!-- 99.9%--> <!-- 99.9%-->
<p style='{{question4ChangeStyle}}'> <p class='change' style='{{question4ChangeStyle}}'>
{{question4Change}} {{question4Change}}
<!-- +17%--> <!-- +17%-->
</p> </p>

View File

@ -155,26 +155,28 @@ export async function sendPortfolioUpdateEmailsToAllUsers() {
const valueChange = const valueChange =
mostRecentPortfolioMetrics.investmentValue - mostRecentPortfolioMetrics.investmentValue -
portfolioMetricsAWeekAgo.investmentValue portfolioMetricsAWeekAgo.investmentValue
const totalTips = sum(
usersToTxnsReceived[privateUser.id]
.filter((txn) => txn.category === 'TIP')
.map((txn) => txn.amount)
)
// get the difference // get the difference
const performanceData = { const performanceData = {
investment_value: formatMoney( investment_value: formatMoney(
mostRecentPortfolioMetrics.investmentValue mostRecentPortfolioMetrics.investmentValue
), ),
investment_change: formatMoney(valueChange), investment_change: formatMoney(valueChange, true),
current_balance: formatMoney(user.balance), current_balance: formatMoney(user.balance),
markets_created: markets_created:
usersToContractsCreated[privateUser.id].length.toString(), usersToContractsCreated[privateUser.id].length.toString(),
tips_received: formatMoney( tips_received: formatMoney(totalTips, true),
sum( tips_received_style: `background-color: ${
usersToTxnsReceived[privateUser.id] totalTips > 0 ? 'rgba(0,160,0,0.2)' : 'rgba(160,0,0,0.2)'
.filter((txn) => txn.category === 'TIP') };`,
.map((txn) => txn.amount)
)
),
unique_bettors: usersToTxnsReceived[privateUser.id] unique_bettors: usersToTxnsReceived[privateUser.id]
.filter((txn) => txn.category === 'UNIQUE_BETTOR_BONUS') .filter((txn) => txn.category === 'UNIQUE_BETTOR_BONUS')
.length.toString(), .length.toString(),
investment_change_style: `font-size:14px;display: inline; padding: 2px; border-radius: 5px; background-color: ${ investment_change_style: `background-color: ${
valueChange > 0 ? 'rgba(0,160,0,0.2)' : 'rgba(160,0,0,0.2)' valueChange > 0 ? 'rgba(0,160,0,0.2)' : 'rgba(160,0,0,0.2)'
};`, };`,
// More options: bonuses, tips given, // More options: bonuses, tips given,
@ -209,6 +211,8 @@ export async function sendPortfolioUpdateEmailsToAllUsers() {
contract, contract,
currentMarketProbability currentMarketProbability
) )
const marketChange =
currentMarketProbability - marketProbabilityAWeekAgo
return { return {
currentValue: currentBetsValue, currentValue: currentBetsValue,
pastValue: betsValueAWeekAgo, pastValue: betsValueAWeekAgo,
@ -219,13 +223,13 @@ export async function sendPortfolioUpdateEmailsToAllUsers() {
questionUrl: contractUrl(contract), questionUrl: contractUrl(contract),
questionProb: Math.round(cpmmContract.prob * 100) + '%', questionProb: Math.round(cpmmContract.prob * 100) + '%',
questionChange: questionChange:
Math.round( (marketChange > 0 ? '+' : '') +
(currentMarketProbability - marketProbabilityAWeekAgo) * 100 Math.round(marketChange * 100) +
) + '%', '%',
questionChangeStyle: `font-size:14px;display: inline; padding: 2px; border-radius: 5px; background-color: ${ questionChangeStyle: `color: ${
currentMarketProbability > marketProbabilityAWeekAgo currentMarketProbability > marketProbabilityAWeekAgo
? 'rgba(0,160,0,0.2)' ? 'rgba(0,160,0,1)'
: 'rgba(160,0,0,0.2)' : '#a80000'
};`, };`,
} }
}) })
@ -276,6 +280,7 @@ export type PerContractInvestmentsData = {
questionChangeStyle: string questionChangeStyle: string
} }
export type OverallPerformanceData = { export type OverallPerformanceData = {
tips_received_style: string
investment_change_style: string investment_change_style: string
investment_value: string investment_value: string
investment_change: string investment_change: string