django-dash 0.6.1

先决条件

• Django 2.2、3.0和3.1

• Python 3.6、3.7、3.8和3.9。

关键概念

• 每个布局（主题）都由占位符组成。每个插件小部件都有其特定的HTML/JavaScript/CSS。

• 可能已实现并安装了多个主题。默认布局是系统范围内的选择，但每个用户（如果具有适当的权限）都可以在所有工作空间中选择他喜欢的布局，甚至可以在每个工作空间中设置不同的布局。

• 占位符是一个空间，插件小部件被放置在这里。

• 占位符由单元格组成的矩形。每个占位符都有其自定义的行数和列数。

• 工作空间只是另一个命名的仪表板。用户在导航中切换工作空间。工作空间的数量是无限的。

• 插件是一个（Django）微应用。大部分重负载工作应该在插件中完成。插件可以有自己的视图、urls等。渲染是通过使用插件小部件来完成的。

• 插件小部件主要负责渲染插件数据。每个插件小部件都有自己的特定HTML/JavaScript/CSS。单个插件小部件为三元组（布局、占位符、插件）注册。

• 公开仪表板（作为contrib应用实现，使其成为可选功能）允许用户使他们的工作空间公开。如果用户选择使他们的仪表板公开，则默认工作空间变为公开。至于非默认工作空间，用户仍然可以使它们每个都是私有的或公开的。

主要功能

• 可定制的布局（也称为主题）。

• 多个工作空间。

• 可调整插件访问权限。

• 公开仪表板（作为一个contrib应用）。

• 可克隆的工作空间。可以将整个工作空间（包括所有插件）克隆到另一个工作空间中。

• 插件小部件的复制/粘贴功能。

常见问题解答

• 问题：Dash是否可以与（选择适用的：D3、Polychart2或其他用于制作图表的库）一起工作。

  答案：是的。查看以下样本插件的源代码

  • 样本D3插件.

  • 样本Polychart2插件.

一些截图

查看文档以获取一些屏幕截图

• ReadTheDocs

演示

wget https://raw.github.com/barseghyanartur/django-dash/stable/examples/django_dash_example_app_installer.sh

chmod +x django_dash_example_app_installer.sh

./django_dash_example_app_installer.sh

安装

1. 从PyPI安装最新稳定版本

   pip install django-dash

   或从GitHub安装最新稳定版本

   pip install https://github.com/barseghyanartur/django-dash/archive/stable.tar.gz

   或从BitBucket安装最新稳定版本

   pip install https://bitbucket.org/barseghyanartur/django-dash/get/stable.tar.gz

2. 将 dash 添加到您项目的 Django 设置中 INSTALLED_APPS。此外，所有要使用的布局和插件也应添加到 INSTALLED_APPS 中。

   INSTALLED_APPS = (
       # ...
       'dash',
       'dash.contrib.layouts.android',
       'dash.contrib.layouts.bootstrap2',
       'dash.contrib.layouts.windows8',
       'dash.contrib.plugins.dummy',
       'dash.contrib.plugins.image',
       'dash.contrib.plugins.memo',
       'dash.contrib.plugins.rss_feed',
       'dash.contrib.plugins.url',
       'dash.contrib.plugins.video',
       'dash.contrib.plugins.weather',
       # ...
   )

3. 请确保 django.core.context_processors.request 包含在 TEMPLATE_CONTEXT_PROCESSORS 中。

4. 将必要的 URL 模式添加到您的 urls 模块中。

   re_path(r'^dashboard/', include('dash.urls')),

   此外，添加任何 Dash 应用或插件的全部 URL。

   # django-dash RSS contrib plugin URLs:
   re_path(r'^dash/contrib/plugins/rss-feed/',
           include('dash.contrib.plugins.rss_feed.urls')),
   
   # django-dash public dashboards contrib app:
   re_path(r'^', include('dash.contrib.apps.public_dashboard.urls')),

创建新的布局

Dash 随带一些捆绑的布局。请检查它们的源代码作为示例。

假设我们的虚拟布局有两个占位符。一个用于各种小部件的大型占位符（称为 main），以及一个用于快捷方式的微型占位符（称为 shortcuts）。

占位符 main

• 单个单元格大小：150 x 110 像素

• 尺寸：6 列，5 行

占位符 shortcuts

• 单个单元格大小：60 x 55 像素

