@daoyi/nmtl-ui 2.0.1-beta.45 → 2.0.1-beta.47

package/lib/components/SNA.js

@@ -1 +1,324 @@
-import t,{useMemo as e,useEffect as n}from"react";import r from"prop-types";import{e as a,s as o,c as i,o as c,g as l,h as s,l as d,m as f,i as p,j as u,x as h,y as g,r as m,k as y,z as x,n as w,p as N}from"./vendor-851c6356.js";import{E as v}from"./ExtraTools-f10a66a8.js";import{Tooltip as k,IconButton as b}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";import"./_rollupPluginBabelHelpers-fde6d1c6.js";import"./Tooltip-b7eb966d.js";import"./dataExport-f418e6fe.js";const A=e=>{let{renderSNA:n}=e;return t.createElement("div",{id:"resetBtn"},t.createElement(k,{title:"回到原來位置與大小"},t.createElement(b,{onClick:()=>n()},t.createElement(a,null))))};A.propTypes={renderSNA:r.func.isRequired};o(".SNA {\n  overflow: hidden;\n  object-fit: contain;\n  position: relative;\n  font-size: 0.75rem;\n  width: 100%; }\n  .SNA--smallSize .node {\n    padding-top: 8px;\n    font-size: 0.75rem;\n    width: 3rem;\n    height: 3rem;\n    overflow: hidden;\n    white-space: pre-wrap;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical; }\n  .SNA .node {\n    background-color: #4a4e69;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 20px;\n    font-weight: 500;\n    height: 54px;\n    width: 54px;\n    padding-top: 15px;\n    position: absolute;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: grab; }\n  .SNA .links line {\n    stroke: #c7bfb4;\n    stroke-width: 2; }\n  .SNA .mainNode {\n    fill: #4e3a16; }\n  .SNA .person {\n    fill: #867b3a; }\n  .SNA .publication {\n    fill: #825c0d; }\n  .SNA .article {\n    fill: #afafaf; }\n  .SNA .keyword {\n    fill: #fcfae8; }\n  .SNA .org {\n    fill: #000000; }\n  .SNA #resetBtn {\n    float: right; }\n  .SNA #network-graph svg {\n    width: 100%;\n    height: 100%; }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; }\n    .SNA .node {\n      background-color: #4a4e69;\n      border-radius: 50%;\n      color: #fff;\n      font-size: 1px;\n      font-weight: 500;\n      height: 44px;\n      width: 44px;\n      padding-top: 12px;\n      position: absolute;\n      text-align: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: grab; } }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; } }\n");var S=function(r){var a,o=r.className,k=r.intl,b=r.exclude,S=r.distance,E=r.SNAData,C=r.handleClickNodeGoto,M=r.DownloadExcel,j=r.width,z=r.height,D=r.fontColor,T=r.backgroundColor,F=r.iconColor;if(!E||0===E.nodes.length)return t.createElement("div",{className:"noData"},k?k.formatMessage({id:"common.noData"}):"暫無資料");var O=e((function(){return screen.width>1050?j:screen.width-80}),[screen.width]),B=e((function(){return screen.width>1050?z:screen.height-300}),[screen.width]),q=function(t,e,n){var r=function(t,e,n){var r=.5*(e.x+t.x),a=.5*(e.y+t.y),o=e.x-t.x,i=e.y-t.y,c=Math.pow(Math.pow(o,2)+Math.pow(i,2),.5);return{qx:r-i*n/c,qy:a+o*n/c}}(t,e,n),a=r.qx,o=r.qy;return isNaN(a)?"M".concat(t.x,", ").concat(t.y," Q0 0 ").concat(e.x," ").concat(e.y):"M".concat(t.x,", ").concat(t.y," Q").concat(a," ").concat(o," ").concat(e.x," ").concat(e.y)},I=function(t){var e=8.5,n="-0 -".concat(e," ").concat(17," ").concat(17),r="M 0,-".concat(6.800000000000001," L ").concat(13.600000000000001," ,0 L 0,").concat(6.800000000000001),o=c(l),i=t.links.map((function(t){return Object.create(t)})),v=t.nodes.map((function(t){return Object.create(t)})),b=s(v).force("link",d(i).id((function(t){return t.index})).distance(50)).force("charge",f().strength(-200).distanceMax(1e3)).force("center",p(O/2,B/2)).force("collide",u().radius((function(){return 13.5})).strength(1).iterations(10)).force("x",h(O/2)).force("y",g(B/2)).force("radial",m(100,O/1.5,B/1.5)),A=y("#sna-graph").append("svg").attr("viewBox",[0,0,O,B]).style("background-color",T);A.append("defs").append("marker").attr("id","arrowhead").attr("viewBox",n).attr("refX",23.8).attr("refY",0).attr("orient","auto").attr("markerWidth",15.3).attr("markerHeight",15.3).attr("xoverflow","visible").append("svg:path").attr("d",r).attr("fill","#999").style("stroke","none"),a=A.append("g");x().scaleExtent([.5,20]).extent([[0,0],[O,B]]).on("zoom",(function(){a.attr("transform",N.transform)}))(A);var S=a.append("g").attr("stroke","#999").attr("stroke-opacity",.6).selectAll("line").data(i).join("path").attr("fill","none").attr("stroke-dasharray",(function(t){return"protege"===t.ontology?"2,5,3":""})).attr("key",(function(t){return t.type})),E=a.append("g").attr("stroke","#fff").attr("stroke-width",1.5).selectAll("circle").data(v).join("circle").attr("r",(function(t){return"mainNode"===t.type?13.5:e})).attr("fill",(function(t){return o(t.type)})).attr("key",(function(t){return t.type})).attr("class",(function(t){return"node node-".concat(t.id," ").concat(t.type&&"organization"===t.type?"org":"person"===t.type?"person":"publication"===t.type?"publication":"mainNode"===t.type?"mainNode":"article"===t.type?"article":"keyword"===t.type?"keyword":"event"===t.type?"event":"")})).on("click",(function(t){return t.hasClick?C({name:t.name,id:t.id,type:t.type}):null})).call(function(t){return w().on("start",(function(e){N.active||t.alphaTarget(.3).restart(),e.fx=e.x,e.fy=e.y})).on("drag",(function(t){t.fx=N.x>O-10||N.x<20?t.x:N.x,t.fy=N.y>B-10||N.y<20?t.y:N.y}))}(b));E.append("title").text((function(t){return"".concat(t.name,"-").concat(function(t){switch(t){case"mainNode":return k?k.formatMessage({id:"SNA.search.center"}):"主要搜尋中心";case"organization":return k?k.formatMessage({id:"SNA.organization"}):"組織";case"person":return k?k.formatMessage({id:"SNA.author"}):"作家";case"publication":return k?k.formatMessage({id:"SNA.publication"}):"作家";case"article":return k?k.formatMessage({id:"SNA.article"}):"單篇作品";case"keyword":return k?k.formatMessage({id:"SNA.keyword"}):"關鍵字";case"event":return k?k.formatMessage({id:"SNA.event"}):"事件";default:return""}}(t.type))}));var M=a.append("g").selectAll("text").data(v).join("text").attr("fill",D).attr("text-anchor","middle").attr("key",(function(t){return t.type})).style("color","#fff").style("font-size","14px").text((function(t){return t.name})),j=a.selectAll(".edgepath").data(i).enter().append("path").attr("class","edgepath").attr("fill-opacity",0).attr("stroke-opacity",0).attr("id",(function(t,e){return"edgepath".concat(e)})).style("pointer-events","none");a.selectAll(".edgelabel").data(i).enter().append("text").style("pointer-events","none").attr("class","edgelabel").attr("font-size","10px").attr("fill","#aaa").attr("visibility","visible").attr("key",(function(t){return t.type})).attr("id",(function(t,e){return"edgelabel".concat(e)})).append("textPath").attr("xlink:href",(function(t,e){return"#edgepath".concat(e)})).style("text-anchor","middle").style("pointer-events","none").attr("startOffset","50%").text((function(t){return t.property})),b.on("tick",(function(){v.forEach((function(t){t.x>=O-20&&(t.x=O-20),t.y>=B-20&&(t.y=B-20),t.x<=20&&(t.x=20),t.y<=20&&(t.y=20)})),S.attr("d",(function(t){return q(t.source,t.target,30)})),E.attr("cx",(function(t){return t.x})).attr("cy",(function(t){return t.y})),M.attr("x",(function(t){return t.x})).attr("y",(function(t){return t.y-e})),j.attr("d",(function(t){return q(t.source,t.target,30)}))}))},G=function(){if(E&&E.nodes&&E.nodes.length>0){var t=document.getElementById("sna-graph");t&&t.childNodes[0]&&t.removeChild(t.childNodes[0]),I(E)}};return n((function(){G()}),[E]),t.createElement("div",{className:i("SNA",{"SNA--smallSize":S<200},o),style:{contentWidth:O,contentHeight:B,backgroundColor:T}},t.createElement(v,{intl:k,data:E,iconColor:F,domToImageId:"sna-graph",FontSizeTargets:["#sna-graph svg g text"],exclude:b,DownloadExcel:M,fullscreenDomId:"sna-graph"}),t.createElement(A,{renderSNA:G}),t.createElement("div",{id:"sna-graph"}))};S.defaultProps={className:void 0,intl:void 0,width:1050,height:600,distance:400,SNAData:null,fontColor:"#000000",backgroundColor:"#FFFFFF",iconColor:"#825c0d",exclude:["downloadXls","downloadTsv"],handleClickNodeGoto:null,DownloadExcel:void 0},S.propTypes={className:r.string,intl:r.objectOf(r.any),width:r.number,height:r.number,distance:r.number,SNAData:r.objectOf(r.any),fontColor:r.string,backgroundColor:r.string,iconColor:r.string,exclude:r.arrayOf(r.string),handleClickNodeGoto:r.func,DownloadExcel:r.oneOfType([r.node,r.func])};export{S as default};
+import React__default, { useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { e as default_1, s as styleInject, c as classNames, o as ordinal, g as category10, h as simulation, l as link, m as manyBody, i as center, j as collide, x, y, r as radial, k as d3Select, z as zoom, n as drag, p as event } from './vendor-851c6356.js';
+import { E as ExtraTools } from './ExtraTools-f10a66a8.js';
+import { Tooltip, IconButton } from '@material-ui/core';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import './_rollupPluginBabelHelpers-fde6d1c6.js';
+import './Tooltip-b7eb966d.js';
+import './dataExport-f418e6fe.js';
+
+const ResetBtn = _ref => {
+  let {
+    renderSNA
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "resetBtn"
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "\u56DE\u5230\u539F\u4F86\u4F4D\u7F6E\u8207\u5927\u5C0F"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: () => renderSNA()
+  }, /*#__PURE__*/React__default.createElement(default_1, null))));
+};
+ResetBtn.propTypes = {
+  renderSNA: PropTypes.func.isRequired
+};
+
+var css_248z = ".SNA {\n  overflow: hidden;\n  object-fit: contain;\n  position: relative;\n  font-size: 0.75rem;\n  width: 100%; }\n  .SNA--smallSize .node {\n    padding-top: 8px;\n    font-size: 0.75rem;\n    width: 3rem;\n    height: 3rem;\n    overflow: hidden;\n    white-space: pre-wrap;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical; }\n  .SNA .node {\n    background-color: #4a4e69;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 20px;\n    font-weight: 500;\n    height: 54px;\n    width: 54px;\n    padding-top: 15px;\n    position: absolute;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: grab; }\n  .SNA .links line {\n    stroke: #c7bfb4;\n    stroke-width: 2; }\n  .SNA .mainNode {\n    fill: #4e3a16; }\n  .SNA .person {\n    fill: #867b3a; }\n  .SNA .publication {\n    fill: #825c0d; }\n  .SNA .article {\n    fill: #afafaf; }\n  .SNA .keyword {\n    fill: #fcfae8; }\n  .SNA .org {\n    fill: #000000; }\n  .SNA #resetBtn {\n    float: right; }\n  .SNA #network-graph svg {\n    width: 100%;\n    height: 100%; }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; }\n    .SNA .node {\n      background-color: #4a4e69;\n      border-radius: 50%;\n      color: #fff;\n      font-size: 1px;\n      font-weight: 500;\n      height: 44px;\n      width: 44px;\n      padding-top: 12px;\n      position: absolute;\n      text-align: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      cursor: grab; } }\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px; } }\n";
+styleInject(css_248z);
+
+/* eslint-disable indent */
+var SNA = function SNA(props) {
+  // common
+  var className = props.className,
+    intl = props.intl,
+    exclude = props.exclude,
+    distance = props.distance,
+    SNAData = props.SNAData,
+    handleClickNodeGoto = props.handleClickNodeGoto,
+    DownloadExcel = props.DownloadExcel;
+  // styles
+  var width = props.width,
+    height = props.height,
+    fontColor = props.fontColor,
+    backgroundColor = props.backgroundColor,
+    iconColor = props.iconColor;
+  var g;
+  if (!SNAData || SNAData.nodes.length === 0) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "noData"
+    }, intl ? intl.formatMessage({
+      id: 'common.noData'
+    }) : '暫無資料');
+  }
+  var contentWidth = useMemo(function () {
+    return screen.width > 1050 ? width : screen.width - 80;
+  }, [screen.width]);
+  var contentHeight = useMemo(function () {
+    return screen.width > 1050 ? height : screen.height - 300;
+  }, [screen.width]);
+  var translateType = function translateType(type) {
+    switch (type) {
+      case 'mainNode':
+        // 主要搜尋中心
+        return intl ? intl.formatMessage({
+          id: 'SNA.search.center'
+        }) : '主要搜尋中心';
+      case 'organization':
+        // 組織
+        return intl ? intl.formatMessage({
+          id: 'SNA.organization'
+        }) : '組織';
+      case 'person':
+        // 作家
+        return intl ? intl.formatMessage({
+          id: 'SNA.author'
+        }) : '作家';
+      case 'publication':
+        // 著作
+        return intl ? intl.formatMessage({
+          id: 'SNA.publication'
+        }) : '作家';
+      case 'article':
+        // 單篇作品
+        return intl ? intl.formatMessage({
+          id: 'SNA.article'
+        }) : '單篇作品';
+      case 'keyword':
+        // 關鍵字
+        return intl ? intl.formatMessage({
+          id: 'SNA.keyword'
+        }) : '關鍵字';
+      case 'event':
+        // 事件
+        return intl ? intl.formatMessage({
+          id: 'SNA.event'
+        }) : '事件';
+      default:
+        return '';
+    }
+  };
+  var drag$1 = function drag$1(simulation) {
+    function dragstarted(d) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      d.fx = d.x;
+      d.fy = d.y;
+    }
+    function dragged(d) {
+      d.fx = event.x > contentWidth - 10 || event.x < 20 ? d.x : event.x;
+      d.fy = event.y > contentHeight - 10 || event.y < 20 ? d.y : event.y;
+    }
+    return drag().on('start', dragstarted).on('drag', dragged);
+  };
+  var calculateCurve = function calculateCurve(source, target, curveLen) {
+    var mx = (target.x + source.x) * 0.5;
+    var my = (target.y + source.y) * 0.5;
+    var tsx = target.x - source.x;
+    var tsy = target.y - source.y;
+    var L = Math.pow(Math.pow(tsx, 2) + Math.pow(tsy, 2), 0.5);
+    var qx = mx - tsy * curveLen / L;
+    var qy = my + tsx * curveLen / L;
+    return {
+      qx: qx,
+      qy: qy
+    };
+  };
+  var getLineCurve = function getLineCurve(source, target, curveLen) {
+    var _calculateCurve = calculateCurve(source, target, curveLen),
+      qx = _calculateCurve.qx,
+      qy = _calculateCurve.qy;
+    if (isNaN(qx)) {
+      return "M".concat(source.x, ", ").concat(source.y, " Q0 0 ").concat(target.x, " ").concat(target.y);
+    }
+    return "M".concat(source.x, ", ").concat(source.y, " Q").concat(qx, " ").concat(qy, " ").concat(target.x, " ").concat(target.y);
+  };
+  var init = function init(networkData) {
+    var edgeLabelSize = '10px';
+    var lineRaduis = 30;
+    var nodeStroke = 1.5;
+    var nodeRadius = 10 - nodeStroke;
+    var mainNodeRadius = 15 - nodeStroke;
+    var arrowPercent = 0.8;
+    var arrowViewBox = "-0 -".concat(nodeRadius, " ").concat(nodeRadius * 2, " ").concat(nodeRadius * 2);
+    var arrowPath = "M 0,-".concat(nodeRadius * arrowPercent, " L ").concat(nodeRadius * arrowPercent * 2, " ,0 L 0,").concat(nodeRadius * arrowPercent);
+    var color = ordinal(category10);
+    var links = networkData.links.map(function (d) {
+      return Object.create(d);
+    });
+    var nodes = networkData.nodes.map(function (d) {
+      return Object.create(d);
+    });
+    var simulation$1 = simulation(nodes).force('link', link(links).id(function (d) {
+      return d.index;
+    }).distance(50)).force('charge', manyBody().strength(-200).distanceMax(1000)).force('center', center(contentWidth / 2, contentHeight / 2)).force('collide', collide().radius(function () {
+      return nodeRadius + 5;
+    }).strength(1).iterations(10)).force('x', x(contentWidth / 2)).force('y', y(contentHeight / 2)).force('radial', radial(100, contentWidth / 1.5, contentHeight / 1.5));
+    var svg = d3Select('#sna-graph').append('svg').attr('viewBox', [0, 0, contentWidth, contentHeight]).style('background-color', backgroundColor);
+    svg.append('defs').append('marker').attr('id', 'arrowhead').attr('viewBox', arrowViewBox).attr('refX', nodeRadius * 2 + nodeRadius * arrowPercent).attr('refY', 0).attr('orient', 'auto').attr('markerWidth', nodeRadius * (1 + arrowPercent)).attr('markerHeight', nodeRadius * (1 + arrowPercent)).attr('xoverflow', 'visible').append('svg:path').attr('d', arrowPath).attr('fill', '#999').style('stroke', 'none');
+    // 增加一層g用來包住所有的物件，並對此g加入縮放功能
+    g = svg.append('g');
+    var zoomActions = function zoomActions() {
+      g.attr('transform', event.transform);
+    };
+    var zoomHandler = zoom().scaleExtent([0.5, 20]).extent([[0, 0], [contentWidth, contentHeight]]).on('zoom', zoomActions);
+    zoomHandler(svg);
+    var link$1 = g.append('g').attr('stroke', '#999').attr('stroke-opacity', 0.6).selectAll('line').data(links).join('path').attr('fill', 'none').attr('stroke-dasharray', function (d) {
+      return d.ontology === 'protege' ? '2,5,3' : '';
+    }).attr('key', function (d) {
+      return d.type;
+    });
+    var node = g.append('g').attr('stroke', '#fff').attr('stroke-width', nodeStroke).selectAll('circle').data(nodes).join('circle').attr('r', function (d) {
+      return d.type === 'mainNode' ? mainNodeRadius : nodeRadius;
+    }).attr('fill', function (d) {
+      return color(d.type);
+    }).attr('key', function (d) {
+      return d.type;
+    }).attr('class', function (d) {
+      return "node node-".concat(d.id, " ").concat(d.type && d.type === 'organization' ? 'org' : d.type === 'person' ? 'person' : d.type === 'publication' ? 'publication' : d.type === 'mainNode' ? 'mainNode' : d.type === 'article' ? 'article' : d.type === 'keyword' ? 'keyword' : d.type === 'event' ? 'event' : '');
+    }).on('click', function (d) {
+      return d.hasClick ? handleClickNodeGoto({
+        name: d.name,
+        id: d.id,
+        type: d.type
+      }) : null;
+    }).call(drag$1(simulation$1));
+    node.append('title').text(function (d) {
+      return "".concat(d.name, "-").concat(translateType(d.type));
+    });
+    var nodeLabel = g.append('g').selectAll('text').data(nodes).join('text').attr('fill', fontColor).attr('text-anchor', 'middle').attr('key', function (d) {
+      return d.type;
+    }).style('color', '#fff').style('font-size', '14px').text(function (d) {
+      return d.name;
+    });
+    var edgepaths = g.selectAll('.edgepath').data(links).enter().append('path').attr('class', 'edgepath').attr('fill-opacity', 0).attr('stroke-opacity', 0).attr('id', function (d, i) {
+      return "edgepath".concat(i);
+    }).style('pointer-events', 'none');
+    var edgelabels = g.selectAll('.edgelabel').data(links).enter().append('text').style('pointer-events', 'none').attr('class', 'edgelabel').attr('font-size', edgeLabelSize).attr('fill', '#aaa').attr('visibility', 'visible').attr('key', function (d) {
+      return d.type;
+    }).attr('id', function (d, i) {
+      return "edgelabel".concat(i);
+    });
+    edgelabels.append('textPath').attr('xlink:href', function (d, i) {
+      return "#edgepath".concat(i);
+    }).style('text-anchor', 'middle').style('pointer-events', 'none').attr('startOffset', '50%').text(function (d) {
+      return d.property;
+    });
+    simulation$1.on('tick', function () {
+      nodes.forEach(function (d) {
+        // x軸 超過寬度380，回彈到380座標軸區域位置。 ——作用爲：超出範圍的回彈到視圖寬度範圍內
+        if (d.x >= contentWidth - 20) {
+          d.x = contentWidth - 20;
+        }
+        // y軸 超過高度280，回彈到280座標軸區域位置。 ——作用爲：超出範圍的回彈到視圖高度範圍內
+        if (d.y >= contentHeight - 20) {
+          d.y = contentHeight - 20;
+        }
+        if (d.x <= 20) {
+          d.x = 20;
+        }
+        if (d.y <= 20) {
+          d.y = 20;
+        }
+      });
+      link$1.attr('d', function (d) {
+        return getLineCurve(d.source, d.target, lineRaduis);
+      });
+      node.attr('cx', function (d) {
+        return d.x;
+      }).attr('cy', function (d) {
+        return d.y;
+      });
+      nodeLabel.attr('x', function (d) {
+        return d.x;
+      }).attr('y', function (d) {
+        return d.y - nodeRadius;
+      });
+      edgepaths.attr('d', function (d) {
+        return getLineCurve(d.source, d.target, lineRaduis);
+      });
+    });
+  };
+  var renderSNA = function renderSNA() {
+    if (SNAData && SNAData.nodes && SNAData.nodes.length > 0) {
+      var div = document.getElementById('sna-graph');
+      if (div && div.childNodes[0]) {
+        div.removeChild(div.childNodes[0]);
+      }
+      init(SNAData);
+    }
+  };
+
+  // 資料異動或全螢幕切換，重新渲染網絡圖
+  useEffect(function () {
+    renderSNA();
+  }, [SNAData]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('SNA', {
+      'SNA--smallSize': distance < 200
+    }, className),
+    style: {
+      contentWidth: contentWidth,
+      contentHeight: contentHeight,
+      backgroundColor: backgroundColor
+    }
+  }, /*#__PURE__*/React__default.createElement(ExtraTools, {
+    intl: intl,
+    data: SNAData,
+    iconColor: iconColor,
+    domToImageId: "sna-graph",
+    FontSizeTargets: ['#sna-graph svg g text'],
+    exclude: exclude,
+    DownloadExcel: DownloadExcel,
+    fullscreenDomId: "sna-graph"
+  }), /*#__PURE__*/React__default.createElement(ResetBtn, {
+    renderSNA: renderSNA
+  }), /*#__PURE__*/React__default.createElement("div", {
+    id: "sna-graph"
+  }));
+};
+SNA.defaultProps = {
+  className: undefined,
+  intl: undefined,
+  width: 1050,
+  height: 600,
+  distance: 400,
+  SNAData: null,
+  fontColor: '#000000',
+  backgroundColor: '#FFFFFF',
+  iconColor: '#825c0d',
+  exclude: ['downloadXls', 'downloadTsv'],
+  handleClickNodeGoto: null,
+  DownloadExcel: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+SNA.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 語言 */
+  intl: PropTypes.objectOf(PropTypes.any),
+  /** 寬度 */
+  width: PropTypes.number,
+  /** 高度 */
+  height: PropTypes.number,
+  /** 點跟點之間的距離 */
+  distance: PropTypes.number,
+  /** 資料 */
+  SNAData: PropTypes.objectOf(PropTypes.any),
+  /** 網絡圖文字顏色 */
+  fontColor: PropTypes.string,
+  /** 網絡圖背景顏色 */
+  backgroundColor: PropTypes.string,
+  /** icon顏色 */
+  iconColor: PropTypes.string,
+  /** 不顯示的按鈕 ['share', 'downloadImage', 'downloadTsv', 'downloadXls', 'fullscreen', 'fontSizeChanger'] */
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  /** 按下點後要轉址的功能 */
+  handleClickNodeGoto: PropTypes.func,
+  /** Download元件, 由外部傳入的原因是需要環境設定 */
+  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export { SNA as default };

package/lib/components/Select-98a8e973.js

@@ -1 +1,114 @@
-import{b as e,d as l}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import a from"react";import t from"prop-types";import{s as n,c as o}from"./vendor-851c6356.js";import{FormControl as r,Select as s,CircularProgress as i,MenuItem as c}from"@material-ui/core";import{E as u}from"./Empty-70f040a9.js";n(".select__placeholder {\n  color: #999; }\n\n.select--small {\n  width: 100%; }\n  .select--small .MuiSelect-root {\n    padding: 0.5rem 1.5rem 0.25rem;\n    color: white; }\n    .select--small .MuiSelect-root .select__placeholder {\n      color: white; }\n    .select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n      background: transparent; }\n  .select--small .MuiSvgIcon-root {\n    color: white; }\n  .select--small .MuiOutlinedInput-root {\n    border-radius: 45px; }\n");var m=function(t){var n=t.style,m=t.className,d=t.labelInValue,p=t.disabled,v=t.loading,b=t.placeholder,f=t.variantSmall,g=t.background,y=t.menuItemClass,h=t.options,E=t.value,S=t.defaultValue,j=t.onChange,I=function(e){return(h||[]).find((function(a){return"object"===l(a)?e===a.value:e===a}))||e};return a.createElement(r,{className:o("select",{"select--small":f},m),variant:"outlined"},a.createElement(s,{style:e(e({},n||{}),{},{background:g}),displayEmpty:!0,disabled:p||v,renderValue:function(e){var t=I(e),n="object"===l(t)?t.label:t;return(!e&&0!==e||0===e.length)&&(n=a.createElement("span",{className:"select__placeholder"},b)),a.createElement(a.Fragment,null,n,v&&a.createElement(i,{size:16,style:{marginLeft:8,marginRight:4}}))},value:E,defaultValue:S,onChange:function(e){return j(d?I(e.target.value):e.target.value)}},Array.isArray(h)&&h.length>0?h.map((function(e){var t="object"===l(e)?e.value:e,n="object"===l(e)?e.label:e;return a.createElement(c,{key:t,value:t,ListItemClasses:y},n)})):a.createElement(u,null)))};m.defaultProps={style:void 0,className:void 0,value:void 0,defaultValue:void 0,options:void 0,labelInValue:void 0,disabled:void 0,loading:void 0,placeholder:"Please select...",variantSmall:void 0,background:void 0,menuItemClass:void 0,onChange:function(){}},m.propTypes={style:t.objectOf(t.any),className:t.string,value:t.oneOfType([t.string,t.number]),defaultValue:t.oneOfType([t.string,t.number]),options:t.arrayOf(t.any),labelInValue:t.bool,disabled:t.bool,loading:t.bool,placeholder:t.string,variantSmall:t.bool,background:t.string,menuItemClass:t.objectOf(t.any),onChange:t.func};export{m as S};
+import { b as _objectSpread2, d as _typeof } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
+import { E as Empty } from './Empty-70f040a9.js';
+
+var css_248z = ".select__placeholder {\n  color: #999; }\n\n.select--small {\n  width: 100%; }\n  .select--small .MuiSelect-root {\n    padding: 0.5rem 1.5rem 0.25rem;\n    color: white; }\n    .select--small .MuiSelect-root .select__placeholder {\n      color: white; }\n    .select--small .MuiSelect-root:hover, .select--small .MuiSelect-root:focus {\n      background: transparent; }\n  .select--small .MuiSvgIcon-root {\n    color: white; }\n  .select--small .MuiOutlinedInput-root {\n    border-radius: 45px; }\n";
+styleInject(css_248z);
+
+var Select = function Select(props) {
+  var style = props.style,
+    className = props.className,
+    labelInValue = props.labelInValue,
+    disabled = props.disabled,
+    loading = props.loading,
+    placeholder = props.placeholder,
+    variantSmall = props.variantSmall,
+    background = props.background,
+    menuItemClass = props.menuItemClass;
+  var options = props.options,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    _onChange = props.onChange;
+  var itemFind = function itemFind(key) {
+    return (options || []).find(function (option) {
+      return _typeof(option) === 'object' ? key === option.value : key === option;
+    }) || key;
+  };
+  return /*#__PURE__*/React__default.createElement(FormControl, {
+    className: classNames('select', {
+      'select--small': variantSmall
+    }, className),
+    variant: "outlined"
+  }, /*#__PURE__*/React__default.createElement(Select$1, {
+    style: _objectSpread2(_objectSpread2({}, style || {}), {}, {
+      background: background
+    }),
+    displayEmpty: true,
+    disabled: disabled || loading,
+    renderValue: function renderValue(id) {
+      var finder = itemFind(id);
+      var content = _typeof(finder) === 'object' ? finder.label : finder;
+      if (!id && id !== 0 || id.length === 0) content = /*#__PURE__*/React__default.createElement("span", {
+        className: "select__placeholder"
+      }, placeholder);
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+        size: 16,
+        style: {
+          marginLeft: 8,
+          marginRight: 4
+        }
+      }));
+    },
+    value: value,
+    defaultValue: defaultValue,
+    onChange: function onChange(event) {
+      return _onChange(labelInValue ? itemFind(event.target.value) : event.target.value);
+    }
+  }, Array.isArray(options) && options.length > 0 ? options.map(function (option) {
+    var key = _typeof(option) === 'object' ? option.value : option;
+    var text = _typeof(option) === 'object' ? option.label : option;
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: key,
+      value: key,
+      ListItemClasses: menuItemClass
+    }, text);
+  }) : /*#__PURE__*/React__default.createElement(Empty, null)));
+};
+Select.defaultProps = {
+  style: undefined,
+  className: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  options: undefined,
+  labelInValue: undefined,
+  disabled: undefined,
+  loading: undefined,
+  placeholder: 'Please select...',
+  variantSmall: undefined,
+  background: undefined,
+  menuItemClass: undefined,
+  onChange: function onChange() {}
+};
+Select.propTypes = {
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Css Name */
+  className: PropTypes.string,
+  /** 選擇的id */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 預設選擇的id */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 下拉選單清單 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** onChange時 label value 一起回傳 */
+  labelInValue: PropTypes.bool,
+  /** 是否禁止使用 */
+  disabled: PropTypes.bool,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 下拉選單提示字 */
+  placeholder: PropTypes.string,
+  /** 是否使用小size */
+  variantSmall: PropTypes.bool,
+  /** 使用變體後的顏色 */
+  background: PropTypes.string,
+  /** override menuItem class */
+  menuItemClass: PropTypes.objectOf(PropTypes.any),
+  /** 點選後的返回 */
+  onChange: PropTypes.func
+};
+
+export { Select as S };

