vislite 1.3.0 → 1.4.0-alpha.0

package/src/layout/BarLayout.ts

@@ -0,0 +1,249 @@
+import type BarLayoutType from '../../types/BarLayout'
+import type { BarResultType } from '../../types/Bar'
+import type BarOptionType from '../../types/BarOption'
+import type BarConfigType from '../../types/BarConfig'
+
+import { initOption } from '../common/option'
+import ruler from '../ruler'
+import { animation } from "oipage/web/animation/index"
+
+class BarLayout implements BarLayoutType {
+    readonly name: string = 'BarLayout'
+
+    private __config: BarConfigType
+
+    constructor(config: BarConfigType = {}) {
+        this.__config = initOption(config, {
+
+        })
+    }
+
+    private __option = {
+        x: 50,
+        y: 350,
+        width: 400,
+        height: 300,
+        category: "xAxis",
+        duration: 200
+    }
+
+    setOption(option: BarOptionType) {
+        initOption(option, this.__option)
+        return this
+    }
+
+    private __rback: (bar: BarResultType) => void
+    private __oralBar: any
+    private __preBar: BarResultType | null
+
+    use(initBar: any) {
+        let bar: BarResultType = {
+            coordinate: {
+                x: this.__option.x,
+                y: this.__option.y,
+                width: this.__option.width,
+                height: this.__option.height,
+                xAxis: {
+                    type: this.__option.category === "xAxis" ? "category" : "value",
+                    data: []
+                },
+                yAxis: {
+                    type: this.__option.category === "xAxis" ? "value" : "category",
+                    data: []
+                }
+            },
+            node: []
+        }
+
+        let maxValue = void 0, minValue = void 0
+
+        // 求解一维最值
+        if (initBar.data) {
+            for (let val of initBar.data) {
+                if (maxValue === void 0 || val > maxValue) maxValue = val
+                if (minValue === void 0 || val < minValue) minValue = val
+            }
+        }
+
+        // 求解二维最值
+        else if (initBar.value) {
+            for (let item of initBar.value) {
+                for (let val of item.data) {
+                    if (maxValue === void 0 || val > maxValue) maxValue = val
+                    if (minValue === void 0 || val < minValue) minValue = val
+                }
+            }
+        } else {
+            throw new Error('No data leads to parsing errors')
+        }
+
+        let rulerArray = ruler(maxValue || 0, minValue || 0, 5)
+
+        let categoryLen // 分类轴长度
+        let valueLen // 数值轴长度
+
+        if (this.__option.category === "xAxis") {
+
+            // 设置刻度尺刻度
+            bar.coordinate.xAxis.data = initBar.category
+            bar.coordinate.yAxis.data = rulerArray
+
+            // 设置轴长度
+            categoryLen = this.__option.width
+            valueLen = -1 * this.__option.height
+        } else {
+            bar.coordinate.xAxis.data = rulerArray
+            bar.coordinate.yAxis.data = initBar.category
+            categoryLen = this.__option.height
+            valueLen = this.__option.width
+        }
+
+        // 求解分类轴刻度
+        let category: any = []
+
+        // 一维
+        let categorySingle1Width = categoryLen / initBar.category.length
+        let categorySingle2Width = categorySingle1Width * 0.9
+        let categoryStart = categorySingle1Width * 0.05
+        if (initBar.data) {
+            for (let i = 0; i < initBar.data.length; i++) {
+                category.push([
+                    categoryStart + categorySingle1Width * i,
+                    categorySingle2Width
+                ])
+            }
+        }
+
+        // 二维
+        else {
+            let categorySingle3Width = categorySingle2Width / initBar.value.length
+            let categorySingle4Width = categorySingle3Width * 0.9
+            let categoryStartBlance = categorySingle3Width * 0.05
+            for (let i = 0; i < initBar.value[0].data.length; i++) {
+                category[i] = []
+                for (let j = 0; j < initBar.value.length; j++) {
+                    category[i].push([
+                        categoryStart + categorySingle1Width * i + categorySingle3Width * j + categoryStartBlance,
+                        categorySingle4Width
+                    ])
+                }
+            }
+        }
+
+        // 根据值获取长度
+        let singleValueLen = valueLen / (rulerArray[rulerArray.length - 1] - rulerArray[0])
+        let getLenByValue = (value: number) => {
+            return singleValueLen * (value - rulerArray[0])
+        }
+
+        // 计算小矩形
+        if (this.__option.category === "xAxis") { // 分类在x轴，从左到右
+            if (initBar.data) {
+                let nodeBar = []
+                for (let i = 0; i < initBar.data.length; i++) {
+                    nodeBar.push({
+                        x: this.__option.x + category[i][0],
+                        y: this.__option.y,
+                        width: category[i][1],
+                        height: getLenByValue(initBar.data[i]),
+                        value: initBar.data[i]
+                    })
+                }
+                bar.node.push({
+                    bar: nodeBar
+                })
+            } else {
+                for (let j = 0; j < initBar.value.length; j++) {
+                    let nodeBar = []
+                    for (let i = 0; i < initBar.value[j].data.length; i++) {
+                        nodeBar.push({
+                            x: this.__option.x + category[i][j][0],
+                            y: this.__option.y,
+                            width: category[i][j][1],
+                            height: getLenByValue(initBar.value[j].data[i]),
+                            value: initBar.value[j].data[i]
+                        })
+                    }
+                    bar.node.push({
+                        name: initBar.value[j].name,
+                        bar: nodeBar
+                    })
+                }
+            }
+        } else { // 分类在y轴，从上到下
+            if (initBar.data) {
+                let nodeBar = []
+                for (let i = 0; i < initBar.data.length; i++) {
+                    nodeBar.push({
+                        x: this.__option.x,
+                        y: this.__option.y - this.__option.height + category[i][0],
+                        width: getLenByValue(initBar.data[i]),
+                        height: category[i][1],
+                        value: initBar.data[i]
+                    })
+                }
+                bar.node.push({
+                    bar: nodeBar
+                })
+            } else {
+                for (let j = 0; j < initBar.value.length; j++) {
+                    let nodeBar = []
+                    for (let i = 0; i < initBar.value[j].data.length; i++) {
+                        nodeBar.push({
+                            x: this.__option.x,
+                            y: this.__option.y - this.__option.height + category[i][j][0],
+                            width: getLenByValue(initBar.value[j].data[i]),
+                            height: category[i][j][1],
+                            value: initBar.value[j].data[i]
+                        })
+                    }
+                    bar.node.push({
+                        name: initBar.value[j].name,
+                        bar: nodeBar
+                    })
+                }
+            }
+        }
+
+        return bar
+    }
+
+    bind(initBar: any, renderBack: (bar: BarResultType) => void) {
+        this.__rback = renderBack
+        this.__oralBar = initBar
+
+        this.__preBar = this.use(this.__oralBar)
+        this.__rback(this.__preBar)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralBar = null
+        this.__preBar = null
+        return this
+    }
+
+    doUpdate() {
+        const newBar = this.use(this.__oralBar)
+
+        const cacheBar = JSON.parse(JSON.stringify(newBar))
+
+        animation((deep) => {
+
+            if (this.__preBar) {
+                // todo
+            }
+
+            this.__rback(cacheBar)
+
+        }, this.__option.duration, () => {
+            this.__preBar = newBar
+            this.__rback(this.__preBar)
+        })
+        return this
+    }
+}
+
+export default BarLayout

