Page Comparison

...

「dashboard.xmlファイル」を編集します。
「\DashXML\WEB-INF\」に配置されている「dashboard.xmlファイル」を編集します。こちらのファイルは、ダッシュボードを構築するために使用するファイルです。以下のように設定してください。

Code Block

theme	Eclipse
language	xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<application-definition>
 
    <!-- Start Dashboard -->
    <dashboard>
        <id>1</id>
 
 
    </dashboard>
 
</application-definition>

「dashboard.cssファイル」を編集します。
「\DashXML\css\」に配置されている「dashboard.cssファイル」を編集します。こちらのファイルは、ダッシュボードにスタイルを適用するために使用します。以下のように設定してください。

Expand

title	こちらをクリックして展開する

Code Block

theme	Eclipse
language	css

html {
    height: 100%;
}
body {
    font-family: sans-serif;
    background-color: #F5F5F5;
    background-image: url("../images/Background.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    margin: 0px;
    position: relative;
    height: 100%;
}
.main {
    width: 1275px;
    margin: auto;
    border: 0px solid #FFFFFF;
    background-color: #F5F5F5;
    padding: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
    height: auto;
    border-right: 3px solid rgba(51, 51, 51, 0.5);
    border-left: 3px solid rgba(51, 51, 51, 0.5);
    border-bottom: 3px solid rgba(51, 51, 51, 0.5);
    -webkit-background-clip: padding-box; /* ensures transparency in border for Safari */
    background-clip: padding-box; /* ensures transparency in border for IE9+, Firefox 4+, Opera, Chrome */
}
.logo{
    position: relative;
    top: 0px;
    left: 0px;
    width: 200px;
}
.copyright {
    font-size: 11px;
    color: #555555;
    text-align: center;
    float: left;
    width: 100%;
}
/* Report Styles */
.reportDisplay {
    position: relative;
    page-break-inside: avoid;
}
.reportHtml {
    height: 100%;
    width: 100%;
}
.reportTitle {
    padding: 0px 0px 0px 0px;
    color: #555555;
    font-size: 24px;
    text-align: center;
}
.reportHolder {
    height: 450px;
    margin-bottom: 50px;
}
.banner {
    width: 1024px;
    float: left;
    overflow: hidden;
    margin-bottom: 25px;
}
.wide {
    width: 1024px;
    float: left;
    overflow: hidden;
}
.wide .reportHolder, .halfSummary .reportHolder {
    height: 300px;
}
.half{
    width: 510px;
    float: left;
    overflow: hidden;
}
.halfSummary{
    width: 510px;
    float: left;
    overflow: hidden;
    height: 400px;
}
.textWidget {
    color: #666666;
}
 
/* sub tabs */
.subTabs {
    clear: both;
}
/* Sub Tab Button Selectors */
.subTabSelection {
    width: 200px;
    display: table;
    border-collapse: separate;
    table-layout: fixed;
    overflow: hidden;
    position: relative;
    border-spacing: 0px 1px;
    background-color: #CCCCCC;
    float: left;
    height: 100%;
}
.subTabContainer {
    float: left;
    width: 1023px;
    padding: 25px 25px 10px 25px;
    margin-top: -230px;
    border-left: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}
.subTabSelection .subTabSelector {
    display: table-row;
    background: #F5F5F5;
    cursor: pointer;
    position: relative;
}
.subTabSelection .subTabMain {
    height: 90px;
    overflow: hidden;
    position: relative;
    padding: 10px;
}
.subTabSelection  .selected {
    background: #FFFFFF;
}
.subTabSelection .subTabTitle{
    color: #555555;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    margin-top: 65px;
}
.subTabSelection .subTabIcon {
    position: absolute;
    top: 6px;
    left: 45px;
    width: 110px;
    text-align: center;
}
/* Inactive Icons */
.subTabSelection .subtabCompactIcon, .subTabSelection .subtabCompactIcon:after{
    content: url("../images/Compact_Off.png");
}
.subTabSelection .subtabHybridIcon, .subTabSelection .subtabHybridIcon:after{
    content: url("../images/Hybrid_Off.png");
}
.subTabSelection .subtabMiniIcon, .subTabSelection .subtabMiniIcon:after{
    content: url("../images/Minivan_Off.png");
}
.subTabSelection .subtabSedanIcon, .subTabSelection .subtabSedanIcon:after{
    content: url("../images/Sedan_Off.png");
}
.subTabSelection .subtabSuvIcon, .subTabSelection .subtabSuvIcon:after {
    content: url("../images/SUV_Off.png");
}
.subTabSelection .subtabSummaryIcon, .subTabSelection .subtabSummaryIcon:after{
    content: url("../images/Summary_Off.png");
}
/* Active/Selected Icons */
.subTabSelector.selected .subtabCompactIcon, .subTabSelector.selected .subtabCompactIcon:after {
    content: url("../images/Compact_On.png");
}
.subTabSelector.selected .subtabHybridIcon, .subTabSelector.selected .subtabHybridIcon:after{
    content: url("../images/Hybrid_On.png");
}
.subTabSelector.selected .subtabMiniIcon, .subTabSelector.selected .subtabMiniIcon:after{
    content: url("../images/Minivan_On.png");
}
.subTabSelector.selected .subtabSedanIcon, .subTabSelector.selected .subtabSedanIcon:after{
    content: url("../images/Sedan_On.png");
}
.subTabSelector.selected .subtabSuvIcon, .subTabSelector.selected .subtabSuvIcon:after{
    content: url("../images/SUV_On.png");
}
.subTabSelector.selected .subtabSummaryIcon, .subTabSelector.selected .subtabSummaryIcon:after{
    content: url("../images/Summary_On.png");
}
/* Map Navigation Buttons */
.mapNav {
    display: block !important;
    position: relative;
    width: 120px;
    height: 90px;
    right: 10px;
    bottom: 160px;
    color: #393737;
    text-align: center;
    float: right;
}
.mapUp {
    position: absolute;
    top: 6px;
    right: 40px;
    content: url("../images/mapNavUp.png");
    cursor: pointer;
}
.mapDown {
    position: absolute;
    top: 59px;
    right: 40px;
    content: url("../images/mapNavDown.png");
    cursor: pointer;
}
.mapLeft {
    position: absolute;
    top: 7px;
    right: 92px;
    content: url("../images/mapNavLeft.png");
    cursor: pointer;
}
.mapRight {
    position: absolute;
    top: 7px;
    right: 39px;
    content: url("../images/mapNavRight.png");
    cursor: pointer;
}
.mapZoomIn {
    position: absolute;
    top: 6px;
    right: 3px;
    content: url("../images/mapZoomIn.png");
    cursor: pointer;
}
.mapZoomOut {
    position: absolute;
    top: 49px;
    right: 3px;
    content: url("../images/mapZoomOut.png");
    cursor: pointer;
}
 
/* Report Loading */
.loadingDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    display: block;
    top: 0px;
    left: 0px;
    z-index: 1000;
}
.loadingDiv:before {
    content: "\f110";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 22px;
    color: #444444;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 50px);
}
.loadingDiv:after {
    content: "Loading";
    color: #444444;
    font-size: 22px;
    font-family: sans-serif;
    margin-left: 30px;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 50px);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
 
