[Kimchi-devel] [PATCH V4] UI: Adding widget of gauge

Aline Manera alinefm at linux.vnet.ibm.com
Tue Jan 27 12:32:34 UTC 2015


The widget looks good.

Just some comments:

- Use 4 spaces instead of tab for indentation
- Remember to add the license header to the new files (It is missing in 
ui/js/widgets/samples/gauge-sample.html)
- Name the sample file as the css/js file (ie, gauge-flat.html)
- There are also some whitespaces in the sample file.

On 20/01/2015 01:26, Wen Wang wrote:
> V3 -> V4:
> 1) Add comments of how to use the widget.
> 2) Minor style changes.
>
> V2 -> V3:
> Adding Samples of gauge.
>
> V1 -> V2:
> Change the time of the copyright.
>
> New widget accept two options: "value" and "color". value varies from 0
> to 100 and color contains "red", "blue", "yellow" and "purple".
>
> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/gauge-flat.css     |  52 +++++++++++++
>   ui/js/widgets/gauge-flat.js             | 127 ++++++++++++++++++++++++++++++++
>   ui/js/widgets/samples/gauge-sample.html |  34 +++++++++
>   3 files changed, 213 insertions(+)
>   create mode 100755 ui/css/theme-default/gauge-flat.css
>   create mode 100755 ui/js/widgets/gauge-flat.js
>   create mode 100644 ui/js/widgets/samples/gauge-sample.html
>
> diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css
> new file mode 100755
> index 0000000..f5b52e5
> --- /dev/null
> +++ b/ui/css/theme-default/gauge-flat.css
> @@ -0,0 +1,52 @@
> +/*
> + * Project Kimchi
> + *
> + * Copyright IBM, Corp. 2015
> + *
> + * 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.
> + */
> +.ui-gauge-flat {
> +	height: 15px;
> +	width: 100px;
> +	text-align: left;
> +	overflow: hidden;
> +	background: #E6E7E8;
> +	border: 0 none;
> +	border-radius: 0;
> +}
> +
> +.ui-gauge-flat .ui-gauge-flat-value {
> +	margin: -1px;
> +	height: 100%;
> +	border-radius: 0;
> +}
> +
> +.ui-gauge-flat .red {
> +	background: #D9182D;
> +	border:1px solid #D9182D;
> +}
> +
> +.ui-gauge-flat .blue {
> +	background: #008ABF;
> +	border:1px solid #008ABF;
> +}
> +
> +.ui-gauge-flat .yellow {
> +	background: #FDB813;
> +	border:1px solid #FDB813;
> +}
> +
> +.ui-gauge-flat .purple {
> +	background: #7F1C7D;
> +	border:1px solid #7F1C7D;
> +}
> \ No newline at end of file
> diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js
> new file mode 100755
> index 0000000..c073a2f
> --- /dev/null
> +++ b/ui/js/widgets/gauge-flat.js
> @@ -0,0 +1,127 @@
> +/*
> + * Project Kimchi
> + *
> + * Copyright IBM, Corp. 2015
> + *
> + * 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.
> + */
> +
> +/*
> + * How to use:
> + * $(".selector").gaugeFlat({
> + *     value: 25,  // Value that you the gauge is going to show, varies from 0 to 100.
> + *     color: "red" // Color showed, currently only "red", "yellow", "blue" and "purple" are supported.
> + * });
> + *
> + * Set value:
> + * $(".selector").gaugeFlat("value", <value>); // Replace <value> with the value that is going to be showed.
> + *
> + * Get value:
> + * $(".selector").gaugeFlat("value"); // This returns the value of gauge.
> + *
> + */
> +
> +(function( $ ) {
> +
> +return $.widget( "kimchi.gaugeFlat", {
> +	version: "@VERSION",
> +	options: {
> +		max: 100,
> +		value: 0,
> +		color: "red"
> +	},
> +
> +	min: 0,
> +
> +	_create: function() {
> +		this.oldValue = this.options.value = this._constrainedValue();
> +
> +		this.element
> +			.addClass( "ui-gauge-flat ui-widget ui-widget-content ui-corner-all" )
> +			.attr({
> +				role: "gaugeflat",
> +				"aria-valuemin": this.min
> +			});
> +		var color = this.options.color;
> +		if(color != "red" && color != "yellow" && color != "blue" && color != "purple") {
> +			color = "red";
> +		}
> +		
> +
> +		this.valueDiv = $( "<div class='ui-gauge-flat-value " + color + " ui-widget-header ui-corner-left'></div>" )
> +			.appendTo( this.element );
> +
> +		this._refreshValue();
> +	},
> +
> +	_destroy: function() {
> +		this.element
> +			.removeClass( "ui-gauge-flat ui-widget ui-widget-content ui-corner-all" )
> +			.removeAttr( "role" )
> +			.removeAttr( "aria-valuemin" )
> +			.removeAttr( "aria-valuemax" )
> +			.removeAttr( "aria-valuenow" );
> +
> +		this.valueDiv.remove();
> +	},
> +
> +	value: function( newValue ) {
> +		if ( newValue === undefined ) {
> +			return this.options.value;
> +		}
> +
> +		this.options.value = this._constrainedValue( newValue );
> +		this._refreshValue();
> +	},
> +
> +	_constrainedValue: function( newValue ) {
> +		if ( newValue === undefined ) {
> +			newValue = this.options.value;
> +		}
> +
> +		this.indeterminate = newValue === false;
> +
> +		if ( typeof newValue !== "number" ) {
> +			newValue = 0;
> +		}
> +
> +		return this.indeterminate ? false :
> +			Math.min( this.options.max, Math.max( this.min, newValue ) );
> +	},
> +
> +	_setOptions: function( options ) {
> +		var value = options.value;
> +		delete options.value;
> +
> +		this._super( options );
> +
> +		this.options.value = this._constrainedValue( value );
> +		this._refreshValue();
> +	},
> +
> +	_percentage: function() {
> +		return this.indeterminate ? 100 : 100 * ( this.options.value - this.min ) / ( this.options.max - this.min );
> +	},
> +
> +	_refreshValue: function() {
> +		var value = this.options.value,
> +			percentage = this._percentage();
> +
> +		this.valueDiv
> +			.toggle( this.indeterminate || value > this.min )
> +			.toggleClass( "ui-corner-right", value === this.options.max )
> +			.width( percentage.toFixed(0) + "%" );
> +	}
> +});
> +
> +})(jQuery);
> diff --git a/ui/js/widgets/samples/gauge-sample.html b/ui/js/widgets/samples/gauge-sample.html
> new file mode 100644
> index 0000000..971d9a8
> --- /dev/null
> +++ b/ui/js/widgets/samples/gauge-sample.html
> @@ -0,0 +1,34 @@
> +<!--Sample code of gauge-->
> +<!DOCTYPE html>
> +<html>
> +    <head>
> +        <meta charset="UTF-8">
> +        <title>Gauge Demo</title>
> +        <script src="../../../libs/jquery-1.10.0.min.js"></script>
> +        <script src="../../../libs/jquery-ui.min.js"></script>
> +        <script src="../gauge-flat.js"></script>
> +        <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css">
> +        <link rel="stylesheet" href="../../../css/theme-default/gauge-flat.css">
> +    </head>
> +    <body>
> +    	<div class="gauge-demo"></div>
> +        <script>
> +        	$(document).ready(function() {
> +        		console.log("test started1");
> +        		var gauged = $(".gauge-demo");
> +        		gauged.gaugeFlat({
> +        			value: 25,
> +                    color: "red"
> +        		});
> +                var gaugeAdd = function() {
> +                    var gaugeValue = gauged.gaugeFlat("value");
> +                    gauged.gaugeFlat("value", gaugeValue + 1);
> +                    if (gaugeValue < 99) {
> +                        setTimeout(gaugeAdd, 300);
> +                    }
> +                }
> +                gaugeAdd();
> +        	});
> +        </script>
> +    </body>
> +</html>
> \ No newline at end of file




More information about the Kimchi-devel mailing list