Merge pull request #329 from cocopon/number-monitor-format

Add `format` to number monitor

packages/core/src/monitor-binding/common/view/single-log.ts

@@ -17,9 +17,9 @@ const className = ClassName('sgl');
  */
 export class SingleLogView<T> implements View {
 	public readonly element: HTMLElement;
+	public readonly inputElement: HTMLInputElement;
 	public readonly value: BufferedValue<T>;
 	private formatter_: Formatter<T>;
-	private inputElem_: HTMLInputElement;
 
 	constructor(doc: Document, config: Config<T>) {
 		this.onValueUpdate_ = this.onValueUpdate_.bind(this);
@@ -36,7 +36,7 @@ export class SingleLogView<T> implements View {
 		inputElem.type = 'text';
 		config.viewProps.bindDisabled(inputElem);
 		this.element.appendChild(inputElem);
-		this.inputElem_ = inputElem;
+		this.inputElement = inputElem;
 
 		config.value.emitter.on('change', this.onValueUpdate_);
 		this.value = config.value;
@@ -47,7 +47,7 @@ export class SingleLogView<T> implements View {
 	private update_(): void {
 		const values = this.value.rawValue;
 		const lastValue = values[values.length - 1];
-		this.inputElem_.value =
+		this.inputElement.value =
 			lastValue !== undefined ? this.formatter_(lastValue) : '';
 	}
 

packages/core/src/monitor-binding/number/plugin-test.ts

@@ -0,0 +1,29 @@
+import * as assert from 'assert';
+import {describe} from 'mocha';
+
+import {MonitorBindingController} from '../../blade/monitor-binding/controller/monitor-binding';
+import {BindingTarget} from '../../common/binding/target';
+import {createTestWindow} from '../../misc/dom-test-util';
+import {SingleLogController} from '../common/controller/single-log';
+import {createMonitorBindingController} from '../plugin';
+import {NumberMonitorPlugin} from './plugin';
+
+describe(NumberMonitorPlugin.id, () => {
+	it('should apply `format`', () => {
+		const doc = createTestWindow().document;
+		const obj = {
+			foo: 1,
+		};
+		const bc = createMonitorBindingController(NumberMonitorPlugin, {
+			document: doc,
+			params: {
+				format: () => 'formatted',
+				interval: 0,
+			},
+			target: new BindingTarget(obj, 'foo'),
+		}) as MonitorBindingController<number>;
+
+		const c = bc.valueController as SingleLogController<number>;
+		assert.strictEqual(c.view.inputElement.value, 'formatted');
+	});
+});

packages/core/src/monitor-binding/number/plugin.ts

@@ -5,23 +5,30 @@ import {
 	numberFromUnknown,
 } from '../../common/converter/number';
 import {BaseMonitorParams} from '../../common/params';
-import {ParamsParsers, parseParams} from '../../common/params-parsers';
+import {
+	ParamsParser,
+	ParamsParsers,
+	parseParams,
+} from '../../common/params-parsers';
 import {View} from '../../common/view/view';
 import {Constants} from '../../misc/constants';
+import {isEmpty} from '../../misc/type-util';
 import {MultiLogController} from '../common/controller/multi-log';
 import {SingleLogController} from '../common/controller/single-log';
 import {MonitorBindingPlugin} from '../plugin';
 import {GraphLogController} from './controller/graph-log';
 
 export interface NumberMonitorParams extends BaseMonitorParams {
+	format?: Formatter<number>;
 	lineCount?: number;
 	max?: number;
 	min?: number;
 }
 
-function createFormatter(): Formatter<number> {
-	// TODO: formatter precision
-	return createNumberFormatter(2);
+function createFormatter(params: NumberMonitorParams): Formatter<number> {
+	return 'format' in params && !isEmpty(params.format)
+		? params.format
+		: createNumberFormatter(2);
 }
 
 function createTextMonitor(
@@ -31,14 +38,14 @@ function createTextMonitor(
 ) {
 	if (args.value.rawValue.length === 1) {
 		return new SingleLogController(args.document, {
-			formatter: createFormatter(),
+			formatter: createFormatter(args.params),
 			value: args.value,
 			viewProps: args.viewProps,
 		});
 	}
 
 	return new MultiLogController(args.document, {
-		formatter: createFormatter(),
+		formatter: createFormatter(args.params),
 		lineCount: args.params.lineCount ?? Constants.monitor.defaultLineCount,
 		value: args.value,
 		viewProps: args.viewProps,
@@ -51,7 +58,7 @@ function createGraphMonitor(
 	>[0],
 ): Controller<View> {
 	return new GraphLogController(args.document, {
-		formatter: createFormatter(),
+		formatter: createFormatter(args.params),
 		lineCount: args.params.lineCount ?? Constants.monitor.defaultLineCount,
 		maxValue: ('max' in args.params ? args.params.max : null) ?? 100,
 		minValue: ('min' in args.params ? args.params.min : null) ?? 0,
@@ -79,6 +86,7 @@ export const NumberMonitorPlugin: MonitorBindingPlugin<
 		}
 		const p = ParamsParsers;
 		const result = parseParams<NumberMonitorParams>(params, {
+			format: p.optional.function as ParamsParser<Formatter<number>>,
 			lineCount: p.optional.number,
 			max: p.optional.number,
 			min: p.optional.number,