为一致的数据可视化创建一个React库
在Shopify，我们通过数据可视化来讲述很多故事。这是商业决策背后的驱动力--不仅是对我们的商家，也是对Shopify内部的团队。
由于Shopify有超过10,000名员工，不同的团队开始使用不同的工具来显示数据是很自然的，这很好--毕竟，创造性的头脑创造了不同的解决方案，对吗？问题是，这导致了很多不一致的地方，比如这两张线图曾经出现在Shopify的管理页面--你在登录Shopify后看到的页面，你可以在这里设置你的商店，配置你的设置，并管理你的业务---比如。
让我们来玩发现差异的游戏：线宽、虚线样式、图例样式、背景网格，一个在X轴上有标签，另一个没有。这不仅仅是一个 "视觉风格 "的问题，因为它们使用的是不同的库，一个是屏幕阅读器可以访问的，另一个不是；一个是可打印的，另一个不是。
为了解决这个问题，Insights团队一直在努力创建一个React数据可视化库--Polaris Viz--其他团队可以依靠它来快速实现数据可视化，而不需要反复解决同样的问题。
但首先要做的是，如果你还没有，我建议你先阅读我的同事Miru Alves的精彩博文，她描述了我们如何使用Delta-E和对比度计算来创建一个颜色矩阵，我们可以从中选择安全使用的颜色集合，而不违反任何无障碍规则。
这篇文章将重点介绍在图书馆中实现浅色和深色主题的过程，以及允许图书馆的消费者创建他们自己的主题，因为不是所有的Shopify品牌，如Shop、Handshake或Oberlo都使用相同的视觉标识。
不一致的地方从何而来？
当我们开始处理这个问题时，我们注意到的第一件事是，即使在已经使用Polaris Viz的地方，我们也有视觉上的不一致。这是因为我们原来的组件API看起来像这样。
正如你所看到的，改变图表的外观涉及到分布在不同道具中的许多不同的选项，你不得不创建一个具有所有正确值的包装组件，或者反复传递道具给每个实例。好吧，这解释了很多。
理想情况下，管理中的所有图表都应该使用用户体验团队创建的默认深色或浅色主题，所以我们应该让开发者很容易地选择浅色或深色，而不需要所有这些复制&&面食。
实现主题
为了涵盖使用默认深色或浅色主题的团队的使用情况，我们删除了所有的视觉风格道具，并为所有的图表组件引入了一个新的theme 道具。
theme道具接受在Themes的记录中定义的主题名称。Theme类型包含所有的视觉配置，如颜色、线条风格、间距以及条形是否应该是圆形的。
这些变化允许消费者在默认情况下拥有所有好的样式--与我们的视觉识别相匹配的样式，考虑到可访问性，并且没有意外的差异--如果他们想使用Light 而不是Dark 主题，他们只需要传入theme=’Light’ 。
这一变化应该涵盖了大多数的使用情况，但我们仍然需要支持其他的视觉识别。如果把所有这些样式道具放回去，对于那些没有使用默认样式的人来说，会导致同样的问题。那么，我们怎样才能使指定一个不同的视觉身份变得简单呢？
引入PolarisVizProvider
我们需要一种方法，允许消费者以集中的方式定义他们自己的视觉形象，这样他们应用中的所有图表就会使用正确的样式。因此，我们没有让图表组件直接消费来自const 的主题记录，而是引入了一个存储主题的上下文提供者。
通过让提供者接受一个themes 道具，我们允许消费者覆盖Default 和Light 主题或添加他们自己的。不过这种实现可能会引起一些问题：如果用户覆盖了Default 主题，但没有提供渲染图表所需的所有属性，会发生什么情况。例如，如果他们忘记传递工具提示的背景颜色怎么办？
为了解决这个问题，我们首先实现了一个 *createTheme*函数。
createTheme 在这个问题上，我们可以通过传递一个部分主题来获得一个完整的主题。在部分主题中缺少的所有属性将只是使用库的默认值。
接下来，我们实现了一个createThemes 函数。它保证即使属性被覆盖，主题记录也会一直包含Default 和Light 的主题。
有了这两个地方，我们只需要更新PolarisVizProvider 的实现。
覆盖默认主题
从消费者的角度来看，这意味着你可以用PolarisVizProvider, 定义你的Default 主题来包装你的应用程序，所有的图表将自动继承正确的样式。比如说。
<App/> 里面的所有图表都将默认有一个蓝色背景。
它伤害了我的眼睛，但是它起作用了!
创建多个主题
你还可以在PolarisVizProvider. 中定义多个额外的主题，这个对象中的每个顶层键都被用作主题名称，你可以在以后传递给各个图表。比如说。
第一个图表使用一个名为AngryRed 的主题，第二个HappyGreen
虽然我们确实不得不重复定义单系列颜色两次--seriesColors.single = [‘black’]--如果我们有两个主题共享的多个属性，只想覆盖一些，那就更烦人了。我们可以通过改变createTheme 函数的实现来接受一个可选的baseTheme ，而不是总是使用库中的默认值，从而使这个问题更简单。
有了这些变化，作为消费者，我可以从库中导入createTheme，并在创建HappyGreen 时使用AngryRed 作为基础主题。
让颜色根据数据集的变化而变化
我们在库中的另一个重要功能是根据数据改变系列的颜色，我们不想失去这个功能。
在这个例子中，我们在第一个图表中应用绿色渐变，以突出最高值，因为有更多的订购项目--更多的销售--是一件好事但在第二个图表中，我们应用红色梯度来突出最高值，因为有更多的人退回他们订购的东西并不是一件好事。
当我们想让一个特定的数据系列使用不同的颜色时，创建额外的主题将是非常麻烦的，所以我们改变了我们的 *DataSeries*类型接受一个可选的颜色，可以覆盖来自主题的系列颜色。
因此，对于上面的例子，我们可以有这样的东西。
接下来的步骤
Polaris Viz将很快开放源代码!如果你想获得该库的测试版，帮助我们进行测试，或者提出对你有用的功能，请联系我们：polaris-viz-feedback@shopify.com。
Krystal是Visualization Experiences团队的一名员工开发人员。当她不迷恋颜色、形状和动画的时候，她通常会和朋友一起举办卡拉OK和台球之夜，或者避免被她的猫Pluma攻击。
在您的收件箱中获得这样的故事!
来自构建和扩展Shopify的团队的故事。这个商务平台为全球数以百万计的企业提供动力。
电子邮件地址是的，给我登记
与我们分享您的电子邮件并接收每月的更新。
谢谢您的订阅。
你很快就会开始收到免费的提示和资源。