• 尺寸：1 列，10 行

见下面的图示，以了解占位符是什么。

• 占位符 main 由 11 到 56 的单元格组成。

• 占位符 shortcuts 由 1 到 10 的单元格组成。

单个插件小部件可能占据一个或多个单元格。插件小部件是矩形。

为了更清晰，请看以下情况

• 插件小部件有 2 列和 1 行。例如，它可能占据单元格（11 和 12）。

• 插件小部件有 2 列和 2 行。例如，它可能占据单元格（11，12，21 和 22）。

• 插件小部件有 1 列和 3 行。例如，它可能占据单元格（11，21 和 31）。

• 插件小部件有 4 列和 3 行。例如，它可能占据单元格（22，23，24，25，32，33，34，35，42，43，44 和 45）。

                                ``main``                               ``shortcuts``
┌───────────┬───────────┬───────────┬───────────┬───────────┬───────────┐ ┌─────┐
│           │           │           │           │           │           │ │  1  │
│           │           │           │           │           │           │ │     │
│    11     │    12     │    13     │    14     │    15     │    16     │ ├─────┤
│           │           │           │           │           │           │ │  2  │
│           │           │           │           │           │           │ │     │
├───────────┼───────────┼───────────┼───────────┼───────────┼───────────┤ ├─────┤
│           │           │           │           │           │           │ │     │
│           │           │           │           │           │           │ │  3  │
│    21     │    22     │    23     │    24     │    25     │    26     │ ├─────┤
│           │           │           │           │           │           │ │  4  │
│           │           │           │           │           │           │ │     │
├───────────┼───────────┼───────────┼───────────┼───────────┼───────────┤ ├─────┤
│           │           │           │           │           │           │ │     │
│           │           │           │           │           │           │ │  5  │
│    31     │    32     │    33     │    34     │    35     │    36     │ ├─────┤
│           │           │           │           │           │           │ │  6  │
│           │           │           │           │           │           │ │     │
├───────────┼───────────┼───────────┼───────────┼───────────┼───────────┤ ├─────┤
│           │           │           │           │           │           │ │     │
│           │           │           │           │           │           │ │  7  │
│    41     │    42     │    43     │    44     │    45     │    46     │ ├─────┤
│           │           │           │           │           │           │ │  8  │
│           │           │           │           │           │           │ │     │
├───────────┼───────────┼───────────┼───────────┼───────────┼───────────┤ ├─────┤
│           │           │           │           │           │           │ │     │
│           │           │           │           │           │           │ │  9  │
│    51     │    52     │    53     │    54     │    55     │    56     │ ├─────┤
│           │           │           │           │           │           │ │ 10  │
│           │           │           │           │           │           │ │     │
└───────────┴───────────┴───────────┴───────────┴───────────┴───────────┘ └─────┘

有一些规则/指南您应该遵循。

假设布局名为 example。那么布局目录应具有以下结构。

path/to/layout/example/
├── static
│   ├── css
│   │   └── dash_layout_example.css # Contains layout-specific CSS
│   ├── images
│   └── js
│       └── dash_layout_example.js # Contains layout specific JavaScripts
├── templates
│   └── example
│       ├── edit_layout.html # Master edit layout
│       └── view_layout.html # Master view layout
├── __init__.py
├── dash_layouts.py # Where layouts and placeholders are defined and registered
├── dash_plugins.py # Where layout specific plugins and plugin widgets are defined and registered
└── dash_widgets.py # Where layout specific plugin widgets are defined

布局和占位符类应放置在 dash_layouts.py 文件中。

每个布局都应该放入 Django 项目 settings.py 模块的 INSTALLED_APPS 中。

INSTALLED_APPS = (
    # ...
    'path.to.layout.example',
    # ...
)

from dash.base import BaseDashboardLayout, BaseDashboardPlaceholder
from dash.base import layout_registry

class ExampleMainPlaceholder(BaseDashboardPlaceholder):

    uid = 'main'  # Unique ID of the placeholder.
    cols = 6  # Number of columns in the placeholder.
    rows = 5  # Number of rows in the placeholder.
    cell_width = 150  # Width of a single cell in the placeholder.
    cell_height = 110  # Height of a single cell in the placeholder.

