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

18
elements/polar.js
View file

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

1
theme/c-base.css
View file

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