@easyv/charts 1.3.9 → 1.3.11

package/src/components/Background.tsx

@@ -1,62 +1,62 @@
-/**
- * 轴类图背景
- */
-import React from 'react';
-import { getSeriesInfo } from '../utils';
-
-export default ({
-  axis: { ticks, scaler, step, direction },
-  bandLength,
-  config: {
-    background,
-    seriesIntervalWidth: paddingInner,
-    paddingInner: paddingOuter,
-  },
-  length,
-}: {
-  axis: {
-    ticks: Array<string>;
-    scaler: Function;
-    step: number;
-    direction: string;
-  };
-  bandLength: number;
-  config: {
-    background: string;
-    seriesIntervalWidth: number;
-    paddingInner: number;
-  };
-  length: number;
-}) => {
-  const isVertical: boolean = direction === 'vertical';
-
-  const { width: bandwidth } = getSeriesInfo({
-    step,
-    bandLength,
-    paddingInner,
-    paddingOuter,
-  });
-
-  const size = isVertical
-    ? {
-        width: length,
-        height: bandwidth,
-      }
-    : {
-        width: bandwidth,
-        height: length,
-      };
-
-  return ticks.map((tick, index: number) => {
-    return (
-      <rect
-        key={index}
-        {...size}
-        x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
-        y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
-        fill={background}
-        stroke='none'
-      />
-    );
-  });
-};
+/**
+ * 轴类图背景
+ */
+import React from 'react';
+import { getSeriesInfo } from '../utils';
+
+export default ({
+  axis: { ticks, scaler, step, direction },
+  bandLength,
+  config: {
+    background,
+    seriesIntervalWidth: paddingInner,
+    paddingInner: paddingOuter,
+  },
+  length,
+}: {
+  axis: {
+    ticks: Array<string>;
+    scaler: Function;
+    step: number;
+    direction: string;
+  };
+  bandLength: number;
+  config: {
+    background: string;
+    seriesIntervalWidth: number;
+    paddingInner: number;
+  };
+  length: number;
+}) => {
+  const isVertical: boolean = direction === 'vertical';
+
+  const { width: bandwidth } = getSeriesInfo({
+    step,
+    bandLength,
+    paddingInner,
+    paddingOuter,
+  });
+
+  const size = isVertical
+    ? {
+        width: length,
+        height: bandwidth,
+      }
+    : {
+        width: bandwidth,
+        height: length,
+      };
+
+  return ticks.map((tick, index: number) => {
+    return (
+      <rect
+        key={index}
+        {...size}
+        x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
+        y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
+        fill={background}
+        stroke='none'
+      />
+    );
+  });
+};

package/src/components/Band.tsx