/* Popularity Slider */
.popularityRows {
    padding-top: 15px;
    width: 510px;
}
.popularityRowSUV, .popularityRowcompact, .popularityRowsedan, .popularityRowhybrid, .popularityRowmini-van {
    text-align: right;
    width: 100%;
}
.dimName {
    float: left;
    color: #555555;
    font-size: 20px;
    margin-right: 15px;
    width: 80px;
    margin-top: 3px;
}
.description {
    text-align: right;
    clear: both;
    color: #555555;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 15px;
    width: 500px;
}
.loadingBar {
    float:left;
    width: 410px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin-top: 10px;
    box-shadow: 1px 1px #999999;
}
.progressBar {
    height:10px;
    background-color: #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 0px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    float:left;
    margin-left: -1px;
    box-shadow: 1px 1px #999999;
}
 
.handle {
    width: 18px;
    height: 18px;
    margin-top:-4px;
    margin-left: -4px;
    float:left;
    border-radius: 10px;
    box-shadow: 3px 1px #999999;
    background-color: #0051A4;
}

Yellowfin内のレポートを配置します。
このシナリオでは、日付フィルターを持つ単一のレポートを使用して、ダッシュボードを作成します。Yellowfinを起動して、日付の期間指定のフィルター（の間(〜)の日付フィルター）を持つレポートを検索するか、作成してください。今回例として使用するレポートは、以下の通りです。

