aldehyde 0.0.4 → 0.0.5

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "aldehyde",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": "cosmicparticle",
-  "main": "lib/src/index.js",
+  "main": "src/index.tsx",
   "module": "es/index.js",
   "typings": "lib/index.d.ts",
   "files": [
-    "dist",
-    "es",
-    "lib"
+    "src"
   ],
   "sideEffects": [
     "dist/*",
@@ -95,6 +93,7 @@
     "superagent-jsonp": "^0.2.1",
     "three": "^0.134.0",
     "typescript": "^4.5.4",
+
     "url": "^0.11.0",
     "url-loader": "^4.1.1",
     "use-resize-observer": "^7.0.0",
@@ -205,6 +204,7 @@
     "webpack-manifest-plugin": "^4.0.2",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",
-    "workbox-webpack-plugin": "^6.4.2"
+    "workbox-webpack-plugin": "^6.4.2",
+    "typescript-plugin-css-modules": "^3.4.0"
   }
 }

package/src/components/chart/antd/Chart.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Chart10000 from './Chart10000'
+import LineChart from './Max2DimLineChart'
+export default class Chart extends React.Component {
+
+    state = {}
+
+
+    async componentWillReceiveProps(nextProps) {
+
+    }
+
+    getChart = () => {
+
+
+    }
+
+    render() {
+        let {data, statView, ltmpl} = this.props;
+        return (<div>
+
+                { statView.refL2ChartType == '10000' ||statView.refL2ChartType=='折线图' ?
+                    <LineChart data={data} statView={statView} ltmpl={ltmpl}> </LineChart>
+            :
+                <div>没有找到匹配的图表</div>
+            }
+            </div>
+
+        );
+    }
+
+}

package/src/components/chart/antd/Chart10000.js

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import LineChart from './LineChart-sub'
+import {Col, Row} from "antd";
+import chartUtils from "./ChartUtils";
+
+export default class Chart extends React.Component {
+
+    state = {
+        dataArray: [],
+    }
+
+    // data = [
+    //     {xField: '1800', 收率: 3},
+    //     {xField: '1992', 收率: 4},
+    //     {xField: '1993', 收率: 3.5},
+    //     {xField: 'X1994', 收率: 50},
+    //     {xField: '1995', 收率: 4.9},
+    //     {xField: '1999', 收率: 60},
+    //     {xField: '1997', 收率: 7},
+    //     {xField: '1996', 收率: 7},
+    //     {xField: '1998', 收率: 190},
+    //     {xField: '1011', 收率: 1300},
+    //     {xField: '1997', 收率: 1200},
+    // ];
+
+    async componentWillReceiveProps(nextProps) {
+        let dataArray=[];
+        let {data,statView,ltmpl}=nextProps;
+        console.log("data:",data);
+        console.log("statView:",statView);
+        console.log("ltmpl:",ltmpl);
+
+        let data_=chartUtils.transValueFloat(ltmpl,data);
+
+        let obj1 = {};
+        obj1.data = data_;
+        obj1.config = {xAxisTitle: '主变量', yAxisTitle: '收率（%）',xField:'特征值',yField:'收率'};
+        dataArray.push(obj1);
+        let obj2 = {};
+        obj2.data = data_;
+        obj2.config = {xAxisTitle: '主变量', yAxisTitle: '转换率（%）',xField:'特征值',yField:'转换率'};
+        dataArray.push(obj2);
+
+        let obj3 = {};
+        obj3.data = data_;
+        obj3.config = {xAxisTitle: '主变量', yAxisTitle: '纯度（%）',xField:'特征值',yField:'纯度'};
+        dataArray.push(obj3);
+
+        let obj4 = {};
+        obj4.data = data_;
+        obj4.config = {xAxisTitle: '主变量', yAxisTitle: '含量（%）',xField:'特征值',yField:'含量'};
+        dataArray.push(obj4);
+
+        this.setState({
+            dataArray
+        })
+    }
+
+    render() {
+        let {dataArray} = this.state;
+
+        return <div>
+            <Row style={{padding: '8px 0'}} gutter={[32, {xs: 8, sm: 16, md: 24, lg: 32}]}>
+
+                {dataArray.map(function (val) {
+                    return <Col span={12} key={val.config.yAxisTitle}>
+                        <LineChart data={val.data}  config={val.config}/>
+                    </Col>
+                })
+                }
+
+                {/*<Col span={12}>*/}
+                {/*    <LineChart data={data} config={}/>*/}
+                {/*</Col>*/}
+                {/*<Col span={12}>*/}
+                {/*    <LineChart data={data} config={{xAxisTitle: '主变量', yAxisTitle: '收率（%）'}}/>*/}
+                {/*</Col>*/}
+                {/*<Col span={12}>*/}
+                {/*    <LineChart data={data} config={{xAxisTitle: '主变量', yAxisTitle: '收率（%）'}}/>*/}
+                {/*</Col>*/}
+                {/*<Col span={12}>*/}
+                {/*    <LineChart data={data} config={{xAxisTitle: '主变量', yAxisTitle: '收率（%）'}}/>*/}
+                {/*</Col>*/}
+            </Row>
+
+        </div>
+    }
+
+}

package/src/components/chart/antd/Max2DimLineChart.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import LineChart from './LineChart-sub';
+import ColumnChart from './ColumnChart-sub';
+import PieChart from './PieChart-sub';
+import {Col, Divider, Row} from "antd";
+import chartUtils from "./ChartUtils";
+
+export default class Max2DimLineChart extends React.Component {
+
+    state = {
+        dataArray: [],
+    }
+
+    async componentWillMount() {
+
+        let {data, statView, ltmpl} = this.props;
+        console.log("data:", data);
+        console.log("statView:", statView);
+        console.log("ltmpl:", ltmpl);
+
+        this.init(data, statView, ltmpl);
+    }
+
+    componentWillReceiveProps(nextprops) {
+        let {data, statView, ltmpl} = nextprops;
+        this.init(data, statView, ltmpl);
+    }
+
+    init = (data, statView, ltmpl) => {
+        let data_;
+
+        let firstDim = undefined, secondDim = undefined, dimensions = [], facts = [];
+        ltmpl.columns.forEach((col) => {
+            if ("fact" == col.colClass) {
+                facts.push(col);
+            } else if ("dimension" == col.colClass) {
+                dimensions.push(col);
+            }
+        });
+        let lineData;
+        if (dimensions.length > 1) {
+            firstDim = dimensions[0];
+            secondDim = dimensions[1];
+            data_ = chartUtils.transValueFloatGroupByDim(ltmpl, data, firstDim);
+            lineData = new Map();
+            for (let [key, data1] of data_) {
+                lineData.set(key, []);
+                facts.forEach((fact) => {
+                    let obj1 = {};
+                    obj1.data = data1;
+                    obj1.config = {
+                        xAxisTitle: key,
+                        yAxisTitle: fact.title,
+                        xField: secondDim.title,
+                        yField: fact.title
+                    };
+                    lineData.get(key).push(obj1);
+                })
+            }
+        } else if (dimensions.length == 1) {
+            lineData = [];
+            secondDim = dimensions[0];
+            data_ = chartUtils.transValueFloat(ltmpl, data.list);
+            facts.forEach((fact) => {
+                let obj1 = {};
+                obj1.data = data_;
+                obj1.config = {
+                    xAxisTitle: secondDim.title,
+                    yAxisTitle: fact.title,
+                    xField: secondDim.title,
+                    yField: fact.title
+                };
+                lineData.push(obj1);
+            })
+        }
+
+        this.setState({
+            lineData
+        })
+    }
+
+    get2DimChart = (lineData) => {
+        let refL2ChartType = this.props.statView.refL2ChartType;
+        let list = [];
+        let that=this;
+        for (let [key, obj] of lineData) {
+            obj.map(function (val) {
+                list.push(<Col span={12} key={val.config.yAxisTitle}>
+                    { that.getChart1(refL2ChartType,val)}
+                    {/*<PieChart groupName={key} data={val.data} config={val.config}/>*/}
+                    <Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>
+                </Col>)
+            })
+        }
+        return list;
+    }
+
+    getChart1 = (refL2ChartType, val) => {
+        return refL2ChartType == '折线图' ?
+            <LineChart data={val.data} config={val.config}/>
+            : refL2ChartType == '柱图' ?
+                <ColumnChart data={val.data} config={val.config}/>
+                :
+                refL2ChartType == '饼图' ?
+                    <PieChart data={val.data} config={val.config}/> :
+                    <div>暂不支持的图形</div>
+    }
+
+    render() {
+        let {lineData} = this.state;
+        let refL2ChartType = this.props.refL2ChartType;;
+        let that=this;
+        return <div>
+            <Row style={{padding: '8px 0'}} gutter={[32, {xs: 8, sm: 16, md: 24, lg: 32}]}>
+                {lineData instanceof Map ?
+                    that.get2DimChart(lineData)
+                    : lineData ? lineData.map(function (val) {
+                        return <Col span={12} key={val.config.yAxisTitle}>
+                            {that.getChart1(refL2ChartType,val)}
+                            <Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>
+                        </Col>
+                    }) : ""
+                }
+            </Row>
+        </div>
+    }
+
+}

