v2.0.0superset前端组件架构图
2024-07-24 15:03:03 0 举报AI智能生成
登录查看完整内容
初版
作者其他创作
大纲/内容
ReduxProvider状态库
HYDRATE_DASHBOARD（初始化dashboard）
ADD_CHART
REMOVE_CHART
UPDATE_CHART_ID
UPDATE_QUERY_FORM_DATA
......
charts（图表）
datasources（数据源）
DASHBOARD_INFO_UPDATED（更新dashboard）
SET_FILTER_BAR_ORIENTATION（设置全局过滤器布局方向）
SET_CROSS_FILTERS_ENABLED（设置是否启用交叉过滤器）
dashboardInfo（看板信息）
ADD_FILTER
REMOVE_FILTER
CHANGE_FILTER
UPDATE_DIRECT_PATH_TO_FILTER
UPDATE_LAYOUT_COMPONENTS
UPDATE_DASHBOARD_FILTERS_SCOPE
dashboardFilters（看板过滤器）
UPDATE_DATA_MASK
CLEAR_DATA_MASK_STATE
SET_DATA_MASK_FOR_FILTER_CONFIG_COMPLETE
dataMask（看板过滤器实时更新数据）
SET_FILTER_CONFIG_BEGIN
SET_FILTER_CONFIG_COMPLETE
SET_FILTER_CONFIG_FAIL
SET_IN_SCOPE_STATUS_OF_FILTERS
SET_FILTER_SETS_BEGIN
SET_FILTER_SETS_COMPLETE
SET_FILTER_SETS_FAIL
CREATE_FILTER_SET_BEGIN
CREATE_FILTER_SET_COMPLETE
CREATE_FILTER_SET_FAIL
DELETE_FILTER_SET_BEGIN
DELETE_FILTER_SET_COMPLETE
DELETE_FILTER_SET_FAIL
UPDATE_FILTER_SET_BEGIN
UPDATE_FILTER_SET_COMPLETE
UPDATE_FILTER_SET_FAIL
SET_FOCUSED_NATIVE_FILTER
UNSET_FOCUSED_NATIVE_FILTER
SET_HOVERED_NATIVE_FILTER
UNSET_HOVERED_NATIVE_FILTER
外框
nativeFilters
UPDATE_CSS
ADD_SLICE
REMOVE_SLICE
TOGGLE_FAVE_STAR
TOGGLE_PUBLISHED
SET_EDIT_MODE
SET_MAX_UNDO_HISTORY_EXCEEDED
SHOW_BUILDER_PANE
SET_COLOR_SCHEME
TOGGLE_EXPAND_SLICE
ON_CHANGE
SAVE_DASHBOARD_STARTED
SAVE_DASHBOARD_FINISHED
ON_SAVE
SET_UNSAVED_CHANGES
SET_REFRESH_FREQUENCY
ON_REFRESH
ON_FILTERS_REFRESH
ON_FILTERS_REFRESH_SUCCESS
ON_REFRESH_SUCCESS
SET_DIRECT_PATH
SET_ACTIVE_TABS
SET_OVERRIDE_CONFIRM
SET_FOCUSED_FILTER_FIELD
UNSET_FOCUSED_FILTER_FIELD
SET_FULL_SIZE_CHART_ID
SET_DATASETS_STATUS
dashboardState
UPDATE_COMPONENTS
DELETE_COMPONENT
CREATE_COMPONENT
MOVE_COMPONENT
CREATE_TOP_LEVEL_TABS
DELETE_TOP_LEVEL_TABS
UPDATE_COMPONENTS_PARENTS_LIST
DASHBOARD_TITLE_CHANGED
dashboardLayout（看板布局）
FETCH_ALL_SLICES_STARTED
SET_ALL_SLICES
FETCH_ALL_SLICES_FAILED
sliceEntities
HYDRATE_EXPLORE
DYNAMIC_PLUGIN_CONTROLS_READY
POST_DATASOURCE_STARTED
UPDATE_FORM_DATA_BY_DATASOURCE
FETCH_DATASOURCES_STARTED
SET_FIELD_VALUE
SET_EXPLORE_CONTROLS
SET_FORM_DATA
UPDATE_CHART_TITLE
SET_SAVE_ACTION
CREATE_NEW_SLICE
SLICE_UPDATED
SET_FORCE_QUERY
explore（图表配置）
ThemeProvider
ReduxProvider
DndProvider
FlashProvider
EmbeddedUiConfigProvider
DynamicPluginProvider
QueryParamProvider
RootContextProviders
主入口（spa）
<DashboardList/>
<FilterBoxMigrationModal/>
<Header/>
垂直过滤器（左侧）
水平过滤器（顶部）
FilterBar（过滤器）
Chart
ChartHolder
Markdown
Column
Divider
Header
Row
Tab
TabsConnected
DynamicComponent
componentLookup
布局元素
<DashboardComponent/>
<DashboardGrid/>
移动端
<DashboardContainer/>（看板展示/编辑区域）
<SliceAdder/>（图表列表）
<NewTabs/>（tab选项卡）
<NewRow/>（行）
<NewColumn/>（列）
<NewHeader/>（标题行）
<NewMarkdown/>（markdown文本）
<NewDivider/>（分隔符）
<NewDynamicComponent/>（其他可拓展的组件）
<BuilderComponentPane/>（右侧拖拽面板）
<DashboardBuilder/>
<FilterValue/>
<FilterControl/>
filterControlFactory
<FilterControls/>
散点图（EchartsSunburstChartPlugin）
世界地图（EchartsWorldMapChartPlugin）
大数组件（PluginChartNumberComponent）
富文本（PluginChartRichText）
相关性分析（PluginChartCorrelationAnalysis）
...
图表
箭头Arrow
矩形RectBox
图片Upload
文本筛选器TextInput
下拉树SelectTree
下拉列表TextListSelect
过滤组件
刷新
PC
生成二维码，供手机扫码预览
预览
下载为图像
下载为pdf
下载为ppt
下载为CSV
下载为excel
下载为JSON
DownloadMenu
下载
优化
分享操作
组件SharePassword
访问操作
分享
更多
移动/pc切换
操作栏(编辑模式显示)
图表组件
布局元素组件
筛选器组件
动态组件
渲染
内容显示/编辑区
过滤器数量
过滤器背景
过滤器字体样式
过滤器字体大小
过滤器字体粗细
过滤器字体颜色
移动端独有设置
自适应
PC独有设置
行列
网格
看板布局
看板背景
组件背景
组件标题
组件标题名称
组件显示标题
组件对齐方式
组件字体样式
组件字体大小
组件字体粗细
组件字体颜色
样本量
开启跳转
公有设置
看板/组件设置
描述
公共底层代码<DashboardBuilder/>
Redux管理
<Dashboard/>
<DashboardPage/>
<DashboardRoute/>
看板（dashboard）
<ChartList/>
<ChartCreation/>
<ConnectedExploreChartHeader/>（头部标题栏）
列分组
<DataSourcePanel/>（数据源）
数据
定制化配置项
同环比
排序
下钻
集成预测
权重
表格合并
<ConnectedControlPanelsContainer/>（中间配置项）
备注1
<DataTablesPane/> - 底部数据表
<ExploreChartPanel/>（右侧图表渲染）
<ExploreViewContainer/>
<ExplorePage/>
图表（explore）
<DatabaseList/>
数据源
来源
指标
列
列配置
添加分配的分组列
SQL表达式
计算列
设置
<DatasetList/>
数据集
<middleContent/>
数据同步
Route
看板
Sql工具箱
系统管理
Menu（顶部导航栏）
Provider
Sql工具箱（SqlLab）
个人中心（profile）
页面集成（embedded）
菜单（menu）
Superset组件流程图
SuperChartCore
SuperChart
ChartRenderer
ChartContainer（图表渲染区域）
整数
保留1位小数
保留2位小数
百分比
数字类型
字符类型
日期类型
自定义
1. 数据展示格式
左对齐
居中对齐
右对齐
2. 对齐方式
升序
降序
3. 排序
1. 求和
2. 平均值
3. 计数
4. 去重计数
5. 最大值
6. 最小值
7. 总体标准差
8. 样本标准差
9. 总体方差
10. 样本方差
4. 聚合方式
1. 百分比
年粒度字段
季粒度字段
月粒度字段
周粒度字段
日粒度字段
时、分、秒，年月日时分秒字段
2. 同环比（依据日期字段类别）
5. 高级计算
1. 数值类型
1. 对齐方式（同数值类型）
2. 排序（同数值类型）
2. 字符类型
YYYY
YY-MM-DD
自动（默认值）
1. 日期展示格式
2. 对齐方式（同数值类型）
3. 排序（同数值类型）
3. 日期类型
简单配置
保存（现有功能，插入计算列）
自定义SQL
行（参照列）
指标（参照列，其中简单配置参照数值类型）
指标应用
过滤器
序列限制???
单元格限制
查询
底部
顶部
展示位置
是否启用
总计别名
自动
SUM
AVG
MAX
MIN
计数
列对应字段计算方式
计算方式
整体汇总（列总计）
小计1别名
配置的行字段
汇总维度
小计函数
小计1
同小计1...
小计2
小计列表
分类汇总（列小计）
列汇总
行汇总
总计/小计
转置透视图（交换行和列）
选项
个性化指标
条件格式化（列表展示，参照现有表、透视表相关功能）
合并同类单元格（勾选框，包括一级、二级、三级等）
不显示列表头（勾选框）
两分斜线单元格
三分斜线单元格
斜线表头（下拉选择）
自适应列宽（勾选框）
展示型配置（折叠块）
定制化配置
数据集表格（电子表格）
通过前面的配置渲染表格（该数据集表格区域内容不允许编辑，可设置基础样式）
编辑过滤器时
过滤器组件
以GROUP_BY方式控制图表列显隐
添加动态列功能
过滤器部分
选择源字段（该图表绑定的数据集的字段）
选择目标字段（所要跳转的看板中某个图表对应的数据集的字段）
跳转到内部看板
跳转到其他看板的图表（在其他图表中，传过来的链接参数相当于筛选器）
跳转所需参数：跳转到目标图表的id和源字段对应的值，以此作为筛选条件
添加跳转链接，可拼接字段（该图表绑定的数据集的字段）
跳转到外部链接
添加跳转功能
图表部分
superset-ui-core
components
shared-controls
superset-ui-chart-controls（公用图表控制器）
packages（核心工具库）
AnnotationLayerControl
CollectionControl
ColorSchemeControl
ConditionalFormattingControl
ControlPopover
CustomListItem
controls（图表配置项中的控制器）
图表控制器组件开发
plugin-chart-table（表格）
plugin-chart-pivot-table（透视表）
plugin-chart-echarts（echarts图表）
plugins（图表插件）
buildQuery.ts（回传数据到后端）
controlPanel.ts
transformProps.ts（接受后端返回文件 & 图表配置项）
主要文件
SelectFilterPlugin（下拉值）
RangeFilterPlugin（数值范围）
TimeFilterPlugin（时间范围）
TimeColumnFilterPlugin（时间列）
TimeGrainFilterPlugin（时间粒度）
GroupByFilterPlugin（列过滤器 - 实验性功能）
filters（看板中的过滤器插件）
插件
注册到MainPreset（图表注册中心）
核心工具库、插件、图表配置控制器
0 条评论
回复 删除
下一页
