unageanu-jiji 0.1.0

data/html/js/result-page.js

@@ -0,0 +1,707 @@
+
+// ネームスペース
+namespace( "fx.ui.pages" )
+
+// 結果画面
+fx.ui.pages.ResultPage = function() {
+
+  this.elementPrefix = null;
+  this.elementId = null; // @Inject
+  this.processServiceStub = null; //@Inject
+
+  // 現在表示中のプロセスID // toで画面遷移したタイミングで設定される。
+  this.currentProcessId = null;
+
+  this.submenu = null;
+  this.dialog = null; // @Inject
+  this.topicPath = null; // @Inject
+}
+fx.ui.pages.ResultPage.prototype = {
+
+  /**
+   * ページを初期化する。
+   * ページ作成時に一度だけ呼び出すこと。
+   */
+  initialize: function(  ) {
+    this.submenu = new util.MenuBar( "submenu",  "submenu", "submenu", this.pageManager );
+    var self = this;
+    this.submenu.initialize( null, function() {
+      var m = this.id.match( /submenu\_(.*)/ );
+      if ( m ) {
+        self.submenu.to( m[1], {id:self.currentProcessId} );
+      }
+    } );
+  },
+  /**
+   * このページから画面を移動する際に呼び出される。
+   * 戻り値としてfalseを返すと遷移をキャンセルする。
+   */
+  from : function(toId) {
+    // ページを非表示
+    document.getElementById(this.elementId).style.display = "none";
+    this.topicPath.set( "" );
+    return true;
+  },
+  /**
+   * このページに画面を移動すると呼び出される。
+   */
+  to : function( fromId, param ) {
+
+    this.currentProcessId = param["id"];
+
+    // チャートの初期化準備
+    var swf = util.getSwf( "chart" );
+    var date = this.currentProcessId == "rmt" ? null : param.end ;
+    if ( fromId != "result" ) {
+      // チャートが未ロードの場合
+      // チャートのロード完了コールバックを受け取ってから初期化。
+      var self = this;
+      var global = function() { return this; }();
+      global.onChartLoaded = function() {
+        swf.initializeChart( self.currentProcessId, null, null, date );
+        delete global.onChartLoaded; // 登録した関数は消しておく。
+      }
+    } else {
+      // すでにロードされている場合、APIだけ呼び出す
+      swf.initializeChart( this.currentProcessId, null, null, date );
+    }
+
+    // ページを表示
+    document.getElementById(this.elementId).style.display = "block";
+
+    // 初期化
+    var msg = document.getElementById("bt-create_msg");
+    msg.innerHTML = "";
+    msg.style.display = "none";
+
+    this.submenu.to( "trade", param );
+
+    if ( param["id"] == "rmt"  ) {
+      this.topicPath.set( "リアルトレード:状況を見る" );
+    } else {
+      this.topicPath.set( "バックテスト:結果を見る:" + param["name"] );
+    }
+  }
+}
+
+// ログ画面
+fx.ui.pages.LogResultPage = function() {
+  this.elementId = null; // @Inject
+  this.outputServiceStub = null; //@Inject
+
+  var self = this;
+  this.updateButton = new util.Button("subpage-log__update", "update", function() {
+    self.update();
+  });
+  this.updateButton.setEnable( true );
+}
+fx.ui.pages.LogResultPage.prototype = {
+  /**
+   * このページから画面を移動する際に呼び出される。
+   * 戻り値としてfalseを返すと遷移をキャンセルする。
+   */
+  from : function(toId) {
+    // ページを非表示
+    document.getElementById(this.elementId).style.display = "none";
+    return true;
+  },
+  /**
+   * このページに画面を移動すると呼び出される。
+   */
+  to : function( fromId, param ) {
+    // ページを表示
+    document.getElementById(this.elementId).style.display = "block";
+    this.currentProcessId = param.id;
+    this.update();
+  },
+  update: function() {
+    var logEl = document.getElementById( "subpage-log_log" );
+    logEl.innerHTML= fx.template.Templates.common.loading;
+    this.outputServiceStub.get_log( this.currentProcessId, function( log ) {
+      logEl.innerHTML = "<pre style='line-height: 110%;'>" + log + "</pre>";
+    }, function(){}  ); // TODO
+  }
+}
+
+//トレード結果画面
+fx.ui.pages.TradeResultPage = function() {
+  this.elementId = null; // @Inject
+  this.tradeResultServiceStub = null; //@Inject
+  this.dialog = null; // @Inject
+  var self = this;
+  this.tradeListTable = new fx.ui.TradeListTable( "subpage-trade__list" );
+  this.tradeListTable.initialize();
+  this.agentResultListTable = new fx.ui.AgentResultListTable( "subpage-trade__agent-list" );
+  this.agentResultListTable.initialize();
+  this.updateButton = new util.Button("subpage-trade__update", "update", function() {
+    self.update();
+  });
+  this.updateButton.setEnable( true );
+}
+fx.ui.pages.TradeResultPage.prototype = {
+  /**
+   * このページから画面を移動する際に呼び出される。
+   * 戻り値としてfalseを返すと遷移をキャンセルする。
+   */
+  from : function(toId) {
+    // ページを非表示
+    document.getElementById(this.elementId).style.display = "none";
+    return true;
+  },
+  /**
+   * このページに画面を移動すると呼び出される。
+   */
+  to : function( fromId, param ) {
+
+    this.currentProcessId = param.id;
+    this.start = param.start;
+    this.end = param.end;
+
+    // ページを表示
+    document.getElementById(this.elementId).style.display = "block";
+
+    if ( param.id == "rmt" ) {
+      document.getElementById("subpage-trade__range").style.display = "block";
+    } else {
+      document.getElementById("subpage-trade__range").style.display = "none";
+    }
+
+    this.update();
+  },
+  update: function() {
+    var summaryEl = document.getElementById( "subpage-trade_summary" );
+
+    // 一覧対象の日時
+    var startDate = null;
+    var endDate = null;
+    if ( this.currentProcessId == "rmt" ) {
+
+      // フィールドに値が設定されていればその値を使う。
+      var y = document.getElementById("subpage-trade_range-year").value;
+      var m = document.getElementById("subpage-trade_range-month").value;
+      var d = document.getElementById("subpage-trade_range-day").value;
+      var ye = document.getElementById("subpage-trade_range-end-year").value;
+      var me = document.getElementById("subpage-trade_range-end-month").value;
+      var de = document.getElementById("subpage-trade_range-end-day").value;
+      if ( y && m && d && ye && me && de  ) {
+        if ( y.match(/^\d+$/) && m.match(/^\d+$/) && d.match(/^\d+$/)
+            && ye.match(/^\d+$/) && me.match(/^\d+$/) && de.match(/^\d+$/)) {
+          startDate = new Date( Number(y), Number(m)-1, Number(d)  ).getTime()/1000;
+          endDate = new Date( Number(ye), Number(me)-1, Number(de)  ).getTime()/1000;
+        } else {
+          this.dialog.show( "warn", {
+            message : "表示範囲に数値が入力されていません。",
+            buttons : [
+              { type:"ok" }
+            ]
+          } );
+          return;
+        }
+      } else {
+         // 入力がなければ今月のデータを表示
+        var now = new Date();
+        var end = new Date( now.getFullYear(), now.getMonth()+1, 0  );
+        startDate = new Date( now.getFullYear(), now.getMonth(), 1  ).getTime()/1000;
+        endDate = end.getTime()/1000;
+
+        // フィールドにも設定しておく
+        document.getElementById("subpage-trade_range-year").value = now.getFullYear();
+        document.getElementById("subpage-trade_range-month").value = now.getMonth()+1;
+        document.getElementById("subpage-trade_range-day").value = 1;
+        document.getElementById("subpage-trade_range-end-year").value = now.getFullYear();
+        document.getElementById("subpage-trade_range-end-month").value = now.getMonth()+1;
+        document.getElementById("subpage-trade_range-end-day").value = end.getDate();
+      }
+    } else {
+      // バックテストの場合、全テストが対象
+      startDate = this.start;
+      endDate = this.end;
+    }
+    // ロード中に変更
+    summaryEl.innerHTML= fx.template.Templates.common.loading;
+
+    var self = this;
+    // 終了時間はその日の終わりにする
+    this.tradeResultServiceStub.list( this.currentProcessId, "6h", startDate, endDate+60*60*25,  function( list ) {
+      // 集計
+      var value = self.aggregate(list); // 集計
+      summaryEl.innerHTML = fx.template.Templates.submenu.trade.summary.evaluate( value[0] );
+      // 一覧
+      self.tradeListTable.setData( list.sort( function( a,b ) {
+        return (b.date || 0) - ( a.date || 0);
+      }  ) );
+      self.agentResultListTable.setData( value[1] );
+
+    }, function(){}  ); // TODO
+  },
+  aggregate: function( list ) {
+    var pairList = {};
+    var all = this.init();
+    var traders =  {};
+    for ( var i=0,n=list.length;i<n;i++ ) {
+      p = list[i]
+      this.collect( p, all  );
+      // エージェント別
+      var t = p.trader || "(不明)";
+      if ( !traders[t] ) {
+          traders[t]  = this.init();
+      }
+      this.collect( p, traders[t]  );
+      
+      // 通貨ペア別集計
+      pairList[p.pair] = !pairList[p.pair] ? 1 : pairList[p.pair]+1;
+    }
+    // 通貨ペアの集計結果をフォーマット
+    all.pair = "";
+    for( var j in pairList ) {
+      if (typeof pairList[j] == "function" ) continue;
+      all.pair += fx.template.Templates.submenu.trade.pair.evaluate(
+          {pair:j,value:pairList[j]} );
+    }
+    all = this.finish( all, true );
+    var tmp = [];
+    for( var k in traders ) {  
+      traders[k] = this.finish( traders[k], false );
+      traders[k]["agentName"] = k;
+      tmp.push( traders[k] );
+    }
+    return [ all, tmp  ];
+  },
+  
+  /**
+   * 集計データの初期オブジェクトを作成。
+   */
+  finish: function(obj, decorate) {
+    // 平均損益
+    obj.avgProfitOrLoss = obj.total > 0 ? Math.round(obj.totalProfitOrLoss / obj.total) : 0;
+    // 平均保有期間
+    obj.avgRange = obj.commited > 0 ? obj.totalRange / obj.commited : 0 ;
+    obj.avgRange = Math.round(obj.avgRange/60);
+    obj.maxRange = Math.round(obj.maxRange/60);
+    obj.minRange = Math.round(obj.minRange/60);
+    // 勝率
+    obj.winRate = obj.total > 0 ? Math.round(obj.win*10000/obj.total)/100 : "-";
+    // プロフィットレシオ
+    obj.avgProfit = obj.win > 0 ? Math.round(obj.totalProfit/obj.win) : 0;
+    obj.avgLoss = obj.lose > 0 ? Math.round(obj.totalLoss/obj.lose) : 0;
+    obj.profitRatio = obj.avgLoss != 0 ? Math.round(obj.avgProfit*1000/(obj.avgLoss*-1))/1000 : 0;
+    
+    // 最大/最小系のデータが未設定出れば設定する。
+    var props = ["maxSize", "minSize","maxRange","minRange" ];
+    for ( i=0,n=props.length;i<n;i++ ) {
+      if ( !obj[props[i]] ) { obj[props[i]] =  0; }
+    }
+
+    // 価格を修飾
+    if ( decorate ) {
+      props = ["totalProfitOrLoss", "maxProfit", "maxLoss", 
+                   "avgProfitOrLoss","avgProfit","avgLoss","totalSwap"];
+      for ( i=0,n=props.length;i<n;i++ ) {
+        obj[props[i]] = this.decorateProfitOrLoss( obj[props[i]] );
+      }
+    }
+    return obj;
+  },
+  
+  /**
+   * 集計データの初期オブジェクトを作成。
+   */
+  init: function() {    
+    return {
+      total: 0,
+      commited: 0,
+      sell: 0, buy: 0,
+      win: 0, lose: 0, draw: 0,
+      totalProfitOrLoss: 0,
+      totalLoss: 0, totalProfit: 0,
+      totalSwap: 0, 
+      maxProfit: 0, maxLoss : 0,
+      totalRange: 0
+    }; 
+  },
+  
+  /**
+   * 集計する
+   * @param p ポジション
+   * @param obj 集計先
+   */
+  collect: function( p, obj  ) {
+    obj.total += 1;
+    if ( p.state==3 ) { // 約定済みの場合
+       obj.commited += 1; // コミット数
+    }
+    
+     // 勝敗
+     if ( p.profit_or_loss < 0 ) {
+       obj.lose += 1;
+     } else if ( p.profit_or_loss > 0 ) {
+       obj.win += 1;
+     } else {
+       obj.draw += 1;
+     }
+     // 統計
+     obj.totalProfitOrLoss += p.profit_or_loss;
+     obj.totalSwap +=  p.swap ? p.swap : 0;
+     if ( p.profit_or_loss > 0 ) {
+       obj.maxProfit = Math.max( obj.maxProfit, p.profit_or_loss) ;
+       obj.totalProfit += p.profit_or_loss;
+     }
+     if ( p.profit_or_loss < 0 ) {
+       obj.maxLoss = Math.min( obj.maxLoss, p.profit_or_loss) ;
+       obj.totalLoss += p.profit_or_loss;
+     }
+
+     // 種類
+     if ( p.sell_or_buy == "sell" ) {
+       obj.sell += 1;
+     } else {
+       obj.buy += 1;
+     }
+     // 取引量
+     obj.maxSize = obj.maxSize ?  Math.max( obj.maxSize, p.count) : p.count ;
+     obj.minSize = obj.minSize ? Math.min( obj.minSize, p.count) : p.count ;
+     // 保有期間
+     if ( p.fix_date ) {
+       var range = p.fix_date - p.date;
+       obj.totalRange += range;
+       obj.maxRange = obj.maxRange ?  Math.max( obj.maxRange, range) : range ;
+       obj.minRange = obj.minRange ? Math.min( obj.minRange, range) : range ;
+     }
+  },
+  
+  /**
+   * 損益を修飾する
+   */
+  decorateProfitOrLoss: function( profitOrLoss ) {
+    var cl = "draw";
+    if ( profitOrLoss > 0 ) {
+      cl = "win";
+    } else if ( profitOrLoss < 0 ){
+      cl = "lose";
+    }
+    return "<span class='" + cl + "'>" + ( profitOrLoss > 0 ? "+" : "" ) + profitOrLoss + "</span>";
+  }
+}
+
+//トレード結果一覧一覧テーブル
+fx.ui.TradeListTable = function(elementId) {
+  this.elementId = elementId; // @Inject
+  this.table = null;
+  this.ds = null;
+}
+fx.ui.TradeListTable.prototype = util.merge( util.BasicTable, {
+  initialize: function() {
+    var self = this;
+    var columnDefs = [
+      {key:"profit_or_loss", label:"損益", sortable:true, resizeable:true,width:70, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          + fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss(data) 
+          + "<div>"
+      } },
+      {key:"swap", label:"スワップ", sortable:true, resizeable:true, width:40, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          +  fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss( data || 0 ) 
+          + "<div>"
+      } },
+      {key:"sell_or_buy", label:"種類", sortable:true, resizeable:true,width:20, formatter: function( cell, record, column, data){
+        cell.innerHTML = data == "sell" ? "売" : "買";
+      } },
+      {key:"state", label:"状態", sortable:true, resizeable:true,width:50,  formatter: function( cell, record, column, data){
+        switch ( data ) {
+          case 0 :
+            cell.innerHTML = "注文中"; break;
+          case 1 :
+            cell.innerHTML = "所有中"; break;
+          case 2 :
+            cell.innerHTML = "決済注文中"; break;
+          case 3 :
+            cell.innerHTML = "決済済"; break;
+          case 4 :
+            cell.innerHTML = "ロスト"; break;
+          default :
+            cell.innerHTML = "不明"; break;
+        }
+      }},
+      {key:"pair", label:"通貨ペア", sortable:true, resizeable:true, width:50 },
+      {key:"rate", label:"レート", sortable:true, resizeable:true,width:50 },
+      {key:"fix_rate", label:"決済レート", sortable:true, resizeable:true,width:50,formatter: function( cell, record, column, data){
+        cell.innerHTML =  data ? data : "-";
+      } },
+      {key:"count", label:"数量", sortable:true, resizeable:true,width:30 },
+      {key:"trader", label:"エージェント", sortable:true, resizeable:true,width:50,formatter: function( cell, record, column, data){
+        cell.innerHTML =  data ? data : "-";
+      } },
+      {key:"date", label:"取引日時", sortable:true, resizeable:true,width:118, formatter: function( cell, record, column, data){
+          var d = new Date(data*1000);
+          cell.innerHTML =  util.formatDate(d);
+      } },
+      {key:"fix_date", label:"決済日時", sortable:true, resizeable:true,width:118, formatter: function( cell, record, column, data){
+        if (data) {
+          var d = new Date(data*1000);
+          cell.innerHTML =  util.formatDate(d);
+        } else {
+          cell.innerHTML =  "-";
+        }
+      }}
+    ];
+    self.ds = new YAHOO.util.DataSource([]);
+    self.ds.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
+    self.ds.responseSchema = {
+      fields: ["profit_or_loss", "swap", "sell_or_buy", "state", "pair", "rate", "fix_rate", "count","trader", "date", "fix_date"]
+    };
+    self.table = new YAHOO.widget.DataTable(self.elementId,
+      columnDefs, self.ds, {
+        selectionMode:"standard",
+        scrollable: true,
+        width:"620px"
+      }
+    );
+    this.sortBy = "date"; 
+    this.setBasicActions();
+  }
+});
+
+//トレード結果一覧一覧テーブル
+fx.ui.AgentResultListTable = function(elementId) {
+  this.elementId = elementId; // @Inject
+  this.table = null;
+  this.ds = null;
+}
+fx.ui.AgentResultListTable.prototype = util.merge( util.BasicTable, {
+  initialize: function() {
+    var self = this;
+    var columnDefs = [
+      {key:"agentName", label:"名前", sortable:true, resizeable:true,width:100 },
+      {key:"totalProfitOrLoss", label:"損益合計", sortable:true, resizeable:true,width:70, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          + fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss(data) 
+          + "<div>";
+      } },
+      {key:"totalSwap", label:"累計スワップ", sortable:true, resizeable:true,width:40, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          +  fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss( data || 0 ) 
+          + "<div>";
+      } },
+      {key:"total", label:"取引回数/約定済み", sortable:true, resizeable:true,width:30, formatter: function( cell, record, column, data){
+        cell.innerHTML = data  + "/" + record.getData().commited;
+      } },
+      {key:"sell", label:"売/買", sortable:true, resizeable:true,width:30, formatter: function( cell, record, column, data){
+        cell.innerHTML = data  + "/" + record.getData().buy;
+      } },
+      {key:"winRate", label:"勝率", sortable:true, resizeable:true,width:40, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>" + data  + "%<div>";
+      } },
+      {key:"maxProfit", label:"最大利益", sortable:true, resizeable:true,width:60, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          + fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss(data) 
+          + "<div>";
+      } },
+      {key:"maxLoss", label:"最大損失", sortable:true, resizeable:true,width:60, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          + fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss(data) 
+          + "<div>";
+      } },
+      {key:"avgProfitOrLoss", label:"平均損益", sortable:true, resizeable:true,width:50, formatter: function( cell, record, column, data){
+        cell.innerHTML = "<div style='text-align:right;'>"
+          + fx.ui.pages.TradeResultPage.prototype.decorateProfitOrLoss(data) 
+          + "<div>";
+      } },
+      {key:"profitRatio", label:"損益率", sortable:true, resizeable:true,width:40 }
+    ];
+    self.ds = new YAHOO.util.DataSource([]);
+    self.ds.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
+    self.ds.responseSchema = {
+      fields: ["agentName","totalProfitOrLoss", "totalSwap", "total", "sell", "winRate", "maxProfit", "maxLoss", "avgProfitOrLoss","profitRatio"]
+    };
+    self.table = new YAHOO.widget.DataTable(self.elementId,
+      columnDefs, self.ds, {
+        selectionMode:"standard",
+        scrollable: true,
+        width:"620px"
+      }
+    );
+    this.setBasicActions();
+  }
+});
+
+
+//テスト情報画面
+fx.ui.pages.InfoResultPage = function() {
+  this.elementId = null; // @Inject
+  this.processServiceStub = null; //@Inject
+  this.agentSelector = null; // @Inject
+  this.dialog = null; // @Inject
+}
+fx.ui.pages.InfoResultPage.prototype = {
+  /**
+   * ページを初期化する。
+   * インスタンス生成時に1度だけ実行すること。
+   */
+  initialize: function( ) {
+    // エージェント
+    this.agentSelector.initialize(null, true, 300);
+  },
+  /**
+   * このページから画面を移動する際に呼び出される。
+   * 戻り値としてfalseを返すと遷移をキャンセルする。
+   */
+  from : function(toId) {
+    // ページを非表示
+    document.getElementById(this.elementId).style.display = "none";
+    return true;
+  },
+  /**
+   * このページに画面を移動すると呼び出される。
+   */
+  to : function( fromId, param ) {
+    // ページを表示
+    document.getElementById(this.elementId).style.display = "block";
+    this.currentProcessId = param.id;
+    this.update();
+  },
+  update: function() {
+    var infoEl = document.getElementById( "subpage-info_info-values" );
+    // ロード中に変更
+    infoEl.innerHTML= fx.template.Templates.common.loading;
+
+    var self = this;
+    this.processServiceStub.get( this.currentProcessId, function( p ) {
+      if ( self.currentProcessId == "rmt" ) {
+        infoEl.innerHTML = fx.template.Templates.submenu.info.rmtInfo.evaluate( {
+          enable: p.trade_enable ? "する" : "しない"
+        });
+      } else {
+        var s = new Date( p.start_date*1000 );
+        var e = new Date( p.end_date*1000 );
+        var startStr = s.getFullYear() + "-"  + (s.getMonth()+1) + "-"  + s.getDate();
+        var endStr   = e.getFullYear() + "-"  + (e.getMonth()+1) + "-"  + e.getDate();
+	      infoEl.innerHTML = fx.template.Templates.submenu.info.info.evaluate( {
+	        name: p.name,
+	        memo: p.memo.replace(/^\s+|\s+$/g, '') || "&nbsp;",
+	        range: startStr + " ～ " + endStr
+	      });
+      }
+      // 一覧
+      self.agentSelector.setAgents( p.agents );
+    }, function(){}  ); // TODO
+  }
+}
+
+//グラフ表示設定画面
+fx.ui.pages.GraphSettingResultPage = function() {
+  this.elementId = null; // @Inject
+  this.processServiceStub = null; //@Inject
+  this.outputServiceStub = null; //@Inject
+  this.dialog = null; // @Inject
+}
+fx.ui.pages.GraphSettingResultPage.prototype = {
+
+  /**
+   * このページから画面を移動する際に呼び出される。
+   * 戻り値としてfalseを返すと遷移をキャンセルする。
+   */
+  from : function(toId) {
+    // ページを非表示
+    document.getElementById(this.elementId).style.display = "none";
+    return true;
+  },
+  /**
+   * このページに画面を移動すると呼び出される。
+   */
+  to : function( fromId, param ) {
+    // ページを表示
+    document.getElementById(this.elementId).style.display = "block";
+    this.currentProcessId = param.id;
+    this.list();
+  },
+  /**
+   * 出力一覧を表示する。
+   */
+  list: function() {
+    var el = document.getElementById( "subpage-graph_list" );
+    // ロード中に変更
+    el.innerHTML= fx.template.Templates.common.loading;
+
+    var self = this;
+    this.processServiceStub.get( this.currentProcessId, function( p ) {
+      self.agentNameMap = {};
+      for ( var i=0,n=p.agents.length;i<n;i++ ) {
+        self.agentNameMap[p.agents[i].id] = p.agents[i].name
+      }
+      self.outputServiceStub.list_outputs( self.currentProcessId, function( outs ) {
+          var str = "";
+          var index = 0;
+          var tmp = [];
+          for ( var i in outs ) {
+            var itemBody = "";
+            for ( var j in outs[i] ) {
+              tmp.push( [i,j, outs[i][j]] );
+              var colorsBody = "";
+              for ( var k = 0; k < ( outs[i][j].column_count || 1 ); k++ ) {
+                colorsBody += '<div id="submenu-graph_color_' + index + '_' + k + '"></div>';
+              }
+              itemBody += fx.template.Templates.submenu.graph.item.evaluate( {
+                name: j,
+                agentName: i,
+                checked: outs[i][j]["visible"] == false ? "" : 'checked="checked"',
+                id : index,
+                colors: colorsBody
+              } );
+              index += 1;
+            }
+            str += fx.template.Templates.submenu.graph.agent.evaluate( {
+              agentName: self.agentNameMap[i] || "(不明)",
+              items: itemBody
+            } );
+          }
+          el.innerHTML = str || '<div style="margin:10px 0px 0px 0px;">(　グラフはありません。)</div>';
+
+          // イベントを割り当て
+          self.pickers = [];
+          for ( var i=0; i<index; i++ ) {
+            (function() {
+              self.pickers[i] = [];
+              var info = tmp[i];
+
+              // 表示/非表示
+              var input = document.getElementById( "submenu-graph_checked_" + i );
+              input.onchange = function() {
+                // グラフに転送
+                util.getSwf("chart").setGraphVisible( [info[0],info[1]], input.checked ? true : false );
+                // 設定を記録
+                self.updateSetting( [info[0],info[1]], {visible: input.checked ? true : false } );
+              };
+              // 色
+              var index = i;
+              var colorChanged = function() {
+                debug(index);
+                var colors = [];
+                for ( var j = 0, n=self.pickers[index].length;j<n;j++ ) {
+                  colors.push( self.pickers[index][j].get());
+                }
+                util.getSwf("chart").setGraphColors( [info[0],info[1]], colors );
+                self.updateSetting( [info[0],info[1]], {colors: colors } );
+              };
+              for ( var k = 0; k < ( info[2].column_count || 1 ); k++ ) {
+                var color = info[2].colors && info[2].colors[k] ? info[2].colors[k] : "#557777";
+                var p = new util.ColorPicker( 'submenu-graph_color_' + i + '_' + k , color, colorChanged  );
+                p.init();
+                self.pickers[i].push( p );
+              }
+            })();
+          }
+
+      }, function(){}  ); // TODO
+    }, function(){}  ); // TODO
+  },
+  /**
+   * 設定値を記録する
+   */
+  updateSetting: function( target, properties ) {
+    this.outputServiceStub.set_properties(
+        this.currentProcessId, target, properties, null, null ); // TODO
+  }
+}
+
+
+