develop-data-analysis-dashboard

データ分析ダッシュボード開発スキル

プロジェクトの作成、カードの計画、データのクリーニング、ダッシュボードの開発、検証、納品までを、エンドツーエンドのワークフローとして実行する、データ分析ダッシュボード（計器パネル）の開発機能を提供します。データのクリーニングは、ダッシュボード開発の重要な工程です。

---

コード実行方法

このスキルで from sdk.tool import tool を介して呼び出すすべてのツールは、コードを run_sdk_snippet の python_code パラメーターに渡して実行する必要があります。

スキル内のコードスニペットで SDK を介してツールを呼び出す場合は、必ず result.ok で成功を判定し、失敗の詳細は result.content から読み取ってください。SDK の Result では失敗時のテキストは content に格納されるため、result.error は読み取ったり呼び出したりしないでください。

---

クイックスタート

重要：詳細なルールはこのドキュメントの後半に記載されています。各ステップの実行中は、「ワークフローの概要」「プロジェクトのセットアップ」「ダッシュボード開発」「ダッシュボードのデータクリーニングガイド」を参照してください。

ランタイムの基本ファイル：index.html、dashboard.js、index.css は変更、上書き、削除しないでください。これらに違反すると、データダッシュボードが使用できなくなります。

新しいダッシュボードのデフォルトカード数 — ユーザーが明示的に範囲の縮小を依頼しない限り必須：

カードの種類	必要数	備考
metric	≥ 6	主要 KPI の概要カード
echarts	26 – 30	ダッシュボードの中核。異なる切り口で同じ種類のチャートを追加して数を補ってください
table	2 – 3	少なくとも 1 つは詳細レベルのテーブルである必要があります
markdown	0	ユーザーがメモや解説を求めない限り省略してください
合計	34 – 39	納品前にセルフチェックしてください

必ず守るルール（例外なし）：

• create_dashboard_project を呼び出す前に、cards_plan にすべてのカードを列挙する必要があります。後からカードを追加する形にしてはいけません。
• cards_plan の card_id は、以降の create_dashboard_cards 呼び出しで使用する id と完全に一致させる必要があります。
• echarts の数が不足する場合は、異なる切り口や期間を対象とする同じ種類のチャートを追加してください。必要数の下限を引き下げてはいけません。
• 納品前に query_dashboard_cards を呼び出して種類ごとに数を数え、必要数を下回る種類があれば、不足分のカードを作成してから先に進んでください。
• これらの数は、ユーザーがダッシュボードを小規模にすることを明示した場合に限り変更できます。

ワークフローの概要

パスの概要

• 新規ダッシュボード：計画の準備（ブレインストーミング＋ソースの確認） → ダッシュボードプロジェクトの作成 → データクリーニング → ダッシュボード開発 → 検証 → 納品完了
• ダッシュボードの編集：プロジェクトの特定 → データクリーニング（必要に応じて） → ダッシュボードの編集とカードツールのメンテナンス → 検証 → 納品完了

手順の詳細