フィルターとレポートのUUIDを検索します。
DashXMLは、これらのシステムUUIDを介して、コンテンツコンポーネントを参照します。今回の例において、これらを配置するために、以下の項目を実行してください。
　a. いくつかのフィルター値（設定する値は何でも構いません。空欄にだけはしないでください）を適用した後に、レポートを実行する。
　b. レポート詳細ウィンドウを開く。
　c. レポートURLをコピーする。
　d. レポートURLをテキストファイルに貼り付け、以下の通りにUUIDを配置する。

URL	UUID	説明
http://localhost/RunReport.i4?reportUUID=39fc0f87-77c8-4a5b-aec3-2a04ed78bae3&primaryOrg=1&clientOrg=1&filterUUID9d1dc0bb-ab9a-4852-b408-a9a6b94af66a=2015-09-01%5C%7C2015-09-30		これは、レポートの絶対URLです。ここから必要なレポートUUIDや、フィルターUUIDを配置することができます。
http://localhost/RunReport.i4?reportUUID=39fc0f87-77c8-4a5b-aec3-2a04ed78bae3&primaryOrg=1&clientOrg=1&filterUUID9d1dc0bb-ab9a-4852-b408-a9a6b94af66a=2015-09-01%5C%7C2015-09-30	39fc0f87-77c8-4a5b-aec3-2a04ed78bae3	これは、ダッシュボード上でレポート結果を表示するために、DashXML内で参照する、レポートUUIDです。
http://localhost/RunReport.i4?reportUUID=39fc0f87-77c8-4a5b-aec3-2a04ed78bae3&primaryOrg=1&clientOrg=1&filterUUID9d1dc0bb-ab9a-4852-b408-a9a6b94af66a=2015-09-01%5C%7C2015-09-30	9d1dc0bb-ab9a-4852-b408-a9a6b94af66a	これは、ダッシュボード上に表示されるレポートのフィルターに値を渡すために、DashXML内で参照するフィルターUUIDです。

「dashboard.xmlファイル」内で、ダッシュボードを開発します。
サンプルレポートとフィルターを使用して、簡単なダッシュボードを作成するために、以下を完成させる必要があります。
a. ダッシュボードを設定します。
　設定を始めるためには、<application-definition> と<dashboard>要素が必要です。最初のダッシュボードを作成しているので、IDは「1」にします。

Code Block

theme	Eclipse
language	xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<application-definition>
 
    <!-- Start Dashboard -->
    <dashboard>
        <id>1</id>
 
    </dashboard>
 
</application-definition>

b. ユーザープロンプトの日付フィルターを準備します。
　ユーザーにフィルター値を要求するために、<filter>要素を含める必要があります。今回の例では、ユーザーのために、4つの考え得るオプションを日付フィルターとして設定しました。：すべての時間、年、月、カスタムです。
「すべての時間」フィルターは、データベース内のすべてのデータを包括できるように、XML内で1900年〜2100年の200年間を範囲として定義しています。「年」と「月」フィルターは、レポートを実行した際に現在の日付と関連して動的に設定され、XMLで事前に定義された範囲を使用して設定しています。「カスタム」の範囲は、完全にユーザープロンプトとして残しており、ユーザーの選択肢として、開始日と終了日を指定できるようにしています。

Code Block

