@easyv/charts 1.4.29 → 1.4.31

package/src/components/index.js

@@ -1,59 +1,59 @@
-import Mapping from './Mapping';
-import AnimateData from './AnimateData';
-import FilterData from './FilterData';
-import ExtentData from './ExtentData';
-import StackData from './StackData';
-import ChartContainer from './ChartContainer';
-import Legend from './Legend';
-import Axis from './Axis';
-import Tooltip from './Tooltip';
-import Indicator from './Indicator';
-import Band from './Band';
-import Lighter from './Lighter';
-import Line from './Line';
-import Background from './Background';
-import LinearGradient from './LinearGradient';
-import Brush from './Brush';
-import Label from './Label';
-import StereoBar from './StereoBar';
-import Carousel from './Carousel';
-import Chart from './Chart';
-import ConicalGradient from './ConicalGradient';
-import CartesianChart from './CartesianChart';
-import PieChart from './PieChart';
-import TextOverflow from './TextOverflow';
-import BaseLine from './BaseLine';
-import Control from './Control';
-import { PieTooltip } from './PieTooltip';
-
-const Area = Line;
-export {
-  Control,
-  Mapping,
-  AnimateData,
-  FilterData,
-  StackData,
-  ExtentData,
-  ChartContainer,
-  Legend,
-  Tooltip,
-  Axis,
-  Indicator,
-  Band,
-  Lighter,
-  Line,
-  Area,
-  Background,
-  LinearGradient,
-  Brush,
-  Label,
-  StereoBar,
-  Carousel,
-  CartesianChart,
-  PieChart,
-  TextOverflow,
-  Chart,
-  ConicalGradient,
-  BaseLine,
-  PieTooltip
-};
+import Mapping from './Mapping';
+import AnimateData from './AnimateData';
+import FilterData from './FilterData';
+import ExtentData from './ExtentData';
+import StackData from './StackData';
+import ChartContainer from './ChartContainer';
+import Legend from './Legend';
+import Axis from './Axis';
+import Tooltip from './Tooltip';
+import Indicator from './Indicator';
+import Band from './Band';
+import Lighter from './Lighter';
+import Line from './Line';
+import Background from './Background';
+import LinearGradient from './LinearGradient';
+import Brush from './Brush';
+import Label from './Label';
+import StereoBar from './StereoBar';
+import Carousel from './Carousel';
+import Chart from './Chart';
+import ConicalGradient from './ConicalGradient';
+import CartesianChart from './CartesianChart';
+import PieChart from './PieChart';
+import TextOverflow from './TextOverflow';
+import BaseLine from './BaseLine';
+import Control from './Control';
+import { PieTooltip } from './PieTooltip';
+
+const Area = Line;
+export {
+  Control,
+  Mapping,
+  AnimateData,
+  FilterData,
+  StackData,
+  ExtentData,
+  ChartContainer,
+  Legend,
+  Tooltip,
+  Axis,
+  Indicator,
+  Band,
+  Lighter,
+  Line,
+  Area,
+  Background,
+  LinearGradient,
+  Brush,
+  Label,
+  StereoBar,
+  Carousel,
+  CartesianChart,
+  PieChart,
+  TextOverflow,
+  Chart,
+  ConicalGradient,
+  BaseLine,
+  PieTooltip
+};

package/src/context/index.js

@@ -1,2 +1,2 @@
-import { createContext } from 'react';
-export const chartContext = createContext();
+import { createContext } from 'react';
+export const chartContext = createContext();

package/src/css/index.module.css

@@ -1,43 +1,43 @@
-.rotateClockwise {
-  animation-name: rotateClockwise;
-}
-
-@keyframes rotateClockwise {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.rotateCounterClockwise {
-  animation-name: rotateCounterClockwise;
-}
-
-@keyframes rotateCounterClockwise {
-  0% {
-    transform: rotate(360deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-.showAllStyle {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 40% 30% 30%;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.notShowAllStyle {
-  display: flex;
-  /* width: 100%; */
-  /* flex:1; */
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
+.rotateClockwise {
+  animation-name: rotateClockwise;
+}
+
+@keyframes rotateClockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.rotateCounterClockwise {
+  animation-name: rotateCounterClockwise;
+}
+
+@keyframes rotateCounterClockwise {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.showAllStyle {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 40% 30% 30%;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.notShowAllStyle {
+  display: flex;
+  /* width: 100%; */
+  /* flex:1; */
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
 }

package/src/css/piechart.module.css

@@ -1,27 +1,27 @@
-/*甜甜圈图专用css*/
-.label-line {
-    stroke-dasharray: 100;
-    stroke-dashoffset: 100;
-    animation: dash 800ms ease forwards;
-  }
-  
-  .label-text {
-    opacity: 0;
-    animation: show 800ms ease forwards;
-  }
-  
-  .inner-arc {
-    animation: dash 2s ease forwards;
-  }
-  
-  @keyframes dash {
-    100% {
-      stroke-dashoffset: 0%;
-    }
-  }
-  
-  @keyframes show {
-    100% {
-      opacity: 1;
-    }
+/*甜甜圈图专用css*/
+.label-line {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    animation: dash 800ms ease forwards;
+  }
+  
+  .label-text {
+    opacity: 0;
+    animation: show 800ms ease forwards;
+  }
+  
+  .inner-arc {
+    animation: dash 2s ease forwards;
+  }
+  
+  @keyframes dash {
+    100% {
+      stroke-dashoffset: 0%;
+    }
+  }
+  
+  @keyframes show {
+    100% {
+      opacity: 1;
+    }
   }

package/src/element/ConicGradient.jsx

@@ -1,56 +1,56 @@
-import * as d3 from 'd3';
-
-//只支持在svg中使用
-//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
-//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
-export default function ConicGradient(props){
-    const {
-        gradientId,         //渐变ID，每一个环形渐变都需要使用独有的id，防止大屏中存在多个环形渐变时，出现渐变混用的情况。
-        colorConfig={},
-        circleConfig={}
-    } = props,
-    {
-        colorType = "linear",   //渐变类型
-        colors = [{offset:0,color:"rgba(255,0,0,0.5)"},
-                  {offset:50,color:"rgba(0,255,0,0.5)"},
-                  {offset:100,color:"rgba(0,0,255,0.5)"}]     //渐变颜色
-    } = colorConfig,
-    {
-        innerRadius = 80,       //圆环内半径
-        outerRadius = 100,      //圆环外半径
-        startAngle = 0,         //初始角度
-        endAngle = 360,         //结束角度
-        cornerRadius = 0,       //圆环两端的圆角
-        padAngle = 0            //圆环内边距，用于多个圆环之间的间距
-    } = circleConfig;
-    const arc = d3
-        .arc()
-        .innerRadius(innerRadius)
-        .outerRadius(outerRadius)
-        .startAngle((startAngle * Math.PI) / 180)
-        .endAngle((endAngle * Math.PI) / 180)
-        .cornerRadius(cornerRadius)
-        .padAngle(padAngle);
-    return <g>
-        <clipPath id={""+gradientId} style={{transform:`translate(50%,50%)`}}>
-            <path d={arc()}></path>
-        </clipPath>
-        <foreignObject style={{
-            width:"100%",
-            height:"100%",
-            transform:`translate(-50%,-50%)`,
-            background:colorType==="pure"?
-            colors : `conic-gradient(${colorsToString(colors)})`,
-            clipPath:`url(${'#'+gradientId})`
-        }}></foreignObject>
-    </g>
-}
-function colorsToString(colors){
-    let s="";
-    colors.sort((a,b)=>{
-        return a.offset-b.offset;
-    }).map(d=>{
-        s=s+d.color+" "+d.offset+"%,";
-    })
-    return s.slice(0,-1)
+import * as d3 from 'd3';
+
+//只支持在svg中使用
+//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
+//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
+export default function ConicGradient(props){
+    const {
+        gradientId,         //渐变ID，每一个环形渐变都需要使用独有的id，防止大屏中存在多个环形渐变时，出现渐变混用的情况。
+        colorConfig={},
+        circleConfig={}
+    } = props,
+    {
+        colorType = "linear",   //渐变类型
+        colors = [{offset:0,color:"rgba(255,0,0,0.5)"},
+                  {offset:50,color:"rgba(0,255,0,0.5)"},
+                  {offset:100,color:"rgba(0,0,255,0.5)"}]     //渐变颜色
+    } = colorConfig,
+    {
+        innerRadius = 80,       //圆环内半径
+        outerRadius = 100,      //圆环外半径
+        startAngle = 0,         //初始角度
+        endAngle = 360,         //结束角度
+        cornerRadius = 0,       //圆环两端的圆角
+        padAngle = 0            //圆环内边距，用于多个圆环之间的间距
+    } = circleConfig;
+    const arc = d3
+        .arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .startAngle((startAngle * Math.PI) / 180)
+        .endAngle((endAngle * Math.PI) / 180)
+        .cornerRadius(cornerRadius)
+        .padAngle(padAngle);
+    return <g>
+        <clipPath id={""+gradientId} style={{transform:`translate(50%,50%)`}}>
+            <path d={arc()}></path>
+        </clipPath>
+        <foreignObject style={{
+            width:"100%",
+            height:"100%",
+            transform:`translate(-50%,-50%)`,
+            background:colorType==="pure"?
+            colors : `conic-gradient(${colorsToString(colors)})`,
+            clipPath:`url(${'#'+gradientId})`
+        }}></foreignObject>
+    </g>
+}
+function colorsToString(colors){
+    let s="";
+    colors.sort((a,b)=>{
+        return a.offset-b.offset;
+    }).map(d=>{
+        s=s+d.color+" "+d.offset+"%,";
+    })
+    return s.slice(0,-1)
 }

package/src/element/Line.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-
-type Props = {
-  config: ChartLine;
-  x1: number;
-  x2: number;
-  y1: number;
-  y2: number;
-  className: string;
-};
-
-export default ({
-  config: { show, color, lineWidth, strokeDasharray },
-  x1,
-  x2,
-  y1,
-  y2,
-  className,
-}: Props) => {
-  if (!show) return null;
-  return (
-    <line
-      className={className}
-      x1={x1}
-      x2={x2}
-      y1={y1}
-      y2={y2}
-      stroke={color}
-      strokeWidth={lineWidth}
-      strokeDasharray={strokeDasharray}
-    />
-  );
-};
+import React from 'react';
+
+type Props = {
+  config: ChartLine;
+  x1: number;
+  x2: number;
+  y1: number;
+  y2: number;
+  className: string;
+};
+
+export default ({
+  config: { show, color, lineWidth, strokeDasharray },
+  x1,
+  x2,
+  y1,
+  y2,
+  className,
+}: Props) => {
+  if (!show) return null;
+  return (
+    <line
+      className={className}
+      x1={x1}
+      x2={x2}
+      y1={y1}
+      y2={y2}
+      stroke={color}
+      strokeWidth={lineWidth}
+      strokeDasharray={strokeDasharray}
+    />
+  );
+};

package/src/element/index.ts

@@ -1,3 +1,3 @@
-import Line from './Line';
-
-export { Line };
+import Line from './Line';
+
+export { Line };

package/src/formatter/index.js

@@ -1 +1 @@
-export * from './legend';
+export * from './legend';

package/src/formatter/legend.js

@@ -1,92 +1,92 @@
-import css from '../css/index.module.css';
-import { getFontStyle } from '../utils';
-import { TextOverflow } from '../components';
-
-export const pieLegendFormatter = (
-  { displayName, data, percent, series: { color: seriesColor, icon="" } },
-  {
-    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth },
-    value: {
-      show: showValue,
-      font: valueFont,
-      sameColor: valueSameColor,
-      gap: valueGap,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize,
-        translate: { x, y },
-      },
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      sameColor: percentSameColor,
-      gap: percentGap,
-    },
-  }
-) => {
-  const {
-    type: seriesColorType,
-    pure,
-    linear: { stops },
-  } = seriesColor;
-
-  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
-  return (
-    <>
-      {icon &&<span style={{ ...icon, marginRight: icon.marginRight }} />}
-      <div
-        className={
-          showName && showValue && showPercent
-            ? css.showAllStyle
-            : css.notShowAllStyle
-        }
-      >
-        {showName && (
-          <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
-            width:maxWidth, marginLeft: 5, ...getFontStyle(nameFont)
-          }}></TextOverflow>
-        )}
-        {showValue && (
-          <span
-            style={{
-              whiteSpace:"nowrap",
-              ...getFontStyle(valueFont),
-              marginLeft: valueGap,
-              display: 'flex',
-              color: valueSameColor ? _color : valueFont.color,
-              alignItems: 'center',
-              justifyContent: 'flex-start',
-            }}
-          >
-            <span>{data.y}</span>
-            {showSuffix && (
-              <span
-                style={{
-                  whiteSpace:"nowrap",
-                  fontSize,
-                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-                }}
-              >
-                {text}
-              </span>
-            )}
-          </span>
-        )}
-        {showPercent && (
-          <span
-            style={{
-              whiteSpace:"nowrap",
-              ...getFontStyle(percentFont),
-              marginLeft: percentGap,
-              color: percentSameColor ? _color : percentFont.color,
-            }}
-          >
-            {percent + '%'}
-          </span>
-        )}
-      </div>
-    </>
-  );
-};
+import css from '../css/index.module.css';
+import { getFontStyle } from '../utils';
+import { TextOverflow } from '../components';
+
+export const pieLegendFormatter = (
+  { displayName, data, percent, series: { color: seriesColor, icon="" } },
+  {
+    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth },
+    value: {
+      show: showValue,
+      font: valueFont,
+      sameColor: valueSameColor,
+      gap: valueGap,
+      suffix: {
+        show: showSuffix,
+        text,
+        fontSize,
+        translate: { x, y },
+      },
+    },
+    percent: {
+      show: showPercent,
+      font: percentFont,
+      sameColor: percentSameColor,
+      gap: percentGap,
+    },
+  }
+) => {
+  const {
+    type: seriesColorType,
+    pure,
+    linear: { stops },
+  } = seriesColor;
+
+  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  return (
+    <>
+      {icon &&<span style={{ ...icon, marginRight: icon.marginRight }} />}
+      <div
+        className={
+          showName && showValue && showPercent
+            ? css.showAllStyle
+            : css.notShowAllStyle
+        }
+      >
+        {showName && (
+          <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
+            width:maxWidth, marginLeft: 5, ...getFontStyle(nameFont)
+          }}></TextOverflow>
+        )}
+        {showValue && (
+          <span
+            style={{
+              whiteSpace:"nowrap",
+              ...getFontStyle(valueFont),
+              marginLeft: valueGap,
+              display: 'flex',
+              color: valueSameColor ? _color : valueFont.color,
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+            }}
+          >
+            <span>{data.y}</span>
+            {showSuffix && (
+              <span
+                style={{
+                  whiteSpace:"nowrap",
+                  fontSize,
+                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
+                }}
+              >
+                {text}
+              </span>
+            )}
+          </span>
+        )}
+        {showPercent && (
+          <span
+            style={{
+              whiteSpace:"nowrap",
+              ...getFontStyle(percentFont),
+              marginLeft: percentGap,
+              color: percentSameColor ? _color : percentFont.color,
+            }}
+          >
+            {percent + '%'}
+          </span>
+        )}
+      </div>
+    </>
+  );
+};