• プロジェクトの特定：ユーザーのニーズを理解し、対象プロジェクトを特定します（編集シナリオ）
• 計画の準備（新規ダッシュボード）：create_dashboard_project の前に、質問や切り口をブレインストーミングし、ソースを詳しく確認します（フィールド、粒度、定義、時間、分布、欠損、比較可能なディメンション）。次に、Quick Start の必須件数に厳密に従って cards_plan を作成します（metric ≥6、echarts 26～30、table 2～3、合計 34～39）。プロジェクトの作成前にすべてのカードを列挙する必要があります。代表的なチャートを少数用意するだけでは不十分です
• プロジェクトの作成：同じ呼び出しで、必須の cards_plan を指定して create_dashboard_project を呼び出す必要があります。このツールはそこから cards_plan.md を書き出します。計画内のカード識別子は、後続の create_dashboard_cards の id と一致している必要があります
• データクリーニング：cards_plan.md とデータの目標に基づいて、プロジェクト内に data_cleaning.py を作成して実行し、ダッシュボード用のデータを用意します
• ダッシュボードの編集：必要に応じて、許可されたファイルを変更します（例：data_cleaning.py、cleaned_data/、config.js。index.html、dashboard.js、index.css は変更・削除しないでください）（編集シナリオ）
• ダッシュボード開発：cards_plan.md に従い、カードツール（create_dashboard_cards、update_dashboard_cards、delete_dashboard_cards、query_dashboard_cards）を使用してカードを作成または管理します
• ダッシュボードの検証：validate_dashboard(project_path="PROJECT_NAME") を呼び出します。エラーを修正し、合格するまで再実行します（検証に合格するためにカードを削除してはいけません）
• 納品完了：プロジェクトと分析結果をまとめてから、タスクを終了します

基本原則

手順を順番どおりに実行してください。納品前に検証に合格する必要があります。そうしないとページが動作しません。 index.html、dashboard.js、index.css を変更、上書き、削除しないでください。変更するとデータダッシュボードが使用できなくなります（data.js などの変更が許可されたファイルは、カードツールおよびその他の許可されたパスを通じてのみ管理してください）。

設定の推奨事項

• 新規ダッシュボード：まず計画を準備し、次に cards_plan を作成します。Quick Start の必須カード件数の表に厳密に従ってください（metric ≥6、echarts 26～30、table 2～3、合計 34～39）。納品前に query_dashboard_cards でセルフチェックしてください
• カードには title を設定することを推奨します（metric カードでは、metric の label と重複する場合は省略してください）
• ECharts を優先します。チャートの数が多い場合は、同じ種類のチャートを複数のディメンションで使用してください
• カードの標準サイズの例（24 列グリッド）：metric {w:4,h:3}、チャート {w:8,h:8}、テーブル {w:12,h:8}、Markdown {w:12,h:(calculate height based on content)}

---

判断フロー

新規ダッシュボードですか、それとも編集ですか？ ├─ 新規 → 計画の準備（ブレインストーミング、ソースの確認） → cards_plan の作成 [metric ≥6、echarts 26～30、table 2～3、合計 34～39、すべてのカードを列挙] → create_dashboard_project → データクリーニング → ダッシュボード開発 → 検証 → 納品完了 └─ 編集 → 既存のダッシュボードプロジェクトを特定 → データクリーニング（必要に応じて） → ダッシュボードの開発・編集 → 検証 → 納品完了

データクリーニングが必要ですか？ ├─ 新規ダッシュボード → data_cleaning.py の実行が必須です ├─ データまたは要件を変更するダッシュボード編集 → 必要に応じて実行します └─ 変更を伴わないダッシュボード編集 → 省略できます

納品前にカード件数を確認しますか？ ├─ query_dashboard_cards を呼び出す → 種類別に件数を数える ├─ metric < 6 または echarts < 26 または table < 2 → まず不足しているカードを作成する └─ 件数を満たしている → 検証に進む

検証に失敗しましたか？ → 問題を修正し、result.ok かつエラーなしになるまで validate_dashboard を再実行します

---

コアツール

create_dashboard_project — ダッシュボードプロジェクトを作成

パラメーター	必須	型	説明
name	はい	string	プロジェクト名。ワークスペース内のこのディレクトリにダッシュボードが作成されます
cards_plan	はい	array	カード計画のリスト（1件以上）。このツールはここから cards_plan.md を生成します。フィールドの定義とエントリーの作成方法については、以下のツール使用例を参照してください

