0.5.2 • Published 9 months ago
tisp-gadget v0.5.2
Gadget 사용하기
설치방법
npm install tisp-gadget
사용방법
import React, {useState,useEffect} from 'react';
import {GadgetDashboard} from "tisp-gadget";
export const App = () => {
const load = (dashbNo,callfunction) => {
}
const save = (l) => {
}
const updateLayout = (data) => {
}
const remove = (dashbNo,uiNo,removed) => {
}
return (
<div>
<h1>Welcome to Meteor!</h1>
<div >
<GadgetDashboard
editable={true} dashbNo={1}
updateLayout={updateLayout}
saveLayout={save}
removeLayout={remove}
loadLayout={load}
config={{
baseUrl:"x.x.x.x:11232/", vworldKey:"dfdf-CC91-dfwef-9404-wefewf",
iconList:['CEMS.MainDashboardElectricIcon.png', 'CEMS.MainDashboardFacilityIcon.png',
'CEMS.MainDashboardGasIcon.png', 'CEMS.MainDashboardHeatIcon.png',
'CEMS.MainDashboardMotorIcon.png',
'air_icon.png', 'battery_yellow.png', 'carBattery_blue.png',
'cemslogo.png','icon_energy_1.png','icon_energy_2.png',
'logo192.png','logo512.png','water_default.png','water_icon.png',
'waterTank_default.png'],
dataMart:'tispDataMart'
}}>
</GadgetDashboard>
</div>
</div>
)
}
editable = true/false 편집 모드
dashbNo = 화면번호를 입력
updateLayout, saveLayout, removeLayout = layout 데이터를 DB에 업데이트, 저장, 삭제 하는 함수를 지정
loadLayout = DB에 저장된 layout호출 함수
config :
baseUrl = 컴포넌트 내에서 호출할 url 주소
dataMart = 컴퍼넌트 내에서 호출할 데이터마트 api 주소 - baseUrl + dataMart 형태로 호출함
vworldKey = 지도 컴포넌트 사용시 사용할 키
iconList = 컴포넌트 내에서 사용할 아이콘 파일 목록, 경로 포함
Gadget 컴포넌트 개발 방법
Gadgets 내에 분류별 폴더 생성
UI 부분과 디자인 옵션 부분으로 나눠서 생성
DesignSelecter
디자인 부분은 아래 컴포넌트를 사용
<DesignSelecter
options={props.options}
colors={[
{name:"배경색",id:"bgColor"},
{name:"x축 색상",id:"xColor"},
{name:"y축 색상",id:"yColor"},
{name:"라벨색상 색상",id:"labelColor"},
{name:"그리드라인 색상 색상",id:"glColor"},
]}
texts={[
{name:"제목",id:'title'},
{name:"부제목",id:'subTitle'},
{name:"x축 두께",id:'xGridlineWidth'},
{name:"y축 두께",id:'yGridlineWidth'},
]}
numbers={[]}
selects={[
{name:"차트 종류",id:'chartType',list:['line','spline','area','areaspline','bar','column','scatter','pie','bubble','packedbubble','heatmap','treemap','tilemap']},
{name:"y값 스택종류",id:'stacking',list:['don\'t stack','normal','percent']},
{name:"x값 타입",id:'xType',list:['linear','logarithmic','datetime','category']},
{name:"y값 타입",id:'yType',list:['linear','logarithmic','datetime','category','treegrid']},
{name:"범례정렬",id:'legendAlign',list:['left','right','center']},
]}
checkboxs={[
{name:"범례",id:'legendEnabled'},
]}
/>
색, 텍스트, 숫자, 콤보셀렉트, 체크 박스를 자동으로 생성해줌
여기서 name은 UI 화면상 명칭, id 는 아래 Gadget의 designOptions state의 key 와 동일하게 구성
BaseDataMart 사용
컴포넌트의 데이터 마트는 아래와 같이 위에 디자인 컴포넌트와 함께 사용
<BaseDataMart {...props}>
<DesignSelecter .../>
</BaseDataMart>
UI Gadget 개발
모든 Gadget 필수 state 항목
const [api, setApi] = useState('');
const [apiObject, setApiObject] = useState('data')
const [designOptions, setDesignOptions] = useState({
title:'',subTitle:'',bgColor:"#34495e",labelColor:'white',xColor:"#46627f",yColor:"#46627f",glColor:"#46627f",xGridlineWidth:1, yGridlineWidth:1,
xType:'linear',yType:'linear',chartType:'line',stacking:'don\'t stack',unit:'',legendAlign:'center',legendEnabled:true,
})