c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sizing support for polar graphs

Browse source
This commit is contained in:
Henri Bergius 2017-11-30 21:45:25 +01:00
parent ef2249a58d
commit 95a3be09a5
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
bar-history/index.html
View file

@ -18,6 +18,8 @@
}
main {
display: flex;
width: 100vw;
height: 98vh;
align-items: center;
justify-content: center;
flex-direction: column;
@ -26,18 +28,17 @@
font-size: 6vmin;
margin: 0px;
padding: 0px;
margin-top: -10vh;
width: 80vw;
text-align: center;
}
cbase-polar {
height: 72vh;
width: 72vh;
margin-left: 80px;
height: 72vmin;
width: 72vmin;
}
@media (orientation: portrait) {
p {
width: 95vw;
font-size: 5vmin;
}
}
</style>
@ -45,7 +46,7 @@
<body>
<main>
<h1>bar historical data</h1>
<cbase-polar timeseries="bar.open" days="90" percentage></cbase-polar>
<cbase-polar timeseries="bar.open" days="90" size="72" percentage></cbase-polar>
<p>
Likelihood of bar being open at a given hour. Based on last 90 days.
</p>

18
elements/polar.js
View file

@ -1,5 +1,7 @@
import { withComponent, props } from 'skatejs';
import { Timeseries } from '../lib/timeseries';
import { colors } from '../lib/colors';
import injectCss from '../lib/plotly-shadowdom';
const Component = withComponent();
@ -11,6 +13,7 @@ class Polar extends Component {
accumulate: props.boolean,
percentage: props.boolean,
data: props.array,
size: props.number,
};
connected() {
@ -31,16 +34,21 @@ class Polar extends Component {
renderer(renderRoot, render) {
const root = renderRoot;
root.innerHtml = '';
while (root.firstChild) {
root.removeChild(root.firstChild);
}
root.appendChild(render());
injectCss(root);
}
render({ percentage, data, ts }) {
render({ percentage, data, ts, size }) {
const el = document.createElement('div');
if (!data || !data.length || !ts) {
// No data yet
return el;
}
const vmin = Math.min(window.innerWidth, window.innerHeight);
const graphSize = Math.floor((vmin / 100) * (size || 40));
const layout = {
orientation: 270,
direction: 'clockwise',
@ -60,7 +68,9 @@ class Polar extends Component {
},
showlegend: false,
paper_bgcolor: 'transparent',
autosize: true,
autosize: false,
width: graphSize,
height: graphSize,
margin: {
l: 0,
r: 0,
@ -77,7 +87,7 @@ class Polar extends Component {
name: dayLabels[dayIdx],
type: 'area',
marker: {
color: '#f57900',
color: colors[2],
},
opacity: 0.8,
showlegend: false,

1
theme/c-base.css
View file

@ -22,6 +22,7 @@ body {
background-color: rgba(0, 0, 0, 0.98);
color: #a0a0a0;
padding: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}