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

package/lib/components/ExtraTools-f10a66a8.js

@@ -1 +1,818 @@
-import{_ as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import*as t from"react";import a,{useState as n}from"react";import{q as l,f as o,s as r,c as s,F as i,t as c,u as d,v as m}from"./vendor-851c6356.js";import p from"prop-types";import{Menu as f,MenuItem as u}from"@material-ui/core";import{T as g}from"./Tooltip-b7eb966d.js";import{s as h,a as E}from"./dataExport-f418e6fe.js";const y=require("jszip"),w=require("react-file-download"),T=e=>{const{nodes:t,links:a}=e,n=(a||[]).map((e=>{let{source:a,target:n}=e;return{source:t[a].name,target:t[n].name,sourceType:t[a].type,targetType:t[n].type}})),{nodeMap:l,nodesTsv:o}=(e=>{let t=1e7;const a={};let n=!1;e.forEach((e=>{let{source:l,target:o,sourceType:r,targetType:s}=e;""!==o&&""!==l&&(Object.keys(a).indexOf(l)<0?(""!==r?(n=!0,a[l]={ID:t,WEIGHT:1,NODE_TYPE:r}):a[l]={ID:t,WEIGHT:1},t+=1):a[l].WEIGHT+=1,Object.keys(a).indexOf(o)<0?(""!==s?(n=!0,a[o]={ID:t,WEIGHT:1,NODE_TYPE:s}):a[o]={ID:t,WEIGHT:1},t+=1):a[o].WEIGHT+=1)}));let l=n?"ID\tLABEL\tWEIGHT\tNODE_TYPE\r\n":"ID\tLABEL\tWEIGHT\r\n";return Object.keys(a).forEach((e=>{const t=a[e].ID,o=a[e].WEIGHT,r=n?a[e].NODE_TYPE:"";l+=n?`${t}\t${e}\t${o}\t${r}\r\n`:`${t}\t${e}\t${o}\r\n`})),{nodeMap:a,nodesTsv:l}})(n),r=((e,t)=>{let a="SOURCE\tTARGET\tWEIGHT\tTYPE\r\n";return e.forEach((e=>{let{source:n,target:l}=e;if(""===l||""===n)return;const o=t[n].ID,r=t[l].ID;a+=`${o}\t${r}\t1\tUndirected\r\n`})),a})(n,l),s=new y;s.file("Node_Table.tsv",o),s.file("Edge_Table.tsv",r),s.generateAsync({type:"blob"}).then((e=>{w(e,"Gephi_generated_by_NMTL.zip")}))},v=e=>{let t,{data:a,dataType:n,extType:l="xlsx"}=e;if("sna"===n)t=h(a);else t=a;o(`\ufeff${E(t)}`,`output.${l}`)};v.chronologyConvert=e=>{const t=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";const[t,a]=e.split('<span class="tooltip">');return{before:t,after:a}};return(e||[]).map((e=>{let{start_date:{day:a,month:n,year:l},display_date:o,text:{headline:r,text:s}}=e;return{"日期":`${l||""}/${n||""}/${a||""}`,"名稱":(o||"").replace("<span>","").replace("</span>",""),"描述":(r||"").replaceAll(/(<([^>]+)>)/gi,""),"類型":t(s).before,"註(資料集名稱)":t(s).after.replaceAll("\n","").replaceAll("\t","").replace("註","").replace("資料來源：","").replaceAll(/(<([^>]+)>)/gi,"")}}))},v.mapConvert=e=>(e||[]).map((e=>{let{title:t,author:a,publisher:n,locations:l,posX:o,posY:r}=e;return{"名稱(書名/文章名)":t||"","作者":a||"","出版者":n||"","地點(作品描述區域)":l||"","經度":o||"","緯度":r||""}})),v.mapLgConvert=e=>(e||[]).map((e=>{let{title:t,locationOfFormation:a,workLocations:n,createPosX:l,createPosY:o,activePosX:r,activePosY:s}=e;return{"組織名稱":t||"","創立地點":a,"創立地點經度":l||"","創立地點緯度":o||"","活動地點":n||"","活動地點經度":r||"","活動地點緯度":s||""}})),v.worksBarChart=e=>(e||[]).map((e=>{let{date:t,year:a,title:n,keywords:l,authors:o,genreName:r}=e;return{"出版年/發表年":t||a||"","名稱(書名/文章名)":n||"","作者":(o||[]).map((e=>{let{author:t}=e;return t})).join(","),"關鍵字":(l||"").replaceAll("\n",""),"文學分類":r||""}})),v.worksSlider=e=>(e||[]).map((e=>{let{title:t,author:a,date:n}=e;return{"名稱(書名/文章名)":t||"","作者":a||"","出版日期/發表日期":n||""}}));const x=e=>{let{fill:t="#825c0d"}=e;return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:32,height:32,viewBox:"0 0 32 32"},a.createElement("defs",null,a.createElement("clipPath",{id:"a"},a.createElement("path",{"data-name":"Rectangle 125",style:{fill:"#fff"},d:"M0 0h32v32H0z"}))),a.createElement("g",{style:{clipPath:"url(#a)"}},a.createElement("path",{d:"M-960 600h-20v-10h4v2h-2v6h16v-6h-2v-2h4zm-5.06-12.608-1.348-1.454-2.592 2.427V580h-2v8.365l-2.544-2.427-1.362 1.454 4.948 4.671z",transform:"translate(986 -574)",style:{fill:t},"data-name":"Mask Group 42"})))},_=e=>{let{fill:a="#825c0d"}=e;return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:32,height:32,viewBox:"0 0 32 32"},t.createElement("defs",null,t.createElement("clipPath",{id:"clip-path"},t.createElement("path",{id:"Rectangle_128","data-name":"Rectangle 128",style:{fill:"#fff"},d:"M0 0h32v32H0z"})),t.createElement("style",null,`\n            .cls-3{fill:${a}}\n        `)),t.createElement("g",{id:"Mask_Group_47","data-name":"Mask Group 47",style:{clipPath:"url(#clip-path)"}},t.createElement("g",{id:"Group_3633","data-name":"Group 3633",transform:"translate(6 6)"},t.createElement("path",{id:"Path_181","data-name":"Path 181",className:"cls-3",d:"M514 371v-2h-2v2h-2v2h2v2h2v-2h2v-2z",transform:"translate(-495 -369)"}),t.createElement("g",{id:"Group_3632","data-name":"Group 3632",transform:"translate(0 2)"},t.createElement("path",{id:"Path_182","data-name":"Path 182",className:"cls-3",d:"M502.276 371h3.447L512 389h-3.164l-1.595-5.129h-6.586L499.036 389H496zm-.926 10.649h5.17l-.746-2.419c-.643-1.953-1.209-3.956-1.776-5.983h-.128a126.193 126.193 0 0 1-1.748 5.983z",transform:"translate(-496 -371)"})))))},k=e=>{let{fill:a="#825c0d"}=e;return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:32,height:32,viewBox:"0 0 32 32"},t.createElement("defs",null,t.createElement("clipPath",{id:"clip-path"},t.createElement("path",{id:"Rectangle_129","data-name":"Rectangle 129",style:{fill:"#fff"},d:"M0 0h32v32H0z"})),t.createElement("style",null,`\n            .cls-3{fill:${a}}\n        `)),t.createElement("g",{id:"Mask_Group_48","data-name":"Mask Group 48",style:{clipPath:"url(#clip-path)"}},t.createElement("g",{id:"Group_3635","data-name":"Group 3635",transform:"translate(6 8)"},t.createElement("path",{id:"Path_181","data-name":"Path 181",className:"cls-3",d:"M510 371v2h6v-2z",transform:"translate(-495 -371)"}),t.createElement("g",{id:"Group_3632","data-name":"Group 3632"},t.createElement("path",{id:"Path_182","data-name":"Path 182",className:"cls-3",d:"M502.276 371h3.447L512 389h-3.164l-1.595-5.129h-6.586L499.036 389H496zm-.926 10.649h5.17l-.746-2.419c-.643-1.953-1.209-3.956-1.776-5.983h-.128a126.193 126.193 0 0 1-1.748 5.983z",transform:"translate(-496 -371)"})))))},b=e=>{let{fill:a="#825c0d"}=e;return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:32,height:32,viewBox:"0 0 32 32"},t.createElement("defs",null,t.createElement("clipPath",{id:"clip-path"},t.createElement("path",{id:"Rectangle_124","data-name":"Rectangle 124",style:{fill:"#fff"},d:"M0 0h32v32H0z"})),t.createElement("style",null,`\n            .cls-3{fill:${a}}\n        `)),t.createElement("g",{id:"Mask_Group_46","data-name":"Mask Group 46",style:{clipPath:"url(#clip-path)"}},t.createElement("g",{id:"Group_3629","data-name":"Group 3629",transform:"translate(6 6.001)"},t.createElement("path",{id:"Path_176","data-name":"Path 176",className:"cls-3",d:"M-721 1949.376h2.5v-3.755h3.755v-2.5H-721z",transform:"translate(721.003 -1943.118)"}),t.createElement("path",{id:"Path_177","data-name":"Path 177",className:"cls-3",d:"M-721 1960.376h6.258v-2.5h-3.758v-3.755h-2.5z",transform:"translate(721.003 -1940.376)"}),t.createElement("path",{id:"Path_178","data-name":"Path 178",className:"cls-3",d:"M-703.744 1943.118H-710v2.5h3.755v3.755h2.5z",transform:"translate(723.744 -1943.118)"}),t.createElement("path",{id:"Path_179","data-name":"Path 179",className:"cls-3",d:"M-703.744 1960.376v-6.259h-2.5v3.755H-710v2.5z",transform:"translate(723.744 -1940.376)"}))))};r(".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px; }\n  .extraTools__share button {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools__download {\n    cursor: pointer; }\n    .extraTools__download-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center; }\n  .extraTools__fullscreenBtn {\n    cursor: pointer;\n    padding-top: 0; }\n    .extraTools__fullscreenBtn-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center; }\n  .extraTools__fontsize {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools .font-size-changer,\n  .extraTools .font-size-changer-buttons,\n  .extraTools .font-size-up,\n  .extraTools .font-size-down,\n  .extraTools .tooltip {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools .font-size-up {\n    width: 32px !important;\n    cursor: pointer;\n    margin-right: 16px !important; }\n  .extraTools .font-size-down {\n    cursor: pointer;\n    width: 32px !important; }\n  .extraTools .fullscreenExit {\n    text-align: right;\n    cursor: pointer;\n    border: 0; }\n  .extraTools #download-menu .MuiMenuItem-root {\n    color: #4e3a16;\n    width: auto;\n    overflow: hidden;\n    font-size: 1rem;\n    box-sizing: border-box;\n    min-height: 48px;\n    font-weight: 400;\n    line-height: 1;\n    padding-top: 1rem;\n    white-space: initial;\n    border-bottom: 0;\n    letter-spacing: 0.00938em;\n    padding-bottom: 1rem; }\n");const z=e=>{let{className:t}=e;return a.createElement("div",{className:s("extraTools__share",t)},a.createElement(i,{url:document.location.href},a.createElement(c,{size:32,round:!0})))};z.defaultProps={className:void 0},z.propTypes={className:p.string};const I=e=>{let{className:t,intl:o,exclude:r,iconColor:i,data:c,dataType:d,domToImageId:m,DownloadExcel:p}=e;const[h,E]=n(null),y=[{key:"downloadImage",onClick:()=>(e=>{let{id:t,fileName:a="image",quality:n=.95}=e;const o=document.getElementById(t),r=document.getElementById("yaxis"),s=document.getElementById("barChart__block");r&&r.setAttribute("transform","translate(0, 0 )"),l.toPng(o,{quality:n}).then((e=>{const t=document.createElement("a");t.download=`${a}.png`,t.href=e,t.click(),r&&s&&(r.setAttribute("transform","translate(0, 0 )"),r.setAttribute("transform",`translate(${s.scrollLeft}, 0)`))})).catch((e=>{console.error("oops, something went wrong!",e)}))})({id:m}),label:o?"knowledge.writersAndWorksSNA.download.img":"下載圖片"},{key:"downloadGephi",onClick:()=>T(c),label:o?"knowledge.writersAndWorksSNA.download.gephi":"下載Gephi"},{key:"downloadTsv",onClick:()=>v({data:c,dataType:d,extType:"tsv"}),label:o?"knowledge.writersAndWorksSNA.download.tsv":"下載Tsv"},{key:"downloadXls",label:o?"knowledge.writersAndWorksSNA.download.xls":"下載Excel"}];return a.createElement("div",{className:s("extraTools__download",t)},a.createElement(g,{title:o?o.formatMessage({id:"knowledge.writersAndWorksSNA.download"}):"下載",placement:"bottom"},a.createElement("div",{className:"extraTools__download-icon",onClick:e=>E(e.currentTarget)},a.createElement(x,{fill:i}))),a.createElement(f,{id:"download-menu",anchorEl:h,keepMounted:!0,open:Boolean(h),onClose:()=>E(null)},y.map((e=>{let{key:t,onClick:n,label:l}=e;return s=t,!((r||[]).filter((e=>e===s)).length>0)&&((e,t)=>"downloadXls"===e&&p?a.createElement(p,{key:e,element:t,data:c}):t)(t,a.createElement(u,{key:t,onClick:n},o?o.formatMessage({id:l}):l));var s}))))};I.defaultProps={className:void 0,intl:void 0,exclude:void 0,data:null,dataType:void 0,iconColor:"#825c0d",domToImageId:"network-graph",DownloadExcel:void 0},I.propTypes={className:p.string,intl:p.objectOf(p.any),exclude:p.arrayOf(p.string),data:p.oneOfType([p.array,p.object]),dataType:p.string,iconColor:p.string,domToImageId:p.string,DownloadExcel:p.oneOfType([p.node,p.func])};const N=e=>{let{className:t,intl:n,iconColor:l,fullscreenDomId:o}=e;return a.createElement("div",{className:s("extraTools__fullscreenBtn",t)},a.createElement(g,{title:n?n.formatMessage({id:"knowledge.writersAndWorksSNA.fullscreen"}):"全螢幕模式",placement:"bottom"},a.createElement("div",{className:"extraTools__fullscreenBtn-icon",onClick:()=>{d.isEnabled&&o&&d.request(document.getElementById(o))}},a.createElement(b,{fill:l}))))};N.defaultProps={className:void 0,intl:void 0,iconColor:"#825c0d",fullscreenDomId:void 0},N.propTypes={className:p.string,intl:p.objectOf(p.any),iconColor:p.string,fullscreenDomId:p.string};const P=e=>{let{className:t,intl:n,iconColor:l,FontSizeTargets:o,FontSizeOptions:r}=e;return a.createElement("div",{className:s("extraTools__fontsize",t)},a.createElement(m,{targets:o,options:r,customButtons:{up:a.createElement(g,{title:n?n.formatMessage({id:"knowledge.writersAndWorksSNA.big"}):"字級放大",placement:"bottom"},a.createElement(_,{fill:l})),down:a.createElement(g,{title:n?n.formatMessage({id:"knowledge.writersAndWorksSNA.small"}):"字級縮小",placement:"bottom"},a.createElement(k,{fill:l})),style:{border:"none"},buttonsMargin:10}}))};P.defaultProps={className:void 0,intl:void 0,iconColor:"#825c0d",FontSizeTargets:["#network-graph svg g text"],FontSizeOptions:{stepSize:2,range:1}},P.propTypes={className:p.string,intl:p.objectOf(p.any),iconColor:p.string,FontSizeTargets:p.arrayOf(p.string),FontSizeOptions:p.objectOf(p.any)};var C=function(t){var n=t.className,l=t.intl,o=t.exclude,r=t.data,i=t.dataType,c=t.iconColor,d=t.domToImageId,m=t.FontSizeTargets,p=t.FontSizeOptions,f=t.DownloadExcel,u=t.fullscreenDomId,g={intl:l,exclude:o,data:r,dataType:i,iconColor:c,domToImageId:d,FontSizeTargets:m,FontSizeOptions:p,DownloadExcel:f,fullscreenDomId:u},h=[{keys:["share"],Component:z},{keys:["downloadImage","downloadGephi","downloadTsv","downloadXls"],Component:I},{keys:["fullscreen"],Component:N},{keys:["fontSizeChanger"],Component:P}];return a.createElement("div",{className:s("extraTools",n)},h.map((function(t){var n=t.keys,l=t.Component;return!function(e){return(o||[]).filter((function(t){return e.some((function(e){return e===t}))})).length===e.length}(n)&&a.createElement(l,e({key:n[0]},g))})))};C.ShareButton=z,C.DownloadMenu=I,C.FullscreenBtn=N,C.FontSizeChanger=P,C.defaultProps={className:void 0,intl:void 0,exclude:["downloadGephi"],data:null,dataType:void 0,iconColor:"#825c0d",domToImageId:"network-graph",FontSizeTargets:["#network-graph svg g text"],FontSizeOptions:{stepSize:2,range:1},DownloadExcel:void 0,fullscreenDomId:void 0},C.propTypes={className:p.string,intl:p.objectOf(p.any),exclude:p.arrayOf(p.string),data:p.oneOfType([p.array,p.object]),dataType:p.string,iconColor:p.string,domToImageId:p.string,FontSizeTargets:p.arrayOf(p.string),FontSizeOptions:p.objectOf(p.any),DownloadExcel:p.oneOfType([p.node,p.func]),fullscreenDomId:p.string};export{C as E};
+import { _ as _extends } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import * as React from 'react';
+import React__default, { useState } from 'react';
+import { q as domtoimage, f as fileDownload$1, s as styleInject, c as classNames, F as FacebookShareButton, t as FacebookIcon, u as screenfull, v as FontSize } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import { Menu, MenuItem } from '@material-ui/core';
+import { T as Tooltip } from './Tooltip-b7eb966d.js';
+import { s as snaToExcel, a as jsonExcel } from './dataExport-f418e6fe.js';
+
+const domToImage = _ref => {
+  let {
+    id,
+    fileName = 'image',
+    quality = 0.95
+  } = _ref;
+  const node = document.getElementById(id);
+  // 防止barchart的Y軸擋住圖，就先將他移到最左邊，拍完照再移回來
+  const yaxis = document.getElementById('yaxis');
+  const barChartElement = document.getElementById('barChart__block');
+  if (yaxis) {
+    yaxis.setAttribute('transform', 'translate(0, 0 )');
+  }
+  domtoimage.toPng(node, {
+    quality
+  }).then(dataUrl => {
+    const link = document.createElement('a');
+    link.download = `${fileName}.png`;
+    link.href = dataUrl;
+    link.click();
+    if (yaxis && barChartElement) {
+      yaxis.setAttribute('transform', 'translate(0, 0 )');
+      yaxis.setAttribute('transform', `translate(${barChartElement.scrollLeft}, 0)`);
+    }
+  }).catch(error => {
+    console.error('oops, something went wrong!', error);
+  });
+};
+
+const JSZip = require('jszip');
+const fileDownload = require('react-file-download');
+const DownloadGephiFileName = 'Gephi_generated_by_NMTL.zip';
+const generateNode = result => {
+  let IdCount = 10000000;
+  const nodeMap = {};
+  let foundType = false;
+  result.forEach(_ref => {
+    let {
+      source,
+      target,
+      sourceType,
+      targetType
+    } = _ref;
+    if (target === '' || source === '') {
+      return;
+    }
+    if (Object.keys(nodeMap).indexOf(source) < 0) {
+      if (sourceType !== '') {
+        foundType = true;
+        nodeMap[source] = {
+          ID: IdCount,
+          WEIGHT: 1,
+          NODE_TYPE: sourceType
+        };
+      } else {
+        nodeMap[source] = {
+          ID: IdCount,
+          WEIGHT: 1
+        };
+      }
+      IdCount += 1;
+    } else {
+      nodeMap[source].WEIGHT += 1;
+    }
+    if (Object.keys(nodeMap).indexOf(target) < 0) {
+      if (targetType !== '') {
+        foundType = true;
+        nodeMap[target] = {
+          ID: IdCount,
+          WEIGHT: 1,
+          NODE_TYPE: targetType
+        };
+      } else {
+        nodeMap[target] = {
+          ID: IdCount,
+          WEIGHT: 1
+        };
+      }
+      IdCount += 1;
+    } else {
+      nodeMap[target].WEIGHT += 1;
+    }
+  });
+  let tsvStr = foundType ? 'ID\tLABEL\tWEIGHT\tNODE_TYPE\r\n' : 'ID\tLABEL\tWEIGHT\r\n';
+  Object.keys(nodeMap).forEach(key => {
+    const idval = nodeMap[key].ID;
+    const wval = nodeMap[key].WEIGHT;
+    const type = foundType ? nodeMap[key].NODE_TYPE : '';
+    tsvStr += foundType ? `${idval}\t${key}\t${wval}\t${type}\r\n` : `${idval}\t${key}\t${wval}\r\n`;
+  });
+  return {
+    nodeMap,
+    nodesTsv: tsvStr
+  };
+};
+const generateEdge = (result, nodeMap) => {
+  let edgeStr = 'SOURCE\tTARGET\tWEIGHT\tTYPE\r\n';
+  result.forEach(_ref2 => {
+    let {
+      source,
+      target
+    } = _ref2;
+    if (target === '' || source === '') {
+      return;
+    }
+    const sourceId = nodeMap[source].ID;
+    const targetId = nodeMap[target].ID;
+    edgeStr += `${sourceId}\t${targetId}\t1\tUndirected\r\n`;
+  });
+  return edgeStr;
+};
+const downloadGephi = snaData => {
+  const {
+    nodes,
+    links
+  } = snaData;
+  const result = (links || []).map(_ref3 => {
+    let {
+      source,
+      target
+    } = _ref3;
+    return {
+      source: nodes[source].name,
+      target: nodes[target].name,
+      sourceType: nodes[source].type,
+      targetType: nodes[target].type
+    };
+  });
+  const {
+    nodeMap,
+    nodesTsv
+  } = generateNode(result);
+  const edgesTsv = generateEdge(result, nodeMap);
+  const zip = new JSZip();
+  zip.file('Node_Table.tsv', nodesTsv);
+  zip.file('Edge_Table.tsv', edgesTsv);
+  zip.generateAsync({
+    type: 'blob'
+  }).then(content => {
+    fileDownload(content, DownloadGephiFileName);
+  });
+};
+
+/* 轉檔工具, 提供API轉下載tsv/xlsx */
+
+/* 大事年表 */
+const chronologyConvert = data => {
+  const getText = function () {
+    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    const [before, after] = text.split('<span class="tooltip">');
+    return {
+      before,
+      after
+    };
+  };
+
+  /* 做資料過濾 */
+  const newData = (data || []).map(_ref => {
+    let {
+      start_date: {
+        day,
+        month,
+        year
+      },
+      display_date: displayDate,
+      text: {
+        headline,
+        text
+      }
+    } = _ref;
+    return {
+      日期: `${year || ''}/${month || ''}/${day || ''}`,
+      名稱: (displayDate || '').replace('<span>', '').replace('</span>', ''),
+      描述: (headline || '').replaceAll(/(<([^>]+)>)/gi, ''),
+      類型: getText(text).before,
+      '註(資料集名稱)': getText(text).after.replaceAll('\n', '').replaceAll('\t', '').replace('註', '').replace('資料來源：', '').replaceAll(/(<([^>]+)>)/gi, '')
+    };
+  });
+  return newData;
+};
+
+/* 文學數據 - 地圖 */
+const mapConvert = data => (data || []).map(_ref2 => {
+  let {
+    title,
+    author,
+    publisher,
+    locations,
+    posX,
+    posY
+  } = _ref2;
+  return {
+    '名稱(書名/文章名)': title || '',
+    作者: author || '',
+    出版者: publisher || '',
+    '地點(作品描述區域)': locations || '',
+    經度: posX || '',
+    緯度: posY || ''
+  };
+});
+
+/* 文學數據 - 地圖(文學聚落) */
+const mapLgConvert = data => (data || []).map(_ref3 => {
+  let {
+    title,
+    locationOfFormation,
+    workLocations,
+    createPosX,
+    createPosY,
+    activePosX,
+    activePosY
+  } = _ref3;
+  return {
+    組織名稱: title || '',
+    創立地點: locationOfFormation,
+    創立地點經度: createPosX || '',
+    創立地點緯度: createPosY || '',
+    活動地點: workLocations || '',
+    活動地點經度: activePosX || '',
+    活動地點緯度: activePosY || ''
+  };
+});
+
+/* 文學數據 - 年度聲量 */
+const worksBarChart = data => (data || []).map(_ref4 => {
+  let {
+    date,
+    year,
+    title,
+    keywords,
+    authors,
+    genreName
+  } = _ref4;
+  return {
+    '出版年/發表年': date || year || '',
+    '名稱(書名/文章名)': title || '',
+    作者: (authors || []).map(_ref5 => {
+      let {
+        author
+      } = _ref5;
+      return author;
+    }).join(','),
+    關鍵字: (keywords || '').replaceAll('\n', ''),
+    文學分類: genreName || ''
+  };
+});
+
+/* 文學數據 - 文學自由搭配 */
+const worksSlider = data => (data || []).map(_ref6 => {
+  let {
+    title,
+    author,
+    date
+  } = _ref6;
+  return {
+    '名稱(書名/文章名)': title || '',
+    作者: author || '',
+    '出版日期/發表日期': date || ''
+    // 文學分類: genreName || '',
+    // 作品描述地: workDesc || '',
+    // 作家出生地: locations,
+    // 獲獎獎項: awards || '',
+  };
+});
+
+const exportXlsx = _ref => {
+  let {
+    data,
+    dataType,
+    extType = 'xlsx'
+  } = _ref;
+  let metadata;
+  switch (dataType) {
+    case 'sna':
+      metadata = snaToExcel(data);
+      break;
+    default:
+      metadata = data;
+      break;
+  }
+  fileDownload$1(`\uFEFF${jsonExcel(metadata)}`, `output.${extType}`);
+};
+
+// 供外部使用dataConvert
+exportXlsx.chronologyConvert = chronologyConvert;
+exportXlsx.mapConvert = mapConvert;
+exportXlsx.mapLgConvert = mapLgConvert;
+exportXlsx.worksBarChart = worksBarChart;
+exportXlsx.worksSlider = worksSlider;
+
+/* eslint-disable max-len */
+const DownloadImg = _ref => {
+  let {
+    fill = '#825c0d'
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    "data-name": "Rectangle 125",
+    style: {
+      fill: '#fff'
+    },
+    d: "M0 0h32v32H0z"
+  }))), /*#__PURE__*/React__default.createElement("g", {
+    style: {
+      clipPath: 'url(#a)'
+    }
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M-960 600h-20v-10h4v2h-2v6h16v-6h-2v-2h4zm-5.06-12.608-1.348-1.454-2.592 2.427V580h-2v8.365l-2.544-2.427-1.362 1.454 4.948 4.671z",
+    transform: "translate(986 -574)",
+    style: {
+      fill
+    },
+    "data-name": "Mask Group 42"
+  })));
+};
+
+/* eslint-disable max-len */
+const SVGComponent$2 = _ref => {
+  let {
+    fill = '#825c0d'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip-path"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Rectangle_128",
+    "data-name": "Rectangle 128",
+    style: {
+      fill: '#fff'
+    },
+    d: "M0 0h32v32H0z"
+  })), /*#__PURE__*/React.createElement("style", null, `\n            .cls-3{fill:${fill}}\n        `)), /*#__PURE__*/React.createElement("g", {
+    id: "Mask_Group_47",
+    "data-name": "Mask Group 47",
+    style: {
+      clipPath: 'url(#clip-path)'
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_3633",
+    "data-name": "Group 3633",
+    transform: "translate(6 6)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_181",
+    "data-name": "Path 181",
+    className: "cls-3",
+    d: "M514 371v-2h-2v2h-2v2h2v2h2v-2h2v-2z",
+    transform: "translate(-495 -369)"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "Group_3632",
+    "data-name": "Group 3632",
+    transform: "translate(0 2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_182",
+    "data-name": "Path 182",
+    className: "cls-3",
+    d: "M502.276 371h3.447L512 389h-3.164l-1.595-5.129h-6.586L499.036 389H496zm-.926 10.649h5.17l-.746-2.419c-.643-1.953-1.209-3.956-1.776-5.983h-.128a126.193 126.193 0 0 1-1.748 5.983z",
+    transform: "translate(-496 -371)"
+  })))));
+};
+
+/* eslint-disable max-len */
+const SVGComponent$1 = _ref => {
+  let {
+    fill = '#825c0d'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip-path"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Rectangle_129",
+    "data-name": "Rectangle 129",
+    style: {
+      fill: '#fff'
+    },
+    d: "M0 0h32v32H0z"
+  })), /*#__PURE__*/React.createElement("style", null, `\n            .cls-3{fill:${fill}}\n        `)), /*#__PURE__*/React.createElement("g", {
+    id: "Mask_Group_48",
+    "data-name": "Mask Group 48",
+    style: {
+      clipPath: 'url(#clip-path)'
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_3635",
+    "data-name": "Group 3635",
+    transform: "translate(6 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_181",
+    "data-name": "Path 181",
+    className: "cls-3",
+    d: "M510 371v2h6v-2z",
+    transform: "translate(-495 -371)"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "Group_3632",
+    "data-name": "Group 3632"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_182",
+    "data-name": "Path 182",
+    className: "cls-3",
+    d: "M502.276 371h3.447L512 389h-3.164l-1.595-5.129h-6.586L499.036 389H496zm-.926 10.649h5.17l-.746-2.419c-.643-1.953-1.209-3.956-1.776-5.983h-.128a126.193 126.193 0 0 1-1.748 5.983z",
+    transform: "translate(-496 -371)"
+  })))));
+};
+
+const SVGComponent = _ref => {
+  let {
+    fill = '#825c0d'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip-path"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Rectangle_124",
+    "data-name": "Rectangle 124",
+    style: {
+      fill: '#fff'
+    },
+    d: "M0 0h32v32H0z"
+  })), /*#__PURE__*/React.createElement("style", null, `\n            .cls-3{fill:${fill}}\n        `)), /*#__PURE__*/React.createElement("g", {
+    id: "Mask_Group_46",
+    "data-name": "Mask Group 46",
+    style: {
+      clipPath: 'url(#clip-path)'
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_3629",
+    "data-name": "Group 3629",
+    transform: "translate(6 6.001)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_176",
+    "data-name": "Path 176",
+    className: "cls-3",
+    d: "M-721 1949.376h2.5v-3.755h3.755v-2.5H-721z",
+    transform: "translate(721.003 -1943.118)"
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "Path_177",
+    "data-name": "Path 177",
+    className: "cls-3",
+    d: "M-721 1960.376h6.258v-2.5h-3.758v-3.755h-2.5z",
+    transform: "translate(721.003 -1940.376)"
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "Path_178",
+    "data-name": "Path 178",
+    className: "cls-3",
+    d: "M-703.744 1943.118H-710v2.5h3.755v3.755h2.5z",
+    transform: "translate(723.744 -1943.118)"
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "Path_179",
+    "data-name": "Path 179",
+    className: "cls-3",
+    d: "M-703.744 1960.376v-6.259h-2.5v3.755H-710v2.5z",
+    transform: "translate(723.744 -1940.376)"
+  }))));
+};
+
+var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px; }\n  .extraTools__share button {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools__download {\n    cursor: pointer; }\n    .extraTools__download-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center; }\n  .extraTools__fullscreenBtn {\n    cursor: pointer;\n    padding-top: 0; }\n    .extraTools__fullscreenBtn-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center; }\n  .extraTools__fontsize {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools .font-size-changer,\n  .extraTools .font-size-changer-buttons,\n  .extraTools .font-size-up,\n  .extraTools .font-size-down,\n  .extraTools .tooltip {\n    display: flex;\n    justify-content: center;\n    align-items: center; }\n  .extraTools .font-size-up {\n    width: 32px !important;\n    cursor: pointer;\n    margin-right: 16px !important; }\n  .extraTools .font-size-down {\n    cursor: pointer;\n    width: 32px !important; }\n  .extraTools .fullscreenExit {\n    text-align: right;\n    cursor: pointer;\n    border: 0; }\n  .extraTools #download-menu .MuiMenuItem-root {\n    color: #4e3a16;\n    width: auto;\n    overflow: hidden;\n    font-size: 1rem;\n    box-sizing: border-box;\n    min-height: 48px;\n    font-weight: 400;\n    line-height: 1;\n    padding-top: 1rem;\n    white-space: initial;\n    border-bottom: 0;\n    letter-spacing: 0.00938em;\n    padding-bottom: 1rem; }\n";
+styleInject(css_248z);
+
+/* eslint-disable prefer-destructuring */
+const ShareButton = _ref => {
+  let {
+    className
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('extraTools__share', className)
+  }, /*#__PURE__*/React__default.createElement(FacebookShareButton, {
+    url: document.location.href
+  }, /*#__PURE__*/React__default.createElement(FacebookIcon, {
+    size: 32,
+    round: true
+  })));
+};
+ShareButton.defaultProps = {
+  className: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+ShareButton.propTypes = {
+  /** Css Name */
+  className: PropTypes.string
+};
+const DownloadMenu = _ref2 => {
+  let {
+    className,
+    intl,
+    exclude,
+    iconColor,
+    data,
+    dataType,
+    domToImageId,
+    DownloadExcel
+  } = _ref2;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const hideButton = type => (exclude || []).filter(key => key === type).length > 0;
+  const btns = [{
+    key: 'downloadImage',
+    onClick: () => domToImage({
+      id: domToImageId
+    }),
+    label: intl ? 'knowledge.writersAndWorksSNA.download.img' : '下載圖片'
+  }, {
+    key: 'downloadGephi',
+    onClick: () => downloadGephi(data),
+    label: intl ? 'knowledge.writersAndWorksSNA.download.gephi' : '下載Gephi'
+  }, {
+    key: 'downloadTsv',
+    onClick: () => exportXlsx({
+      data,
+      dataType,
+      extType: 'tsv'
+    }),
+    label: intl ? 'knowledge.writersAndWorksSNA.download.tsv' : '下載Tsv'
+  }, {
+    key: 'downloadXls',
+    // download click trigger 交給 react-data-export
+    label: intl ? 'knowledge.writersAndWorksSNA.download.xls' : '下載Excel'
+  }];
+  // eslint-disable-next-line no-confusing-arrow
+  const isXlsxButton = (key, dom) => key === 'downloadXls' && DownloadExcel ? /*#__PURE__*/React__default.createElement(DownloadExcel, {
+    key: key,
+    element: dom,
+    data: data
+  }) : dom;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('extraTools__download', className)
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: intl ? intl.formatMessage({
+      id: 'knowledge.writersAndWorksSNA.download'
+    }) : '下載',
+    placement: "bottom"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "extraTools__download-icon",
+    onClick: e => setAnchorEl(e.currentTarget)
+  }, /*#__PURE__*/React__default.createElement(DownloadImg, {
+    fill: iconColor
+  }))), /*#__PURE__*/React__default.createElement(Menu, {
+    id: "download-menu",
+    anchorEl: anchorEl,
+    keepMounted: true,
+    open: Boolean(anchorEl),
+    onClose: () => setAnchorEl(null)
+  }, btns.map(_ref3 => {
+    let {
+      key,
+      onClick,
+      label
+    } = _ref3;
+    return !hideButton(key) && isXlsxButton(key, /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: key,
+      onClick: onClick
+    }, intl ? intl.formatMessage({
+      id: label
+    }) : label));
+  })));
+};
+DownloadMenu.defaultProps = {
+  className: undefined,
+  intl: undefined,
+  exclude: undefined,
+  data: null,
+  dataType: undefined,
+  iconColor: '#825c0d',
+  domToImageId: 'network-graph',
+  DownloadExcel: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+DownloadMenu.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 語言 */
+  intl: PropTypes.objectOf(PropTypes.any),
+  /** 不顯示的按鈕 [ 'downloadImage', 'downloadTsv', 'downloadXls'] */
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  /** 資料 */
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  /** 如果有下載xlsx文件, 需要提供type輸出使用 */
+  dataType: PropTypes.string,
+  /** icon顏色 */
+  iconColor: PropTypes.string,
+  /** 指定dom轉換畫布的DOM ID */
+  domToImageId: PropTypes.string,
+  /** Download元件, 由外部傳入的原因是需要環境設定 */
+  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+const FullscreenBtn = _ref4 => {
+  let {
+    className,
+    intl,
+    iconColor,
+    fullscreenDomId
+  } = _ref4;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('extraTools__fullscreenBtn', className)
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: intl ? intl.formatMessage({
+      id: 'knowledge.writersAndWorksSNA.fullscreen'
+    }) : '全螢幕模式',
+    placement: "bottom"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "extraTools__fullscreenBtn-icon",
+    onClick: () => {
+      if (screenfull.isEnabled && fullscreenDomId) screenfull.request(document.getElementById(fullscreenDomId));
+    }
+  }, /*#__PURE__*/React__default.createElement(SVGComponent, {
+    fill: iconColor
+  }))));
+};
+FullscreenBtn.defaultProps = {
+  className: undefined,
+  intl: undefined,
+  iconColor: '#825c0d',
+  fullscreenDomId: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+FullscreenBtn.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 語言 */
+  intl: PropTypes.objectOf(PropTypes.any),
+  /** icon顏色 */
+  iconColor: PropTypes.string,
+  /** 全螢幕指定DOM */
+  fullscreenDomId: PropTypes.string
+};
+const FontSizeChanger = _ref5 => {
+  let {
+    className,
+    intl,
+    iconColor,
+    FontSizeTargets,
+    FontSizeOptions
+  } = _ref5;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('extraTools__fontsize', className)
+  }, /*#__PURE__*/React__default.createElement(FontSize, {
+    targets: FontSizeTargets,
+    options: FontSizeOptions,
+    customButtons: {
+      up: /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: intl ? intl.formatMessage({
+          id: 'knowledge.writersAndWorksSNA.big'
+        }) : '字級放大',
+        placement: "bottom"
+      }, /*#__PURE__*/React__default.createElement(SVGComponent$2, {
+        fill: iconColor
+      })),
+      down: /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: intl ? intl.formatMessage({
+          id: 'knowledge.writersAndWorksSNA.small'
+        }) : '字級縮小',
+        placement: "bottom"
+      }, /*#__PURE__*/React__default.createElement(SVGComponent$1, {
+        fill: iconColor
+      })),
+      style: {
+        border: 'none'
+      },
+      buttonsMargin: 10
+    }
+  }));
+};
+FontSizeChanger.defaultProps = {
+  className: undefined,
+  intl: undefined,
+  iconColor: '#825c0d',
+  FontSizeTargets: ['#network-graph svg g text'],
+  FontSizeOptions: {
+    stepSize: 2,
+    range: 1
+  }
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+FontSizeChanger.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 語言 */
+  intl: PropTypes.objectOf(PropTypes.any),
+  /** icon顏色 */
+  iconColor: PropTypes.string,
+  /** 改變文字的目標DOM['css selector']) */
+  FontSizeTargets: PropTypes.arrayOf(PropTypes.string),
+  /** 改變文字的選項 */
+  FontSizeOptions: PropTypes.objectOf(PropTypes.any)
+};
+
+var ExtraTools = function ExtraTools(_ref) {
+  var className = _ref.className,
+    intl = _ref.intl,
+    exclude = _ref.exclude,
+    data = _ref.data,
+    dataType = _ref.dataType,
+    iconColor = _ref.iconColor,
+    domToImageId = _ref.domToImageId,
+    FontSizeTargets = _ref.FontSizeTargets,
+    FontSizeOptions = _ref.FontSizeOptions,
+    DownloadExcel = _ref.DownloadExcel,
+    fullscreenDomId = _ref.fullscreenDomId;
+  var hideButton = function hideButton(keys) {
+    return (exclude || []).filter(function (key) {
+      return keys.some(function (item) {
+        return item === key;
+      });
+    }).length === keys.length;
+  };
+  var BtnsProps = {
+    intl: intl,
+    exclude: exclude,
+    data: data,
+    dataType: dataType,
+    iconColor: iconColor,
+    domToImageId: domToImageId,
+    FontSizeTargets: FontSizeTargets,
+    FontSizeOptions: FontSizeOptions,
+    DownloadExcel: DownloadExcel,
+    fullscreenDomId: fullscreenDomId
+  };
+  var tools = [{
+    keys: ['share'],
+    Component: ShareButton
+  }, {
+    keys: ['downloadImage', 'downloadGephi', 'downloadTsv', 'downloadXls'],
+    Component: DownloadMenu
+  }, {
+    keys: ['fullscreen'],
+    Component: FullscreenBtn
+  }, {
+    keys: ['fontSizeChanger'],
+    Component: FontSizeChanger
+  }];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('extraTools', className)
+  }, tools.map(function (_ref2) {
+    var keys = _ref2.keys,
+      Component = _ref2.Component;
+    return !hideButton(keys) && /*#__PURE__*/React__default.createElement(Component, _extends({
+      key: keys[0]
+    }, BtnsProps));
+  }));
+};
+
+/* 提供外部引用子元件, 子元件各自享獨立運作功能 */
+ExtraTools.ShareButton = ShareButton;
+ExtraTools.DownloadMenu = DownloadMenu;
+ExtraTools.FullscreenBtn = FullscreenBtn;
+ExtraTools.FontSizeChanger = FontSizeChanger;
+ExtraTools.defaultProps = {
+  className: undefined,
+  intl: undefined,
+  exclude: ['downloadGephi'],
+  data: null,
+  dataType: undefined,
+  iconColor: '#825c0d',
+  domToImageId: 'network-graph',
+  FontSizeTargets: ['#network-graph svg g text'],
+  FontSizeOptions: {
+    stepSize: 2,
+    range: 1
+  },
+  DownloadExcel: undefined,
+  fullscreenDomId: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+ExtraTools.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 語言 */
+  intl: PropTypes.objectOf(PropTypes.any),
+  /** 不顯示的按鈕 ['share', 'downloadImage', 'downloadTsv', 'downloadXls', 'fullscreen', 'fontSizeChanger'] */
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  /** 資料 */
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  /** 如果有下載xlsx文件, 需要提供type輸出使用 */
+  dataType: PropTypes.string,
+  /** icon顏色 */
+  iconColor: PropTypes.string,
+  /** 指定dom轉換畫布的DOM ID */
+  domToImageId: PropTypes.string,
+  /** 改變文字的目標DOM['css selector']) */
+  FontSizeTargets: PropTypes.arrayOf(PropTypes.string),
+  /** 改變文字的選項 */
+  FontSizeOptions: PropTypes.objectOf(PropTypes.any),
+  /** Download元件, 由外部傳入的原因是需要環境設定 */
+  DownloadExcel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** 全螢幕指定DOM */
+  fullscreenDomId: PropTypes.string
+};
+
+export { ExtraTools as E };