[{"data":1,"prerenderedAt":1407},["ShallowReactive",2],{"content-/waterfall-chart-data-flow":3,"all-pages-for-dir":1385,"related-/waterfall-chart-data-flow":1386,"og-image-/waterfall-chart-data-flow":1406},{"id":4,"title":5,"body":6,"category":1370,"concepts":1370,"description":1371,"extension":1372,"meta":1373,"navigation":402,"ogImage":1370,"path":1374,"project_name":1370,"published":1375,"publishedAt":1376,"seo":1377,"source":1370,"stem":1378,"tags":1379,"todo":1370,"unpublished":1375,"updatedAt":1376,"__hash__":1384},"pages/2025-12/2025-12-20/waterfall-chart-data-flow.md","ウォーターフォールチャートのデータフロー解説",{"type":7,"value":8,"toc":1351},"minimark",[9,13,25,29,39,43,50,73,77,83,113,122,125,140,144,150,352,356,361,366,490,494,570,574,643,647,688,692,825,831,936,940,947,950,956,959,1027,1031,1037,1045,1295,1298,1347],[10,11,12],"h1",{"id":12},"ウォーターフォールチャートのデータフロー",[14,15,16,20,21,24],"p",{},[17,18,19],"code",{},"proportional-animation.vue"," ページで使用されている ",[17,22,23],{},"PLWaterfallChart"," コンポーネントへのデータの流れを以下に解説します。",[26,27,28],"h2",{"id":28},"全体アーキテクチャ",[30,31,36],"pre",{"className":32,"code":34,"language":35},[33],"language-text","┌──────────────────────────────────────────────────────────────────────┐\n│  data/koyfin.db (SQLite)                                             │\n│  ├─ Balance Sheet テーブル                                           │\n│  ├─ Income Statement テーブル                                        │\n│  └─ Cash Flow テーブル                                               │\n└──────────────────────────────────────────────────────────────────────┘\n                                    │\n                                    │ node scripts/generate-financial-data.mjs\n                                    ▼\n┌──────────────────────────────────────────────────────────────────────┐\n│  app/composables/financial-data.ts (~3.4MB)                          │\n│  ├─ financialData: FinancialDataStore                                │\n│  └─ getAllCompanies(): CompanyData[]                                 │\n└──────────────────────────────────────────────────────────────────────┘\n                                    │\n                                    │ import { getAllCompanies }\n                                    ▼\n┌──────────────────────────────────────────────────────────────────────┐\n│  proportional-animation.vue                                          │\n│  ├─ companiesArray = getAllCompanies()                               │\n│  ├─ selectedCompany = companiesArray[selectedCompanyIndex]           │\n│  └─ useCompanyFinancialMetrics(selectedCompany, periodIndex)         │\n└──────────────────────────────────────────────────────────────────────┘\n                                    │\n                                    │ getPlDetailedAtIndex(periodIndex)\n                                    ▼\n┌──────────────────────────────────────────────────────────────────────┐\n│  PLWaterfallChart.vue                                                │\n│  └─ props.data: PLDetailedData                                       │\n└──────────────────────────────────────────────────────────────────────┘\n","text",[17,37,34],{"__ignoreMap":38},"",[26,40,42],{"id":41},"_1-データソース-sqlite","1. データソース: SQLite",[14,44,45,46,49],{},"財務データは ",[17,47,48],{},"data/koyfin.db"," に格納されています。",[51,52,53,61,67],"ul",{},[54,55,56,60],"li",{},[57,58,59],"strong",{},"Income Statement テーブル",": 損益計算書データ",[54,62,63,66],{},[57,64,65],{},"Balance Sheet テーブル",": 貸借対照表データ",[54,68,69,72],{},[57,70,71],{},"Cash Flow テーブル",": キャッシュフロー計算書データ",[26,74,76],{"id":75},"_2-データ生成スクリプト","2. データ生成スクリプト",[14,78,79,82],{},[17,80,81],{},"scripts/generate-financial-data.mjs"," がSQLiteから TypeScript ファイルを自動生成します。",[30,84,88],{"className":85,"code":86,"language":87,"meta":38,"style":38},"language-bash shiki shiki-themes vitesse-light vitesse-light","cd apps/web\nnode scripts/generate-financial-data.mjs\n","bash",[17,89,90,103],{"__ignoreMap":38},[91,92,95,99],"span",{"class":93,"line":94},"line",1,[91,96,98],{"class":97},"sz8Xr","cd",[91,100,102],{"class":101},"sdGka"," apps/web\n",[91,104,106,110],{"class":93,"line":105},2,[91,107,109],{"class":108},"senZ8","node",[91,111,112],{"class":101}," scripts/generate-financial-data.mjs\n",[14,114,115,118,119],{},[57,116,117],{},"出力先",": ",[17,120,121],{},"app/composables/financial-data.ts",[14,123,124],{},"このスクリプトは以下を行います:",[126,127,128,131,137],"ol",{},[54,129,130],{},"SQLiteからデータを読み込み",[54,132,133,136],{},[17,134,135],{},"PLDetailedData"," 形式に変換",[54,138,139],{},"TypeScript コードとして出力",[26,141,143],{"id":142},"_3-型定義-pldetaileddata","3. 型定義: PLDetailedData",[14,145,146,149],{},[17,147,148],{},"app/types/financial.ts"," で定義されています。",[30,151,155],{"className":152,"code":153,"language":154,"meta":38,"style":38},"language-typescript shiki shiki-themes vitesse-light vitesse-light","export interface PLDetailedData {\n  revenue: number           // 売上高\n  costOfRevenue: number     // 売上原価\n  grossProfit: number       // 売上総利益\n  sgaExpenses: number       // 販売費及び一般管理費\n  rdExpenses: number        // 研究開発費\n  daExpenses: number        // 減価償却費\n  otherOperatingExpenses: number  // その他営業費用\n  operatingIncome: number   // 営業利益\n  nonOperatingIncome: number     // 営業外収益\n  nonOperatingExpenses: number   // 営業外費用\n  preTaxIncome: number      // 税引前利益\n  taxes: number             // 法人税等\n  netIncome: number         // 純利益\n}\n","typescript",[17,156,157,175,190,203,216,229,242,255,268,281,294,307,320,333,346],{"__ignoreMap":38},[91,158,159,163,167,171],{"class":93,"line":94},[91,160,162],{"class":161},"sHkkW","export",[91,164,166],{"class":165},"stQ0i"," interface",[91,168,170],{"class":169},"sSkh3"," PLDetailedData",[91,172,174],{"class":173},"shFtX"," {\n",[91,176,177,181,183,186],{"class":93,"line":105},[91,178,180],{"class":179},"s4oTP","  revenue",[91,182,118],{"class":173},[91,184,185],{"class":169},"number",[91,187,189],{"class":188},"sxvE3","           // 売上高\n",[91,191,193,196,198,200],{"class":93,"line":192},3,[91,194,195],{"class":179},"  costOfRevenue",[91,197,118],{"class":173},[91,199,185],{"class":169},[91,201,202],{"class":188},"     // 売上原価\n",[91,204,206,209,211,213],{"class":93,"line":205},4,[91,207,208],{"class":179},"  grossProfit",[91,210,118],{"class":173},[91,212,185],{"class":169},[91,214,215],{"class":188},"       // 売上総利益\n",[91,217,219,222,224,226],{"class":93,"line":218},5,[91,220,221],{"class":179},"  sgaExpenses",[91,223,118],{"class":173},[91,225,185],{"class":169},[91,227,228],{"class":188},"       // 販売費及び一般管理費\n",[91,230,232,235,237,239],{"class":93,"line":231},6,[91,233,234],{"class":179},"  rdExpenses",[91,236,118],{"class":173},[91,238,185],{"class":169},[91,240,241],{"class":188},"        // 研究開発費\n",[91,243,245,248,250,252],{"class":93,"line":244},7,[91,246,247],{"class":179},"  daExpenses",[91,249,118],{"class":173},[91,251,185],{"class":169},[91,253,254],{"class":188},"        // 減価償却費\n",[91,256,258,261,263,265],{"class":93,"line":257},8,[91,259,260],{"class":179},"  otherOperatingExpenses",[91,262,118],{"class":173},[91,264,185],{"class":169},[91,266,267],{"class":188},"  // その他営業費用\n",[91,269,271,274,276,278],{"class":93,"line":270},9,[91,272,273],{"class":179},"  operatingIncome",[91,275,118],{"class":173},[91,277,185],{"class":169},[91,279,280],{"class":188},"   // 営業利益\n",[91,282,284,287,289,291],{"class":93,"line":283},10,[91,285,286],{"class":179},"  nonOperatingIncome",[91,288,118],{"class":173},[91,290,185],{"class":169},[91,292,293],{"class":188},"     // 営業外収益\n",[91,295,297,300,302,304],{"class":93,"line":296},11,[91,298,299],{"class":179},"  nonOperatingExpenses",[91,301,118],{"class":173},[91,303,185],{"class":169},[91,305,306],{"class":188},"   // 営業外費用\n",[91,308,310,313,315,317],{"class":93,"line":309},12,[91,311,312],{"class":179},"  preTaxIncome",[91,314,118],{"class":173},[91,316,185],{"class":169},[91,318,319],{"class":188},"      // 税引前利益\n",[91,321,323,326,328,330],{"class":93,"line":322},13,[91,324,325],{"class":179},"  taxes",[91,327,118],{"class":173},[91,329,185],{"class":169},[91,331,332],{"class":188},"             // 法人税等\n",[91,334,336,339,341,343],{"class":93,"line":335},14,[91,337,338],{"class":179},"  netIncome",[91,340,118],{"class":173},[91,342,185],{"class":169},[91,344,345],{"class":188},"         // 純利益\n",[91,347,349],{"class":93,"line":348},15,[91,350,351],{"class":173},"}\n",[26,353,355],{"id":354},"_4-ページでのデータ取得","4. ページでのデータ取得",[14,357,358,360],{},[17,359,19],{}," では、以下のようにデータを取得しています。",[362,363,365],"h3",{"id":364},"_41-企業データの取得","4.1 企業データの取得",[30,367,369],{"className":152,"code":368,"language":154,"meta":38,"style":38},"import { getAllCompanies } from '~/composables/financial-data'\n\nconst companiesArray = computed(() => {\n  const allCompanies = getAllCompanies()\n  // セクター別・時価総額順でソート\n  return allCompanies.sort((a, b) => { /* ... */ })\n})\n",[17,370,371,398,404,426,441,446,485],{"__ignoreMap":38},[91,372,373,376,379,382,385,388,392,395],{"class":93,"line":94},[91,374,375],{"class":161},"import",[91,377,378],{"class":173}," {",[91,380,381],{"class":179}," getAllCompanies",[91,383,384],{"class":173}," }",[91,386,387],{"class":161}," from",[91,389,391],{"class":390},"sMJiu"," '",[91,393,394],{"class":101},"~/composables/financial-data",[91,396,397],{"class":390},"'\n",[91,399,400],{"class":93,"line":105},[91,401,403],{"emptyLinePlaceholder":402},true,"\n",[91,405,406,409,412,415,418,421,424],{"class":93,"line":192},[91,407,408],{"class":165},"const ",[91,410,411],{"class":179},"companiesArray",[91,413,414],{"class":173}," =",[91,416,417],{"class":108}," computed",[91,419,420],{"class":173},"(()",[91,422,423],{"class":173}," =>",[91,425,174],{"class":173},[91,427,428,431,434,436,438],{"class":93,"line":205},[91,429,430],{"class":165},"  const ",[91,432,433],{"class":179},"allCompanies",[91,435,414],{"class":173},[91,437,381],{"class":108},[91,439,440],{"class":173},"()\n",[91,442,443],{"class":93,"line":218},[91,444,445],{"class":188},"  // セクター別・時価総額順でソート\n",[91,447,448,451,454,457,460,463,466,469,472,475,477,479,482],{"class":93,"line":231},[91,449,450],{"class":161},"  return",[91,452,453],{"class":179}," allCompanies",[91,455,456],{"class":173},".",[91,458,459],{"class":108},"sort",[91,461,462],{"class":173},"((",[91,464,465],{"class":179},"a",[91,467,468],{"class":173},",",[91,470,471],{"class":179}," b",[91,473,474],{"class":173},")",[91,476,423],{"class":173},[91,478,378],{"class":173},[91,480,481],{"class":188}," /* ... */",[91,483,484],{"class":173}," })\n",[91,486,487],{"class":93,"line":244},[91,488,489],{"class":173},"})\n",[362,491,493],{"id":492},"_42-選択中の企業","4.2 選択中の企業",[30,495,497],{"className":152,"code":496,"language":154,"meta":38,"style":38},"const selectedCompanyIndex = ref(0)\n\nconst selectedCompany = computed(() => {\n  return companiesArray.value[selectedCompanyIndex.value]\n})\n",[17,498,499,521,525,542,566],{"__ignoreMap":38},[91,500,501,503,506,508,511,514,518],{"class":93,"line":94},[91,502,408],{"class":165},[91,504,505],{"class":179},"selectedCompanyIndex",[91,507,414],{"class":173},[91,509,510],{"class":108}," ref",[91,512,513],{"class":173},"(",[91,515,517],{"class":516},"sM54T","0",[91,519,520],{"class":173},")\n",[91,522,523],{"class":93,"line":105},[91,524,403],{"emptyLinePlaceholder":402},[91,526,527,529,532,534,536,538,540],{"class":93,"line":192},[91,528,408],{"class":165},[91,530,531],{"class":179},"selectedCompany",[91,533,414],{"class":173},[91,535,417],{"class":108},[91,537,420],{"class":173},[91,539,423],{"class":173},[91,541,174],{"class":173},[91,543,544,546,549,551,554,557,559,561,563],{"class":93,"line":205},[91,545,450],{"class":161},[91,547,548],{"class":179}," companiesArray",[91,550,456],{"class":173},[91,552,553],{"class":179},"value",[91,555,556],{"class":173},"[",[91,558,505],{"class":179},[91,560,456],{"class":173},[91,562,553],{"class":179},[91,564,565],{"class":173},"]\n",[91,567,568],{"class":93,"line":218},[91,569,489],{"class":173},[362,571,573],{"id":572},"_43-composableでデータ加工","4.3 Composableでデータ加工",[30,575,577],{"className":152,"code":576,"language":154,"meta":38,"style":38},"import { useCompanyFinancialMetrics } from '~/components/financial-quiz/proportional-animation'\n\nconst {\n  periodLabels,\n  getPlDetailedAtIndex\n} = useCompanyFinancialMetrics(selectedCompany, periodIndex)\n",[17,578,579,599,603,610,618,623],{"__ignoreMap":38},[91,580,581,583,585,588,590,592,594,597],{"class":93,"line":94},[91,582,375],{"class":161},[91,584,378],{"class":173},[91,586,587],{"class":179}," useCompanyFinancialMetrics",[91,589,384],{"class":173},[91,591,387],{"class":161},[91,593,391],{"class":390},[91,595,596],{"class":101},"~/components/financial-quiz/proportional-animation",[91,598,397],{"class":390},[91,600,601],{"class":93,"line":105},[91,602,403],{"emptyLinePlaceholder":402},[91,604,605,607],{"class":93,"line":192},[91,606,408],{"class":165},[91,608,609],{"class":173},"{\n",[91,611,612,615],{"class":93,"line":205},[91,613,614],{"class":179},"  periodLabels",[91,616,617],{"class":173},",\n",[91,619,620],{"class":93,"line":218},[91,621,622],{"class":179},"  getPlDetailedAtIndex\n",[91,624,625,628,630,632,634,636,638,641],{"class":93,"line":231},[91,626,627],{"class":173},"}",[91,629,414],{"class":173},[91,631,587],{"class":108},[91,633,513],{"class":173},[91,635,531],{"class":179},[91,637,468],{"class":173},[91,639,640],{"class":179}," periodIndex",[91,642,520],{"class":173},[362,644,646],{"id":645},"_44-ウォーターフォール用データ","4.4 ウォーターフォール用データ",[30,648,650],{"className":152,"code":649,"language":154,"meta":38,"style":38},"const currentPlDetailed = computed(() =>\n  getPlDetailedAtIndex(periodIndex.value)\n)\n",[17,651,652,668,684],{"__ignoreMap":38},[91,653,654,656,659,661,663,665],{"class":93,"line":94},[91,655,408],{"class":165},[91,657,658],{"class":179},"currentPlDetailed",[91,660,414],{"class":173},[91,662,417],{"class":108},[91,664,420],{"class":173},[91,666,667],{"class":173}," =>\n",[91,669,670,673,675,678,680,682],{"class":93,"line":105},[91,671,672],{"class":108},"  getPlDetailedAtIndex",[91,674,513],{"class":173},[91,676,677],{"class":179},"periodIndex",[91,679,456],{"class":173},[91,681,553],{"class":179},[91,683,520],{"class":173},[91,685,686],{"class":93,"line":192},[91,687,520],{"class":173},[26,689,691],{"id":690},"_5-コンポーネントへのデータ渡し","5. コンポーネントへのデータ渡し",[30,693,697],{"className":694,"code":695,"language":696,"meta":38,"style":38},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003CPLWaterfallChart\n  v-if=\"currentPlDetailed\"\n  :data=\"currentPlDetailed\"\n  :height=\"180\"\n  :bar-width=\"20\"\n  :bar-gap=\"38\"\n  :font-size=\"9\"\n  :value-font-size=\"10\"\n/>\n","vue",[17,698,699,707,723,739,755,771,787,803,819],{"__ignoreMap":38},[91,700,701,704],{"class":93,"line":94},[91,702,703],{"class":173},"\u003C",[91,705,706],{"class":161},"PLWaterfallChart\n",[91,708,709,712,715,718,720],{"class":93,"line":105},[91,710,711],{"class":161},"  v-if",[91,713,714],{"class":173},"=",[91,716,717],{"class":173},"\"",[91,719,658],{"class":179},[91,721,722],{"class":173},"\"\n",[91,724,725,728,731,733,735,737],{"class":93,"line":192},[91,726,727],{"class":173},"  :",[91,729,730],{"class":108},"data",[91,732,714],{"class":173},[91,734,717],{"class":173},[91,736,658],{"class":179},[91,738,722],{"class":173},[91,740,741,743,746,748,750,753],{"class":93,"line":205},[91,742,727],{"class":173},[91,744,745],{"class":108},"height",[91,747,714],{"class":173},[91,749,717],{"class":173},[91,751,752],{"class":516},"180",[91,754,722],{"class":173},[91,756,757,759,762,764,766,769],{"class":93,"line":218},[91,758,727],{"class":173},[91,760,761],{"class":108},"bar-width",[91,763,714],{"class":173},[91,765,717],{"class":173},[91,767,768],{"class":516},"20",[91,770,722],{"class":173},[91,772,773,775,778,780,782,785],{"class":93,"line":231},[91,774,727],{"class":173},[91,776,777],{"class":108},"bar-gap",[91,779,714],{"class":173},[91,781,717],{"class":173},[91,783,784],{"class":516},"38",[91,786,722],{"class":173},[91,788,789,791,794,796,798,801],{"class":93,"line":244},[91,790,727],{"class":173},[91,792,793],{"class":108},"font-size",[91,795,714],{"class":173},[91,797,717],{"class":173},[91,799,800],{"class":516},"9",[91,802,722],{"class":173},[91,804,805,807,810,812,814,817],{"class":93,"line":257},[91,806,727],{"class":173},[91,808,809],{"class":108},"value-font-size",[91,811,714],{"class":173},[91,813,717],{"class":173},[91,815,816],{"class":516},"10",[91,818,722],{"class":173},[91,820,821],{"class":93,"line":270},[91,822,824],{"class":823},"sG7-3","/>\n",[14,826,827,830],{},[57,828,829],{},"渡されるプロパティ",":",[832,833,834,850],"table",{},[835,836,837],"thead",{},[838,839,840,844,847],"tr",{},[841,842,843],"th",{},"プロパティ",[841,845,846],{},"型",[841,848,849],{},"説明",[851,852,853,867,880,894,908,922],"tbody",{},[838,854,855,860,864],{},[856,857,858],"td",{},[17,859,730],{},[856,861,862],{},[17,863,135],{},[856,865,866],{},"P/L詳細データ（必須）",[838,868,869,873,877],{},[856,870,871],{},[17,872,745],{},[856,874,875],{},[17,876,185],{},[856,878,879],{},"チャートの高さ (px)",[838,881,882,887,891],{},[856,883,884],{},[17,885,886],{},"barWidth",[856,888,889],{},[17,890,185],{},[856,892,893],{},"バーの幅 (px)",[838,895,896,901,905],{},[856,897,898],{},[17,899,900],{},"barGap",[856,902,903],{},[17,904,185],{},[856,906,907],{},"バー間の間隔 (px)",[838,909,910,915,919],{},[856,911,912],{},[17,913,914],{},"fontSize",[856,916,917],{},[17,918,185],{},[856,920,921],{},"ラベルのフォントサイズ",[838,923,924,929,933],{},[856,925,926],{},[17,927,928],{},"valueFontSize",[856,930,931],{},[17,932,185],{},[856,934,935],{},"値のフォントサイズ",[26,937,939],{"id":938},"_6-plwaterfallchart-の内部処理","6. PLWaterfallChart の内部処理",[14,941,942,943,946],{},"コンポーネント内部では、",[17,944,945],{},"calculateWaterfallPositions()"," 関数でデータを変換しています。",[362,948,949],{"id":949},"ウォーターフォールの流れ",[30,951,954],{"className":952,"code":953,"language":35},[33],"Revenue\n  │ - Cost of Revenue\n  ▼\nGross Profit\n  │ - SG&A\n  │ - R&D\n  │ - D&A\n  │ - Other Operating\n  ▼\nOperating Income\n  │ ± Non-operating\n  ▼\nPre-Tax Income\n  │ - Taxes\n  ▼\nNet Income\n",[17,955,953],{"__ignoreMap":38},[362,957,958],{"id":958},"バーの種類",[832,960,961,973],{},[835,962,963],{},[838,964,965,968,970],{},[841,966,967],{},"type",[841,969,849],{},[841,971,972],{},"色",[851,974,975,988,1001,1014],{},[838,976,977,982,985],{},[856,978,979],{},[17,980,981],{},"income",[856,983,984],{},"収益（上向き）",[856,986,987],{},"赤系",[838,989,990,995,998],{},[856,991,992],{},[17,993,994],{},"expense",[856,996,997],{},"費用（下向き）",[856,999,1000],{},"青系",[838,1002,1003,1008,1011],{},[856,1004,1005],{},[17,1006,1007],{},"profit",[856,1009,1010],{},"利益（中間結果）",[856,1012,1013],{},"緑系",[838,1015,1016,1021,1024],{},[856,1017,1018],{},[17,1019,1020],{},"loss",[856,1022,1023],{},"損失（マイナス利益）",[856,1025,1026],{},"緑系（ラベル赤）",[26,1028,1030],{"id":1029},"_7-composable-の役割","7. Composable の役割",[14,1032,1033,1036],{},[17,1034,1035],{},"useCompanyFinancialMetrics"," は企業データから各種指標を算出するcomposableです。",[14,1038,1039,118,1042],{},[57,1040,1041],{},"位置",[17,1043,1044],{},"app/components/financial-quiz/proportional-animation/composables/useCompanyFinancialMetrics.ts",[30,1046,1048],{"className":152,"code":1047,"language":154,"meta":38,"style":38},"export function useCompanyFinancialMetrics(\n  company: Ref\u003CCompanyData | null | undefined>,\n  periodIndex?: Ref\u003Cnumber>\n) {\n  // getPlDetailedAtIndex: 指定期間のP/L詳細を取得\n  const getPlDetailedAtIndex = (index: number): PLDetailedData | null => {\n    if (!company.value || index >= company.value.periods.length) return null\n    return company.value.periods[index].data.plDetailed ?? null\n  }\n\n  return {\n    periodLabels,\n    marginData,\n    epsData,\n    // ...他の指標\n    getPlDetailedAtIndex\n  }\n}\n",[17,1049,1050,1062,1091,1110,1116,1121,1156,1206,1238,1243,1247,1253,1260,1267,1274,1279,1285,1290],{"__ignoreMap":38},[91,1051,1052,1054,1057,1059],{"class":93,"line":94},[91,1053,162],{"class":161},[91,1055,1056],{"class":165}," function",[91,1058,587],{"class":108},[91,1060,1061],{"class":173},"(\n",[91,1063,1064,1067,1069,1072,1074,1077,1080,1083,1085,1088],{"class":93,"line":105},[91,1065,1066],{"class":179},"  company",[91,1068,118],{"class":173},[91,1070,1071],{"class":169},"Ref",[91,1073,703],{"class":173},[91,1075,1076],{"class":169},"CompanyData",[91,1078,1079],{"class":173}," | ",[91,1081,1082],{"class":165},"null",[91,1084,1079],{"class":173},[91,1086,1087],{"class":165},"undefined",[91,1089,1090],{"class":173},">,\n",[91,1092,1093,1096,1099,1101,1103,1105,1107],{"class":93,"line":192},[91,1094,1095],{"class":179},"  periodIndex",[91,1097,1098],{"class":165},"?",[91,1100,118],{"class":173},[91,1102,1071],{"class":169},[91,1104,703],{"class":173},[91,1106,185],{"class":169},[91,1108,1109],{"class":173},">\n",[91,1111,1112,1114],{"class":93,"line":205},[91,1113,474],{"class":173},[91,1115,174],{"class":173},[91,1117,1118],{"class":93,"line":218},[91,1119,1120],{"class":188},"  // getPlDetailedAtIndex: 指定期間のP/L詳細を取得\n",[91,1122,1123,1125,1128,1130,1133,1136,1138,1140,1143,1145,1148,1151,1154],{"class":93,"line":231},[91,1124,430],{"class":165},[91,1126,1127],{"class":108},"getPlDetailedAtIndex",[91,1129,414],{"class":173},[91,1131,1132],{"class":173}," (",[91,1134,1135],{"class":179},"index",[91,1137,118],{"class":173},[91,1139,185],{"class":169},[91,1141,1142],{"class":173},"):",[91,1144,170],{"class":169},[91,1146,1147],{"class":173}," |",[91,1149,1150],{"class":165}," null ",[91,1152,1153],{"class":173},"=>",[91,1155,174],{"class":173},[91,1157,1158,1161,1163,1166,1169,1171,1173,1176,1178,1181,1184,1186,1188,1190,1193,1195,1198,1200,1203],{"class":93,"line":244},[91,1159,1160],{"class":161},"    if",[91,1162,1132],{"class":173},[91,1164,1165],{"class":165},"!",[91,1167,1168],{"class":179},"company",[91,1170,456],{"class":173},[91,1172,553],{"class":179},[91,1174,1175],{"class":165}," || ",[91,1177,1135],{"class":179},[91,1179,1180],{"class":173}," >=",[91,1182,1183],{"class":179}," company",[91,1185,456],{"class":173},[91,1187,553],{"class":179},[91,1189,456],{"class":173},[91,1191,1192],{"class":179},"periods",[91,1194,456],{"class":173},[91,1196,1197],{"class":97},"length",[91,1199,474],{"class":173},[91,1201,1202],{"class":161}," return",[91,1204,1205],{"class":165}," null\n",[91,1207,1208,1211,1213,1215,1217,1219,1221,1223,1225,1228,1230,1232,1235],{"class":93,"line":257},[91,1209,1210],{"class":161},"    return",[91,1212,1183],{"class":179},[91,1214,456],{"class":173},[91,1216,553],{"class":179},[91,1218,456],{"class":173},[91,1220,1192],{"class":179},[91,1222,556],{"class":173},[91,1224,1135],{"class":179},[91,1226,1227],{"class":173},"].",[91,1229,730],{"class":179},[91,1231,456],{"class":173},[91,1233,1234],{"class":179},"plDetailed",[91,1236,1237],{"class":165}," ?? null\n",[91,1239,1240],{"class":93,"line":270},[91,1241,1242],{"class":173},"  }\n",[91,1244,1245],{"class":93,"line":283},[91,1246,403],{"emptyLinePlaceholder":402},[91,1248,1249,1251],{"class":93,"line":296},[91,1250,450],{"class":161},[91,1252,174],{"class":173},[91,1254,1255,1258],{"class":93,"line":309},[91,1256,1257],{"class":179},"    periodLabels",[91,1259,617],{"class":173},[91,1261,1262,1265],{"class":93,"line":322},[91,1263,1264],{"class":179},"    marginData",[91,1266,617],{"class":173},[91,1268,1269,1272],{"class":93,"line":335},[91,1270,1271],{"class":179},"    epsData",[91,1273,617],{"class":173},[91,1275,1276],{"class":93,"line":348},[91,1277,1278],{"class":188},"    // ...他の指標\n",[91,1280,1282],{"class":93,"line":1281},16,[91,1283,1284],{"class":179},"    getPlDetailedAtIndex\n",[91,1286,1288],{"class":93,"line":1287},17,[91,1289,1242],{"class":173},[91,1291,1293],{"class":93,"line":1292},18,[91,1294,351],{"class":173},[26,1296,1297],{"id":1297},"まとめ",[126,1299,1300,1312,1321,1331,1342],{},[54,1301,1302,1305,1306,1305,1309],{},[57,1303,1304],{},"SQLite"," → ",[17,1307,1308],{},"generate-financial-data.mjs",[57,1310,1311],{},"financial-data.ts",[54,1313,1314,1305,1316,1305,1319],{},[57,1315,1311],{},[17,1317,1318],{},"getAllCompanies()",[57,1320,19],{},[54,1322,1323,1305,1325,1305,1328],{},[57,1324,531],{},[17,1326,1327],{},"useCompanyFinancialMetrics()",[57,1329,1330],{},"getPlDetailedAtIndex()",[54,1332,1333,1305,1335,1338,1339],{},[57,1334,135],{},[17,1336,1337],{},":data"," prop → ",[57,1340,1341],{},"PLWaterfallChart.vue",[54,1343,1344,1346],{},[57,1345,945],{}," → SVG描画",[1348,1349,1350],"style",{},"html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":38,"searchDepth":105,"depth":105,"links":1352},[1353,1354,1355,1356,1357,1363,1364,1368,1369],{"id":28,"depth":105,"text":28},{"id":41,"depth":105,"text":42},{"id":75,"depth":105,"text":76},{"id":142,"depth":105,"text":143},{"id":354,"depth":105,"text":355,"children":1358},[1359,1360,1361,1362],{"id":364,"depth":192,"text":365},{"id":492,"depth":192,"text":493},{"id":572,"depth":192,"text":573},{"id":645,"depth":192,"text":646},{"id":690,"depth":105,"text":691},{"id":938,"depth":105,"text":939,"children":1365},[1366,1367],{"id":949,"depth":192,"text":949},{"id":958,"depth":192,"text":958},{"id":1029,"depth":105,"text":1030},{"id":1297,"depth":105,"text":1297},null,"PLWaterfallChartコンポーネントへのデータの流れを解説","md",{},"/waterfall-chart-data-flow",false,"2025-12-20T00:00:00.000Z",{"title":5,"description":1371},"2025-12/2025-12-20/waterfall-chart-data-flow",[1380,1381,1382,1383],"Vue","財務","コンポーネント","データフロー","7aWYND-R9cLKwfU4wLzvy2-rqBn9tt3eL77U8L3ZN5M",[],[1387,1391,1395,1399,1402],{"title":1388,"path":1389,"publishedAt":1390},"MarkdownにVueコンポーネントを埋め込む方法","/how-to-embed-vue-components-in-markdown","2025-11-22T00:00:00.000Z",{"title":1392,"path":1393,"publishedAt":1394},"決算コメントの「3年未満で回収」を原文で検算し、クラウド設備投資チャートと純粋関数に落とすまで","/cloud-capex-chart-and-pure-functions","2026-07-31T00:00:00.000Z",{"title":1396,"path":1397,"publishedAt":1398},"全18講に触って動くシミュレーターを入れた日 — PR12本のレビューから講座導線の作り直しまで","/code-course-interactive-rollout","2026-07-26T00:00:00.000Z",{"title":1400,"path":1401,"publishedAt":1398},"インタラクティブ教材を1枚に集約し、本文の線を減らした日","/interactive-content-consolidation",{"title":1403,"path":1404,"publishedAt":1405},"Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由","/web-tech-stack-2026","2026-07-22T00:00:00.000Z","https://log.eurekapu.com/og/blog/waterfall-chart-data-flow.png?v=2025-12-20T00%3A00%3A00.000Z&title=%E3%82%A6%E3%82%A9%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%83%AD%E3%83%BC%E8%A7%A3%E8%AA%AC&author=Kei%20Komatsu&sig=d4554c664f1a0a7f",1786424463376]