feat: add inset in rect shape in cartesian coordinate (#4176)

__tests__/unit/api/chart.spec.ts

@@ -26,6 +26,7 @@ import {
   Range,
   RangeX,
   RangeY,
+  Rect,
   Connector,
 } from '../../../src/api/mark/mark';
 import { createDiv } from '../../utils/dom';
@@ -103,6 +104,7 @@ describe('Chart', () => {
   it('chart.nodeName() should return expected node ', () => {
     const chart = new Chart();
     expect(chart.interval()).toBeInstanceOf(Interval);
+    expect(chart.rect()).toBeInstanceOf(Rect);
     expect(chart.point()).toBeInstanceOf(Point);
     expect(chart.area()).toBeInstanceOf(Area);
     expect(chart.line()).toBeInstanceOf(Line);
@@ -121,6 +123,7 @@ describe('Chart', () => {
     expect(chart.connector()).toBeInstanceOf(Connector);
     expect(chart.options().children).toEqual([
       { type: 'interval' },
+      { type: 'rect' },
       { type: 'point' },
       { type: 'area' },
       { type: 'line' },

__tests__/unit/api/composition.spec.ts

@@ -23,12 +23,14 @@ import {
   Range,
   RangeX,
   RangeY,
+  Rect,
   Text,
   Connector,
 } from '../../../src/api/mark/mark';
 
 function expectToCreateMarks(node) {
   expect(node.interval()).toBeInstanceOf(Interval);
+  expect(node.rect()).toBeInstanceOf(Rect);
   expect(node.point()).toBeInstanceOf(Point);
   expect(node.area()).toBeInstanceOf(Area);
   expect(node.line()).toBeInstanceOf(Line);

docs/mark-rect.md

@@ -14,7 +14,7 @@
   const layout = (data) => {
     const root = d3.hierarchy(data);
     root.count();
-    d3.treemap().size([width, height]).padding(padding)(root);
+    d3.treemap().size([width, height]).paddingLeft(padding)(root);
     return root
       .descendants()
       .map((d) =>

src/shape/interval/color.ts

@@ -19,7 +19,7 @@ export type ColorOptions = {
  */
 export const Color: SC<ColorOptions> = (options) => {
   // Render border only when colorAttribute is stroke.
-  const { colorAttribute, inset, ...style } = options;
+  const { colorAttribute, inset = 0, ...style } = options;
 
   return (points, value, coordinate, theme) => {
     const { mark, shape, defaultShape } = value;
@@ -43,21 +43,24 @@ export const Color: SC<ColorOptions> = (options) => {
 
     // Render rect in non-polar coordinate.
     if (!isPolar(coordinate) && !isHelix(coordinate)) {
-      const [p0, , p2] = isTranspose(coordinate) ? reorder(points) : points;
+      const tpShape = !!isTranspose(coordinate);
+
+      const [p0, , p2] = tpShape ? reorder(points) : points;
       const [x, y] = p0;
       const [width, height] = sub(p2, p0);
       // Deal with width or height is negative.
       const absX = width > 0 ? x : x + width;
       const absY = height > 0 ? y : y + height;
       const absWidth = Math.abs(width);
       const absHeight = Math.abs(height);
+
       return select(new Rect({}))
         .call(applyStyle, shapeTheme)
         .style('lineWidth', lineWidth)
-        .style('x', absX)
-        .style('y', absY)
-        .style('width', absWidth)
-        .style('height', absHeight)
+        .style('x', tpShape ? absX : absX + inset)
+        .style('y', tpShape ? absY + inset : absY)
+        .style('width', tpShape ? absWidth : absWidth - 2 * inset)
+        .style('height', tpShape ? absHeight - 2 * inset : absHeight)
         .style('stroke', color)
         .style('stroke', color || stroke)
         .style(colorAttribute, color)