关注“虾皮技术团队”公众号探索更多虾皮技术实践目录1.现状分析2.Datav设计与关键节点实现2.1整体架构设计2.2How提高角色间协作效率2.3如何支持元数据计算2.4如何支持页面快速配置2.5页面组件直连数据源2.6支持组件联动和过滤器查询3.Datav带来的好处随着Shopee业务数据的不断扩展，Data单靠表格等分析手段已经不能满足日常的数据分析需求，丰富的图表分析Dashboard显得尤为重要。但是从事前端开发的同学都知道，纯手工开发这种Dashboard页面会消耗较多的人力和时间资源。在金额较大的情况下，可能无法及时响应业务需求。如果有一个工具平台可以自动生成这些Dashboard页面，可以节省大量的人力和时间，效率的提升也会非常显着。本文将分享如何从零开始打造数据可视化大屏搭建系统。一、现状分析先来看一个数据。我们团队平均每个季度有3-4个Dashboard相关的需求，平均每个需求的项目周期在40天左右。目前共有20+个页面，每个页面大概有50+个图表组件。另一个即将重构的平台（Stella）Dashboard有25+页，涉及的图表组件较多，粗略统计100+。这些仪表板页面中的大多数具有复杂的内容和复杂的交互。按照传统的开发方式，一个页面的上线大概需要50+人/天的PM、Dev、QA。抛开人力资源，我们来看看开发Dashboard的研发过程。这是一个正常的开发过程。整个过程中，数据同步、接口数据聚合、页面开发、联调是耗时最多的四大块，约占70%的时间。如果有一个平台可以解决这些问题，那么这个平台对于解放人力瓶颈、缩短研发流程、提高研发效率都将具有重要意义。目前市面上有很多类似的平台，我们也做了很多横向对比。综合考虑业务场景的紧密性，以及开发投入和收益，我们最终决定自研平台“DataVisualization”（以下简称“Datav”）。我们希望这个平台能够承担的作用如下：Datav平台有两个主要目标：将项目周期从40天缩短到20天；降低人力成本，FE从10人/天减少到3人/天，PM从15人/天减少到5人/天，不再需要BE和QA参与。2、Datav关键节点的设计与实现为了实现以上两个目标，我们将Datav要实现的功能抽象为五个关键点：重塑整个项目流程，提高PM与开发的协同效率；支持简单的元数据计算和更灵活的数据查询；支持快速页面配置；支持直接连接数据源的页面组件；支持组件联动和过滤器查询。2.1总体架构设计接下来我们将对各个关键点的实现一一进行介绍。下图展示了我们的整体架构设计。整个Datav平台包括五个非常重要的子系统和模块：设计器：设计器是Datav平台的核心和难点。支持页面布局配置、页面交互配置、组件数据配置等功能。它还支持代码片段的配置。它可以称为低代码平台。Admin：是Datav的运营管理平台，包括数据计算、工作管理、组件状态管理、页面发布、页面权限等通用平台管理功能。UIComponents：是整个平台最基础的模块.我们在开源图表库上定义了一层标准的DSL协议。在成长。DatavServer：是一个节点服务，主要提供权限校验、数据聚合、动态SQL生成等功能。DatasourceAccessServer：专用于连接不同数据源的服务，如直连MySQL、ClickHouse、Elasticsearch、Presto等，提供不同的连接客户端。从架构图中可以看出，Datav平台支持直连各种数据源，最终会生成一个URL，可以方便的集成到任何平台中。下一步将支持生成源码，供用户二次编辑使用。2.2如何提高各个角色之间的协作效率在解决这个问题之前，我们和各个角色进行了多次沟通，分析了各个角色在项目中的痛点和成本：PM端的痛点是画原型，它每个需求画一个原型需要10天左右，而且还是静态图。需求和开发匹配后，需要更改里面的一些静态数据，然后进行PRDreview；BE和FE的主要精力花在页面开发、接口开发、数据同步、页面联调上。从传统的开发流程来看，这些都是正常的流程，是最小的开发路径。为了解决这个问题，我们需要重塑整个项目流程，让所有角色都能参与配置，所以我们一起重新定义了Dashboard项目的开发流程，如下图所示。PM可以直接在Datav上配置原型页面；DataDev还支持数据计算结果自动同步到ClickHouse；FE可以通过Datav直接连接到数据源，可以复用PM在第一步配置的原型页面进行配置优化；最终生成页面的URL，PM可以直接访问该URL进行测试。新流程效果非常显着，整个项目周期缩短了一半，从8周缩短到4周，并且不再需要BE和QA的支持，FE平均只需要投入3天以支持需求。2.3如何支持元数据计算2.3.1基础知识支持元数据计算是一项复杂而庞大的功能。数据是所有系统的基石，任何平台和业务都离不开数据的流动。同时，数据的流向也非常复杂，尤其是数据量比较大的时候。我们先来了解一下数据的产生和流转都做了哪些工作，从客户端产生数据到Dashboard看到数据聚合经历了哪些阶段。上图是一个常规大数据平台的架构图，清晰的描述了从数据产生到数据应用的全过程。里面可能有些专有的词汇对FE来说有点陌生，但这里我们只需要明白：用户产生的数据需要经过一系列的处理，才会有更大的价值。我们用一个更容易理解的流程图来说明：从图中我们可以看到数据准备、数据收集、数据预处理、数据建模和数据服务四个关键流程。每个阶段都有一系列的事情要做，DataDev同学可以利用数据仓库和相关工具快速生产业务需要的数据。Datav平台不会涉及这部分功能。Datav是在数据服务之后处理的。这里的数据仓库输出的数据虽然经过了一系列的计算，但往往并不是页面显示的想要的数据。根据经验，一个Dashboard页面往往会有大量的数据聚合逻辑，这意味着需要根据数据服务产生的数据进行数据聚合。比如计算同比、环比等指标。2.3.2Datav打通数据直连通道。业务方需要做数据聚合，也就是说后端开发需要给前端提供API接口。由于环境隔离和权限，数据仓库产生的数据目前还不能直接供业务团队使用。所以，业务团队在使用这些数据的过程中，有一个特别曲折的过程，使得整个过程更加复杂，环节也更加漫长。这个过程的BEDev阶段需要提供两种服务，一种是数据同步服务，一种是API接口服务。据粗略统计，BEDev这一步大约占整个项目流程的30%，而且这些工作也是重复进行的。所以Datav解决的第一个问题——打通数据直连通道，采用直连ClickHouse。Datav提供了一个直连数据源的服务，可以直连DataInfra团队提供的ClickHouse。这样一来，大部分Dashboard页面都具备了直接连接数据源的能力，不再需要依赖BE团队提供的API，从而使整个项目周期时间缩短了30%左右。上面说了API的主要功能是做一些数据聚合和数据逻辑计算，那么Datav是如何支持这些功能的呢？这是Datav面临的第二大挑战——支持数据聚合计算和添加逻辑字段。2.3.3支持元数据计算接下来通过一个简单的例子来说明：Datav是如何实现一个备选的API接口来支持一些数据聚合计算的。比如有一张sales表tab_sales（这是数据仓库计算出来的离线数据），内容如下：datecategorynameorder_countpay_succ_orders20220701服装A品牌T恤50020020220701服装B品牌T恤100050020220701DigitalA品牌手机100060020220701DigitalB牌手机150080现在有一个需求：要求计算每个品类的支付成功率。按照前面的方法，API接口会先根据类型查出数据，查询SQL：得到原始数据后，需要进行计算，将右边最终的数据结构交给前端：想象一下，如果Datav能生成这样一条SQL，查询出来的结果也能返回同样的数据结构，就不需要依赖API接口了？带着这样的疑问，我们做了很多尝试。最后的结论证明，在大多数场景下，不依赖API接口是完全可以的。就像上面的例子一样，我们可以通过改变SQL得到相同的数据结构：2.3.4Datav数据管理为了解决上面两个问题——如何打通数据直连通道，如何支持元数据逻辑计算，Datav构建数据管理模块。数据管理是一个比较重要的模块。在配置页面之前，首先应该了解这个页面的数据来自哪里，页面中各个组件的数据来自哪个表，是否是通过某些字段计算出来的等等。因此，数据管理模块应该包括几大块：数据源管理、数据字段编辑（包括字段名别名、新建字段、字段间计算、字段格式化、字段显示权限等）、数据主题管理（支持多关联）表之间生成逻辑数据宽表，自定义SQL查询生成数据主题）。流程如下：1）数据源管理目前数据源支持直连离线数据源（MySQL、ClickHouse），即将支持直连实时数据源（Kafka、Elasticsearch、Prometheus等）。.2）数据字段编辑字段编辑提供了表及表字段别名设置、表字段权限设置、新增逻辑字段、字段逻辑计算、字段格式化等一系列高级功能。3）数据主题管理数据主题目前支持可视化配置和自定义SQL。目前可视化配置只支持单表设置，即将支持多表关联形成逻辑宽表。多表关联功能如图：自定义SQL查询如图：2.4如何支持页面快速配置支持页面快速配置的核心是Designer的实现。类似于目前业界低代码平台的实现方式，页面组件的位置信息和属性通过通用的中间协议DSL来描述，然后解析引擎在运行时动态解析DSL，然后渲染到页面中.架构如下图所示：为了进一步提高UI和FE的协同效率，我们预留了一些高级功能。比如实现一个Figma插件，让UI在设计页面时使用我们的组件，然后通过这个插件生成页面的DSL产品，然后交给Datav解析引擎进行页面渲染；还有一个更大胆的想法，就是通过机器学习识别图片中的组件，自动生成页面的DSL产品，最后交给Datav分析引擎进行页面渲染。这两种解决方案都还处于设计阶段，尚未实施。Designer的功能比较多，也比较复杂，这里就不赘述了。我们目前实现了两种页面布局方式：绝对布局和弹性布局。针对不同的场景，采用不同的布局方式，页面配置效率会很高。Flex布局：适用于页面结构简单明了的配置场景，类似于Admin表单类型的页面。绝对布局：页面结构复杂，组件布局不规则的页面配置，特别适合大屏页面。2.5直连数据源的页面组件要点包括：理解维度和指标；了解如何生成SQL语句。下面用两个例子来直观的说明一下：这是一张二维的单指标图表，一维是日期，也就是X轴；另一个维度是列的分类，指标是Y轴上的数据。如果我们要生成这样的图表，我们的SQL语句应该这样写：Select[indicator]from[table_xxx]groupby[dimension1],[dimension2]从SQL语句中我们可以发现dimension属性放在了后面groupby，和indicator属性放在Select后面。我们再看一个例子：同样，这是一个一维单指标图，对应的SQL如下：Select[indicator]from[table_xxx]groupby[dimension1]了解维度和指标后，还有作为SQL的生成规则，基于这个思路，我们实现了一个Data-Connector组件，可以配置维度、指标、分页、排序等字段，最后根据这些配置生成相应的SQL语句。其对应生成的SQL语句如下：SELECTfield1FROMDemo-TableGROUPBYdate_dayLIMIT1000OFFSET100ORDERBYfield3ASC这样我们就实现了组件直连数据源，显示对应的动态数据。2.6支持组件联动和过滤查询在大多数场景下，我们配置的页面都不是静态页面，它需要动态数据和各种交互，最常见的就是过滤这种交互。交互是页面配置的一个难点，因为交互非常多，有些交互也很复杂。Datav目前只支持部分交互，比如组件数据过滤、按钮点击事件、弹窗、tab切换等常用功能。我们先看一个例子，为什么一定要支持组件之间的交互？这是我们通过组件直接连接数据源查询出来的数据，你会发现数据量非常大。这时候可能会导致组件崩溃或者页面卡死。因此，解决这个问题最好的办法就是支持数据过滤，即支持一个组件过滤另一个组件的数据，如下图所示。这就是我们希望达到的效果：使用一个过滤器组件来控制图表组件中的数据量。又怎样？我们也调研过业界类似的解决方案，最常用的是支持写代码，使用发布-订阅设计模式实现。实现原理大致如图所示：这样做的好处很明显——简单，但也有不足之处：需要写JS代码，只对前端同学友好；如果关联组件很多，代码维护会变得很复杂；页面配置的效率会大大降低。因此，Datav为了解决这些问题，实现了可视化配置组件的联动，同时也支持复杂情况的代码编写方式。实现原理并不复杂，可以概括为四步：建立filter组件与显示组件的关系，以及filter组件与filter参数的关系；监控过滤器参数的变化；一旦过滤器参数发生变化，通知所有关联的显示组件，并将新值传递给它；通知实用程序函数拉取新数据并重新渲染。原理架构图如图所示：整个Datav平台比较庞大，功能点比较多，很多功能点的设计可以单独一篇文章介绍。本文主要关注Datav解决的一些关键问题。我们希望通过这篇文章，让大家了解Datav是一个什么样的平台，可以解决什么问题，适用于哪些业务场景。所以技术细节上就不多展开了，以后再写一篇。3、Datav带来的收益Datav项目带来的收益可以从流程优化、开发效率、基础设施等方面来考虑。3.1流程优化整个项目流程的周期从原来的40天左右缩短到现在的20天左右。消耗的人力也减少了，BE和QA同学不一定要加入，项目周期缩短了100%。这是因为PM同学可以通过Datav平台直接配置页面的原型。确定需求后，这个原型配置可以直接交给FE同学加工，加上一些交互和数据相关的配置，就可以直接测试了。3.2开发效率单从前端开发效率来看，平均10人/天缩短为平均3人/天，效率提升200%+。从整个研发阶段的效率来看，过去需要参与的总人力为：（Datadev）10人/天+（BEDev）13人/天+（FEDev）10人/天=33人/天。现在总人力为：（Datadev）10人/天+（FEDev）3人/天=13人/天，从33人/天缩短为13人/天，效率依旧提升150%+。因此，Datav对于研发效率的提升也具有重要意义。3.3Infrastructure除了上面提到的量化收益，Datav还带来了更多的隐性收益，比如在团队基础架构方面：制定组件开发规范；建立一套标准的组件库和组件平台；标准的Node中间件，比如logger；沉淀出一套标准的自动化脚本、组件创建、自动编译、自动生成文档、代码规范检测等；更细粒度的权限管理系统（建设中）。本文作者为ShopeeDigitalPurchase&LocalServices前端团队。