Planning prep を完了してから、cards_plan を作成してください。新しいダッシュボードに必須の種類別件数は、Quick Start の Default card counts for new dashboards で定義されています（metric ≥6、echarts 26–30、table 2–3、合計 34–39）。このツールを呼び出す前に、すべてのカードを cards_plan に記載する必要があります。計画が一部だけの場合は認められません。 ユーザーが明示的に縮小したダッシュボードをリクエストした場合に限り、これらの件数を下回ることができます。それ以外の場合は、事前にすべてのカードを記載してください。プロジェクト作成後、create_dashboard_cards は複数回に分けて呼び出せます。このツールは件数を検証しません。要件を満たすことはご自身の責任です。

戻り値（result）：成功時は result.ok が true になり、result.content に作成されたパスと関連情報が含まれます。失敗時は result.ok が false になり、result.content にエラー（例：「ディレクトリはすでに存在します」）が含まれます。

validate_dashboard — ダッシュボードを検証

パラメーター	必須	型	説明
project_path	はい	string	ワークスペースのルートからの相対パスで指定する、ダッシュボードプロジェクトのディレクトリパス

戻り値（result）：成功時は result.ok が true になり、エラーはありません。失敗時は result.ok が false になり、result.content に検証失敗の理由が含まれます。納品前に検証に合格する必要があります。合格しないと、ページにアクセスできません。

カード管理ツール

data.js を編集するには、カード管理ツールを使用する必要があります。直接編集は固く禁止されています。カードのフィールドと CardData は以下の Card Data DSL で、レイアウトのワークフローと検証は Dashboard Development で定義されています。

ツール	説明
create_dashboard_cards	一括作成。1 回の呼び出しにつき cards は 6 個以下を推奨。auto_layout を指定（layout は省略可能）
update_dashboard_cards	一括更新。1 回の呼び出しにつき updates は 1～10 個、6 個以下を推奨。単一フィールドの編集に対応
delete_dashboard_cards	一括削除。card_ids は 1～20 個。削除後、レイアウトを自動的に詰めます
query_dashboard_cards	すべてのカード、または ID を指定してカードを検索。fields を指定すると、返されるプロパティを絞り込めます

create_dashboard_cards

auto_layout（デフォルトは false）が true の場合、カードごとの layout を省略します。ツールがタイプ順に隙間のないレイアウトを生成し、検証のやり直しを減らします。新しいダッシュボードでは auto_layout=true を推奨します。可能であれば、1 回の呼び出しにつき cards は 6 個以下にしてください（上限ではありません）。

パラメーター	必須	型	説明
project_path	はい	string	ダッシュボードプロジェクトのパス
cards	はい	List	カードのリスト。各項目には id、type、source、getCardData が含まれます。auto_layout=true の場合、layout は省略可能です
auto_layout	いいえ	boolean	true の場合、layout を省略し、ツールにグリッドを埋めてもらいます

update_dashboard_cards

各更新には id と、変更するフィールドを少なくとも 1 つ（type、source、title、titleAlign、layout、getCardData など）含める必要があります。layout には部分オブジェクト（例：y のみ）を指定できます。

パラメーター	必須	型	説明
project_path	はい	string	ダッシュボードプロジェクトのパス
updates	はい	List	更新オブジェクト。1～10 項目。1 回の呼び出しにつき 6 個以下を推奨

delete_dashboard_cards

パラメーター	必須	型	説明
project_path	はい	string	ダッシュボードプロジェクトのパス
card_ids	はい	List[str]	削除する ID。1～20 個、重複不可

query_dashboard_cards

パラメーター	必須	型	説明
project_path	はい	string	ダッシュボードプロジェクトのパス
card_ids	いいえ	List[str]	すべてのカードを検索する場合は省略します。指定する場合は ID を 1～20 個指定します
fields	いいえ	List[str]	すべてのフィールドを取得する場合は省略します。それ以外の場合は id、type、title、source、layout、titleAlign、getCardData の一部を指定します

---

ツールの使用例

