Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 文本和图标的条件格式支持主题配置 #2267

Merged
merged 10 commits into from
Jul 14, 2023

Conversation

lijinke666
Copy link
Member

@lijinke666 lijinke666 commented Jun 21, 2023

👀 PR includes

✨ Feature

  • New feature

📝 Description

背景
  1. 业务侧需要对趋势分析表特定行 (rowCell + dataCell) 加粗展示, 趋势分析表的单元格不支持自定义, 条件格式又不支持修改 fontWeight, 主题配置又只能对所有单元格生效, 有点无解
  2. 文本条件格式目前只支持配置 iconfill, 缺失修改字体大小, 对齐方式, 透明度等能力
  3. 暂时通过 layoutDataPosition, 动态的修改特定行为小计节点达到加粗的效果
解法

方式1: 让 S2 主题配置增加动态 hook 的能力, 但是这样和条件格式的定位有点冲突
方式2: 主题配置 = 全局通用的配置, 条件格式 = 满足特定数据/场景的自定义配置
方式3: 走 自定义单元格, 不过对于用户的技术能力有一定要求, 增加理解成本

综上所述: 采用 方式2 - 在条件格式的配置基础上, 支持额外的主题配置 API

image

image

  1. 特定行列头字段
  {
    field: 'province',
    mapping() {
      return {
        fill: '#FF4D4F',
+       fontSize: 20
+       textAlign: 'right'
+       opacity: 0.2
+       fontWeight: 800
      };
    },
  },
  1. 特定数值
  {
    field: 'number',
    mapping(value) {
      if(value === 300) {
	      return {
	        fill: '#FF4D4F',
+           fontSize: 20
+           textAlign: 'right'
+           opacity: 0.2
+           fontWeight: 'bold'
	      };
      }
    },
  },

🖼️ Screenshot

Before After
透视表 - 平铺 image
透视表 - 树状 image
明细表 image
趋势分析表 image

🔗 Related issue link

🔍 Self-Check before the merge

  • Add or update relevant docs.
  • Add or update relevant demos.
  • Add or update test case.
  • Add or update relevant TypeScript definitions.

@vercel
Copy link

vercel bot commented Jun 21, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
antvis-s2 ❌ Failed (Inspect) Jul 14, 2023 9:44am

@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2023

Size Change: -84 B (0%)

Total Size: 320 kB

Filename Size Change
./packages/s2-core/dist/index.min.js 226 kB +23 B (0%)
./packages/s2-react/dist/index.min.js 67 kB -107 B (0%)
ℹ️ View Unchanged
Filename Size
./packages/s2-core/dist/style.min.css 401 B
./packages/s2-react/dist/style.min.css 3.91 kB
./packages/s2-vue/dist/index.min.js 20.2 kB
./packages/s2-vue/dist/style.min.css 1.9 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Jun 21, 2023

你好, @lijinke666 CI 执行失败, 请点击 [Details] 按钮查看, 并根据日志修复。

Hello, @lijinke666 CI run failed, please click the [Details] button for detailed log information and fix it.

@github-actions github-actions bot added the 🚨 test failed 单元测试挂了 label Jun 21, 2023
@lijinke666 lijinke666 changed the title [WIP] feat: 文本和图标的条件格式支持主题配置 feat: 文本和图标的条件格式支持主题配置 Jun 26, 2023
@github-actions github-actions bot added the pr(feature) new feature label Jun 26, 2023
@codecov
Copy link

codecov bot commented Jun 26, 2023

Codecov Report

Patch coverage has no change and project coverage change: +1.01 🎉

Comparison is base (ecdc9c8) 75.77% compared to head (0e23162) 76.78%.

Additional details and impacted files
@@            Coverage Diff             @@
##             next    #2267      +/-   ##
==========================================
+ Coverage   75.77%   76.78%   +1.01%     
==========================================
  Files         257      268      +11     
  Lines       11994    12201     +207     
  Branches     2464     2484      +20     
==========================================
+ Hits         9088     9369     +281     
+ Misses       1398     1294     -104     
- Partials     1508     1538      +30     
Impacted Files Coverage Δ
packages/s2-core/src/cell/base-cell.ts 83.85% <ø> (-0.36%) ⬇️
packages/s2-core/src/cell/col-cell.ts 88.80% <ø> (+2.04%) ⬆️
packages/s2-core/src/cell/corner-cell.ts 81.00% <ø> (-1.70%) ⬇️
packages/s2-core/src/cell/data-cell.ts 76.12% <ø> (+9.46%) ⬆️
packages/s2-core/src/cell/header-cell.ts 63.01% <ø> (-2.81%) ⬇️
packages/s2-core/src/cell/index.ts 100.00% <ø> (ø)
packages/s2-core/src/cell/merged-cell.ts 91.66% <ø> (+54.16%) ⬆️
packages/s2-core/src/cell/row-cell.ts 71.42% <ø> (+0.62%) ⬆️
packages/s2-core/src/cell/series-number-cell.ts 90.90% <ø> (-2.20%) ⬇️
packages/s2-core/src/cell/table-col-cell.ts 84.61% <ø> (+3.48%) ⬆️
... and 99 more

... and 70 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@lijinke666 lijinke666 merged commit c332c68 into next Jul 14, 2023
6 checks passed
@lijinke666 lijinke666 deleted the feat-condition-and-text-theme branch July 14, 2023 10:06
@lijinke666
Copy link
Member Author

🎉 This PR is included in version @antv/s2-v2.0.0-next.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

@lijinke666
Copy link
Member Author

🎉 This PR is included in version @antv/s2-react-v2.0.0-next.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
next 2.0-next 版本的问题 pr(feature) new feature released on @next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants