Add column name
azu opened this issue · comments
spreadsheetのカラム名の入力を自動化したいです。
Proposal
- 値に対応するようにカラム名の情報を持つように実装する
次のようなカラム名と値の対応を持つイメージ
export function columnNames() {
return tupleNameAndValue().map(item => {
return item.name;
});
}
// resultはリクエストの結果とかのオブジェクト
export function getResultValue(result) {
return tupleNameAndValue().map(item => {
return item.value(result);
});
}
export function tupleNameAndValue() {
return [
// カラム名 : 値 の対応を近くに置くためむりやりな実装
{ name: "カラム名", value: (result: Result) => result.completed },
{ name: "カラム名", value: (result: Result) => Utilities.formatDate(result.date, 'GMT+9', 'yyyyMMddHH') },
{ name: "カラム名", value: (result: Result) => Utilities.formatDate(result.date, 'GMT+9', 'yyyyMMdd') },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.firstByte) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.firstLayout) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.firstPaint) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.firstContentfulPaint) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.firstMeaningfulPaint) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.speedIndex) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.domInteractive) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.loadTime) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.visualComplete) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.fullyLoaded) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.timeToInteractive) },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.breakdown.html.bytes, 1) },
{ name: "カラム名", value: (result: Result) => result.breakdown.html.requests },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.breakdown.js.bytes, 1) },
{ name: "カラム名", value: (result: Result) => breakdown.js.requests },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.breakdown.css.bytes, 1) },
{ name: "カラム名", value: (result: Result) => result.breakdown.css.requests },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.breakdown.image.bytes, 1) },
{ name: "カラム名", value: (result: Result) => breakdown.image.requests },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.breakdown.font.bytes, 1) },
{ name: "カラム名", value: (result: Result) => result.breakdown.font.requests },
{ name: "カラム名", value: (result: Result) => Utils.transform(result.breakdown.other.bytes, 1) },
{ name: "カラム名", value: (result: Result) => result.breakdown.other.requests },
{ name: "カラム名", value: (result: Result) => result.summary },
]
}- 定義したカラム名をSpreadSheetの先頭のRowに追加する
課題
- 固定Rowとして追加する方法は存在する?
- 既存のRowがある場合にどうするか
- 先頭のcellは
testIdなので、この1:1が"testId"なら更新、そうでなければ先頭に追加みたいな実装になる?
- 先頭のcellは
- どのタイミングでカラムを追加/更新するか
- https://github.com/andydavies/WPT-Bulk-Tester では手動で関数を実行した時などになっていた
- 冪等性のある実装ができているならば、getTestResults時に自動的に更新もできる
固定 Row ってどんなイメージですか？
@uknmr これですね。
多分1行目を固定化するという実装なきがするので、spread sheetに固定rowという領域自体は存在しない気もしてきました。調べた感じでは、1行目に追加 -> 固定する という感じでやる必要があって、固定rowとして追加みたいに一発で追加/更新できるAPIがあると便利そうだなーと。
実装してみたところ、
- 1:1が"testId"でないなら、1行目に空のRowを追加 -> 1行目を新しいColumn名で更新
- 1:1が"testId"なら、1行目を新しいColumn名で更新
みたいな感じで、カラムのタイトル部分だけ更新できそうでした。
既存の項目の名前は次のような感じにしようと思います。
completed だけだとわかりにくいので TimeStampとつけるのがいいのかな…
[
{
name: 'completedTimeStamp',
value: (result: TestResult) => result.completed,
},
{
name: 'yyyyMMddHH',
value: (result: TestResult) => Utilities.formatDate(result.date, 'GMT+9', 'yyyyMMddHH'),
},
{
name: 'yyyyMMdd',
value: (result: TestResult) => Utilities.formatDate(result.date, 'GMT+9', 'yyyyMMdd'),
},
{
name: 'firstByte',
value: (result: TestResult) => Utils.transform(result.firstByte),
},
{
name: 'firstLayout',
value: (result: TestResult) => Utils.transform(result.firstLayout),
},
{
name: 'firstPaint',
value: (result: TestResult) => Utils.transform(result.firstPaint),
},
{
name: 'firstContentfulPaint',
value: (result: TestResult) => Utils.transform(result.firstContentfulPaint),
},
{
name: 'firstMeaningfulPaint',
value: (result: TestResult) => Utils.transform(result.firstMeaningfulPaint),
},
{
name: 'speedIndex',
value: (result: TestResult) => Utils.transform(result.speedIndex),
},
{
name: 'domInteractive',
value: (result: TestResult) => Utils.transform(result.domInteractive),
},
{
name: 'loadTime',
value: (result: TestResult) => Utils.transform(result.loadTime),
},
{
name: 'visualComplete',
value: (result: TestResult) => Utils.transform(result.visualComplete),
},
{
name: 'fullyLoaded',
value: (result: TestResult) => Utils.transform(result.fullyLoaded),
},
{
name: 'timeToInteractive',
value: (result: TestResult) => Utils.transform(result.timeToInteractive),
},
{
name: 'html.bytes',
value: (result: TestResult) => Utils.transform(result.breakdown.html.bytes, 1),
},
{
name: 'html.requests',
value: (result: TestResult) => result.breakdown.html.requests,
},
{
name: 'js.bytes',
value: (result: TestResult) => Utils.transform(result.breakdown.js.bytes, 1),
},
{
name: 'js.requests',
value: (result: TestResult) => result.breakdown.js.requests,
},
{
name: 'css.bytes',
value: (result: TestResult) => Utils.transform(result.breakdown.css.bytes, 1),
},
{
name: 'css.requests',
value: (result: TestResult) => result.breakdown.css.requests,
},
{
name: 'image.bytes',
value: (result: TestResult) => Utils.transform(result.breakdown.image.bytes, 1),
},
{
name: 'image.requests',
value: (result: TestResult) => result.breakdown.image.requests,
},
{
name: 'font.bytes',
value: (result: TestResult) => Utils.transform(result.breakdown.font.bytes, 1),
},
{
name: 'font.requests',
value: (result: TestResult) => result.breakdown.font.requests,
},
{
name: 'other.bytes',
value: (result: TestResult) => Utils.transform(result.breakdown.other.bytes, 1),
},
{
name: 'other.requests',
value: (result: TestResult) => result.breakdown.other.requests,
},
{
name: 'summary',
value: (result: TestResult) => result.summary,
},
]