onesight-charts 0.0.1 → 0.0.2

package/dist/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/dist/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/dist/components/download-image/index.scss

@@ -0,0 +1,64 @@
+.dropdown_wrap {
+  .dropdown_wrap_menu {
+    z-index: 100;
+    padding: 8px 8px 4px;
+    min-width: 120px;
+    border: 1px solid #dddddd;
+    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 8%);
+    border-radius: 8px;
+
+    li {
+      padding: 0px 8px !important;
+      height: 32px;
+      border-radius: 6px;
+      margin-bottom: 4px;
+      font-weight: bold;
+      font-size: 14px;
+      color: #273333;
+    }
+
+    a > i {
+      margin-right: 8px;
+    }
+
+    .disabled {
+      background-color: #ffffff;
+      color: #ccc;
+
+      &:hover {
+        background-color: #f3f4f4;
+      }
+    }
+  }
+
+  .common-more {
+    width: 32px;
+    height: 32px;
+  }
+
+  .iconXLS,
+  .iconPNG {
+    font-size: 14px;
+    margin-right: 4px;
+    margin-top: -2px;
+  }
+
+  .icongengduo2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  &:hover {
+    .icongengduo2 {
+      color: #1da9a0;
+      border-color: #1da9a0;
+    }
+  }
+}

package/dist/components/icon/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4645053 */
+  src: url('iconfont.woff2?t=1722927505240') format('woff2'),
+       url('iconfont.woff?t=1722927505240') format('woff'),
+       url('iconfont.ttf?t=1722927505240') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-left:before {
+  content: "\e60b";
+}
+
+.icon-right:before {
+  content: "\e60c";
+}
+

package/dist/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/dist/components/line/demo.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import LineChart from "./index.jsx";
+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(LineChart, {
+  return /*#__PURE__*/React.createElement(Line, {
     xAxis: xAxis,
     seriesData: seriesData
   });

package/dist/components/line/index.js

@@ -29,7 +29,6 @@ function Line(props) {
   }, [seriesData]);
   var seriesTotal = legendValue ? calculateSeriesTotal(seriesData) : {};
   var ceartChart = function ceartChart() {
-    var chartColor = color || defaultChartColors;
     var myChart = echarts.init(chartRef.current, null, {
       renderer: 'svg'
     });
@@ -93,7 +92,7 @@ function Line(props) {
         }
       },
       tooltip: tooltipConfig,
-      color: chartColor,
+      color: color || defaultChartColors,
       animation: false,
       grid: {
         top: '24px',

package/dist/components/pie/demo/demo.js

@@ -0,0 +1,22 @@
+import Pie from "../index.jsx";
+var seriesData = [{
+  name: '积极',
+  value: 30,
+  percentage: 0.3659,
+  color: '#1DA9A0'
+}, {
+  name: '消极',
+  value: 8,
+  percentage: 0.0976,
+  color: '#EE6666'
+}, {
+  name: '中性',
+  value: 44,
+  percentage: 0.5365,
+  color: '#bbbbbb'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Pie, {
+    seriesData: seriesData
+  });
+});

package/dist/components/pie/demo/legendDemo.js

@@ -0,0 +1,24 @@
+import Pie from "../index.jsx";
+var seriesData = [{
+  name: '积极',
+  value: 30,
+  percentage: 0.3659,
+  color: '#1DA9A0'
+}, {
+  name: '消极',
+  value: 8,
+  percentage: 0.0976,
+  color: '#EE6666'
+}, {
+  name: '中性',
+  value: 44,
+  percentage: 0.5365,
+  color: '#bbbbbb'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Pie, {
+    seriesData: seriesData,
+    legendNumShow: false,
+    legendPerShow: false
+  });
+});

package/dist/components/pie/demo/orderDemo.js

@@ -0,0 +1,25 @@
+import Pie from "../index.jsx";
+var seriesData = [{
+  name: '积极',
+  value: 30,
+  percentage: 0.3659,
+  color: '#1DA9A0'
+}, {
+  name: '消极',
+  value: 8,
+  percentage: 0.0976,
+  color: '#EE6666'
+}, {
+  name: '中性',
+  value: 44,
+  percentage: 0.5365,
+  color: '#bbbbbb'
+}];
+var order = ['积极', '消极', '中性'];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Pie, {
+    seriesData: seriesData,
+    order: order,
+    id: "orderId"
+  });
+});

package/dist/components/pie/demo/paginationDemo.js

