Zeppelin jdbcインタプリタで日付ピッカーを使用する

Question

私は自分のZeppelinノートブックにjdbcインターペーターを使用して一定の期間データベースをフェッチする一連のチャートを用意しています。私がしたいのは、すべてのチャートに適用される期間を選択できるようにすることです。

Dynamic Formまたは日付ピッカーAngular（これはさらに優れている）を使用して入力フィールドを作成できることがわかりました。何とかjdbcインターペーターで選択した期間を使用することは可能ですか？

Apply Zeppelin Dynamic Formsの例では、これは1つのグラフでどのように実行できるかを見ることができますが、これはすべてのグラフに影響する1つのフィールドを定義できるようにするためです。 （角度intepreter有する）

Answer 1

マイ溶液：

第PARAM（依存関係）：

%angular 
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 

第PARAM（daterangepicker） - 変化のparam ID：

%angular 
<span>Date range picker:</span> 
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width:250px;"> 
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
    <span></span> <b class="caret"></b> 
</div> 
<p> 
<p> 
<input id="start" ng-model="start" style="visibility: hidden;"></input> 
<input id="end" ng-model="end" style="visibility: hidden;"></input> 
<button type="submit" class="btn btn-primary pull-right" ng-click="z.angularBind('start',start,'fixme to param ID');z.angularBind('end',end,'fixme to param ID');"> Apply</button> 
<script type="text/javascript"> 
$(function() { 
    var start = moment().subtract(29, 'days'); 
    var end = moment(); 
    function cb(start, end) { 
     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
     $('#start').val(start.toISOString()); 
     $('#start').trigger('input'); // Use for Chrome/Firefox/Edge 
     $('#start').trigger('change'); // Use for Chrome/Firefox/Edge + IE11 
     $('#end').val(end.toISOString()); 
     $('#end').trigger('input'); // Use for Chrome/Firefox/Edge 
     $('#end').trigger('change'); // Use for Chrome/Firefox/Edge + IE11 
    } 

    $('#reportrange').daterangepicker({ 
     startDate: start, 
     endDate: end, 
     ranges: { 
      'Today': [moment(), moment()], 
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
     } 
    }, cb); 

    cb(start, end); 
}); 
</script> 

第PARAM：

%jdbc 
SELECT * 
FROM TABLE 
WHERE DATE >= TO_TIMESTAMP('${start}') AND DATE <= TO_TIMESTAMP('${end}')