angular-gage
v0.1.0
Published
angular-gage [![Build Status](https://travis-ci.org/frapontillo/angular-gage.png)](https://travis-ci.org/frapontillo/angular-gage) ===============
Downloads
431
Readme
angular-gage
AngularJS directive for the JustGage gauge.
Installation
$ bower install angular-gage
Usage
The directive tag is justgage
, but you can also use it as an attribute or as a class name. angular-gage
implements
all of the original JustGage parameters via AngularJS binding:
title
, gauge title texttitleFontColor
, color of the title texttitleFontFamily
, font-family of the title texttitlePosition
,"above"
or"below"
the gaugevalue
, value to showvalueFontColor
, color of the value textvalueFontFamily
, font-family of the value textwidth
, gauge widthheight
, gauge heightrelativeGaugeSize
, true if the gauge has to grow with the containermin
, minimum valuemax
, maximum valuevalueMinFontSize
, absolute minimum font size for the valuetitleMinFontSize
, absolute minimum font size for the titlelabelMinFontSize
, absolute minimum font size for the labelminLabelMinFontSize
, absolute minimum font size for the minimum labelmaxLabelMinFontSize
, absolute minimum font size for the maximum labelhideValue
, hide value texthideMinMax
, hide min and max valueshideInnerShadow
, hide inner shadowgaugeWidthScale
, width of the gauge elementgaugeColor
, background color of gauge elementshowInnerShadow
, true to display inner shadowshadowOpacity
, shadow opacity, values 0 ~ 1shadowSize
, inner shadow sizeshadowVerticalOffset
, how much is shadow offset from toplevelColors
, array of strings, colors of indicator, from lower to upper, in hex formatcustomSectors
, array of objects with color, hi, lo attributesnoGradient
, true to use sector-based color change, false to use gradual color changelabel
, text to show below valuelabelFontColor
, color of label under the valuestartAnimationTime
, length of initial load animationstartAnimationType
, type of initial animation (linear, >, <, <>, bounce)refreshAnimationTime
, length of refresh animationrefreshAnimationType
type of refresh animation (linear, >, <, <>, bounce)donut
, turn the gauge into a full circle donutdonutStartAngle
, angle to start from when in donut modereverse
, if true, max and min are swapped (with max appearing on the left, min on the right)counter
, increase numbers one by onedecimals
, quantity of decimal numbers to showsymbol
, unit of measure that will be appended to valueformatNumber
, whether to format numbershumanFriendly
, true to show shorthand big numbers (300K instead of 300XXX)humanFriendlyDecimal
, number of decimal places for our human friendly number to containtextRenderer
, function applied before rendering text
When parameters are not set or they are undefined
, the behavior of JustGage is to assume they are not set; therefore,
the default values will be loaded.
You can check out the demo at demo/index.html
.
Development
To build your own version, use grunt
:
$ npm install -g grunt-cli bower karma
$ npm install
$ bower install
$ grunt
Contribute
To contribute, please follow the generic AngularJS Contributing Guidelines,
with the only exception to send the PR to the develop
branch instead of master
.
Before committing and requesting a PR, please make sure that your build succeeds.
##Author
Francesco Pontillo (mailto:[email protected])
##License
Copyright 2014 Francesco Pontillo
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.