class ExampleShortcutsPlaceholder(BaseDashboardPlaceholder):

    uid = 'shortcuts'  # UID of the placeholder.
    cols = 1  # Number of columns in the placeholder.
    rows = 10  # Number of rows in the placeholder.
    cell_width = 60  # Width of a single cell in the placeholder.
    cell_height = 55  # Height of a single cell in the placeholder.

class ExampleLayout(BaseDashboardLayout):

    uid = 'example'  # Layout UID.
    name = 'Example'  # Layout name.

    # View template. Master template used in view mode.
    view_template_name = 'example/view_layout.html'

    # Edit template. Master template used in edit mode.
    edit_template_name = 'example/edit_layout.html'

    # All placeholders listed. Note, that placeholders are rendered in the
    # order specified here.
    placeholders = [ExampleMainPlaceholder, ExampleShortcutsPlaceholder]

    # Cell units used in the entire layout. Allowed values are: 'px',
    # 'pt', 'em' or '%'. In the ``ExampleMainPlaceholder`` cell_width is
    # set to 150. It means that in this particular case its' actual width
    # would be `150px`.
    cell_units = 'px'

    # Layout specific CSS.
    media_css = ('css/dash_layout_example.css',)

    # Layout specific JS.
    media_js = ('js/dash_layout_example.js',)

# Registering the layout.
layout_registry.register(ExampleLayout)

<body class="layout-example">

<body class="layout-android">

<div id="id_main" class="placeholder placeholder-main">

<div id="id_shortcuts" class="placeholder placeholder-shortcuts">

<div id="p6d06f17d-e142-4f45-b9c1-893c38fc2b01" class="plugin plugin-dummy">

layout.html_class

placeholder.html_id
placeholder.html_class

plugin.html_id
plugin.html_class

plugin_widget.html_class  # Static one

创建新插件

Dash 随带了一些捆绑插件。请检查它们的源代码作为示例。

制作插件或插件小部件相当简单，尽管您应该遵循一些规则/指南。

假设插件名为 sample_memo。那么插件目录应该具有以下结构。

注意，建议您使用 dash_plugin_ 前缀来命名所有插件特定的媒体文件，这是出于常识的考虑。

path/to/plugin/sample_memo/
├── static
│   ├── css
│   │   └── dash_plugin_sample_memo.css # Plugin specific CSS
│   ├── images
│   └── js
│       └── dash_plugin_sample_memo.js # Plugin specific JavaScripts
├── templates
│   └── sample_memo
│       ├── render_main.html # Plugin widget template for ``main`` Placeholder
│       └── render_short.html # Plugin widget template for ``shortcuts`` Placeholder
├── __init__.py
├── dash_plugins.py # Where plugins and widgets are defined and registered
├── dash_widgets.py # Where the plugin widgets are defined
└── forms.py # Plugin configuration form

在某些情况下，您可能需要特定于插件的可覆盖设置（以 dash.contrib.plugins.weather 插件为例。建议您以这种方式编写设置，即您的 Django 项目 settings.py 模块中的变量具有 DASH_PLUGIN_ 前缀。

from dash.base import BaseDashboardPlugin, plugin_registry
from path.to.plugin.sample_memo.forms import SampleMemoForm

class SampleMemo2x2Plugin(BaseDashboardPlugin):

    uid = 'sample_memo_2x2'  # Plugin UID
    name = _("Memo")  # Plugin name
    group = _("Memo")  # Group to which the plugin belongs to
    form = SampleMemoForm  # Plugin forms are explained later
    html_classes = ['sample-memo']  # Optional. Adds extra HTML classes.

plugin_registry.register(SampleMemo2x2Plugin)

class SampleMemo1x1Plugin(SampleMemo2x2Plugin):

    uid = 'sample_memo_1x1'  # Plugin UID

plugin_registry.register(SampleMemo1x1Plugin)

from dash.base import BaseDashboardPlugin
from dash.factory import plugin_factory
from path.to.plugin.sample_memo.forms import SampleMemoForm

class BaseSampleMemoPlugin(BaseDashboardPlugin):

    name = _("Memo")  # Plugin name
    group = _("Memo")  # Group to which the plugin belongs to
    form = SampleMemoForm  # Plugin forms are explained later
    html_classes = ['sample-memo']  # Optional. Adds extra HTML classes.

sizes = (
    (1, 1),
    (2, 2),
)
plugin_factory(BaseSampleMemoPlugin, 'sample_memo', sizes)