# Create dashboard project (see structure below)
# Abbreviated example: shows one cards_plan row shape; real new dashboards must list the full per-type plan per the skill.
result = tool.call('create_dashboard_project', {
    "name": "Sales Data Dashboard",
    "cards_plan": [
        {
            "display_name": "Total Sales",
            "card_id": "total_sales",
            "type": "metric",
            "data_detail": "Sum of sales amount",
        },
        {
            "display_name": "Monthly Sales Trend",
            "card_id": "monthly_trend",
            "type": "echarts",
            "data_detail": "Sales by month",
        },
    ],
})

if result.ok:
    # Read project path and other info from result.content
    pass
else:
    # result.content explains failure, e.g. "Directory already exists"
    pass

# create_dashboard_cards: auto_layout=True; prefer ≤6 cards/call
result = tool.call('create_dashboard_cards', {
    "project_path": "Sales Data Dashboard",
    "auto_layout": True,
    "cards": [...]
})

# query_dashboard_cards: omit card_ids for all cards; optional fields, card_ids (1–20)
result = tool.call('query_dashboard_cards', {
    "project_path": "Sales Data Dashboard",
})

# update_dashboard_cards: each update needs id and ≥1 other field; prefer ≤6 updates/call
result = tool.call('update_dashboard_cards', {
    "project_path": "Sales Data Dashboard",
    "updates": [...]
})

# delete_dashboard_cards: card_ids 1–20; do not delete to pass validation
result = tool.call('delete_dashboard_cards', {
    "project_path": "Sales Data Dashboard",
    "card_ids": [...]
})

# validate_dashboard: delivery requires result.ok with no errors
result = tool.call('validate_dashboard', {"project_path": "Sales Data Dashboard"})
if not result.ok:
    # Fix issues from result.content, then validate again
    pass

# download_dashboard_maps (when needed)
result = tool.call('download_dashboard_maps', {
    "project_path": "Sales Data Dashboard",
    "area_names": ["China", "Guangdong", "Shenzhen"]
})

---

ファイル名のルール

ファイル名とディレクトリ名は、ファイルの内容、ビジネス分野、ユーザーの希望言語に基づいて適切に決定されます。例：

• ユーザーの希望言語が中国語の場合：「Sales Data Dashboard」（中国語）、「sales_data.csv」（中国語）
• ユーザーの希望言語が英語の場合：「Sales Data Dashboard」、「Sales Data.csv」

---

主な制約

• Python スクリプト（matplotlib、seaborn、plotly など）で画像を生成しないでください。すべてのチャートは ECharts で実装してください。
• データソースファイルを変更しないでください。読み取り専用です。
• カードの操作には、カード管理ツール（create_dashboard_cards、update_dashboard_cards、delete_dashboard_cards）を必ず使用してください。
• 一時ファイルの名前は temp_ で始め、タスク終了前に削除してください。
• ファイル名は内容、ビジネスドメイン、ユーザーの希望する言語に基づいて決めてください。
• data.js はカード管理ツールのみで管理してください。data.js を直接編集または上書きすることは禁止されています。
• index.html、dashboard.js、index.css は変更、上書き、削除しないでください。変更または削除すると、データダッシュボードが使用できなくなります。

---

データソース

データソースの役割：データ分析ダッシュボードの開発に必要な基礎データを提供します。 対応する種類の例：Excel、CSV、JSON、プレーンテキスト、PDF、Web から取得したデータ、MCP ツールのデータ。 運用ルール：ユーザーがアップロードしたソースファイルは変更しないでください。読み取り専用です。

データソースの特定と検証：

1. リクエストを把握し、ソースの種類と内容を特定します。
2. データを Web または MCP ツールから取得した場合は、分析前に JSON ファイルに保存します。
3. ソースの検査—次のいずれかに該当する場合は、直ちに例外処理フローに進みます：ソースを読み取れない、対応していない形式、空のテンプレート、ヘッダーのみ、有効なビジネスデータがない、データ品質が許容できないほど低い。
4. 例外処理フロー：理由をユーザーに伝え、タスクを終了します。

