@easyv/charts 1.2.12 → 1.3.1

package/lib/components/Lighter.js

@@ -1,180 +1,180 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _d3v = require("d3v7");
-
-var _utils = require("../utils");
-
-var _svgPathProperties = require("svg-path-properties");
-
-/**
- * 区域图发光跟踪路径
- */
-var _default = function _default(_ref) {
-  var d = _ref.path,
-      config = _ref.config,
-      _ref$config = _ref.config,
-      curveLength = _ref$config.length,
-      width = _ref$config.width,
-      fill = _ref$config.fill,
-      unitStep = _ref$config.unitStep;
-  var pointIndexRef = (0, _react.useRef)(0);
-  var raf = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      points = _useState2[0],
-      setPoints = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      lighter = _useState4[0],
-      setLighter = _useState4[1];
-
-  var pointLength = points.length;
-  var totalLength = getLength(pointLength, curveLength);
-  var easingFunc = easing.linear;
-  var interpolateList = (0, _react.useMemo)(function () {
-    return getColorsInterpolate((0, _utils.getColorList)(fill));
-  }, [fill]);
-  var drawLigher = (0, _react.useCallback)(function () {
-    var STEP = 2;
-    var LOOP = false;
-
-    if (lighter && lighter.children) {
-      var currentPointLength = pointIndexRef.current;
-      var pointIndex = currentPointLength >= totalLength ? LOOP ? curveLength : 0 : currentPointLength + unitStep + Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
-      var overstep = pointIndex - pointLength;
-      var startIndex = getPointIndex(pointIndex, pointLength, curveLength);
-      var endIndex = getPointIndex(pointIndex + curveLength, pointLength, curveLength);
-      var overstepPoints = LOOP && overstep > 0 ? points.slice(0, overstep) : [];
-      drawCircle(Array.from(lighter.children), [].concat((0, _toConsumableArray2["default"])(points.slice(startIndex, endIndex)), (0, _toConsumableArray2["default"])(overstepPoints)), interpolateList);
-      pointIndexRef.current = pointIndex;
-    }
-
-    raf.current = requestAnimationFrame(drawLigher);
-  }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
-  (0, _react.useEffect)(function () {
-    var path = new _svgPathProperties.svgPathProperties(d);
-    var totalLength = path.getTotalLength();
-    var points = [];
-
-    for (var i = 0; i < totalLength; i++) {
-      var _path$getPointAtLengt = path.getPointAtLength(i),
-          x = _path$getPointAtLengt.x,
-          y = _path$getPointAtLengt.y;
-
-      points.push({
-        index: i,
-        x: x,
-        y: y
-      });
-    }
-
-    setPoints(points);
-  }, [d, config]);
-  (0, _react.useEffect)(function () {
-    raf.current = requestAnimationFrame(drawLigher);
-    return function () {
-      cancelAnimationFrame(raf.current);
-    };
-  }, [drawLigher]);
-  return /*#__PURE__*/_react["default"].createElement("g", {
-    ref: setLighter
-  }, points.map(function (_ref2, index) {
-    var x = _ref2.x,
-        y = _ref2.y;
-    return /*#__PURE__*/_react["default"].createElement("circle", {
-      cx: x,
-      cy: y,
-      key: index,
-      r: width,
-      fill: "none"
-    });
-  }));
-};
-
-exports["default"] = _default;
-
-var drawCircle = function drawCircle(children, points, interpolateList) {
-  var pointLength = points.length; // const [startPoint] = points;
-  // const startIndex = startPoint ? startPoint.index : 0;
-
-  children.forEach(function (child, index) {
-    var pointIndex = points.findIndex(function (_ref3) {
-      var i = _ref3.index;
-      return i == index;
-    });
-    child.setAttribute('fill', pointIndex > -1 ? getColor(pointIndex / pointLength, //TODO: 颜色插值尚需完善
-    interpolateList) : 'none');
-  });
-};
-
-var getColor = function getColor(x, interpolateList) {
-  return interpolateList(x);
-};
-
-var getLength = function getLength(pointLength, length) {
-  if (length > pointLength) {
-    return pointLength * 2;
-  }
-
-  return pointLength + length;
-};
-
-var getColorsInterpolate = function getColorsInterpolate(colors) {
-  var length = colors.length;
-  if (!!(length < 2)) return (0, _d3v.scaleLinear)().domain([0, 1]).range([colors[0].color || '#000', colors[0].color || '#000']);
-  var linear = (0, _d3v.scaleLinear)().domain(colors.map(function (d) {
-    return d.offset;
-  })).range(colors.map(function (d) {
-    return d.color;
-  }));
-  return linear;
-};
-
-var easing = {
-  linear: function linear() {
-    return 0;
-  },
-  easeIn: function easeIn(k) {
-    return Math.pow(k, 3);
-  },
-  easeOut: function easeOut(k) {
-    return 1 - easing.easeIn(1 - k);
-  },
-  easeInOut: function easeInOut(k) {
-    return k < 0.5 ? easing.easeIn(k * 2) / 2 : 1 - easing.easeIn(2 - 2 * k) / 2;
-  },
-  easeOutIn: function easeOutIn(k) {
-    return k < 0.5 ? 0.5 * (1 - easing.easeIn(1 - 2 * k)) : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
-  }
-};
-
-var getPointIndex = function getPointIndex(pointIndex, pointLength, curveLength) {
-  var index = pointIndex - curveLength;
-
-  if (index < 0) {
-    return 0;
-  }
-
-  if (index >= pointLength) {
-    return pointLength - 1;
-  }
-
-  return index;
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _d3v = require("d3v7");
+
+var _utils = require("../utils");
+
+var _svgPathProperties = require("svg-path-properties");
+
+/**
+ * 区域图发光跟踪路径
+ */
+var _default = function _default(_ref) {
+  var d = _ref.path,
+      config = _ref.config,
+      _ref$config = _ref.config,
+      curveLength = _ref$config.length,
+      width = _ref$config.width,
+      fill = _ref$config.fill,
+      unitStep = _ref$config.unitStep;
+  var pointIndexRef = (0, _react.useRef)(0);
+  var raf = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      points = _useState2[0],
+      setPoints = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      lighter = _useState4[0],
+      setLighter = _useState4[1];
+
+  var pointLength = points.length;
+  var totalLength = getLength(pointLength, curveLength);
+  var easingFunc = easing.linear;
+  var interpolateList = (0, _react.useMemo)(function () {
+    return getColorsInterpolate((0, _utils.getColorList)(fill));
+  }, [fill]);
+  var drawLigher = (0, _react.useCallback)(function () {
+    var STEP = 2;
+    var LOOP = false;
+
+    if (lighter && lighter.children) {
+      var currentPointLength = pointIndexRef.current;
+      var pointIndex = currentPointLength >= totalLength ? LOOP ? curveLength : 0 : currentPointLength + unitStep + Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
+      var overstep = pointIndex - pointLength;
+      var startIndex = getPointIndex(pointIndex, pointLength, curveLength);
+      var endIndex = getPointIndex(pointIndex + curveLength, pointLength, curveLength);
+      var overstepPoints = LOOP && overstep > 0 ? points.slice(0, overstep) : [];
+      drawCircle(Array.from(lighter.children), [].concat((0, _toConsumableArray2["default"])(points.slice(startIndex, endIndex)), (0, _toConsumableArray2["default"])(overstepPoints)), interpolateList);
+      pointIndexRef.current = pointIndex;
+    }
+
+    raf.current = requestAnimationFrame(drawLigher);
+  }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
+  (0, _react.useEffect)(function () {
+    var path = new _svgPathProperties.svgPathProperties(d);
+    var totalLength = path.getTotalLength();
+    var points = [];
+
+    for (var i = 0; i < totalLength; i++) {
+      var _path$getPointAtLengt = path.getPointAtLength(i),
+          x = _path$getPointAtLengt.x,
+          y = _path$getPointAtLengt.y;
+
+      points.push({
+        index: i,
+        x: x,
+        y: y
+      });
+    }
+
+    setPoints(points);
+  }, [d, config]);
+  (0, _react.useEffect)(function () {
+    raf.current = requestAnimationFrame(drawLigher);
+    return function () {
+      cancelAnimationFrame(raf.current);
+    };
+  }, [drawLigher]);
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    ref: setLighter
+  }, points.map(function (_ref2, index) {
+    var x = _ref2.x,
+        y = _ref2.y;
+    return /*#__PURE__*/_react["default"].createElement("circle", {
+      cx: x,
+      cy: y,
+      key: index,
+      r: width,
+      fill: "none"
+    });
+  }));
+};
+
+exports["default"] = _default;
+
+var drawCircle = function drawCircle(children, points, interpolateList) {
+  var pointLength = points.length; // const [startPoint] = points;
+  // const startIndex = startPoint ? startPoint.index : 0;
+
+  children.forEach(function (child, index) {
+    var pointIndex = points.findIndex(function (_ref3) {
+      var i = _ref3.index;
+      return i == index;
+    });
+    child.setAttribute('fill', pointIndex > -1 ? getColor(pointIndex / pointLength, //TODO: 颜色插值尚需完善
+    interpolateList) : 'none');
+  });
+};
+
+var getColor = function getColor(x, interpolateList) {
+  return interpolateList(x);
+};
+
+var getLength = function getLength(pointLength, length) {
+  if (length > pointLength) {
+    return pointLength * 2;
+  }
+
+  return pointLength + length;
+};
+
+var getColorsInterpolate = function getColorsInterpolate(colors) {
+  var length = colors.length;
+  if (!!(length < 2)) return (0, _d3v.scaleLinear)().domain([0, 1]).range([colors[0].color || '#000', colors[0].color || '#000']);
+  var linear = (0, _d3v.scaleLinear)().domain(colors.map(function (d) {
+    return d.offset;
+  })).range(colors.map(function (d) {
+    return d.color;
+  }));
+  return linear;
+};
+
+var easing = {
+  linear: function linear() {
+    return 0;
+  },
+  easeIn: function easeIn(k) {
+    return Math.pow(k, 3);
+  },
+  easeOut: function easeOut(k) {
+    return 1 - easing.easeIn(1 - k);
+  },
+  easeInOut: function easeInOut(k) {
+    return k < 0.5 ? easing.easeIn(k * 2) / 2 : 1 - easing.easeIn(2 - 2 * k) / 2;
+  },
+  easeOutIn: function easeOutIn(k) {
+    return k < 0.5 ? 0.5 * (1 - easing.easeIn(1 - 2 * k)) : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
+  }
+};
+
+var getPointIndex = function getPointIndex(pointIndex, pointLength, curveLength) {
+  var index = pointIndex - curveLength;
+
+  if (index < 0) {
+    return 0;
+  }
+
+  if (index >= pointLength) {
+    return pointLength - 1;
+  }
+
+  return index;
 };

package/lib/components/LinearGradient.js

@@ -9,8 +9,8 @@ exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-/**
- * svg渐变滤镜
+/**
+ * svg渐变滤镜
  */
 var _default = function _default(_ref) {
   var id = _ref.id,

package/lib/components/Marquee.js

@@ -9,15 +9,17 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = require("react");
 
 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; }
 
-/**
- * 文字跑马灯组件
- * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
+/**
+ * 文字跑马灯组件
+ * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
   var value = props.value,
@@ -25,33 +27,27 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       _props$speed = props.speed,
       speed = _props$speed === void 0 ? 5 : _props$speed;
   var dom = (0, _react.useRef)(null);
-  var content = (0, _react.useRef)(null); //dom和content盒子对象，避免speed变化时重新获取盒子对象
+  var content = (0, _react.useRef)(null);
 
-  var domRect = (0, _react.useRef)(null);
-  var contentRect = (0, _react.useRef)(null); //文本变化时，需要重新计算dom和content的宽高
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      fresh = _useState2[0],
+      setFresh = _useState2[1];
 
-  var textList = (0, _react.useMemo)(function () {
+  var textList = (0, _react.useRef)([value]);
+  var duration = (0, _react.useRef)(10 / speed);
+  (0, _react.useEffect)(function () {
     if (dom.current && content.current) {
-      var dom_ = dom.current;
-      domRect.current = dom_.getBoundingClientRect();
-      var content_ = content.current;
-      contentRect.current = content_.getBoundingClientRect();
+      var domRectWidth = dom.current.getBoundingClientRect().width;
+      var contentRectWidth = content.current.getBoundingClientRect().width;
 
-      if (domRect.current.width < contentRect.current.width) {
-        return [value, value];
+      if (domRectWidth < contentRectWidth) {
+        textList.current = [value, value];
+        duration.current = contentRectWidth / domRectWidth / speed * 10;
+        setFresh(!fresh);
       }
     }
-
-    return [value];
-  }, [value]); //value和speed变化时，直接更新duration
-
-  var duration = (0, _react.useMemo)(function () {
-    if (domRect.current && contentRect.current && domRect.current.width < contentRect.current.width) {
-      return contentRect.current.width / domRect.current.width / speed * 10;
-    }
-
-    return 5;
-  }, [speed]); //在head标签中注入keyframes动画
+  }, [value, speed]); //在head标签中注入keyframes动画
 
   (0, _react.useEffect)(function () {
     var md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
@@ -68,24 +64,26 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       document.getElementsByTagName('head')[0].appendChild(_style);
     }
   }, []);
+  var overflow = textList.current.length == 2;
   return /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
       width: '100%'
     }, style), {}, {
       display: 'flex',
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      justifyContent: overflow ? "start" : style.justifyContent || ""
     }),
     ref: dom
-  }, textList.map(function (item, itemIndex) {
+  }, textList.current.map(function (item, itemIndex) {
     return /*#__PURE__*/React.createElement("span", {
       key: itemIndex,
-      style: textList.length == 2 ? {
+      style: overflow ? {
         //如果文本数量为2，则需要滚动
         animationName: 'md_marquee',
         animationTimingFunction: 'linear',
         animationIterationCount: 'infinite',
-        animationDuration: duration + 's'
+        animationDuration: duration.current + 's'
       } : {},
       ref: itemIndex == 0 ? content : null
     }, "\xA0", item);

package/lib/components/StackData.js

@@ -32,15 +32,13 @@ var _default = function _default(Component) {
         data = _ref.data,
         props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
 
-    var _series = (0, _hooks.useStackData)({
+    var _config = (0, _hooks.useStackData)({
       series: series,
       data: data
     });
 
     return /*#__PURE__*/React.createElement(Component, (0, _extends2["default"])({}, props, {
-      config: _objectSpread(_objectSpread({}, config), {}, {
-        series: _series
-      }),
+      config: _objectSpread(_objectSpread({}, config), _config),
       data: data
     }));
   });

package/lib/components/StereoBar.js

@@ -111,22 +111,22 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       yScaler = _ref3.yAxis.scaler,
       fieldName = _ref3.fieldName;
   if (!data.length) return null;
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
 
-  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
-    width: bandwidth,
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+    step: step,
+    bandLength: bandLength,
     paddingInner: paddingInner,
-    bandLength: bandLength
+    paddingOuter: paddingOuter
   }),
-      seriesStep = _getBandSeriesStepAnd.seriesStep,
-      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
+      seriesWidth = _getSeriesInfo.seriesWidth,
+      seriesStep = _getSeriesInfo.seriesStep,
+      seriesStart = _getSeriesInfo.seriesStart;
 
   var _data = showHighlight ? getHighlightData(data, extent) : data;
 
-  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
   var isVertical = direction === 'vertical';
-  var highlightColor = parseMultiColorToSVG(highlightFill, "highlight_gradient_" + id + "_" + fieldName);
-  var color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + fieldName);
+  var highlightColor = parseMultiColorToSVG(highlightFill, 'highlight_gradient_' + id + '_' + fieldName);
+  var color = parseMultiColorToSVG(fill, 'gradient_' + id + '_' + fieldName);
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
@@ -165,7 +165,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
 
     var y1 = yScaler(isVertical ? end : start);
     var y2 = yScaler(isVertical ? start : end);
-    var positionX = xScaler(x) + seriesStep * index - offset / 2;
+    var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     if (isNaN(positionX)) return null;
     var positionY = y < 0 ? y1 : y2;
     var attr = getAttr({
@@ -253,7 +253,7 @@ function deg2rad(deg) {
 }
 
 function deepCopy(obj) {
-  if ((0, _typeof2["default"])(obj) == "object") {
+  if ((0, _typeof2["default"])(obj) == 'object') {
     var o;
 
     if (Array.isArray(obj)) {
@@ -278,7 +278,7 @@ function deepCopy(obj) {
 }
 
 function parseMultiColorToSVG(config, id) {
-  if (config.type == "linear") {
+  if (config.type == 'linear') {
     var _config$linear = config.linear,
         stops = _config$linear.stops,
         opacity = _config$linear.opacity;
@@ -302,14 +302,14 @@ function parseMultiColorToSVG(config, id) {
 
     return {
       fill: "url(#".concat(id, ")"),
-      def: /*#__PURE__*/_react["default"].createElement("linearGradient", {
+      def: /*#__PURE__*/_react["default"].createElement('linearGradient', {
         id: id,
         x2: start[0],
         y2: start[1],
         x1: end[0],
         y1: end[1]
       }, _stops.map(function (e) {
-        return /*#__PURE__*/_react["default"].createElement("stop", {
+        return /*#__PURE__*/_react["default"].createElement('stop', {
           key: e.offset,
           offset: e.offset / 100,
           stopColor: e.color,

package/lib/components/TextOverflow.js

@@ -17,9 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-/**
- * 文本溢出组件
- * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
+/**
+ * 文本溢出组件
+ * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
   var type = props.type,

package/lib/css/index.module.css

@@ -1,42 +1,42 @@
-.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%;
-  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%;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
 }