feat: 10.10线上最新代码提交

src/views/LimitAnalyse/components/DataVisualizationComponents.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import {
     Box,
     Card,
@@ -36,7 +36,9 @@ import {
     WrapItem,
     useColorModeValue,
 } from '@chakra-ui/react';
+import { getFormattedTextProps } from '../../../utils/textUtils';
 import { ExternalLinkIcon } from '@chakra-ui/icons';
+import './WordCloud.css';
 import {
     BarChart, Bar,
     PieChart, Pie, Cell,
@@ -48,7 +50,7 @@ import {
     Treemap,
     Area, AreaChart,
 } from 'recharts';
-
+import ReactWordcloud from 'react-wordcloud';
 // 颜色配置
 const CHART_COLORS = [
     '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD',
@@ -67,70 +69,34 @@ const WordCloud = ({ data }) => {
         );
     }
 
-    const treemapData = data.slice(0, 30).map((item, index) => ({
-        name: item.name,
-        size: item.value,
-        color: CHART_COLORS[index % CHART_COLORS.length]
+    const words = data.slice(0, 100).map(item => ({
+        text: item.name || item.text,
+        value: item.value || item.count || 1
     }));
 
-    const CustomContent = (props) => {
-        const { x, y, width, height, name, size, color } = props;
-        const fontSize = Math.min(Math.max(Math.sqrt(width * height) / 4, 10), 24);
+    const options = {
+        rotations: 2,
+        rotationAngles: [-90, 0],
+        fontFamily: 'Microsoft YaHei, sans-serif',
+        fontSizes: [16, 80],
+        fontWeight: 'bold',
+        padding: 3,
+        scale: 'sqrt',
+    };
 
-        if (width < 30 || height < 20) return null;
-
-        return (
-            <g>
-                <rect
-                    x={x}
-                    y={y}
-                    width={width}
-                    height={height}
-                    style={{
-                        fill: color,
-                        stroke: '#fff',
-                        strokeWidth: 2,
-                        strokeOpacity: 1,
-                    }}
-                />
-                <text
-                    x={x + width / 2}
-                    y={y + height / 2}
-                    textAnchor="middle"
-                    dominantBaseline="central"
-                    fill="white"
-                    fontSize={fontSize}
-                    fontWeight="bold"
-                >
-                    {name}
-                </text>
-                {width > 50 && height > 40 && (
-                    <text
-                        x={x + width / 2}
-                        y={y + height / 2 + fontSize + 2}
-                        textAnchor="middle"
-                        dominantBaseline="central"
-                        fill="white"
-                        fontSize={fontSize * 0.6}
-                        opacity={0.8}
-                    >
-                        {size}
-                    </text>
-                )}
-            </g>
-        );
+    const callbacks = {
+        getWordColor: () => {
+            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'];
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
     };
 
     return (
-        <ResponsiveContainer width="100%" height={400}>
-            <Treemap
-                data={treemapData}
-                dataKey="size"
-                aspectRatio={4 / 3}
-                stroke="#fff"
-                content={<CustomContent />}
-            />
-        </ResponsiveContainer>
+        <ReactWordcloud 
+            words={words} 
+            options={options} 
+            callbacks={callbacks}
+        />
     );
 };
 
@@ -610,7 +576,9 @@ export const StockDetailModal = ({ isOpen, onClose, selectedStock }) => {
                                 <Box>
                                     <Text fontWeight="bold" mb={2}>详细分析</Text>
                                     <Box p={4} bg="gray.50" borderRadius="md">
-                                        <Text whiteSpace="pre-wrap">{selectedStock.summary}</Text>
+                                        <Text {...getFormattedTextProps(selectedStock.summary).props}>
+                                            {getFormattedTextProps(selectedStock.summary).children}
+                                        </Text>
                                     </Box>
                                 </Box>
                             </>