from dash.base import plugin_widget_registry
from path.to.plugin.sample_memo.dash_widgets import (
    SampleMemo1x1ExampleMainWidget,
    SampleMemo2x2ExampleMainWidget,
)

plugin_widget_registry.register(SampleMemo2x2ExampleMainWidget)

plugin_widget_registry.register(SampleMemo1x1ExampleMainWidget)

from django.template.loader import render_to_string
from dash.base import BaseDashboardPluginWidget

class SampleMemo2x2ExampleMainWidget(BaseDashboardPluginWidget):

    layout_uid = 'example'  # Layout for which the widget is written
    placeholder_uid = 'main'  # Placeholder within the layout for which
                              # the widget is written
    plugin_uid = 'sample_memo_2x2'  # Plugin for which the widget is
                                    # written
    cols = 2  # Number of widget columns
    rows = 2  # Number of widget rows

    def render(self, request=None):
        context = {'plugin': self.plugin}
        return render_to_string('sample_memo/render_main.html', context)

class SampleMemo1x1ExampleShortcutWidget(SampleMemo2x2ExampleMainWidget):

    placeholder_uid = 'shortcuts'  # Placeholder within the layout for
                                   # which the widget is written
    cols = 1  # Number of widget columns
    rows = 1  # Number of widget rows

    def render(self, request=None):
        context = {'plugin': self.plugin}
        return render_to_string(
            'sample_memo/render_shortcuts.html', context
        )

from django.template.loader import render_to_string
from dash.factory import plugin_widget_factory
from dash.base import BaseDashboardPluginWidget

class BaseSampleMemoWidget(BaseDashboardPluginWidget):

    def render(self, request=None):
        context = {'plugin': self.plugin}
        return render_to_string('sample_memo/render.html', context)

sizes = (
    (1, 1),
    (2, 2),
)
plugin_widget_factory(
    BaseSampleMemoWidget, 'example', 'main', 'sample_memo', sizes
)

from django import forms
from dash.base import DashboardPluginFormBase

class SampleMemoForm(forms.Form, DashboardPluginFormBase):

    plugin_data_fields = [
        ("title", ""),
        ("text", "")
    ]

    title = forms.CharField(label=_("Title"), required=False)
    text = forms.CharField(label=_("Text"), required=True,
                           widget=forms.widgets.Textarea)

    def __init__(self, *args, **kwargs):
        super(MemoForm, self).__init__(*args, **kwargs)

INSTALLED_APPS = (
    # ...
    'path.to.layout.example',
    'path.to.plugin.sample_memo',
    # ...
)

./manage.py dash_sync_plugins

插件和小部件工厂

通常，当你制作一个新插件时，也会为它制作基小部件。通过创建基小部件，你避免了代码的重复。请看下面的例子。

from dash.base import BaseDashboardPlugin

class BaseMemoPlugin(BaseDashboardPlugin):

    name = _("Memo")
    group = _("Memo")
    form = MemoForm

现在我们有了基插件，我们可以使用插件工厂生成和注册所需尺寸的插件类。

from dash.factory import plugin_factory
plugin_factory(BaseMemoPlugin, 'memo', ((5, 6), (6, 5), (6, 6)))

上面的代码将生成“memo_5x6”、“memo_6x5”和“memo_6x6”插件类，这些类是 BaseMemoPlugin 的子类，并在插件注册表中注册。uid 属性将自动生成。

对于小部件来说也是一样。

from dash.base import BaseDashboardPluginWidget

class BaseMemoWidget(BaseDashboardPluginWidget):

    def render(self, request=None):
        context = {'plugin': self.plugin}
        return render_to_string('memo/render.html', context)

现在我们有了基小部件，我们可以使用插件小部件工厂生成和注册所需尺寸的插件小部件类。

from dash.factory import plugin_widget_factory

plugin_widget_factory(
    BaseMemoWidget,
    'bootstrap2_fluid',
    'main',
    'memo',
    ((5, 6), (6, 5), (6, 6))
)

上面的代码将生成“memo_5x6”、“memo_6x5”和“memo_6x6”插件小部件类，这些类是 BaseMemoWidget 的子类，并在插件小部件注册表中注册。layout_uid、placeholder_uid、plugin_uid、cols 和 rows 属性将自动生成。

当然，会有一些情况下你不能使用工厂，例如，因为你的每个插件或小部件都与其他插件或小部件有所不同，但如果你发现自己多次子类化基小部件或插件而没有更改代码，那么可能是一个开始使用工厂的好时机。

布局、插件和部件概览

在创建自己的布局、插件和插件部件时，您可以根据需要自由使用API。在开发Dash的过程中，我发现以下实践很有用：

• 创建新的插件时，始终创建一个基础插件类，所有特定尺寸的插件都从该类派生。

• 在插件中创建基础插件部件（带有HTML模板），但不要在那里注册。使用工厂（dash.factory）生成和注册特定布局的插件部件——最好在布局模块中。

• 如果您要将自定义插件添加到现有的捆绑布局（位于dash.contrib.layouts的布局），创建一个名为dash_custom的新模块（或您喜欢的任何其他名称），并在名为dash_plugins.py的模块中生成/注册特定布局的插件部件（不要忘记将其添加到INSTALLED_APPS，以便自动发现）。

权限

插件系统允许管理员指定每个插件的访问权限。Dash权限基于Django用户和用户组。访问权限可以通过Django管理后台（/administration/dash/dashboardplugin/）进行管理。请注意，您的管理URL前缀可能与示例中的不同（通常是“/admin/”，而示例中是“/administration/”）。如果用户没有访问插件的权限，即使它已被添加到仪表板，也不会在仪表板上显示（想象一下，您曾经授予所有用户使用新闻插件的权利，但后来决定将其限制为仅工作人员组）。请注意，超级用户可以访问所有插件。

        Plugin access rights management interface in Django admin
┌──────────────────────────────┬────────────────────┬─────────────────────┐
│ `Plugin`                     │ `Users`            │ `Groups`            │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ Video (big_video)            │ John Doe           │ Dashboard users     │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ TinyMCE memo (tinymce_memo)  │                    │ Dashboard users     │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ News (news)                  │ Oscar, John Doe    │ Staff members       │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ URL (url)                    │                    │ Dashboard users     │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ Video (video)                │                    │ Dashboard users     │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ Dummy (dummy)                │                    │ Testers             │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ Dummy (large_dummy)          │                    │ Testers             │
├──────────────────────────────┼────────────────────┼─────────────────────┤
│ Memo (big_memo)              │                    │ Dashboard users     │
└──────────────────────────────┴────────────────────┴─────────────────────┘

管理命令

有几个管理命令。

• dash_find_broken_dashboard_entries。查找由于某些曾经存在于系统中的插件不再存在而导致的损坏的仪表板条目。

• dash_sync_plugins。每次向Dash添加新插件时都应该运行此命令。

• dash_update_plugin_data。在插件更改后，如果插件数据变得无效，这是一种更新现有插件数据的方法。为了使其正常工作，每个插件都应该实现一个update方法，其中发生数据更新。

调整

您可以在Django项目的settings.py模块中覆盖多个Dash设置

• DASH_RESTRICT_PLUGIN_ACCESS（布尔值）：如果设置为True，则启用（Django）dash插件的权限系统。默认为True。将此设置为False会使所有插件对所有用户可用。

• DASH_ACTIVE_LAYOUT（字符串）：活动（默认）布局UID。默认为“android”。

• DASH_LAYOUT_CELL_UNITS（字符串）：布局单元的允许值。默认为（“em”，“px”，“pt”，“%”）。

• DASH_DISPLAY_AUTH_LINK（布尔值）：如果设置为True，则在Dash下拉菜单中显示注销链接。默认为True。

有关特定contrib插件的调整，请参阅插件目录中的文档。

样式技巧

Font Awesome用于图标。按照惯例，所有font-awesome图标都放置在一个span内。除了它们的原始类之外，它们都应该获得一个额外的类“iconic”。在创建新布局或插件（HTML）时遵循此规则，因为它可以使样式变得简单，因为图标颜色可以在短时间内更改。

捆绑插件和布局

Dash附带了一些捆绑（演示）插件和布局，主要用来展示其功能。为了在不同的布局（主题）中工作，每个插件为单个布局注册了一个单一的小部件。可以注销捆绑的小部件并用自定义小部件替换。

命名规范

尽管您可以自由命名您的插件和部件（但您应遵守PEP-008），但已引入了一些命名规范，建议您遵循。

