@visactor/vtable/es/components/axis/get-axis-attributes.js

canvas table width high performance

import { degreeToRadian, isNil, merge, pickWithout } from "@visactor/vutils";

import { transformAxisLineStyle, transformStateStyle, transformToGraphic } from "../util/transform";

const DEFAULT_TITLE_STYLE = {
    left: {
        textAlign: "center",
        textBaseline: "bottom"
    },
    right: {
        textAlign: "center",
        textBaseline: "bottom"
    },
    radius: {},
    angle: {}
};

export const DEFAULT_TEXT_FONT_FAMILY = "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol";

export const DEFAULT_TEXT_FONT_SIZE = 14;

export const THEME_CONSTANTS = {
    FONT_FAMILY: DEFAULT_TEXT_FONT_FAMILY,
    LABEL_FONT_SIZE: 14,
    MAP_LABEL_FONT_SIZE: 10,
    TITLE_FONT_SIZE: 18,
    AXIS_TICK_SIZE: 4
};

export const commonAxis = {
    domainLine: {
        visible: !0,
        style: {
            lineWidth: 1,
            stroke: "#D9DDE4",
            strokeOpacity: 1
        }
    },
    grid: {
        visible: !0,
        style: {
            lineWidth: 1,
            stroke: "#EBEDF2",
            strokeOpacity: 1,
            lineDash: []
        }
    },
    subGrid: {
        visible: !1,
        style: {
            lineWidth: 1,
            stroke: "#EBEDF2",
            strokeOpacity: 1,
            lineDash: [ 4, 4 ]
        }
    },
    tick: {
        visible: !0,
        tickSize: THEME_CONSTANTS.AXIS_TICK_SIZE,
        style: {
            lineWidth: 1,
            stroke: "#D9DDE4",
            strokeOpacity: 1
        }
    },
    subTick: {
        visible: !1,
        tickSize: THEME_CONSTANTS.AXIS_TICK_SIZE / 2,
        style: {
            lineWidth: 1,
            stroke: "#D9DDE4",
            strokeOpacity: 1
        }
    },
    label: {
        visible: !0,
        space: 1,
        style: {
            fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE,
            fill: "#89909D",
            fontWeight: "normal",
            fillOpacity: 1
        },
        autoLimit: !0
    },
    title: {
        space: 10,
        style: {
            fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE,
            fill: "#333333",
            fontWeight: "normal",
            fillOpacity: 1
        }
    }
};

export function getCommonAxis(theme) {
    var _a, _b;
    return (null === (_b = null === (_a = null == theme ? void 0 : theme.colorScheme) || void 0 === _a ? void 0 : _a.default) || void 0 === _b ? void 0 : _b.palette) ? merge({}, commonAxis, {
        tick: {
            style: {
                stroke: theme.colorScheme.default.palette.axisDomainColor || "#D9DDE4"
            }
        },
        subTick: {
            style: {
                stroke: theme.colorScheme.default.palette.axisDomainColor || "#D9DDE4"
            }
        },
        label: {
            style: {
                fill: theme.colorScheme.default.palette.axisLabelFontColor || "#89909D"
            }
        },
        title: {
            style: {
                fill: theme.colorScheme.default.palette.secondaryFontColor || "#333333"
            }
        }
    }) : commonAxis;
}

export function getAxisAttributes(option) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
    const spec = merge({}, option);
    let titleTextStyle, titleAngle = null !== (_b = null === (_a = spec.title) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0;
    "left" !== spec.orient && "right" !== spec.orient || (null === (_c = spec.title) || void 0 === _c ? void 0 : _c.autoRotate) && isNil(spec.title.angle) && (titleAngle = "left" === spec.orient ? -90 : 90, 
    titleTextStyle = DEFAULT_TITLE_STYLE[spec.orient]);
    const labelSpec = pickWithout(spec.label, [ "style", "formatMethod", "state" ]);
    return {
        orient: spec.orient,
        select: spec.select,
        hover: spec.hover,
        line: transformAxisLineStyle(spec.domainLine),
        label: Object.assign({
            style: transformToGraphic(spec.label.style),
            formatMethod: spec.label.formatMethod ? (value, datum, index) => spec.label.formatMethod(datum.rawValue, datum) : null,
            state: transformStateStyle(spec.label.state)
        }, labelSpec),
        tick: {
            visible: spec.tick.visible,
            length: spec.tick.tickSize,
            inside: spec.tick.inside,
            alignWithLabel: spec.tick.alignWithLabel,
            style: transformToGraphic(spec.tick.style),
            state: transformStateStyle(spec.tick.state),
            dataFilter: spec.tick.dataFilter
        },
        subTick: {
            visible: spec.subTick.visible,
            length: spec.subTick.tickSize,
            inside: spec.subTick.inside,
            count: spec.subTick.tickCount,
            style: transformToGraphic(spec.subTick.style),
            state: transformStateStyle(spec.subTick.state)
        },
        grid: {
            type: "line",
            visible: spec.grid.visible,
            alternateColor: spec.grid.alternateColor,
            alignWithLabel: spec.grid.alignWithLabel,
            style: transformToGraphic(spec.grid.style)
        },
        subGrid: {
            type: "line",
            visible: spec.subGrid.visible,
            alternateColor: spec.subGrid.alternateColor,
            style: transformToGraphic(spec.subGrid.style)
        },
        title: {
            visible: spec.title.visible,
            position: spec.title.position,
            space: spec.title.space,
            autoRotate: !1,
            angle: titleAngle ? degreeToRadian(titleAngle) : null,
            textStyle: merge({}, titleTextStyle, transformToGraphic(spec.title.style)),
            padding: spec.title.padding,
            shape: {
                visible: null === (_d = spec.title.shape) || void 0 === _d ? void 0 : _d.visible,
                space: null === (_e = spec.title.shape) || void 0 === _e ? void 0 : _e.space,
                style: transformToGraphic(null === (_f = spec.title.shape) || void 0 === _f ? void 0 : _f.style)
            },
            background: {
                visible: null === (_g = spec.title.background) || void 0 === _g ? void 0 : _g.visible,
                style: transformToGraphic(null === (_h = spec.title.background) || void 0 === _h ? void 0 : _h.style)
            },
            state: {
                text: transformStateStyle(spec.title.state),
                shape: transformStateStyle(null === (_j = spec.title.shape) || void 0 === _j ? void 0 : _j.state),
                background: transformStateStyle(null === (_k = spec.title.background) || void 0 === _k ? void 0 : _k.state)
            }
        },
        panel: {
            visible: null === (_l = spec.background) || void 0 === _l ? void 0 : _l.visible,
            style: transformToGraphic(null === (_m = spec.background) || void 0 === _m ? void 0 : _m.style),
            state: transformStateStyle(null === (_o = spec.background) || void 0 === _o ? void 0 : _o.state)
        }
    };
}
//# sourceMappingURL=get-axis-attributes.js.map