チャートテーブル

Warning

再作業が保留中で、納期は未定です。 Front App SDK (ReactJS) と Front API SDK (NodeJS) の両方が置き換えられます。このページでは、現在のリリースについて説明し、置き換えが完了するまで正確で維持されます。このページに基づいて書かれたコードは引き続き動作します。

設定方法

App Managerから、Extensionsを使用して
ローカルホスト上のForePaaS Package Managerを使用して: fppm install chart-table

テーブルのJSON構成

例:

{
  "component": "table",
  "options": {
    "i18n": {
      "fr": {
        "sum": "",
        "visits": "",
        "evol-year-2": "(Y-2)"
      }
    },
    "searcheable": true,
    "theme": "standard",
    "headerHeight": 40,
    "rowHeight": 40,
    "padding": 5,
    "columns": [
      {
        "type": "scale",
        "scale": "date",
        "align": "right",
        "sortable": false
      },
      {
        "type": "data",
        "data": "visits",
        "computeMode": "sum",
        "evol": 0
      }
    ]
  },
  "request": {
    "data": {
      "fields": {
        "visit": [
          "sum"
        ]
      }
    },
    "scale": {
      "fields": [
        "city",
        "date"
      ],
      "axis": {
        "x": [
          "city"
        ],
        "y": [
          "date"
        ]
      }
    }
  }
}

リクエスト

chart-tableコンポーネントは、axisを考慮します:

axis.y: 行で表示を許可します
axis.x: 見つかった値の数だけ列を作成します

オプション

i18n: グローバルなi18nと同じ形式を使用して、このテーブルのみの値を指定できます。
searcheable: true / false – 検索バーを有効または無効にできます。
theme: standardがデフォルトのテーマですが、カスタマイズすることができます（後述）。
headerHeight: ヘッダーの高さをピクセル単位で定義できます
rowHeight: 行の高さをピクセル単位で定義します
padding: テーブルセル内のパディングを定義します
columns: 列の正確な構成を許可します。指定されていない場合、リクエストから作成されます。

options.columns

各列を指定するJSONオブジェクトの配列:

type: scale / data - 表示する列の種類を設定します
"type":"scale"
- scale: 使用するスケールの名前を定義します
"type":"data"
- data: 指定するdata.fieldsの名前
- computeMode: そのフィールドに対して表示するcomputeMode（例: select, sum, count）を指定します。
- evol: 使用する進化を指定します
align: left / center / right
sortable: true / false

テーマ

Chart Tableに表示するために使用するテーマを完全にカスタマイズできます。

optionsで、例えば:

"theme": "mytheme"

この例では、standardテーマのコピーとして、カスタマイズされたテーマを完全に定義できます:

.fp-table.fp-table-mytheme {
  height:100%;
  position: relative;
  .fp-row {
    .fp-cell {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
      position: relative;
      i {
        position: absolute;
        right:5px;
        top:50%;
        background:white;
        transform:translateY(-50%);
        z-index: 2;
      }
    }
  }

  .fp-row:nth-child(even) {
    background:rgba(0, 0, 0, .02);
    border-bottom:1px solid #e5e8eb;
  }

  .fp-head {
    position:absolute;
    top:0px;
    left:0;
    right:0;
    .fp-cell-is-sortable {
      cursor:pointer;
    }
    .fp-row {
      height:100%;
      border-bottom:2px solid #eee;
    }
  }

  .fp-body {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    overflow: auto;
    .fp-cell-sort {
      background:rgba(0,0,0,0.03);
    }
  }
  .fp-content {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:white;
    border-radius:3px;
  }
}

.fp-table.fp-table-search.fp-table-mytheme {
  .fp-content {
    top:40px;
  }
  .fp-search {
    z-index:2;
    position: absolute;
    right:0;
    height:40px;
    top:0px;
    width:150px;
    border:#ddd solid;
    border-width: 1px 1px 1px 1px;
    background:white;
    i {
      position: absolute;
      z-index: 2;
      left:3px;
      top:3px;
      font-size:25px;
    }
    input {
      position: absolute;
      width:100%;
      left:0;
      right:0;
      border:0;
      outline:none;
      padding-left:30px;
      top:0;
      bottom:0;
    }
  }
}

チャートテーブル#

#設定方法

#テーブルのJSON構成

#リクエスト

#オプション

#options.columns