diff --git a/src/index.ts b/src/index.ts index e12bdca..8b88f11 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -import { GaugeTimeSerie, GaugeOptions, Stat, Stop } from './types'; +import { GaugeTimeSerie, GaugeOptions, Stat, Stop, ValueTextFormat } from './types'; import { ChartwerkPod, VueChartwerkPodMixin, ZoomType } from '@chartwerk/core'; @@ -10,11 +10,13 @@ import * as _ from 'lodash'; const SPACE_BETWEEN_CIRCLES = 2; const CIRCLES_ROUNDING = 0.15; //radians -const BACKGROUND_COLOR = '#262626'; +const BACKGROUND_COLOR = 'rgba(38, 38, 38, 0.2)'; const DEFAULT_INNER_RADIUS = 48; const DEFAULT_OUTER_RADIUS = 72; -const DEFAULT_STOPS_CIRCLE_WIDTH = 4; -const DEFAULT_VALUE_TEXT_FONT_SIZE = 14; +const STOPS_CIRCLE_WIDTH = 4; +const VALUE_TEXT_FONT_SIZE = 14; +const DEFAULT_VALUE_TEXT_Decimals = 2; +const VALUE_TEXT_MARGIN = 16; const DEFAULT_GAUGE_OPTIONS: GaugeOptions = { usePanning: false, @@ -39,7 +41,10 @@ const DEFAULT_GAUGE_OPTIONS: GaugeOptions = { defaultColor: 'red', stat: Stat.CURRENT, innerRadius: DEFAULT_INNER_RADIUS, - outerRadius: DEFAULT_OUTER_RADIUS + outerRadius: DEFAULT_OUTER_RADIUS, + valueTextFormat: { + decimals: DEFAULT_VALUE_TEXT_Decimals + } }; export class ChartwerkGaugePod extends ChartwerkPod { @@ -60,7 +65,7 @@ export class ChartwerkGaugePod extends ChartwerkPod 10 && this._valueText.length <= 12) { + return VALUE_TEXT_FONT_SIZE - 2; + } else { + return VALUE_TEXT_FONT_SIZE - 4; + } } private get _stat(): Stat { @@ -205,6 +216,13 @@ export class ChartwerkGaugePod extends ChartwerkPod { - return this._gaugeTransform + 'rotate(' + scale(d) + ')' - }); - } - /* handlers and overloads */ onMouseOver(): void {} onMouseMove(): void {} diff --git a/src/types.ts b/src/types.ts index 916e9b2..2aec997 100644 --- a/src/types.ts +++ b/src/types.ts @@ -12,6 +12,10 @@ export type Stop = { value: number | null }; +export type ValueTextFormat = { + decimals: number +}; + export type GaugeTimeSerie = TimeSerie; export type GaugeOptionsParams = { @@ -22,5 +26,6 @@ export type GaugeOptionsParams = { stops: { color: string , value: number }[]; defaultColor: string; stat: Stat; + valueTextFormat: ValueTextFormat; } export type GaugeOptions = Options & Partial;