@visactor/vchart-aurora-theme 1.12.3-alpha.5 → 1.12.3-alpha.7

package/build/index.js

@@ -4,357 +4,153 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vchart-aurora-theme"] = {}));
 })(this, (function (exports) { 'use strict';
 
-    const defaultColor = [
+    const colorList = [
         '#3377FF',
         '#1FE7F9',
         '#53F3B3',
         '#FFCD50',
         '#ADB8D6',
-        '#B46FF4',
         '#867AFF',
         '#FAA64D',
-        '#F25E68'
+        '#FF8082',
+        '#B46FF4'
+    ];
+    const barColorList = [
+        '#3377FF',
+        '#1FE7F9',
+        '#FFCD50',
+        '#53F3B3',
+        '#ADB8D6',
+        '#867AFF',
+        '#FAA64D',
+        '#FF8082',
+        '#B46FF4'
+    ];
+    const nestColorList = [
+        ['#3377FF', '#5587FD', '#76A4FF', '#A0C0FF', '#BFD4FF', '#E5EEFF'],
+        ['#1FE7F9', '#71F1FF', '#A2F5FF', '#BCF8FF', '#D2FAFF', '#E5FDFF'],
+        ['#53F3B3', '#6BFFC4', '#9FFFD9', '#C1FFE6', '#DCFFF1', '#EBFFF7'],
+        ['#FFCD50', '#FFD971', '#FFE395', '#FFEBB2', '#FEF2D1', '#FFF8E8'],
+        ['#ADB8D6', '#BEC8E4', '#CBD3ED', '#D9E0F5', '#E7ECFB', '#F2F5FF'],
+        ['#867AFF', '#9A8DFF', '#ACA1FF', '#C4BCFF', '#DBD6FF', '#EDEBFF'],
+        ['#FAA64D', '#FFB96F', '#FECB94', '#FFD8AD', '#FFE5C9', '#FFF4E9'],
+        ['#FF8082', '#FF99A0', '#FFBBBF', '#FFD4D7', '#FFE8EA', '#FFF7F8'],
+        ['#B46FF4', '#BF80FF', '#D1A4FD', '#E0C1FF', '#EDDAFF', '#F5ECFF']
     ];
-    const BLACK_COLORS = {
-        100: '#000',
-        95: '#0D0D0D',
-        85: '#262626',
-        65: '#595959',
-        45: '#8C8C8C',
-        25: '#BFBFBF',
-        15: '#D9D9D9',
-        6: '#F0F0F0'
-    };
-    const WHITE_COLORS = {
-        100: '#FFFFFF',
-        95: '#F2F2F2',
-        85: '#D9D9D9',
-        65: '#A6A6A6',
-        45: '#737373',
-        25: '#404040',
-        15: '#262626',
-        6: '#0F0F0F'
-    };
-    const blackColorPalettes = {};
-    Object.entries(BLACK_COLORS).forEach(([key, value]) => {
-        blackColorPalettes[`blackColors${key}`] = value;
-    });
-    const whiteColorPalettes = {};
-    Object.entries(WHITE_COLORS).forEach(([key, value]) => {
-        whiteColorPalettes[`whiteColors${key}`] = value;
-    });
     const colorScheme = {
         default: {
-            dataScheme: defaultColor,
-            palette: Object.assign(Object.assign({ bandColor: defaultColor[0], backgroundColor: 'transparent', axisDomainColor: '#DCDEE1', axisLabelFontColor: '#909199', axisGridColor: '#E1E2E5' }, blackColorPalettes), whiteColorPalettes)
-        }
-    };
-
-    const axis = {
-        axis: {
-            domainLine: {
-                visible: true,
-                style: {
-                    lineWidth: 1,
-                    stroke: { type: 'palette', key: 'axisDomainColor' }
-                }
-            },
-            grid: {
-                visible: true,
-                style: {
-                    lineWidth: 1,
-                    stroke: { type: 'palette', key: 'axisGridColor' },
-                    lineDash: [4, 4]
-                }
-            },
-            subGrid: {
-                visible: false,
-                style: {
-                    lineWidth: 1,
-                    stroke: { type: 'palette', key: 'axisGridColor' },
-                    lineDash: [4, 4]
-                }
-            },
-            tick: {
-                visible: true,
-                style: {
-                    lineWidth: 1,
-                    stroke: { type: 'palette', key: 'blackColors25' }
-                }
-            },
-            subTick: {
-                visible: false,
-                tickSize: 2,
-                style: {
-                    lineWidth: 1,
-                    stroke: { type: 'palette', key: 'blackColors15' }
-                }
-            },
-            label: {
-                visible: true,
-                space: 8,
-                style: {
-                    fontSize: 12,
-                    fill: { type: 'palette', key: 'blackColors45' },
-                    fontWeight: 400,
-                    fillOpacity: 1
-                }
-            },
-            title: {
-                visible: false,
-                style: {
-                    fill: { type: 'palette', key: 'blackColors65' },
-                    fontSize: 12,
-                    lineHeight: 12
-                }
+            dataScheme: colorList,
+            palette: {
+                bandColor: colorList[0],
+                backgroundColor: 'transparent',
+                primaryFontColor: '#17171A',
+                secondaryFontColor: '#5E5F66',
+                tertiaryFontColor: '#888888',
+                axisDomainColor: '#DCDEE1',
+                axisLabelFontColor: '#888888',
+                axisGridColor: '#EFF0F2',
+                popupBackgroundColor: '#ffffff'
             }
         }
     };
 
-    const axisRadius = {
-        domainLine: {},
-        grid: {
-            smooth: false,
-            visible: true
-        },
-        subGrid: {
-            smooth: false
-        }
-    };
-    const axisAngle = {
-        grid: {
-            visible: true,
-            smooth: false
-        },
-        label: {
-            space: 4
-        }
-    };
-    const axisPolar = {
-        axisRadius,
-        axisAngle
-    };
-
-    const commonColorLegendTheme = {
-        handlerText: {
-            space: 10,
-            style: {
-                fontSize: 12,
-                fill: '#2C3542'
-            }
-        },
-        title: {
-            space: 5,
-            style: {
-                fontSize: 12,
-                fill: '#2C3542'
-            }
-        }
-    };
     const legend = {
         discreteLegend: {
             visible: true,
             orient: 'top',
-            padding: [8, 8, 8, 8],
+            position: 'middle',
             maxRow: 1,
             title: {
-                visible: false,
-                textStyle: {
-                    fill: { type: 'palette', key: 'blackColors45' },
-                    fontSize: 12,
-                    lineHeight: 21
-                }
+                visible: false
             },
             item: {
                 visible: true,
-                spaceCol: 24,
-                spaceRow: 12,
-                padding: 0,
                 background: {
                     visible: false
                 },
                 shape: {
-                    space: 4,
                     style: {
-                        size: 8,
                         symbolType: 'circle'
-                    },
-                    state: { unSelected: { fill: '#D8D8D8' } }
-                },
-                label: {
-                    space: 100,
-                    style: {
-                        fill: '#85878A',
-                        fontSize: 12,
-                        lineHeight: 12,
-                        opacity: 1,
-                        fontWeight: 400
-                    },
-                    state: {
-                        unSelected: {
-                            fill: '#D8D8D8',
-                            opacity: 1
-                        }
                     }
                 }
             },
-            pager: {
-                handler: {
-                    space: 8,
+            allowAllCanceled: false
+        }
+    };
+    const lineLegend = {
+        discreteLegend: {
+            visible: true,
+            orient: 'top',
+            position: 'middle',
+            maxRow: 1,
+            title: {
+                visible: false
+            },
+            item: {
+                visible: true,
+                background: {
+                    visible: false
+                },
+                shape: {
                     style: {
-                        size: 10,
-                        fill: {
-                            type: 'palette',
-                            key: 'blackColors100'
-                        }
+                        size: [8, 2],
+                        symbolType: 'rect'
                     }
-                },
-                textStyle: {
-                    fill: { type: 'palette', key: 'blackColors45' },
-                    fontSize: 10
                 }
             },
             allowAllCanceled: false
-        },
-        colorLegend: {
-            horizontal: Object.assign(Object.assign({}, commonColorLegendTheme), { handler: {
-                    style: {
-                        symbolType: 'rectRound',
-                        size: 16,
-                        scaleX: 0.5,
-                        fill: '#fff',
-                        lineWidth: 1,
-                        stroke: '#99B0F3',
-                        radius: 2,
-                        outerBorder: null
-                    }
-                }, rail: {
-                    height: 4,
-                    width: 100,
-                    style: {
-                        fill: '#DCDEE2'
-                    }
-                } }),
-            vertical: Object.assign(Object.assign({}, commonColorLegendTheme), { handler: {
-                    style: {
-                        symbolType: 'rectRound',
-                        size: 16,
-                        scaleY: 0.5,
-                        fill: '#fff',
-                        lineWidth: 1,
-                        stroke: '#99B0F3',
-                        radius: 2,
-                        outerBorder: null
-                    }
-                }, rail: {
-                    width: 4,
-                    height: 100,
-                    style: {
-                        fill: '#DCDEE2'
-                    }
-                } })
         }
     };
 
-    const token = {
-        fontFamily: `"PingFang SC", "-apple-system", "Segoe UI", "Helvetica Neue", Arial,
-    Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
-        fontSize: 12
-    };
-
     const tooltip = {
-        offset: { x: 16, y: 16 },
         panel: {
-            padding: { top: 12, left: 12, right: 12, bottom: 12 },
-            backgroundColor: {
-                type: 'palette',
-                key: 'popupBackgroundColor'
-            },
             border: {
-                color: {
-                    type: 'palette',
-                    key: 'popupBackgroundColor'
-                },
-                width: 0,
-                radius: 3
-            },
-            shadow: {
-                x: 0,
-                y: 0,
-                blur: 10,
-                spread: 0,
-                color: '#aeaeae'
+                radius: 8
             }
         },
-        spaceRow: 12,
-        titleLabel: {
-            fontSize: 12,
-            lineHeight: 12,
-            fontColor: '#1D1D2E',
-            fontWeight: '500',
-            textAlign: 'left',
-            textBaseline: 'middle',
-            spacing: 0
-        },
-        shape: { size: 8, spacing: 8 },
-        keyLabel: {
-            fontSize: 12,
-            lineHeight: 12,
-            fontColor: {
-                type: 'palette',
-                key: 'blackColors65'
-            },
-            textAlign: 'left',
-            textBaseline: 'middle',
-            spacing: 12
-        },
-        valueLabel: {
-            fontSize: 12,
-            lineHeight: 12,
-            fontColor: {
-                type: 'palette',
-                key: 'blackColors65'
-            },
-            fontWeight: 'normal',
-            textBaseline: 'middle',
-            spacing: 0
+        shape: {
+            shapeType: 'circle',
+            size: 8
         }
     };
 
-    const crosshair = {
-        trigger: 'hover',
-        bandField: {
+    const barCrosshair = {
+        xField: {
             line: {
                 type: 'rect',
-                visible: true,
                 style: {
-                    fill: '#CCD7EB',
-                    fillOpacity: 0.4,
-                    lineDash: []
+                    fill: {
+                        gradient: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 0,
+                        y1: 1,
+                        stops: [
+                            { offset: 0, color: 'rgba(51, 119, 255, 0.1)' },
+                            { offset: 1, color: 'rgba(118, 164, 255, 0.1)' }
+                        ]
+                    }
                 }
-            },
-            label: {
-                visible: false
             }
-        },
-        linearField: {
-            visible: false,
+        }
+    };
+    const lineCrosshair = {
+        bandField: {
             line: {
                 type: 'line',
+                width: 1,
                 style: {
-                    stroke: '#CCD7EB',
-                    lineWidth: 0.4,
-                    lineDash: []
+                    lineWidth: 1,
+                    stroke: '#DCDEE1',
+                    lineDash: [2, 2]
                 }
-            },
-            label: {
-                visible: false
             }
         }
     };
 
     const area = {
         area: {
+            seriesMark: 'line',
             point: {
                 style: {
                     visible: false,
@@ -362,7 +158,12 @@
                     lineWidth: 2,
                     shadowColor: 'rgba(0, 0, 0, 0.1)',
                     shadowBlur: 3,
-                    stroke: { type: 'palette', key: 'whiteColors100' }
+                    stroke: '#fff'
+                },
+                state: {
+                    dimension_hover: {
+                        visible: true
+                    }
                 }
             },
             line: {
@@ -373,12 +174,22 @@
             },
             area: {
                 style: {
-                    fillOpacity: 0.25,
-                    lineWidth: 2
-                },
-                state: {
-                    selected: {
-                        fillOpacity: 0.5
+                    fill: {
+                        gradient: 'linear',
+                        x0: 0,
+                        y0: 0,
+                        x1: 0,
+                        y1: 1,
+                        stops: [
+                            {
+                                offset: 0,
+                                opacity: 0.7
+                            },
+                            {
+                                offset: 1,
+                                opacity: 0
+                            }
+                        ]
                     }
                 }
             }
@@ -386,23 +197,23 @@
     };
 
     const bar = {
-        barMaxWidth: 8,
-        barGapInGroup: 4,
-        label: {
+        barMaxWidth: 16,
+        barGapInGroup: 2,
+        bar: {
             style: {
-                fill: { type: 'palette', key: 'secondaryFontColor' }
+                visible: datum => datum.value > 0
             }
         }
     };
     const bar_horizontal = {
-        stackCornerRadius: [0, 1, 1, 0],
+        stackCornerRadius: [0, 2, 2, 0],
         label: {
             position: 'right',
             offset: 4
         }
     };
     const bar_vertical = {
-        stackCornerRadius: [1, 1, 0, 0],
+        stackCornerRadius: [2, 2, 0, 0],
         label: {
             position: 'top',
             offset: 4
@@ -428,37 +239,13 @@
                 lineWidth: 2,
                 shadowColor: 'rgba(0, 0, 0, 0.1)',
                 shadowBlur: 3,
-                stroke: { type: 'palette', key: 'whiteColors100' }
-            }
-        },
-        label: {
-            position: 'top',
-            offset: 4
-        }
-    };
-
-    const markByName = {
-        label: {
-            style: {
-                fontSize: 12,
-                fill: { type: 'palette', key: 'blackColors65' },
-                lineWidth: 0
-            }
-        }
-    };
-
-    const scatter = {
-        point: {
-            style: {
-                symbolType: 'circle',
-                fillOpacity: 0.35,
-                lineWidth: 1,
-                size: 8,
-                stroke: null
+                stroke: '#fff'
+            },
+            state: {
+                dimension_hover: {
+                    visible: true
+                }
             }
-        },
-        label: {
-            position: 'top'
         }
     };
 
@@ -470,7 +257,9 @@
                 padAngle: 0,
                 stroke: '#fff',
                 lineWidth: 2,
-                lineJoin: 'round'
+                lineJoin: 'round',
+                cornerRadius: 2,
+                visible: datum => datum.value > 0
             },
             state: {
                 hover: {
@@ -483,337 +272,82 @@
                 }
             }
         },
+        minAngle: 3,
         label: {
             visible: true,
-            position: 'outside'
-        }
-    };
-
-    const indicator = {
-        title: {
-            visible: true,
-            style: {
-                fill: '#12141A',
-                fontWeight: 500,
-                fontSize: 16
-            }
-        },
-        content: {
-            visible: true,
-            style: {
-                fill: '#85878A',
-                fontWeight: 400,
-                fontSize: 12
-            }
-        }
-    };
-
-    const funnel = {
-        funnel: {
-            state: {
-                selected: {
-                    fill: '#1966FF',
-                    stroke: '#3958E0',
-                    strokeOpacity: 0.2,
-                    lineWidth: 4
-                }
-            }
-        },
-        outerLabel: {
-            style: {
-                fontSize: 12
+            position: 'outside',
+            formatMethod: (label, data) => {
+                const midAngle = data.__VCHART_ARC_MIDDLE_ANGLE;
+                const cos = Math.cos(midAngle);
+                return {
+                    type: 'rich',
+                    text: [
+                        {
+                            text: `${data === null || data === void 0 ? void 0 : data.value}\n`,
+                            fill: '#111',
+                            fontSize: 16,
+                            fontWeight: '500',
+                            fontFamily: 'douyinNumber',
+                            stroke: false,
+                            textAlign: cos < 0 ? 'right' : 'left'
+                        },
+                        {
+                            text: data === null || data === void 0 ? void 0 : data.type,
+                            fill: '#606165',
+                            fontSize: 12,
+                            fontWeight: '400',
+                            stroke: false,
+                            textAlign: cos < 0 ? 'right' : 'left'
+                        }
+                    ]
+                };
             },
             line: {
                 style: {
                     lineWidth: 2
                 }
-            }
-        },
-        label: {
-            style: {
-                fill: { type: 'palette', key: 'whiteColors100' },
-                fontSize: 12
-            }
-        }
-    };
-
-    const treemap = {
-        gapWidth: 0,
-        leaf: {
-            style: {
-                lineWidth: 2,
-                stroke: { type: 'palette', key: 'whiteColors100' }
             },
-            state: {
-                hover: {
-                    fillOpacity: 0.8,
-                    lineWidth: 0
-                }
-            }
-        },
-        label: {
-            style: {
-                fill: { type: 'palette', key: 'whiteColors100' }
-            }
-        }
-    };
-
-    const gauge = {
-        circularProgress: {
-            progress: {
-                style: {
-                    cornerRadius: 100
-                }
+            layout: {
+                align: 'labelLine'
             },
-            track: {
-                interactive: false,
-                style: {
-                    cornerRadius: 100,
-                    fill: '#DCDEE1',
-                    fillOpacity: 1
-                }
-            }
-        },
-        gaugePointer: {
-            pin: { visible: false },
-            pinBackground: { visible: false },
-            pointer: { visible: false }
-        }
-    };
-
-    const heatmap = {
-        cell: {
             style: {
-                stroke: { type: 'palette', key: 'whiteColors100' },
-                lineWidth: 1
-            },
-            state: {
-                hover: {
-                    zIndex: 100,
-                    stroke: '#000'
-                }
-            }
-        },
-        label: {
-            position: 'inside',
-            style: {
-                fill: { type: 'palette', key: 'whiteColors100' },
-                fontSize: 12
-            }
-        }
-    };
-
-    const markLine = {
-        line: {
-            style: {
-                lineDash: [],
-                lineWidth: 1,
-                stroke: { type: 'palette', key: 'blackColors25' }
-            }
-        },
-        startSymbol: {
-            visible: false
-        },
-        endSymbol: {
-            visible: false
-        },
-        label: {
-            position: 'insideStartTop',
-            refY: 0,
-            autoRotate: true,
-            style: {
-                fontSize: { type: 'token', key: 'l5FontSize' },
-                fill: { type: 'palette', key: 'blackColors65' }
-            },
-            labelBackground: {
-                visible: false
+                type: 'rich',
+                boundsPadding: [6, 0, 6, 0]
             }
         }
     };
 
-    const markArea = {
-        area: {
-            style: {
-                fill: { type: 'palette', key: 'blackColors100', a: 0.06 }
-            }
-        },
-        label: {
-            style: {
-                fontSize: { type: 'token', key: 'l5FontSize' },
-                fill: { type: 'palette', key: 'blackColors65' }
-            },
-            labelBackground: {
-                visible: false
-            }
-        }
-    };
-
-    const markPoint = {
-        itemContent: {
-            autoRotate: false,
-            offsetY: -16,
-            text: {
-                style: {
-                    fontSize: { type: 'token', key: 'l5FontSize' },
-                    fill: { type: 'palette', key: 'blackColors65' }
-                }
-            }
-        },
-        itemLine: {
-            decorativeLine: {
-                visible: false
-            },
-            startSymbol: {
-                visible: true,
-                size: 6,
-                style: {
-                    fill: '#fff',
-                    stroke: { type: 'palette', key: 'bandColor' },
-                    lineWidth: 2
-                }
-            },
-            endSymbol: {
-                visible: false
-            },
+    const chartAuroraTheme = {
+        name: 'aurora',
+        type: 'light',
+        description: 'light theme for Aurora.',
+        colorScheme,
+        component: Object.assign(Object.assign({}, legend), { tooltip }),
+        chart: {
             line: {
-                style: {
-                    lineWidth: 1,
-                    stroke: { type: 'palette', key: 'blackColors25' }
-                }
-            }
-        }
-    };
-
-    const dataZoomCommon = {
-        middleHandler: {
-            visible: false
-        },
-        startHandler: {
-            style: {
-                size: 22
-            }
-        },
-        selectedBackground: {
-            style: {
-                fill: '#6699FF',
-                fillOpacity: 0.2,
-                opacity: 1,
-                stroke: '#6699FF',
-                lineWidth: 2,
-                cornerRadius: 4
-            }
-        },
-        background: {
-            style: {
-                fill: '#F3F4F6',
-                fillOpacity: 0.2,
-                cornerRadius: 4,
-                stroke: '#EDEEF0',
-                opacity: 1,
-                lineWidth: 2
-            }
-        },
-        endHandler: {
-            style: {
-                size: 22
-            }
-        },
-        backgroundChart: {
+                component: Object.assign({ crosshair: lineCrosshair }, lineLegend)
+            },
             area: {
-                style: {
-                    fill: false,
-                    stroke: '#6699FF'
-                }
+                component: Object.assign({ crosshair: lineCrosshair }, lineLegend)
             },
-            line: {
-                style: {
-                    fill: false,
-                    stroke: '#6699FF'
-                }
-            }
-        },
-        startText: {
-            visible: false
-        },
-        endText: {
-            visible: false
-        }
-    };
-    const dataZoom = {
-        horizontal: Object.assign(Object.assign({}, dataZoomCommon), { height: 44 }),
-        vertical: Object.assign(Object.assign({}, dataZoomCommon), { width: 44 })
-    };
-
-    const scrollBar = {
-        horizontal: {
-            height: 12,
-            slider: {
-                style: {
-                    fill: 'rgba(0,0,0,0.15)'
-                }
-            }
-        },
-        vertical: {
-            width: 12,
-            slider: {
-                style: {
-                    fill: 'rgba(0,0,0,0.15)'
+            bar: {
+                component: {
+                    crosshair: barCrosshair
+                },
+                colorScheme: {
+                    default: {
+                        dataScheme: barColorList
+                    }
                 }
             }
-        }
-    };
-
-    const radar = {
-        line: {
-            style: {
-                lineWidth: 1
-            }
         },
-        point: {
-            style: {
-                visible: false,
-                size: 12,
-                lineWidth: 2,
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowBlur: 3,
-                stroke: { type: 'palette', key: 'whiteColors100' }
-            }
-        },
-        area: {
-            visible: true
-        },
-        label: {
-            position: 'top',
-            offset: 4
-        }
-    };
-
-    const chartAuroraTheme = {
-        name: 'aurora',
-        type: 'light',
-        description: 'light theme for ChartHub.',
-        colorScheme,
-        token,
-        component: Object.assign(Object.assign(Object.assign(Object.assign({}, axis), legend), axisPolar), { tooltip,
-            crosshair,
-            indicator,
-            markLine,
-            markArea,
-            markPoint,
-            dataZoom,
-            scrollBar }),
-        series: Object.assign(Object.assign(Object.assign(Object.assign({}, area), barTheme), gauge), { line,
-            scatter,
-            pie,
-            funnel,
-            treemap,
-            heatmap,
-            radar }),
-        markByName
+        series: Object.assign(Object.assign(Object.assign({ pie }, barTheme), area), { line })
     };
     const allThemeMap = new Map([[chartAuroraTheme.name, chartAuroraTheme]]);
 
     exports.allThemeMap = allThemeMap;
     exports.chartAuroraTheme = chartAuroraTheme;
+    exports.colorList = colorList;
+    exports.nestColorList = nestColorList;
 
 }));