feat: support barpadding for histogram

[Runtus]

[中文版模板 / Chinese template]

🤔 This is a ...

• [x] New feature
• [ ] Bug fix
• [ ] TypeScript definition update
• [ ] Bundle size optimization
• [ ] Performance optimization
• [ ] Enhancement feature
• [ ] Refactoring
• [ ] Update dependency
• [ ] Code style optimization
• [ ] Test Case
• [ ] Branch merge
• [ ] Release
• [ ] Site / documentation update
• [ ] Demo update
• [ ] Workflow
• [ ] Other (about what?)

🔗 Related issue link

close #2629

🔗 Related PR link

🐞 Bugserver case id

💡 Background and solution

• change bar begin and end position throw 1/2 barPadding.
• below image show the barPadding: 12px case.

📝 Changelog

feat: support barpadding for histogram.

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• [ ] Doc is updated/provided or not needed
• [ ] Demo is updated/provided or not needed
• [ ] TypeScript definition is updated/provided or not needed
• [ ] Changelog is provided or not needed

---

🚀 Summary

copilot:summary

🔍 Walkthrough

copilot:walkthrough

[xile611]

补充一个badcase，当图表宽度比较小的时候，较窄的“柱子”会被消除掉

const spec = {
  width: 400,
  type: 'histogram',
  xField: 'from',
  x2Field: 'to',
  yField: 'profit',
  seriesField: 'type',
  barPadding: 10,
  bar: {
    style: {
      stroke: 'white',
      lineWidth: 1
    }
  },
  axes: [
    {
      orient: 'bottom',
      nice: false,
      tick: {
        visible: true
      }
    }
  ],
  title: {
    text: 'Profit',
    textStyle: {
      align: 'center',
      height: 50,
      lineWidth: 3,
      fill: '#333',
      fontSize: 25,
      fontFamily: 'Times New Roman'
    }
  },
  tooltip: {
    visible: true,
    mark: {
      title: {
        key: 'title',
        value: 'profit'
      },
      content: [
        {
          key: datum => datum['from'] + '～' + datum['to'],
          value: datum => datum['profit']
        }
      ]
    }
  },
  data: [
    {
      name: 'data1',
      values: [
        {
          from: 0,
          to: 10,
          profit: 2,
          type: 'A'
        },
        {
          from: 10,
          to: 16,
          profit: 3,
          type: 'B'
        },
        {
          from: 16,
          to: 18,
          profit: 15,
          type: 'C'
        },
        {
          from: 18,
          to: 26,
          profit: 12,
          type: 'D'
        },
        {
          from: 26,
          to: 32,
          profit: 22,
          type: 'E'
        },
        {
          from: 32,
          to: 56,
          profit: 7,
          type: 'F'
        },
        {
          from: 56,
          to: 62,
          profit: 17,
          type: 'G'
        }
      ]
    }
  ]
};

[Runtus]

补充一个badcase，当图表宽度比较小的时候，较窄的“柱子”会被消除掉

const spec = {
  width: 400,
  type: 'histogram',
  xField: 'from',
  x2Field: 'to',
  yField: 'profit',
  seriesField: 'type',
  barPadding: 10,
  bar: {
    style: {
      stroke: 'white',
      lineWidth: 1
    }
  },
  axes: [
    {
      orient: 'bottom',
      nice: false,
      tick: {
        visible: true
      }
    }
  ],
  title: {
    text: 'Profit',
    textStyle: {
      align: 'center',
      height: 50,
      lineWidth: 3,
      fill: '#333',
      fontSize: 25,
      fontFamily: 'Times New Roman'
    }
  },
  tooltip: {
    visible: true,
    mark: {
      title: {
        key: 'title',
        value: 'profit'
      },
      content: [
        {
          key: datum => datum['from'] + '～' + datum['to'],
          value: datum => datum['profit']
        }
      ]
    }
  },
  data: [
    {
      name: 'data1',
      values: [
        {
          from: 0,
          to: 10,
          profit: 2,
          type: 'A'
        },
        {
          from: 10,
          to: 16,
          profit: 3,
          type: 'B'
        },
        {
          from: 16,
          to: 18,
          profit: 15,
          type: 'C'
        },
        {
          from: 18,
          to: 26,
          profit: 12,
          type: 'D'
        },
        {
          from: 26,
          to: 32,
          profit: 22,
          type: 'E'
        },
        {
          from: 32,
          to: 56,
          profit: 7,
          type: 'F'
        },
        {
          from: 56,
          to: 62,
          profit: 17,
          type: 'G'
        }
      ]
    }
  ]
};

