参与洞察-活动仪表板
基于React的仪表板，用于可视化供应商参与度指标、缓解得分和支柱分布数据。
特性
- 导航栏：带有Beta徽章和菜单项的主导航
- 搜索工具栏：用于筛选供应商的黑色主题搜索栏
- 选项卡切换：在洞察视图和活动视图之间切换
- 见解视图散点图和矿柱分布分析 - 活动视图：包含供应商参与详情的数据表
- 关键指标：显示总参与度、响应率、平均缓解分数、未决审查和分数分布
- 散点图：缓解分数与固有风险的交互式可视化（Insights视图）
- 支柱分布：侧面板显示不同支柱的分布，并带有颜色编码状态（Insights视图）
- 活动表：包含公司信息、进度跟踪和操作按钮的综合表（活动视图）
- 完全响应：针对台式机、平板电脑和移动设备进行了优化
响应断点
该设计可适应不同的屏幕尺寸：
- 桌面：1025px及以上（完整布局）
- 药片，平板：768像素-1024像素（调整间距，堆叠图表部分）
- 移动：767px及以下（堆叠布局，简化导航）
响应功能：
- 移动设备上的导航菜单折叠
- 度量卡垂直堆叠在小屏幕上
- 平板电脑/手机上的图表和支柱分布堆栈
- 搜索工具栏适应屏幕宽度
- 减少填充和字体大小，以获得更好的移动体验
设计来源
此实现基于Figma设计：
- 设计文件：参与度洞察-活动
- 节点ID:461-42131
安装
npm install运行应用程序
npm start应用程序将在您的浏览器中打开 http://localhost:3000.
为生产而建
npm run build技术栈
- 反应18.2.0
- CSS3（无外部框架的自定义CSS）
- 现代JavaScript（ES6+）
项目结构
src/
├── components/
│ ├── Insights.js # Main container with tab state management
│ ├── Navigation.js # Top navigation bar
│ ├── SearchToolbar.js # Search functionality
│ ├── MetricsSection.js # Key metrics display and tab switcher
│ ├── ChartSection.js # Chart container (Insights view)
│ ├── ScatterChart.js # Scatter plot visualization
│ ├── PillarDistribution.js # Pillar sidebar
│ ├── Activity.js # Activity view container
│ ├── ActivityTable.js # Data table for supplier activity
│ └── Select.js # Custom select dropdown
├── App.js # Root component
└── index.js # Entry point用法
在视图之间切换
仪表板有两个主要视图，可通过标题中的选项卡切换器访问：
- 见解选项卡：使用散点图和柱分布显示分析
- 活动选项卡：显示供应商参与活动的详细表格
单击标题中的“见解”或“活动”按钮在视图之间切换。
调色板
- 基本/红色：#ff005c
- 发展/蓝色：#3c76e0
- 高级/绿色：#51af82
- 边界：#e2e2e3
- 文本为深色：#353a3c
- 文本媒体：#585b5d
- 文字灯：#656e72
字体
- 主要的，重要的：国际米兰（400、500、600、700）
- 次要的：洛桑TWK（300400）