JavaScript関数を使用してデータレポートを作成する

スポーツ イベントまたは競技会があると仮定します。ほとんどの場合、結果はデー​​タベースに保存され、Web サイトにリストされる必要があります。 Fetch API を使用して、バックエンドからデータをフェッチできます。これについては、この文書では説明しません。データはすでに取得されており、レコードの配列であると仮定します。このレコードの配列は正しい順序である必要がありますが、ソース関数 はレポート エンジン内でその場で配列をフィルタリングおよび並べ替えることができます。

このドキュメントでは、ヘッダー と フッター を非常に簡単に定義する方法と、比較関数 によってレコードのグループ化を調整する方法について説明します。

各 ヘッダー関数 は、静的テキストとパラメータ currentRecord、objWork、splitPosition に基づいて HTML を返します。各フッター関数は、静的テキストとパラメータpreviousRecord、objWork、splitPositionに基づいてhtmlを返します。

非常に柔軟性がありますが、HTML は自分で作成する必要があります。 WYSIWYG エディターを期待しないでください。

レポートの一般的な構造

• レポートにはレポート ヘッダーとフッターがあります。テキスト、HTML のみ、またはその両方を使用できます。
• レポートには 1 つ以上のセクション レベルがあります。セクションレベル N はヘッダーレベル N で始まり、フッターレベル N で終わります。
• セクション レベル N には、最上位のセクション レベルを除き、セクション レベル N 1 の 1 倍以上が含まれます。
• 最上位のセクション レベルには、配列内のレコードに基づいて作成されたデータが含まれます。 ほとんどの場合、最高のセクション レベルは単なる HTML テーブルまたは HTML フレックス項目です。

レポート構成の例

reportDefinition というレポート定義オブジェクトの構造

const reportDefinition = {};
reportDefinition.headers = [report_header, header_level_1, header_level_2, header_level_3, ...]; // default = []
reportDefinition.footers = [report_footer, footer_level_1, footer_level_2, footer_level_3, ...]; // default = []
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // default = () => -1
    // code that returns an integer (report level break number)
};
reportDefinition.display = (currentRecord, objWork) => {
    // code that returns a string, for example
    return `${currentRecord.team} - ${currentRecord.player}`;
};
// source array can be preprocessed, for example filter or sort
reportDefinition.source = (arr, objWork) => preProcessFuncCode(arr); // optional function to preprocess data array
// example to add extra field for HOME and AWAY and sort afterwards
reportDefinition.source = (arr, objWork) => arr.flatMap(val => [{ team: val.team1, ...val }, { team: val.team2, ...val }])
    .sort((a, b) => a.team.localeCompare(b.team));
// optional method 'init' which should be a function. It will be called with argument objWork
// can be used to initialize some things.
reportDefinition.init = objWork => { ... };

ヘッダーとフッターの配列要素の例

reportDefinition.headers = [];
// currentRecord=current record, objWork is extra object,
// splitPosition=0 if this is the first header shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.headers[0] = (currentRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.headers[1] = '<div>Some string</div>'; // string instead of function is allowed;
reportDefinition.footers = [];
// previousRecord=previous record, objWork is extra object,
// splitPosition=0 if this is the last footer shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.footers[0] = (previousRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.footers[1] = '<div>Some string</div>'; // string instead of function is allowed;

コンペア機能の例

// previousRecord=previous record, currentRecord=current record, objWork is extra object,
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // please never return 0! headers[0] will be displayed automagically on top of report
    // group by date return 1 (lowest number first)
    if (previousRecord.date !== currentRecord.date) return 1;
    // group by team return 2
    if (previousRecord.team !== currentRecord.team) return 2;
    // assume this function returns X (except -1) then:
    // footer X upto and include LAST footer will be displayed (in reverse order). In case of footer function the argument is previous record
    // header X upto and include LAST header will be displayed. In case of header function the argument is current record
    // current record will be displayed
    //
    // if both records belong to same group return -1
    return -1;
};

ランニングカウンター

実行中のカウンターを実装したい場合は、適切な場所で初期化/リセットする必要があります。これは、関連するヘッダーにコードを追加することで実現できます:

reportDefinition.headers[2] = (currentRecord, objWork, splitPosition) => {
    // this is a new level 2 group. Reset objWork.runningCounter to 0
    objWork.runningCounter = 0;
    // put extra code here
    return `<div>This is header number 2: ${currentRecord.team}</div>`;
};

