@publishfx/publish-chart 2.1.28 → 2.1.29

package/dist/adapters/DataAdapter.js

@@ -1,4 +1,8 @@
 import lib from "@antv/data-set/lib";
+const parseDataValue = (value, defaultStr = '-')=>{
+    if ('' !== value && '-' !== value && null != value && 'NaN' !== value) return +value;
+    return defaultStr;
+};
 class DataAdapter {
     static transform(data, transformType, config) {
         if (!data || 0 === data.length) return [];
@@ -24,7 +28,7 @@ class DataAdapter {
             dv.transform({
                 type: 'map',
                 callback: (row)=>{
-                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    row[config.y] = parseDataValue(row[config.y], null);
                     return row;
                 }
             });
@@ -106,7 +110,7 @@ class DataAdapter {
         if (config.y) dv.transform({
             type: 'map',
             callback: (row)=>{
-                row[config.y] = '' !== row[config.y] && '-' !== row[config.y] && null !== row[config.y] ? +row[config.y] : '-';
+                row[config.y] = parseDataValue(row[config.y]);
                 return row;
             }
         });
@@ -122,7 +126,7 @@ class DataAdapter {
             dv.transform({
                 type: 'map',
                 callback: (row)=>{
-                    row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
+                    row[config.y] = parseDataValue(row[config.y], null);
                     return row;
                 }
             });
@@ -141,14 +145,14 @@ class DataAdapter {
             tdv.transform({
                 type: 'map',
                 callback: (row)=>{
-                    row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
+                    row[config.y] = parseDataValue(row[config.y], null);
                     return row;
                 }
             });
             combinedv.transform({
                 type: 'map',
                 callback: (row)=>{
-                    row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
+                    row[config.y] = parseDataValue(row[config.y], null);
                     return row;
                 }
             });

package/dist/components/g2/base/g2Helpers.d.ts

@@ -228,6 +228,8 @@ export interface ApplyAxisXOptions {
     containerWidth?: number;
     /** 单个标签最大显示字符数，超出截断。默认 6 */
     maxLabelChars?: number;
+    /** 单个标签最小显示宽度，默认 90 */
+    minLabelWidth?: number;
 }
 /** 配置 X 轴，挂载在 mark 上（如 line / interval） */
 export declare function applyAxisX(mark: any, options?: ApplyAxisXOptions): void;

package/dist/components/g2/base/g2Helpers.js

@@ -37,12 +37,12 @@ function applyScaleYLinear(view, options = {}) {
         }
     });
 }
-function calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize) {
+function calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize, minLabelWidth = 90) {
     if (dataCount <= 1) return 1;
     const charWidth = 0.55 * fontSize;
-    const ellipsisWidth = Math.min(maxLabelChars * charWidth, 90);
+    const ellipsisWidth = Math.min(maxLabelChars * charWidth, minLabelWidth);
     const slotWidth = ellipsisWidth + 8;
-    const plotWidth = 0.85 * containerWidth;
+    const plotWidth = 0.95 * containerWidth;
     const maxLabels = Math.max(Math.floor(plotWidth / slotWidth), 2);
     return Math.max(Math.ceil(dataCount / maxLabels), 1);
 }
@@ -55,10 +55,10 @@ function createAxisFilter(type, interval, _dataCount) {
 function applyAxisX(mark, options = {}) {
     const { title = false, isHorizontal = false, grid = true, gridStroke = '#333', gridLineWidth = 50, gridLineDash = [
         1000
-    ], gridFilter, dataCount = 0, containerWidth = 0, maxLabelChars = 30 } = options;
+    ], gridFilter, dataCount = 0, containerWidth = 0, maxLabelChars = 30, minLabelWidth = 90 } = options;
     const fontSize = 12;
     const needSampling = dataCount > 0 && containerWidth > 0;
-    const interval = needSampling ? calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize) : 1;
+    const interval = needSampling ? calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize, minLabelWidth) : 1;
     const axisFilter = needSampling && interval > 1 ? (type)=>createAxisFilter(type, interval, dataCount) : null;
     mark.axis('x', {
         title,

package/dist/components/g2/base/g2bar.js

@@ -34,6 +34,7 @@ function renderG2BarChart(container, options) {
         key: 'main'
     });
     if (!CLOSE_HIGHLIGHT_DEBUG) applyHighlightDate(view, x, data, highlightDate, isHighlight);
+    const minLabelWidth = data.some((d)=>d.groupName.length < 3) ? 30 : 90;
     const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
         type: 'dodgeX',
         padding: isHorizontal ? 0.2 : 0
@@ -72,7 +73,8 @@ function renderG2BarChart(container, options) {
         grid: false,
         isHorizontal,
         dataCount: xValueCount,
-        containerWidth: container.clientWidth
+        containerWidth: container.clientWidth,
+        minLabelWidth
     });
     applyAxisY(view, {
         labelFormatter: formatAxis
@@ -91,14 +93,14 @@ function renderG2BarChart(container, options) {
     interval.tooltip({
         items: [
             (datum)=>({
-                    value: datum[Y_AXIS_FIELD],
+                    value: null === datum[Y_AXIS_FIELD] ? '-' : datum[Y_AXIS_FIELD],
                     name: datum['groupType'],
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
                     color: getColorByGroupType(datum['groupType'], colorOpts) || 'transparent'
                 }),
             isCompare ? (datum)=>({
-                    value: datum[Y_AXIS_FIELD],
+                    value: null === datum[Y_AXIS_FIELD] ? '-' : datum[Y_AXIS_FIELD],
                     compareTime: datum?.compareTime,
                     name: datum['groupType'],
                     indicatorId: datum['groupType'].replace('_compare', ''),

package/dist/components/g2/base/g2combine.js

@@ -16,6 +16,7 @@ function renderG2CombineChart(container, options) {
         insetBottom: 0,
         animate: null
     });
+    const minLabelWidth = data.some((d)=>d.groupName.length < 3) ? 30 : 90;
     const view = getMainView(chart);
     view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 16).attr('marginBottom', 0).animate(false);
     view.data(data);
@@ -24,7 +25,8 @@ function renderG2CombineChart(container, options) {
         title: false,
         grid: false,
         dataCount: xValueCount,
-        containerWidth: container.clientWidth
+        containerWidth: container.clientWidth,
+        minLabelWidth
     });
     const barColor = themeColors[0] ?? "#5B8FF9";
     applyHighlightDate(view, x, data, highlightDate, isHighlight);

package/dist/components/g2/base/g2line.js

@@ -16,6 +16,7 @@ function renderG2LineChart(container, options) {
         paddingBottom: 0,
         insetBottom: 0
     });
+    const minLabelWidth = data.some((d)=>d.groupName.length < 3) ? 30 : 90;
     const view = getMainView(chart);
     view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 10).attr('marginBottom', isLegend ? 0 : 16).animate(false);
     view.data(data);
@@ -42,7 +43,8 @@ function renderG2LineChart(container, options) {
     applyAxisX(view, {
         grid: false,
         dataCount: xValueCount,
-        containerWidth: container.clientWidth
+        containerWidth: container.clientWidth,
+        minLabelWidth
     });
     applyAxisY(view, {
         labelFormatter: formatAxis

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [