6a4c475d3a
- 主组件从 Chakra Tabs 迁移到 SubTabContainer - 新增 PeriodSelector 时间选择器组件 - IndustryRankingView 增加深色主题支持 - 拆分出 6 个独立 Tab 组件到 tabs/ 目录 - 类型定义优化，props 改为可选
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
/**
|
||
* 利润表 Tab
|
||
*/
|
||
|
||
import React from 'react';
|
||
import {
|
||
Card,
|
||
CardBody,
|
||
CardHeader,
|
||
VStack,
|
||
HStack,
|
||
Heading,
|
||
Badge,
|
||
Text,
|
||
} from '@chakra-ui/react';
|
||
import { IncomeStatementTable } from '../components';
|
||
import type { IncomeStatementData } from '../types';
|
||
|
||
export interface IncomeStatementTabProps {
|
||
incomeStatement: IncomeStatementData[];
|
||
showMetricChart: (name: string, key: string, data: unknown[], path: string) => void;
|
||
calculateYoYChange: (value: number, period: string, data: unknown[], path: string) => { change: number; intensity: number };
|
||
getCellBackground: (change: number, intensity: number) => string;
|
||
positiveColor: string;
|
||
negativeColor: string;
|
||
bgColor: string;
|
||
hoverBg: string;
|
||
}
|
||
|
||
const IncomeStatementTab: React.FC<IncomeStatementTabProps> = ({
|
||
incomeStatement,
|
||
showMetricChart,
|
||
calculateYoYChange,
|
||
getCellBackground,
|
||
positiveColor,
|
||
negativeColor,
|
||
bgColor,
|
||
hoverBg,
|
||
}) => {
|
||
const tableProps = {
|
||
showMetricChart,
|
||
calculateYoYChange,
|
||
getCellBackground,
|
||
positiveColor,
|
||
negativeColor,
|
||
bgColor,
|
||
hoverBg,
|
||
};
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<VStack align="stretch" spacing={2}>
|
||
<HStack justify="space-between">
|
||
<Heading size="md">利润表</Heading>
|
||
<HStack spacing={2}>
|
||
<Badge colorScheme="blue">
|
||
显示最近{Math.min(incomeStatement.length, 8)}期
|
||
</Badge>
|
||
<Text fontSize="sm" color="gray.500">
|
||
红涨绿跌 | 同比变化
|
||
</Text>
|
||
</HStack>
|
||
</HStack>
|
||
<Text fontSize="xs" color="gray.500">
|
||
提示：Q1、中报、Q3、年报数据为累计值，同比显示与去年同期对比
|
||
</Text>
|
||
</VStack>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<IncomeStatementTable data={incomeStatement} {...tableProps} />
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default IncomeStatementTab;
|