@@ -0,0 +1,73 @@
+import Pie from "../index.jsx";
+var seriesData = [{
+  name: '积极',
+  value: 30,
+  percentage: 0.3659,
+  color: '#1DA9A0'
+}, {
+  name: '消极',
+  value: 8,
+  percentage: 0.0976,
+  color: '#EE6666'
+}, {
+  name: '中性',
+  value: 44,
+  percentage: 0.5365,
+  color: '#bbbbbb'
+}, {
+  name: '兴奋',
+  value: 15,
+  percentage: 0.1829,
+  color: '#91CC75'
+}, {
+  name: '失望',
+  value: 6,
+  percentage: 0.0732,
+  color: '#FAC858'
+}, {
+  name: '惊讶',
+  value: 10,
+  percentage: 0.122,
+  color: '#73C0DE'
+}, {
+  name: '愤怒',
+  value: 5,
+  percentage: 0.061,
+  color: '#FC8452'
+}, {
+  name: '满意',
+  value: 20,
+  percentage: 0.2439,
+  color: '#9A60B4'
+}, {
+  name: '困惑',
+  value: 7,
+  percentage: 0.0854,
+  color: '#EA7CCC'
+}, {
+  name: '期待',
+  value: 12,
+  percentage: 0.1463,
+  color: '#5470C6'
+}, {
+  name: '担忧',
+  value: 9,
+  percentage: 0.1098,
+  color: '#FF9A7A'
+}, {
+  name: '平静',
+  value: 18,
+  percentage: 0.2195,
+  color: '#7ED3F4'
+}, {
+  name: '好奇',
+  value: 11,
+  percentage: 0.1341,
+  color: '#C1232B'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Pie, {
+    seriesData: seriesData,
+    legendNumber: 5
+  });
+});

package/dist/components/pie/demo/tooltipDemo.js

@@ -0,0 +1,24 @@
+import Pie from "../index.jsx";
+var seriesData = [{
+  name: '积极',
+  value: 30,
+  percentage: 0.3659,
+  color: '#1DA9A0'
+}, {
+  name: '消极',
+  value: 8,
+  percentage: 0.0976,
+  color: '#EE6666'
+}, {
+  name: '中性',
+  value: 44,
+  percentage: 0.5365,
+  color: '#bbbbbb'
+}];
+export default (function () {
+  return /*#__PURE__*/React.createElement(Pie, {
+    seriesData: seriesData,
+    tooltipName: "\u6570\u91CF",
+    tooltipPerShow: false
+  });
+});

package/dist/components/pie/index.js

