-
Notifications
You must be signed in to change notification settings - Fork 12.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[explore] improve metric(s) and groupby(s) controls (#2921)
* [explore] improve metric(s) and groupby(s) controls - surface verbose_name, description & expression in controls - [table viz] surface verbose name in table header * Fixing tests * Addressing comments * Fixing tests (once more)
- Loading branch information
1 parent
34f381b
commit 16141ec
Showing
14 changed files
with
275 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; | ||
|
|
||
| const propTypes = { | ||
| column: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| export default function ColumnOption({ column }) { | ||
| return ( | ||
| <span> | ||
| <span className="m-r-5 option-label"> | ||
| {column.verbose_name || column.column_name} | ||
| </span> | ||
| {column.description && | ||
| <InfoTooltipWithTrigger | ||
| className="m-r-5 text-muted" | ||
| icon="info" | ||
| tooltip={column.description} | ||
| label={`descr-${column.column_name}`} | ||
| /> | ||
| } | ||
| {column.expression && column.expression !== column.column_name && | ||
| <InfoTooltipWithTrigger | ||
| className="m-r-5 text-muted" | ||
| icon="question-circle-o" | ||
| tooltip={column.expression} | ||
| label={`expr-${column.column_name}`} | ||
| /> | ||
| } | ||
| </span>); | ||
| } | ||
| ColumnOption.propTypes = propTypes; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import InfoTooltipWithTrigger from './InfoTooltipWithTrigger'; | ||
|
|
||
| const propTypes = { | ||
| metric: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| export default function MetricOption({ metric }) { | ||
| return ( | ||
| <div> | ||
| <span className="m-r-5 option-label"> | ||
| {metric.verbose_name || metric.metric_name} | ||
| </span> | ||
| {metric.description && | ||
| <InfoTooltipWithTrigger | ||
| className="m-r-5 text-muted" | ||
| icon="info" | ||
| tooltip={metric.description} | ||
| label={`descr-${metric.metric_name}`} | ||
| /> | ||
| } | ||
| <InfoTooltipWithTrigger | ||
| className="m-r-5 text-muted" | ||
| icon="question-circle-o" | ||
| tooltip={metric.expression} | ||
| label={`expr-${metric.metric_name}`} | ||
| /> | ||
| </div>); | ||
| } | ||
| MetricOption.propTypes = propTypes; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
superset/assets/spec/javascripts/components/ColumnOption_spec.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import { expect } from 'chai'; | ||
| import { describe, it } from 'mocha'; | ||
| import { shallow } from 'enzyme'; | ||
|
|
||
| import ColumnOption from '../../../javascripts/components/ColumnOption'; | ||
| import InfoTooltipWithTrigger from '../../../javascripts/components/InfoTooltipWithTrigger'; | ||
|
|
||
| describe('ColumnOption', () => { | ||
| const defaultProps = { | ||
| column: { | ||
| column_name: 'foo', | ||
| verbose_name: 'Foo', | ||
| expression: 'SUM(foo)', | ||
| description: 'Foo is the greatest column of all', | ||
| }, | ||
| }; | ||
|
|
||
| let wrapper; | ||
| let props; | ||
| const factory = o => <ColumnOption {...o} />; | ||
| beforeEach(() => { | ||
| wrapper = shallow(factory(defaultProps)); | ||
| props = Object.assign({}, defaultProps); | ||
| }); | ||
| it('is a valid element', () => { | ||
| expect(React.isValidElement(<ColumnOption {...defaultProps} />)).to.equal(true); | ||
| }); | ||
| it('shows a label with verbose_name', () => { | ||
| const lbl = wrapper.find('.option-label'); | ||
| expect(lbl).to.have.length(1); | ||
| expect(lbl.first().text()).to.equal('Foo'); | ||
| }); | ||
| it('shows 2 InfoTooltipWithTrigger', () => { | ||
| expect(wrapper.find(InfoTooltipWithTrigger)).to.have.length(2); | ||
| }); | ||
| it('shows only 1 InfoTooltipWithTrigger when no descr', () => { | ||
| props.column.description = null; | ||
| wrapper = shallow(factory(props)); | ||
| expect(wrapper.find(InfoTooltipWithTrigger)).to.have.length(1); | ||
| }); | ||
| it('shows a label with column_name when no verbose_name', () => { | ||
| props.column.verbose_name = null; | ||
| wrapper = shallow(factory(props)); | ||
| expect(wrapper.find('.option-label').first().text()).to.equal('foo'); | ||
| }); | ||
| }); |
Oops, something went wrong.