package/lib/components/Select.js

@@ -1 +1,10 @@
-export{S as default}from"./Select-98a8e973.js";import"./_rollupPluginBabelHelpers-fde6d1c6.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/core";import"./Empty-70f040a9.js";
+export { S as default } from './Select-98a8e973.js';
+import './_rollupPluginBabelHelpers-fde6d1c6.js';
+import 'react';
+import 'prop-types';
+import './vendor-851c6356.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/core';
+import './Empty-70f040a9.js';

package/lib/components/Spin-690a3597.js

@@ -1 +1,74 @@
-import e,{useMemo as n}from"react";import t from"prop-types";import{s as i,c as s}from"./vendor-851c6356.js";import{Fade as r,CircularProgress as o}from"@material-ui/core";i(".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative; }\n  .customSpin__spin {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n");var m={small:16,middle:24,large:40},a=function(t){var i=t.className,a=t.spinning,l=t.children,p=t.size,c=t.style,u=function(e){var n=e<16?16:e;return n>300?300:n},d=n((function(){return"string"==typeof p?Number(p)&&"number"==typeof Number(p)?u(Number(p)):m[p]||40:"number"==typeof p?u(p):40}),[p]);return e.createElement("div",{className:s("customSpin",i),style:c||{}},e.createElement(r,{in:a,style:{transitionDelay:"300ms"},unmountOnExit:!0},e.createElement("div",{className:"customSpin__spin"},e.createElement(o,{size:d}))),l)};a.defaultProps={className:void 0,spinning:!1,children:null,size:void 0,style:void 0},a.propTypes={className:t.string,spinning:t.bool,children:t.node,size:t.oneOfType([t.oneOf(Object.keys(m)),t.number]),style:t.objectOf(t.any)};export{a as S};
+import React__default, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import { Fade, CircularProgress } from '@material-ui/core';
+
+var css_248z = ".customSpin {\n  width: 100%;\n  min-height: 100px;\n  position: relative; }\n  .customSpin__spin {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n";
+styleInject(css_248z);
+
+var stringSize = {
+  small: 16,
+  middle: 24,
+  large: 40
+};
+var Spin = function Spin(props) {
+  var className = props.className,
+    spinning = props.spinning,
+    children = props.children,
+    size = props.size,
+    style = props.style;
+  var maxValue = function maxValue(val) {
+    // 極大極小值限制 300/16
+    var min = val < 16 ? 16 : val;
+    var max = min > 300 ? 300 : min;
+    return max;
+  };
+  var matchSize = useMemo(function () {
+    if (typeof size === 'string') {
+      if (Number(size) && typeof Number(size) === 'number') {
+        return maxValue(Number(size));
+      }
+      return stringSize[size] || 40;
+    }
+    if (typeof size === 'number') {
+      return maxValue(size);
+    }
+    // default size is large
+    return 40;
+  }, [size]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('customSpin', className),
+    style: style || {}
+  }, /*#__PURE__*/React__default.createElement(Fade, {
+    in: spinning,
+    style: {
+      transitionDelay: '300ms'
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "customSpin__spin"
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: matchSize
+  }))), children);
+};
+Spin.defaultProps = {
+  className: undefined,
+  spinning: false,
+  children: null,
+  size: undefined,
+  style: undefined
+};
+Spin.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 是否載入中 */
+  spinning: PropTypes.bool,
+  /** 內容 */
+  children: PropTypes.node,
+  /** 自訂尺寸 */
+  size: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(stringSize)), PropTypes.number]),
+  /** 自訂Style設置 */
+  style: PropTypes.objectOf(PropTypes.any)
+};
+
+export { Spin as S };