@@ -1,169 +1,191 @@
-/**
- * （柱状/条形）图柱子
- */
-import React, { memo } from 'react';
-import { min, max } from 'd3v7';
-import { getBandBackground, getSeriesInfo } from '../utils';
-
-const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
-  switch (extent) {
-    case 'min':
-      const minData = min(data, (d: DataWithBoundType) => d.data.y);
-      return data.map((item) => ({
-        ...item,
-        flag: minData == item.data.y ? 'min' : '',
-      }));
-    case 'max':
-      const maxData = max(data, (d: DataWithBoundType) => d.data.y);
-      return data.map((item) => ({
-        ...item,
-        flag: maxData == item.data.y ? 'max' : '',
-      }));
-    default:
-      return data;
-  }
-};
-
-const getAttr = ({
-  isVertical,
-  seriesWidth,
-  length,
-  x,
-  y,
-}: {
-  isVertical: boolean;
-  seriesWidth: number;
-  length: number;
-  x: number;
-  y: number;
-}) => {
-  if (isVertical) return { width: length, height: seriesWidth, x: y, y: x };
-  return {
-    x,
-    y,
-    width: seriesWidth,
-    height: length,
-  };
-};
-
-const getBorderRadius = ({
-  isVertical,
-  positive,
-  seriesWidth,
-}: {
-  isVertical: boolean;
-  positive: boolean;
-  seriesWidth: number;
-}) => {
-  return isVertical
-    ? positive
-      ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0'
-      : seriesWidth + 'px 0 0 ' + seriesWidth + 'px'
-    : positive
-    ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0'
-    : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
-};
-
-export default memo(
-  ({
-    triggerClick,
-    config: {
-      pattern = {},
-      seriesIntervalWidth: paddingInner = 0,
-      paddingInner: paddingOuter = 0,
-      style,
-      fillType,
-      url,
-      size,
-      fill,
-      opacity,
-      highlight: { show: showHighlight, extent, fill: highlightFill },
-    },
-    bandLength = 0,
-    data,
-    xAxis: { scaler: xScaler, step, direction },
-    yAxis: { scaler: yScaler },
-  }: any) => {
-    if (!data.length) return null;
-
-    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
-      step,
-      bandLength,
-      paddingInner,
-      paddingOuter,
-    });
-
-    const _data = showHighlight ? getHighlightData(data, extent) : data;
-
-    const isVertical = direction === 'vertical';
-    return (
-      <g className='__easyv-band'>
-        {_data.map(
-          (
-            {
-              flag,
-              index,
-              bound: [start, end],
-              data,
-              data: { x, y, s },
-            }: DataWithBoundType,
-            i: number
-          ) => {
-            const y1 = yScaler(isVertical ? end : start);
-            const y2 = yScaler(isVertical ? start : end);
-
-            const positionX =
-              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
-
-            if (isNaN(positionX)) return null;
-            const positionY = y < 0 ? y1 : y2;
-            const attr = getAttr({
-              isVertical,
-              x: positionX,
-              y: positionY,
-              length: Math.abs(y1 - y2),
-              seriesWidth,
-            });
-
-            return (
-              <foreignObject
-                key={i}
-                {...attr}
-                onClick={triggerClick}
-                data-data={JSON.stringify(data)}
-              >
-                <div
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    /** Safari Bug **/
-                    position: 'fixed',
-                    opacity: fillType == 'pattern' ? opacity : 1,
-                    background:
-                      fillType == 'pattern'
-                        ? `50% 50% / ${size.width}px ${size.height}px repeat ` +
-                          'url(' +
-                          url +
-                          ')'
-                        : getBandBackground(
-                            pattern,
-                            extent === flag ? highlightFill : fill
-                          ),
-                    borderRadius:
-                      style == 'square'
-                        ? '0 0 0 0'
-                        : getBorderRadius({
-                            isVertical,
-                            positive: y > 0,
-                            seriesWidth,
-                          }),
-                  }}
-                />
-              </foreignObject>
-            );
-          }
-        )}
-      </g>
-    );
-  }
-);
+/**
+ * （柱状/条形）图柱子
+ */
+import React, { memo } from 'react';
+import { min, max } from 'd3v7';
+import { getBandBackground, getSeriesInfo } from '../utils';
+
+const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
+  switch (extent) {
+    case 'min':
+      const minData = min(data, (d: DataWithBoundType) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: minData == item.data.y ? 'min' : '',
+      }));
+    case 'max':
+      const maxData = max(data, (d: DataWithBoundType) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: maxData == item.data.y ? 'max' : '',
+      }));
+    default:
+      return data;
+  }
+};
+
+const getAttr = ({
+  isVertical,
+  seriesWidth,
+  length,
+  x,
+  y,
+}: {
+  isVertical: boolean;
+  seriesWidth: number;
+  length: number;
+  x: number;
+  y: number;
+}) => {
+  if (isVertical) return { width: length, height: seriesWidth, x: y, y: x };
+  return {
+    x,
+    y,
+    width: seriesWidth,
+    height: length,
+  };
+};
+
+const getBorderRadius = ({
+  isVertical,
+  positive,
+  seriesWidth,
+}: {
+  isVertical: boolean;
+  positive: boolean;
+  seriesWidth: number;
+}) => {
+  return isVertical
+    ? positive
+      ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0'
+      : seriesWidth + 'px 0 0 ' + seriesWidth + 'px'
+    : positive
+    ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0'
+    : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
+};
+
+export default memo(
+  ({
+    triggerClick,
+    config: {
+      pattern = {},
+      seriesIntervalWidth: paddingInner = 0,
+      paddingInner: paddingOuter = 0,
+      style,
+      fillType,
+      url,
+      size,
+      fill,
+      opacity,
+      highlight: { show: showHighlight, extent, fill: highlightFill },
+      headDecorate
+    },
+    bandLength = 0,
+    data,
+    xAxis: { scaler: xScaler, step, direction },
+    yAxis: { scaler: yScaler },
+  }: any) => {
+    if (!data.length) return null;
+
+    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
+      step,
+      bandLength,
+      paddingInner,
+      paddingOuter,
+    });
+
+    const _data = showHighlight ? getHighlightData(data, extent) : data;
+
+    const isVertical = direction === 'vertical';
+    return (
+      <g className='__easyv-band'>
+        {_data.map(
+          (
+            {
+              flag,
+              index,
+              bound: [start, end],
+              data,
+              data: { x, y, s },
+            }: DataWithBoundType,
+            i: number
+          ) => {
+            const y1 = yScaler(isVertical ? end : start);
+            const y2 = yScaler(isVertical ? start : end);
+
+            const positionX =
+              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+
+            let showHead , headUrl, headWidth, headHeight, headTranslate;
+            if(headDecorate){
+              showHead = headDecorate.show,
+              headUrl = headDecorate.url,
+              headWidth = headDecorate.size.width,
+              headHeight = headDecorate.size.height,
+              headTranslate = headDecorate.headTranslate;
+            }
+
+            if (isNaN(positionX)) return null;
+            const positionY = y < 0 ? y1 : y2;
+            const attr = getAttr({
+              isVertical,
+              x: positionX,
+              y: positionY,
+              length: Math.abs(y1 - y2),
+              seriesWidth,
+            });
+            return (
+              <foreignObject
+                key={i}
+                style={{
+                  overflow:"visible",
+                  position:"relative"
+                }}
+                {...attr}
+                onClick={triggerClick}
+                data-data={JSON.stringify(data)}
+              >
+                {headUrl && showHead && <div style={{
+                  position:"absolute",
+                  background:`url(${window.appConfig.ASSETS_URL+headUrl}) 0 0/100% 100%`,
+                  width:headWidth,
+                  height:headHeight,
+                  left:"50%",
+                  zIndex:1,
+                  transform:`translate(calc(-50% + ${headTranslate.x}px), ${headTranslate.y}px)`
+                }}></div>}
+                <div
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    /** Safari Bug **/
+                    position: 'fixed',
+                    opacity: fillType == 'pattern' ? opacity : 1,
+                    background:
+                      fillType == 'pattern'
+                        ? `50% 50% / ${size.width}px ${size.height}px repeat ` +
+                          'url(' +
+                          url +
+                          ')'
+                        : getBandBackground(
+                            pattern,
+                            extent === flag ? highlightFill : fill
+                          ),
+                    borderRadius:
+                      style == 'square'
+                        ? '0 0 0 0'
+                        : getBorderRadius({
+                            isVertical,
+                            positive: y > 0,
+                            seriesWidth,
+                          }),
+                  }}
+                />
+              </foreignObject>
+            );
+          }
+        )}
+      </g>
+    );
+  }
+);

