diff --git a/README.md b/README.md index f0ffd8a..295cfae 100644 --- a/README.md +++ b/README.md @@ -93,56 +93,56 @@ setInterval(() => { ## Options -| Name | Default | Description | -| -------------------- | ----------------------------------- | ----------------------------------------------------------------------------------- | -| id | (required) | The HTML container element `id` | -| value | `0` | Value Gauge is showing | -| parentNode | `null` | The HTML container element object. Used if `id` is not present | -| defaults | `false` | Defaults parameters to use globally for gauge objects | -| width | `null` | The Gauge width in pixels (Integer) | -| height | `null` | The Gauge height in pixels | -| valueFontColor | `#010101` | Color of label showing current value | -| valueFontFamily | `Arial` | Font of label showing current value | -| symbol | `''` | Special symbol to show next to value | -| min | `0` | Min value | -| minTxt | `false` | Min value text, overrides `min` if specified | -| max | `100` | Max value | -| maxTxt | `false` | Max value text, overrides `max` if specified | -| reverse | `false` | Reverse min and max | -| humanFriendlyDecimal | `0` | Number of decimal places for our human friendly number to contain | -| textRenderer | `null` | Function applied before redering text `(value) => value` | -| onAnimationEnd | `null` | Function applied after animation is done | -| gaugeWidthScale | `1.0` | Width of the gauge element | -| gaugeColor | `#edebeb` | Background color of gauge element | -| label | `''` | Text to show below value | -| labelFontColor | `#b3b3b3` | Color of label showing label under value | -| shadowOpacity | `0.2` | Shadow opacity 0 ~ 1 | -| shadowSize | `5` | Inner shadow size | -| shadowVerticalOffset | `3` | How much shadow is offset from top | -| levelColors | `["#a9d70b", "#f9c802", "#ff0000"]` | Colors of indicator, from lower to upper, in RGB format | -| startAnimationTime | `700` | Length of initial animation in milliseconds | -| startAnimationType | `>` | Type of initial animation (linear, >, <, <>, bounce) | -| refreshAnimationTime | `700` | Length of refresh animation in milliseconds | -| refreshAnimationType | `>` | Type of refresh animation (linear, >, <, <>, bounce) | -| donutStartAngle | `90` | Angle to start from when in donut mode | -| valueMinFontSize | `16` | Absolute minimum font size for the value label | -| labelMinFontSize | `10` | Absolute minimum font size for the label | -| minLabelMinFontSize | `10` | Absolute minimum font size for the min label | -| maxLabelMinFontSize | `10` | Absolute minimum font size for the man label | -| hideValue | `false` | Hide value text | -| hideMinMax | `false` | Hide min/max text | -| showInnerShadow | `false` | Show inner shadow | -| humanFriendly | `false` | convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) | -| noGradient | `false` | Whether to use gradual color change for value, or sector-based | -| donut | `false` | Show donut gauge | -| relativeGaugeSize | `false` | Whether gauge size should follow changes in container element size | -| counter | `false` | Animate text value number change | -| decimals | `0` | Number of digits after floating point | -| customSectors | `{}` | Custom sectors colors. Expects an [object](#Custom-Sectors) | -| formatNumber | `false` | Formats numbers with commas where appropriate | -| pointer | `false` | Show value pointer | -| pointerOptions | `{}` | Pointer options. Expects an [object](#Pointer-options) | -| displayRemaining | `false` | Replace display number with the value remaining to reach max value | +| Name | Default | Description | +| -------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------- | +| id | (required) | The HTML container element `id` | +| value | `0` | Value Gauge is showing | +| parentNode | `null` | The HTML container element object. Used if `id` is not present | +| defaults | `false` | Defaults parameters to use globally for gauge objects | +| width | `null` | The Gauge width in pixels (Integer) | +| height | `null` | The Gauge height in pixels | +| valueFontColor | `#010101` | Color of label showing current value | +| valueFontFamily | `Arial` | Font of label showing current value | +| symbol | `''` | Special symbol to show next to value | +| min | `0` | Min value | +| minTxt | `false` | Min value text, overrides `min` if specified | +| max | `100` | Max value | +| maxTxt | `false` | Max value text, overrides `max` if specified | +| reverse | `false` | Reverse min and max | +| humanFriendlyDecimal | `0` | Number of decimal places for our human friendly number to contain | +| textRenderer | `null` | Function applied before redering text `(value) => value` return `false` to format value based on config options | +| onAnimationEnd | `null` | Function applied after animation is done | +| gaugeWidthScale | `1.0` | Width of the gauge element | +| gaugeColor | `#edebeb` | Background color of gauge element | +| label | `''` | Text to show below value | +| labelFontColor | `#b3b3b3` | Color of label showing label under value | +| shadowOpacity | `0.2` | Shadow opacity 0 ~ 1 | +| shadowSize | `5` | Inner shadow size | +| shadowVerticalOffset | `3` | How much shadow is offset from top | +| levelColors | `["#a9d70b", "#f9c802", "#ff0000"]` | Colors of indicator, from lower to upper, in RGB format | +| startAnimationTime | `700` | Length of initial animation in milliseconds | +| startAnimationType | `>` | Type of initial animation (linear, >, <, <>, bounce) | +| refreshAnimationTime | `700` | Length of refresh animation in milliseconds | +| refreshAnimationType | `>` | Type of refresh animation (linear, >, <, <>, bounce) | +| donutStartAngle | `90` | Angle to start from when in donut mode | +| valueMinFontSize | `16` | Absolute minimum font size for the value label | +| labelMinFontSize | `10` | Absolute minimum font size for the label | +| minLabelMinFontSize | `10` | Absolute minimum font size for the min label | +| maxLabelMinFontSize | `10` | Absolute minimum font size for the man label | +| hideValue | `false` | Hide value text | +| hideMinMax | `false` | Hide min/max text | +| showInnerShadow | `false` | Show inner shadow | +| humanFriendly | `false` | convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) | +| noGradient | `false` | Whether to use gradual color change for value, or sector-based | +| donut | `false` | Show donut gauge | +| relativeGaugeSize | `false` | Whether gauge size should follow changes in container element size | +| counter | `false` | Animate text value number change | +| decimals | `0` | Number of digits after floating point | +| customSectors | `{}` | Custom sectors colors. Expects an [object](#Custom-Sectors) | +| formatNumber | `false` | Formats numbers with commas where appropriate | +| pointer | `false` | Show value pointer | +| pointerOptions | `{}` | Pointer options. Expects an [object](#Pointer-options) | +| displayRemaining | `false` | Replace display number with the value remaining to reach max value | ### Custom Sectors diff --git a/docs/justgage.js b/docs/justgage.js index 19d0d67..a3b7729 100644 --- a/docs/justgage.js +++ b/docs/justgage.js @@ -723,7 +723,7 @@ defs, svg = null; // set value to display - if (obj.config.textRenderer) { + if (obj.config.textRenderer && obj.config.textRenderer(obj.originalValue) !== false) { obj.originalValue = obj.config.textRenderer(obj.originalValue); } else if (obj.config.humanFriendly) { obj.originalValue = humanFriendlyNumber(obj.originalValue, obj.config.humanFriendlyDecimal) + obj.config.symbol; @@ -742,7 +742,7 @@ if (obj.config.reverse) { currentValue = (obj.config.max * 1) + (obj.config.min * 1) - (obj.level.attr("pki")[0] * 1); } - if (obj.config.textRenderer) { + if (obj.config.textRenderer && obj.config.textRenderer(Math.floor(currentValue)) !== false) { obj.txtValue.attr("text", obj.config.textRenderer(Math.floor(currentValue))); } else if (obj.config.humanFriendly) { obj.txtValue.attr("text", humanFriendlyNumber(Math.floor(currentValue), obj.config.humanFriendlyDecimal) + obj.config.symbol); @@ -914,7 +914,7 @@ color = getColor(val, (val - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors); - if (obj.config.textRenderer) { + if (obj.config.textRenderer && obj.config.textRenderer(displayVal) !== false) { displayVal = obj.config.textRenderer(displayVal); } else if (obj.config.humanFriendly) { displayVal = humanFriendlyNumber(displayVal, obj.config.humanFriendlyDecimal) + obj.config.symbol; diff --git a/justgage.js b/justgage.js index 19d0d67..a3b7729 100644 --- a/justgage.js +++ b/justgage.js @@ -723,7 +723,7 @@ defs, svg = null; // set value to display - if (obj.config.textRenderer) { + if (obj.config.textRenderer && obj.config.textRenderer(obj.originalValue) !== false) { obj.originalValue = obj.config.textRenderer(obj.originalValue); } else if (obj.config.humanFriendly) { obj.originalValue = humanFriendlyNumber(obj.originalValue, obj.config.humanFriendlyDecimal) + obj.config.symbol; @@ -742,7 +742,7 @@ if (obj.config.reverse) { currentValue = (obj.config.max * 1) + (obj.config.min * 1) - (obj.level.attr("pki")[0] * 1); } - if (obj.config.textRenderer) { + if (obj.config.textRenderer && obj.config.textRenderer(Math.floor(currentValue)) !== false) { obj.txtValue.attr("text", obj.config.textRenderer(Math.floor(currentValue))); } else if (obj.config.humanFriendly) { obj.txtValue.attr("text", humanFriendlyNumber(Math.floor(currentValue), obj.config.humanFriendlyDecimal) + obj.config.symbol); @@ -914,7 +914,7 @@ color = getColor(val, (val - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors); - if (obj.config.textRenderer) { + if (obj.config.textRenderer && obj.config.textRenderer(displayVal) !== false) { displayVal = obj.config.textRenderer(displayVal); } else if (obj.config.humanFriendly) { displayVal = humanFriendlyNumber(displayVal, obj.config.humanFriendlyDecimal) + obj.config.symbol;