---

プロジェクト構成、ファイル、編集ルール

ツリーは、各項目のパス、用途、編集ルールを示す表と一致します。

Project Directory/
├── geo/                    # Map GeoJSON data
├── cleaned_data/           # Cleaned data (CSV)
├── data_cleaning.py        # Data cleaning script
├── data.js                 # Card config (DASHBOARD_CARDS)
├── config.js               # Global config (colors, themes, etc.)
├── index.html              # Page markup (system-managed; do not modify or delete)
├── index.css               # Styles (system-managed; do not modify or delete)
├── dashboard.js            # Dashboard runtime (system-managed; do not modify or delete)
└── magic.project.js        # Project configuration file

パス	用途	編集ルール
geo/	地図用 GeoJSON	システム管理対象：編集しないでください
cleaned_data/	カードのデータソース用にクリーニングした CSV	編集可能：ファイルの追加または変更ができます
data_cleaning.py	生データ → cleaned_data/	編集可能：必要に応じてクリーニングロジックを調整してください
data.js	DASHBOARD_CARDS の定義	ツールのみ：create_dashboard_cards、update_dashboard_cards、delete_dashboard_cards。ファイルを直接編集しないでください
config.js	グローバルカラー、テーマ、フォントなど	制限付き：フィールド値のみ。フィールドの追加、削除、名前変更、または構造の変更はしないでください
index.html	ページの HTML	システム管理対象：編集、削除、上書きしないでください。変更するとデータダッシュボードが使用できなくなります
index.css	ビジュアルスタイル	システム管理対象：編集、削除、上書きしないでください。変更するとデータダッシュボードが使用できなくなります
dashboard.js	レンダリング、読み込み、チャート	システム管理対象：編集、削除、上書きしないでください。変更するとデータダッシュボードが使用できなくなります
magic.project.js	プロジェクトメタデータ	禁止：システム管理対象

---

カードデータ DSL

カードの基本構造：

• id：String、カードの一意識別子（必須）
• type：カードの種類。CardType の型に厳密に従います（必須）
• source：String、データソースのパス。例：「./cleaned_data/filename.csv」（必須）
• layout：react-grid-layout のレイアウトオブジェクト。{x: integer, y: integer, w: integer, h: integer} を含みます（必須）
• getCardData：Async 関数。データを読み込み、カードデータを処理して CardData を返します（必須）
• title：省略可能な String、カードのタイトル
• titleAlign：省略可能な String、タイトルの配置（「left」|「center」|「right」）

CardType のカードの種類：

• metric：単一指標カード。指標の値を表示します
• table：データテーブルカード。構造化データを表示します
• markdown：Markdown ドキュメントカード
• echarts：ECharts チャートカード

CardData のデータ構造仕様：

• MetricCard（指標カード）：
  • label：String、指標名（必須）
  • value：String または number、指標の値（必須）
  • change：省略可能な String、変化値または割合
  • unit：省略可能な String、単位
  • icon：省略可能な String、tabler-icon のアイコン名を使用します。例：「ti-chart-bar」
  • iconColor：省略可能な String、アイコンの色。icon が設定されている場合は必須です
• TableCard（テーブルカード）：
  • columns：列設定の配列。各項目には以下が含まれます：
    • title：String、列のタイトル
    • dataIndex：String、データフィールド名
    • dataType：省略可能なデータ型（「string」|「number」|「date」|「time」）。デフォルトは「string」です
    • width：省略可能な列幅（String または number）
    • formatter：省略可能な列フォーマッター関数。セルの表示方法をカスタマイズします。パラメーター value は現在のセルの値を String として受け取り、戻り値は String である必要があります。プレーンテキストのみです
    • sortable：省略可能な boolean、並べ替えを有効にするかどうか
    • filterable：省略可能な boolean、フィルタリングを有効にするかどうか
  • data：データ配列。各項目は各列のデータを含むオブジェクトです（可能な限り生データを使用し、その後 formatter 関数で整形します）