theme	Eclipse
language	xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<application-definition>
    <!-- Start Dashboard -->
    <dashboard>
        <id>1</id>
        <!-- Year Filters -->
        <filter>
            <sync>true</sync>
            <datatype>DATE</datatype> <!-- This is the data type expected for the filter, in this case we're looking for dates. -->
            <name>dateFilter</name> <!-- This is the name of the filter, to be referenced by reports in their filterMap elements -->
            <operator>BETWEEN</operator> <!-- This is the date filter operator that we used in Yellowfin. This means we are expecting a start and end date. -->
            <styleClass>topFilter</styleClass> <!-- This is the CSS class name we've assigned to the filter for styling purposes from our dashboard.css file. -->
            <options>  <!-- This is the first option available to the user - a hard coded date range to cover all dates. -->
                <title>All Time</title>
                <value>1900-01-01\|2100-01-01</value>
                <defaultOption>true</defaultOption>
            </options>
            <options>  <!-- This is the second option available to the user - a predefined range that covers the year to date based on current date. -->
                <title>Year</title>
                <typeCode>PREDEF</typeCode>
                <value>YEARTODATE</value>
            </options>
            <options>  <!-- This is the third option available to the user - a predefined range that covers the month to date based on the current date.-->
                <title>Month</title>
                <typeCode>PREDEF</typeCode>
                <value>MONTHTODATE</value>
            </options>
            <options>  <!-- This is the last option available to the user - a user prompt date calendar picker where they can define two custom dates. -->
                <title>Custom</title>
                <prompt>true</prompt>
            </options>
        </filter>
 
    </dashboard>
 
</application-definition>

c. レポートとフィルターマップを設定します。
　レポートを表示し、ユーザーが選択したフィルター値を渡すためには、<report> と <filterMap> 要素を含める必要があります。要素を配置するために、前項で定義したUUIDを使用して、グラフとして表示するようにレポートを定義し、CSSファイルから「canvasChartクラス」を使用してスタイルを適用します。フィルターマップは、レポート上で検索したフィルターUUIDを、前項のステップで定義した「dateFilter」とリンクさせます。

Code Block

theme	Eclipse
language	xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<application-definition>
    <!-- Start Dashboard -->
    <dashboard>
        <id>1</id>
        <!-- Year Filters -->
        <filter>
            <sync>true</sync>
            <datatype>DATE</datatype>
            <name>dateFilter</name>
            <operator>BETWEEN</operator>
            <styleClass>topFilter</styleClass>
            <options>
                <title>All Time</title>
                <value>1900-01-01\|2100-01-01</value>
                <defaultOption>true</defaultOption>
            </options>
            <options>
                <title>Year</title>
                <typeCode>PREDEF</typeCode>
                <value>YEARTODATE</value>
            </options>
            <options>
                <title>Month</title>
                <typeCode>PREDEF</typeCode>
                <value>MONTHTODATE</value>
            </options>
            <options>
                <title>Custom</title>
                <prompt>true</prompt>
            </options>
        </filter>
 
        <!-- Canvas Chart -->
        <report>
            <display>CHART</display>  <!-- This is the display type for the report. CHART means that the report will be displayed as a chart. -->
            <uuid>39fc0f87-77c8-4a5b-aec3-2a04ed78bae3</uuid>  <!-- This is the report UUID used to retrieve the report results from Yellowfin. -->
            <styleClass>canvasChart</styleClass>  <!-- This is the CSS class we've assigned to the filter for styling purposes from our dashboard.css file. -->
            <filterMap>
                <filterUUID>9d1dc0bb-ab9a-4852-b408-a9a6b94af66a</filterUUID>  <!-- This is the filter UUID used to pass filter values to the correct filter on the report in Yellowfin. -->
                <mapToFilter>dateFilter</mapToFilter>  <!-- This is the name of the filter the values are coming from, defined in the filter element earlier. -->
            </filterMap>
        </report>
 
    </dashboard>
 
</application-definition>

変更が完了したら、ファイルを保存します。

d. DashXMLコンテンツを読込みます。
　Yellowfinは、メモリ内の「dashboard.xmlファイル」から、DashXMLのコンテンツ定義を格納します。変更内容を確実に使用するために、「reloadcontent.jsp ファイル」を起動して、これを更新する必要があります。これを実行するためには、ブラウザ上で以下のURLを読込んでください。
　http://<location of Yellowfin>/DashXML/reloadcontent.jsp ：例）http://localhost:8080/DashXML/reloadcontent.jsp

