kirin-ri
commented
3 months ago import React, { useState, useEffect, useRef } from "react";
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, ScriptableContext } from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend);
const CollapsiblePanel = ({ title, content }: { title: string; content: string }) => {
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>
{isOpen && <div className="panel-content">{content}</div>}
</div>
);
};
const EmptyPage = () => {
const test = '資金繰り表';
const [showAlert, setShowAlert] = useState(true); // 控制警告弹窗的显示
const chartRef = useRef<ChartJS | null>(null);
useEffect(() => {
const chart = chartRef.current;
if (chart) {
const ctx = chart.ctx;
if (ctx && chart.data.datasets[2].data) {
(chart.data.datasets[2].data as number[]).forEach((value, index) => {
if (value < 0) {
const meta = chart.getDatasetMeta(2).data[index];
if (meta) {
const x = meta.x;
const y = meta.y;
ctx.fillStyle = 'red';
ctx.font = 'bold 12px Arial';
ctx.fillText('!', x - 5, y - 10);
}
}
});
}
}
}, []);
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 data = {
labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月'],
datasets: [
{
type: 'bar' as const,
label: '収入',
data: [20, 30, 25, 15, 30, 25, 20, 30, 25, 30, 20, 25],
backgroundColor: 'rgba(153, 102, 255, 0.5)',
},
{
type: 'bar' as const,
label: '支出',
data: [-25, -35, -30, -20, -25, -30, -35, -25, -30, -20, -25, -30],
backgroundColor: 'rgba(54, 162, 235, 0.5)',
},
{
type: 'line' as const,
label: '資金繰り',
data: [10, -5, -10, 5, 10, -15, 20, -10, 15, 5, -5, 10],
borderColor: 'black',
backgroundColor: 'black',
fill: false,
tension: 0.1,
borderWidth: 2,
pointStyle: 'rectRot',
pointRadius: 6,
pointHoverRadius: 8,
pointBackgroundColor: (context: ScriptableContext<'line'>) => {
const index = context.dataIndex;
const value = context.dataset.data[index] as number;
return value < 0 ? 'red' : 'black';
}
}
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
labels: {
font: {
size: 16 // 修改图例文字大小
}
}
},
title: {
display: true,
text: '期中資金繰り表',
font: {
size: 24 // 修改标题文字大小
}
},
tooltip: {
callbacks: {
label: function(context: any) {
const label = context.dataset.label || '';
const value = context.raw;
return `${label}: ${value}`;
}
}
},
},
scales: {
y: {
beginAtZero: true,
}
}
};
return (
<div className="content-wrapper metrics-details">
<section className="page-cover">
<div className="page-cover-title-frame">
<h1>{test}</h1>
</div>
</section>
{/* 警告弹窗 */}
{showAlert && (
<div className="alert-container">
<AlertBox
message="期中に資金がマイナスとなる期間があります"
onClose={() => setShowAlert(false)}
/>
</div>
)}
<div className="main-content">
{/* 資金繰り表のグラフ */}
<div className="graph-container">
<Chart ref={chartRef} type="bar" data={data} options={options} />
</div>
{/* 可折叠面板 */}
<div className="collapsible-panels">
<CollapsiblePanel title="test1" content="abcdef" />
<CollapsiblePanel title="test2" content="abcdef" />
<CollapsiblePanel title="test3" content="abcdef" />
</div>
</div>
</div>
);
};
export default EmptyPage;
let cpu_rate_per_core_hour = 0.048; // 1 vCPUあたりの料金（USD/時間） let mem_rate_per_gb_hour = 0.012; // 1 GiB RAMあたりの料金（USD/時間）
// 各名前空間のCPU使用量の料金計算 let cpu_cost = KubePodInventory | summarize AvgCPU=avg(TotalCpuUsageNanoCores) by Namespace | extend CPUHours = AvgCPU (datetime_diff('hour', max(TimeGenerated), min(TimeGenerated))) / 1e9 | extend CPUCost = CPUHours cpu_rate_per_core_hour;
// 各名前空間のメモリ使用量の料金計算 let mem_cost = KubePodInventory | summarize AvgMemory=avg(TotalMemoryUsageBytes) by Namespace | extend MemoryHours = AvgMemory (datetime_diff('hour', max(TimeGenerated), min(TimeGenerated))) / (1024 1024 1024) | extend MemoryCost = MemoryHours mem_rate_per_gb_hour;
// CPUとメモリの料金を統合 cpu_cost | join kind=inner (mem_cost) on Namespace | project Namespace, CPUCost, MemoryCost, TotalCost = CPUCost + MemoryCost