kirin-ri
commented
2 months ago import { BarController, BarElement, CategoryScale, Chart as ChartJS, ChartTypeRegistry, Legend, LinearScale, LineController, LineElement, PointElement, Title, Tooltip } from 'chart.js';
import { useEffect, useRef, useState } from "react";
import { Chart } from 'react-chartjs-2';
ChartJS.register(BarController, LineController, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend);
type DataSet = {
income: number[];
expense: number[];
incomeExpenseDiff?: number[];
balance?: number[];
action?: {
cashFlow: string;
countermeasure: string;
};
};
const CollapsiblePanel = ({ title, money, details }: { title: string; money: string; details: { month: string, amount: string, alert?: boolean }[] }) => {
const [isOpen, setIsOpen] = useState(false);
const togglePanel = () => {
setIsOpen(!isOpen);
};
return (
<div className="collapsible-panel">
<div className="panel-header" onClick={togglePanel}>
<div className="panel-title">{title}</div>
<div className="panel-money">{money}</div>
</div>
{isOpen && (
<div className="panel-content">
<div className="details-container">
{details.map((detail, index) => (
<div key={index} className="detail-item" style={{ color: 'black' }}>
<span>{detail.month}</span>
<span style={{ color: detail.alert ? 'red' : 'black', marginLeft: '5px' }}>
{detail.amount}
</span>
</div>
))}
</div>
</div>
)}
</div>
);
};
const AlertBox = ({ message, onClose }: { message: string; onClose: () => void }) => {
return (
<div className="alert-box">
<div className="alert-content">
<i className="fa fa-exclamation-circle alert-icon" aria-hidden="true"></i>
<span className="alert-message">{message}</span>
</div>
<button className="close-btn" onClick={onClose}>非表示</button>
</div>
);
};
const EmptyPage = () => {
const pageName = '資金繰り表';
const [showAlert, setShowAlert] = useState(true);
const [activeComparison, setActiveComparison] = useState('時系列比較');
const [incomeLevel, setIncomeLevel] = useState('中立');
const [expenseLevel, setExpenseLevel] = useState('中立');
const [cashFlow, setCashFlow] = useState('');
const [countermeasure, setCountermeasure] = useState('');
const chartRef = useRef<ChartJS | null>(null);
const options = {
responsive: true,
layout: {
padding: {
top: 40,
bottom: 0,
left: 0,
right: 0,
},
},
plugins: {
legend: {
display: false,
labels: {
color: 'white',
boxWidth: 0,
boxHeight: 0,
},
},
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '[百万円]',
},
},
},
};
const updateChartAndAction = () => {
const key = `${incomeLevel}-${expenseLevel}` as keyof typeof dataSets;
const selectedData = dataSets[key];
if (!selectedData) {
console.error(`No data found for key: ${incomeLevel}-${expenseLevel}`);
return;
}
const incomeExpenseDiff = selectedData.incomeExpenseDiff || selectedData.income.map((income, i) => income + selectedData.expense[i]);
const balance = selectedData.balance || selectedData.income.reduce((acc: number[], income, i) => {
let newBalance = (acc.length > 0 ? acc[acc.length - 1] : initialBalance) + income + selectedData.expense[i];
acc.push(newBalance);
return acc;
}, [] as number[]);
if (chartRef.current) {
chartRef.current.data = {
labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
datasets: [
{
type: 'bar',
label: '収入',
data: selectedData.income,
backgroundColor: function (context) {
const index = context.dataIndex;
return index < 3 ? 'rgba(153, 102, 255, 0.5)' : 'rgba(153, 102, 255, 0.2)';
},
},
{
type: 'bar',
label: '支出',
data: selectedData.expense,
backgroundColor: function (context) {
const index = context.dataIndex;
return index < 3 ? 'rgba(54, 162, 235, 0.5)' : 'rgba(54, 162, 235, 0.2)';
},
},
{
type: 'line',
label: '当月収支',
data: incomeExpenseDiff,
borderColor: 'blue',
backgroundColor: 'blue',
fill: false,
tension: 0.1,
borderWidth: 2,
pointStyle: 'circle',
pointRadius: 4,
pointHoverRadius: 6,
segment: {
borderDash: (ctx) => {
return ctx.p0DataIndex < 3 ? [] : [5, 5];
},
},
pointBackgroundColor: function (context) {
const index = context.dataIndex;
const value = context.dataset.data[index] ?? 0;
return value < 0 ? 'red' : 'blue';
}
},
{
type: 'line',
label: '月末残高',
data: balance,
borderColor: 'black',
backgroundColor: 'black',
fill: false,
tension: 0.1,
borderWidth: 2,
pointStyle: 'rectRot',
pointRadius: 6,
pointHoverRadius: 8,
segment: {
borderDash: (ctx) => {
return ctx.p0DataIndex < 3 ? [] : [5, 5];
},
},
pointBackgroundColor: function (context) {
const index = context.dataIndex;
const value = context.dataset.data[index] ?? 0;
return value < 0 ? 'red' : 'black';
}
},
{
type: 'line',
label: '前年度残高',
data: [10.0, 12.0, 11.5, 5.5, 9.0, 4.5, 8.5, 8.0, 9.5, 4.0, 9.5, 10.0],
borderColor: 'gray',
backgroundColor: 'gray',
fill: false,
borderWidth: 2,
pointStyle: 'rectRot',
pointRadius: 4,
pointHoverRadius: 6,
},
],
};
chartRef.current.update();
}
if (selectedData.action) {
setCashFlow(selectedData.action.cashFlow);
setCountermeasure(selectedData.action.countermeasure);
}
const actionBox = document.querySelector('.actionbox-message');
if (actionBox) {
actionBox.scrollTop = 0;
}
};
useEffect(() => {
updateChartAndAction();
}, [incomeLevel, expenseLevel]);
const handleIncomeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setIncomeLevel(e.target.value);
};
const handleExpenseChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setExpenseLevel(e.target.value);
};
useEffect(() => {
const customLegendPlugin = {
id: 'customLegend',
afterDraw: function (chart: ChartJS<keyof ChartTypeRegistry, unknown[], unknown>) {
const legend = chart?.legend;
if (!legend || !legend.legendItems) return;
const ctx = chart.ctx;
const itemWidth = chart.width / 4;
let currentX = (chart.width - itemWidth * 3) / 2;
let currentY = 10; // 第一行Y坐标
legend.legendItems.forEach((legendItem, i) => {
if (i === 3) {
currentX = (chart.width - itemWidth * 2) / 2;
currentY += 20;
}
if (legendItem.text === '当月収支' || legendItem.text === '前年度残高' || legendItem.text === '月末残高') {
ctx.save();
ctx.strokeStyle = legendItem.text === '当月収支' ? 'blue' : legendItem.text === '前年度残高' ? 'gray' : 'black';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(currentX, currentY);
ctx.lineTo(currentX + 40, currentY);
ctx.stroke();
ctx.restore();
} else {
ctx.save();
ctx.fillStyle = legendItem.fillStyle as string;
ctx.fillRect(currentX, currentY - 5, 40, 10);
ctx.restore();
}
ctx.textBaseline = 'middle';
ctx.fillStyle = 'black';
ctx.fillText(legendItem.text, currentX + 50, currentY);
currentX += itemWidth;
});
},
};
ChartJS.register(customLegendPlugin);
return () => {
ChartJS.unregister(customLegendPlugin);
};
}, []);
const defaultData = {
labels: [],
datasets: []
};
return (
<div className="content-wrapper metrics-details">
<section className="page-cover">
<div className="page-cover-title-frame">
<h1>{pageName}</h1>
</div>
</section>
{showAlert && (
<div className="alert-container">
<AlertBox
message="期中に当月収支がマイナスになる期間があります"
onClose={() => setShowAlert(false)}
/>
</div>
)}
<div className="main-content">
<div className="left-container">
<div className="graph-container">
<Chart ref={chartRef} type="bar" data={chartRef.current?.data || defaultData} options={options} />
</div>
<div className="additional-section">
<div className="data-filter">
<h2>データ予測</h2>
<div className="filter-group">
<div className="filter-btn">支出</div>
<select className="filter-select" onChange={handleExpenseChange} value={expenseLevel}>
<option value="楽観：0.8倍">楽観：前年度支出の0.8倍</option>
<option value="中立：相当">中立：前年度支出と相当</option>
<option value="悲観：1.2倍">悲観：前年度支出の1.2倍</option>
</select>
</div>
</div>
<div className="data-comparison">
<h2>データ比較</h2>
<button
className={`comparison-btn ${activeComparison === '時系列比較' ? 'active' : ''}`}
>
時系列比較
</button>
</div>
</div>
</div>
<div className="right-container">
<div className="actionbox-title">
<div>推奨アクション</div>
</div>
<div className="actionbox-message">
<div className="action-section">
<h3>残高推移</h3>
<p>{cashFlow}</p>
</div>
<div className="action-section">
<h3>対策</h3>
<ul style={{ paddingLeft: '0' }}> {/* 全体のインデントをゼロに設定 */}
{countermeasure.split('\n').map((item, index) => (
item.trim() === '-' ? (
<li key={index} style={{ listStyleType: 'none' }}>{item}</li>
) : (
<li key={index} style={{ listStyleType: index === 0 ? 'none' : 'disc', marginLeft: index === 0 ? '0' : '20px' }}>
{item}
</li>
)
))}
</ul>
</div>
</div>
<div className="collapsible-panels">
<CollapsiblePanel title="営業キャッシュフロー" money="32,990,433円" details={operatingCashFlow} />
<CollapsiblePanel title="投資キャッシュフロー" money="▲25,947,004円" details={investingCashFlow} />
<CollapsiblePanel title="財務キャッシュフロー" money="▲6,415,126円" details={financingCashFlow} />
</div>
</div>
</div>
</div>
);
};
const initialBalance =10.0
const dataSets: { [key: string]: DataSet } = {
"楽観-楽観": {
income: [34.0, 35.5, 34.5, 36.0, 36.5, 37.0, 37.5, 38.0, 38.5, 39.0, 39.5, 40.0],
expense: [-33.0, -34.0, -35.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0],
balance: [11.0, 12.5, 12.0, 14.0, 16.5, 19.5, 23.0, 27.0, 31.5, 36.5, 42.0, 48.0],
action: {
cashFlow: "昨年の残高推移は比較的安定していました。6月の当月収支がマイナスになっていて、収入が前年同期よりも若干低下しているが、支出の管理がより効率的であったため、全体としての残高推移は安定しています。",
countermeasure: "-"
}
},
"楽観-中立": {
income: [34.0, 35.5, 34.5, 35.5, 36.0, 36.0, 36.5, 37.0, 37.5, 38.0, 38.5, 39.0],
expense: [-33.0, -34.0, -35.0, -35.0, -35.0, -35.0, -35.0, -35.0, -35.0, -35.0, -35.0, -35.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, 0.5, 1.0, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0],
balance: [11.0, 12.5, 12.0, 12.5, 13.5, 14.5, 16.0, 18.0, 20.5, 23.5, 27.0, 31.0],
action: {
cashFlow: "昨年は残高推移が年間を通して安定していました。今年の前半では、6月の当月収支がマイナスになっています。収入は前年並みで推移している一方で、支出がやや増加しています。",
countermeasure: "-"
}
},
"楽観-悲観": {
income: [34.0, 35.5, 34.5, 35.0, 35.5, 36.0, 36.0, 36.5, 37.0, 37.5, 38.0, 38.5],
expense: [-33.0, -34.0, -35.0, -36.0, -36.5, -37.0, -37.5, -38.0, -38.5, -39.0, -39.5, -40.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, -1.0, -1.0, -1.0, -1.5, -1.5, -1.5, -1.5, -1.5, -1.5],
balance: [11.0, 12.5, 12.0, 11.0, 10.0, 9.0, 7.5, 6.0, 4.5, 3.0, 1.5, 0.0],
action: {
cashFlow: "昨年は収入が安定していたものの、設備投資や労務費の増加により、残高推移が後半にかけて悪化しました。今年の前半でも同様の傾向が見られ、6月の当月収支がマイナスになっています。特に支出が収入を上回るリスクが高まっています。",
countermeasure: "残高改善の対策として以下の検討をおすすめいたします。\n現金回収を早めるため、請求の迅速化\n売掛金の管理を徹底し、未回収債権に対する早期対応\n短期的な追加融資\nリスク管理を強化するため、定期的かつ頻度を上げて残高状況のチェックとアクションを実行"
}
},
"中立-楽観": {
income: [34.0, 35.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5],
expense: [-33.0, -34.0, -35.0, -33.0, -32.5, -32.0, -31.5, -31.0, -30.5, -30.0, -29.5, -29.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5],
balance: [11.0, 12.5, 12.0, 13.5, 15.5, 18.0, 21.0, 24.5, 28.5, 33.0, 38.0, 43.5],
action: {
cashFlow: "昨年は全体的に安定した残高推移が見られました。今年の前半では収入が予想を下回る一方で、6月の当月収支がマイナスになっています。支出管理が良好であったため、残高推移は比較的安定しています。",
countermeasure: "-"
}
},
"中立-中立": {
income: [34.0, 35.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5],
expense: [-33.0, -34.0, -35.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0, -34.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
balance: [11.0, 12.5, 12.0, 12.5, 13.0, 13.5, 14.0, 14.5, 15.0, 15.5, 16.0, 16.5],
action: {
cashFlow: "昨年の残高推移は非常に安定していました。今年の前半では、6月の当月収支がマイナスになっていますが、収入と支出のバランスが取れており、全体として安定した残高推移を維持しています。今後も同様のパターンが続くと予想されます。",
countermeasure: "残高改善の対策として以下の検討をおすすめいたします。\n売掛金の管理を徹底し、現金回収の迅速化\n予測可能なキャッシュフローを維持するための計画的な支出管理\n短期および中長期の資金計画の策定"
}
},
"中立-悲観": {
income: [34.0, 35.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5, 34.5],
expense: [-33.0, -34.0, -35.0, -36.0, -37.0, -38.0, -39.0, -40.0, -41.0, -42.0, -43.0, -44.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, -1.5, -2.5, -3.5, -4.5, -5.5, -6.5, -7.5, -8.5, -9.5],
balance: [11.0, 12.5, 12.0, 10.5, 8.0, 4.5, 0.0, -5.5, -12.0, -19.5, -28.0, -37.5],
action: {
cashFlow: "昨年は支出が増加し、残高推移が後半にかけて悪化しました。今年の前半でも同様の傾向が見られ、6月の当月収支がマイナスになっています。収入は安定していますが、支出の増加により残高推移が悪化しています。",
countermeasure: "残高改善の対策として以下の検討をおすすめいたします。\n現金回収を早めるため、請求の迅速化\n売掛金の管理を徹底し、未回収の債権に対する早期対応\n短期的な追加融資\nリスク管理を強化するため、定期的かつ頻度を上げて残高状況のチェックとアクションを実行"
}
},
"悲観-楽観": {
income: [34.0, 35.5, 34.5, 33.5, 33.0, 32.5, 32.0, 31.5, 31.0, 30.5, 30.0, 29.5],
expense: [-33.0, -34.0, -35.0, -33.0, -32.0, -31.0, -30.0, -29.0, -28.0, -27.0, -26.0, -25.0],
incomeExpenseDiff: [1.0, 1.5, -0.5, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5],
balance: [11.0, 12.5, 12.0, 12.5, 13.5, 15.0, 17.0, 19.5, 22.5, 26.0, 30.0, 34.5],
action: {
cashFlow: "昨年は収入の減少と支出の抑制により、残高推移が後半にかけて改善されました。今年の前半では収入の減少が続き、支出の抑制も限界に達しているため、6月の当月収支がマイナスになっています。",
countermeasure: "残高改善の対策として以下の検討をおすすめいたします。\n計画を見直し、過剰在庫を削減することで資金を効率的に運用\n短期および中長期の追加融資\n投資家からの資金調達など、手段の多様化"
}
},
"悲観-中立": {
income: [34.0, 35.5, 34.5, 33.0, 32.5, 32.0, 31.5, 31.0, 30.5, 30.0, 29.5, 29.0],
expense: [-33.0, -34.0, -35.0, -34.5, -34.5, -34.5, -34.5, -34.5, -34.5, -34.5, -34.5, -34.5],
incomeExpenseDiff: [1.0, 1.5, -0.5, -1.5, -2.0, -2.5, -3.0, -3.5, -4.0, -4.5, -5.0, -5.5],
balance: [11.0, 12.5, 12.0, 10.5, 8.5, 6.0, 3.0, -0.5, -4.5, -9.0, -14.0, -19.5],
action: {
cashFlow: "昨年の残高推移は、支出の抑制により後半にかけて若干の改善が見られましたが、今年の前半では収入の減少が続き、支出の増加が懸念されています。6月の当月収支がマイナスになっていて、残高推移の悪化に注意が必要です。",
countermeasure: "残高改善の対策として以下の検討をおすすめいたします。\n売掛金の管理を徹底し、未回収の債権に対する早期対応\n現金回収を早めるため、請求の迅速化\n短期的な追加融資\nリスク管理を強化するため、定期的かつ頻度を上げて残高状況のチェックとアクションを実行"
}
},
"悲観-悲観": {
income: [34.0, 35.5, 34.5, 33.0, 32.5, 32.0, 31.5, 31.0, 30.5, 30.0, 29.5, 29.0],
expense: [-33.0, -34.0, -35.0, -34.5, -35.0, -35.5, -36.0, -36.5, -37.0, -37.5, -38.0, -38.5],
incomeExpenseDiff: [1.0, 1.5, -0.5, -1.5, -2.5, -3.5, -4.5, -5.5, -6.5, -7.5, -8.5, -9.5],
balance: [11.0, 12.5, 12.0, 10.5, 8.0, 4.5, 0.0, -5.5, -12.0, -19.5, -28.0, -37.5],
action: {
cashFlow: "昨年は支出の増加により残高推移が悪化し、今年の前半でも同様の傾向が見られます。収入の減少と支出の増加が重なり、6月の当月収支がマイナスになっていて、残高推移が非常に厳しい状況です。",
countermeasure: "残高改善の対策として以下の検討をおすすめいたします。\n売掛金の管理を徹底し、未回収の債権に対する早期対応\n現金回収を早めるため、請求の迅速化\n短期的な追加融資\nリスク管理を強化するため、定期的かつ頻度を上げて残高状況のチェックとアクションを実行"
}
}
};
const operatingCashFlow = [
{ month: '4月', amount: '34,035,567円' },
{ month: '5月', amount: '30,407,343円' },
{ month: '6月', amount: '34,528,390円' },
{ month: '7月', amount: '-' },
{ month: '8月', amount: '-' },
{ month: '9月', amount: '-' },
{ month: '10月', amount: '-' },
{ month: '11月', amount: '-' },
{ month: '12月', amount: '-' },
{ month: '1月', amount: '-' },
{ month: '2月', amount: '-' },
{ month: '3月', amount: '-' },
];
const investingCashFlow = [
{ month: '4月', amount: '▲21,502,456円', alert: true },
{ month: '5月', amount: '▲34,023,289円', alert: true },
{ month: '6月', amount: '▲22,315,267円', alert: true },
{ month: '7月', amount: '-' },
{ month: '8月', amount: '-' },
{ month: '9月', amount: '-' },
{ month: '10月', amount: '-' },
{ month: '11月', amount: '-' },
{ month: '12月', amount: '-' },
{ month: '1月', amount: '-' },
{ month: '2月', amount: '-' },
{ month: '3月', amount: '-' },
];
const financingCashFlow = [
{ month: '4月', amount: '▲11,504,456円', alert: true },
{ month: '5月', amount: '5,005,275円' },
{ month: '6月', amount: '▲12,746,198円', alert: true },
{ month: '7月', amount: '-' },
{ month: '8月', amount: '-' },
{ month: '9月', amount: '-' },
{ month: '10月', amount: '-' },
{ month: '11月', amount: '-' },
{ month: '12月', amount: '-' },
{ month: '1月', amount: '-' },
{ month: '2月', amount: '-' },
{ month: '3月', amount: '-' },
];
export default EmptyPage;
支出の選択欄の内容を調整し、 選択後に表示する文言は楽観：0.8倍、中立：相当、悲観：1.2倍にしたい。プルダウンの内容は既存のまま、もしくは調整してほしい。