fix: dual-axes axisXTitle bug (#172)

* fix: fix dual-axes axisXTitle bug

* chore: version

* revert: version

---------

Co-authored-by: hustcc <[email protected]>

Author: leondt1

bindings/gpt-vis-ssr/__tests__/dual-axes.spec.ts

@@ -9,6 +9,7 @@ describe('SSR render', () => {
       height: 400,
       type: 'dual-axes',
       title: 'This is a dual axes chart',
+      axisXTitle: '时间',
       categories: [
         '2020-08-20',
         '2020-08-21',
@@ -102,6 +103,7 @@ describe('SSR render', () => {
         '2020-09-17',
         '2020-09-18',
       ],
+      axisXTitle: '时间',
       series: [
         {
           type: 'column',
@@ -133,6 +135,7 @@ describe('SSR render', () => {
       height: 400,
       type: 'dual-axes',
       title: 'This is a dual axes chart',
+      axisXTitle: 'time',
       categories: [
         '2020-08-20',
         '2020-08-21',
@@ -198,6 +201,7 @@ describe('SSR render', () => {
       height: 400,
       type: 'dual-axes',
       title: 'This is a dual axes chart',
+      axisXTitle: '时间',
       categories: [
         '2020-08-20',
         '2020-08-21',
@@ -263,6 +267,7 @@ describe('SSR render', () => {
       height: 400,
       type: 'dual-axes',
       title: 'This is a dual axes chart',
+      axisXTitle: '时间',
       categories: [
         '2020-08-20',
         '2020-08-21',
@@ -327,6 +332,7 @@ describe('SSR render', () => {
       height: 400,
       type: 'dual-axes',
       title: 'This is a dual axes chart',
+      axisXTitle: '时间',
       categories: [
         '2020-08-20',
         '2020-08-21',

bindings/gpt-vis-ssr/__tests__/snapshot/dual-axes-academy.png

@@ -35,6 +35,7 @@ export async function DualAxes(options: DualAxesOptions) {
     theme = 'default',
     renderPlugins,
     style = {},
+    axisXTitle = '',
   } = options;
   enum ChartType {
     Column = 'column',
@@ -60,6 +61,12 @@ export async function DualAxes(options: DualAxesOptions) {
     };
   }
 
+  function getTitleFontStyle(texture: DualAxesOptions['texture']) {
+    return texture === 'rough'
+      ? { titleFontFamily: FontFamily.ROUGH, labelFontFamily: FontFamily.ROUGH }
+      : {};
+  }
+
   function transform(series: DualAxesSeriesItem[], categories: string[]) {
     const newChildren = series
       .sort((a, b) => {
@@ -74,14 +81,10 @@ export async function DualAxes(options: DualAxesOptions) {
           axis: {
             y: {
               title: axisYTitle,
-              ...(texture === 'rough'
-                ? { titleFontFamily: FontFamily.ROUGH, labelFontFamily: FontFamily.ROUGH }
-                : {}),
+              ...getTitleFontStyle(texture),
             },
             x: {
-              ...(texture === 'rough'
-                ? { titleFontFamily: FontFamily.ROUGH, labelFontFamily: FontFamily.ROUGH }
-                : {}),
+              ...getTitleFontStyle(texture),
             },
           },
           encode: { x: 'category', y: axisYTitle, color: () => axisYTitle },
@@ -124,9 +127,7 @@ export async function DualAxes(options: DualAxesOptions) {
               y: {
                 position: 'right',
                 title: axisYTitle,
-                ...(texture === 'rough'
-                  ? { titleFontFamily: FontFamily.ROUGH, labelFontFamily: FontFamily.ROUGH }
-                  : {}),
+                ...getTitleFontStyle(texture),
               },
             },
             encode: { x: 'category', y: axisYTitle, shape: 'smooth', color: () => axisYTitle },
@@ -178,6 +179,16 @@ export async function DualAxes(options: DualAxesOptions) {
     width,
     height,
     ...config,
+    ...(axisXTitle
+      ? {
+          axis: {
+            x: {
+              title: axisXTitle,
+              ...getTitleFontStyle(texture),
+            },
+          },
+        }
+      : {}),
     scale: {
       y: {
         nice: true,