@easyv/charts 1.2.11 → 1.3.0

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

@@ -1,99 +1,99 @@
-/**
- * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
- */
-import React, { memo, useMemo, createRef, useCallback } from 'react';
-import { chartContext } from '../context';
-import { PieChart, CartesianChart } from '.';
-
-const getCallbackData = (callbacks, data) => {
-  let callbackData;
-  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbackData = {};
-    callbacks.forEach(({ origin, target }) => {
-      callbackData[target] = data[origin];
-    });
-  }
-  return callbackData;
-};
-
-const Chart = memo(
-  ({
-    id,
-    type,
-    config,
-    config: {
-      chart: {
-        dimension: {
-          chartDimension: { height, width },
-        },
-        margin: { marginRight, marginLeft, marginBottom, marginTop },
-      },
-      interaction,
-    },
-    data,
-    onRelative,
-    emit,
-    emitEvent,
-    ...props
-  }) => {
-    const svg = createRef();
-    const chartWidth = width - marginLeft - marginRight;
-    const chartHeight = height - marginTop - marginBottom;
-
-    const triggerOnRelative = useCallback(
-      (data) => {
-        if (!interaction) return;
-        const { callbacks, remoteControls } = interaction;
-        const callbackData = getCallbackData(callbacks, data);
-        if (callbackData) {
-          onRelative && onRelative(id, callbackData);
-          remoteControls &&
-            emitEvent &&
-            remoteControls.forEach((o) => {
-              const control = JSON.parse(o.control);
-              if (
-                control.screen &&
-                control.type &&
-                control.type === 'callback'
-              ) {
-                emitEvent({
-                  screen: control.screen,
-                  type: 'callback',
-                  callbackData,
-                });
-              }
-            });
-        }
-      },
-      [onRelative, emitEvent, JSON.stringify(interaction)]
-    );
-
-    const onEmit = useCallback(
-      (type = 'click', data) => emit && emit(type, data),
-      [emit]
-    );
-
-    const context = useMemo(
-      () => ({
-        id,
-        width: chartWidth,
-        height: chartHeight,
-        triggerOnRelative,
-        svg,
-        onEmit,
-      }),
-      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
-    );
-    return (
-      <chartContext.Provider value={context}>
-        {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} {...props} />
-        ) : (
-          <CartesianChart id={id} config={config} data={data} {...props} />
-        )}
-      </chartContext.Provider>
-    );
-  }
-);
-
-export default Chart;
+/**
+ * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
+ */
+import React, { memo, useMemo, createRef, useCallback } from 'react';
+import { chartContext } from '../context';
+import { PieChart, CartesianChart } from '.';
+
+const getCallbackData = (callbacks, data) => {
+  let callbackData;
+  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
+    callbackData = {};
+    callbacks.forEach(({ origin, target }) => {
+      callbackData[target] = data[origin];
+    });
+  }
+  return callbackData;
+};
+
+const Chart = memo(
+  ({
+    id,
+    type,
+    config,
+    config: {
+      chart: {
+        dimension: {
+          chartDimension: { height, width },
+        },
+        margin: { marginRight, marginLeft, marginBottom, marginTop },
+      },
+      interaction,
+    },
+    data,
+    onRelative,
+    emit,
+    emitEvent,
+    ...props
+  }) => {
+    const svg = createRef();
+    const chartWidth = width - marginLeft - marginRight;
+    const chartHeight = height - marginTop - marginBottom;
+
+    const triggerOnRelative = useCallback(
+      (data) => {
+        if (!interaction) return;
+        const { callbacks, remoteControls } = interaction;
+        const callbackData = getCallbackData(callbacks, data);
+        if (callbackData) {
+          onRelative && onRelative(id, callbackData);
+          remoteControls &&
+            emitEvent &&
+            remoteControls.forEach((o) => {
+              const control = JSON.parse(o.control);
+              if (
+                control.screen &&
+                control.type &&
+                control.type === 'callback'
+              ) {
+                emitEvent({
+                  screen: control.screen,
+                  type: 'callback',
+                  callbackData,
+                });
+              }
+            });
+        }
+      },
+      [onRelative, emitEvent, JSON.stringify(interaction)]
+    );
+
+    const onEmit = useCallback(
+      (type = 'click', data) => emit && emit(type, data),
+      [emit]
+    );
+
+    const context = useMemo(
+      () => ({
+        id,
+        width: chartWidth,
+        height: chartHeight,
+        triggerOnRelative,
+        svg,
+        onEmit,
+      }),
+      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
+    );
+    return (
+      <chartContext.Provider value={context}>
+        {type == 'pie' ? (
+          <PieChart id={id} config={config} data={data} {...props} />
+        ) : (
+          <CartesianChart id={id} config={config} data={data} {...props} />
+        )}
+      </chartContext.Provider>
+    );
+  }
+);
+
+export default Chart;

package/src/components/ChartContainer.tsx

@@ -1,63 +1,63 @@
-/**
- * svg外框
- */
-import React, {
-  memo,
-  forwardRef,
-  ReactChild,
-  ReactEventHandler,
-  LegacyRef,
-} from 'react';
-const event = () => {};
-
-type Props = {
-  width: number;
-  height: number;
-  marginLeft: number;
-  marginTop: number;
-  style: Object;
-  children: ReactChild;
-  onMouseEnter: ReactEventHandler;
-  onMouseLeave: ReactEventHandler;
-  onClick: ReactEventHandler;
-  onMouseMove: ReactEventHandler;
-  onMouseOut: ReactEventHandler;
-};
-
-export default memo(
-  forwardRef(
-    (
-      {
-        width,
-        height,
-        marginLeft,
-        marginTop,
-        style,
-        children,
-        onMouseEnter = event,
-        onMouseLeave = event,
-        onClick = event,
-        onMouseMove = event,
-        onMouseOut = event,
-      }: Props,
-      ref: LegacyRef<SVGSVGElement>
-    ) => (
-      <svg
-        className='__easyv-svg'
-        width={width}
-        height={height}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onMouseOut={onMouseOut}
-        onClick={onClick}
-        onMouseMove={onMouseMove}
-        ref={ref}
-        style={{ position: 'absolute', width, height, ...style }}
-      >
-        <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
-          {children}
-        </g>
-      </svg>
-    )
-  )
-);
+/**
+ * svg外框
+ */
+import React, {
+  memo,
+  forwardRef,
+  ReactChild,
+  ReactEventHandler,
+  LegacyRef,
+} from 'react';
+const event = () => {};
+
+type Props = {
+  width: number;
+  height: number;
+  marginLeft: number;
+  marginTop: number;
+  style: Object;
+  children: ReactChild;
+  onMouseEnter: ReactEventHandler;
+  onMouseLeave: ReactEventHandler;
+  onClick: ReactEventHandler;
+  onMouseMove: ReactEventHandler;
+  onMouseOut: ReactEventHandler;
+};
+
+export default memo(
+  forwardRef(
+    (
+      {
+        width,
+        height,
+        marginLeft,
+        marginTop,
+        style,
+        children,
+        onMouseEnter = event,
+        onMouseLeave = event,
+        onClick = event,
+        onMouseMove = event,
+        onMouseOut = event,
+      }: Props,
+      ref: LegacyRef<SVGSVGElement>
+    ) => (
+      <svg
+        className='__easyv-svg'
+        width={width}
+        height={height}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onMouseOut={onMouseOut}
+        onClick={onClick}
+        onMouseMove={onMouseMove}
+        ref={ref}
+        style={{ position: 'absolute', width, height, ...style }}
+      >
+        <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
+          {children}
+        </g>
+      </svg>
+    )
+  )
+);