@publishfx/publish-chart 2.1.22 → 2.1.24

package/dist/adapters/DataAdapter.js

@@ -122,14 +122,7 @@ class DataAdapter {
             dv.transform({
                 type: 'map',
                 callback: (row)=>{
-                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
-                    return row;
-                }
-            });
-            tdv.transform({
-                type: 'map',
-                callback: (row)=>{
-                    row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
                     return row;
                 }
             });
@@ -145,6 +138,20 @@ class DataAdapter {
                     return row.isCombine;
                 }
             });
+            tdv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
+                    return row;
+                }
+            });
+            combinedv.transform({
+                type: 'map',
+                callback: (row)=>{
+                    row[config.y] = '' !== row[config.y] ? +row[config.y] : null;
+                    return row;
+                }
+            });
             if (config.isDescend) tdv.transform({
                 type: 'sort',
                 callback (a, b) {
@@ -152,7 +159,16 @@ class DataAdapter {
                 }
             });
             const xKey = config.x ?? 'x';
-            combinedv.rows.sort((a, b)=>{
+            if (config.isDescend) {
+                const sortData = tdv.rows.map((item)=>item[xKey]);
+                combinedv.rows.sort((a, b)=>{
+                    const aIndex = sortData.indexOf(a[xKey]);
+                    const bIndex = sortData.indexOf(b[xKey]);
+                    if (-1 === aIndex) return 1;
+                    if (-1 === bIndex) return -1;
+                    return aIndex - bIndex;
+                });
+            } else combinedv.rows.sort((a, b)=>{
                 const aIndex = allKeys.has(a[xKey]) ? Array.from(allKeys).indexOf(a[xKey]) : -1;
                 const bIndex = allKeys.has(b[xKey]) ? Array.from(allKeys).indexOf(b[xKey]) : -1;
                 if (-1 === aIndex) return 1;

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

@@ -123,13 +123,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         safeIndicatorMap,
         y
     ]);
-    const formatLineAxis = useCallback((val)=>{
-        const indicatorId = indicators?.length > 2 ? "" : safeZ;
-        return getAxisFormat(val, safeIndicatorMap, indicatorId);
-    }, [
+    const formatLineAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeZ), [
         safeIndicatorMap,
-        safeZ,
-        indicators
+        safeZ
     ]);
     useEffect(()=>{
         if (!transformedData.length) {
@@ -182,12 +178,12 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                         groupName: key,
                         isCombine: false,
                         groupType: groupType,
-                        groupValue: "",
+                        groupValue: null,
                         total: 0,
                         percent: ""
                     });
                 });
-                groupData.sort((a, b)=>xKey.indexOf(a.groupName) - xKey.indexOf(b.groupName));
+                if (!isDescend) groupData.sort((a, b)=>xKey.indexOf(a.groupName) - xKey.indexOf(b.groupName));
                 groupResult = groupResult.concat(groupData);
             });
             groupResult.forEach((item)=>{

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

@@ -203,7 +203,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         };
     }, [
         filteredData,
-        height,
         x,
         y,
         safeLegend,

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

@@ -146,20 +146,30 @@ function applyLegendColor(view, options = {}) {
 }
 function applyAuxiliaryLineY(view, lines, options = {}) {
     if (!lines?.length) return;
-    const { stroke = '#F4664A', strokeOpacity = 1, labelMaxLength = 5 } = options;
+    const { labelMaxLength = 5 } = options;
     lines.forEach((auxLine)=>{
         view.lineY().data([
             {
                 y: auxLine.value
             }
-        ]).encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').animate(false).scale('y', {
+        ]).encode('y', auxLine.value).style('stroke', 'rgb(234, 54, 106)').style('strokeOpacity', 1).style('opacity', 1).style('lineWidth', 2).style('shadowColor', 'transparent').animate(false).scale('y', {
             key: auxLine?.axis === 'right' ? 'line' : 'main'
         }).axis('x', false).label({
-            dx: 0,
+            opacity: 1,
+            dx: -20,
             dy: 0,
-            text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
+            text: splitTextToMultiline(auxLine.name, labelMaxLength, '\n'),
             position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
-            render: (text)=>`<div style="background-color: transparent; padding: 5px; border-radius: 5px;font-size: 14px;position: absolute;left: ${auxLine?.axis === 'right' ? '-105px' : '0px'}; top: -24px; width: 100px;color: ${stroke}; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`
+            style: {
+                fill: 'red',
+                shadowColor: 'red',
+                fillOpacity: 1,
+                strokeOpacity: 1,
+                opacity: 1,
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0
+            }
         });
     });
 }

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

@@ -19,7 +19,7 @@ function renderG2BarChart(container, options) {
         insetBottom: 0
     });
     const view = getMainView(chart);
-    view.attr('marginLeft', 0).attr('marginRight', isHorizontal ? 30 : 0).attr('marginBottom', isLegend ? 0 : 16);
+    view.attr('marginLeft', 0).attr('marginRight', isHorizontal ? 30 : 30).attr('marginTop', 10).attr('marginBottom', isLegend ? 0 : 16);
     if (isHorizontal) view.coordinate({
         transform: [
             {
@@ -114,18 +114,11 @@ function renderG2BarChart(container, options) {
                 }) : null
         ].filter(Boolean)
     });
-    const tooltipBounding = {
-        x: 0,
-        y: 0,
-        width: container.clientWidth || container.offsetWidth,
-        height: container.clientHeight || container.offsetHeight
-    };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         crosshairsY: true,
         wait: 100,
         marker: false,
