michael-s-molina commented on a change in pull request #15651: URL: https://github.com/apache/superset/pull/15651#discussion_r668688975
########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; Review comment: ```suggestion import ControlHeader from 'src/explore/components/ControlHeader'; import { COMPARE_OPERATOR, ConditionalFormattingConfig, ConditionalFormattingControlProps, FormattingPopoverProps, MULTIPLE_VALUE_COMPARATORS, } from './types'; ``` ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; Review comment: ```suggestion const FormattersContainer = styled.div` ${({ theme }) => ` padding: ${theme.gridUnit}px; border: solid 1px ${theme.colors.grayscale.light2}; border-radius: ${theme.gridUnit}px; `} `; ``` ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; + +export const FormatterContainer = styled(OptionControlContainer)` + &, + & > div { + margin-bottom: ${({ theme }) => theme.gridUnit}px; + :last-child { + margin-bottom: 0; + } + } +`; + +export const CloseButton = styled.button` + color: ${({ theme }) => theme.colors.grayscale.light1}; + height: 100%; + width: ${({ theme }) => theme.gridUnit * 6}px; + border: none; + border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + padding: 0; + outline: none; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +`; + +const JustifyEnd = styled.div` + display: flex; + justify-content: flex-end; +`; + +const colorSchemeOptions = [ + { value: 'rgb(0,255,0)', label: t('green') }, + { value: 'rgb(255,255,0)', label: t('yellow') }, + { value: 'rgb(255,0,0)', label: t('red') }, +]; + +const operatorOptions = [ + { value: COMPARE_OPERATOR.GREATER_THAN, label: '>' }, + { value: COMPARE_OPERATOR.LESS_THAN, label: '<' }, + { value: COMPARE_OPERATOR.GREATER_OR_EQUAL, label: '≥' }, + { value: COMPARE_OPERATOR.LESS_OR_EQUAL, label: '≤' }, + { value: COMPARE_OPERATOR.EQUAL, label: '=' }, + { value: COMPARE_OPERATOR.NOT_EQUAL, label: '≠' }, + { value: COMPARE_OPERATOR.BETWEEN, label: '< x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' }, +]; + +const FormattingPopoverContent = ({ + config, + onChange, + columns = [], +}: { + config?: ConditionalFormattingConfig; + onChange: (config: ConditionalFormattingConfig) => void; + columns: { label: string; value: string }[]; +}) => { + const isOperatorMultiValue = (operator?: COMPARE_OPERATOR) => + operator && MULTIPLE_VALUE_COMPARATORS.includes(operator); + + const operatorField = useMemo( + () => ( + <FormItem + name="operator" + label={t('Operator')} + rules={[{ required: true, message: t('Required') }]} + initialValue={operatorOptions[0].value} + > + <Select ariaLabel={t('Operator')} options={operatorOptions} /> + </FormItem> + ), + [], + ); + + return ( + <div> + <Form + onFinish={onChange} + initialValues={config} + requiredMark="optional" + layout="vertical" + > + <Row gutter={12}> + <Col span={12}> + <FormItem + name="column" + label={t('Column')} + rules={[{ required: true, message: t('Required') }]} + initialValue={columns[0]?.value} + > + <Select ariaLabel={t('Select column')} options={columns} /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + name="colorScheme" + label={t('Color scheme')} + rules={[{ required: true, message: t('Required') }]} + initialValue={colorSchemeOptions[0].value} + > + <Select + ariaLabel={t('Color scheme')} + options={colorSchemeOptions} + /> + </FormItem> + </Col> + </Row> + <FormItem + noStyle + shouldUpdate={( + prevValues: ConditionalFormattingConfig, + currentValues: ConditionalFormattingConfig, + ) => + isOperatorMultiValue(prevValues.operator) !== + isOperatorMultiValue(currentValues.operator) + } + > + {({ getFieldValue }) => + isOperatorMultiValue(getFieldValue('operator')) ? ( + <Row gutter={12}> + <Col span={9}> + <FormItem + name="targetValueLeft" + label={t('Left value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ + validator(_, value) { + if ( + !value || + !getFieldValue('targetValueRight') || + getFieldValue('targetValueRight') > value + ) { + return Promise.resolve(); + } + return Promise.reject( + new Error( + t( + 'This value should be smaller than the right target value', + ), + ), + ); + }, + }), + ]} + dependencies={['targetValueRight']} + validateTrigger="onBlur" + trigger="onBlur" + > + <FullWidthInputNumber /> + </FormItem> + </Col> + <Col span={6}>{operatorField}</Col> + <Col span={9}> + <FormItem + name="targetValueRight" + label={t('Right value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ + validator(_, value) { + if ( + !value || + !getFieldValue('targetValueLeft') || + getFieldValue('targetValueLeft') < value + ) { + return Promise.resolve(); + } + return Promise.reject( + new Error( + t( + 'This value should be greater than the left target value', + ), + ), + ); + }, + }), + ]} + dependencies={['targetValueLeft']} + validateTrigger="onBlur" + trigger="onBlur" + > + <FullWidthInputNumber /> + </FormItem> + </Col> + </Row> + ) : ( + <Row gutter={12}> + <Col span={6}>{operatorField}</Col> + <Col span={18}> + <FormItem + name="targetValue" + label={t('Target value')} + rules={[{ required: true, message: t('Required') }]} + > + <FullWidthInputNumber /> + </FormItem> + </Col> + </Row> + ) + } + </FormItem> + <FormItem> + <JustifyEnd> + <Button htmlType="submit">{t('Apply')}</Button> Review comment: ```suggestion <Button htmlType="submit" buttonStyle="primary"> {t('Apply')} </Button> ``` ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; + +export const FormatterContainer = styled(OptionControlContainer)` + &, + & > div { + margin-bottom: ${({ theme }) => theme.gridUnit}px; + :last-child { + margin-bottom: 0; + } + } +`; + +export const CloseButton = styled.button` + color: ${({ theme }) => theme.colors.grayscale.light1}; + height: 100%; + width: ${({ theme }) => theme.gridUnit * 6}px; + border: none; + border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + padding: 0; + outline: none; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +`; Review comment: ```suggestion export const CloseButton = styled.button` ${({ theme }) => ` color: ${theme.colors.grayscale.light1}; height: 100%; width: ${theme.gridUnit * 6}px; border: none; border-right: solid 1px ${theme.colors.grayscale.dark2}0C; padding: 0; outline: none; border-bottom-left-radius: 3px; border-top-left-radius: 3px; `} `; ``` ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; + +export const FormatterContainer = styled(OptionControlContainer)` + &, + & > div { + margin-bottom: ${({ theme }) => theme.gridUnit}px; + :last-child { + margin-bottom: 0; + } + } +`; + +export const CloseButton = styled.button` + color: ${({ theme }) => theme.colors.grayscale.light1}; + height: 100%; + width: ${({ theme }) => theme.gridUnit * 6}px; + border: none; + border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + padding: 0; + outline: none; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +`; + +const JustifyEnd = styled.div` + display: flex; + justify-content: flex-end; +`; + +const colorSchemeOptions = [ + { value: 'rgb(0,255,0)', label: t('green') }, + { value: 'rgb(255,255,0)', label: t('yellow') }, + { value: 'rgb(255,0,0)', label: t('red') }, +]; + +const operatorOptions = [ + { value: COMPARE_OPERATOR.GREATER_THAN, label: '>' }, + { value: COMPARE_OPERATOR.LESS_THAN, label: '<' }, + { value: COMPARE_OPERATOR.GREATER_OR_EQUAL, label: '≥' }, + { value: COMPARE_OPERATOR.LESS_OR_EQUAL, label: '≤' }, + { value: COMPARE_OPERATOR.EQUAL, label: '=' }, + { value: COMPARE_OPERATOR.NOT_EQUAL, label: '≠' }, + { value: COMPARE_OPERATOR.BETWEEN, label: '< x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' }, +]; + +const FormattingPopoverContent = ({ Review comment: Move `FormattingPopoverContent` to its own file? ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; + +export const FormatterContainer = styled(OptionControlContainer)` + &, + & > div { + margin-bottom: ${({ theme }) => theme.gridUnit}px; + :last-child { + margin-bottom: 0; + } + } +`; + +export const CloseButton = styled.button` + color: ${({ theme }) => theme.colors.grayscale.light1}; + height: 100%; + width: ${({ theme }) => theme.gridUnit * 6}px; + border: none; + border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + padding: 0; + outline: none; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +`; + +const JustifyEnd = styled.div` + display: flex; + justify-content: flex-end; +`; + +const colorSchemeOptions = [ + { value: 'rgb(0,255,0)', label: t('green') }, + { value: 'rgb(255,255,0)', label: t('yellow') }, + { value: 'rgb(255,0,0)', label: t('red') }, +]; + +const operatorOptions = [ + { value: COMPARE_OPERATOR.GREATER_THAN, label: '>' }, + { value: COMPARE_OPERATOR.LESS_THAN, label: '<' }, + { value: COMPARE_OPERATOR.GREATER_OR_EQUAL, label: '≥' }, + { value: COMPARE_OPERATOR.LESS_OR_EQUAL, label: '≤' }, + { value: COMPARE_OPERATOR.EQUAL, label: '=' }, + { value: COMPARE_OPERATOR.NOT_EQUAL, label: '≠' }, + { value: COMPARE_OPERATOR.BETWEEN, label: '< x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' }, +]; + +const FormattingPopoverContent = ({ + config, + onChange, + columns = [], +}: { + config?: ConditionalFormattingConfig; + onChange: (config: ConditionalFormattingConfig) => void; + columns: { label: string; value: string }[]; +}) => { + const isOperatorMultiValue = (operator?: COMPARE_OPERATOR) => + operator && MULTIPLE_VALUE_COMPARATORS.includes(operator); + + const operatorField = useMemo( + () => ( + <FormItem + name="operator" + label={t('Operator')} + rules={[{ required: true, message: t('Required') }]} + initialValue={operatorOptions[0].value} + > + <Select ariaLabel={t('Operator')} options={operatorOptions} /> + </FormItem> + ), + [], + ); + + return ( + <div> + <Form + onFinish={onChange} + initialValues={config} + requiredMark="optional" + layout="vertical" + > + <Row gutter={12}> + <Col span={12}> + <FormItem + name="column" + label={t('Column')} + rules={[{ required: true, message: t('Required') }]} + initialValue={columns[0]?.value} + > + <Select ariaLabel={t('Select column')} options={columns} /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + name="colorScheme" + label={t('Color scheme')} + rules={[{ required: true, message: t('Required') }]} + initialValue={colorSchemeOptions[0].value} + > + <Select + ariaLabel={t('Color scheme')} + options={colorSchemeOptions} + /> + </FormItem> + </Col> + </Row> + <FormItem + noStyle + shouldUpdate={( + prevValues: ConditionalFormattingConfig, + currentValues: ConditionalFormattingConfig, + ) => + isOperatorMultiValue(prevValues.operator) !== + isOperatorMultiValue(currentValues.operator) + } + > + {({ getFieldValue }) => + isOperatorMultiValue(getFieldValue('operator')) ? ( + <Row gutter={12}> + <Col span={9}> + <FormItem + name="targetValueLeft" + label={t('Left value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ Review comment: Maybe extract the validator to a function to avoid deep nesting? ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; + +export const FormatterContainer = styled(OptionControlContainer)` + &, + & > div { + margin-bottom: ${({ theme }) => theme.gridUnit}px; + :last-child { + margin-bottom: 0; + } + } +`; + +export const CloseButton = styled.button` + color: ${({ theme }) => theme.colors.grayscale.light1}; + height: 100%; + width: ${({ theme }) => theme.gridUnit * 6}px; + border: none; + border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + padding: 0; + outline: none; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +`; + +const JustifyEnd = styled.div` + display: flex; + justify-content: flex-end; +`; + +const colorSchemeOptions = [ + { value: 'rgb(0,255,0)', label: t('green') }, + { value: 'rgb(255,255,0)', label: t('yellow') }, + { value: 'rgb(255,0,0)', label: t('red') }, +]; + +const operatorOptions = [ + { value: COMPARE_OPERATOR.GREATER_THAN, label: '>' }, + { value: COMPARE_OPERATOR.LESS_THAN, label: '<' }, + { value: COMPARE_OPERATOR.GREATER_OR_EQUAL, label: '≥' }, + { value: COMPARE_OPERATOR.LESS_OR_EQUAL, label: '≤' }, + { value: COMPARE_OPERATOR.EQUAL, label: '=' }, + { value: COMPARE_OPERATOR.NOT_EQUAL, label: '≠' }, + { value: COMPARE_OPERATOR.BETWEEN, label: '< x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' }, +]; + +const FormattingPopoverContent = ({ + config, + onChange, + columns = [], +}: { + config?: ConditionalFormattingConfig; + onChange: (config: ConditionalFormattingConfig) => void; + columns: { label: string; value: string }[]; +}) => { + const isOperatorMultiValue = (operator?: COMPARE_OPERATOR) => + operator && MULTIPLE_VALUE_COMPARATORS.includes(operator); + + const operatorField = useMemo( + () => ( + <FormItem + name="operator" + label={t('Operator')} + rules={[{ required: true, message: t('Required') }]} + initialValue={operatorOptions[0].value} + > + <Select ariaLabel={t('Operator')} options={operatorOptions} /> + </FormItem> + ), + [], + ); + + return ( + <div> + <Form + onFinish={onChange} + initialValues={config} + requiredMark="optional" + layout="vertical" + > + <Row gutter={12}> + <Col span={12}> + <FormItem + name="column" + label={t('Column')} + rules={[{ required: true, message: t('Required') }]} + initialValue={columns[0]?.value} + > + <Select ariaLabel={t('Select column')} options={columns} /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + name="colorScheme" + label={t('Color scheme')} + rules={[{ required: true, message: t('Required') }]} + initialValue={colorSchemeOptions[0].value} + > + <Select + ariaLabel={t('Color scheme')} + options={colorSchemeOptions} + /> + </FormItem> + </Col> + </Row> + <FormItem + noStyle + shouldUpdate={( + prevValues: ConditionalFormattingConfig, + currentValues: ConditionalFormattingConfig, + ) => + isOperatorMultiValue(prevValues.operator) !== + isOperatorMultiValue(currentValues.operator) + } + > + {({ getFieldValue }) => + isOperatorMultiValue(getFieldValue('operator')) ? ( + <Row gutter={12}> + <Col span={9}> + <FormItem + name="targetValueLeft" + label={t('Left value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ + validator(_, value) { + if ( + !value || + !getFieldValue('targetValueRight') || + getFieldValue('targetValueRight') > value + ) { + return Promise.resolve(); + } + return Promise.reject( + new Error( + t( + 'This value should be smaller than the right target value', + ), + ), + ); + }, + }), + ]} + dependencies={['targetValueRight']} + validateTrigger="onBlur" + trigger="onBlur" + > + <FullWidthInputNumber /> + </FormItem> + </Col> + <Col span={6}>{operatorField}</Col> + <Col span={9}> + <FormItem + name="targetValueRight" + label={t('Right value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ + validator(_, value) { + if ( + !value || + !getFieldValue('targetValueLeft') || + getFieldValue('targetValueLeft') < value + ) { + return Promise.resolve(); + } + return Promise.reject( + new Error( + t( + 'This value should be greater than the left target value', + ), + ), + ); + }, + }), + ]} + dependencies={['targetValueLeft']} + validateTrigger="onBlur" + trigger="onBlur" + > + <FullWidthInputNumber /> + </FormItem> + </Col> + </Row> + ) : ( + <Row gutter={12}> + <Col span={6}>{operatorField}</Col> + <Col span={18}> + <FormItem + name="targetValue" + label={t('Target value')} + rules={[{ required: true, message: t('Required') }]} + > + <FullWidthInputNumber /> + </FormItem> + </Col> + </Row> + ) + } + </FormItem> + <FormItem> + <JustifyEnd> + <Button htmlType="submit">{t('Apply')}</Button> + </JustifyEnd> + </FormItem> + </Form> + </div> + ); +}; + +const FormattingPopover = ({ Review comment: Move `FormattingPopover` to its own file? ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx ########## @@ -0,0 +1,401 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { styled, t, useTheme } from '@superset-ui/core'; +import Popover from 'src/components/Popover'; +import Button from 'src/components/Button'; +import { Form, FormItem } from 'src/components/Form'; +import Icons from 'src/components/Icons'; +import { InputNumber, Col, Row } from 'src/common/components'; +import { Select } from 'src/components'; +import { + COMPARE_OPERATOR, + ConditionalFormattingConfig, + ConditionalFormattingControlProps, + FormattingPopoverProps, + MULTIPLE_VALUE_COMPARATORS, +} from './types'; +import ControlHeader from '../../ControlHeader'; +import { + AddControlLabel, + CaretContainer, + Label, + OptionControlContainer, +} from '../OptionControls'; + +const FullWidthInputNumber = styled(InputNumber)` + width: 100%; +`; + +const FormattersContainer = styled.div` + padding: ${({ theme }) => theme.gridUnit}px; + border: solid 1px ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.gridUnit}px; +`; + +export const FormatterContainer = styled(OptionControlContainer)` + &, + & > div { + margin-bottom: ${({ theme }) => theme.gridUnit}px; + :last-child { + margin-bottom: 0; + } + } +`; + +export const CloseButton = styled.button` + color: ${({ theme }) => theme.colors.grayscale.light1}; + height: 100%; + width: ${({ theme }) => theme.gridUnit * 6}px; + border: none; + border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + padding: 0; + outline: none; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +`; + +const JustifyEnd = styled.div` + display: flex; + justify-content: flex-end; +`; + +const colorSchemeOptions = [ + { value: 'rgb(0,255,0)', label: t('green') }, + { value: 'rgb(255,255,0)', label: t('yellow') }, + { value: 'rgb(255,0,0)', label: t('red') }, +]; + +const operatorOptions = [ + { value: COMPARE_OPERATOR.GREATER_THAN, label: '>' }, + { value: COMPARE_OPERATOR.LESS_THAN, label: '<' }, + { value: COMPARE_OPERATOR.GREATER_OR_EQUAL, label: '≥' }, + { value: COMPARE_OPERATOR.LESS_OR_EQUAL, label: '≤' }, + { value: COMPARE_OPERATOR.EQUAL, label: '=' }, + { value: COMPARE_OPERATOR.NOT_EQUAL, label: '≠' }, + { value: COMPARE_OPERATOR.BETWEEN, label: '< x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' }, + { value: COMPARE_OPERATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' }, +]; + +const FormattingPopoverContent = ({ + config, + onChange, + columns = [], +}: { + config?: ConditionalFormattingConfig; + onChange: (config: ConditionalFormattingConfig) => void; + columns: { label: string; value: string }[]; +}) => { + const isOperatorMultiValue = (operator?: COMPARE_OPERATOR) => + operator && MULTIPLE_VALUE_COMPARATORS.includes(operator); + + const operatorField = useMemo( + () => ( + <FormItem + name="operator" + label={t('Operator')} + rules={[{ required: true, message: t('Required') }]} + initialValue={operatorOptions[0].value} + > + <Select ariaLabel={t('Operator')} options={operatorOptions} /> + </FormItem> + ), + [], + ); + + return ( + <div> + <Form + onFinish={onChange} + initialValues={config} + requiredMark="optional" + layout="vertical" + > + <Row gutter={12}> + <Col span={12}> + <FormItem + name="column" + label={t('Column')} + rules={[{ required: true, message: t('Required') }]} + initialValue={columns[0]?.value} + > + <Select ariaLabel={t('Select column')} options={columns} /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + name="colorScheme" + label={t('Color scheme')} + rules={[{ required: true, message: t('Required') }]} + initialValue={colorSchemeOptions[0].value} + > + <Select + ariaLabel={t('Color scheme')} + options={colorSchemeOptions} + /> + </FormItem> + </Col> + </Row> + <FormItem + noStyle + shouldUpdate={( + prevValues: ConditionalFormattingConfig, + currentValues: ConditionalFormattingConfig, + ) => + isOperatorMultiValue(prevValues.operator) !== + isOperatorMultiValue(currentValues.operator) + } + > + {({ getFieldValue }) => + isOperatorMultiValue(getFieldValue('operator')) ? ( + <Row gutter={12}> + <Col span={9}> + <FormItem + name="targetValueLeft" + label={t('Left value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ + validator(_, value) { + if ( + !value || + !getFieldValue('targetValueRight') || + getFieldValue('targetValueRight') > value + ) { + return Promise.resolve(); + } + return Promise.reject( + new Error( + t( + 'This value should be smaller than the right target value', + ), + ), + ); + }, + }), + ]} + dependencies={['targetValueRight']} + validateTrigger="onBlur" + trigger="onBlur" + > + <FullWidthInputNumber /> + </FormItem> + </Col> + <Col span={6}>{operatorField}</Col> + <Col span={9}> + <FormItem + name="targetValueRight" + label={t('Right value')} + rules={[ + { required: true, message: t('Required') }, + ({ getFieldValue }) => ({ Review comment: Maybe extract the validator to a function to avoid deep nesting? ########## File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts ########## @@ -0,0 +1,68 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ReactNode } from 'react'; +import { PopoverProps } from 'antd/lib/popover'; +import { ControlComponentProps } from '@superset-ui/chart-controls/lib/shared-controls/components/types'; + +export enum COMPARE_OPERATOR { Review comment: We have `COMPARE_OPERATOR` and `MULTIPLE_VALUE_COMPARATORS`. Maybe unify the naming? Change `COMPARE_OPERATOR` to `COMPARATOR`? Or `MULTIPLE_VALUE_COMPARATORS` to `MULTIPLE_VALUE_OPERATORS`? -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
