onesight-charts 0.0.3 → 0.0.5

package/es/components/download-image/demo/index.js

@@ -0,0 +1,22 @@
+import { useRef } from 'react';
+import Line from "../../line";
+import DownloadImage from "../index.jsx";
+var xAxis = ['07/25', '07/26', '07/27', '07/28', '07/29', '07/30', '07/31'];
+var seriesData = {
+  Facebook: [1002, 831, 960, 750, 1451, 1717, 903],
+  X: [22094, 20075, 17410, 12374, 13413, 13904, 6895]
+};
+export default (function () {
+  var dimensionDOM = useRef(); // 提及趋势 DOM
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dimensionDOM
+  }, /*#__PURE__*/React.createElement(Line, {
+    xAxis: xAxis,
+    seriesData: seriesData
+  }), /*#__PURE__*/React.createElement(DownloadImage, {
+    loading: false,
+    DOM: dimensionDOM,
+    fileName: "download-chart"
+  }));
+});

package/es/components/download-image/index.js

@@ -0,0 +1,63 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Dropdown, Menu } from 'antd';
+import domtoimage from 'dom-to-image';
+import React, { useState } from 'react';
+// import { useIntl } from 'umi';
+import { DownloadFile } from "../../utils/common";
+import "./index.scss";
+function DownloadImage(_ref) {
+  var Loading = _ref.Loading,
+    DOM = _ref.DOM,
+    FileName = _ref.FileName;
+  // const { formatMessage } = useIntl();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visiable = _useState2[0],
+    setVisiable = _useState2[1];
+  // 导出csv 和 png图片
+  var handleMenuFn = function handleMenuFn(value) {
+    if (Loading) {
+      return false;
+    }
+    if (value.key === 'csv') {
+      console.log(value, 'csv');
+    } else {
+      setVisiable(false);
+      setTimeout(function () {
+        domtoimage.toPng(DOM.current).then(function (dataUrl) {
+          DownloadFile(dataUrl, FileName ? FileName : 'filename');
+        }).catch(function (error) {
+          console.error('oops, something went wrong!', error);
+        });
+      }, 500);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dropdown_wrap"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return triggerNode.parentElement;
+    },
+    visiable: true,
+    overlay: /*#__PURE__*/React.createElement(Menu, {
+      className: "dropdown_wrap_menu",
+      onClick: handleMenuFn
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "png"
+    }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement("i", {
+      className: "iconfont iconPNG"
+    })))),
+    trigger: ['click'],
+    placement: "topRight"
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "common-btn common-more a-common-more ant-dropdown-trigger"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "iconfont icongengduo3"
+  }))));
+}
+export default DownloadImage;

package/es/components/icon/index.js

@@ -0,0 +1,16 @@
+import "./iconfont.css";
+function Icon(_ref) {
+  var name = _ref.name,
+    size = _ref.size,
+    color = _ref.color,
+    className = _ref.className;
+  var style = {
+    fontSize: size,
+    color: color
+  };
+  return /*#__PURE__*/React.createElement("i", {
+    className: "iconfont ".concat(name, " ").concat(className || ''),
+    style: style
+  });
+}
+export default Icon;

package/es/components/line/demo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Line from "./index.jsx";
+var xAxis = ['07/25', '07/26', '07/27', '07/28', '07/29', '07/30', '07/31'];
+var seriesData = {
+  Facebook: [1002, 831, 960, 750, 1451, 1717, 903],
+  X: [22094, 20075, 17410, 12374, 13413, 13904, 6895]
+};
+export default (function () {
+  return /*#__PURE__*/React.createElement(Line, {
+    xAxis: xAxis,
+    seriesData: seriesData
+  });
+});

package/es/components/line/index.js

