Publish

docs/index.md

@@ -14,4 +14,3 @@ hero:
 
 | 组件 | 下载量 | 版本 |
 | ---- | ------ | ---- |
-

package.json

@@ -129,6 +129,7 @@
     }
   ],
   "dependencies": {
-    "cross-spawn": "^7.0.3"
+    "cross-spawn": "^7.0.3",
+    "d3": "^6.3.1"
   }
 }

packages/cuijiahao_test/src/cuijiahao_test.md

 ---
-title: ProCard - 标准卡片
+title: cuijiahao_test
 nav:
   title: 组件
   path: /components
@@ -7,13 +7,35 @@ group:
   path: /
 ---
 
-# ProCard 标准卡片
+# cuijiahao_test
 
 页内容器卡片，提供标准卡片样式，卡片切分以及栅格布局能力。
 
-## 何时使用
 
-- 需要一个标准卡片容纳内容时。
-- 需要多个卡片栅格，gutter 布局时。
-- 需要进行卡片内切分布局时。
-- 需要卡片可折叠时。
+
+## 基本
+<code src="./demos/Demo1.js">
+
+## 圆角
+<code src="./demos/Demo2.js">
+
+## 颜色随值变化
+<code src="./demos/Demo3.js">
+
+## API
+
+### ArcProcess
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| data | 数据(`0-100`，required) | number | 100 |  |
+| width | 宽 | number | 300 |  |
+| height | 高 | number | 300 |  |
+| innerRadius | 内径 | string | '60%' |  |
+| outerRadius | 外径 | string | '80%' |  |
+| backgroundColor | 环背景色 | string | - |  |
+| colors | 环颜色 | array[string] | - |  |
+| decimal | 小数点位数 | number | 0 |  |
+| duration | 动画时间(ms) | number | 2000 |  |
+| fontColor | 字体颜色 | string  | '#000' |  |
+| fontSize | 字体大小 | number | 20 |  |
\ No newline at end of file

packages/cuijiahao_test/src/demos/Demo1.js

+import React from 'react';
+import ArcProcess from '../index.js';
+
+export default () => {
+    return (
+        <div style={{display: 'flex'}}>
+            <ArcProcess
+                data={80}
+                colors={['RGB(41,128,185)']}
+            />
+            <ArcProcess
+                data={80}
+                colors={['RGB(243,156,18)']}
+            />
+        </div>
+    );
+};
\ No newline at end of file

packages/cuijiahao_test/src/demos/Demo2.js

+import React from 'react';
+import ArcProcess from '../index.js';
+
+export default () => {
+    return (
+        <div style={{display: 'flex'}}>
+            <ArcProcess
+                  data={80}
+                  useCorner={true}
+                  colors={['RGB(41,128,185)']}
+                  fontColor={'RGB(41,128,185)'}
+                  fontSize={26}
+            />
+            <ArcProcess
+                data={80}
+                useCorner={true}
+                colors={['RGB(243,156,18)']}
+                fontColor={'RGB(243,156,18)'}
+                fontSize={26}
+            />
+        </div>
+    );
+};
\ No newline at end of file

packages/cuijiahao_test/src/demos/Demo3.js

+import React, { Component } from 'react';
+import ArcProcess from '../index.js';
+
+
+export default class Demo3 extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            colors1: ['#CCFBFF', '#EF96C5'],
+            colors2: ['#EEBD89', '#D13ABD'],
+            data1: 80,
+            data2: 80
+        }
+    }
+
+    componentDidMount() {
+        this.timer = setInterval(() => {
+            this.setState({
+                data1: Math.round(Math.random() * 100),
+                data2: Math.round(Math.random() * 100)
+            })
+        },5000)
+    }
+
+    componentWillUnmount() {
+        this.timer && clearInterval(this.timer);
+    }
+
+    render() {
+        const { data1, data2, colors1, colors2 } = this.state;
+        return (
+          <div style={{display: 'flex'}}>
+                <ArcProcess
+                    data={data1}
+                    useCorner={true}
+                    colors={colors1}
+                />
+                <ArcProcess
+                    data={data2}
+                    useCorner={true}
+                    colors={colors2}
+                />
+            </div>
+        )
+    }
+}
\ No newline at end of file

packages/cuijiahao_test/src/index.js

