For AI agents: the complete documentation index is available at https://docs.dataplatform.ovh.net/ja/llms.txt, the full documentation bundle is available at https://docs.dataplatform.ovh.net/ja/llms-full.txt, and this page is available as Markdown at https://docs.dataplatform.ovh.net/ja/sdk/app-charts-template.md.
  • 🇯🇵 日本語
  • チャートテンプレート

    Warning

    再作業が保留中で、納期はありません。 Front App SDK(ReactJS)とFront API SDK(NodeJS)の両方が置き換えられています。このページは現在のリリースをドキュメント化し、正確であり、置き換えが出荷されるまで維持されます。これに対して書かれたコードは引き続き動作します。

    スタイルテンプレートは、すべてのチャートが同じように見えるようにするために、お気に入りのチャートライブラリに適用できます。スタイルテンプレートは、Architect(ForePaaSのダッシュボード作成ツール)またはローカルマシン上で、簡単に使用できます。


    スタイルテンプレートを使用する理由

    以下はチャート構成の構造です。チャートの詳細については、このドキュメントページを参照してください

    {
        "type": "chart",
        "col": 0,
        "row": 1,
        "sizeX": 12,
        "sizeY": 12,
        "title": "",
        "chart": {
            "component": "my-component",
            "options": {},
            "request": {}
        }
    }

    optionsオブジェクトを使用して、チャートにプロパティを渡すことができます。 例えば、Rechartsを使用して、barGapが3、 barSizeが6で、特定のマージンを持つ棒グラフを定義したい場合、次のオプションを渡すことができます:

    "options": {
        "barGap": 3,
        "barSize": 6,
        "margin": {
             "left": 20,
             "right": 20,
              "top": 40,
              "bottom": 35
         }
    }

    個々のチャートウィジェットの外部で制御可能な同じ構成をすべての棒グラフに適用したい場合、事態は複雑になります。各チャートごとに設定を繰り返す必要はありません。

    ForePaaSは、そのようなことを簡単に行うためのシンプルなソリューションを提供します:構成用のスタイルテンプレートを作成します


    ステップ1:テンプレートの作成

    すべてはconfig/templates.jsonファイルで行われます。ここでは、すべてのテンプレートを定義します。

    テンプレートは次のように定義されます:

    "templateName": {
        "component": "", // Name of the component where the options will be applied
        "options": {
            ...yourOptions
        }
    }

    上記の例を使用すると、次のようになります:

    "rechartsBar": {
        "component": "recharts.bar",
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    }

    テンプレート名の定義

    templateNameは2つの方法で使用できます:

    1. 既存のコンポーネント名の使用

    オプションはこのタイプのすべてのコンポーネントに適用されます。 この場合、componentプロパティは省略されます。そうしないと、オプションは適用されません。これはForePaasによって作成されたコンポーネントまたはspecコンポーネント(ドキュメントを参照)のいずれにも適用されます。

    recharts.barチャートを使用すると、これらのオプションがデフォルトで適用されます。

    "recharts.bar": {
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                "left": 20,
                "right": 20,
                "top": 40,
                "bottom": 35
            }
        }
    }

    2. テンプレート名の定義

    このテンプレートをチャートの定義で使用すると(ステップ2:テンプレートの使用の詳細を参照)、オプションが適用されます。

    コンポーネント名は、特にアプリケーションのテーマを定義したい場合に使用されますが、テンプレート名はより特定の場合に使用されます(例えば、特定のチャートでテーマに修正を加える場合)。

    初期テンプレートに基づいて第二のテンプレートを作成する

    ForePaaSは、初期テンプレートのほとんどのオプションを活用し、後者への変更を自動的に受け取るテンプレートを作成するためのシンプルな方法を提供します。

    テンプレートにextends要素を追加するだけです:

    "rechartsBarWithBiggerSize": {
        "extends": "rechartsBar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }

    ?>🌠 ここでextends要素についてさらに学びましょう!


    ステップ2:テンプレートの使用

    テンプレートを使用するには、2つの方法があります:

    • Architect(プラットフォーム経由)
    • ローカル(config .jsonファイル経由)

    Architect経由

    チャートの種類を選択する際に、以前に作成したテンプレートが「カスタム」カテゴリで見つかります。

    代替テキスト

    チャートから選択し、リクエストを指定して、右上で確定するだけです。

    ローカル

    プラットフォームエディタ経由またはローカルで、チャートのcomponentの値としてテンプレート名を入力するだけです:

    代替テキスト

    オプションを1つ変更したい場合は、optionオブジェクトで変更できます。これらはテンプレートで定義されたオプションを追加および/または置き換えます(上記のextendと同じように)。

    ボーナス:Architect経由の設定可能なオプションの追加

    これらのオプションは、Architectから設定できるものです。これはチャートの作成または編集インターフェースです。

    代替テキスト

    チャートとオプションをコードで定義すると、チャートのオプション(色など)をテンプレートのオプションとして簡単に上書きできます。

    しかし、Architectを使用している場合(またはユーザーが使用している場合)は、そう簡単ではありません。実際、新しいテンプレートはこのUIから利用可能ですが、ForePaaSによって定義されたチャートとその事前設定されたオプション以外は、テンプレートで定義されたオプションを変更または上書きするには、高度なモードのjson設定にアクセスする必要があります(これはユーザーにとって最も直感的ではありません)。

    ユーザーがチャートを作成または編集するのを簡素化するために、このインターフェースにオプションを追加する方法があります。

    要約すると、.jsonの設定を使用すると、チャート作成/編集UIにアクセス可能なフォームを管理でき、チャートのoptionsオブジェクトに関連するキーと値を追加できます。

    オプションの種類(オブジェクト、テキスト、数値、テーブルなど)は最初に定義され、次に入力の種類が定義されます。

    {
        "xAxis": {
            "label": "xAxis",
            "type": "object",
            "options": {
                "hide": {
                    "type": "toggle",
                    "label": "Hide"
                },
                "type": {
                    "label": "Type",
                    "type": "select-box",
                    "options": [
                        {
                            "label": "number",
                            "value": "number"
                        },
                        {
                            "label": "category",
                            "value": "category"
                        }
                    ]
                }
            }
        }
    }

    optionsobject(タイプ)のオブジェクトを生成します:

    "xAxis": {
        "hide": true / false, // Toggle will give a boolean
        "type": "number" / category // according to the value selected in the select-box
    }

    この設定をoptionsArchitectプロパティに追加すると、チャート構成のoptionsタブでこれらのオプションが見つかります。

    以下は例の設定です:

    {
        "rechartsBar": {
            "options": {
                "barGap": 3,
                "barSize": 6,
                "margin": {
                     "left": 20,
                     "right": 20,
                     "top": 40,
                     "bottom": 35
                }
            },
            "component": "recharts.bar"
        },
        "optionsArchitect": {
            "barSize": {
                "type": "number",
                "label": "Bar Size"
            },
            "barGap": {
                "label": "Bar Gap",
                "type": "number"
            },
            "barCategoryGap": {
                "label": "Bar Category Gap",
                "type": "number"
            }
        }
    }

    次の結果になります:

    Architectでテンプレートを選択する

    Architectでカスタムオプションを表示する

    ヒント:プラットフォームで既に定義されているライブラリのオプションがどのように定義されているかを見ることをためらわないでください:ファイルforepaas.json -> キーoptionsをさらに多くの例のために確認してください。

    さらに詳しく

    ソリューションを実装するためのトレーニングや技術サポートが必要な場合は、営業担当者にお問い合わせください、またはこのリンクをクリックして、プロフェッショナルサービスの専門家にプロジェクトのカスタム分析を依頼するための見積もりを取得してください。

    Discordの専用チャネルで、Data Platformを構築するチームと直接質問し、フィードバックを共有し、交流してください。

    OVHcloudサービスについてサポートが必要な場合は、ヘルプセンターでリクエストを作成してください。

    コミュニティに参加してください。