From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 28 七月 2021 11:39:39 +0800
Subject: [PATCH] 2021-07-28

---
 src/menu/components/chart/antv-pie/index.jsx |  384 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 306 insertions(+), 78 deletions(-)

diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx
index 374720a..593fcd5 100644
--- a/src/menu/components/chart/antv-pie/index.jsx
+++ b/src/menu/components/chart/antv-pie/index.jsx
@@ -1,14 +1,14 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Icon, Popover, notification } from 'antd'
+import { Icon, Popover } from 'antd'
 import { Chart } from '@antv/g2'
-import DataSet from '@antv/data-set'
+import DataSet, { DataView } from '@antv/data-set'
 
 import MKEmitter from '@/utils/events.js'
 import asyncComponent from '@/utils/asyncComponent'
 import asyncIconComponent from '@/utils/asyncIconComponent'
-
+import { resetStyle } from '@/utils/utils-custom.js'
 import Utils from '@/utils/utils.js'
 import zhCN from '@/locales/zh-CN/model.js'
 import enUS from '@/locales/en-US/model.js'
@@ -18,7 +18,6 @@
 const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
 const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
 const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
-const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
 const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
 const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
 const ClockComponent = asyncIconComponent(() => import('@/menu/components/share/clockcomponent'))
@@ -33,11 +32,12 @@
   state = {
     dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
     card: null,
+    ismob: sessionStorage.getItem('appType') === 'mob',
     eventListener: null
   }
 
   UNSAFE_componentWillMount () {
-    const { card } = this.props
+    const { card, ismob } = this.props
 
     if (card.isNew) {
       let _plot = {
@@ -48,8 +48,15 @@
         name: card.name
       }
 
+      if (ismob) {
+        _plot.width = 24
+      }
+
       if (card.subtype === 'ring') {
         _plot.innerRadius = 50
+      } else if (card.subtype === 'nest') {
+        _plot.innerRadius = 30
+        _plot.radius = 80
       }
 
       let _card = {
@@ -105,9 +112,12 @@
   }
 
   componentDidMount () {
-    this.pierender()
     MKEmitter.addListener('tabsChange', this.handleTabsChange)
     MKEmitter.addListener('submitStyle', this.getStyle)
+
+    setTimeout(() => {
+      this.viewrender()
+    }, 1000)
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -134,7 +144,18 @@
         _element.innerHTML = ''
       }
 
-      setTimeout(this.pierender, 100)
+      this.$timer && clearTimeout(this.$timer)
+      this.$timer = setTimeout(this.viewrender, 100)
+    }
+  }
+
+  viewrender = () => {
+    const { card } = this.state
+
+    if (card.plot.shape === 'nest') {
+      this.nestrender()
+    } else {
+      this.pierender()
     }
   }
 
@@ -145,13 +166,6 @@
       { label: '2003', value: 33.7 },
       { label: '2004', value: 30.7 },
       { label: '2005', value: 25.8 },
