New component: Counter

[aripddev]

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

[aripddev]

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?

[aripddev]

Solved it when I changed it to Integer. But not sure how to make it for Double.

[melloware]

Integer and Double both should have built in Converters. Number is just an interface so it does not have a built in converter.

[aripddev]

Ok, I will continue with Integer then.

[melloware]

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>

[aripddev]

:) you are right

[aripddev]

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?

[melloware]

Let's call it Counter

[aripddev]

It is completed. I have sent PR for showcase as well.

[melloware]

OK start and end AJAX events added and showcase example updated.