@publishfx/publish-chart 2.1.23 → 2.1.25

package/dist/adapters/DataAdapter.js

@@ -159,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

@@ -183,7 +183,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                         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/g2Helpers.d.ts

@@ -275,9 +275,11 @@ export declare function applyLegendColor(view: any, options?: ApplyLegendColorOp
 export interface AuxiliaryLineItem {
     name: string;
     value: number;
-    axis?: 'left' | 'right';
+    axis?: 'left' | 'right' | '';
 }
 export interface ApplyAuxiliaryLineYOptions {
+    maxLeft?: number;
+    maxRight?: number;
     stroke?: string;
     strokeOpacity?: number;
     labelMaxLength?: number;

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

@@ -146,22 +146,27 @@ function applyLegendColor(view, options = {}) {
 }
 function applyAuxiliaryLineY(view, lines, options = {}) {
     if (!lines?.length) return;
-    const { stroke = '#F4664A', strokeOpacity = 1, labelMaxLength = 5 } = options;
+    const { labelMaxLength = 5, stroke = 'rgb(234, 54, 106)', maxLeft, maxRight } = 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', stroke).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({
             opacity: 1,
-            dx: 0,
+            dx: -20,
             dy: 0,
             text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
             position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
-            render: (text)=>`<div style="background-color: transparent; padding: 5px; border-radius: 5px;font-size: 12px;position: absolute;left: ${auxLine?.axis === 'right' ? '-105px' : '0px'}; top: ${auxLine?.name?.length > 5 ? '-38px' : '-24px'} ; width: 100px; line-height: 14px; color: ${stroke}; text-shadow: 0 0 10px red;
-          font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`
+            render: (text)=>{
+                let top = auxLine?.name?.length > 5 ? -38 : -24;
+                if ((auxLine?.axis === 'left' || auxLine?.axis === '') && maxLeft && auxLine.value > 0.92 * maxLeft || auxLine?.axis === 'right' && maxRight && auxLine.value > 0.92 * maxRight) top = 0;
+                top += 'px';
+                return `<div style="background-color: rgba(255, 0, 102, 0.15); padding: 5px; border-radius: 5px;font-size: 12px;position: absolute;left: ${auxLine?.axis === 'right' ? '-75px' : '0px'}; top: ${top} ; display:inline-block; min-width: 65px; line-height: 14px; color: #FF0066;
+          font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`;
+            }
         });
     });
 }

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: [
             {
@@ -131,7 +131,8 @@ function renderG2BarChart(container, options) {
         }
     });
     applyAuxiliaryLineY(view, auxiliaryLineData, {
-        labelMaxLength: 5
+        labelMaxLength: 5,
+        maxLeft: maxY
     });
     const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) interval.label({

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', 26).attr('marginBottom', 0).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[BAR_Y_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,
@@ -298,7 +298,10 @@ function renderG2CombineChart(container, options) {
         tipFontSize: '12px',
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
-    applyAuxiliaryLineY(view, auxiliaryLineData);
+    applyAuxiliaryLineY(view, auxiliaryLineData, {
+        maxLeft,
+        maxRight
+    });
     const nodeResult = applyNodeData(view, nodeData, x, 'groupValue');
     if (formatLabel) {
         if (isDataTag) {

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, {
@@ -117,7 +117,9 @@ function renderG2LineChart(container, options) {
         tipFontSize: '12px',
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
-    applyAuxiliaryLineY(view, auxiliaryLineData);
+    applyAuxiliaryLineY(view, auxiliaryLineData, {
+        maxLeft: maxY
+    });
     const nodeResult = applyNodeData(view, nodeData, x, y);
     if (isDataTag && formatLabel) {
         line.label({

package/package.json

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