• Example1x1Plugin：1x1示例插件

  • Example1x1AndroidMainWidget：1x1小部件用于1x1示例插件（布局Android，占位符‘main’）

  • Example1x1AndroidShortcutsWidget：1x1小部件用于1x1示例插件（布局Android，占位符‘shortcuts’）

  • Example1x1Windows8MainWidget：1x1小部件用于1x1示例插件（布局Windows 8，占位符‘main’）

  • Example1x1Windows8SidebarWidget：1x1小部件用于1x1示例插件（布局Windows 8，占位符‘sidebar’）

• Example2x3Plugin：2x3示例插件

  • Example2x3Windows8MainWidget：2x3小部件用于2x3示例插件（布局Windows 8，占位符‘main’）

  • Example2x3Windows8SidebarWidget：2x3小部件用于2x3示例插件（布局Windows 8，占位符‘sidebar’）

• Example6x1Plugin：6x1示例插件

  • Example6x1YourLayoutSidebarWidget：6x1小部件用于6x1示例插件（布局Your Layout，占位符‘main’）

调试

大部分错误都被记录了（DEBUG）。如果你编写了一个插件，但它没有出现在可用的插件列表中，请运行以下管理命令

./manage.py dash_sync_plugins

dash_sync_plugins 不仅将你的插件同步到数据库中，而且还是检查可能错误的好方法。

可用翻译

• 荷兰语（核心和插件）

• 俄语（核心和插件）

故障排除

• 如果你在安装 Dash 时遇到问题，请检查 示例项目 和 requirements.txt 文件。

测试

项目由测试覆盖（功能测试和浏览器测试）。

默认使用 Py.test 作为测试运行器。

要测试所有支持的 Python/Django 版本，请输入

tox

要测试特定环境，请输入

tox -e py35-django18

要测试你的工作环境，请输入

./runtests.py

要测试你的工作环境（使用 Django 测试运行器），请输入

./manage.py test dash

假设你已经安装了所有要求。如果没有，首先安装测试要求

pip install -r examples/requirements/test.txt

from selenium import webdriver
CHROME_DRIVER_OPTIONS = webdriver.ChromeOptions()
CHROME_DRIVER_OPTIONS.add_argument('-headless')
CHROME_DRIVER_OPTIONS.add_argument('-no-sandbox')
CHROME_DRIVER_OPTIONS.set_capability('chrome.binary', "/usr/bin/google-chrome")

CHROME_DRIVER_EXECUTABLE_PATH = '/usr/bin/chromedriver'

许可证

GPL-2.0-only OR LGPL-2.1-or-later

支持

对于任何问题，请通过在 作者 部分给出的电子邮件联系我。

作者

Artur Barseghyan <artur.barseghyan@gmail.com>

截图

Android 布局

以下展示了几个 Android 布局的截图。

仪表板工作区（查看模式），你可以看到以下插件被使用

• URL 插件

• TinyMCE Memo 插件

• Memo 插件

• 视频插件

仪表板工作区（编辑模式），是上述仪表板工作区的编辑模式。

仪表板工作区（查看模式），你可以看到以下插件被使用

• 新闻插件

• RSS 插件

• 虚拟插件

• URL 插件

仪表板工作区（编辑模式），是上述仪表板工作区的编辑模式。

仪表板工作区（编辑模式）是编辑模式下的空仪表板工作区。

选择要添加到仪表板工作区的工具栏

TinyMCE 插件小部件表单

添加了 TinyMCE 插件小部件的工作区仪表板（编辑模式）。菜单已展开。

编辑全局仪表板设置的表单。

编辑当前仪表板工作区设置的表单。

Bootstrap 2 流布局

以下是 Bootstrap 2 流布局的几个截图。

仪表板工作区（编辑模式）是编辑模式下的空仪表板工作区。

工作区仪表板（编辑模式）- 已填充的工作区仪表板。

上文提到的仪表板工作区的仪表板工作区（查看模式）。

上文提到的仪表板工作区的公共仪表板。

编辑仪表板设置对话框。

气泡图、堆叠到分组条和太阳花分割（查看仪表板模式）。

气泡图、堆叠到分组条和太阳花分割（编辑仪表板模式）。

示例布局

以下是示例布局的几个截图。

仪表板工作区（编辑模式）是编辑模式下的空仪表板工作区。

工作区仪表板（编辑模式）- 上文提到的仪表板工作区填充了图片。

上文提到的仪表板工作区的仪表板工作区（查看模式）