Method render

packages/sanddance-explorer/src/dialogs/chart.tsx:99–322

()

        }

        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': {
                                        suffix = (
                                            <Dropdown
                                                disabled={!props.insightColumns.facet}
                                                collapseLabel={props.collapseLabels}
                                                label={strings.labelFacetLayout}
                                                calloutProps={{ style: { minWidth: '18em' } }}
                                                options={[
                                                    {
                                                        key: 'header1',
                                                        text: `${strings.labelFacetLayout}:`,
                                                        itemType: base.fluentUI.DropdownMenuItemType.Header,
                                                    },