-      { label: '2006', value: 31.7 },
-      { label: '2007', value: 33 },
-      { label: '2008', value: 46 },
-      { label: '2009', value: 38.3 },
-      { label: '2010', value: 28 },
-      { label: '2011', value: 42.5 },
-      { label: '2012', value: 30.3 }
     ]
 
     let data = xdata.map(item => {
@@ -164,13 +178,252 @@
     return data
   }
 
-  pierender = () => {
-    const { card } = this.state
-    let plot = {...card.plot, height: card.plot.height - 80}
-    let color = plot.color || 'rgba(0, 0, 0, 0.85)'
+  getnestdata = (X_axis, Y_axis, type) => {
+    const xdata = [
+      { name: '鐙瓙', type: '鐏薄', value: 11 },
+      { name: '鐧界緤', type: '鐏薄', value: 10 },
+      { name: '姘寸摱', type: '椋庡悜', value: 14 },
+      { name: '灏勬墜', type: '鐏薄', value: 10 },
+      { name: '鍙屽瓙', type: '椋庡悜', value: 7 },
+      { name: '澶╁钩', type: '椋庡悜', value: 7 },
+      { name: '鎽╃警', type: '鍦熻薄', value: 14 },
+      { name: '閲戠墰', type: '鍦熻薄', value: 3 },
+      { name: '澶勫コ', type: '鍦熻薄', value: 3 },
+      { name: '澶╄潕', type: '姘磋薄', value: 11 },
+      { name: '宸ㄨ煿', type: '姘磋薄', value: 5 },
+      { name: '鍙岄奔', type: '姘磋薄', value: 5 },
+    ]
 
+    let map = new Map()
+    let sort = 1
+    let data = xdata.map(item => {
+      let _sort = sort
+      if (map.has(item.type)) {
+        _sort = map.get(item.type)
+      } else {
+        map.set(item.type, _sort)
+        sort++
+      }
+      return {
+        [X_axis]: item.name,
+        [Y_axis]: item.value,
+        [type]: item.type,
+        $sort: _sort
+      }
+    })
+
+    return data
+  }
+
+  nestrender = () => {
+    const { card } = this.state
+    const plot = card.plot
+
+    let color = plot.color || 'rgba(0, 0, 0, 0.85)'
     let X_axis = plot.Xaxis || 'x'
     let Y_axis = plot.Yaxis || 'y'
+    let type = plot.type || 'type'
+    let height = plot.height || 400
+    if (card.plot.title || card.search.length > 0) {
+      height = height - 45
+    }
+
+    const _data = this.getnestdata(X_axis, Y_axis, type)
+    const dvx = new DataView().source(_data)
+
+    dvx.transform({
+      type: 'sort-by',
+      fields: ['$sort']
+    })
+
+    let data = dvx.rows
+
+    // 閫氳繃 DataSet 璁$畻鐧惧垎姣�
+    const dv = new DataView()
+    dv.source(data).transform({
+      type: 'percent',
+      field: Y_axis,
+      dimension: type,
+      as: '$percent'
+    })
+
+    const dv1 = new DataView()
+    dv1.source(data).transform({
+      type: 'percent',
+      field: Y_axis,
+      dimension: X_axis,
+      as: '$percent',
+    })
+
+    const chart = new Chart({
+      container: card.uuid + 'canvas',
+      autoFit: true,
+      height: height,
+      padding: 0,
+    })
+
+    chart.data(dv.rows)
+
+    if (plot.show !== 'value') {
+      chart.scale('percent', {
+        formatter: (val) => {
+          val = val * 100 + '%'
+          return val
+        }
+      })
+
+      Y_axis = '$percent'
+    }
+    let radius = plot.radius / 100
+    let innerRadius = plot.innerRadius / 100
+    
+    chart.coordinate('theta', {
+      innerRadius: innerRadius,
+      radius: innerRadius + (radius - innerRadius) / 2,
+    })
+
+    if (plot.tooltip !== 'true') {
+      chart.tooltip(false)
+    } else {
+      chart.tooltip({
+        showTitle: false,
+        showMarkers: false
+      })
+    }
+
+    chart.legend(false)
+    let chart1 = chart
+      .interval()
+      .adjust('stack')
+      .position(Y_axis)
+      .color(type)
+      .tooltip(`${type}*${Y_axis}`, (type, percent) => {
+        if (plot.show !== 'value') {
+          percent = (percent * 100).toFixed(2) + '%'
+        }
+        return {
+          name: type,
+          value: percent,
+        }
+      })
+
+    if (plot.splitLine) {
+      chart1.style({
+        lineWidth: plot.splitLine,
+        stroke: plot.splitColor,
+      })
+    }
+    if (plot.label !== 'false') {
+      chart1.label(type, {
+        offset: -10,
+      })
+    }
+    
+    const outterView = chart.createView()
+    
+    outterView.data(dv1.rows)
+
+    if (plot.show !== 'value') {
+      outterView.scale('percent', {
+        formatter: (val) => {
+          val = val * 100 + '%'
+          return val
+        }
+      })
+    }
+    outterView.coordinate('theta', {
+      innerRadius: (innerRadius + (radius - innerRadius) / 2) / radius,
+      radius: radius
+    })
+    let chart2 = outterView
+      .interval()
+      .adjust('stack')
+      .position(Y_axis)
+      .color(X_axis)
+      .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
+        if (plot.show !== 'value') {
+          value = (value * 100).toFixed(2) + '%'
+        }
+        return {
+          name: name,
+          value: value
+        }
+      })
+
+    if (plot.splitLine) {
+      chart2.style({
+        lineWidth: plot.splitLine,
+        stroke: plot.splitColor,
+      })
+    }
+
+    if (plot.label !== 'false') {
+      if (plot.label === 'inner') {
+        chart2.label(Y_axis, {
+          offset: -30,
+          content: (data) => {
+            let _val = ''
+            if (plot.show !== 'value') {
+              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
+            } else {
+              _val = `${data[Y_axis]}`
+            }
+            return _val
+          },
+          style: {
+            textAlign: 'center',
+            fontSize: 16,
+            shadowBlur: 2,
+            shadowColor: 'rgba(0, 0, 0, .45)',
+            fill: '#fff',
+          }
+        })
+      } else {
+        chart2.label(Y_axis, {
+          layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
+          labelHeight: 20,
+          content: (data) => {
+            let _val = ''
+            if (plot.show !== 'value') {
+              _val = `${(data[Y_axis] * 100).toFixed(2)}%`
+            } else {
+              _val = `${data[Y_axis]}`
+            }
+
+            return `${data[X_axis]}: ${_val}`
+          },
+          labelLine: {
+            style: {
+              lineWidth: 0.5,
+            },
+          },
+          style: {
+            fill: color
+          }
+        })
+      }
+    }
+    
+    if (plot.interaction && plot.interaction.length) {
+      plot.interaction.forEach(t => {
+        chart.interaction(t)
+      })
+    }
+    
+    chart.render()
+  }
+
+  pierender = () => {
+    const { card } = this.state
+    const plot = card.plot
+
+    let color = plot.color || 'rgba(0, 0, 0, 0.85)'
+    let X_axis = plot.Xaxis || 'x'
+    let Y_axis = plot.Yaxis || 'y'
+    let height = plot.height || 400
+    if (card.plot.title || card.search.length > 0) {
+      height = height - 45
+    }
 
     let data = this.getdata(X_axis, Y_axis)
 
@@ -180,7 +433,7 @@
     const chart = new Chart({
       container: card.uuid + 'canvas',
       autoFit: true,
-      height: plot.height || 400
+      height: height
     })
 
     if (plot.shape !== 'nightingale' && plot.show !== 'value') {
@@ -245,6 +498,7 @@
       })
     }
 