レポートの先頭で objWork.runningCounter のみを初期化したい場合は、reportDefinition.headers[0] に適切なコードを入れることで実現できます。私はそれをプロパティ runningCounter と呼びますが、任意の名前を付けることができます。

コード内のどこかで実行中のカウンタを増やす必要があります。そうしないと実行されません ;-) 例:

const reportDefinition = {};
reportDefinition.headers = [report_header, header_level_1, header_level_2, header_level_3, ...]; // default = []
reportDefinition.footers = [report_footer, footer_level_1, footer_level_2, footer_level_3, ...]; // default = []
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // default = () => -1
    // code that returns an integer (report level break number)
};
reportDefinition.display = (currentRecord, objWork) => {
    // code that returns a string, for example
    return `${currentRecord.team} - ${currentRecord.player}`;
};
// source array can be preprocessed, for example filter or sort
reportDefinition.source = (arr, objWork) => preProcessFuncCode(arr); // optional function to preprocess data array
// example to add extra field for HOME and AWAY and sort afterwards
reportDefinition.source = (arr, objWork) => arr.flatMap(val => [{ team: val.team1, ...val }, { team: val.team2, ...val }])
    .sort((a, b) => a.team.localeCompare(b.team));
// optional method 'init' which should be a function. It will be called with argument objWork
// can be used to initialize some things.
reportDefinition.init = objWork => { ... };

複数のセクションレベルの合計、累計、偶数番号付きヘッダーを作成する方法

reportDefinition.headers = [];
// currentRecord=current record, objWork is extra object,
// splitPosition=0 if this is the first header shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.headers[0] = (currentRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.headers[1] = '<div>Some string</div>'; // string instead of function is allowed;
reportDefinition.footers = [];
// previousRecord=previous record, objWork is extra object,
// splitPosition=0 if this is the last footer shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.footers[0] = (previousRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.footers[1] = '<div>Some string</div>'; // string instead of function is allowed;

オンザフライでソース配列を前処理する方法 (クリック イベントなど)

// previousRecord=previous record, currentRecord=current record, objWork is extra object,
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // please never return 0! headers[0] will be displayed automagically on top of report
    // group by date return 1 (lowest number first)
    if (previousRecord.date !== currentRecord.date) return 1;
    // group by team return 2
    if (previousRecord.team !== currentRecord.team) return 2;
    // assume this function returns X (except -1) then:
    // footer X upto and include LAST footer will be displayed (in reverse order). In case of footer function the argument is previous record
    // header X upto and include LAST header will be displayed. In case of header function the argument is current record
    // current record will be displayed
    //
    // if both records belong to same group return -1
    return -1;
};

レポートの生成方法

reportDefinition.headers[2] = (currentRecord, objWork, splitPosition) => {
    // this is a new level 2 group. Reset objWork.runningCounter to 0
    objWork.runningCounter = 0;
    // put extra code here
    return `<div>This is header number 2: ${currentRecord.team}</div>`;
};

ソースコード

以下のソースコードは、これをすべて機能させるために作成したものです。これは、すべてのヘッダーとフッターのラッパー関数の一種です。自由にコピーして貼り付けて、独自のモジュールで使用してください。

reportDefinition.display = (currentRecord, objWork) => {
    objWork.runningCounter++;
    // put extra code here
    return `<div>This is record number ${objWork.runningCounter}: ${currentRecord.team} - ${currentRecord.player}</div>`;
};

objWorkとは

objWork は、createOutput 関数の 2 番目の引数として渡される JavaScript オブジェクトです (オプションの引数、デフォルトは {})。これは、ヘッダー関数、フッター関数、比較関数、初期化関数、ソース関数、および表示関数に浅いコピーとして渡されます。これらすべての関数はこのオブジェクトを共有します。たとえば、構成情報や色のテーマなどに使用できます。 objWork は、{ rawData: thisData } で自動的に拡張されます。たとえば、createOutput(reportDefinition, { font: 'Arial', font_color: 'blue' }).

例

以下にリストされている例はオランダ語で書かれています。
ビリヤードクラブのレポート
ビリヤードスコアのレポート
カロムビリヤードのその他のレポート
ペタンクのレポート
などなど....

以上がJavaScript関数を使用してデータレポートを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。