20210912 - Oracle JET Java Extension Toolkit 활용하기 - 게이지 Gauge

항상 어떻게 써볼수 있을까 고민만 하다가 드디어 APEX에 첫 JET 컴포넌트를 연결

1. JET 메인 페이지에서 활용하고자하는 컴포넌트 확인 및 데모 예제 확인 html, js, css

2. JET 사용할 수 있도록 페이지에 참조하기

Page - Javascript - File URLs

#JET_BASE_DIRECTORY#js/libs/require/require.js

#IMAGE_PREFIX#libraries/apex/requirejs.jetConfig.js

Page - Javascript - Execute when Page Loads

데모 코드의 demo.js 에 있는 것을 그대로 옮겼고 일부 수치만 수정했음

여기서 중요한 것은 Initial Code의 제일 아래 코드

document.getElementById("gauge-container")); >> 해당 리전의 static ID 지정 필요

require(["require", "exports", "knockout", "ojs/ojbootstrap", 

"ojs/ojconverter-number", "ojs/ojknockout", "ojs/ojgauge", "ojs/ojlabel", 

"ojs/ojformlayout"], function (require, exports, ko, ojbootstrap_1, 

ojconverter_number_1) {

      "use strict";

      

      class StatusMeterGaugeData {

          constructor() {

              this.value = ko.observable(20);

              this.value1 = ko.observable(20);

              this.value2 = ko.observable(40);

              this.value3 = ko.observable(40);

              this.value4 = ko.observable(60);

              this.value5 = ko.observable(80);

              this.value6 = ko.observable(80);

              this.value8 = ko.observable(80);

              this.value10 = ko.observable(80);

              this.value11 = ko.observable(80);

              this.value12 = ko.observable(80);

              this.transientValue = ko.observable();

              this.thresholdValues = [{ max: 3 }, { max: 7 }, {}];

              this.referenceLines = [

                  { value: 33, color: "red" },

                  { value: 67, color: "green" },

              ];

              this.customSvgStyle = { fill: `url(${document.URL}#pattern)` };

              this.customConverter = {

                  rendered: "on",

                  converter: new ojconverter_number_1.IntlNumberConverter({ style: "currency", currency: "USD" }),

              };

              this.customConverter1 = {

                  rendered: "on",

                  converter: new ojconverter_number_1.IntlNumberConverter({ decimalFormat:"short" }),

              };

              this.getReferenceTooltip = (data) => {

                  return {

                      insert: `Value: ${data.label}<br>Reference Lines: Low 33, Medium 67, High 100`,

                  };

              };

          }

      }

      ojbootstrap_1.whenDocumentReady().then(() => {

          ko.applyBindings(new StatusMeterGaugeData(), 

document.getElementById("gauge-container"));

      });

  });

Page - CSS - File URLs

#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css

#JET_CSS_DIRECTORY#alta/oj-alta-notag-min.css

Page - CSS - Inline : 데모 코드에 이미 있고 참조하여 조정

  .demo-circular-status-meter-large-custom {

    height:7.00rem;

  }

  .demo-circular-status-meter-large {

    height:6.25rem;

  }

  

  .demo-circular-status-meter-small {

    height: 3.75rem;

  }

  

  .demo-status-meter-svg-g {

    stroke:#336791;

    stroke-width:1.25

  }

  

  .demo-status-meter-svg-rect {

    fill: #ADD8E6;

  }

  .custom-font-size {

    font-size: 1.4rem;

    text-align: center;

    font-weight: bold;

  }

3. 리전 설정

Identification - Type : Static Content

Advanced - Static ID : gauge-container

Source - Text :

<div style="display: flex; justify-content: center; align-items: center;">

    <oj-form-layout max-columns="2">

        <div class="oj-sm-margin-4x-bottom">

        <oj-status-meter-gauge  

            class="demo-circular-status-meter-large-custom"

            min="0" max="10" value="3" step="1"

            labelled-by="indicatorThreshold"

            thresholds="[[thresholdValues]]"

            orientation="circular"

            metric-label="[[customConverter1]]" readonly>

        </oj-status-meter-gauge>

        <oj-label id="readOnly1" class="custom-font-size">

        <br>발주기준재고

        </oj-label>

        </div>

        <div class="oj-sm-margin-4x-bottom">

        <oj-status-meter-gauge  

            class="demo-circular-status-meter-large-custom"

            min="0" max="10" value="7" step="1"

            labelled-by="indicatorThreshold"

            thresholds="[[thresholdValues]]"

            orientation="circular"

            metric-label="[[customConverter1]]" readonly>

        </oj-status-meter-gauge>

        <oj-label id="readOnly2" class="custom-font-size">

        <br>실재고

        </oj-label>

        </div>

    </oj-form-layout>

</div>

4. 이렇게 활용하게 됩니다.

참고

1) https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=statusMeterGauge&demo=statusMeterGaugeCircular

2) https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojStatusMeterGauge.html

3) https://hardlikesoftware.com/weblog/2018/12/20/jet-spark-charts-in-apex-interactive-grid/

4) https://hardlikesoftware.com/weblog/2016/04/09/using-oracle-jet-from-apex/

5) https://www.doag.org/formes/pubfiles/10833102/2018-Dev-Hilary_Farrell-Extend_your_APEX_Application_with_Oracle_JET-Praesentation.pdf

6) https://community.oracle.com/tech/developers/discussion/4127557/any-idea-how-to-integrate-oracle-jet-in-oracle-apex-apart-from-built-in-jet-features

7) https://likeahouseafire.com/2018/01/05/dynamic-gauge-colors/