wicket で 何か graph とか表示できるものを探してたのですが、
wicket stuff に dashboard というのが
あったので、試しにExample を動かしてみました。 結果を記載します。

Example の 起動方法

見つけたはいいが、どういう代物がイマイチよくわからないので、
Examapleを起動してみます。
My環境では以下の手順で起動できました。

1. wicket core を git cloneする

wicket core を clone します。
サイズがでかいので、相当待たされます。

git clone https://github.com/wicketstuff/core.git

2. ディレクトリ移動

cd ./core/dashboard-parent/dashboard-examples

3. デプロイ

core/dashboard-parent at master · wicketstuff/core に、
記載がありますが、以下のコマンドの順序で実行しろと書いてありますが、 

mvn install
mvn jetty:run

mvn install

を実行したところ、以下のエラーが出ました。

Downloaded: https://repo.maven.apache.org/maven2/org/apache/maven/maven-artifact/2.2.1/maven-artifact-2.2.1.jar (79 KB at 32.5 KB/sec)
Downloaded: https://repo.maven.apache.org/maven2/org/apache/maven/maven-project/2.2.1/maven-project-2.2.1.jar (153 KB at 51.6 KB/sec)
[INFO] Required toolchain: jdk [ version='1.8' ]
[ERROR] No toolchain found for type jdk
[ERROR] Cannot find matching toolchain definitions for the following toolchain types:
jdk [ version='1.8' ]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 03:07 min
[INFO] Finished at: 2016-11-08T21:27:17+09:00
[INFO] Final Memory: 17M/66M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-toolchains-plugin:1.1:toolchain (default) on project wicketstuff-dashboard-examples: Cannot find matching toolchain definitions for the following toolchain types:
[ERROR] jdk [ version='1.8' ]
[ERROR] Please make sure you define the required toolchains in your ~/.m2/toolchains.xml file.
[ERROR] -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

見たことないエラーですが、toolchain というmaven-plugin の 設定ファイルを作って
と言っているようです。
Toolchains - Maven - Apache Software Foundation を参考に、
以下のような設定ファイルを作成しました。
${your jdk path} には、JDKのpathを設定してください。
jdk の vendor は oracle ですが、sun のまま突き進みます。

  • ~/.m2/toolchains.xml
<toolchains>
    <toolchain>
       <type>jdk</type>
       <provides>
           <version>1.8</version>
           <vendor>sun</vendor>
           <id>1.8</id>
       </provides>
       <configuration>
          <jdkHome>${your jdk path}</jdkHome>
       </configuration>
    </toolchain>
</toolchains>

上記ファイル作成後に、
再度、mvn install を実行。

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

で成功しました。
後は、以下コマンドを実行すると、 

cd demo
mvn jetty:run

DEVELOPMENT モードでexample が立ち上がります。 

********************************************************************
*** WARNING: Wicket is running in DEVELOPMENT mode.              ***
***                               ^^^^^^^^^^^                    ***
*** Do NOT deploy to your live server(s) without changing this.  ***
*** See Application#getConfigurationType() for more information. ***
********************************************************************

Example をいじる

1. 画面起動

http://127.0.0.1:8081/ にアクセスすると、
以下の画面が表示されます。
何もないです。右上に[Add Widget]リンクが表示されているので、
それをクリックします。

top page

2. Widget の選択画面

遷移先では、Widgetを追加できます。
選択できるのは以下になります。

  • LoremIpsum
    Text を 表示する Widgetです。

  • Chart (OpenFlashChart) Flash で グラフを描画する OpenFlashChart というライブラリを使ったWidget です。
    後述しますが、Chrome で 表示したところデフォルトでは使えませんでした。
    ライブラリ自体の使い方は、以下の記事が参考になります。
    Open Flash Chartを使ってみました : アシアルブログ

  • Chart (JqPlot) JQuery plugin として提供されている グラフライブライリを使ったWidgetです。
    ライブラリ自体の使い方は、以下の記事が参考になりました。
    jqPlot - jQuery プラグイン

  • JustGage 半円のグラフを出力できるWidget これだけで、
    サーバー監視するのも良いかもしれません。 映画のハッカーみたいなデザインを再現 JustGage

  • HighCharts wicketstuff-googlecharts を使ったwidget です。
    ライブラリ自体の使い方は、以下の記事が参考になります。
    wicketstuff-googlechartsを試してみる - Qiita

widget edit page

3. Widget をいろいろ表示してみる

2.に表示されている [Add widget] リンクをクリックしておいて、 Dashboard に 戻ると、以下のようなグラフが出力されます。

graph1 graph2 graph3

4. OpenFlashChart がChrome のデフォルト設定だと表示されないので、表示させようとしたが、表示されない。。

Chrome で Flash Player を有効にする方法 でFlash Player を有効化しましたが、表示されず。。

blog.rettuce.com » ChromeのローカルでExternalInterfaceが動かない。
を試してみたのですが、これでも動かず。。

以下のサポート終了が影響しているのかもしれません。
Chrome でプラグインベースのコンテンツが動作しない - Chrome ヘルプ

一旦諦めます。

5. Widgetの機能についての説明

Widget の右側についているボタンについての説明です。
左から

  • ウィンドウアイコン
    別ウィンドウで、グラフが開きます。

  • 更新 グラフが更新されます。

  • 鉛筆マーク グラフの出力形式を変更できます。
    中身の実装は自前でやる形になります。クリックすると、
    以下、プルダウンが表示されgraphの選択が出来ます。
    edit links

  • Xマーク Widget を削除できます。

features widget

6. 感想

  • HighCharts と、JustGage はいい感じに思います。 Jqplot も 描画はできる。

  • OpenFlashChart は 動かない。。ということで、使わない。

  • nvd3 や、chart.js グラフを描画できるようにしたい。

とか考えました。

実装の説明もなく、上っ面のみの話になったので、
実装についても、そのうち書きたいと思います。

以上です。

コメント

カテゴリー

最近の投稿