package/src/layout/PieLayout.ts

@@ -0,0 +1,142 @@
+import type PieLayoutType from '../../types/PieLayout'
+import type { PieResultType } from '../../types/Pie'
+import type PieOptionType from '../../types/PieOption'
+import type { default as PieConfigType, nameType, valueType } from '../../types/PieConfig'
+
+import { initOption } from '../common/option'
+import rotate from '../rotate'
+import { animation } from "oipage/web/animation/index"
+
+class PieLayout implements PieLayoutType {
+    readonly name: string = 'PieLayout'
+
+    private __config: PieConfigType
+
+    constructor(config: PieConfigType = {}) {
+        this.__config = initOption(config, {
+            name: (pieData: any, initPie: Array<any>) => pieData.name,
+            value: (pieData: any, initPie: Array<any>) => pieData.value
+        })
+    }
+
+    private __option = {
+        cx: 200,
+        cy: 200,
+        radius: [50, 100],
+        duration: 200,
+    }
+
+    setOption(option: PieOptionType) {
+        initOption(option, this.__option)
+        return this
+    }
+
+    private __rback: (pie: PieResultType) => void
+    private __oralPie: any
+    private __prePie: PieResultType | null
+
+    private __hoverIndex = -1 // 表示当前悬浮的序号
+
+    use(initPie: Array<any>, hoverIndex: number = -1) {
+        let pie: PieResultType = {
+            count: initPie.length,
+            cx: this.__option.cx,
+            cy: this.__option.cy,
+            radius: this.__option.radius,
+            hoverIndex,
+            node: []
+        }
+
+        let totalValue = 0, names = [], values = []
+        for (let i = 0; i < initPie.length; i++) {
+            names[i] = (this.__config.name as nameType)(initPie[i], initPie)
+            values[i] = (this.__config.value as valueType)(initPie[i], initPie)
+
+            totalValue += values[i]
+        }
+
+        let beginDeg = Math.PI * -0.5, currenDeg
+        for (let i = 0; i < initPie.length; i++) {
+            currenDeg = values[i] / totalValue * Math.PI * 2
+            let radius = [this.__option.radius[0], this.__option.radius[1] * (1 + (hoverIndex === i ? 0.05 : 0))]
+
+            let pdeg = beginDeg + currenDeg * 0.5, pradius = Math.max(this.__option.radius[0], this.__option.radius[1])
+            let p0 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius, pie.cy)
+            let p1 = rotate(pie.cx, pie.cy, pdeg, pie.cx + pradius + 15, pie.cy)
+
+            let pflag = p0[0] > pie.cx ? 1 : -1
+            let p2 = [p1[0] + pflag * 20, p1[1]]
+            let p3 = [p1[0] + pflag * 25, p1[1]]
+
+            pie.node[i] = {
+                value: values[i],
+                name: names[i],
+                beginDeg,
+                deg: currenDeg,
+                isHover: hoverIndex === i,
+                radius,
+                label: {
+                    line: [p0, p1, p2],
+                    position: p3,
+                    align: pflag === -1 ? "right" : "left"
+                }
+            }
+
+            beginDeg += currenDeg
+        }
+
+        return pie
+    }
+
+    bind(initPie: Array<any>, renderBack: (pie: PieResultType) => void) {
+        this.__rback = renderBack
+        this.__oralPie = initPie
+
+        this.__prePie = this.use(this.__oralPie, this.__hoverIndex)
+        this.__rback(this.__prePie)
+
+        return this
+    }
+
+    unbind() {
+        this.__rback = () => null
+        this.__oralPie = null
+        this.__prePie = null
+        this.__hoverIndex = -1
+        return this
+    }
+
+    setHover(index: number) {
+        if (!this.__prePie || this.__hoverIndex === index) return this
+
+        this.__hoverIndex = index
+
+        this.doUpdate()
+        return this
+    }
+
+    doUpdate() {
+        const newPie = this.use(this.__oralPie, this.__hoverIndex)
+
+        const cachePie = JSON.parse(JSON.stringify(newPie))
+
+        animation((deep) => {
+
+            if (this.__prePie) {
+                for (let i = 0; i < cachePie.count; i++) {
+                    cachePie.node[i].radius[1] = this.__prePie.node[i].radius[1] + (newPie.node[i].radius[1] - this.__prePie.node[i].radius[1]) * deep
+                }
+            }
+
+            this.__rback(cachePie)
+
+        }, this.__option.duration, () => {
+            this.__prePie = newPie
+            this.__rback(this.__prePie)
+        })
+
+        return this
+    }
+}
+
+export default PieLayout