• MarkdownCard（Markdown カード）：
  • content：String、Markdown 形式のテキストコンテンツ（必須）
• echarts（チャートカード）：ECharts Options の設定（バージョン：v6.0.0）

getCardData のデータ読み込み関数：

• Async 関数。パラメーターは csv オブジェクトで、CardData の仕様に準拠するデータを返します
• 主なメソッド：
  • csv.load("filename") は cleaned_data ディレクトリ内の CSV ファイル（.csv 拡張子なし）を読み込みます
  • 戻り値：{data: row array, fields: column name array, name: filename, url: path}
• 主な仕様：
  • フィールドへのアクセス：row["field_name"] を使用し、特殊文字による問題を避けてください
  • データ変換：parseFloat(row["field_name"]) で String を数値に変換します。CSV データはデフォルトで String です
  • 数値処理：浮動小数点数の精度問題を避けるため、必要に応じて Math.round() または .toFixed() を使用してください。割合には .toFixed(2)、金額には .toLocaleString() を使用します
  • テーマ設定へのアクセス：window.DASHBOARD_CONFIG を使用する前に、config.js を読んで実際のキー名と値の型を確認してください。例：window.DASHBOARD_CONFIG.COLORS_PRIMARY

例

// MetricCard example
getCardData: async (csv) => {
  const result = await csv.load("sales_data");
  const totalSales = result.data.reduce((sum, row) => {
    return sum + parseFloat(row["sales_amount"]);
  }, 0);
  return {
    label: "Total Sales",
    value: totalSales,
    unit: "USD",
    icon: "ti-currency-dollar",
  };
};

// TableCard example
getCardData: async (csv) => {
  const result = await csv.load("sales_data");
  return {
    columns: [
      {
        title: "Region",
        dataIndex: "region",
        dataType: "string",
        sortable: false,
        filterable: false,
      },
      {
        title: "Sales",
        dataIndex: "sales",
        dataType: "number",
        sortable: true,
        filterable: false,
        formatter: (value) => `$${parseFloat(value).toLocaleString()}`,
      },
      {
        title: "Customers",
        dataIndex: "customers",
        dataType: "number",
        sortable: true,
        filterable: false,
      },
    ],
    data: result.data,
  };
};

// ECharts chart example
getCardData: async (csv) => {
  const result = await csv.load("sales_data");
  return {
    grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        return (
          params[0].name + ": " + params[0].value.toLocaleString() + " USD"
        );
      },
    },
    xAxis: {
      type: "category",
      data: result.data.map((row) => row["region"]),
    },
    yAxis: {
      type: "value",
      axisLabel: { formatter: (value) => value.toLocaleString() },
    },
    series: [
      {
        type: "bar",
        data: result.data.map((row) => parseFloat(row["sales"])),
        label: {
          show: true,
          formatter: (params) => params.value.toLocaleString(),
        },
      },
    ],
  };
};

// MarkdownCard example
getCardData: async (csv) => {
  const salesData = await csv.load("sales_base_data");
  const productData = await csv.load("product_sales_ranking");
  const totalSales = salesData.data.reduce(
    (sum, row) => sum + parseFloat(row["sales_amount"]),
    0,
  );
  const topProduct = productData.data.sort(
    (a, b) => parseFloat(b["sales_amount"]) - parseFloat(a["sales_amount"]),
  )[0];
  return {
    content: `### Sales Analysis Report\n\n**Total Sales**: ${totalSales.toLocaleString()} USD\n**Top Product**: ${topProduct["product_name"]}`,
  };
};

データ処理の例（上記の英語の例と同じ CSV 形式）：

// CSV file: sales_data.csv
// Example content:
// region,sales,customers
// East,120000,150
// South,95000,120

