feat(composition): modify guide display in facet when with axis grid

src/component/axis.ts

@@ -337,7 +337,7 @@ const LinearAxis: GCC<AxisOptions> = (options) => {
             items: gridItems,
             lineStyle: {
               stroke: '#1b1e23',
-              strokeOpacity: 0.1,
+              strokeOpacity: 0.05,
               lineDash: [0, 0],
             },
           },

src/composition/matrix.ts

@@ -4,7 +4,13 @@ import { MatrixComposition } from '../spec';
 import { Container } from '../utils/container';
 import { calcBBox } from '../utils/vector';
 import { indexOf } from '../utils/array';
-import { inferColor, setAnimation, setStyle, toGrid } from './rect';
+import {
+  createInnerGuide,
+  inferColor,
+  setAnimation,
+  setStyle,
+  toGrid,
+} from './rect';
 import { useDefaultAdaptor, useOverrideAdaptor } from './utils';
 
 export type MatrixOptions = Omit<MatrixComposition, 'type'>;
@@ -70,8 +76,8 @@ const setChildren = useOverrideAdaptor<G2ViewTree>((options) => {
           },
         };
         const newScale = {
-          x: { guide: createGuideX(guideX)(facet) },
-          y: { guide: createGuideY(guideY)(facet) },
+          x: { guide: createGuideX(guideX)(facet, data) },
+          y: { guide: createGuideY(guideY)(facet, data) },
         };
         return {
           data,
@@ -127,20 +133,20 @@ const setData = (options: G2ViewTree) => {
 function createGuideX(guideX) {
   if (typeof guideX === 'function') return guideX;
   if (guideX === null) return () => null;
-  return (facet) => {
+  return (facet, data) => {
     const { rowIndex, rowValuesLength } = facet;
     // Only the bottom-most facet show axisX.
-    if (rowIndex !== rowValuesLength - 1) return null;
+    if (rowIndex !== rowValuesLength - 1) return createInnerGuide(guideX, data);
   };
 }
 
 function createGuideY(guideY) {
   if (typeof guideY === 'function') return guideY;
   if (guideY === null) return () => null;
-  return (facet) => {
+  return (facet, data) => {
     const { columnIndex } = facet;
     // Only the left-most facet show axisY.
-    if (columnIndex !== 0) return null;
+    if (columnIndex !== 0) return createInnerGuide(guideY, data);
   };
 }
 

src/composition/rect.ts

@@ -228,14 +228,14 @@ export const setChildren = useOverrideAdaptor<G2ViewTree>(
               x: { tickCount: encodeX ? 5 : undefined },
               y: { tickCount: encodeY ? 5 : undefined },
             };
+            const newData = isFacet ? facetData : data;
             const newScale = {
-              x: { guide: createGuide(guideX, createGuideX)(facet) },
-              y: { guide: createGuide(guideY, createGuideY)(facet) },
+              x: { guide: createGuide(guideX, createGuideX)(facet, newData) },
+              y: { guide: createGuide(guideY, createGuideY)(facet, newData) },
               // Hide all legends for child mark by default,
               // they are displayed in the top-level.
               color: { guide: null, domain: facetDomainColor },
             };
-            const newData = isFacet ? facetData : data;
             return {
               key: `${key}-${i}`,
               data: newData,
@@ -268,26 +268,43 @@ function subLayoutRect(data) {
   return calcBBox(points);
 }
 
+/**
+ * Inner guide not show title, tickLine, label and subTickLine, if data is empty, do not show guide.
+ */
+export function createInnerGuide(guide, data) {
+  return data.length
+    ? deepMix(
+        { title: false, tickLine: null, label: null, subTickLine: null },
+        guide,
+      )
+    : null;
+}
+
 function createGuideXRect(guide) {
-  return (facet) => {
+  return (facet, data) => {
     const { rowIndex, rowValuesLength, columnIndex, columnValuesLength } =
       facet;
     // Only the bottom-most facet show axisX.
-    if (rowIndex !== rowValuesLength - 1) return null;
+    if (rowIndex !== rowValuesLength - 1) return createInnerGuide(guide, data);
     // Only the bottom-left facet show title.
-    if (columnIndex !== columnValuesLength - 1) {
-      return deepMix({ title: false }, guide);
-    }
+    const title = columnIndex !== columnValuesLength - 1 ? false : undefined;
+    // If data is empty, do not show grid.
+    const grid = data.length ? undefined : null;
+
+    return deepMix({ title, grid }, guide);
   };
 }
 
 function createGuideYRect(guide) {
-  return (facet) => {
+  return (facet, data) => {
     const { rowIndex, columnIndex } = facet;
     // Only the left-most facet show axisY.
-    if (columnIndex !== 0) return null;
+    if (columnIndex !== 0) return createInnerGuide(guide, data);
     // Only the left-top facet show title.
-    if (rowIndex !== 0) return deepMix({ title: false }, guide);
+    const title = rowIndex !== 0 ? false : undefined;
+    // If data is empty, do not show grid.
+    const grid = data.length ? undefined : null;
+    return deepMix({ title, grid }, guide);
   };
 }