-export default 'this is a test component created by cuijiahao 1hh';
+import React, { Component } from 'react';
\ No newline at end of file
+import * as d3 from "d3";
+import PropTypes from 'prop-types';
+
+class ArcProcess extends Component {
+    constructor(props) {
+        super(props);
+        console.log(d3)
+        this.arcRef= React.createRef();
+    }
+
+    componentDidMount() {
+        let context =  this.setContext();
+        this.$context = context;
+        this.draw(context);
+    }
+
+    componentDidUpdate() {
+        let context = this.$context;
+        this.draw(context);
+        // this.setText(context);
+        // this.setUpperground(context);
+    }
+
+    draw(context) {
+        this.setText(context);
+        this.setBackground(context);
+        this.setUpperground(context);
+    }
+
+    setContext() {
+        const { width, height } = this.props;
+        return d3.select(this.arcRef.current)
+            .append('svg')
+                .attr('width', width)
+                .attr('height', height)
+                .attr('viewBox', [0,0,width,height])
+            .append('g')
+                .attr('transform', `translate(${width/2}, ${height/2})`)
+    }
+
+    setBackground(context) {
+        const { backgroundColor } = this.props;
+        return context.selectAll('.arc-process-bg')
+            .data([{ endAngle: Math.PI * 2 }])
+            .join('path')
+            .classed('arc-process-bg', true)
+            .attr('fill', backgroundColor)
+            .attr('d', this.arc())
+    }
+
+    setUpperground(context) {
+        const { data, duration } = this.props;
+        let percent = data / 100;
+        let that = this;
+        
+        return context.selectAll('.arc-process')
+            .data([{ endAngle: 0  }])
+            .join('path')
+            .classed('arc-process', true)
+            // .attr('fill', this.color(data))
+            .attr('d', this.arc())
+            .transition()
+                .ease(d3.easeLinear)
+                .duration(duration)
+                .attrTween('d',function(d) {
+                    let compute = d3.interpolate(0, Math.PI * 2 * percent);
+                    return function(t){
+                        d.endAngle = compute(t);
+                        //将新参数传入，生成新的圆弧构造器
+                        return that.arc()(d);
+                    }
+                })
+                .styleTween('fill',function(d){
+                    return function(t){
+                        var data = d.endAngle / Math.PI / 2 * 100;
+                        //返回数值对应的色值
+                        return that.color(data);
+                    }
+                })
+    }
+
+    setText(context) {
+        const { data, decimal, duration, fontColor, fontSize } = this.props;
+        return context.selectAll('.arc-process-text')
+            .data([data])
+            .join('text')
+            .classed('arc-process-text', true)
+            .attr('text-anchor','middle')
+            .attr('dominant-baseline','middle')
+            .attr('font-size', fontSize)
+            .attr('stroke', fontColor)
+            .transition()
+            .duration(duration)
+            .textTween(function(d) {
+                let compute = d3.interpolate(0, d);
+                let f = d3.format(`.${decimal}f`);
+                return  function(t) { return f(compute(t)) + "%" };
+            })
+    }
+
+    arc() {
+        const { width, height, useCorner, innerRadius, outerRadius } = this.props;
+        let size = d3.min([width, height]) / 2;
+        let inner = this.toPoint(innerRadius) * size,
+            outer = this.toPoint(outerRadius) * size,
+            corner = useCorner ? (outer - inner) / 2 : 0;
+        return d3.arc()
+            .innerRadius(inner)
+            .outerRadius(outer)
+            .startAngle(0)
+            .cornerRadius(() => corner)
+    }
+
+    color(data) {
+        const { colors } = this.props;
+        // console.log(colors)
+        if(colors.length < 2) return colors[0];
+        let color =  d3.scaleLinear().domain([0,100]).range(colors);
+        // console.log(data)
+        return color(data);
+    }
+
+    toPoint(percent) {
+        return percent.replace('%', '') / 100;
+    }
+    
+    render() {
+        return <div ref={this.arcRef}></div>
+    }
+}
+
+ArcProcess.defaultProps = {
+    width: 300,
+    height: 300,
+    innerRadius: '60%',
+    outerRadius: '80%',
+    useCorner: false,
+    data: 100,
+    // backgroundColor: '#FDF5E6',
+    backgroundColor: '#eeeeee',
+    colors: ['#0997F7'],
+    decimal: 0,
+    duration: 1000,
+    fontColor: '#000',
+    fontSize: 26
+}
+
+ArcProcess.propTypes = {
+    width: PropTypes.number,
+    height: PropTypes.number,
+    innerRadius: PropTypes.string,
+    outerRadius: PropTypes.string,
+    useCorner: PropTypes.bool,
+    data: PropTypes.number.isRequired,
+    backgroundColor: PropTypes.string,
+    colors: PropTypes.array,
+    decimal: PropTypes.number,
+    duration: PropTypes.number,
+    fontColor: PropTypes.string,
+    fontSize: PropTypes.number,
+};
+
+export default ArcProcess;

packages/test_pg/src/index.js

 export default {
-  a: '1'
-}
+  a: '1',
+};