thermometer- styles

3Overview

thermometer 의 전반적인 스타일에 대한 값을 정의

var defaultStyles = {
	layout : {
		position : {
			x : 0,
			y : 0
		},
		area : {
			color : '#f8f8f8',
			border :'#c1c6cc'
		}
	},
	object : {
		width: 360
	},
	counter : {
		x: 0 ,
		y: 0 ,        
		width : 80 ,
        height : 40,
		radius: 2,
		color : '#fcfcfc',
		border : '#bdc2ca',
		text : {
			family : 'LCDMono',
			size : 1,
			weight : 800,
			color:'#484b4e'
		}
	},
	axis : {
		block : 10 ,
		interval : 4 ,
		text : {
			num : 5,
			family: defaultFont,
			size: 12,
			weight: "bold",
			align: "end",
			color : "#797f85"
		},
		blockLine: {
			color: "#a3aab1",
			length : 15
		},
		intervalLine: {
			color: "#c3c8cd",
			length: 7.5
		}
	},
	thermometer : {
		prevBackground: {
			color : "#fcfcfc",
			border : 'none'
		},
		prevBar: {
			size : 1,
			color : "#ff6360",
			border : 'none',
			opacity : 0.5
		},
		bottom : {
			color :  '#ff6360',
			border :  "#bcc7d4"
		},
		back: {
			color : "#fcfcfc",
			border : "#bcc7d4"
		},
		bar : {
			color : "100-#ff6360-#ff908e",
			border : 'none'
		}
	},
	pointer : {
		max : {
			bar : {
				color : '#ff625f',
				length :10
			},
			font : {
				size : 10,
				color :  '#ff625f',
				align: 'start',
				position : -18,                
				family: 'defaultFont'
			}
		},
		avg : {
			bar : {
				color : '#2bcdba',
				length :10
			},
			font : {
				size : 10,
				color :  '#2bcdba',
				align: 'start',
				position : -18,                
				family: 'defaultFont'
			}
		},
		target : {
			color : '#8397a6'
		}
	}
};

Configuration Styles

layout

Thermoemter의 레이아웃 스타일

Parameters

			default	type	설명
layout	position	x	0	number	thermometer 의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값
		y	0	number	thermometer 의 Y 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 상, 하 위치 값
	area	color	'#f8f8f8'	string	SVG 전체 영역의 배경 색상
		border	'#c1c6cc'	string	SVG 전체 영역의 테두리 색상

Usage

var styles = {
	layout: {
		position: {
			x : 50,
			y : 50	
		},
		area : {
			color : '#f8f8f8',
			border : '#c1c6cc'
		}
	}
}

Demo

Publisher Go

object

object.width

thermometer의 넓이 설정 ( thermometer 의 경우 width의 크기에 비례하여 height 값을 설정 )

parameters

		default	type	설명
object	width	360	number	지정해준 값을 pixel 단위로 적용된다. options.use.resize = true 일때만 사용 가능하다.

default

type

설명

object

width

360

number

지정해준 값을 pixel 단위로 적용된다.

options.use.resize = true 일때만 사용 가능하다.

Usage

var styles = {
	object: {
		width: 900
	}
}

Demo

Publisher Go

counter

치수표시판의 스타일 설정

Parameters

			default	type	설명
counter	x		0	number	counter의 X 축 위치, default로 그려진 위치를 기준으로 좌, 우 위치 값
	y		0	number	counter의 Y 축 위치, default로 그려진 위치를 기준으로 상, 하 위치 값
	width		80	number	counter의 가로 넓이, 픽셀단위 (pixel)
	height		40	number	counter의 세로 높이, 픽셀단위 (pixel)
	radius		2	number	counter의 border-radius 조절
	color		'#fcfcfc'	string	counter영역의 배경 색상
	border		'#bdc2ca'	string	counter의 테두리 색상
	text	family	'LCDMono'	string	counter 내의 텍스트 영역 글씨체 (font-family)
		size	1	number	counter 내의 텍스트의 크기, default로 그려진 크기의 비율에 근거하여 비례 (font-size)
		weight	800	number \|\| string	counter 내의 텍스트 영역 text두께 (font-weight)
		color	'#484b4e'	string	counter 내의 텍스트 영역 text 색상

Usage

var styles = {
	counter : {
		x: -10 ,
		y: 20 ,       
		width : 120,       
        height : 60,
		r: 2,
		color : '#fcfcfc',
		border : '#bdc2ca',
		text : {
			family : 'Gulim',
			size : 1,
			weight : 'bold',
			color:'#484b4e'
		}
	}
}

Demo

Publisher Go

axis

눈금 및 치수와 관련된 스타일 설정

Parameters

			default	type	설명
