fix rounding issue for percentage values

This commit is contained in:
Danny 2018-05-16 10:10:23 +02:00
parent ce00a975b4
commit 9f6684f0fb
2 changed files with 11 additions and 23 deletions

View File

@ -5,22 +5,14 @@ import * as numbers from '../lib/numbers.js';
import Client from '../lib/client.js'; import Client from '../lib/client.js';
import { bind } from 'decko'; import { bind } from 'decko';
function getSundayOfCurrentWeek(d){
var day = d.getDay();
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + (day == 0?0:7)-day );
}
const dayInSeconds = 60 * 60 * 24;
class CountWidget extends Component { class CountWidget extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
value: 0.00, value: "-",
loading: false, loading: false,
before: props.before,
after: props.after,
} }
} }
@ -29,26 +21,23 @@ class CountWidget extends Component {
return; return;
} }
this.setState({ this.fetchData(newProps.before, newProps.after);
before: newProps.before,
after: newProps.after,
});
this.fetchData();
} }
// TODO: Move to component of its own
@bind @bind
countUp(toValue) { countUp(toValue) {
const duration = 1000; const duration = 1000;
const easeOutQuint = function (t) { return 1+(--t)*t*t*t*t }; const easeOutQuint = function (t) { return 1+(--t)*t*t*t*t };
const setState = this.setState.bind(this); const setState = this.setState.bind(this);
const startValue = this.state.value; const startValue = isFinite(this.state.value) ? this.state.value : 0;
const diff = toValue - startValue; const diff = toValue - startValue;
let startTime; let startTime;
const tick = function(t) { const tick = function(t) {
if(!startTime) { startTime = t; } if(!startTime) { startTime = t; }
let progress = ( t - startTime ) / duration; let progress = ( t - startTime ) / duration;
let newValue = Math.round(startValue + (easeOutQuint(progress) * diff)); let newValue = startValue + (easeOutQuint(progress) * diff);
setState({ setState({
value: newValue, value: newValue,
}) })
@ -62,15 +51,13 @@ class CountWidget extends Component {
} }
@bind @bind
fetchData() { fetchData(before, after) {
this.setState({ loading: true }) this.setState({ loading: true })
let before = this.state.before;
let after = this.state.after;
Client.request(`${this.props.endpoint}?before=${before}&after=${after}`) Client.request(`${this.props.endpoint}?before=${before}&after=${after}`)
.then((d) => { .then((d) => {
// request finished; check if timestamp range is still the one user wants to see // request finished; check if timestamp range is still the one user wants to see
if( this.state.before != before || this.state.after != after ) { if( this.props.before != before || this.props.after != after ) {
return; return;
} }
@ -84,7 +71,7 @@ class CountWidget extends Component {
render(props, state) { render(props, state) {
let formattedValue = "-"; let formattedValue = "-";
if(state.value > 0) { if(isFinite(state.value)) {
switch(props.format) { switch(props.format) {
case "percentage": case "percentage":
formattedValue = numbers.formatPercentage(state.value) formattedValue = numbers.formatPercentage(state.value)
@ -92,7 +79,7 @@ class CountWidget extends Component {
default: default:
case "number": case "number":
formattedValue = numbers.formatWithComma(state.value) formattedValue = numbers.formatWithComma(Math.round(state.value))
break; break;
case "duration": case "duration":

View File

@ -18,6 +18,7 @@ function formatWithComma(nStr) {
} }
function formatDuration(seconds) { function formatDuration(seconds) {
seconds = Math.round(seconds);
var date = new Date(null); var date = new Date(null);
date.setSeconds(seconds); // specify value for SECONDS here date.setSeconds(seconds); // specify value for SECONDS here
return date.toISOString().substr(14, 5); return date.toISOString().substr(14, 5);