diff --git a/README.md b/README.md index 67efde5..338de24 100644 --- a/README.md +++ b/README.md @@ -152,11 +152,13 @@ customSectors: { color : "#43bf58", lo : 0, hi : 50 - },{ + }, + { color : "#ff3b30", lo : 51, hi : 100 }] +} ``` ### Pointer options @@ -181,18 +183,42 @@ pointerOptions: { Used to refresh Gauge value and max value -`refresh(val, max, min, label)` +`guage.refresh(val, max, min, label)` - `val` : The Gauge value (required) - `max` : The Gauge Max value (optional) - `min` : The Gauge Min value (optional) - `label` : The Gauge label text (optional) +### Update + +Used to dynamically update existing Gauge appearence + +`gauge.update(option, value)` + +vs + +```js +const options = { + valueFontColor: '#ff0000', + labelFontColor: '#ff0000', +} +gauge.update(options) +``` + +#### Options + +| Name | Description | +| -------------------- | ------------------------------------------- | +| valueFontColor | HEX color for gauge value text | +| labelFontColor | HEX color for gauge min, max and label text | + + ### Destroy Used to destroy the Gauge element -`destroy()` +`guage.destroy()` ## Demo diff --git a/justgage.js b/justgage.js index 230f637..33b5320 100644 --- a/justgage.js +++ b/justgage.js @@ -996,6 +996,73 @@ obj, displayVal, color, max, min = null; }; + /** + * Update Gauge options + * + * @param options {String} option The target option name + * @param val {Number|String} val The value to be assigned to the option + * + * Alternative signature + * @param options {String|Object} options name and value + */ + JustGage.prototype.update = function (options, val) { + const obj = this; + + // options as an object of option/val values + if (options instanceof Object) { + for (var option in options) { + val = options[option]; + updateProp(obj, option, val); + } + + // options as single option/val + } else { + updateProp(obj, options, val); + } + }; + + /** + * Utility function to update properties to a JustGage object + * + * @param obj {JustGage Object} JustGage object to apply the property update to + * @param option {String} option name + * @param val {String} option value + */ + function updateProp(obj, option, val) { + switch (option) { + case 'valueFontColor': + if (!isHexNumber(val)) { + console.log('* justgage: the updated valueFontColor value is not a valid hex value'); + break; + } + + obj.txtValue.attr({ + 'fill': val + }); + break; + + case 'labelFontColor': + if (!isHexNumber(val)) { + console.log('* justgage: the updated labelFontColor value is not a valid hex value'); + break; + } + + obj.txtMin.attr({ + "fill": val, + }); + obj.txtMax.attr({ + "fill": val, + }); + obj.txtLabel.attr({ + "fill": val, + }); + + break; + + default: + console.log(`* justgage: "${option}" is not a supported update setting`); + } + } /** * Destroy the Gauge Object and unbind events @@ -1011,7 +1078,6 @@ this.events = {} }; - /** * Generate Shadow * @@ -1201,6 +1267,17 @@ return (str.charAt(0) == "#") ? str.substring(1, 7) : str; } + /** + * Validate if hex value + * + * @param val + * @returns {*|boolean} + */ + function isHexNumber(val) { + var regExp = /^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$/; + return (typeof val === 'string' && regExp.test(val)); + } + /** Human friendly number suffix - @robertsLando */ function humanFriendlyNumber(n, d) { var d2, i, s, c; @@ -1299,9 +1376,3 @@ return JustGage })); - - - - - -