package/src/components/BaseLine.js

@@ -1,82 +1,82 @@
-/**
- * 参考线
- */
-import React, { memo } from 'react';
-import { getFontStyle } from '../utils';
-
-export default memo(
-  ({
-    width,
-    height,
-    baseLineOri: orientation,
-    config: {
-      dataStyle: {
-        data: {
-          show: dataShow,
-          dataStyle,
-          translate: dataTranslate
-        },
-        label: {
-          label,
-          show: labelShow,
-          textStyle,
-          translate: labelTranslate,
-        }
-      },
-      line: {
-        color,
-        lineType,
-        lineWidth,
-        margin: {
-          marginLeft,
-          marginRight
-        },
-        strokeDasharray,
-      },
-    },
-    yAxis: { scaler: yScaler },
-    data
-  }) => {
-    if (!data.value) return null;
-    const x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
-      x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
-      y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
-      y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
-    return (
-      <>
-        <g className='__easyv-baseLine' >
-          <line
-            x1={x1}
-            x2={x2}
-            y1={y1}
-            y2={y2}
-            stroke={color}
-            fill='none'
-            strokeDasharray={lineType === 'dash' ? strokeDasharray : null}
-            strokeWidth={lineWidth}
-          />
-        </g>
-        {labelShow &&
-          <foreignObject
-            width={100}
-            height={100}
-            x={x2 + labelTranslate.x}
-            y={y2 - textStyle.fontSize + labelTranslate.y}>
-            <div>
-              <span style={{ ...getFontStyle(textStyle) }}>{label}</span>
-            </div>
-          </foreignObject>}
-        {dataShow &&
-          <foreignObject
-            width={100}
-            height={100}
-            x={x2 + dataTranslate.x}
-            y={y2 + dataTranslate.y}>
-            <div>
-              <span style={{ ...getFontStyle(dataStyle) }}>{data.value}</span>
-            </div>
-          </foreignObject>}
-      </>
-    );
-  }
-);
+/**
+ * 参考线
+ */
+import React, { memo } from 'react';
+import { getFontStyle } from '../utils';
+
+export default memo(
+  ({
+    width,
+    height,
+    baseLineOri: orientation,
+    config: {
+      dataStyle: {
+        data: {
+          show: dataShow,
+          dataStyle,
+          translate: dataTranslate
+        },
+        label: {
+          label,
+          show: labelShow,
+          textStyle,
+          translate: labelTranslate,
+        }
+      },
+      line: {
+        color,
+        lineType,
+        lineWidth,
+        margin: {
+          marginLeft,
+          marginRight
+        },
+        strokeDasharray,
+      },
+    },
+    yAxis: { scaler: yScaler },
+    data
+  }) => {
+    if (!data.value) return null;
+    const x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
+      x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
+      y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
+      y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+    return (
+      <>
+        <g className='__easyv-baseLine' >
+          <line
+            x1={x1}
+            x2={x2}
+            y1={y1}
+            y2={y2}
+            stroke={color}
+            fill='none'
+            strokeDasharray={lineType === 'dash' ? strokeDasharray : null}
+            strokeWidth={lineWidth}
+          />
+        </g>
+        {labelShow &&
+          <foreignObject
+            width={100}
+            height={100}
+            x={x2 + labelTranslate.x}
+            y={y2 - textStyle.fontSize + labelTranslate.y}>
+            <div>
+              <span style={{ ...getFontStyle(textStyle) }}>{label}</span>
+            </div>
+          </foreignObject>}
+        {dataShow &&
+          <foreignObject
+            width={100}
+            height={100}
+            x={x2 + dataTranslate.x}
+            y={y2 + dataTranslate.y}>
+            <div>
+              <span style={{ ...getFontStyle(dataStyle) }}>{data.value}</span>
+            </div>
+          </foreignObject>}
+      </>
+    );
+  }
+);