@visactor/vchart-aurora-theme 0.0.1

package/build/index.js

@@ -0,0 +1,820 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vchart-semi-theme"] = {}));
+})(this, (function (exports) { 'use strict';
+
+    const defaultColor = [
+        '#1443FF',
+        '#33CCB2',
+        '#FFD500',
+        '#FFAA33',
+        '#FF7733',
+        '#F65656',
+        '#E93DBD',
+        '#9933FF',
+        '#5533FF',
+        '#A3ABC2'
+    ];
+    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 = {};
+    for (const key in BLACK_COLORS) {
+        blackColorPalettes[`blackColors${key}`] = BLACK_COLORS[key];
+    }
+    const whiteColorPalettes = {};
+    for (const key in WHITE_COLORS) {
+        whiteColorPalettes[`whiteColors${key}`] = WHITE_COLORS[key];
+    }
+    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
+                }
+            }
+        }
+    };
+
+    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],
+            maxRow: 1,
+            title: {
+                visible: false,
+                textStyle: {
+                    fill: { type: 'palette', key: 'blackColors45' },
+                    fontSize: 12,
+                    lineHeight: 21
+                }
+            },
+            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,
+                    style: {
+                        size: 10,
+                        fill: {
+                            type: 'palette',
+                            key: 'blackColors100'
+                        }
+                    }
+                },
+                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'
+            }
+        },
+        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
+        }
+    };
+
+    const crosshair = {
+        trigger: 'hover',
+        bandField: {
+            line: {
+                type: 'rect',
+                visible: true,
+                style: {
+                    fill: '#CCD7EB',
+                    fillOpacity: 0.4,
+                    lineDash: []
+                }
+            },
+            label: {
+                visible: false
+            }
+        },
+        linearField: {
+            visible: false,
+            line: {
+                type: 'line',
+                style: {
+                    stroke: '#CCD7EB',
+                    lineWidth: 0.4,
+                    lineDash: []
+                }
+            },
+            label: {
+                visible: false
+            }
+        }
+    };
+
+    const area = {
+        area: {
+            point: {
+                style: {
+                    visible: false,
+                    size: 12,
+                    lineWidth: 2,
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                    shadowBlur: 3,
+                    stroke: { type: 'palette', key: 'whiteColors100' }
+                }
+            },
+            line: {
+                style: {
+                    curveType: 'monotone',
+                    lineWidth: 2
+                }
+            },
+            area: {
+                style: {
+                    fillOpacity: 0.25,
+                    lineWidth: 2
+                },
+                state: {
+                    selected: {
+                        fillOpacity: 0.5
+                    }
+                }
+            }
+        }
+    };
+
+    const bar = {
+        barMaxWidth: 8,
+        barGapInGroup: 4,
+        label: {
+            style: {
+                fill: { type: 'palette', key: 'secondaryFontColor' }
+            }
+        }
+    };
+    const bar_horizontal = {
+        stackCornerRadius: [0, 1, 1, 0],
+        label: {
+            position: 'right',
+            offset: 4
+        }
+    };
+    const bar_vertical = {
+        stackCornerRadius: [1, 1, 0, 0],
+        label: {
+            position: 'top',
+            offset: 4
+        }
+    };
+    const barTheme = {
+        bar,
+        bar_horizontal,
+        bar_vertical
+    };
+
+    const line = {
+        line: {
+            style: {
+                lineWidth: 2,
+                curveType: 'monotone'
+            }
+        },
+        point: {
+            style: {
+                visible: false,
+                size: 12,
+                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
+            }
+        },
+        label: {
+            position: 'top'
+        }
+    };
+
+    const pie = {
+        outerRadius: 0.8,
+        innerRadius: 0.54,
+        pie: {
+            style: {
+                padAngle: 0,
+                stroke: '#fff',
+                lineWidth: 2
+            },
+            state: {
+                hover: {
+                    lineWidth: 0
+                },
+                selected: {
+                    lineWidth: 0
+                }
+            }
+        },
+        label: {
+            visible: true,
+            position: 'outside',
+            style: {
+                fill: null
+            }
+        }
+    };
+
+    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
+            },
+            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
+                }
+            },
+            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
+            }
+        }
+    };
+
+    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
+            },
+            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: {
+            area: {
+                style: {
+                    fill: false,
+                    stroke: '#6699FF'
+                }
+            },
+            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)'
+                }
+            }
+        }
+    };
+
+    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
+    };
+    const allThemeMap = new Map([[chartAuroraTheme.name, chartAuroraTheme]]);
+
+    exports.allThemeMap = allThemeMap;
+    exports.chartAuroraTheme = chartAuroraTheme;
+
+}));