fix: bullet legend invalid cofiguration (#3116)

Author: lxfu1

package.json

@@ -10,6 +10,7 @@
     "build:site": "pnpm -r --stream --filter=./site run build",
     "build:lib": "pnpm -r --stream --filter=!./site run build:lib",
     "dev:graphs": "cd packages/graphs && pnpm run dev",
+    "dev:plots": "cd packages/plots && pnpm run dev",
     "profile": "webpack --config webpack.config.js --mode production --profile --json > stats.json",
     "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
     "ci:version": "pnpm changeset version",

packages/plots/examples/App.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { ExampleList } from './pages';
+import { DemoBulletLegend } from './pages/bullet-legend';
 import { DemoRadar } from './pages/radar';
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<ExampleList />} />
       <Route path="/radar" element={<DemoRadar />} />
+      <Route path="/bullet-legend" element={<DemoBulletLegend />} />
     </Routes>
   );
 }

packages/plots/examples/pages/bullet-legend.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Bullet } from '../../src';
+
+const data = [
+  { name: 'G2', star: 0 },
+  { name: 'G6', star: 0 },
+  { name: 'F2', star: 0 },
+  { name: 'L7', star: 0 },
+];
+
+export const DemoBulletLegend = () => {
+  const config = {
+    // default xField: 'title'、rangeField: 'ranges'、measureField: 'measures'、targetField: 'targets'
+    data: [
+      {
+        title: '满意度',
+        ranges: 100,
+        measures: 80,
+        targets: 85,
+      },
+    ],
+    legend: false,
+  };
+  return <Bullet {...config} />;
+};

packages/plots/examples/pages/index.tsx

@@ -6,6 +6,10 @@ const dataSource = [
     example: 'radar',
     description: '雷达图所有值为 0 的场景',
   },
+  {
+    example: 'bullet-legend',
+    description: '子弹图关闭图例',
+  },
 ].map((item, index) => ({ key: index, ...item }));
 
 export const ExampleList = () => {
@@ -16,13 +20,13 @@ export const ExampleList = () => {
         margin: '24px auto',
         border: '1px solid #eee',
         borderRadius: 4,
-        padding: 24,
+        padding: 12,
         boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
       }}
     >
       {dataSource.map((data) => (
-        <div key={data.key}>
-          <Link to={`/${data.example}`} target="_blank" rel="noreferrer">
+        <div key={data.key} style={{ margin: 12 }}>
+          <Link to={`/${data.example}`} target="_blank" rel="noreferrer" title={data.description}>
             <b>{data.example}: </b>
             <span>{data.description}</span>
           </Link>

packages/plots/examples/pages/radar.tsx

@@ -24,7 +24,7 @@ export const DemoRadar = () => {
     },
     axis: {
       y: {
-        labelFormatter: (v) => `${v / 1000} K`,
+        labelFormatter: (v: number) => `${v / 1000} K`,
       },
     },
     style: {

packages/plots/src/core/plots/bullet/adaptor.ts

@@ -1,16 +1,16 @@
 import { allCoordinateLayout } from '../../adaptor';
 import {
   flow,
-  transformOptions,
-  map,
-  set,
   get,
-  isArray,
   includes,
-  isNumber,
-  mergeWithArrayCoverage,
+  isArray,
   isNil,
+  isNumber,
   isString,
+  map,
+  mergeWithArrayCoverage,
+  set,
+  transformOptions,
 } from '../../utils';
 
 import type { Adaptor } from '../../types';
@@ -150,13 +150,14 @@ export function adaptor(params: Params) {
     });
     set(options, 'scale.color.range', colors);
     // legend itemMarker 的形状
-    options.legend.color.itemMarker = (d) => {
-      if (mapField && includes(mapField?.[targetField], d)) {
-        return 'line';
-      }
-      return d?.replace(/\_\d$/, '') === targetField ? 'line' : 'square';
-    };
-
+    if (get(options, 'legend.color') && isNil(get(options, 'legend.color.itemMarker'))) {
+      options.legend.color.itemMarker = (d) => {
+        if (mapField && includes(mapField?.[targetField], d)) {
+          return 'line';
+        }
+        return d?.replace(/\_\d$/, '') === targetField ? 'line' : 'square';
+      };
+    }
     return params;
   };