-        bounding: tooltipBounding,
         render: (_event, payload)=>{
             const { title, items } = payload;
             const lastIsChange = items.filter((item)=>item.isChange);
@@ -137,9 +130,6 @@ function renderG2BarChart(container, options) {
             return tooltipRender(title, safeItems ?? []) ?? null;
         }
     });
-    else view.interaction('tooltip', {
-        bounding: tooltipBounding
-    });
     applyAuxiliaryLineY(view, auxiliaryLineData, {
         labelMaxLength: 5
     });

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

@@ -17,7 +17,7 @@ function renderG2CombineChart(container, options) {
         animate: null
     });
     const view = getMainView(chart);
-    view.attr('insetLeft', 0).attr('insetRight', 0).attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', 0).attr('animate', false).animate(false);
+    view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 10).attr('marginBottom', 16).animate(false);
     view.data(data);
     const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
@@ -104,7 +104,7 @@ function renderG2CombineChart(container, options) {
                 const groupType = String(datum.groupType ?? '');
                 const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
                 return {
-                    value: datum[Y_AXIS_FIELD],
+                    value: null === datum[BAR_Y_FIELD] ? '-' : datum[BAR_Y_FIELD],
                     name: datum['groupType'],
                     indicatorId,
                     channel: Y_AXIS_FIELD,
@@ -116,7 +116,7 @@ function renderG2CombineChart(container, options) {
             }
         ].filter(Boolean) : [
             (datum)=>datum.groupType.includes('_compare') ? false : {
-                    value: datum[BAR_Y_FIELD],
+                    value: null === datum[BAR_Y_FIELD] ? '-' : datum[BAR_Y_FIELD],
                     name: datum['groupType'],
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
@@ -167,7 +167,7 @@ function renderG2CombineChart(container, options) {
             (datum)=>{
                 const item = legendItems.find((item)=>item.id === `${datum?.groupType}_${datum?.isCombine}`);
                 return {
-                    value: datum[LINE_Y_FIELD],
+                    value: null === datum[LINE_Y_FIELD] ? '-' : datum[LINE_Y_FIELD],
                     name: getIndicatorCompareName(_indicatorMap, datum['groupType']),
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
@@ -253,49 +253,40 @@ function renderG2CombineChart(container, options) {
                 } : false
         ].filter(Boolean)
     });
-    if (tooltipRender) {
-        const tooltipBounding = {
-            x: 0,
-            y: 0,
-            width: container.clientWidth || container.offsetWidth,
-            height: container.clientHeight || container.offsetHeight
-        };
-        view.interaction('tooltip', {
-            shared: true,
-            crosshairsY: true,
-            marker: false,
-            bounding: tooltipBounding,
-            render: (_event, payload)=>{
-                const { title, items } = payload;
-                let safeTitle = title.replace(/,.*$/, '');
-                const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
-                const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
-                const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
-                const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
-                const indicatorOrder = new Map(indicators.map((id, i)=>[
-                        id,
-                        i
-                    ]));
-                const sortedCombineItems = [
-                    ...safeCombineItems
-                ].sort((a, b)=>{
-                    const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
-                    const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
-                    if (orderA !== orderB) return orderA - orderB;
-                    const typeRank = (item)=>{
-                        if (item.isChange) return 2;
-                        if ('compareline' === item.tipType) return 1;
-                        return 0;
-                    };
-                    return typeRank(a) - typeRank(b);
-                });
-                return tooltipRender(safeTitle, [
-                    ...safeItems,
-                    ...sortedCombineItems
-                ]) ?? null;
-            }
-        });
-    }
+    if (tooltipRender) view.interaction('tooltip', {
+        shared: true,
+        crosshairsY: true,
+        marker: false,
+        render: (_event, payload)=>{
+            const { title, items } = payload;
+            let safeTitle = title.replace(/,.*$/, '');
+            const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
+            const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
+            const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
+            const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
+            const indicatorOrder = new Map(indicators.map((id, i)=>[
+                    id,
+                    i
+                ]));
+            const sortedCombineItems = [
+                ...safeCombineItems
+            ].sort((a, b)=>{
+                const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
+                const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
+                if (orderA !== orderB) return orderA - orderB;
+                const typeRank = (item)=>{
+                    if (item.isChange) return 2;
+                    if ('compareline' === item.tipType) return 1;
+                    return 0;
+                };
+                return typeRank(a) - typeRank(b);
+            });
+            return tooltipRender(safeTitle, [
+                ...safeItems,
+                ...sortedCombineItems
+            ]) ?? null;
+        }
+    });
     view.legend(false);
     view.interaction('poptip', {
         offsetY: -20,

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

@@ -17,7 +17,7 @@ function renderG2LineChart(container, options) {
         insetBottom: 0
     });
     const view = getMainView(chart);
-    view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', isLegend ? 0 : 16);
+    view.attr('marginLeft', 0).attr('marginRight', 30).attr('marginTop', 10).attr('marginBottom', isLegend ? 0 : 16).animate(false);
     view.data(data);
     const domainMin = minY ?? 0;
     applyScaleYLinear(view, {
@@ -79,16 +79,9 @@ function renderG2LineChart(container, options) {
                 })
         ]
     });
-    const tooltipBounding = {
-        x: 0,
-        y: 0,
-        width: container.clientWidth || container.offsetWidth,
-        height: container.clientHeight || container.offsetHeight
-    };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         marker: false,
-        bounding: tooltipBounding,
         render: (_event, payload)=>{
             const { title, items } = payload;
             if (indicators.length) {

package/package.json

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