bar-charts-react/lib/utils/utils.js

This is a flexible bar charts

/**
 * @Author: wyy
 * @Date: 2019/9/27
 * @Description:
 **/
import { BASE_COLOR, BASE_FONT } from "./globalConst";
export var strokeLine = function strokeLine(ctx, startCoord, endCoord) {
  var width = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
  var color = arguments.length > 4 ? arguments[4] : undefined;
  var dash = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
  ctx.beginPath();
  if (dash !== undefined) ctx.setLineDash(dash);
  ctx.lineWidth = width;
  ctx.strokeStyle = color;
  ctx.moveTo(startCoord.x, startCoord.y);
  ctx.lineTo(endCoord.x, endCoord.y);
  ctx.closePath();
  ctx.stroke();
};
export var strokeBar = function strokeBar(ctx, startCoord, width, height) {
  var bgColor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : BASE_COLOR;
  var borderWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
  var borderColor = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : BASE_COLOR;
  ctx.fillStyle = bgColor;
  ctx.fillRect(startCoord.x, startCoord.y, width, height);

  if (borderWidth !== undefined) {
    ctx.beginPath();
    ctx.lineWidth = borderWidth;
    ctx.strokeStyle = borderColor;
    ctx.moveTo(startCoord.x, startCoord.y);
    ctx.lineTo(startCoord.x, startCoord.y + height);
    ctx.lineTo(startCoord.x + width, startCoord.y + height);
    ctx.lineTo(startCoord.x + width, startCoord.y);
    ctx.lineTo(startCoord.x, startCoord.y);
    ctx.closePath();
    ctx.stroke();
  }
};
export var writeText = function writeText(ctx, text, startCoord) {
  var font = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : BASE_FONT;
  var color = arguments.length > 4 ? arguments[4] : undefined;
  var textAlign = arguments.length > 5 ? arguments[5] : undefined;
  var baseLine = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : "bottom";
  ctx.font = font;
  ctx.fillStyle = color;
  ctx.textAlign = textAlign; // 可选值：left、center、right

  ctx.textBaseline = baseLine; // 可选值：top、middle、bottom

  ctx.fillText(text, startCoord.x, startCoord.y);
};
export var roundRect = function roundRect(ctx, x, y, w, h, r, bgColor) {
  if (w < 2 * r) r = w / 2;
  if (w < 2 * r) r = h / 2;
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  ctx.arcTo(x + w, y + h, x, y + h, r);
  ctx.arcTo(x, y + h, x, y, r);
  ctx.arcTo(x, y, x + w, y, r);
  ctx.closePath();
  ctx.fillStyle = bgColor;
  ctx.fill();
};
export var circlePoint = function circlePoint(ctx, x, y, r, bgColor) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = bgColor;
  ctx.fill();
}; // 获取一组文本数据中的最大宽度值

export var getTextMaxWidth = function getTextMaxWidth(ctx, data, font) {
  var isSingle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  var maxWidth = 0;
  ctx.font = font;

  if (isSingle) {
    maxWidth = ctx.measureText(data).width;
  } else {
    data.map(function (item) {
      maxWidth = Math.max(ctx.measureText(item.title).width, maxWidth);
    });
  }

  return Math.round(maxWidth);
}; // 提取字符串中的数字

export var getNumber = function getNumber() {
  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
  var resArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

  if (str) {
    var patt = /([0-9]\d*)(\.\d*)?/g,
        res = str.match(patt);

    if (res) {
      if (resArr) {
        return res;
      } else {
        return res[0];
      }
    } else {
      return res;
    }
  } else {
    console.error("getNumber function does't get transmit params!");
  }
}; // 获取一组数据中的最大值

export var getMaxNumber = function getMaxNumber(arr) {
  var maxNumber = 0;
  arr.map(function (item) {
    maxNumber = maxNumber > getNumber(item) ? maxNumber : getNumber(item);
  });
  return maxNumber;
};