| 30 | } |
| 31 | |
| 32 | export function Color(props: Props) { |
| 33 | const colorColumn = props.dataContent.columns.filter(c => c.name === props.colorColumn)[0]; |
| 34 | const disabledColorBin = !colorColumn || !colorColumn.quantitative || props.directColor; |
| 35 | const colorBin = props.colorBin || 'quantize'; |
| 36 | const dropdownRef = base.react.createRef<FluentUITypes.IDropdown>(); |
| 37 | props.explorer.dialogFocusHandler.focus = ()=> dropdownRef.current?.focus(); |
| 38 | return ( |
| 39 | <div className="sanddance-color-dialog"> |
| 40 | <Group label={strings.labelColor}> |
| 41 | <ColumnMap |
| 42 | {...props} |
| 43 | componentRef={dropdownRef} |
| 44 | collapseLabel={props.compactUI} |
| 45 | selectedColumnName={props.colorColumn} |
| 46 | specRole={props.specCapabilities && props.specCapabilities.roles.filter(r => r.role === 'color')[0]} |
| 47 | key={0} |
| 48 | /> |
| 49 | {colorColumn && colorColumn.isColorData && <div |
| 50 | className="sanddance-explanation" |
| 51 | dangerouslySetInnerHTML={{ __html: strings.labelColorFieldIsColorData(colorColumn.name) }} |
| 52 | />} |
| 53 | {colorColumn && !colorColumn.isColorData && <Palette |
| 54 | collapseLabel={props.compactUI} |
| 55 | scheme={props.scheme} |
| 56 | colorColumn={colorColumn} |
| 57 | changeColorScheme={scheme => { |
| 58 | props.onColorSchemeChange(scheme); |
| 59 | }} |
| 60 | disabled={props.disabled || props.directColor || (colorColumn && colorColumn.isColorData)} |
| 61 | />} |
| 62 | {colorColumn && !colorColumn.isColorData && <Signal |
| 63 | disabled={props.disabled || !colorColumn || props.directColor || (colorColumn && colorColumn.isColorData)} |
| 64 | signal={props.colorReverseSignal} |
| 65 | explorer={props.explorer} |
| 66 | onChange={props.onColorReverseChange} |
| 67 | collapseLabel={props.compactUI} |
| 68 | />} |
| 69 | </Group> |
| 70 | {colorColumn && !colorColumn.isColorData && <Group label={strings.labelColorBin}> |
| 71 | <div className="sanddance-explanation">{strings.labelColorBinExplanation}</div> |
| 72 | <base.fluentUI.ChoiceGroup |
| 73 | options={[ |
| 74 | { |
| 75 | key: 'continuous', |
| 76 | text: strings.labelColorBinNone, |
| 77 | checked: colorBin === 'continuous', |
| 78 | disabled: disabledColorBin, |
| 79 | }, |
| 80 | { |
| 81 | key: 'quantize', |
| 82 | text: strings.labelColorBinQuantize, |
| 83 | checked: colorBin === 'quantize', |
| 84 | disabled: disabledColorBin, |
| 85 | }, |
| 86 | { |
| 87 | key: 'quantile', |
| 88 | text: strings.labelColorBinQuantile, |
| 89 | checked: colorBin === 'quantile', |