You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2021/07/13 07:00:21 UTC
[GitHub] [superset] kgabryje opened a new pull request #15651: feat(explore): Implement conditional formatting component
kgabryje opened a new pull request #15651:
URL: https://github.com/apache/superset/pull/15651
### SUMMARY
This PR implements conditional formatting component, which is going to be added to Pivot Table v2 and Table charts.
Features:
- 10 comparator functions (=, !=, <, >, <=, >=, < x <, <= x <, < x <=, <= x <=)
- 3 color schemes (green, yellow and red). Alpha channel is calculated dynamically based on a field's value compared to extreme values in data array used to construct the chart
- can add multiple formatters to a single column (e.g. "if count < 10 then red" and "if count > 20 then green")
- values validation for "between" comparators - left value must be smaller than the regiht value
- Column, Colour scheme and Operator have preselected default values when creating a new formatter (default is the first available option)
This PR does NOT add conditional formatting to any chart - it's a prerequisite for follow up PRs to superset-ui repo, which will add conditional formatting to Table and Pivot Table v2 charts.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
https://user-images.githubusercontent.com/15073128/125405423-03aba400-e3b8-11eb-8a6a-4d292b8f28e8.mov
### TESTING INSTRUCTIONS
Testing instructions to be added to follow up PRs in superset-ui
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] Has associated issue:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
CC: @junlincc @rusackas @michael-s-molina
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje merged pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
kgabryje merged pull request #15651:
URL: https://github.com/apache/superset/pull/15651
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] edited a comment on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] edited a comment on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (6a44b8d) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.05%`.
> The diff coverage is `33.92%`.
> :exclamation: Current head 6a44b8d differs from pull request most recent head fe57499. Consider uploading reports for the commit fe57499 to get more accurate results
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.94% -0.06%
==========================================
Files 978 981 +3
Lines 51486 51599 +113
Branches 6950 6975 +25
==========================================
+ Hits 39642 39703 +61
- Misses 11620 11672 +52
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.44% <33.92%> (-0.08%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.91% <22.91%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| [...c/views/CRUD/data/database/DatabaseModal/index.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhYmFzZS9EYXRhYmFzZU1vZGFsL2luZGV4LnRzeA==) | `47.57% <0.00%> (+0.15%)` | :arrow_up: |
| [superset-frontend/src/components/Select/Select.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3g=) | `12.13% <0.00%> (+12.13%)` | :arrow_up: |
| [superset-frontend/src/components/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvaW5kZXgudHM=) | `100.00% <0.00%> (+100.00%)` | :arrow_up: |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...fe57499](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] commented on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] commented on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (6a44b8d) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.05%`.
> The diff coverage is `33.92%`.
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.94% -0.06%
==========================================
Files 978 981 +3
Lines 51486 51599 +113
Branches 6950 6975 +25
==========================================
+ Hits 39642 39703 +61
- Misses 11620 11672 +52
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.44% <33.92%> (-0.08%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.91% <22.91%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| [...c/views/CRUD/data/database/DatabaseModal/index.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhYmFzZS9EYXRhYmFzZU1vZGFsL2luZGV4LnRzeA==) | `47.57% <0.00%> (+0.15%)` | :arrow_up: |
| [superset-frontend/src/components/Select/Select.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3g=) | `12.13% <0.00%> (+12.13%)` | :arrow_up: |
| [superset-frontend/src/components/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvaW5kZXgudHM=) | `100.00% <0.00%> (+100.00%)` | :arrow_up: |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...6a44b8d](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
michael-s-molina commented on a change in pull request #15651:
URL: https://github.com/apache/superset/pull/15651#discussion_r668765252
##########
File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
##########
@@ -0,0 +1,225 @@
+/**
+ * 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, useMemo } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { Form, FormItem } from 'src/components/Form';
+import { Select } from 'src/components';
+import { Col, InputNumber, Row } from 'src/common/components';
+import Button from 'src/components/Button';
+import {
+ COMPARATOR,
+ ConditionalFormattingConfig,
+ MULTIPLE_VALUE_COMPARATORS,
+} from './types';
+
+const FullWidthInputNumber = styled(InputNumber)`
+ width: 100%;
+`;
+
+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: COMPARATOR.GREATER_THAN, label: '>' },
+ { value: COMPARATOR.LESS_THAN, label: '<' },
+ { value: COMPARATOR.GREATER_OR_EQUAL, label: '≥' },
+ { value: COMPARATOR.LESS_OR_EQUAL, label: '≤' },
+ { value: COMPARATOR.EQUAL, label: '=' },
+ { value: COMPARATOR.NOT_EQUAL, label: '≠' },
+ { value: COMPARATOR.BETWEEN, label: '< x <' },
+ { value: COMPARATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' },
+ { value: COMPARATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' },
+ { value: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' },
+];
+
+export const FormattingPopoverContent = ({
+ config,
+ onChange,
+ columns = [],
+}: {
+ config?: ConditionalFormattingConfig;
+ onChange: (config: ConditionalFormattingConfig) => void;
+ columns: { label: string; value: string }[];
+}) => {
+ const isOperatorMultiValue = (operator?: COMPARATOR) =>
+ 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>
+ ),
+ [],
+ );
+
+ const targetValueLeftValidator = useCallback(
+ (rightValue?: number) => (_: any, value?: number) => {
+ if (!value || !rightValue || rightValue > value) {
+ return Promise.resolve();
+ }
+ return Promise.reject(
+ new Error(
+ t('This value should be smaller than the right target value'),
+ ),
+ );
+ },
+ [],
+ );
+
+ const targetValueRightValidator = useCallback(
+ (leftValue?: number) => (_: any, value?: number) => {
+ if (!value || !leftValue || leftValue < value) {
+ return Promise.resolve();
+ }
+ return Promise.reject(
+ new Error(
+ t('This value should be smaller than the right target value'),
+ ),
+ );
+ },
+ [],
+ );
+
+ return (
+ <div>
Review comment:
Is this `div` required?
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] michael-s-molina commented on a change in pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] edited a comment on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] edited a comment on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (fe57499) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.05%`.
> The diff coverage is `33.62%`.
> :exclamation: Current head fe57499 differs from pull request most recent head 849d3e3. Consider uploading reports for the commit 849d3e3 to get more accurate results
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.94% -0.06%
==========================================
Files 978 981 +3
Lines 51486 51600 +114
Branches 6950 6976 +26
==========================================
+ Hits 39642 39703 +61
- Misses 11620 11673 +53
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.43% <33.62%> (-0.09%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.68% <22.68%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| [...c/views/CRUD/data/database/DatabaseModal/index.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhYmFzZS9EYXRhYmFzZU1vZGFsL2luZGV4LnRzeA==) | `47.57% <0.00%> (+0.15%)` | :arrow_up: |
| [superset-frontend/src/components/Select/Select.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3g=) | `12.13% <0.00%> (+12.13%)` | :arrow_up: |
| [superset-frontend/src/components/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvaW5kZXgudHM=) | `100.00% <0.00%> (+100.00%)` | :arrow_up: |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...849d3e3](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] edited a comment on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] edited a comment on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (fe57499) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.05%`.
> The diff coverage is `33.62%`.
> :exclamation: Current head fe57499 differs from pull request most recent head f2706ac. Consider uploading reports for the commit f2706ac to get more accurate results
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.94% -0.06%
==========================================
Files 978 981 +3
Lines 51486 51600 +114
Branches 6950 6976 +26
==========================================
+ Hits 39642 39703 +61
- Misses 11620 11673 +53
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.43% <33.62%> (-0.09%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.68% <22.68%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| [...c/views/CRUD/data/database/DatabaseModal/index.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhYmFzZS9EYXRhYmFzZU1vZGFsL2luZGV4LnRzeA==) | `47.57% <0.00%> (+0.15%)` | :arrow_up: |
| [superset-frontend/src/components/Select/Select.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3g=) | `12.13% <0.00%> (+12.13%)` | :arrow_up: |
| [superset-frontend/src/components/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvaW5kZXgudHM=) | `100.00% <0.00%> (+100.00%)` | :arrow_up: |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...f2706ac](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on a change in pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
kgabryje commented on a change in pull request #15651:
URL: https://github.com/apache/superset/pull/15651#discussion_r668787818
##########
File path: superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
##########
@@ -0,0 +1,225 @@
+/**
+ * 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, useMemo } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { Form, FormItem } from 'src/components/Form';
+import { Select } from 'src/components';
+import { Col, InputNumber, Row } from 'src/common/components';
+import Button from 'src/components/Button';
+import {
+ COMPARATOR,
+ ConditionalFormattingConfig,
+ MULTIPLE_VALUE_COMPARATORS,
+} from './types';
+
+const FullWidthInputNumber = styled(InputNumber)`
+ width: 100%;
+`;
+
+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: COMPARATOR.GREATER_THAN, label: '>' },
+ { value: COMPARATOR.LESS_THAN, label: '<' },
+ { value: COMPARATOR.GREATER_OR_EQUAL, label: '≥' },
+ { value: COMPARATOR.LESS_OR_EQUAL, label: '≤' },
+ { value: COMPARATOR.EQUAL, label: '=' },
+ { value: COMPARATOR.NOT_EQUAL, label: '≠' },
+ { value: COMPARATOR.BETWEEN, label: '< x <' },
+ { value: COMPARATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' },
+ { value: COMPARATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' },
+ { value: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' },
+];
+
+export const FormattingPopoverContent = ({
+ config,
+ onChange,
+ columns = [],
+}: {
+ config?: ConditionalFormattingConfig;
+ onChange: (config: ConditionalFormattingConfig) => void;
+ columns: { label: string; value: string }[];
+}) => {
+ const isOperatorMultiValue = (operator?: COMPARATOR) =>
+ 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>
+ ),
+ [],
+ );
+
+ const targetValueLeftValidator = useCallback(
+ (rightValue?: number) => (_: any, value?: number) => {
+ if (!value || !rightValue || rightValue > value) {
+ return Promise.resolve();
+ }
+ return Promise.reject(
+ new Error(
+ t('This value should be smaller than the right target value'),
+ ),
+ );
+ },
+ [],
+ );
+
+ const targetValueRightValidator = useCallback(
+ (leftValue?: number) => (_: any, value?: number) => {
+ if (!value || !leftValue || leftValue < value) {
+ return Promise.resolve();
+ }
+ return Promise.reject(
+ new Error(
+ t('This value should be smaller than the right target value'),
+ ),
+ );
+ },
+ [],
+ );
+
+ return (
+ <div>
Review comment:
Nope, it was a leftover. Removed 👌
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
kgabryje commented on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-879083248
@michael-s-molina Thank you for comments, I applied all of them. Would you mind taking another look?
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] edited a comment on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] edited a comment on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (f2706ac) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.04%`.
> The diff coverage is `37.19%`.
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.95% -0.05%
==========================================
Files 978 983 +5
Lines 51486 51614 +128
Branches 6950 6976 +26
==========================================
+ Hits 39642 39717 +75
- Misses 11620 11673 +53
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.45% <37.19%> (-0.07%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.41% <22.41%> (ø)` | |
| [...onalFormattingControl/FormattingPopoverContent.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0Zvcm1hdHRpbmdQb3BvdmVyQ29udGVudC50c3g=) | `33.33% <33.33%> (ø)` | |
| [...ConditionalFormattingControl/FormattingPopover.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0Zvcm1hdHRpbmdQb3BvdmVyLnRzeA==) | `36.36% <36.36%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| ... and [6 more](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...f2706ac](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] edited a comment on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] edited a comment on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (fe57499) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.05%`.
> The diff coverage is `33.62%`.
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.94% -0.06%
==========================================
Files 978 981 +3
Lines 51486 51600 +114
Branches 6950 6976 +26
==========================================
+ Hits 39642 39703 +61
- Misses 11620 11673 +53
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.43% <33.62%> (-0.09%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.68% <22.68%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| [...c/views/CRUD/data/database/DatabaseModal/index.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhYmFzZS9EYXRhYmFzZU1vZGFsL2luZGV4LnRzeA==) | `47.57% <0.00%> (+0.15%)` | :arrow_up: |
| [superset-frontend/src/components/Select/Select.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3g=) | `12.13% <0.00%> (+12.13%)` | :arrow_up: |
| [superset-frontend/src/components/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvaW5kZXgudHM=) | `100.00% <0.00%> (+100.00%)` | :arrow_up: |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...fe57499](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] edited a comment on pull request #15651: feat(explore): Implement conditional formatting component
Posted by GitBox <gi...@apache.org>.
codecov[bot] edited a comment on pull request #15651:
URL: https://github.com/apache/superset/pull/15651#issuecomment-878846929
# [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#15651](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (fe57499) into [master](https://codecov.io/gh/apache/superset/commit/34542db3b615ff556281f80410f322f41f5a97a6?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (34542db) will **decrease** coverage by `0.05%`.
> The diff coverage is `33.62%`.
> :exclamation: Current head fe57499 differs from pull request most recent head f86ef1d. Consider uploading reports for the commit f86ef1d to get more accurate results
[](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
```diff
@@ Coverage Diff @@
## master #15651 +/- ##
==========================================
- Coverage 76.99% 76.94% -0.06%
==========================================
Files 978 981 +3
Lines 51486 51600 +114
Branches 6950 6976 +26
==========================================
+ Hits 39642 39703 +61
- Misses 11620 11673 +53
Partials 224 224
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `71.43% <33.62%> (-0.09%)` | :arrow_down: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...-frontend/src/explore/components/controls/index.js](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9pbmRleC5qcw==) | `100.00% <ø> (ø)` | |
| [...FormattingControl/ConditionalFormattingControl.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL0NvbmRpdGlvbmFsRm9ybWF0dGluZ0NvbnRyb2wudHN4) | `22.68% <22.68%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [...nts/controls/ConditionalFormattingControl/types.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9Db25kaXRpb25hbEZvcm1hdHRpbmdDb250cm9sL3R5cGVzLnRz) | `100.00% <100.00%> (ø)` | |
| [...c/views/CRUD/data/database/DatabaseModal/index.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3ZpZXdzL0NSVUQvZGF0YS9kYXRhYmFzZS9EYXRhYmFzZU1vZGFsL2luZGV4LnRzeA==) | `47.57% <0.00%> (+0.15%)` | :arrow_up: |
| [superset-frontend/src/components/Select/Select.tsx](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50c3g=) | `12.13% <0.00%> (+12.13%)` | :arrow_up: |
| [superset-frontend/src/components/index.ts](https://codecov.io/gh/apache/superset/pull/15651/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvaW5kZXgudHM=) | `100.00% <0.00%> (+100.00%)` | :arrow_up: |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [34542db...f86ef1d](https://codecov.io/gh/apache/superset/pull/15651?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
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: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org