那这种情况怎么处理呢？为每个柱设一个最小宽度吗？

[xile611]

补充一个badcase，当图表宽度比较小的时候，较窄的“柱子”会被消除掉

const spec = {
  width: 400,
  type: 'histogram',
  xField: 'from',
  x2Field: 'to',
  yField: 'profit',
  seriesField: 'type',
  barPadding: 10,
  bar: {
    style: {
      stroke: 'white',
      lineWidth: 1
    }
  },
  axes: [
    {
      orient: 'bottom',
      nice: false,
      tick: {
        visible: true
      }
    }
  ],
  title: {
    text: 'Profit',
    textStyle: {
      align: 'center',
      height: 50,
      lineWidth: 3,
      fill: '#333',
      fontSize: 25,
      fontFamily: 'Times New Roman'
    }
  },
  tooltip: {
    visible: true,
    mark: {
      title: {
        key: 'title',
        value: 'profit'
      },
      content: [
        {
          key: datum => datum['from'] + '～' + datum['to'],
          value: datum => datum['profit']
        }
      ]
    }
  },
  data: [
    {
      name: 'data1',
      values: [
        {
          from: 0,
          to: 10,
          profit: 2,
          type: 'A'
        },
        {
          from: 10,
          to: 16,
          profit: 3,
          type: 'B'
        },
        {
          from: 16,
          to: 18,
          profit: 15,
          type: 'C'
        },
        {
          from: 18,
          to: 26,
          profit: 12,
          type: 'D'
        },
        {
          from: 26,
          to: 32,
          profit: 22,
          type: 'E'
        },
        {
          from: 32,
          to: 56,
          profit: 7,
          type: 'F'
        },
        {
          from: 56,
          to: 62,
          profit: 17,
          type: 'G'
        }
      ]
    }
  ]
};

那这种情况怎么处理呢？为每个柱设一个最小宽度吗？

要效果比较好，需要先把padding减去，然后按照剩下的尺寸来计算x,x1，这样就没这个问题 不过按照vchart这个流程，会非常复杂

另一种思路就是要保留一个最小的宽度，至少让用户看到那里是有数据的

[xile611]

@Runtus 有进展吗？

[Runtus]

@Runtus 有进展吗？

抱歉，最近很忙，一直没时间处理这边。 您之前说的参考vgrammer的transform机制实现我有些没get到意思，去看了下那边代码有点懵，能否再给一些详细的描述

[xile611]

@Runtus 有进展吗？

抱歉，最近很忙，一直没时间处理这边。 您之前说的参考vgrammer的transform机制实现我有些没get到意思，去看了下那边代码有点懵，能否再给一些详细的描述

文档可能写的不清楚 。。。 https://www.visactor.io/vgrammar/guide/guides/marks/base

简单而言就是vchart是基于vgrammar实现的，在计算图元的视觉通道映射前后，都会支持transform变换 就像前面我举的的例子，mark-overlap.ts 就是在计算完视觉通道后，执行的一种变换

[Runtus]

@Runtus 有进展吗？

抱歉，最近很忙，一直没时间处理这边。 您之前说的参考vgrammer的transform机制实现我有些没get到意思，去看了下那边代码有点懵，能否再给一些详细的描述

文档可能写的不清楚 。。。 https://www.visactor.io/vgrammar/guide/guides/marks/base

简单而言就是vchart是基于vgrammar实现的，在计算图元的视觉通道映射前后，都会支持transform变换 就像前面我举的的例子，mark-overlap.ts 就是在计算完视觉通道后，执行的一种变换

不好意思，最近学校和实习的任务太忙了，没时间做这一块儿工作了，后续可能还要忙一个多月，耽误太长时间了，我就把这pr给close了。