feffery-dash-utils 0.2.0

A series of tool functions to assist Dash application development.

feffery-dash-utils

简体中文 | English

包含一系列用于提升Dash应用开发效率的工具函数/工具类。

目录

安装
配合 vscode 插件
已有工具函数/工具类列表
参与贡献
开发计划

安装

pip install feffery-dash-utils -U

配合 vscode 插件

在vscode中配合插件feffery-dash-snippets可快捷实现对各工具函数/工具类的快捷导入，在Python文件中输入utils:即可触发相关快捷命令。

已有工具函数/工具类列表

• style_utils
  • style()
    
• tree_utils
  • TreeManager
    
    • update_tree_node()
      
    • add_node_before()
      
    • add_node_after()
      
    • delete_node()
      
    • get_node()
      
• i18n_utils
  • Translator

style()

用于快捷生成Dash组件的style参数字典，内置了绝大多数小驼峰命名格式的常用css属性，在常见 ide 中将鼠标悬停于参数名之上可查看对应的中英文属性功能介绍，内容基于w3cschool自动生成。

使用示例

from feffery_dash_utils.style_utils import style

# 方式一：直接编写键值对样式
fac.AntdText(
    '测试',
    style=style(
        fontSize=16,
        color='red'
    )
)

# 方式二：解析CSS代码片段
fac.AntdText(
    '测试',
    style=style(
        """
.IvkwhTOsc9wu6RdvHESR .yK52Sq0w7wspWaS28YNl {
    width: 91.46%;
    margin-left: 4.27%;
    margin-bottom: 5%;
    position: relative;
}"""
    )
)

# 方式三：混合使用
fac.AntdText(
    '测试',
    style=style(
        """
.IvkwhTOsc9wu6RdvHESR .yK52Sq0w7wspWaS28YNl {
    width: 91.46%;
    margin-left: 4.27%;
    margin-bottom: 5%;
    position: relative;
}""",
        fontSize=16,
        color='red'
    )
)

TreeManager

用于对类似AntdTree、AntdTreeSelect等树形组件所依赖的树形结构数据进行快捷管理操作，具体包含的方法有：

update_tree_node()

用于对树形结构数据中指定key对应节点进行整体或增量更新。

使用示例

from feffery_dash_utils.tree_utils import TreeManager

# 示例树形数据
demo_tree = [
    {
        'title': '节点1',
        'key': '节点1',
        'children': [
            {
                'title': '节点1-1',
                'key': '节点1-1',
                'children': [
                    {
                        'title': '节点1-1-1',
                        'key': '节点1-1-1',
                    },
                    {
                        'title': '节点1-1-2',
                        'key': '节点1-1-2',
                    },
                ],
            }
        ],
    },
    {'title': '节点2', 'key': '节点2'},
]

# 对示例树形数据指定节点进行整体替换
TreeManager.update_tree_node(
    demo_tree,
    '节点1-1',
    {'title': '节点1-1', 'key': '节点1-1'},
)

# 对示例树形数据指定节点进行增量更新
TreeManager.update_tree_node(
    demo_tree,
    '节点1-1',
    {'title': '节点1-1new'},
    'overlay',
)

add_node_before()

在树形结构数据中指定key对应节点之前插入平级新节点。

使用示例

from feffery_dash_utils.tree_utils import TreeManager

# 示例树形数据
demo_tree = [
    {
        'title': '节点1',
        'key': '节点1',
        'children': [
            {
                'title': '节点1-1',
                'key': '节点1-1',
                'children': [
                    {
                        'title': '节点1-1-1',
                        'key': '节点1-1-1',
                    },
                    {
                        'title': '节点1-1-2',
                        'key': '节点1-1-2',
                    },
                ],
            }
        ],
    },
    {'title': '节点2', 'key': '节点2'},
]

# 在示例树形数据指定节点前插入平级新节点
TreeManager.add_node_before(
    demo_tree,
    '节点1-1',
    {'title': '节点1-0', 'key': '节点1-0'},
)

add_node_after()

在树形结构数据中指定key对应节点之后插入平级新节点。

使用示例

from feffery_dash_utils.tree_utils import TreeManager

# 示例树形数据
demo_tree = [
    {
        'title': '节点1',
        'key': '节点1',
        'children': [
            {
                'title': '节点1-1',
                'key': '节点1-1',
                'children': [
                    {
                        'title': '节点1-1-1',
                        'key': '节点1-1-1',
                    },
                    {
                        'title': '节点1-1-2',
                        'key': '节点1-1-2',
                    },
                ],
            }
        ],
    },
    {'title': '节点2', 'key': '节点2'},
]

# 在示例树形数据指定节点后插入平级新节点
TreeManager.add_node_after(
    demo_tree,
    '节点1-1',
    {'title': '节点1-2', 'key': '节点1-2'},
)

delete_node()

删除树形结构数据中指定key对应节点。

使用示例

from feffery_dash_utils.tree_utils import TreeManager

# 示例树形数据
demo_tree = [
    {
        'title': '节点1',
        'key': '节点1',
        'children': [
            {
                'title': '节点1-1',
                'key': '节点1-1',
                'children': [
                    {
                        'title': '节点1-1-1',
                        'key': '节点1-1-1',
                    },
                    {
                        'title': '节点1-1-2',
                        'key': '节点1-1-2',
                    },
                ],
            }
        ],
    },
    {'title': '节点2', 'key': '节点2'},
]

# 删除示例树形数据指定节点
TreeManager.delete_node(demo_tree, '节点2')

get_node()

查询树形结构数据中指定key对应节点。

使用示例

from feffery_dash_utils.tree_utils import TreeManager

# 示例树形数据
demo_tree = [
    {
        'title': '节点1',
        'key': '节点1',
        'children': [
            {
                'title': '节点1-1',
                'key': '节点1-1',
                'children': [
                    {
                        'title': '节点1-1-1',
                        'key': '节点1-1-1',
                    },
                    {
                        'title': '节点1-1-2',
                        'key': '节点1-1-2',
                    },
                ],
            }
        ],
    },
    {'title': '节点2', 'key': '节点2'},
]

# 查询示例树形数据中存在的指定节点
TreeManager.get_node(demo_tree, '节点1-1')

# 查询示例树形数据中不存在的指定节点（将返回None）
TreeManager.get_node(demo_tree, '节点1-666')

Translator

用于在Dash应用中快捷构建国际化多语种方案，基于前端cookies和本地国际化配置文件驱动。

使用示例

示例应用见i18n_test_app.py、i18n_multi_test_app.py，参考配置文件见locales.json、locales1.json、locales2.json

参与贡献

git clone https://github.com/CNFeffery/feffery-dash-utils.git
cd feffery-dash-utils
# 安装开发环境所需依赖
pip install -r requirements/dev.txt

开发计划

• 样式相关工具函数子模块style_utils
  • style参数编写辅助函数style()
• 布局相关工具函数子模块layout_utils
• 路由相关工具函数子模块router_utils
• 模板相关工具函数子模块template_utils
  • 仪表盘常用自定义组件子模块dashboard_components
    • 欢迎卡片welcome_card()
    • 空白卡片blank_card()
    • 简单图表卡片simple_chart_card()
    • 指标卡片index_card()
• 表格相关工具函数子模块table_utils
• 回调函数相关工具函数子模块callback_utils
• 树形处理相关工具函数子模块tree_utils
  • 树形数据结构管理类TreeManager
    • 树节点更新函数update_tree_node()
    • 树节点前置插入函数add_node_before()
    • 树节点后置插入函数add_node_after()
    • 树节点删除函数delete_node()
    • 树节点查询函数get_node()
• 主题样式相关工具函数子模块theme_utils
• 国际化相关工具函数子模块i18n_utils
  • 文案内容快捷国际化操作类Translator