JavaScript
redash

redashでjavascriptが動作しない...

More than 1 year has passed since last update.

やりたいこと

  • クエリの結果(テーブル)から欲しいデータを検索する
  • getのパラメーターで渡す方法はredashが重くなるので禁止
    スクリーンショット 2017-10-13 16.38.12.png

試したこと

  1. 検索付きのものがないか探す
  2. クエリ結果に対して検索を行う方法を探す
  3. Javascriptで頑張って検索

結果

  1. 検索機能付きのものはなさそう...
  2. pythonでget_query_resultなるものがあるので不可能ではなさそう
  3. なんだかんだ簡単そう

javascript実装

まずピボットテーブルでテーブル一覧を表示
add widget => text box

search.html
<script type="text/javascript">
  function searchTable() {
    var tableName = document.fm.tableName.value;
    var results = document.getElementsByClassName("pvtTable")[0].getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    var _tableName;
    for (var i = 0; i < results.length; i++) {
      _tableName = results[i].getElementsByTagName("th")[0].innerHTML;
      if (_tableName == tableName) {
        document.getElementById('resultTableName').innerHTML = _tableName;
        document.getElementById('resultTime').innerHTML = results[i].getElementsByTagName("td")[0].innerHTML;
        break;
      };
    }
  }
</script>
<form name="fm">
  テーブル名 <input type="text" name="tableName">
  <input type="button" value="検索" onclick="searchTable()">
</form>
<table>
  <tr>
    <th id="resultTableName"></th>
    <td id="resultTime"></td>
  </tr>
</table>

なぜか動かない...

なぜか動かず原因を探してみると以下のページを発見
https://discuss.redash.io/t/i-cant-use-javascript-in-text-box/637
javascript使えないじゃん...

解決

試しにonclickの中に全て入れてみると動いた

search.html
<form name="fm">
  テーブル名 <input type="text" name="tableName">
  <input type="button" value="検索" onclick="
  var tableName = document.fm.tableName.value;
  var results = document.getElementsByClassName('pvtTable')[0].getElementsByTagName('tbody')[0].getElementsByTagName('tr');
  var _tableName;
  for (var i = 0; i < results.length; i++) {
    _tableName = results[i].getElementsByTagName('th')[0].innerHTML;
    if (_tableName == tableName) {
      document.getElementById('resultTableName').innerHTML = _tableName;
      document.getElementById('resultTime').innerHTML = results[i].getElementsByTagName('td')[0].innerHTML;
      break;
    };
  }">
</form>
<table>
  <tr>
    <th class="pvtRowLabel" rowspan="1" id="resultTableName"></th>
    <td class="pvtRowLabel" rowspan="1" id="resultTime"></td>
  </tr>
</table>

見た目がめちゃめちゃダサいがひとまずこれで対応