+    // 楗煎浘鎴栫幆鍥�
     if (plot.shape !== 'nightingale') {
       let _chart = chart
         .interval()
@@ -260,24 +514,26 @@
             value: value
           }
         })
+
+      if (plot.splitLine) {
+        _chart.style({
+          lineWidth: plot.splitLine,
+          stroke: plot.splitColor,
+        })
+      }
+
       if (plot.label !== 'false') {
         if (plot.label === 'inner') {
           _chart.label(Y_axis, {
             offset: -30,
             content: (data) => {
-              let _label = ''
               let _val = ''
               if (plot.show !== 'value') {
                 _val = `${(data[Y_axis] * 100).toFixed(2)}%`
               } else {
                 _val = `${data[Y_axis]}`
               }
-              if (plot.label === 'inner') {
-                _label = _val
-              } else {
-                _label = `${data[X_axis]}: ${_val}`
-              }
-              return _label
+              return _val
             },
             style: {
               textAlign: 'center',
@@ -289,22 +545,17 @@
           })
         } else {
           _chart.label(Y_axis, {
-            layout: { type: 'pie-spider' },
+            layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' },
             labelHeight: 20,
             content: (data) => {
-              let _label = ''
               let _val = ''
               if (plot.show !== 'value') {
                 _val = `${(data[Y_axis] * 100).toFixed(2)}%`
               } else {
                 _val = `${data[Y_axis]}`
               }
-              if (plot.label === 'inner') {
-                _label = _val
-              } else {
-                _label = `${data[X_axis]}: ${_val}`
-              }
-              return _label
+
+              return `${data[X_axis]}: ${_val}`
             },
             labelLine: {
               style: {
@@ -317,10 +568,8 @@
           })
         }
       }
-      chart.interaction('element-active')
     } else {
       chart.axis(false)
-      chart.interaction('element-highlight')
       let _chart = chart
         .interval()
         .position(`${X_axis}*${Y_axis}`)
@@ -337,11 +586,19 @@
           }
 
           _chart.label(X_axis, _label)
-          .style({
-            lineWidth: 1,
-            stroke: '#fff',
+        }
+        if (plot.splitLine) {
+          _chart.style({
+            lineWidth: plot.splitLine,
+            stroke: plot.splitColor,
           })
         }
+    }
+
+    if (plot.interaction && plot.interaction.length) {
+      plot.interaction.forEach(t => {
+        chart.interaction(t)
+      })
     }
 
     chart.render()
@@ -349,13 +606,16 @@
 
   updateComponent = (component) => {
     const card = fromJS(this.state.card).toJS()
-    let refresh = false
+
     if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) {
       let _element = document.getElementById(card.uuid + 'canvas')
       if (_element) {
         _element.innerHTML = ''
       }
-      refresh = true
+      this.$timer && clearTimeout(this.$timer)
+      this.$timer = setTimeout(() => {
+        this.viewrender()
+      }, 150)
     }
 
     component.width = component.plot.width
@@ -363,12 +623,6 @@
     
     this.setState({
       card: component
-    }, () => {
-      if (refresh) {
-        setTimeout(() => {
-          this.pierender()
-        }, 100)
-      }
     })
     this.props.updateConfig(component)
   }
@@ -410,32 +664,6 @@
     this.updateComponent(_card)
   }
 