@@ -0,0 +1,293 @@
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import { calculateSeriesTotal, convertSeriesData, dealPath, numberFormatMust, numberFormatNull, toggleAxisPointer } from "../../utils/chartUtils";
+import { defaultChartColors } from "../../utils/colors";
+import { createCustomTooltip } from "./tooltipConfig";
+import "./style.scss";
+function Line(props) {
+  var _props$id = props.id,
+    id = _props$id === void 0 ? 'lineId' : _props$id,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '400px' : _props$height,
+    color = props.color,
+    xAxis = props.xAxis,
+    seriesData = props.seriesData,
+    tooltipClassName = props.tooltipClassName,
+    _props$legendValue = props.legendValue,
+    legendValue = _props$legendValue === void 0 ? true : _props$legendValue,
+    _props$showRate = props.showRate,
+    showRate = _props$showRate === void 0 ? true : _props$showRate,
+    _props$tooltipTotalNa = props.tooltipTotalName,
+    tooltipTotalName = _props$tooltipTotalNa === void 0 ? '总计' : _props$tooltipTotalNa,
+    _props$tooltipPositio = props.tooltipPosition,
+    tooltipPosition = _props$tooltipPositio === void 0 ? true : _props$tooltipPositio;
+  var chartRef = useRef(null);
+  useEffect(function () {
+    ceartChart();
+  }, [seriesData]);
+  var seriesTotal = legendValue ? calculateSeriesTotal(seriesData) : {};
+  var ceartChart = function ceartChart() {
+    var myChart = echarts.init(chartRef.current, null, {
+      renderer: 'svg'
+    });
+    var tooltipConfig = createCustomTooltip({
+      id: id,
+      tooltipClassName: tooltipClassName,
+      myChart: myChart,
+      seriesData: seriesData,
+      tooltipTotalName: tooltipTotalName,
+      showRate: showRate,
+      tooltipPosition: tooltipPosition
+    });
+    var series = convertSeriesData(seriesData);
+    var legendData = Object.keys(seriesData).map(function (item) {
+      return {
+        name: item
+      };
+    });
+    var option = {
+      legend: {
+        data: legendData,
+        x: 'center',
+        type: 'plain',
+        bottom: 0,
+        padding: 0,
+        left: 'center',
+        icon: 'rect',
+        itemWidth: 16,
+        itemHeight: 4,
+        itemGap: 8,
+        formatter: function formatter(name) {
+          var value = legendValue ? numberFormatMust(seriesTotal[name] || 0) : 0;
+          var showName = name;
+          if (seriesData.length >= 4) {
+            var strLen = 15;
+            if (name.length > strLen) {
+              showName = name.substring(0, strLen) + '...';
+            }
+          }
+          return legendValue ? "{labelName|".concat(showName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(showName, "}");
+        },
+        textStyle: {
+          fontWeight: 500,
+          fontSize: 12,
+          color: '#364141',
+          lineHeight: 6,
+          rich: {
+            // 给labelName添加样式
+            labelName: {
+              fontWeight: 500,
+              fontSize: 12,
+              padding: [6, 6, 0, 0]
+            },
+            // 给labelMark添加样式
+            labelMark: {
+              color: '#7A8283',
+              fontSize: 12,
+              padding: [30, 0, 0, 0]
+            }
+          }
+        }
+      },
+      tooltip: tooltipConfig,
+      color: color || defaultChartColors,
+      animation: false,
+      grid: {
+        top: '24px',
+        bottom: 40,
+        left: 4,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color: '#e5e5e5'
+          }
+        },
+        axisTick: {
+          show: true,
+          alignWithLabel: true,
+          length: 5
+        },
+        axisLabel: {
+          interval: 'auto',
+          margin: 12,
+          color: '#515E5F',
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          show: false,
+          interval: 0
+        },
+        boundaryGap: false,
+        data: xAxis
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLabel: {
+          formatter: function formatter(value) {
+            var formatted = numberFormatNull(value);
+            if (formatted.length < 4) {
+              // 假设最大长度为4
+              formatted = '   ' + formatted; // 在前面添加空格
+            }
+            return formatted;
+          },
+          margin: 14,
+          color: '#515E5F',
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            color: '#E5E5E5'
+          }
+        }
+      },
+      series: series
+    };
+    myChart.off('mouseover');
+    myChart.on('mouseover', function (params) {
+      // 操作线上选中点
+      var updateOption = {
+        series: [],
+        legend: {
+          data: []
+        }
+      };
+      option.series.forEach(function (item) {
+        if (params.seriesName === item.name) {
+          item.showSymbol = true;
+          item.data.forEach(function (val, index) {
+            if (index === params.dataIndex) {
+              val.symbolSize = 12;
+            } else {
+              val.symbolSize = 0;
+            }
+          });
+        }
+      });
+      // 操作图例
+      option.legend.data.forEach(function (item) {
+        if (params.seriesName !== item.name) {
+          item.textStyle = {};
+          item.itemStyle = {};
+          item.textStyle.opacity = 0.2;
+          item.itemStyle.opacity = 0.2;
+        }
+      });
+      updateOption.series = option.series;
+      updateOption.legend.data = option.legend.data;
+      myChart.setOption(updateOption);
+    });
+    myChart.off('mouseout');
+    myChart.on('mouseout', function (params) {
+      var updateOption = {
+        series: [],
+        legend: {
+          data: []
+        }
+      };
+      // 操作线上选中点
+      option.series.forEach(function (item) {
+        if (params.seriesName === item.name) {
+          item.showSymbol = false;
+          item.data.forEach(function (val) {
+            val.symbolSize = 8;
+          });
+        }
+      });
+      // 操作图例
+      option.legend.data.forEach(function (item) {
+        item.textStyle = {};
+        item.itemStyle = {};
+        item.textStyle.opacity = 1;
+        item.itemStyle.opacity = 1;
+      });
+      updateOption.series = option.series;
+      updateOption.legend.data = option.legend.data;
+      myChart.setOption(updateOption);
+      var flag = false;
+      var pixelPoint = myChart.convertToPixel({
+        seriesIndex: params.seriesIndex
+      }, [params.dataIndex, params.value]);
+      if (params && params.event && params.event.offsetX) {
+        if (params.dataIndex === 0 && params.event.offsetX >= pixelPoint[0]) {
+          flag = true;
+        } else if (params.dataIndex === xAxis.length - 1 && params.event.offsetX <= pixelPoint[0]) {
+          flag = true;
+        } else if (params.dataIndex !== 0 && params.dataIndex !== xAxis.length - 1) {
+          flag = true;
+        }
+      }
+      if (flag) {
+        myChart.dispatchAction({
+          type: 'highlight',
+          dataIndex: params.dataIndex
+        });
+      }
+      var mouseoutFlag = true;
+      myChart.on('hideTip', function (event) {
+        if (mouseoutFlag) {
+          myChart.dispatchAction({
+            type: 'downplay',
+            dataIndex: params.dataIndex
+          });
+          mouseoutFlag = false;
+        }
+      });
+    });
+    var currentIndex = 0;
+    var flagIndex = 0;
+    myChart.off('showTip');
+    myChart.on('showTip', function (event) {
+      if (flagIndex !== event.dataIndex) {
+        toggleAxisPointer(myChart, true);
+        myChart.dispatchAction({
+          type: 'highlight',
+          dataIndex: event.dataIndex
+        });
+        currentIndex = event.dataIndex;
+        flagIndex = event.dataIndex;
+      }
+    });
+    myChart.setOption(option, true);
+
+    // 提高图例清晰度
+    myChart.off('rendered');
+    myChart.on('rendered', function () {
+      dealPath(id);
+    });
+
+    // 增强交互效果
+    var element = document.querySelector(".".concat(id));
+    if (element) {
+      element.addEventListener('mouseleave', function (event) {
+        if (event && element.offsetHeight && event.offsetY < element.offsetHeight - 2) {
+          toggleAxisPointer(myChart, false);
+          flagIndex = 0;
+          myChart.dispatchAction({
+            type: 'downplay',
+            dataIndex: currentIndex
+          });
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: chartRef,
+    id: id,
+    style: {
+      width: width,
+      height: height
+    }
+  });
+}
+export default Line;

package/es/components/line/tooltipConfig.js

@@ -0,0 +1,93 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { changeDataTypeEn, computeFloatNull, computePos } from "../../utils/chartUtils";
+export var createCustomTooltip = function createCustomTooltip(_ref) {
+  var id = _ref.id,
+    tooltipClassName = _ref.tooltipClassName,
+    myChart = _ref.myChart,
+    seriesData = _ref.seriesData,
+    tooltipTotalName = _ref.tooltipTotalName,
+    showRate = _ref.showRate,
+    tooltipPosition = _ref.tooltipPosition;
+  return {
+    className: "onesight-line-tooltip ".concat(tooltipClassName, " ").concat(id),
+    trigger: 'axis',
+    enterable: true,
+    axisPointer: {
+      z: 1,
+      show: true,
+      type: 'line',
+      lineStyle: {
+        color: 'rgba(0, 0, 0, 0.24)',
+        type: 'solid',
+        width: 2
+      }
+    },
+    padding: 0,
+    // showContent: true,
+    // alwaysShowContent: true,
+    // hideDelay: 1000000000,
+    position: tooltipPosition ? function (point, params) {
+      var pixelPoint = myChart.convertToPixel({
+        seriesIndex: params[0].seriesIndex
+      }, [params[0].dataIndex, params[0].value]);
+      var element = document.querySelector(".".concat(id));
+      var yValue = 0;
+      var currentWidth = 0;
+      if (element) {
+        if (element.offsetHeight) {
+          yValue = -element.offsetHeight + 14;
+        }
+        if (element.offsetWidth) {
+          currentWidth = element.offsetWidth;
+        }
+      }
+      var x = computePos(pixelPoint[0], currentWidth);
+      return [x, yValue];
+    } : undefined,
+    formatter: function formatter(res) {
+      if (!res.some(function (i) {
+        return i.value !== undefined && i.value !== null;
+      })) {
+        return '';
+      }
+      var total = 0;
+      var dataArr = _toConsumableArray(res);
+      res.forEach(function (v) {
+        total += v.value || 0;
+      });
+      var resNameArr = res.map(function (item) {
+        return item.seriesName;
+      });
+      var resColorArr = res.map(function (item) {
+        return item.color;
+      });
+      var allName = Object.keys(seriesData);
+      var currentName = allName.filter(function (item) {
+        return resNameArr.includes(item);
+      });
+      dataArr = currentName.map(function (item, index) {
+        var dataIndex = res[0].dataIndex;
+        var num = seriesData[item][dataIndex];
+        return {
+          color: resColorArr[index],
+          seriesName: item,
+          value: num,
+          proportion: num / total,
+          date: res[0].axisValue
+        };
+      });
+      var marginRight = 7;
+      if (dataArr.length > 4) {
+        marginRight = 3;
+      }
+      return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(res[0].axisValue, "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
+        return "\n                    <div class='item' key='".concat(item.seriesName, "'>\n                        <div class='l'>\n                        <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                        <span>\n                            ").concat(item.seriesName, "\n                        </span>\n                        </div>\n                        <div class='r'>\n                        ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                        <span class='num'>\n                            ").concat(changeDataTypeEn(item.value), "\n                        </span>\n                        </div>\n                    </div>\n                    ");
+      }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
+    }
+  };
+};