Skip to content

Instantly share code, notes, and snippets.

@reusee

reusee/report.html

Created July 16, 2018 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save reusee/b3afd0f9d803ada898adff6e92f357a3 to your computer and use it in GitHub Desktop.
Save reusee/b3afd0f9d803ada898adff6e92f357a3 to your computer and use it in GitHub Desktop.
Download ZIP
foo
Raw
report.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="report.js"></script>
<script src="system-production.js"></script>
<script src="aff.js"></script>
</head>
<body>
<div id="app"></div>
<script>
SystemJS.import("index").then(function(aff) {
const h = aff.h;
const css = aff.css;
const root = (state) => {
const width = 96 / state.OpenDates.length;
return h.div(
css`
font-size: 14px;
`,
state.Funds.map(fund => {
var hl_from = '9999-99-99';
const last = fund.Partitions[fund.Partitions.length - 1];
if (last.IsGood) {
hl_from = last.Dates[0];
}
return h.div(
css`
position: relative;
overflow: hidden;
border-bottom: 1px solid transparent;
`,
h.span(
css`
position: absolute;
left: 50%;
transform: translate(-50%, 0);
line-height: 16px;
color: rgba(0, 0, 128, 0.6);
`,
fund.Holding ? css`
text-shadow: 0 0 3px rgb(0, 0, 222);
` : null,
fund.Code,
" ",
fund.Name,
),
state.OpenDates.map((date, i) => h.div(
css`
display: inline-block;
width: ${width}vw;
height: 16px;
background-color: #EEE;
`,
date < fund.CheckFrom ? css`
background-color: transparent;
` : null,
fund.AggregatedGoods[date] ? css`
background-color: #CCC;
` : null,
date >= hl_from ? css`
box-shadow: 0 0 3px red;
` : null,
)),
)
}),
);
}
new aff.App(
root,
data,
document.getElementById('app'),
)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment