Skip to content

Commit

Permalink
feat: use custom formats when textRenderer returns false (#363)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amigian74
amigian74 committed Jun 11, 2021
1 parent d527ca3 commit 199c9f7
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 56 deletions.
100 changes: 50 additions & 50 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions docs/justgage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions justgage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 199c9f7

Please sign in to comment.