package/src/components/chart/antd/PieChart1.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Pie } from '@ant-design/charts';
+
+const DemoPie = () => {
+    var data = [
+        {
+            type: '分类一',
+            value: 27,
+        },
+        {
+            type: '分类二',
+            value: 25,
+        },
+        {
+            type: '分类三',
+            value: 18,
+        },
+        {
+            type: '分类四',
+            value: 15,
+        },
+        {
+            type: '分类五',
+            value: 10,
+        },
+        {
+            type: '其他',
+            value: 5,
+        },
+    ];
+    var config = {
+        appendPadding: 10,
+        data: data,
+        angleField: 'value',
+        colorField: 'type',
+        radius: 0.5,
+        label: {
+            type: 'inner',
+            offset: '-30%',
+            content: function content(_ref) {
+                var percent = _ref.percent;
+                return ''.concat(percent * 100, '%');
+            },
+            style: {
+                fontSize: 14,
+                textAlign: 'center',
+            },
+        },
+        interactions: [{ type: 'element-active' }],
+    };
+    return <Pie {...config} />;
+};
+
+export default DemoPie;

package/src/components/chart/antd/PieChart2.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {Pie} from '@ant-design/charts';
+
+export default class PieChart extends React.Component {
+    render() {
+        let { data,key} = this.props;
+        // let data = [
+        //     {
+        //         type: '分类一',
+        //         value: 27,
+        //     },
+        //     {
+        //         type: '分类二',
+        //         value: 25,
+        //     },
+        //     {
+        //         type: '分类三',
+        //         value: 18,
+        //     },
+        //     {
+        //         type: '分类四',
+        //         value: 15,
+        //     },
+        //     {
+        //         type: '分类五',
+        //         value: 10,
+        //     },
+        //     {
+        //         type: '其他',
+        //         value: 5,
+        //     },
+        // ];
+
+        var config = {
+            appendPadding: 10,
+            data: data,
+            angleField: 'value',
+            colorField: 'type',
+            radius: 0.6,
+            label: {
+                type: 'inner',
+                offset: '-30%',
+                content: function content(_ref) {
+                    var percent = _ref.percent;
+                    return ''.concat((percent * 100).toFixed(2), '%');
+                },
+                style: {
+                    fontSize: 14,
+                    textAlign: 'center',
+                },
+            },
+            interactions: [{type: 'element-active'}],
+        };
+        return <Pie key={key} {...config} />;
+    }
+};

package/src/components/chart/antd/chart-utils.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {DtmplData, LtmplConfig} from "../../tmpl/interface";
+
+
+export default {
+    transValueFloat(ltmpl:LtmplConfig,data:DtmplData[]){
+        let data_=[];
+        let cols= ltmpl.columns;
+        if(data){
+            data.map(function (val) {
+                let value={};
+                Object.keys(val.fieldMap).forEach((key)=>{
+                    cols.forEach((col)=>{
+                        if(col.id==key){
+                            let v1=parseFloat(val.fieldMap[key]);
+                            value[col.title]=isNaN(v1)?val.fieldMap[key]:v1;
+                            return;
+                        }
+                    })
+                });
+                data_.push(value);
+            })
+        }
+        console.log("chartData:",data_);
+        return data_;
+    },
+    transValueFloatGroupByDim(ltmpl:LtmplConfig,data:DtmplData[],dimension){
+
+        let dimKey=dimension.id;
+        //先分类
+        let map1=new Map();
+        if(data){
+            data.map(function (val) {
+                let v1=val.fieldMap[dimKey];
+                if(v1){
+                    if(!map1.has(v1)){
+                        map1.set(v1,[]);
+                    }
+                    map1.get(v1).push(val);
+                }
+            })
+        }
+        let map2=new Map();
+        //再转换
+        for(let [key,value] of map1){
+            map2.set(key,this.transValueFloat(ltmpl,value));
+        }
+        return map2;
+    },
+}

package/src/components/chart/antd/column-chart-sub.tsx

