Skip to content

Instantly share code, notes, and snippets.

@dalaidunc

dalaidunc/social-stats-part5.js

Created October 31, 2018 18:41
Show Gist options
  • Save dalaidunc/549b05004cceaa73bb6a9eb9a455d19d to your computer and use it in GitHub Desktop.
Save dalaidunc/549b05004cceaa73bb6a9eb9a455d19d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
social-stats-part5.js
function getDefaultTemplate(
name,
oldnum = 1,
newnum = 1,
target = 1,
color = '#880011'
) {
const width = (newnum / target) * 100 + '%';
return h(
'div',
{ className: 'box' },
h(
'div',
{ className: 'left' },
h('h2', null, name),
h(
'div',
{ className: 'bar' },
h('div', {
className: 'fill',
style: `background-color:${color};width:${width}`
})
)
),
h(
'div',
{ className: 'mini-stats' },
h('div', null, newnum),
h('div', null, `Was ${oldnum}`)
)
);
}
function getDefaultStyle() {
return h(
'style',
null,
`
div {
font-family: Helvetica, sans-serif;
}
h2 {
margin: 0;
}
.left {
flex: 1;
}
.mini-stats {
flex-grow: 1;
text-align: center;
}
.mini-stats > div {
font-size: 0.7em;
}
.mini-stats > *:first-child {
font-size: 1.2em;
}
div.box {
display: flex;
background-color: #F5F5F5;
padding: 10px;
}
div.bar {
height: 7px;
width: 200px;
background: #C0C0C0;
}
div.bar .fill {
height: 100%;
}
`
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment