@easyv/charts 1.4.14 → 1.4.16

package/src/hooks/useAxes.js

@@ -1,47 +1,47 @@
-import { useMemo } from 'react';
-import { scaleLinear, scaleLog, scaleTime, scaleUtc } from 'd3-scale';
-import { band, getTicksOfAxis } from '../utils';
-import {
-  getYTicksByStep,
-  getYTicks,
-} from '@easyv/utils/lib/common/utils';
-
-const getCount = (num)=>{
-  let i=0, num_ = Math.abs(num);
-  if(num_<1) return i;
-  while(num_>10){
+import { useMemo } from "react";
+import { scaleLinear, scaleLog, scaleTime, scaleUtc } from "d3-scale";
+import { band, getTicksOfAxis } from "../utils";
+import { getYTicksByStep, getYTicks } from "@easyv/utils/lib/common/utils";
+
+const getCount = (num) => {
+  let i = 0,
+    num_ = Math.abs(num);
+  if (num_ < 1) return i;
+  while (num_ > 10) {
     i++;
-    num_=Math.floor(num_/10);
+    num_ = Math.floor(num_ / 10);
   }
   return i;
-}
-
-const getNewDomain=(domain, mode, step)=>{
-  let newDomain=[];
-  let min = domain[0], max = domain[1];
-  let minCount = Math.pow(10,getCount(min)), maxCount = Math.pow(10,getCount(max));
-  switch(mode){
-    case 'count':
-      newDomain[0] = Math.floor(domain[0]/minCount)*minCount;
-      newDomain[1] = Math.ceil(domain[1]/maxCount)*maxCount;
+};
+
+const getNewDomain = (domain, mode, step) => {
+  let newDomain = [];
+  let min = domain[0],
+    max = domain[1];
+  let minCount = Math.pow(10, getCount(min)),
+    maxCount = Math.pow(10, getCount(max));
+  switch (mode) {
+    case "count":
+      newDomain[0] = Math.floor(domain[0] / minCount) * minCount;
+      newDomain[1] = Math.ceil(domain[1] / maxCount) * maxCount;
       break;
-    case 'step':
-      newDomain = [domain[0],domain[0]];
-      while(newDomain[1]<domain[1]){
-        newDomain[1]+=step
+    case "step":
+      newDomain = [domain[0], domain[0]];
+      while (newDomain[1] < domain[1]) {
+        newDomain[1] += step;
       }
   }
   return newDomain;
-}
+};
 
-const getTickCount=(domain, count, decimal)=>{
-  let multiple = Math.pow(10,decimal);
-  let gap = domain[1]*multiple-domain[0]*multiple;
-  if(gap<count){
-    return Math.max(2,1+gap);
+const getTickCount = (domain, count, decimal) => {
+  let multiple = Math.pow(10, decimal);
+  let gap = domain[1] * multiple - domain[0] * multiple;
+  if (gap < count) {
+    return Math.max(2, 1 + gap);
   }
   return count;
-}
+};
 
 const scales = {
   linear: scaleLinear,
@@ -64,11 +64,13 @@ export default ({ axes, context: { width, height } }) => {
     const xAxisPositions = [];
     axes.forEach((item) => {
       const {
-        config: { label: { showLast = false, decimal = 0 } },
+        config: {
+          label: { showLast = false, decimal = 0 },
+        },
         type,
         orientation,
         ticks,
-        tickCount :count = 1,
+        tickCount: count = 1,
         step = 1,
         domain,
         axisType,
@@ -77,104 +79,321 @@ export default ({ axes, context: { width, height } }) => {
         mode,
         carousel,
         config,
+        //断轴相关
+        isClipAxis,
+        bottomClipAxisCount,
+        topClipAxisCount,
+        bottomClipAxisStep,
+        topClipAxisStep,
+        clipValue,
+        clipPosition,
+        clipDifferenceValue,
+        clipAxisMode,
       } = item;
-      //计算真正需要的tickCount，如果domain区间太小，不能完全按照count来，需要减少count数
-      const tickCount = type=="ordinal"?count:getTickCount(domain,count,decimal); 
-      const direction =
-        orientation === 'top' || orientation === 'bottom'
-          ? 'horizontal'
-          : orientation === 'left' || orientation === 'right'
-            ? 'vertical'
-            : '';
-      const length =
-        direction === 'horizontal'
-          ? width
-          : direction === 'vertical'
+      //如果是断轴类型，输出一套完全不同的values
+
+      /**
+       * 获取轴的：朝向direction，起点位置start，终点位置end
+       * @param {*} orientation
+       * @param {*} width
+       * @param {*} height
+       * @param {*} paddingOuter
+       * @returns {start,end,direction}
+       */
+      function getChartsConfig(orientation, width, height, paddingOuter) {
+        const direction =
+          orientation === "top" || orientation === "bottom"
+            ? "horizontal"
+            : orientation === "left" || orientation === "right"
+            ? "vertical"
+            : "";
+        const length =
+          direction === "horizontal"
+            ? width
+            : direction === "vertical"
             ? height
             : 0;
 
-      const _paddingOuter = paddingOuter * length;
-      const start = _paddingOuter / 2;
-      const end = length - start;
+        const _paddingOuter = paddingOuter * length;
+        const start = _paddingOuter / 2;
+        const end = length - start;
+        return {
+          start,
+          end,
+          direction,
+          length,
+          _paddingOuter,
+        };
+      }
 
-      const range =
-        direction === 'horizontal'
-          ? [start, end]
-          : direction === 'vertical'
-            ? [end, start]
-            : [0, 0];
-      let newDomain = domain;
-      if(type !== 'ordinal' && !isNaN(domain[1]) && !auto){
-        newDomain = getNewDomain(domain, mode, step);
+      /**
+       * 设置scaler
+       * @param {*} scales
+       * @param {*} type 轴类型
+       * @param {*} domain 数据的范围
+       * @param {*} range 屏幕坐标的范围
+       * @returns
+       */
+      function setScaler(scales, type, domain, range) {
+        //比例将抽象数据的维度映射到可视表示形式。虽然最常用于将数据编码为位置，例如将时间和温度映射到散点图中的水平和垂直位置
+        const scaler = scales[type]().domain(domain).range(range);
+        scaler.type = type;
+        if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
+        return scaler;
       }
-      
-      const scaler = scales[type]().domain(newDomain).range(range);
-      
-      scaler.type = type;
-      if (type !== 'ordinal') scaler.clamp(true); //scaler.nice().clamp(true)
-      const allTicks = ticks
-        ? ticks
-        : scaler.ticks
+
+      /**
+       * 获取所有标签数据
+       * @param {*} scaler
+       * @param {*} ticks 传入的ticks
+       * @param {*} tickCount
+       * @returns
+       */
+      function getAllTicks(scaler, ticks, tickCount) {
+        return ticks
+          ? ticks
+          : scaler.ticks
           ? scaler.ticks(tickCount)
           : scaler.domain();
-      let _ticks = allTicks;
-      // 
-      if (type === 'ordinal') {
-        if (carousel === false) {
-          _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
+      }
+
+      /**
+       * 计算非自动模式下的标签集合
+       * @param {*} allTicks
+       * @param {*} type
+       * @param {*} carousel
+       * @param {*} showLast
+       * @param {*} auto
+       * @param {*} mode
+       * @param {*} newDomain
+       * @param {*} tickCount
+       * @param {*} step
+       * @returns
+       */
+      function getTicks(
+        allTicks,
+        type,
+        carousel,
+        showLast,
+        auto,
+        mode,
+        newDomain,
+        tickCount,
+        step
+      ) {
+        let _ticks = allTicks;
+        if (type === "ordinal") {
+          if (carousel === false) {
+            _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
+          }
+        } else {
+          if (auto === false) {
+            switch (mode) {
+              case "count":
+                _ticks = getYTicks(newDomain[1], newDomain[0], +tickCount);
+                break;
+              case "step":
+                _ticks = getYTicksByStep(newDomain[1], newDomain[0], +step);
+                break;
+            }
+          }
+        }
+        return _ticks;
+      }
+      //断轴相关
+      let _isClipAxis = isClipAxis,
+        clipAxisDomain = [],
+        clipAxisCount = [],
+        clipAxisTickCount = [],
+        clipAxisStep = [];
+
+      let _count = count,
+        _step = step;
+      //计算topDomain，bottomDomain，当断轴值为设置不合理的时候，不开启断轴
+      if (isClipAxis && (clipValue > domain[1] || clipValue < domain[0])) {
+        _isClipAxis = false;
+        _count = topClipAxisCount;
+        _step = topClipAxisStep;
+      } else {
+        clipAxisDomain = [
+          [clipValue, domain[1]],
+          [domain[0], clipValue],
+        ];
+        clipAxisCount = [topClipAxisCount, bottomClipAxisCount];
+        clipAxisStep = [topClipAxisStep, bottomClipAxisStep];
+      }
+      if (_isClipAxis) {
+        clipAxisDomain.forEach((domain, index) => {
+          clipAxisTickCount.push(
+            getTickCount(domain, clipAxisCount[index], decimal)
+          );
+        });
+
+        const { start, end, direction, _paddingOuter, length } =
+          getChartsConfig(orientation, width, height, paddingOuter);
+
+        const clipMargin = 10;
+        function getClipAxisRange(start, end, clipPosition, clipMargin) {
+          let topRange = [
+            (end - start) * (clipPosition / 100) - clipMargin / 2,
+            start,
+          ];
+          let bottomRange = [
+            end,
+            (end - start) * (clipPosition / 100) + clipMargin / 2,
+          ];
+          return [topRange, bottomRange];
+        }
+
+        //计算range填入scaler参数
+        const clipAxisRange = getClipAxisRange(
+          start,
+          end,
+          clipPosition,
+          clipMargin
+        );
+        let newClipAxisDomain = [];
+        //如果非自适应模式，计算新的domain，传入scaler，适配强制步长或者数量强制
+        if (!isNaN(domain[1]) && !auto) {
+          clipAxisDomain.forEach((domain, index) => {
+            newClipAxisDomain.push(
+              getNewDomain(domain, mode, clipAxisStep[index])
+            );
+          });
+        } else {
+          //如果为刻度自适应，使用原先domain直接传入scaler，使用scaler.ticks来计算出标签集合
+          newClipAxisDomain = clipAxisDomain;
         }
+        //设置scaler，scaler会将数值映射真实的坐标（svg坐标）
+        let clipAxisScaler = [];
+        newClipAxisDomain.forEach((domain, index) => {
+          clipAxisScaler.push(
+            setScaler(scales, type, domain, clipAxisRange[index])
+          );
+        });
+        //clipAxisAllTicks作用是使用scaler.ticks方法,来计算标签集合
+        let clipAxisAllTicks = [];
+        clipAxisScaler.forEach((scaler, index) => {
+          clipAxisAllTicks.push(
+            getAllTicks(scaler, ticks, clipAxisTickCount[index])
+          );
+        });
+
+        let clipAxisTicks = [];
+        clipAxisAllTicks.forEach((allTicks, index) => {
+          clipAxisTicks.push(
+            getTicks(
+              allTicks,
+              type,
+              carousel,
+              showLast,
+              auto,
+              mode,
+              newClipAxisDomain[index],
+              clipAxisTickCount[index],
+              clipAxisStep[index]
+            )
+          );
+        });
+        let lengthWithoutPaddingOuter = length - _paddingOuter;
+        tmp.set(axisType, {
+          ...item,
+          isClipAxis: _isClipAxis,
+          scaler: clipAxisScaler,
+          length,
+          direction,
+          start,
+          end,
+          clipAxisRange,
+          lengthWithoutPaddingOuter,
+          step: [
+            lengthWithoutPaddingOuter / clipAxisAllTicks[0].length,
+            lengthWithoutPaddingOuter / clipAxisAllTicks[1].length,
+          ],
+          allTicks: clipAxisAllTicks,
+          ticks: clipAxisTicks,
+          clipValue,
+        });
       } else {
-        if (auto === false) {
-          switch (mode) {
-            case 'count':
-              _ticks = getYTicks(
-                newDomain[1],
-                newDomain[0],
-                +tickCount
-              );
-              break;
-            case 'step':
-              _ticks = getYTicksByStep(
-                newDomain[1],
-                newDomain[0],
-                +step
-              );
-              break;
+        //计算真正需要的tickCount，如果domain区间太小，不能完全按照count来，需要减少count数
+        const tickCount =
+          type == "ordinal" ? _count : getTickCount(domain, _count, decimal);
+        const { start, end, direction, _paddingOuter, length } =
+          getChartsConfig(orientation, width, height, paddingOuter);
+
+        const range =
+          direction === "horizontal"
+            ? [start, end]
+            : direction === "vertical"
+            ? [end, start]
+            : [0, 0];
+        let newDomain = domain;
+        if (type !== "ordinal" && !isNaN(domain[1]) && !auto) {
+          newDomain = getNewDomain(domain, mode, _step);
+        }
+
+        const scaler = scales[type]().domain(newDomain).range(range);
+
+        scaler.type = type;
+        if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
+        const allTicks = ticks
+          ? ticks
+          : scaler.ticks
+          ? scaler.ticks(tickCount)
+          : scaler.domain();
+        let _ticks = allTicks;
+        //
+        if (type === "ordinal") {
+          if (carousel === false) {
+            _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
+          }
+        } else {
+          if (auto === false) {
+            switch (mode) {
+              case "count":
+                _ticks = getYTicks(newDomain[1], newDomain[0], +tickCount);
+                break;
+              case "step":
+                _ticks = getYTicksByStep(newDomain[1], newDomain[0], +_step);
+                break;
+            }
           }
         }
-      }
-      const lengthWithoutPaddingOuter = length - _paddingOuter;
-      if (type == 'linear' && config.on) {
-        const zeroPosition = scaler(0);
-        if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
-          if (direction === 'horizontal') {
-            xAxisPositions.push({
-              x: zeroPosition,
-              y: 0,
-            });
-          } else if (direction === 'vertical') {
-            xAxisPositions.push({
-              x: 0,
-              y: zeroPosition,
-            });
+        const lengthWithoutPaddingOuter = length - _paddingOuter;
+        if (type == "linear" && config.on) {
+          const zeroPosition = scaler(0);
+          if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
+            if (direction === "horizontal") {
+              xAxisPositions.push({
+                x: zeroPosition,
+                y: 0,
+              });
+            } else if (direction === "vertical") {
+              xAxisPositions.push({
+                x: 0,
+                y: zeroPosition,
+              });
+            }
           }
         }
+        tmp.set(axisType, {
+          ...item,
+          count: _count,
+          isClipAxis: _isClipAxis,
+          scaler,
+          length,
+          direction,
+          start,
+          end,
+          lengthWithoutPaddingOuter,
+          step: lengthWithoutPaddingOuter / allTicks.length,
+          allTicks,
+          ticks: _ticks,
+        });
       }
-      tmp.set(axisType, {
-        ...item,
-        scaler,
-        length,
-        direction,
-        start,
-        end,
-        lengthWithoutPaddingOuter,
-        step: lengthWithoutPaddingOuter / allTicks.length,
-        allTicks,
-        ticks: _ticks,
-      });
     });
 
-    tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
+    tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
     return tmp;
   }, [axes]);
   return _axes;

package/src/hooks/useExtentData.js

@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
-import { group, extent, min as d3Min } from 'd3v7';
+import { useMemo } from "react";
+import { group, extent, min as d3Min, max as d3Max } from "d3v7";
 import {
   getStacks,
   dataYOrZ,
   seriesYOrZ,
   resetStacks,
   getCurrentStack,
-} from '../utils';
+} from "../utils";
 
 const stackData = (data, series) => {
   const dataMap = group(data, (d) => d.x);
@@ -40,7 +40,7 @@ const stackData = (data, series) => {
     max = Math.max(...arr, max);
   });
   dataMap.clear();
-  return [min || 0, max || ((min||0)+100)];
+  return [min || 0, max || (min || 0) + 100];
 };
 
 /**
@@ -61,21 +61,48 @@ export default ({ axes, series, data }) => {
   const x = useMemo(() => [...group(data, (d) => d.x).keys()], [data]);
   const y = stackData(dataY, _series.y);
   const z = stackData(dataZ, _series.z);
-
+  //clipAxisMode如果是auto根据clipDifferenceValue设置clipValue
   return axes.map((item) => {
     const { axisType, domain, type } = item;
     switch (axisType) {
-      case 'x':
+      case "x":
         return {
           ...item,
-          domain: type == 'linear' ? extent(x) : x,
+          domain: type == "linear" ? extent(x) : x,
         };
-      case 'y':
+      case "y": {
+        if (
+          item.axisType == "y" &&
+          item.isClipAxis === true &&
+          item.clipAxisMode == "auto"
+        ) {
+          const _dataY = dataY.map((_item) => _item.y);
+          let _clipValue = Infinity;
+          if (_dataY.length >= 2) {
+            _dataY.sort((a, b) => a - b);
+            let clipDifferenceValueArr = [];
+            for (let i = 0; i < _dataY.length - 1; i++) {
+              clipDifferenceValueArr.push(_dataY[i + 1] - _dataY[i]);
+            }
+            let max = d3Max(clipDifferenceValueArr);
+            if (max >= item.clipDifferenceValue) {
+              let index = clipDifferenceValueArr.indexOf(max);
+              _clipValue = _dataY[index];
+            }
+          }
+          return {
+            ...item,
+            domain: domain ? getDomain(y, domain) : y,
+            clipValue: _clipValue,
+          };
+        }
         return {
           ...item,
           domain: domain ? getDomain(y, domain) : y,
         };
-      case 'z':
+      }
+
+      case "z":
         return {
           ...item,
           domain: domain ? getDomain(z, domain) : z,
@@ -85,5 +112,5 @@ export default ({ axes, series, data }) => {
 };
 
 const getDomain = ([min1, max1], { min, max }) => {
-  return [min !== '' ? +min : min1, max !== '' ? +max : max1];
+  return [min !== "" ? +min : min1, max !== "" ? +max : max1];
 };