EWW 图表组件新增垂直布局与轴方向配置功能

在数据可视化领域，图表的方向和坐标轴布局对于信息呈现至关重要。EWW 项目近期对其图表组件(graph widget)进行了重要功能升级，增加了垂直布局和坐标轴方向配置选项，为开发者提供了更灵活的图表展示方式。

功能背景

传统的图表组件通常采用水平布局，即X轴水平延伸表示时间，Y轴垂直延伸表示数值。然而在某些应用场景中，垂直布局可能更加合适，例如：

• 在狭窄的侧边栏中展示长条状图表
• 需要与界面其他元素保持一致的视觉流向
• 特殊的数据展示需求

EWW 原有的图表组件缺乏这方面的灵活性，开发者无法自由调整图表方向，这限制了组件的应用场景。

功能实现

新版本通过引入两个关键配置参数解决了这一问题：

1. yaxis-vertical：布尔值参数，控制Y轴是否垂直显示

   • 设置为false时，Y轴将水平显示
   • 默认值为true，保持传统垂直布局

2. origin：字符串参数，定义图表原点位置

   • 可选值："topleft"、"topright"、"botleft"、"botright"
   • 控制数值增长方向和起始点

配置示例

以下是一个典型的垂直图表配置示例：

(graph
  :width 20
  :height 100 
  :yaxis-vertical false
  :origin "botleft"
  :value {EWW_CPU.avg}
  :time-range "30s"
  :dynamic false
  :max 100
  :min 0)

这个配置将产生一个：

• 宽度20单位，高度100单位的图表
• Y轴水平向右延伸
• X轴垂直向上延伸
• 原点位于左下角
• 显示CPU平均使用率数据，时间范围为30秒

技术实现原理

在底层实现上，EWW 通过以下方式支持这一功能：

1. 坐标变换：根据yaxis-vertical参数决定是否交换X/Y坐标系的处理逻辑
2. 绘制方向控制：origin参数影响坐标轴的数值增长方向和标签位置
3. 布局计算：自动调整图表元素的位置关系以适应不同方向

应用场景

这一功能特别适用于以下场景：

1. 系统监控面板：在狭窄的侧边栏中垂直显示CPU、内存使用率图表
2. 音频可视化：垂直显示音频波形或频谱分析结果
3. 特殊数据展示：需要从右向左或从下向上展示增长趋势的数据

注意事项

开发者在使用时需要注意：

1. 当使用非传统方向时，要确保用户能够正确理解图表含义
2. 图表标签可能需要额外配置以适应新的方向
3. 与其他组件的布局配合可能需要调整

这一功能的加入显著提升了EWW图表组件的灵活性，使其能够适应更多样化的界面设计需求。开发者现在可以根据具体场景选择最合适的图表方向，创造出更具表现力的用户界面。