@@ -1,25 +1,121 @@
+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 _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 _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 * as echarts from 'echarts';
-import { useEffect } from 'react';
-import "./index.scss";
-export default function Pie() {
-  var chartID = 'chart-pie';
+import { useEffect, useRef, useState } from 'react';
+import { dealSort, numberFormatNull, sumValues, transformedSeriesData } from "../../utils/chartUtils";
+import { defaultChartColors } from "../../utils/colors";
+import Legend from "./legend";
+import "./style.scss";
+import { createCustomTooltip } from "./tooltipConfig";
+function Pie(props) {
+  var _props$id = props.id,
+    id = _props$id === void 0 ? 'pieId' : _props$id,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '222px' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '320px' : _props$height,
+    color = props.color,
+    _props$valueType = props.valueType,
+    valueType = _props$valueType === void 0 ? 'value' : _props$valueType,
+    _props$seriesData = props.seriesData,
+    seriesData = _props$seriesData === void 0 ? [] : _props$seriesData,
+    _props$radius = props.radius,
+    radius = _props$radius === void 0 ? [70, 95] : _props$radius,
+    emphasisRich = props.emphasisRich,
+    _props$tooltipNumShow = props.tooltipNumShow,
+    tooltipNumShow = _props$tooltipNumShow === void 0 ? true : _props$tooltipNumShow,
+    _props$tooltipPerShow = props.tooltipPerShow,
+    tooltipPerShow = _props$tooltipPerShow === void 0 ? true : _props$tooltipPerShow,
+    _props$centerShow = props.centerShow,
+    centerShow = _props$centerShow === void 0 ? true : _props$centerShow,
+    _props$centerName = props.centerName,
+    centerName = _props$centerName === void 0 ? '提及数' : _props$centerName,
+    _props$tooltipShow = props.tooltipShow,
+    tooltipShow = _props$tooltipShow === void 0 ? true : _props$tooltipShow,
+    _props$tooltipName = props.tooltipName,
+    tooltipName = _props$tooltipName === void 0 ? '提及数' : _props$tooltipName,
+    _props$legendPerShow = props.legendPerShow,
+    legendPerShow = _props$legendPerShow === void 0 ? true : _props$legendPerShow,
+    _props$legendNumShow = props.legendNumShow,
+    legendNumShow = _props$legendNumShow === void 0 ? true : _props$legendNumShow,
+    _props$legendNumber = props.legendNumber,
+    legendNumber = _props$legendNumber === void 0 ? 10 : _props$legendNumber,
+    order = props.order,
+    handleClick = props.handleClick;
+  var chartRef = useRef();
+  var chart = useRef(null);
+  var currentPage = useRef(1);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    legendData = _useState2[0],
+    setLegendData = _useState2[1];
   useEffect(function () {
     ceartChart();
-  }, []);
+  }, [JSON.stringify(seriesData)]);
+  var chartColor = color || defaultChartColors;
   var ceartChart = function ceartChart() {
-    var myChart = echarts.init(document.getElementById(chartID), null, {
+    var myChart = echarts.init(chartRef.current, null, {
       renderer: 'svg'
     });
+    chart.current = myChart;
+    dealSort(seriesData, order);
+    var dealData = transformedSeriesData(JSON.parse(JSON.stringify(seriesData)));
+    dealData.forEach(function (item) {
+      if (item.value === 0) {
+        item.value = -1;
+      }
+    });
+    var tooltipConfig = createCustomTooltip({
+      tooltipShow: tooltipShow,
+      chartColor: chartColor,
+      seriesData: seriesData,
+      tooltipPerShow: tooltipPerShow,
+      tooltipNumShow: tooltipNumShow,
+      valueType: valueType,
+      tooltipName: tooltipName
+    });
+    var total = sumValues(seriesData);
     var option = {
-      tooltip: {
-        show: false,
-        className: 'pie-tooltip',
-        trigger: 'item',
-        padding: 0
+      title: {
+        show: centerShow,
+        text: numberFormatNull(total),
+        textStyle: {
+          fontSize: 24,
+          fontWeight: 700,
+          fontFamily: '思源黑体 Bold',
+          color: '#273333'
+        },
+        left: 'center',
+        top: '41%'
+      },
+      graphic: {
+        elements: [{
+          type: 'text',
+          left: 'center',
+          top: '54%',
+          style: {
+            text: centerName,
+            fontSize: 14,
+            fontWeight: 500,
+            fontFamily: '思源黑体 Bold',
+            fill: '#364141',
+            opacity: centerShow ? 1 : 0
+          }
+        }]
       },
+      color: chartColor,
+      tooltip: tooltipConfig,
       series: [{
         type: 'pie',
-        radius: [70, 95],
+        radius: radius,
         itemStyle: {
           borderColor: '#fff',
           borderWidth: 2
@@ -31,10 +127,10 @@ export default function Pie() {
         emphasis: {
           label: {
             show: true,
-            formatter: function formatter() {
+            formatter: function formatter(res) {
               return '';
             },
-            rich: {
+            rich: emphasisRich || {
               n: {
                 height: 40,
                 padding: [0, 0, 12, 0],
@@ -55,40 +151,46 @@ export default function Pie() {
             }
           }
         },
-        data: [{
-          value: 5325,
-          name: 'positive',
-          proportion: 0.0595,
-          type: 1,
-          itemStyle: {
-            color: '#1DA9A0'
-          }
-        }, {
-          value: 1879,
-          name: 'negative',
-          proportion: 0.021,
-          type: 2,
-          itemStyle: {
-            color: '#EE6666'
-          }
-        }, {
-          value: 82344,
-          name: 'neutral',
-          proportion: 0.9195,
-          type: 3,
-          itemStyle: {
-            color: '#bbbbbb'
-          }
-        }],
+        data: dealData,
         selectedMode: true,
         selectedOffset: 0,
         minAngle: 3
       }]
     };
     myChart.setOption(option);
+    var legendShowData = JSON.parse(JSON.stringify(seriesData));
+    setLegendData(legendShowData.slice(0, legendNumber));
+    myChart.off('click');
+    myChart.on('click', 'series', function (params) {
+      handleClick && handleClick(params.data);
+    });
+  };
+  var paginationCb = function paginationCb(currData, page) {
+    setLegendData(_toConsumableArray(currData));
+    currentPage.current = page;
   };
   return /*#__PURE__*/React.createElement("div", {
-    id: chartID,
-    className: "onesight-chart-pie"
-  });
-}
+    id: id,
+    className: "onesight-pie-chart-wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-pie",
+    ref: chartRef,
+    style: {
+      width: width,
+      height: height
+    }
+  }), /*#__PURE__*/React.createElement(Legend, {
+    seriesData: seriesData,
+    legendData: legendData,
+    chartColor: chartColor,
+    legendPerShow: legendPerShow,
+    legendNumShow: legendNumShow,
+    valueType: valueType,
+    chart: chart,
+    handleClick: handleClick,
+    legendNumber: legendNumber,
+    currentPage: currentPage,
+    paginationCb: paginationCb
+  }));
+}
+export default Pie;