Function _Chart

packages/sanddance-explorer/src/dialogs/chart.tsx:87–333

(_props: Props)

}

function _Chart(_props: Props) {
    class __Chart extends base.react.Component<Props, State> {
        private choiceRef?: React.RefObject<FluentUITypes.IChoiceGroup>;
        constructor(props: Props) {
            super(props);
            this.state = {
                showTooltipDialog: false,
            };
            this.choiceRef = base.react.createRef<FluentUITypes.IChoiceGroup>();
            props.explorer.dialogFocusHandler.focus = () => this.choiceRef.current?.focus();
        }

        render() {
            const { props } = this;
            const { explorer, specCapabilities } = props;
            const signals = explorer.viewer &&
                explorer.viewer.vegaSpec &&
                specCapabilities &&
                specCapabilities.signals &&
                explorer.viewer.vegaSpec.signals.filter(s => specCapabilities.signals.indexOf(s.name) >= 0);
            return (
                <div>
                    <Group label={strings.labelChart}>
                        <div className="calculator">
                            <base.fluentUI.ChoiceGroup
                                componentRef={this.choiceRef}
                                className="sanddance-chart-type"
                                options={chartLabelMap.map(o => {
                                    return {
                                        ...o,
                                        checked: props.chart === o.key,
                                        disabled: props.disabled
                                            || (o.key === 'treemap' && props.quantitativeColumns.length === 0),
                                    };
                                })}
                                onChange={(e, o) => props.onChangeChartType(o.key as SandDance.specs.Chart)}
                            />
                        </div>
                    </Group>
                    <Group label={strings.labelColumnMapping}>
                        <div>
                            {specCapabilities && specCapabilities.roles.map((specRole, i) => {
                                const specColumnInRole = props.insightColumns[specRole.role];
                                const selectedColumnName = specColumnInRole;
                                let disabledColumnName: string;
                                let prefix: JSX.Element;
                                let suffix: JSX.Element;
                                let hideDropdown = false;
                                let { totalStyle } = props;
                                if (!totalStyle) {
                                    totalStyle = 'count-square';
                                }
                                let { facetStyle } = props;
                                if (!facetStyle) {
                                    facetStyle = 'wrap';
                                }
                                switch (specRole.role) {
                                    case 'facet': {