-  handleLog = (type, logs, item) => {
-    let card = fromJS(this.state.card).toJS()
-
-    if (type === 'revert') {
-      card.action = card.action ? [...card.action, item] : [item]
-      card.btnlog = logs
-
-      this.setState({ card })
-      this.props.updateConfig(card)
-      notification.success({
-        top: 92,
-        message: '鎭㈠鎴愬姛锛�',
-        duration: 2
-      })
-    } else {
-      card.btnlog = logs
-      this.setState({ card })
-      this.props.updateConfig(card)
-      notification.success({
-        top: 92,
-        message: '娓呴櫎鎴愬姛锛�',
-        duration: 2
-      })
-    }
-  }
-
   clickComponent = (e) => {
     if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') {
       e.stopPropagation()
@@ -444,19 +672,18 @@
   }
 
   render() {
-    const { card } = this.state
+    const { card, ismob } = this.state
+    let _style = resetStyle(card.style)
 
     return (
-      <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
-        <NormalHeader config={card} updateComponent={this.updateComponent}/>
+      <div className="menu-pie-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
         <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
           <div className="mk-popover-control">
-            <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" />
+            {!ismob ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null}
             <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
             <CopyComponent type="pie" card={card}/>
             <PasteComponent config={card} options={['search', 'form']} updateConfig={this.updateComponent} />
             <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
-            <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
             <ClockComponent config={card} updateConfig={this.updateComponent}/>
             <UserComponent config={card}/>
             <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
@@ -465,6 +692,7 @@
         } trigger="hover">
           <Icon type="tool" />
         </Popover>
+        {card.plot.title || card.search.length > 0 ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null}
         <div className="canvas" id={card.uuid + 'canvas'}></div>
       </div>
     )

--
Gitblit v1.8.0