diff --git a/Workplace/package.json b/Workplace/package.json index ff500b4c83538eef7bc851a675ace0a8bf2d5414..1adc1a0e9bf036222b7b3785e1cd7a7302464870 100644 --- a/Workplace/package.json +++ b/Workplace/package.json @@ -16,7 +16,8 @@ "moment": "^2.22.2", "prop-types": "^15.5.10", "react": "^16.6.3", - "umi-request": "^1.0.0" + "umi-request": "^1.0.0", + "bizcharts": "^3.5.2" }, "devDependencies": { "umi": "^2.6.9", @@ -24,4 +25,4 @@ "umi-plugin-react": "^1.3.0-beta.1" }, "license": "MIT" -} \ No newline at end of file +} diff --git a/Workplace/src/components/Radar/autoHeight.tsx b/Workplace/src/components/Radar/autoHeight.tsx new file mode 100644 index 0000000000000000000000000000000000000000..aa25500027388d713c0cc4e9f19a087810646f8a --- /dev/null +++ b/Workplace/src/components/Radar/autoHeight.tsx @@ -0,0 +1,75 @@ +import React from 'react'; + +export type IReactComponent

= + | React.StatelessComponent

+ | React.ComponentClass

+ | React.ClassicComponentClass

; + +function computeHeight(node: HTMLDivElement) { + node.style.height = '100%'; + const totalHeight = parseInt(getComputedStyle(node).height + '', 10); + const padding = + parseInt(getComputedStyle(node).paddingTop + '', 10) + + parseInt(getComputedStyle(node).paddingBottom + '', 10); + return totalHeight - padding; +} + +function getAutoHeight(n: HTMLDivElement) { + if (!n) { + return 0; + } + + let node = n; + + let height = computeHeight(node); + const parentNode = node.parentNode as HTMLDivElement; + if (parentNode) { + height = computeHeight(parentNode); + } + + return height; +} + +interface IAutoHeightProps { + height?: number; +} + +function autoHeight() { + return function

( + WrappedComponent: React.ComponentClass

| React.SFC

+ ): React.ComponentClass

{ + class AutoHeightComponent extends React.Component

{ + state = { + computedHeight: 0, + }; + root!: HTMLDivElement; + componentDidMount() { + const { height } = this.props; + if (!height) { + const h = getAutoHeight(this.root); + // eslint-disable-next-line + this.setState({ computedHeight: h }); + if (h < 1) { + const h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + } + } + } + handleRoot = (node: HTMLDivElement) => { + this.root = node; + }; + render() { + const { height } = this.props; + const { computedHeight } = this.state; + const h = height || computedHeight; + return ( +

+ {h > 0 && } +
+ ); + } + } + return AutoHeightComponent; + }; +} +export default autoHeight; diff --git a/Analysis/src/components/Charts/Radar/index.less b/Workplace/src/components/Radar/index.less similarity index 100% rename from Analysis/src/components/Charts/Radar/index.less rename to Workplace/src/components/Radar/index.less diff --git a/Analysis/src/components/Charts/Radar/index.tsx b/Workplace/src/components/Radar/index.tsx similarity index 97% rename from Analysis/src/components/Charts/Radar/index.tsx rename to Workplace/src/components/Radar/index.tsx index ab79250db217fc03c9f21a6b694c1a15edaf9813..555da2da57a93a26f7fb9e64113b8f98e60f5529 100644 --- a/Analysis/src/components/Charts/Radar/index.tsx +++ b/Workplace/src/components/Radar/index.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; -import { Chart, G2, Tooltip, Geom, Coord, Axis } from 'bizcharts'; +import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts'; import { Row, Col } from 'antd'; -import autoHeight from '../autoHeight'; +import autoHeight from './autoHeight'; import styles from './index.less'; export interface IRadarProps { diff --git a/Workplace/src/index.tsx b/Workplace/src/index.tsx index 7a87036f81ef4bfff77614110e477daed5bc189f..5eb1d9867c7167eb9b283a1c31d96ebe86361e92 100644 --- a/Workplace/src/index.tsx +++ b/Workplace/src/index.tsx @@ -4,17 +4,16 @@ import { connect } from 'dva'; import Link from 'umi/link'; import { Row, Col, Card, List, Avatar } from 'antd'; import { Dispatch } from 'redux'; -import { Charts } from 'ant-design-pro'; + import EditableLinkGroup from './components/EditableLinkGroup'; import PageHeaderWrapper from './components/PageHeaderWrapper'; +import Radar from './components/Radar'; import { ModalState } from './model'; import { CurrentUser, Activeties, RadarData, Notice } from './data'; import styles from './style.less'; -const { Radar } = Charts; - const links = [ { title: '操作一',