@@ -0,0 +1,67 @@
+import React , { useRef } from "react";
+import {Column}  from '@ant-design/charts';
+import {Plot,ColumnOptions} from '@antv/g2plot';
+import {Space} from 'antd';
+import {SubChartProps} from "../../tmpl/interface";
+
+interface ColumnChartProps extends SubChartProps {
+
+};
+
+const ColumnChart: React.FC<ColumnChartProps> = (paras) => {
+
+    // const ref = React.createRef<Plot<ColumnOptions>>();
+    const ref = useRef();
+
+    const downloadImage = () => {
+        if(ref.current){
+            // @ts-ignore
+            ref.current.downloadImage()
+        }
+    };
+
+    const config = {
+        data: paras.data,
+        height: 400,
+        xField: paras.config.xField,
+        yField: paras.config.yField,
+        point: {
+            size: 5,
+            shape: 'diamond',
+        },
+        xAxis: {
+            title: {
+                text: paras.config.xAxisTitle,
+                style: {fontSize: 14},
+            },
+        },
+        yAxis: {
+            title: {
+                text: paras.config.yAxisTitle,
+                style: {fontSize: 14},
+            },
+        },
+        label: {
+            style: {
+                fill: '#aaa',
+            },
+        },
+    };
+
+    return <div>
+        <Space direction="vertical" size={'middle'} style={{width: '100%'}}>
+            <button type="button" onClick={downloadImage} style={{marginRight: 24}}>
+                导出
+            </button>
+            <Column  {...config} onReady={(plot) => {
+                // @ts-ignore
+                ref.current = plot;
+            }}/>
+        </Space>
+
+    </div>
+
+}
+
+export default ColumnChart;
+

package/src/components/chart/antd/line-chart-sub.tsx

@@ -0,0 +1,65 @@
+import React, {useRef} from "react";
+import {Line } from '@ant-design/charts';
+import {Space} from 'antd';
+import {SubChartProps} from "../../tmpl/interface";
+
+interface LineChartProps extends SubChartProps {
+
+};
+
+const LineChart: React.FC<LineChartProps> = (paras) => {
+
+    const ref = useRef();
+
+    const downloadImage = () => {
+        if (ref.current) {
+            // @ts-ignore
+            ref.current.downloadImage(paras.config.xAxisTitle+"_"+paras.config.yAxisTitle)
+        }
+    };
+
+    const config = {
+        data: paras.data,
+        height: 400,
+        xField: paras.config.xField,
+        yField: paras.config.yField,
+        point: {
+            size: 5,
+            shape: 'diamond',
+        },
+        xAxis: {
+            title: {
+                text: paras.config.xAxisTitle,
+                style: { fontSize: 14 },
+            },
+        },
+        yAxis: {
+            title: {
+                text: paras.config.yAxisTitle,
+                style: { fontSize: 14 },
+            },
+        },
+        label: {
+            style: {
+                fill: '#aaa',
+            },
+        },
+    };
+
+    return <div>
+        <Space direction="vertical" size={'middle'}  style={{width:'100%'}}>
+            <button type="button" onClick={downloadImage} style={{marginRight: 24}}>
+                导出
+            </button>
+            <Line  {...config} onReady={(plot) => {
+                // @ts-ignore
+                ref.current = plot;
+            }}/>
+        </Space>
+
+    </div>
+
+}
+
+export default LineChart;
+

package/src/components/chart/antd/pie-chart-sub.tsx

@@ -0,0 +1,54 @@
+import React, {useRef} from "react";
+import {Pie } from '@ant-design/charts';
+import {Space} from 'antd';
+import {SubChartProps} from "../../tmpl/interface";
+
+interface PieChartProps extends SubChartProps {
+
+};
+
+const PieChart: React.FC<PieChartProps> = (paras) => {
+
+    const ref = useRef();
+
+    const downloadImage = () => {
+        if (ref.current) {
+            // @ts-ignore
+            ref.current.downloadImage()
+        }
+    };
+
+    const config = {
+        appendPadding: 4,
+        data: paras.data,
+        angleField: paras.config.yField,
+        colorField: paras.config.xField,
+        radius: 0.75,
+        label: {
+            type: 'spider',
+            labelHeight: 28,
+            content: '{name}\n{percentage}',
+        },
+        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
+    };
+
+    return <div >
+        <Space direction="vertical" size={'middle'}  style={{width:'100%'}}>
+            <Space>
+            <button type="button" onClick={downloadImage} style={{marginRight: 24}}>
+                导出
+            </button>
+            <div style={{fontSize:'16px'}} >{paras.groupName+"-"+paras.config.xField+"-"+paras.config.yField}</div>
+            </Space>
+            <Pie  {...config} onReady={(plot) => {
+                // @ts-ignore
+                ref.current = plot;
+            }}/>
+        </Space>
+
+    </div>
+
+}
+
+export default PieChart;
+