Closed aripddev closed 4 years ago
Hi @melloware almost finished the component, but getting an error even I set endVal
property as Number
Cannot convert [1234] of type [class java.lang.String] to [class java.lang.Number]
Here my code snippets are
public Number getEndVal() {
return (Number) getStateHelper().eval(PropertyKeys.endVal, null);
}
public void setEndVal(final Number endVal) {
getStateHelper().put(PropertyKeys.endVal, endVal);
}
wb.attr("endVal", countUp.getEndVal());
<h:panelGrid columns="2">
<h:outputText value="Basic Usage"/>
<pe:countUp endVal="1234" />
</h:panelGrid>
<attribute>
<description>
<![CDATA[The value you want to arrive at.]]>
</description>
<name>endVal</name>
<required>true</required>
<type>java.lang.Number</type>
</attribute>
However when I manually give a default number to endVal
, let say 10000
public Number getEndVal() {
return (Number) getStateHelper().eval(PropertyKeys.endVal, 10000);
}
public void setEndVal(final Number endVal) {
getStateHelper().put(PropertyKeys.endVal, endVal);
}
and no attribute to use default ones
<h:panelGrid columns="2">
<h:outputText value="Basic Usage"/>
<pe:countUp />
</h:panelGrid>
it works perfect. Any idea?
Solved it when I changed it to Integer
. But not sure how to make it for Double
.
Integer and Double both should have built in Converters. Number is just an interface so it does not have a built in converter.
Ok, I will continue with Integer then.
Why not go Double? Since I used the ReactJS version of this component to count up a money quote.
<CountUp
id="counterEstimate"
ref={(el) => this.countUp = el}
start={0}
end={this.state.estimateAmount}
duration={3.00}
separator=","
decimals={2}
decimal="."
prefix="$ "
suffix=" "
onEnd={() => this.setState({ estimateVisible: true })}
onStart={() => console.log('Started Counter!')} >
{({ countUpRef, start }) => (
<div>
<span className="calculate-amount" ref={countUpRef} />
</div>
)}
</CountUp>
:) you are right
I have just figured out that it Is possible to make countDown also by changing startVal=9000
and endVal=0
attributes. So do I need to keep the tag name as countUp
?
Let's call it Counter
It is completed. I have sent PR for showcase as well.
OK start and end AJAX events added and showcase example updated.
https://github.com/inorganik/CountUp.js
CountUp.js is a dependency-free, lightweight Javascript class that can be used to quickly create animations that display numerical data in a more interesting way.
Despite its name, CountUp can count in either direction, depending on the start and end values that you pass.
CountUp.js supports all browsers. MIT license.
Demo