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,
})

designOptions 에 모든 속성을 정의하고 여기 정의된 속성값은 모두 에서 수정 할 수 있음.