Merge branch 'ui-update' into gauge-updates

dist/index.d.ts

@@ -1,12 +1,11 @@
 import { GaugeTimeSerie, GaugeOptions, Stat } from './types';
 import { ChartwerkPod } from '@chartwerk/core';
 export declare class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
-    private _gaugeTransform;
-    private _gaugeCenter;
-    private _minWH;
     constructor(el: HTMLElement, _series?: GaugeTimeSerie[], _options?: GaugeOptions);
     renderMetrics(): void;
-    private _setBoundingBox;
+    get _gaugeTransform(): string;
+    get _gaugeCenter(): string;
+    get _minWH(): number;
     private _renderValue;
     private _renderValueArc;
     private _renderThresholdArc;
@@ -29,7 +28,6 @@ export declare class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, Gaug
     rescaleSpace(space: number): number;
     rescaleWith(width: number): number;
     private get _scaleFactor();
-    private get _valueTextDecimals();
     private get aggregatedValue();
     private get _maxValue();
     private get _minValue();

dist/types.d.ts

@@ -9,9 +9,7 @@ export declare type Stop = {
     color: string;
     value: number | null;
 };
-export declare type ValueTextFormat = {
-    decimals: number;
-};
+export declare type ValueFormatter = (value: number) => string;
 export declare type GaugeTimeSerie = TimeSerie;
 export declare type GaugeOptionsParams = {
     innerRadius: number;
@@ -24,6 +22,6 @@ export declare type GaugeOptionsParams = {
     }[];
     defaultColor: string;
     stat: Stat;
-    valueTextFormat: ValueTextFormat;
+    valueFormatter: ValueFormatter;
 };
 export declare type GaugeOptions = Options & Partial<GaugeOptionsParams>;

src/index.ts

@@ -45,17 +45,10 @@ const DEFAULT_GAUGE_OPTIONS: GaugeOptions = {
   stat: Stat.CURRENT,
   innerRadius: DEFAULT_INNER_RADIUS,
   outerRadius: DEFAULT_OUTER_RADIUS,
-  valueTextFormat: {
-    decimals: DEFAULT_VALUE_TEXT_Decimals
-  }
+  valueFormatter: val => val.toString() 
 };
 
 export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions> {
-  // TODO: better name
-  private _gaugeTransform = '';
-  private _gaugeCenter = '';
-  private _minWH = 0;
-
   constructor(el: HTMLElement, _series: GaugeTimeSerie[] = [], _options: GaugeOptions = {}) {
     super(
       d3, el, _series,
@@ -69,18 +62,21 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
       return;
     }
 
-    this._setBoundingBox();
     this._renderValueArc();
     this._renderThresholdArc();
     this._renderValue();
   }
 
-  private _setBoundingBox(): void {
-    // TODO: refactor
-    this._gaugeTransform = `translate(${this.width / 2},${0.8 * this.height})`;
-    this._gaugeCenter = `translate(${this.width / 2 + this.margin.left},${0.8 * this.height})`;
+  get _gaugeTransform(): string {
+    return `translate(${this.width / 2},${0.8 * this.height})`;
+  }
 
-    this._minWH = _.min([0.6 * this.width, this.height]);
+  get _gaugeCenter(): string {
+    return `translate(${this.width / 2 + this.margin.left},${0.8 * this.height})`;
+  }
+
+  get _minWH(): number {
+    return _.min([0.6 * this.width, this.height]);
   }
 
   private _renderValue(): void {
@@ -210,8 +206,11 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
   }
 
   private get _valueText(): string {
-    const decimalsCount = this._valueTextDecimals;
-    return this.aggregatedValue.toFixed(decimalsCount);
+    if(this.options.valueFormatter) {
+      console.log('valueFormatter function is not specified, rendering raw value');
+      return this.aggregatedValue.toString();
+    }
+    return this.options.valueFormatter(this.aggregatedValue);
   }
 
   private get _valueTextFontSize(): number {
@@ -268,13 +267,6 @@ export class ChartwerkGaugePod extends ChartwerkPod<GaugeTimeSerie, GaugeOptions
     return scale;
   }
 
-  private get _valueTextDecimals(): number {
-    if(this.options.valueTextFormat === undefined) {
-      throw new Error(`Options has no valueTextFormat`);      
-    }
-    return this.options.valueTextFormat.decimals;
-  }
-
   private get aggregatedValue(): number {
     switch(this._stat) {
       case Stat.CURRENT:

src/types.ts

@@ -12,9 +12,7 @@ export type Stop = {
   value: number | null
 };
 
-export type ValueTextFormat = {
-  decimals: number
-};
+export type ValueFormatter = (value: number) => string;
 
 export type GaugeTimeSerie = TimeSerie;
 
@@ -27,6 +25,6 @@ export type GaugeOptionsParams = {
   stops: { color: string , value: number }[];
   defaultColor: string;
   stat: Stat;
-  valueTextFormat: ValueTextFormat;
+  valueFormatter: ValueFormatter;
 }
 export type GaugeOptions = Options & Partial<GaugeOptionsParams>;