const parsedData = [
  { region: "East", sales: "120000", customers: "150" },
  { region: "South", sales: "95000", customers: "120" },
];
const parsedFields = ["region", "sales", "customers"];

---

外観とレイアウト

カードの実際のサイズの計算ロジック：

• 幅：config.js の GRID_COLS 列グリッドシステムに基づきます
• 高さ：カードの高さ = カードの行数 × カードの行の高さ（config.js の GRID_DEFAULT_ROW_HEIGHT）

UI テーマのカスタマイズ（ユーザーが明示的に依頼した場合のみ）：config.js（グローバルテーマ）。

カードのレイアウト：

• 階層的な配置：指標カード（上部の概要）→ チャートカード（主要な分析）→ テーブルカード（詳細データ）→ Markdown カード（メモ）
• レイアウトの原則：列グリッドシステム（config.js の GRID_COLS の値）を十分に活用し、横方向と縦方向を相互に補完しながら、隙間なくコンパクトに連続して配置し、幅と高さの比率を調整します

---

ECharts v6.0.0 の設定

ダッシュボード開発のみ

ECharts v6.0.0 の主な設定：

• Map：series.map には GeoJSON の中国語の地域名を使用します。例：「China」、「Guangdong」、「Shenzhen」（ダウンロードした GeoJSON の名前を正確に指定してください）。series.nameProperty は "fullname" です
• grid：
  • 必須の設定：{ left: 0, right: 0, top: 0, bottom: 0, containLabel: false }。v6.0.0 では、この設定により軸と軸ラベルを端に揃えてすべて表示できるため、XY 軸ラベルや軸タイトル用のスペースを確保する必要はありません
  • outerBounds：
    • 用途：凡例や visualMap コンポーネント用のスペースを確保します
    • 使用条件：凡例や visualMap コンポーネントを設定する場合にのみ指定します
    • 基本原則：outerBounds の方向はコンポーネントの配置方向と一致させます
    • 設定例：
      • 下部の横向き凡例：{ grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false, outerBounds: { bottom: 30 } }, legend: { type: "scroll", bottom: 0 } }
      • 左側の縦向き凡例：{ grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false, outerBounds: { left: 50 } }, legend: { type: "scroll", orient: "vertical", left: 0 } }
      • 下部の横向き visualMap：{ grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false, outerBounds: { bottom: 50 } }, visualMap: { orient: "horizontal", bottom: 0, left: "center" } }
      • 左下の縦向き visualMap：{ grid: { left: 0, right: 0, top: 0, bottom: 0, containLabel: false, outerBounds: { left: 50 } }, visualMap: { orient: "vertical", left: 0, bottom: 0 } }
    • 誤った例：
      • outerBounds: { right: 120 }, legend: { orient: "vertical", right: 0 }（凡例は左側に配置するべきです）
      • outerBounds: { left: 60 } だが、左側のコンポーネントが設定されていない（スペースの確保に意味がありません）
      • outerBounds: { top: 30 } だが、コンポーネントは下部に配置されている（方向が一致していません）
• legend：
  • 使用条件：複数系列のグラフや円グラフで凡例が必要な場合にのみ設定します。単一系列のグラフには凡例は不要です
  • 推奨設定：横向きの凡例には { bottom: 0, type: "scroll" }、縦向きの凡例には { left: 0, orient: "vertical", type: "scroll" } を使用します
  • right や top の位置は避け、bottom や left の位置を優先してください
• visualMap：
  • visualMap の推奨設定：横向きには { orient: "horizontal", bottom: 0, left: "center" }、縦向きには { orient: "vertical", left: 0, bottom: 0 } を使用します
  • マップの visualMap には縦向きを推奨します：{ orient: "vertical", left: 0, bottom: 0 } と outerBounds: { left: 50 } を組み合わせます
