-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path.eslintcache
More file actions
1 lines (1 loc) · 37.6 KB
/
.eslintcache
File metadata and controls
1 lines (1 loc) · 37.6 KB
1
[{"/Users/piny/Desktop/FDepVis/src/index.js":"1","/Users/piny/Desktop/FDepVis/src/Dashboard.js":"2","/Users/piny/Desktop/FDepVis/src/views/AttributesHeatmap/index.js":"3","/Users/piny/Desktop/FDepVis/src/views/ScatterPlot/index.js":"4","/Users/piny/Desktop/FDepVis/src/views/FamilyTree/index.js":"5","/Users/piny/Desktop/FDepVis/src/views/FamilySelector/index.js":"6","/Users/piny/Desktop/FDepVis/src/views/DetailInfo/index.js":"7","/Users/piny/Desktop/FDepVis/src/redux/actions.js":"8","/Users/piny/Desktop/FDepVis/src/redux/index.js":"9","/Users/piny/Desktop/FDepVis/src/redux/reducers.js":"10","/Users/piny/Desktop/FDepVis/src/redux/state.js":"11"},{"size":193,"mtime":1604899090445,"results":"12","hashOfConfig":"13"},{"size":2405,"mtime":1609156921220,"results":"14","hashOfConfig":"13"},{"size":11488,"mtime":1609155469130,"results":"15","hashOfConfig":"13"},{"size":7139,"mtime":1609163872102,"results":"16","hashOfConfig":"13"},{"size":16295,"mtime":1609163872101,"results":"17","hashOfConfig":"13"},{"size":3888,"mtime":1608994879382,"results":"18","hashOfConfig":"13"},{"size":8295,"mtime":1609145530841,"results":"19","hashOfConfig":"13"},{"size":534,"mtime":1608994879379,"results":"20","hashOfConfig":"13"},{"size":285,"mtime":1606056302365,"results":"21","hashOfConfig":"13"},{"size":1289,"mtime":1608994879379,"results":"22","hashOfConfig":"13"},{"size":1099,"mtime":1609145590494,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"eicsey",{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"26"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":15,"fixableErrorCount":0,"fixableWarningCount":0,"source":"32","usedDeprecatedRules":"26"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"35","messages":"36","errorCount":0,"warningCount":9,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":"39","usedDeprecatedRules":"26"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":8,"fixableErrorCount":0,"fixableWarningCount":0,"source":"42","usedDeprecatedRules":"26"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"51"},"/Users/piny/Desktop/FDepVis/src/index.js",[],["52","53"],"/Users/piny/Desktop/FDepVis/src/Dashboard.js",["54"],"import React, {\n Component\n} from 'react';\nimport {\n Row,\n Col\n} from 'antd';\nimport ScatterPlot from './views/ScatterPlot';\nimport FamilySelector from './views/FamilySelector';\nimport FamilyTree from './views/FamilyTree';\nimport AttributesHeatmap from './views/AttributesHeatmap';\nimport DetailInfo from './views/DetailInfo';\nimport './dashboard.css';\n\n\nexport default class Dashboard extends Component {\n\n constructor(props) {\n super(props);\n this.state = {}\n }\n\n render() {\n return (<\n div >\n <Row style={\n {\n height: '95vh'\n }\n } >\n <Col span={\n 6\n }\n style={\n {\n height: '100%'\n }\n } >\n <Row style={\n {\n height: '40%'\n }\n } >\n <\n ScatterPlot />\n </Row>\n <Row style={\n {\n height: '60%'\n }\n } >\n <\n FamilySelector />\n </Row> </Col>\n <Col span={\n 18\n }\n style={\n {\n height: '100%'\n }\n } >\n <Row style={\n {\n height: '60%'\n }\n } >\n <FamilyTree />\n </Row>\n <Row style={\n {\n height: '40%'\n }\n } >\n <Col span={\n 13\n }\n style={\n {\n height: '100%',\n backgroundColor: \"#FFF\"\n }\n } > < AttributesHeatmap /> </Col> <\n Col span={\n 11\n }\n style={\n {\n height: '100%'\n }\n } > < DetailInfo /> </Col>\n </Row> </Col>\n </Row>\n <Row style={\n {\n height: '5vh'\n }\n }\n id='footer' >\n\n <Col span={9}> </Col>\n <Col span={7} style={{ fontWeight: \"bold\"}}> 高自杀率家族的临床数据可视分析系统 </Col>\n <Col span={8}> \n \n Source Code < a href='https://github.com/Chacha-Z/FDepVis' > https: //github.com/Chacha-Z/FDepVis</a>;\n Author < a href='#' > 我来取个名 </a>; \n \n </Col>\n \n \n \n </Row> </div>\n )\n }\n}","/Users/piny/Desktop/FDepVis/src/views/AttributesHeatmap/index.js",["55","56","57","58","59","60","61","62","63","64","65","66","67","68","69"],"import React, { Component } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./AttributesHeatmap.css\";\nimport store from \"../../redux/index\";\nimport axios from \"axios\";\nimport action from \"../../redux/actions\";\n\n\nexport default class AttributesHeatmap extends Component {\n constructor(props) {\n super(props);\n this.state = {\n names: [\"m0\", \"m1\", \"m2\", \"m3\", \"m4\"], //家族人名\n attrs: [\n \"alcohol\",\n \"psychosis\",\n \"anxiety-non-trauma\",\n \"somatic disorder\",\n \"eating\",\n \"bipolar spectrum illness\",\n \"depression\",\n \"interpersonal trauma\",\n \"PD-Cluster C-anxiety\",\n \"PD-Cluster B-emotional\",\n \"PD\",\n \"Impulse control disorder\",\n \"obesity\",\n \"cardiovascular\",\n \"COPD\",\n \"asthma\",\n \"immune-autoimmune\",\n ], //临床属性 17个\n\n attrsmap: {\n alcohol: 0,\n psychosis: 1,\n \"anxiety-non-trauma\": 2,\n \"somatic disorder\": 3,\n eating: 4,\n \"bipolar spectrum illness\": 5,\n depression: 6,\n \"interpersonal trauma\": 7,\n \"PD-Cluster C-anxiety\": 8,\n \"PD-Cluster B-emotional\": 9,\n PD: 10,\n \"Impulse control disorder\": 11,\n obesity: 12,\n cardiovascular: 13,\n COPD: 14,\n asthma: 15,\n \"immune-autoimmune\": 16,\n }, //临床属性17个键值对\n\n allTimes: [1, 2, 4],\n\n values: [],\n };\n }\n\n componentDidMount() {\n store.subscribe(() => {\n this.uploadData();\n });\n this.uploadData();\n }\n\n uploadData() {\n const focusFamily = store.getState().focusFamily;\n axios\n .get(\"http://106.52.126.175/api/getAttrview/\" + \"?fid=\" + focusFamily)\n .then((res) => {\n let data = res.data;\n // console.log(\"attr\", data)\n this.setData(data);\n document.getElementById(\"BarChart\").innerHTML = \"\";\n document.getElementById(\"Heatmap\").innerHTML = \"\";\n this.drawChart();\n });\n }\n\n setData(data) {\n // console.log(data)\n let row = 0;\n let myData = [];\n let allCount = [];\n let names = [];\n\n for (let i = 0; i < data.length; i++) {\n let objNum = Object.values(data[i]).filter((value) => {\n return typeof value === \"number\";\n });\n objNum = objNum.slice(2);\n //求数组值的和\n let count = objNum.reduce((a, b) => a + b, 0);\n if (count !== 0) {\n names.push(data[i].pid);\n let j = -2; // 除去前面2个id属性\n for (let key in data[i]) {\n // console.log(key,data[i][key],j) // 每个小格子\n if (j >= 0) {\n myData.push({\n row: row,\n col: j,\n times: data[i][key],\n });\n }\n j++;\n }\n row++;\n }\n }\n\n let data_count;\n // 柱状图统计\n if (data.length) {\n let data_keys = Object.keys(data[0]).filter(\n (item) => [\"pid\", \"fid\"].indexOf(item) < 0\n ); //对象键映射\n data_count = new Object();\n data_keys.forEach((e) => {\n data_count[e] = data\n .map((item) => {\n return item[e];\n })\n .reduce((a, b) => a + b, 0); //求和，初值0\n });\n }\n // console.log(data_count)\n\n let allTimes = Object.values(data_count).map((value) => value); //对象的值映射，对象变数组\n // console.log(allTimes) //\n\n this.setState({\n values: myData,\n names: names,\n allTimes: allTimes,\n });\n }\n\n drawChart() {\n // console.log(this.state.values)\n const _this = this;\n const width = document.getElementById(\"AttributesHeatmap\").clientWidth;\n // const height = document.getElementById(\"AttributesHeatmap\").clientHeight - 30\n\n const gridSize = (width * 0.87) / 17; //width\n // const gridHeight = Math.floor(height / this.state.names.length) //格子高度\n\n const height = this.state.names.length * gridSize + 20;\n const height1 =\n document.getElementById(\"AttributesHeatmap\").clientHeight * 0.18;\n\n const margin = {\n top: 5,\n bottom: 10,\n left: 10,\n right: 10,\n };\n\n //let maxTimes = Math.max.apply(Math,this.state.allTimes.map(item => {return item.times}))\n\n let times = this.state.values.map((item) => {\n return item.times;\n });\n // console.log(d3.max(times))\n\n //颜色\n const color = d3\n .scaleLinear()\n .domain([0, d3.max(times)])\n //.domain([0, 4])\n .range([\"white\", \"#2171b5\"]);\n\n const colors = [\n \"#8dd3c7\",\n \"#ffffb3\",\n \"#bebada\",\n \"#fb8072\",\n \"#80b1d3\",\n \"#fdb462\",\n \"#b3de69\",\n \"#fccde5\",\n \"#d9d9d9\",\n \"#bc80bd\",\n \"#ccebc5\",\n \"#ffed6f\",\n \"#eea60d\",\n \"#a9402a\",\n \"#845d54\",\n \"#056f1f\",\n \"#475e4c\",\n ];\n\n /* ----------------------------柱状图------------------------ */\n\n // 文字legend\n const height2 = height1 * 2 - 20;\n const svg2 = d3\n .select(\"#BarChart\")\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height2)\n .attr(\"id\", \"barlabel\");\n // .attr('transform', `translate(0, 0)`)\n\n const text_g = svg2.append(\"g\");\n // .attr(\"transform\", \"translate(12,16)\");\n\n let attrLabels = text_g\n .selectAll(\".attrLabels\")\n .data(this.state.attrs)\n .enter()\n .append(\"g\")\n .attr(\n \"transform\",\n (d, i) =>\n `translate(${i * gridSize + width * 0.085 + gridSize / 3\n }, ${height2})`\n ); // 直接transform <g>\n\n attrLabels\n .append(\"text\")\n .text((d) => d)\n .attr(\"font-size\", \"8pt\")\n .attr(\"fill\", \"#595959\")\n .attr(\"transform\", \"rotate(-75)\");\n\n // x轴\n\n // const types = ['1', '2', ' 3', ' 4', '5', '6', '7',' 8','9','10','11', '12', '13 ','14','15','16','17']\n // let xScale = d3.scaleBand()\n // .domain(types)\n // .range([0, axisWidth]\n\n const tooltip = d3.select(\".heatmap-tooltip\");\n //.attr(\"transform\", \"translate(10,150)\")\n\n const svg1 = d3\n .select(\"#BarChart\")\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height1 + 5);\n\n //let axisWidth = width - margin.left - margin.right - 70\n\n //let axisWidth = width - 70\n let axisWidth = width * 0.87;\n let xScale = d3.scaleLinear().domain([0, 17]).range([0, axisWidth]);\n\n let axis = d3\n .axisBottom(xScale) //定义一个axis，由bottom可知，是朝下的\n .ticks(17); //设置刻度数目 当使用 band 和 point 比例尺时没有作用\n\n let xAxis = svg1\n .append(\"g\")\n .attr(\"transform\", `translate(${width * 0.085}, ${height1})`)\n .call(axis);\n\n const yScale = d3\n .scaleLinear()\n .domain([0, d3.max(this.state.allTimes)])\n .range([height1, 0]);\n\n const g = svg1\n .append(\"g\")\n .attr(\"transform\", `translate(${width * 0.085}, 0)`);\n\n // console.log(this.state.allTimes)\n const gs = g\n .selectAll(\".bar\")\n .data(this.state.allTimes)\n .enter()\n .append(\"g\")\n .attr(\"class\", \"bar\");\n\n const rectPadding = width * 0.015; //矩形之间的间隙 20\n let container = d3.select(\"#AttributesHeatmap\").node();\n let container1 = d3.select(\"#BarChart\").node();\n let container2 = d3.select(\"#Heatmap\").node();\n\n gs.append(\"rect\")\n .attr(\"x\", function (d, i) {\n //console.log(d, i)\n return gridSize * i + gridSize * 0.1875;\n })\n .attr(\"y\", function (d) {\n //console.log(yScale(d));\n return yScale(d);\n //return yScale(d + 10);\n })\n .attr(\"width\", function () {\n return gridSize * 0.625;\n })\n .attr(\"height\", function (d) {\n // console.log(height1 - yScale(d));\n return height1 - yScale(d);\n })\n .attr(\"fill\", \"#91c0db\")\n .on(\"mousemove\", function (d, i) {\n let coordinates = d3.mouse(container1);\n tooltip\n .style(\"left\", coordinates[0] - 10 + \"px\")\n .style(\"top\", coordinates[1] + 10 + \"px\")\n .style(\"display\", \"inline-block\")\n .html(_this.state.attrs[i] + \"<br>\" + \"sum：\" + d)\n .style(\"opacity\", 0.9);\n })\n .on(\"mouseout\", function (d) {\n tooltip.style(\"display\", \"none\").style(\"opacity\", 0);\n });\n\n /* ----------------------------热力图------------------------ */\n\n const svg = d3\n .select(\"#Heatmap\")\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"id\", \"heatmap\");\n\n //圆形+字母 legends\n\n let focusPerson = store.getState().focusPID;\n const nameLabels = svg\n .append(\"g\")\n .attr(\"class\", \"nameLabel\")\n .attr(\"transform\", \"translate(5, \" + (5 + gridSize / 2) + \")\")\n .selectAll(\"text\")\n .data(this.state.names)\n .enter()\n .append(\"text\")\n .text((d) => d)\n .attr(\"x\", 0)\n .attr(\"y\", function (d, i) {\n return i * gridSize;\n })\n .attr(\"font-size\", \"8.5pt\")\n .attr(\"cursor\", \"pointer\")\n .attr(\"fill\", (d) => (d == focusPerson ? \"#2171b5\" : \"#595959\"))\n .on(\"click\", (d) => {\n store.dispatch(action.selectPerson(d));\n });\n\n const cards = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${width * 0.085}, 0)`)\n .attr(\"class\", \"heatcards\")\n .selectAll(\"rect\")\n .data(this.state.values)\n .enter();\n\n //console.log(cards)\n\n // .enter().append(\"rect\")\n console.log(this.state.values);\n\n const cardsEnter = cards\n .append(\"rect\")\n .attr(\"x\", function (d, i) {\n return ((width * 0.87) / 17) * d.col + 2;\n })\n .attr(\"y\", function (d) {\n return d.row * gridSize;\n })\n .attr(\"rx\", 4)\n .attr(\"ry\", 4)\n .attr(\"width\", gridSize - 5)\n .attr(\"height\", gridSize - 5)\n .attr(\"stroke\", (d) =>\n this.state.names[d.row] == focusPerson ? \"black\" : \"none\"\n )\n .attr(\"stroke-width\", (d) => (d.times == 0 ? \"0\" : \"0.3\"))\n .style(\"fill\", function (d) {\n return color(d.times);\n })\n .attr(\"cursor\", \"pointer\")\n .on(\"click\", (d) => {\n store.dispatch(action.selectPerson(this.state.names[d.row]));\n })\n .on(\"mousemove\", function (d, i) {\n let coordinates = d3.mouse(container2);\n // let coordinates = this.setMouse(d3.mouse(this))\n // console.log(coordinates)\n\n tooltip\n .style(\"left\", coordinates[0] - 40 + \"px\")\n .style(\"top\", coordinates[1] + 80 + \"px\")\n .style(\"display\", \"inline-block\")\n .html(_this.state.attrs[d.col] + \"： \" + d.times)\n .style(\"opacity\", 0.9);\n // console.log(tooltip)\n })\n .on(\"mouseout\", function (d) {\n tooltip.style(\"display\", \"none\").style(\"opacity\", 0);\n });\n\n // console.log(heatmap)\n }\n\n render() {\n const { data } = this.props;\n return (\n <>\n <div className=\"header\"> Attributes Heatmap </div>\n\n <div id=\"AttributesHeatmap\" className=\"pane\">\n <div\n className=\"heatmap-tooltip\"\n style={{\n opacity: 0,\n \n }}\n >\n {\" \"}\n </div>\n <div id=\"BarChart\"> </div>\n <div\n id=\"Heatmap\"\n style={{\n overflowX: \"hidden\",\n }}\n >\n {\" \"}\n </div>{\" \"}\n {/* <BarChart data={data} width={1000} height={550}/> */}\n </div>\n </>\n );\n }\n}\n","/Users/piny/Desktop/FDepVis/src/views/ScatterPlot/index.js",["70","71"],"/Users/piny/Desktop/FDepVis/src/views/FamilyTree/index.js",["72","73","74","75","76","77","78","79","80"],"/Users/piny/Desktop/FDepVis/src/views/FamilySelector/index.js",["81","82","83","84","85","86"],"import React, { Component } from 'react';\nimport './FamilySelector.css';\nimport { Table, Tag, Space } from 'antd';\n// 使用redux\nimport store from '../../redux/index'\nimport action from '../../redux/actions'\n\nexport default class FamilySelector extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [],\n columns: [\n {\n title: 'ID',\n dataIndex: 'ID',\n key: 'ID'\n },\n {\n title: 'people',\n dataIndex: 'people',\n key: 'people'\n },\n {\n title: 'SNum',\n dataIndex: 'SNum',\n key: 'SNum'\n }\n ]\n };\n }\n componentDidMount(){\n this.setState({\n dataSource: store.getState().familyInfo\n }, ()=>{\n this.setFocus();\n });\n store.subscribe(()=>{\n this.setFocus();\n })\n }\n\n setFocus(){\n let focusFamily = store.getState().focusFamily;\n let nodes = document.getElementsByClassName('ant-table-row');\n console.log(nodes)\n for(var i = 0; i < nodes.length; i++){\n let key = nodes[i].getAttribute('data-row-key')\n if(key == focusFamily){\n nodes[i].classList.add('onFocus')\n }else{\n nodes[i].classList.remove('onFocus')\n }\n }\n }\n onRowClick(e){\n console.log(e)\n }\n\n getElementByAttr(tag,attr,value){\n var aElements=document.getElementsByTagName(tag);\n var aEle=[];\n for(var i=0;i<aElements.length;i++)\n {\n if(aElements[i].getAttribute(attr)==value)\n aEle.push( aElements[i] );\n }\n return aEle;\n }\n render() {\n return (\n <div id='FamilySelector' className='pane'>\n <div className='header'>Family Selector</div>\n <Table \n onRow={record => {\n return {\n onClick: event => {\n console.log(record)\n let node = this.getElementByAttr('tr', 'data-row-key', record.key)[0];\n let nclasses = node.getAttribute('class');\n if(nclasses.indexOf('onSelect') == -1){ // 未选中 - 选中\n node.classList.add('onSelect')\n store.dispatch(action.addFamily(record.ID)) \n }else{ // 选中\n if(nclasses.indexOf('onFocus') == -1){ // 选中，但未focus - focus\n node.classList.add('onFocus')\n store.dispatch(action.selectFamily(record.ID))\n }else{\n node.classList.remove('onSelect') // 选中，且focus - 取消选中\n store.dispatch(action.removeFamily(record.ID))\n }\n }\n }\n };\n }}\n rowClassName={record => {\n return store.getState().selectedFamily.indexOf(record.key) !== -1 ? 'onSelect' : '';\n }}\n dataSource={this.state.dataSource} columns={this.state.columns} size='small'\n pagination={{\n hideOnSinglePage: true,\n defaultPageSize: 10\n }}\n />\n </div>\n )\n }\n}","/Users/piny/Desktop/FDepVis/src/views/DetailInfo/index.js",["87","88","89","90","91","92","93","94"],"import React, { Component } from 'react';\nimport * as d3 from \"d3\";\nimport './DetailInfo.css';\nimport { Row, Col, List, Descriptions} from 'antd';\nimport store from '../../redux/index';\nimport axios from 'axios';\n\nexport default class DetailInfo extends Component {\n constructor(props) {\n super(props)\n this.state = {\n ID: 'ID: ',\n img:\"./img/ASPHYXIA.jpg\",\n data: {\n ID: 133,\n Sex: 'M',\n Birth_Year: 1900,\n Death_Year: 1950,\n BMI: 25,\n Suicide_Weapon: 'Rope',\n Death_Cause:'Acute carbon monoxide poisoning',\n suicide_glyphs:''\n },\n\n\n }\n }\n\n\n\n\n componentDidMount() {\n \n store.subscribe(() => {\n this.uploadData()\n })\n this.uploadData()\n }\n\n\n uploadData() {\n const focusPID = store.getState().focusPID\n axios.get(\"http://106.52.126.175/api/getDetailInfo/\" + '?pid=' + focusPID\n ).then((res) => {\n let data = res.data;\n console.log(\"detailInfo\", data)\n // if (data.maxbmi == 0) {\n // data.maxbmi = 22\n // }\n this.setState({\n ID: 'ID: ' + data.pid,\n img: \"./img/\" + data.suicide_glyphs + \".png\",\n data: {\n ID: data.pid,\n Sex: data.sex,\n Birth_Year: data.bdate.slice(0,4),\n Death_Year: data.ddate.slice(0,4),\n BMI: data.maxbmi.toPrecision(4), //保留四位有效数字\n Suicide_Weapon: data.weapon,\n Death_Cause: data.cause_death,\n \n },\n \n })\n // document.getElementById(\"BarChart\").innerHTML = ''\n // document.getElementById(\"Heatmap\").innerHTML = ''\n this.drawChart()\n })\n }\n\n drawChart() {\n\n // preserveAspectRatio=\"none\" 不保留长宽比例\n const man_body = '<svg preserveAspectRatio=\"none\" id=\"man\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2940\" width=\"200\" height=\"200\"><path d=\"M512 88m-88 0a88 88 0 1 0 176 0 88 88 0 1 0-176 0Z\" fill=\"#333333\" p-id=\"2941\"></path><path d=\"M744.9 619.6c-21.3 5.7-43.3-6.9-49-28.3l-64.1-239c-1.2-4.5-7.9-3.6-7.9 1V1008c0 8.8-7.2 16-16 16h-64c-8.8 0-16-7.2-16-16V640c0-8.8-7.2-16-16-16s-16 7.2-16 16v368c0 8.8-7.2 16-16 16h-64c-8.8 0-16-7.2-16-16V353.3c0-4.7-6.7-5.6-7.9-1l-64.1 239c-5.7 21.3-27.7 34-49 28.3-21.3-5.7-34-27.6-28.3-49l69.5-260C339 240.7 402.4 192 474.8 192h74.3c72.5 0 135.9 48.7 154.6 118.7l69.5 260c5.7 21.3-6.9 43.2-28.3 48.9z\" fill=\"#333333\" p-id=\"2942\"></path></svg>'\n\n const woman_body = '<svg preserveAspectRatio=\"none\" id=\"woman\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2987\" width=\"225\" height=\"225\"><path d=\"M529.218 234.374c43.289 0 81.292 28.8 93 70.475l59.925 213.319c3.427 12.199-3.685 24.867-15.884 28.294-2.02 0.567-4.107 0.855-6.205 0.855-17.951 0-33.758-11.825-38.826-29.046l-53.568-182.01h-16.407l95.16 333.52h-87.43v244.56c0 19.694-15.966 35.659-35.66 35.659-19.693 0-35.658-15.965-35.658-35.659v-244.56h-17.112v245.697c0 18.983-15.39 34.372-34.372 34.372h-0.15c-19.09-0.084-34.522-15.583-34.522-34.673V669.78h-90.078l95.242-333.519h-14.872l-51.123 180.873c-5.047 17.855-21.342 30.183-39.897 30.183-13.136 0-23.785-10.649-23.785-23.785 0-2.17 0.297-4.329 0.882-6.418l59.465-212.205c11.687-41.706 49.705-70.535 93.017-70.535h98.858zM479.962 71c40.643 0 73.59 32.967 73.59 73.634 0 40.666-32.947 73.633-73.59 73.633s-73.59-32.967-73.59-73.633c0-40.667 32.947-73.634 73.59-73.634z\" fill=\"#333333\" p-id=\"2988\"></path></svg>'\n\n let sex_icon;\n if(this.state.data.Sex == 'M') {\n sex_icon = man_body\n } else if (this.state.data.Sex == 'F'){\n sex_icon = woman_body\n }\n document.getElementById(\"body\").innerHTML = sex_icon\n\n const height = document.getElementById(\"body\").clientHeight\n const width = document.getElementById(\"body\").clientWidth\n\n let bmi = this.state.data.BMI\n\n if (bmi == 0) {\n bmi = 22\n }\n\n //let new_width = 200;\n let new_width = width * (bmi / 22)\n let new_height = height * 0.9\n console.log(bmi / 22, new_width)\n\n if (this.state.data.Sex == 'M'){\n d3.select(\"#man\")\n .attr('width', new_width)\n .attr(\"height\", new_height)\n .attr(\"transform\", `translate(${(200 - new_width) / 2},${new_height * 0.05})`)\n \n } else if (this.state.data.Sex == 'F') {\n d3.select(\"#woman\")\n .attr('width', new_width)\n .attr(\"height\", new_height)\n .attr(\"transform\", `translate(${(200 - new_width) / 2}, ${new_height * 0.05})`)\n }\n \n\n // ----------------- rect 透明蒙板 ------------------------\n // console.log(this.state.data.ddate)\n // console.log(this.state.data.bdate)\n let age = this.state.data.Death_Year - this.state.data.Birth_Year\n\n console.log(age)\n\n let svg = d3.select(\"#body\").append('svg')\n .attr(\"width\", width*1.2).attr(\"height\", height)\n .attr(\"transform\", `translate(0, ${- (100-age) * 1.8})`);\n\n svg.append(\"rect\")\n .attr(\"width\", width*1.2).attr(\"height\", 200)\n .attr(\"fill\", \"white\")\n .attr(\"opacity\", 0.35)\n }\n\n\n render() {\n return (\n <div id='DetailInfo' className='pane' style={{overflow : \"hidden\"}}>\n <div className='header'>Detail Information</div>\n\n {/* <div id = 'info' style={{ left : 200}}> </div> */}\n\n <Row justify=\"space-around\" align=\"middle\">\n\n <Col span={10} style={{ paddingTop: 10 }}>\n <Row> \n <div id='body' > </div> \n </Row>\n\n {/* <Row>\n <img width={100} style={{}} src=\"./img/ASPHYXIA.jpg\"/>\n </Row> */}\n\n </Col>\n\n <Col span={14} >\n \n <Descriptions title={this.state.ID} style={{ padding: 10 }} >\n <Descriptions.Item label=\"Sex\" span={2}>\n {this.state.data.Sex}\n </Descriptions.Item>\n \n <Descriptions.Item label=\"BMI\" span={2}>\n {this.state.data.BMI}\n </Descriptions.Item>\n\n <Descriptions.Item label=\"Birth Year\" span={2}>\n {this.state.data.Birth_Year}\n </Descriptions.Item>\n \n <Descriptions.Item label=\"Death Year\" span={2}>\n {this.state.data.Death_Year}\n </Descriptions.Item>\n \n <Descriptions.Item label=\"Death Age\" span={4}>\n {this.state.data.Death_Year - this.state.data.Birth_Year}\n </Descriptions.Item>\n\n \n \n\n <Descriptions.Item label=\"Death Cause\" span={4}>\n {this.state.data.Death_Cause}\n </Descriptions.Item>\n\n <Descriptions.Item label=\"Suicide Weapon\" span={2}>\n {this.state.data.Suicide_Weapon}\n </Descriptions.Item> \n\n <Descriptions.Item label=\"\" >\n <img width={50} style={{}} src={this.state.img}/>\n </Descriptions.Item>\n \n </Descriptions>\n\n </Col>\n\n {/* <Col span={1}></Col> */}\n\n </Row>\n\n </div>\n )\n }\n}","/Users/piny/Desktop/FDepVis/src/redux/actions.js",[],"/Users/piny/Desktop/FDepVis/src/redux/index.js",[],"/Users/piny/Desktop/FDepVis/src/redux/reducers.js",[],"/Users/piny/Desktop/FDepVis/src/redux/state.js",[],["95","96"],{"ruleId":"97","replacedBy":"98"},{"ruleId":"99","replacedBy":"100"},{"ruleId":"101","severity":1,"message":"102","line":106,"column":16,"nodeType":"103","endLine":106,"endColumn":30},{"ruleId":"104","severity":1,"message":"105","line":70,"column":53,"nodeType":"106","messageId":"107","endLine":70,"endColumn":54},{"ruleId":"108","severity":1,"message":"109","line":85,"column":9,"nodeType":"110","messageId":"111","endLine":85,"endColumn":17},{"ruleId":"112","severity":1,"message":"113","line":119,"column":20,"nodeType":"114","messageId":"115","endLine":119,"endColumn":32},{"ruleId":"108","severity":1,"message":"116","line":153,"column":11,"nodeType":"110","messageId":"111","endLine":153,"endColumn":17},{"ruleId":"108","severity":1,"message":"117","line":174,"column":11,"nodeType":"110","messageId":"111","endLine":174,"endColumn":17},{"ruleId":"108","severity":1,"message":"118","line":254,"column":9,"nodeType":"110","messageId":"111","endLine":254,"endColumn":14},{"ruleId":"108","severity":1,"message":"119","line":276,"column":11,"nodeType":"110","messageId":"111","endLine":276,"endColumn":22},{"ruleId":"108","severity":1,"message":"120","line":277,"column":9,"nodeType":"110","messageId":"111","endLine":277,"endColumn":18},{"ruleId":"104","severity":1,"message":"105","line":305,"column":47,"nodeType":"106","messageId":"107","endLine":305,"endColumn":48},{"ruleId":"108","severity":1,"message":"121","line":324,"column":11,"nodeType":"110","messageId":"111","endLine":324,"endColumn":21},{"ruleId":"122","severity":1,"message":"123","line":339,"column":31,"nodeType":"106","messageId":"124","endLine":339,"endColumn":33},{"ruleId":"108","severity":1,"message":"125","line":357,"column":11,"nodeType":"110","messageId":"111","endLine":357,"endColumn":21},{"ruleId":"122","severity":1,"message":"123","line":370,"column":33,"nodeType":"106","messageId":"124","endLine":370,"endColumn":35},{"ruleId":"122","severity":1,"message":"123","line":372,"column":45,"nodeType":"106","messageId":"124","endLine":372,"endColumn":47},{"ruleId":"108","severity":1,"message":"126","line":401,"column":13,"nodeType":"110","messageId":"111","endLine":401,"endColumn":17},{"ruleId":"122","severity":1,"message":"123","line":184,"column":34,"nodeType":"106","messageId":"124","endLine":184,"endColumn":36},{"ruleId":"104","severity":1,"message":"105","line":206,"column":56,"nodeType":"106","messageId":"107","endLine":206,"endColumn":57},{"ruleId":"104","severity":1,"message":"105","line":27,"column":57,"nodeType":"106","messageId":"107","endLine":27,"endColumn":58},{"ruleId":"122","severity":1,"message":"123","line":165,"column":81,"nodeType":"106","messageId":"124","endLine":165,"endColumn":83},{"ruleId":"122","severity":1,"message":"123","line":179,"column":42,"nodeType":"106","messageId":"124","endLine":179,"endColumn":44},{"ruleId":"122","severity":1,"message":"123","line":230,"column":36,"nodeType":"106","messageId":"124","endLine":230,"endColumn":38},{"ruleId":"122","severity":1,"message":"123","line":233,"column":37,"nodeType":"106","messageId":"124","endLine":233,"endColumn":39},{"ruleId":"122","severity":1,"message":"123","line":275,"column":44,"nodeType":"106","messageId":"124","endLine":275,"endColumn":46},{"ruleId":"122","severity":1,"message":"127","line":277,"column":29,"nodeType":"106","messageId":"124","endLine":277,"endColumn":31},{"ruleId":"108","severity":1,"message":"128","line":325,"column":15,"nodeType":"110","messageId":"111","endLine":325,"endColumn":20},{"ruleId":"108","severity":1,"message":"129","line":369,"column":15,"nodeType":"110","messageId":"111","endLine":369,"endColumn":23},{"ruleId":"108","severity":1,"message":"130","line":3,"column":17,"nodeType":"110","messageId":"111","endLine":3,"endColumn":20},{"ruleId":"108","severity":1,"message":"131","line":3,"column":22,"nodeType":"110","messageId":"111","endLine":3,"endColumn":27},{"ruleId":"122","severity":1,"message":"123","line":50,"column":20,"nodeType":"106","messageId":"124","endLine":50,"endColumn":22},{"ruleId":"122","severity":1,"message":"123","line":66,"column":47,"nodeType":"106","messageId":"124","endLine":66,"endColumn":49},{"ruleId":"122","severity":1,"message":"123","line":82,"column":65,"nodeType":"106","messageId":"124","endLine":82,"endColumn":67},{"ruleId":"122","severity":1,"message":"123","line":86,"column":68,"nodeType":"106","messageId":"124","endLine":86,"endColumn":70},{"ruleId":"108","severity":1,"message":"132","line":4,"column":20,"nodeType":"110","messageId":"111","endLine":4,"endColumn":24},{"ruleId":"104","severity":1,"message":"105","line":43,"column":62,"nodeType":"106","messageId":"107","endLine":43,"endColumn":63},{"ruleId":"122","severity":1,"message":"123","line":79,"column":32,"nodeType":"106","messageId":"124","endLine":79,"endColumn":34},{"ruleId":"122","severity":1,"message":"123","line":81,"column":40,"nodeType":"106","messageId":"124","endLine":81,"endColumn":42},{"ruleId":"122","severity":1,"message":"123","line":91,"column":17,"nodeType":"106","messageId":"124","endLine":91,"endColumn":19},{"ruleId":"122","severity":1,"message":"123","line":100,"column":33,"nodeType":"106","messageId":"124","endLine":100,"endColumn":35},{"ruleId":"122","severity":1,"message":"123","line":106,"column":40,"nodeType":"106","messageId":"124","endLine":106,"endColumn":42},{"ruleId":"133","severity":1,"message":"134","line":187,"column":33,"nodeType":"103","endLine":187,"endColumn":82},{"ruleId":"97","replacedBy":"135"},{"ruleId":"99","replacedBy":"136"},"no-native-reassign",["137"],"no-negated-in-lhs",["138"],"jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-useless-concat","Unexpected string concatenation of literals.","BinaryExpression","unexpectedConcat","no-unused-vars","'allCount' is assigned a value but never used.","Identifier","unusedVar","no-new-object","The object literal notation {} is preferrable.","NewExpression","preferLiteral","'margin' is assigned a value but never used.","'colors' is assigned a value but never used.","'xAxis' is assigned a value but never used.","'rectPadding' is assigned a value but never used.","'container' is assigned a value but never used.","'nameLabels' is assigned a value but never used.","eqeqeq","Expected '===' and instead saw '=='.","unexpected","'cardsEnter' is assigned a value but never used.","'data' is assigned a value but never used.","Expected '!==' and instead saw '!='.","'width' is assigned a value but never used.","'segments' is assigned a value but never used.","'Tag' is defined but never used.","'Space' is defined but never used.","'List' is defined but never used.","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.",["137"],["138"],"no-global-assign","no-unsafe-negation"]