@easyv/charts 1.2.14 → 1.3.2

package/src/components/CartesianChart.js

@@ -24,7 +24,7 @@ import {
   Brush,
   Label,
   Mapping,
-  BaseLine
+  BaseLine,
 } from '.';
 
 const Chart = memo(
@@ -41,11 +41,12 @@ const Chart = memo(
         legend,
       },
       series,
+      bandLength,
       tooltip,
       baseLine: {
-        orientation:baseLineOri='',
+        orientation: baseLineOri = '',
         config: baseLineConfig = {},
-        data: baseLineData = []
+        data: baseLineData = [],
       },
       tooltip: {
         config: tooltipConfig = {},
@@ -55,7 +56,7 @@ const Chart = memo(
     },
     style,
     data,
-    filterData
+    filterData,
   }) => {
     const context = useContext(chartContext);
     const {
@@ -101,10 +102,10 @@ const Chart = memo(
     const indicatorAttr = isVertical
       ? { width: chartWidth, height: indicatorWidth, y: position }
       : {
-        height: chartHeight,
-        width: indicatorWidth,
-        x: position,
-      };
+          height: chartHeight,
+          width: indicatorWidth,
+          x: position,
+        };
 
     const onInteraction = useCallback(
       (e) => {
@@ -134,6 +135,7 @@ const Chart = memo(
               length={isVertical ? chartWidth : chartHeight}
               axis={axisX}
               config={background}
+              bandLength={bandLength}
             />
           )}
           {[...axes.values()].map((item, index) => {
@@ -152,6 +154,7 @@ const Chart = memo(
                 <Component
                   key={index}
                   {...config}
+                  bandLength={bandLength}
                   xAxis={axisX}
                   yAxis={yAxis}
                   triggerClick={onInteraction}
@@ -166,6 +169,7 @@ const Chart = memo(
                 <Label
                   key={index}
                   {...config}
+                  bandLength={bandLength}
                   xAxis={axisX}
                   yAxis={yAxis}
                   triggerClick={onInteraction}
@@ -173,20 +177,27 @@ const Chart = memo(
               )
             );
           })}
-          {baseLineData && baseLineData.length > 0 && baseLineData.map((item, index) => {
-            const { line: { yOrZ } } = baseLineConfig[index];
-            const yAxis = axes.get(yOrZ);
-            return (
-              yAxis && (<BaseLine
-                height={height}
-                width={width}
-                key={index}
-                config={baseLineConfig[index]}
-                baseLineOri={baseLineOri}
-                yAxis={yAxis}
-                data={item} />)
-            )
-          })}
+          {baseLineData &&
+            baseLineData.length > 0 &&
+            baseLineData.map((item, index) => {
+              const {
+                line: { yOrZ },
+              } = baseLineConfig[index];
+              const yAxis = axes.get(yOrZ);
+              return (
+                yAxis && (
+                  <BaseLine
+                    height={height}
+                    width={width}
+                    key={index}
+                    config={baseLineConfig[index]}
+                    baseLineOri={baseLineOri}
+                    yAxis={yAxis}
+                    data={item}
+                  />
+                )
+              );
+            })}
         </ChartContainer>
         <Legend {...legend} filterData={filterData} series={series} />
         {showTooltip && (

package/src/components/Chart.js

@@ -65,7 +65,7 @@ const Chart = memo(
             });
         }
       },
-      [onRelative, emitEvent, JSON.stringify(interaction)]
+      [ JSON.stringify(interaction)]
     );
 
     const onEmit = useCallback(

package/src/components/Label.js

@@ -2,11 +2,7 @@
  * 轴类图表标签
  */
 import { memo, useContext } from 'react';
-import {
-  getTranslate2d,
-  getBandwidth,
-  getBandSeriesStepAndWidth,
-} from '../utils';
+import { getTranslate2d, getSeriesInfo } from '../utils';
 import { chartContext } from '../context';
 
 export default memo(
@@ -24,68 +20,78 @@ export default memo(
     yAxis: { scaler: yScaler },
     triggerClick,
   }) => {
-    const lineType = config.hasOwnProperty('line') //堆叠处理
+    const lineType = config.hasOwnProperty('line'); //  堆叠处理
     const showIcon = icon && icon.show;
     const showLabel = label && label.show;
 
     if (!(data.length && (showIcon || showLabel))) return null;
     const { width, height } = useContext(chartContext);
-    const bandwidth = getBandwidth(step, paddingOuter);
-    const { seriesStep, seriesWidth } = getBandSeriesStepAndWidth({
-      width: bandwidth,
-      paddingInner,
+    const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
+      step,
       bandLength,
+      paddingInner,
+      paddingOuter,
     });
 
-    const offset =
-      (seriesWidth + paddingInner * seriesStep) * bandLength -
-      paddingInner * seriesStep;
     const isVertical = direction === 'vertical';
     const _position = label.position;
     return (
       <g className='__easyv-label'>
         {data.map(
-          ({ index, bound: [start, end], data, data: { x, y, showY, s } }, i) => {
+          (
+            { index, bound: [start, end], data, data: { x, y, showY, s } },
+            i
+          ) => {
             const y1 = yScaler(isVertical ? end : start);
-            //处理z型折线图和堆叠柱图的逻辑冲突
-            const y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end);
+
+            //  处理z型折线图和堆叠柱图的逻辑冲突
+            const y2 = lineType
+              ? start
+                ? yScaler(isVertical ? start : end - start)
+                : yScaler(isVertical ? start : end)
+              : yScaler(isVertical ? start : end);
+
             // const y2 =  yScaler(isVertical ? start : end);
-            const positionX = xScaler(x) + seriesStep * index - offset / 2;
+            const positionX =
+              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+
             if (isNaN(positionX)) return null;
             const position = positionX + seriesWidth / 2;
             const labelPosition = isVertical
               ? getVerticalLabel({
-                position: _position,
-                y,
-                y1,
-                y2,
-                width,
-              })
+                  position: _position,
+                  y,
+                  y1,
+                  y2,
+                  width,
+                })
               : getHorizontalLabel({
-                position: _position,
-                y,
-                y1,
-                y2,
-                height,
-              });
+                  position: _position,
+                  y,
+                  y1,
+                  y2,
+                  height,
+                });
             const attr = isVertical
               ? {
-                ...labelPosition,
-                y: position,
-                dominantBaseline: 'middle',
-              }
+                  ...labelPosition,
+                  y: position,
+                  dominantBaseline: 'middle',
+                }
               : {
-                ...labelPosition,
-                x: position,
-                textAnchor: 'middle',
-              };
+                  ...labelPosition,
+                  x: position,
+                  textAnchor: 'middle',
+                };
             return (
               <g
                 key={i}
                 onClick={triggerClick}
                 data-data={JSON.stringify(data)}
               >
-                {showIcon && <Icon cx={attr.x} cy={attr.y} config={icon} />}
+                {showIcon && !isNaN(attr.y) && (
+                  <Icon cx={attr.x} cy={attr.y} config={icon} />
+                )}
                 {showLabel && <Label value={showY} config={label} {...attr} />}
               </g>
             );
@@ -123,7 +129,19 @@ const Label = ({
     </text>
   );
 };
-const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius, image, size: { width, height } } }) =>
+const Icon = ({
+  cx,
+  cy,
+  config: {
+    mode,
+    inner,
+    outer,
+    color,
+    radius,
+    image,
+    size: { width, height },
+  },
+}) =>
   mode == 'single' ? (
     <Circle cx={cx} cy={cy} color={color} radius={radius} />
   ) : mode == 'double' ? (
@@ -138,7 +156,8 @@ const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius, image, size
         height={height}
         x={cx - width / 2}
         y={cy - height / 2}
-        xlinkHref={window.appConfig.ASSETS_URL + image} />
+        xlinkHref={window.appConfig.ASSETS_URL + image}
+      />
     </>
   );
 

package/src/components/StackData.js

@@ -5,16 +5,12 @@ import { memo } from 'react';
 import { useStackData } from '../hooks';
 export default (Component) => {
   return memo(({ config: { series, ...config }, data, ...props }) => {
-    const _series = useStackData({
+    const _config = useStackData({
       series,
       data,
     });
     return (
-      <Component
-        {...props}
-        config={{ ...config, series: _series }}
-        data={data}
-      />
+      <Component {...props} config={{ ...config, ..._config }} data={data} />
     );
   });
 };