axis	block		10	number	눈금 수
	interval		4	number	눈금 간격
	text	num	5	number	축의 치수를 나타내는 텍스트 영역의 수
		family	'LCDMono'	string	축의 치수를 나타내는 텍스트의 글씨체 (font-family)
		size	12	number	축의 치수를 나타내는 텍스트의 글씨 크기(font-size)
		weight	"bold"	number \|\| string	축의 치수를 나타내는 텍스트의 글씨 두께 (font-weight)
		align	"end"	string	축의 치수를 나타내는 텍스트의 글씨의 정렬 (text-aligin)
		color	'#797f85'	string	축의 치수를 나타내는 텍스트의 글씨 색상
	long_bar	color	'#a3aab1'	string	축의 치수를 가르키는 눈금의 색상
		length	15	number	축의 치수를 가르키는 눈금의 길이
	short_bar	color	'#c3c8cd'	string	축의 눈금의 색상
		length	7.5	number	축의 눈금의 길이

Usage

var styles = {
		axis : {
		block : 10 ,
		interval : 4 ,
		text : {
			num : 5,
			family: 'gulim',
			size: 12,
			weight: 800,
			align: "end",
			color : "#797f85"
		},
		long_bar : {
			color: "#a3aab1",
			length : 15
		},
		short_bar : {
			color: "#c3c8cd",
			length: 7.5
		}
	},
}

Demo

Publisher Go

thermometer

Thermoemter 와 관련된 스타일 설정

Parameters

			default	type	설명
thermometer	prevBackground	color	'#fcfcfc'	string	이전 값 > 현재값 일때, 보이는 배경색상
		border	'none'	string	이전 값 > 현재값 일때, 보이는 테두리
	prevBar	size	1	number	이전 데이터 값을 나타내는 잔상의 두께
		color	'#ff6360'	string	이전 데이터 값을 나타내는 잔상의 색상
		opacity	0.5	number	이전 데이터 값을 나타내는 잔상의 투명도
	bottom	color	'#ff6360'	string	thermometer 밑부분에 색상 (원모양)
		border	'#bcc7d4'	string	thermometer 밑부분에 테두리 (원모양)
	back	color	'#fcfcfc'	string	thermometer의 배경 색상
		border	'#bcc7d4'	string	thermometer의 테두리 색상
	bar	color	'100-#ff6360-#ff908e'	string	현재 데이터를 표시한 bar의 색상
		border	'none'	string	현재 데이터를 표시한 bar를 둘러싼 테두리 색상

Usage

var styles = {
	thermometer: {
		prevBackground : {
			color : '#fcfcfc',
			border : 'none'
		},
		prevBar: {
			size: 3,
			color : '#ff6360',
			opacity: 0.7

		},
		bottom: {
			color : '#ff6360',
			border : 'none'

		},
		back: {
			color : '#ff6360',
			border : 'none'

		},
		bar: {
			color : '#ff6360',
			border : 'none'

		}
	}
}

Demo

Publisher Go

pointer

cylinder 의 최대값, 평균값, 타겟값 styles

pointer.max

options.use.max == true 인 경우, max값 styles

parameters

				default	type	설명
pointer	max	bar	color	'#ff625f'	string	max값을 나타내는 선의 색상
			length	10	number	max값을 나타내는 선의 길이
		font	size	10	number	max 글씨의 크기
			color	'#ff625f'	string	max 글씨의 색상
			align	'start'	string	max 글씨의 정렬
			family	'Nanum Gothic'	string	최대값의 글씨 타입

pointer.avg

options.use.avg== true 인 경우, 평균값 styles

parameters

				default	type	설명
pointer	avg	bar	color	'#2bcdba'	string	평균값을 나타내는 선의 색상
			length	10	number	평균값을 나타내는 선의 길이
		font	size	10	number	평균값의 글씨 크기
			color	'#2bcdba'	string	평균값의 글씨 색상
			align	'start'	string	평균값의 글씨 정렬
			family	'Nanum Gothic'	string	평균값의 글씨 타입

pointer.target

target값 styles ( ※ options.use.target을 true 설정한 경우에만 사용이 가능합니다. )

parameters

			default	type	설명
pointer	target	color	'#8394a6'	string	target값을 표시하는 마크의 색상

Usage

var styles = {
	pointer: {
		max: {
			bar : {
				color : '#ff625f',
				length : 10
			},
			font : {
				size : 10,
				color : '#ff625f',
				align : 'start'	,                
				family : 'Gulim'
			}
		},
		avg: {
			bar : {
				color : '#2bcdba',
				length : 10
			},
			font : {
				size : 10,
				color : '#2bcdba',
				align : 'start'	,                
				family : 'Gulim'
			}
		},
		target: {
			color : '#8394a6'
		}
	}
}

Demo

Publisher Go