package/lib/components/Spin.js

@@ -1 +1,8 @@
-export{S as default}from"./Spin-690a3597.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/core";
+export { S as default } from './Spin-690a3597.js';
+import 'react';
+import 'prop-types';
+import './vendor-851c6356.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/core';

package/lib/components/Table.js

@@ -1 +1,51 @@
-import{c as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import r from"react";import a from"prop-types";import{TableContainer as t,Paper as n,Table as l,TableHead as m,TableRow as o,TableCell as c,TableBody as s}from"@material-ui/core";var p=["render"],u=function(a){var u=a.className,i=a.columns,f=a.data;return r.createElement(t,{className:u,component:n},r.createElement(l,{className:"customTable"},r.createElement(m,null,r.createElement(o,null,Array.isArray(i)&&i.map((function(e){var a=e.field,t=e.headerName;return r.createElement(c,{key:a},t)})))),r.createElement(s,null,Array.isArray(f)&&f.map((function(a,t){return r.createElement(o,{key:t.toString()},Array.isArray(i)&&i.map((function(t){var n=t.render,l=e(t,p).field;return r.createElement(c,{key:l,component:"th",scope:"row"},n&&n(a)||a[l])})))})))))};u.defaultProps={className:void 0,columns:[],data:[]},u.propTypes={className:a.string,columns:a.arrayOf(a.any),data:a.arrayOf(a.any)};export{u as default};
+import { c as _objectWithoutProperties } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { TableContainer, Paper, Table as Table$1, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+
+var _excluded = ["render"];
+var Table = function Table(_ref) {
+  var className = _ref.className,
+    columns = _ref.columns,
+    data = _ref.data;
+  return /*#__PURE__*/React__default.createElement(TableContainer, {
+    className: className,
+    component: Paper
+  }, /*#__PURE__*/React__default.createElement(Table$1, {
+    className: "customTable"
+  }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, Array.isArray(columns) && columns.map(function (_ref2) {
+    var field = _ref2.field,
+      headerName = _ref2.headerName;
+    return /*#__PURE__*/React__default.createElement(TableCell, {
+      key: field
+    }, headerName);
+  }))), /*#__PURE__*/React__default.createElement(TableBody, null, Array.isArray(data) && data.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(TableRow, {
+      key: index.toString()
+    }, Array.isArray(columns) && columns.map(function (_ref3) {
+      var render = _ref3.render,
+        columnProps = _objectWithoutProperties(_ref3, _excluded);
+      var field = columnProps.field;
+      return /*#__PURE__*/React__default.createElement(TableCell, {
+        key: field,
+        component: "th",
+        scope: "row"
+      }, render && render(item) || item[field]);
+    }));
+  }))));
+};
+Table.defaultProps = {
+  className: undefined,
+  columns: [],
+  data: []
+};
+Table.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 欄位列表 */
+  columns: PropTypes.arrayOf(PropTypes.any),
+  /** 表格內容 */
+  data: PropTypes.arrayOf(PropTypes.any)
+};
+
+export { Table as default };