diff --git a/examples/01-basic.html b/examples/01-basic.html index 3fb6493..c68bb45 100644 --- a/examples/01-basic.html +++ b/examples/01-basic.html @@ -20,7 +20,7 @@ value: 10 }, { - color: 'yellow', + color: 'orange', value: 30 } ], diff --git a/src/index.ts b/src/index.ts index 8b88f11..b5e20d7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,13 +10,13 @@ import * as _ from 'lodash'; const SPACE_BETWEEN_CIRCLES = 2; const CIRCLES_ROUNDING = 0.15; //radians -const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.2)'; +const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.1)'; const DEFAULT_INNER_RADIUS = 48; const DEFAULT_OUTER_RADIUS = 72; const STOPS_CIRCLE_WIDTH = 4; -const VALUE_TEXT_FONT_SIZE = 14; +const VALUE_TEXT_FONT_SIZE = 16; const DEFAULT_VALUE_TEXT_Decimals = 2; -const VALUE_TEXT_MARGIN = 16; +const VALUE_TEXT_MARGIN = 10; const DEFAULT_GAUGE_OPTIONS: GaugeOptions = { usePanning: false, @@ -195,12 +195,14 @@ export class ChartwerkGaugePod extends ChartwerkPod 10 && this._valueText.length <= 12) { + } else if(this._valueText.length > 6 && this._valueText.length <= 10) { return VALUE_TEXT_FONT_SIZE - 2; - } else { + } else if(this._valueText.length > 10 && this._valueText.length <= 12) { return VALUE_TEXT_FONT_SIZE - 4; + } else { + return VALUE_TEXT_FONT_SIZE - 6; } }