Yellowfin 대시보드를 포함한 외부 파일에서 그래프 표를 표시 전환

8524 단어 임베디드yellowfin자바스크립트dom

개요



전회는 Yellowfin의 코드 모드 대시보드에서 보고서 그래프 차트를 일괄적으로 전환 의 기사로 대시보드상에 버튼을 두고 리포트의 전환을 했습니다만, EOM의 경우 등, 자사의 제품에 짜넣고 싶은 경우는 HTML 파일등에 대시보드를 묻어 거기로부터 HTML 위의 버튼으로 제어해 가게 됩니다.
이번은, 전회의 흐름을 답습하면서, DOM을 구사해 실현해 갑니다.
아래의 gif 파일에서는 이해하기 어렵지만 왼쪽 상단에 클릭 버튼이 있습니다.


이전 준비



적절한 대시보드를 준비하고 해당 대시보드의 UUID를 가져옵니다. 공유를 클릭하여 퍼가기 태그에서 dashUUID= 뒤에 82b33f61-7ce9-4e83-b26a-425520124d49를 둡니다.


액세스할 HTML 파일을 작성하는 방법



첫 번째 스크립트 태그에서 Yellowfin 서버의 JSAPIv3을 로드합니다. 적절한 도메인을 아래 코드에서 변경하십시오. CORS에서 오류가 발생하는 경우 여기를 참조하십시오. CORS 설정을 수행하고 webserver를 통해 REST로 Yellowfin 서버에 액세스
포함된 버튼을
태그 집합으로 만듭니다.
또한 대시보드를 표시할 영역을
로 확보합니다.

스크립트의 흐름으로서는 대시보드를 로드한 후, 사용되고 있는 리포트의 이름을 취득해, 버튼을 클릭하는 것으로 DOM을 이용해 각각의 리포트의 display-type를 변경하고 있습니다.
자세한 내용은 코드로 확인하십시오.

enbbededDashboard.html
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css" id="style0"></style>
</head>
<script type="text/javascript" src="http://localhost:8940/JsAPI/v3"></script>
<body>
<div id="text-button">
    <button id="btn">クリック</p>
</div>
<div id="dashboard"></div>

<script>
    var reports;
    window.yellowfin.init().then(() => {
        window.yellowfin.loadDashboard({
            dashboardUUID: '82b33f61-7ce9-4e83-b26a-425520124d49',//控えたdashUUIDを指定します
            element: 'div#dashboard'
        }).then(dashboard => {

            let reportNames = [];
            reportDefinitions = dashboard.reports.reportDefinitions;
            Object.keys(reportDefinitions).forEach(key =>{
                reportNames.push(reportDefinitions[key].reportInfo.name);
            })

            let btn = document.getElementById("text-button");
            btn.addEventListener('click', () => {
                reportNames.forEach(reportName =>{
                    if (document.getElementsByName(reportName)[0]) {
                        let currentDisplay = document.getElementsByName(reportName)[0].getAttribute('display-type');
                        if (currentDisplay === "CHART") {
                            currentDisplay = "REPORT";
                        } else {
                            currentDisplay = "CHART";
                        }
                        document.getElementsByName(reportName)[0].setAttribute('display-type', currentDisplay);
                    }
                });
            });
        });
    });
</script>
</body>
</html>

감상



이것으로 임베디드 대시보드에서도 보다 인터랙티브한 표현이 가능하게 되어, 편입시에 도움이 되지 않을까라고 느끼고 있습니다.
wolfSSL 상호 인증 API
ATmega328PB 사용 (3) PWM으로 LED를 켜기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage