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,
})
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
return ENV_CONFIG.moneyMoniker + formatter.format(newAmount).replace('$', '')
return (
(explicitPositiveSign && newAmount > 0 ? '+' : '') +
ENV_CONFIG.moneyMoniker +
formatter.format(newAmount).replace('$', '')
)
}
export function formatMoneyWithDecimals(amount: number) {

View File

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

View File

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