react-plot/lib/components/Heading.js

Library of React components to render SVG 2D plots.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { AlignGroup, useBBoxObserver } from 'react-d3-utils';
import { usePlotContext, usePlotDispatchContext, } from '../contexts/plotContext.js';
export function Heading({ title, titleStyle, titleClass, subtitle, subtitleStyle, subtitleClass, position = 'top', }) {
    const { width, height } = usePlotContext();
    const dispatch = usePlotDispatchContext();
    const defaultTitleStyle = {
        dominantBaseline: 'hanging',
        textAnchor: 'middle',
        fontSize: '16px',
        fontWeight: 'bold',
    };
    const defaultSubtitleStyle = {
        dominantBaseline: 'hanging',
        textAnchor: 'middle',
        fontSize: '14px',
        color: 'gray',
    };
    const headingBbox = useBBoxObserver();
    useEffect(() => {
        dispatch({ type: 'addHeading', payload: { position } });
        // Delete information on unmount
        return () => dispatch({ type: 'removeHeading' });
    }, [dispatch, position]);
    return (_jsxs(AlignGroup, { x: width / 2, y: position === 'top' ? 0 : height, horizontalAlign: "middle", verticalAlign: position === 'top' ? 'start' : 'end', children: [_jsx("text", { ref: headingBbox.ref, style: { ...defaultTitleStyle, ...titleStyle }, className: titleClass, children: title }), subtitle && (_jsx("text", { transform: `translate(0, ${headingBbox.height})`, style: {
                    ...defaultSubtitleStyle,
                    ...subtitleStyle,
                }, className: subtitleClass, children: subtitle }))] }));
}
//# sourceMappingURL=Heading.js.map