• tooltip：有用なグラフィック／系列にはそれぞれ tooltip を設定します
• dataZoom：dataZoom は設定しないでください。ECharts の dataZoom は見た目がよくないため、ここでは使用を推奨しません
• label：label.formatter は params オブジェクトを受け取ります。数値には params.value を使用してください。重なりを減らす必要がある場合は labelLayout.hideOverlap: true を設定し、読みやすさのためにフォントストロークの使用を検討してください
• title：カードタイトルと重複するため、オプションに ECharts の title を設定しないでください
• axis：数値の値軸には name を指定し、カテゴリ軸には name を指定しないでください。縦向きのレイアウトパターンを推奨します：Y = 値軸、X = カテゴリ軸
• グラフ領域を最大限に使用し、不要な余白を避けてください
• フォーマッターの引数：label.formatter と tooltip.formatter は params を受け取ります。axisLabel.formatter は value を受け取ります
• config.js とテーマを統一してください。window.DASHBOARD_CONFIG を使用する前に config.js を読み、キー名と値の型を確認してください

---

カード管理ツール — クイックリファレンス

パラメータ表、auto_layout、バッチ制限については、上部のコアツール、カード管理ツールを参照してください。一般的な使用例（必要に応じて選択）：

• 作成：create_dashboard_cards；1回あたり≤6件、auto_layout=True
• 編集：update_dashboard_cards；1回あたり≤6件の更新；部分的なフィールドでOK（例：title、layout.y）
• 削除：delete_dashboard_cards；検証を通過させるために削除しないでください
• 閲覧：card_ids なしで query_dashboard_cards（およびオプションの fields）を実行すると、完全なサマリーをすばやく取得できます
• 詳細：同じツールで card_ids を指定すると、getCardData を含む完全な設定を取得できます
• ペイロードの削減：query_dashboard_cards で fields を指定（例：id、type、layout のみ）

---

ダッシュボードデータクリーニングガイド

• スクリプトファイル：data_cleaning.py
• スクリプト例：

import os
import pandas as pd

# Required statements (strictly follow this format)
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
OUTPUT_DIR = os.path.join(PROJECT_ROOT, "cleaned_data")
os.makedirs(OUTPUT_DIR, exist_ok=True)

# Data source definition (if file data sources exist)
FILE_DATA_SOURCES = {
  'main_data': os.path.join(PROJECT_ROOT, "..", "data_source.csv"),
  'additional_data': os.path.join(PROJECT_ROOT, "..", "additional_data.csv")
}

def main():
    # 1. Data loading
    df = pd.read_csv(FILE_DATA_SOURCES['main_data'])

    # 2. Data cleaning: Handle missing values, remove duplicates, type conversion, outlier treatment

    # 3. Data splitting: Split into multiple thematic files by business logic, time dimension, geographic region, etc.

    # 4. Metric calculation: Descriptive statistics, group aggregation, derived metrics, advanced analysis

    # 5. Data output: CSV format to cleaned_data directory
    df.to_csv(os.path.join(OUTPUT_DIR, "cleaned_data.csv"), index=False, encoding='utf-8')

if __name__ == "__main__":
    main()

データクリーニングの基本原則：

• data_cleaning.py スクリプトを実行することによってのみ、CSV を cleaned_data に書き込むことができます
• データセット全体に対してクリーニングを実行してください
• ユーザーがアップロードしたソースファイルを変更または上書きしないでください。読み取り専用アクセスのみです
• すべての出力ファイルは UTF-8 エンコーディングと CSV 形式を使用する必要があります
• 欠損値を明示的に処理してください（適切に補完、削除、またはフラグを立てる）
• 必要に応じてデータ型を変換してください（例：文字列から数値、日付のパース）
• 出力前に重複行を削除してください
• ビジネスロジックに基づいて、有益な場合はデータを複数のテーマ別ファイルに分割してください。各ファイルは1つ以上のカードに対応します
• 派生指標（比率、成長率、ランキング）はこのスクリプトで計算する必要があります