　正しく実行されると、以下のメッセージが表示されます。
　

　正しく実行できなかった場合は、エラーが表示されます。これは、UUIDの設定が正しくないことを意味します。
　

e. DashXMLのダッシュボードを読込みます。
　ダッシュボードを参照するためには、ブラウザ上で以下のURLを読み込みます。

　http://<location of Yellowfin>/DashXML/dashboard.jsp?id=<dashboard ID number> ：例）http://localhost:80/DashXML/dashboard.jsp?id=3

　すると、以下のように表示されるはずです。

　Image Added
　ご覧いただいているように、日付に書式を適用する必要があります。

f. フィルターにスタイルを適用します。

「dashboard.cssファイル」に、以下のスタイルを適用します。クラスがブラウザ内で開発ツールを通して要求されていることに気が付きます。

Code Block

theme	Eclipse
language	css

/* Top Nav Filters */.topFilter {
 height: 24px;
 line-height: 24px;
 padding-top: 14px;
 font-size: 12px;
}
.topFilter .filterOption {
 text-align: center;
 float: right;
 color: #393737;
 cursor: pointer;
 width: 70px;
 margin-left: 5px;
}
.topFilter .selected {
 background-color: #393737;
 color: #FFFFFF;
}
.topFilter .filterOption .customEntry {
 background-color : #393737;
 color: #FFFFFF;
 position: absolute;
 overflow: hidden;
 z-index: 100;
 margin-top: 5px;
 width: 115px;
}
.topFilter .filterOption .customEntry input{
 background-color : #FFFFFF;
 border: 0px;
 font-family: arial, sans-serif;
 font-size: 12px;
 color: #393737;
 height: 24px;
 width: 70px;
 line-height: 24px;
 margin: 12px 12px 0px 12px;
 padding: 0px 10px;
 text-align: center;
}
/* Date Entry */
.submitCustom {
 float: left;
 line-height: normal;
 margin: 10px 3px 10px 12px;
}
.cancelCustom {
 float: right;
 line-height: normal;
 margin: 10px 12px 10px 3px;
}
/* Date Picker */
.ui-datepicker {
 background-color : #FFFFFF;
 border: 1px solid #393737;
 color: #393737;
 font-family: arial, sans-serif;
 font-size: 12px;
 margin-top: 5px;
}
.ui-datepicker a{
 color: #393737;
}
.ui-datepicker .ui-datepicker-prev {
 left: 10px;
 top: 6px;
}
.ui-datepicker .ui-datepicker-next {
 right: 10px;
 top: 6px;
}
.ui-datepicker .ui-datepicker-prev:before {
 content: "\f104";
 color: #393737;
 display: inline-flex;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-size: 18px;
 cursor: pointer;
}
.ui-datepicker .ui-datepicker-next:before {
 content: "\f105";
 color: #393737;
 display: inline-flex;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-size: 18px;
 cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev-hover:before {
 content: "\f104";
 color: #393737;
 display: inline-flex;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-size: 18px;
 cursor: pointer;
}
.ui-datepicker .ui-datepicker-next-hover:before {
 content: "\f105";
 color: #393737;
 display: inline-flex;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-size: 18px;
 cursor: pointer;
 text-align: right;
}
.ui-datepicker .ui-datepicker-prev-hover {
 left: 10px;
 top: 6px;
}
.ui-datepicker .ui-datepicker-next {
 text-align: right;
}
.ui-datepicker .ui-datepicker-next-hover {
 right: 10px;
 top: 6px;
 text-align: right;
}

変更が完了したら保存をし、ブラウザのキャッシュをクリアして、ダッシュボードページを更新します。すると、以下のように表示されるはずです。

Image Added

フィルターを適用し、各項目でレポートが更新されることを確認してください。

...

Version	Old Version 11	New Version 12
Changes made by	Yellowfin Admin	Yellowfin Admin
Saved on	Aug 19, 2016	Aug 19, 2016

Versions Compared

Key