@easyv/charts 1.2.5 → 1.2.6

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -82,4 +82,8 @@ Object.keys(_utils3).forEach(function (key) {
       return _utils3[key];
     }
   });
-});
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.band = band;
-exports.getDataWithPercent = exports.sortPie = exports.getDomPath = exports.filterChildren = exports.getChildren = exports.isValidHttpUrl = exports.getBandSeriesStepAndWidth = exports.getBandwidth = exports.getBandBackground = exports.getCurrentStack = exports.resetStacks = exports.seriesYOrZ = exports.dataYOrZ = exports.getStacks = exports.getColorList = exports.getIcon = exports.getTranslate2d = exports.getTranslate3d = exports.getMargin = exports.getFontStyle = exports.getMousePos = exports.identity = exports.getGridCoord = exports.getTickCoord = exports.getTicksOfAxis = exports.getBreakWord = exports.dateFormat = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -26,9 +26,12 @@ var _server = require("react-dom/server");
 
 var _svgPoints = require("svg-points");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["backgroundSize"],
+    _excluded2 = ["vote", "value"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var defaultSize = 10;
 var defaultBackground = '#000000';
@@ -590,7 +593,7 @@ var getBandBackground = function getBandBackground(pattern, fill) {
 
   var _pattern$backgroundSi = pattern.backgroundSize,
       backgroundSize = _pattern$backgroundSi === void 0 ? '100% 100%' : _pattern$backgroundSi,
-      _pattern = (0, _objectWithoutProperties2["default"])(pattern, ["backgroundSize"]);
+      _pattern = (0, _objectWithoutProperties2["default"])(pattern, _excluded);
 
   return 'center top / ' + backgroundSize + ' url("data:image/svg+xml,' + encodeURIComponent((0, _server.renderToStaticMarkup)( /*#__PURE__*/React.createElement(SvgBackground, {
     fill: fill,
@@ -814,7 +817,7 @@ var getDataWithPercent = function getDataWithPercent() {
   var tmp = votesPerQuota.map(function (_ref28, index) {
     var vote = _ref28.vote,
         value = _ref28.value,
-        data = (0, _objectWithoutProperties2["default"])(_ref28, ["vote", "value"]);
+        data = (0, _objectWithoutProperties2["default"])(_ref28, _excluded2);
 
     var obj = _objectSpread(_objectSpread({}, data), {}, {
       value: value,
@@ -830,4 +833,24 @@ var getDataWithPercent = function getDataWithPercent() {
   return tmp;
 };
 
-exports.getDataWithPercent = getDataWithPercent;
+exports.getDataWithPercent = getDataWithPercent;
+var excludeTypes = ['array', 'object', 'group', 'modal', 'colors'];
+
+var reduceConfig = function reduceConfig() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  if (!Array.isArray(config)) {
+    return config;
+  }
+
+  var output = {};
+
+  for (var i = 0, len = config.length; i < len; i++) {
+    var type = config[i]._type;
+    output[config[i]._name] = type && !excludeTypes.includes(type) ? config[i]._value : reduceConfig(config[i]._value);
+  }
+
+  return output;
+};
+
+exports.reduceConfig = reduceConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/BaseLine.js

@@ -0,0 +1,76 @@
+/**
+ * 参考线
+ */
+import React, { memo } from 'react';
+
+
+export default memo(
+  ({
+    width,
+    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;
+    return (
+      <>
+        <g className='__easyv-baseLine' >
+          <line
+            x1={marginLeft}
+            x2={width - marginRight}
+            y1={yScaler(data.value)}
+            y2={yScaler(data.value)}
+            stroke={color}
+            fill='none'
+            strokeDasharray={lineType === 'dash' ? strokeDasharray : null}
+            strokeWidth={lineWidth}
+          />
+        </g>
+        {labelShow &&
+          <foreignObject
+            width={100}
+            height={100}
+            x={width - marginRight + labelTranslate.x}
+            y={yScaler(data.value) - textStyle.fontSize + labelTranslate.y}>
+            <div>
+              <span style={{ ...textStyle }}>{label}</span>
+            </div>
+          </foreignObject>}
+        {dataShow &&
+          <foreignObject
+            width={100}
+            height={100}
+            x={width - marginRight + dataTranslate.x}
+            y={yScaler(data.value) + dataTranslate.y}>
+            <div>
+              <span style={{ ...dataStyle }}>{data.value}</span>
+            </div>
+          </foreignObject>}
+      </>
+    );
+  }
+);

package/src/components/CartesianChart.js

@@ -24,6 +24,7 @@ import {
   Brush,
   Label,
   Mapping,
+  BaseLine
 } from '.';
 
 const Chart = memo(
@@ -41,6 +42,10 @@ const Chart = memo(
       },
       series,
       tooltip,
+      baseLine: {
+        config: baseLineConfig = {},
+        data: baseLineData = []
+      },
       tooltip: {
         config: tooltipConfig = {},
         config: { auto, manual, indicator = {} } = {},
@@ -49,7 +54,7 @@ const Chart = memo(
     },
     style,
     data,
-    filterData,
+    filterData
   }) => {
     const context = useContext(chartContext);
     const {
@@ -95,10 +100,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) => {
@@ -167,6 +172,18 @@ const Chart = memo(
               )
             );
           })}
+          {baseLineData && baseLineData.length > 0 && baseLineData.map((item, index) => {
+            const { line: { yOrZ } } = baseLineConfig[index];
+            const yAxis = axes.get(yOrZ);
+            return (
+              yAxis && (<BaseLine
+                width={width}
+                key={index}
+                config={baseLineConfig[index]}
+                yAxis={yAxis}
+                data={item} />)
+            )
+          })}
         </ChartContainer>
         <Legend {...legend} filterData={filterData} series={series} />
         {showTooltip && (

package/src/components/index.js

@@ -22,6 +22,7 @@ import ConicalGradient from './ConicalGradient';
 import CartesianChart from './CartesianChart';
 import PieChart from './PieChart';
 import TextOverflow from './TextOverflow';
+import BaseLine from './BaseLine';
 
 const Area = Line;
 export {
@@ -50,4 +51,5 @@ export {
   TextOverflow,
   Chart,
   ConicalGradient,
+  BaseLine,
 };

package/src/utils/index.js

@@ -86,16 +86,16 @@ const getIcon = (type, icon) => {
     case 'line':
       return icon
         ? {
-            ...defaultLineIcon,
-            ...icon,
-          }
+          ...defaultLineIcon,
+          ...icon,
+        }
         : defaultLineIcon;
     default:
       return icon
         ? {
-            ...defaultIcon,
-            ...icon,
-          }
+          ...defaultIcon,
+          ...icon,
+        }
         : defaultIcon;
   }
 };
@@ -663,6 +663,24 @@ const getDataWithPercent = (data = [], precision = 0) => {
   return tmp;
 };
 
+
+const excludeTypes = ['array', 'object', 'group', 'modal', 'colors'];
+const reduceConfig = (config = []) => {
+  if (!Array.isArray(config)) {
+    return config;
+  }
+  let output = {};
+  for (let i = 0, len = config.length; i < len; i++) {
+    let type = config[i]._type;
+
+    output[config[i]._name] =
+      type && !excludeTypes.includes(type)
+        ? config[i]._value
+        : reduceConfig(config[i]._value);
+  }
+  return output;
+}
+
 export {
   dateFormat,
   getBreakWord,
@@ -692,4 +710,5 @@ export {
   getDomPath,
   sortPie,
   getDataWithPercent,
+  reduceConfig,
 };