mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[dashboard] fix time granularity display values (#8806)
* [dashboard] fix time granularity display values * fix review comments
This commit is contained in:
parent
562aeab1aa
commit
a96eae46af
@ -26,6 +26,7 @@ import { FILTER_INDICATORS_DISPLAY_LENGTH } from '../util/constants';
|
||||
import { getChartIdsInFilterScope } from '../util/activeDashboardFilters';
|
||||
import { getDashboardFilterKey } from '../util/getDashboardFilterKey';
|
||||
import { getFilterColorMap } from '../util/dashboardFiltersColorMap';
|
||||
import { TIME_FILTER_MAP } from '../../visualizations/FilterBox/FilterBox';
|
||||
|
||||
const propTypes = {
|
||||
// from props
|
||||
@ -34,6 +35,7 @@ const propTypes = {
|
||||
chartStatus: PropTypes.string,
|
||||
|
||||
// from redux
|
||||
datasources: PropTypes.object.isRequired,
|
||||
setDirectPathToChild: PropTypes.func.isRequired,
|
||||
filterFieldOnFocus: PropTypes.object.isRequired,
|
||||
};
|
||||
@ -42,6 +44,11 @@ const defaultProps = {
|
||||
chartStatus: 'loading',
|
||||
};
|
||||
|
||||
const TIME_GRANULARITY_FIELDS = [
|
||||
TIME_FILTER_MAP.granularity,
|
||||
TIME_FILTER_MAP.time_grain_sqla,
|
||||
];
|
||||
|
||||
function sortByIndicatorLabel(indicator1, indicator2) {
|
||||
const s1 = (indicator1.label || indicator1.name).toLowerCase();
|
||||
const s2 = (indicator2.label || indicator2.name).toLowerCase();
|
||||
@ -56,6 +63,7 @@ function sortByIndicatorLabel(indicator1, indicator2) {
|
||||
export default class FilterIndicatorsContainer extends React.PureComponent {
|
||||
getFilterIndicators() {
|
||||
const {
|
||||
datasources = {},
|
||||
dashboardFilters,
|
||||
chartId: currentChartId,
|
||||
filterFieldOnFocus,
|
||||
@ -66,12 +74,12 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
|
||||
}
|
||||
|
||||
const dashboardFiltersColorMap = getFilterColorMap();
|
||||
|
||||
const sortIndicatorsByEmptiness = Object.values(dashboardFilters).reduce(
|
||||
(indicators, dashboardFilter) => {
|
||||
const {
|
||||
chartId,
|
||||
componentId,
|
||||
datasourceId,
|
||||
directPathToFilter,
|
||||
isDateFilter,
|
||||
isInstantFilter,
|
||||
@ -79,6 +87,7 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
|
||||
labels,
|
||||
scopes,
|
||||
} = dashboardFilter;
|
||||
const datasource = datasources[datasourceId] || {};
|
||||
|
||||
if (currentChartId !== chartId) {
|
||||
Object.keys(columns)
|
||||
@ -111,6 +120,25 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
|
||||
name === filterFieldOnFocus.column,
|
||||
};
|
||||
|
||||
// map time granularity value to datasource configure
|
||||
if (isDateFilter && TIME_GRANULARITY_FIELDS.includes(name)) {
|
||||
const timeGranularityConfig =
|
||||
(name === TIME_FILTER_MAP.time_grain_sqla
|
||||
? datasource.time_grain_sqla
|
||||
: datasource.granularity) || [];
|
||||
const timeGranularityDisplayMapping = timeGranularityConfig.reduce(
|
||||
(map, [key, value]) => ({
|
||||
...map,
|
||||
[key]: value,
|
||||
}),
|
||||
{},
|
||||
);
|
||||
|
||||
indicator.values = indicator.values.map(
|
||||
value => timeGranularityDisplayMapping[value] || value,
|
||||
);
|
||||
}
|
||||
|
||||
if (isEmpty(indicator.values)) {
|
||||
indicators[1].push(indicator);
|
||||
} else {
|
||||
|
@ -23,13 +23,14 @@ import FilterIndicatorsContainer from '../components/FilterIndicatorsContainer';
|
||||
import { setDirectPathToChild } from '../actions/dashboardState';
|
||||
|
||||
function mapStateToProps(
|
||||
{ dashboardState, dashboardFilters, dashboardLayout, charts },
|
||||
{ datasources, dashboardState, dashboardFilters, dashboardLayout, charts },
|
||||
ownProps,
|
||||
) {
|
||||
const chartId = ownProps.chartId;
|
||||
const chartStatus = (charts[chartId] || {}).chartStatus;
|
||||
|
||||
return {
|
||||
datasources,
|
||||
dashboardFilters,
|
||||
chartId,
|
||||
chartStatus,
|
||||
|
@ -41,6 +41,7 @@ export const dashboardFilter = {
|
||||
chartId: null,
|
||||
componentId: null,
|
||||
filterName: null,
|
||||
datasourceId: null,
|
||||
directPathToFilter: [],
|
||||
isDateFilter: false,
|
||||
isInstantFilter: true,
|
||||
@ -71,6 +72,7 @@ export default function dashboardFiltersReducer(dashboardFilters = {}, action) {
|
||||
...dashboardFilter,
|
||||
chartId,
|
||||
componentId: component.id,
|
||||
datasourceId: form_data.datasource,
|
||||
filterName: component.meta.sliceName,
|
||||
directPathToFilter,
|
||||
columns,
|
||||
|
@ -223,6 +223,7 @@ export default function(bootstrapData) {
|
||||
...dashboardFilter,
|
||||
chartId: key,
|
||||
componentId,
|
||||
datasourceId: slice.form_data.datasource,
|
||||
filterName: slice.slice_name,
|
||||
directPathToFilter,
|
||||
columns,
|
||||
|
@ -17,11 +17,8 @@
|
||||
* under the License.
|
||||
*/
|
||||
/* eslint-disable camelcase */
|
||||
import {
|
||||
TIME_FILTER_MAP,
|
||||
TIME_RANGE,
|
||||
FILTER_LABELS,
|
||||
} from '../../visualizations/FilterBox/FilterBox';
|
||||
import { TIME_FILTER_MAP } from '../../visualizations/FilterBox/FilterBox';
|
||||
import { TIME_FILTER_LABELS } from '../../explore/constants';
|
||||
|
||||
export default function getFilterConfigsFromFormdata(form_data = {}) {
|
||||
const {
|
||||
@ -58,7 +55,13 @@ export default function getFilterConfigsFromFormdata(form_data = {}) {
|
||||
};
|
||||
const updatedLabels = {
|
||||
...configs.labels,
|
||||
[TIME_FILTER_MAP.time_range]: FILTER_LABELS[TIME_RANGE],
|
||||
...Object.entries(TIME_FILTER_MAP).reduce(
|
||||
(map, [key, value]) => ({
|
||||
...map,
|
||||
[value]: TIME_FILTER_LABELS[key],
|
||||
}),
|
||||
{},
|
||||
),
|
||||
};
|
||||
|
||||
if (show_sqla_time_granularity) {
|
||||
|
@ -87,6 +87,7 @@ export const dashboardFilterPropShape = PropTypes.shape({
|
||||
chartId: PropTypes.number.isRequired,
|
||||
componentId: PropTypes.string.isRequired,
|
||||
filterName: PropTypes.string.isRequired,
|
||||
datasourceId: PropTypes.string.isRequired,
|
||||
directPathToFilter: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
isDateFilter: PropTypes.bool.isRequired,
|
||||
isInstantFilter: PropTypes.bool.isRequired,
|
||||
|
@ -16,6 +16,8 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { t } from '@superset-ui/translation';
|
||||
|
||||
export const AGGREGATES = {
|
||||
AVG: 'AVG',
|
||||
COUNT: 'COUNT ',
|
||||
@ -57,3 +59,11 @@ export const sqlaAutoGeneratedMetricRegex = /^(LONG|DOUBLE|FLOAT)?(SUM|AVG|MAX|M
|
||||
export const druidAutoGeneratedMetricRegex = /^(LONG|DOUBLE|FLOAT)?(SUM|MAX|MIN|COUNT)\([A-Z0-9_."]*\)$/i;
|
||||
|
||||
export const EXPLORE_ONLY_VIZ_TYPE = ['separator', 'markup'];
|
||||
|
||||
export const TIME_FILTER_LABELS = {
|
||||
time_range: t('Time Range'),
|
||||
granularity_sqla: t('Time Column'),
|
||||
time_grain_sqla: t('Time Grain'),
|
||||
druid_time_origin: t('Origin'),
|
||||
granularity: t('Time Granularity'),
|
||||
};
|
||||
|
@ -72,6 +72,7 @@ import * as v from './validators';
|
||||
import ColumnOption from '../components/ColumnOption';
|
||||
import OptionDescription from '../components/OptionDescription';
|
||||
import { DEFAULT_VIEWPORT } from '../explore/components/controls/ViewportControl';
|
||||
import { TIME_FILTER_LABELS } from './constants';
|
||||
|
||||
const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
|
||||
const sequentialSchemeRegistry = getSequentialSchemeRegistry();
|
||||
@ -814,7 +815,7 @@ export const controls = {
|
||||
druid_time_origin: {
|
||||
type: 'SelectControl',
|
||||
freeForm: true,
|
||||
label: t('Origin'),
|
||||
label: TIME_FILTER_LABELS.druid_time_origin,
|
||||
choices: [
|
||||
['', 'default'],
|
||||
['now', 'now'],
|
||||
@ -865,7 +866,7 @@ export const controls = {
|
||||
granularity: {
|
||||
type: 'SelectControl',
|
||||
freeForm: true,
|
||||
label: t('Time Granularity'),
|
||||
label: TIME_FILTER_LABELS.granularity,
|
||||
default: 'one day',
|
||||
choices: [
|
||||
[null, 'all'],
|
||||
@ -953,7 +954,7 @@ export const controls = {
|
||||
|
||||
granularity_sqla: {
|
||||
type: 'SelectControl',
|
||||
label: t('Time Column'),
|
||||
label: TIME_FILTER_LABELS.granularity_sqla,
|
||||
description: t(
|
||||
'The time column for the visualization. Note that you ' +
|
||||
'can define arbitrary expression that return a DATETIME ' +
|
||||
@ -983,7 +984,7 @@ export const controls = {
|
||||
|
||||
time_grain_sqla: {
|
||||
type: 'SelectControl',
|
||||
label: t('Time Grain'),
|
||||
label: TIME_FILTER_LABELS.time_grain_sqla,
|
||||
default: 'P1D',
|
||||
description: t(
|
||||
'The time granularity for the visualization. This ' +
|
||||
@ -1025,7 +1026,7 @@ export const controls = {
|
||||
time_range: {
|
||||
type: 'DateFilterControl',
|
||||
freeForm: true,
|
||||
label: t('Time range'),
|
||||
label: TIME_FILTER_LABELS.time_range,
|
||||
default: t('Last week'),
|
||||
description: t(
|
||||
'The time range for the visualization. All relative times, e.g. "Last month", ' +
|
||||
|
@ -31,6 +31,7 @@ import OnPasteSelect from '../../components/OnPasteSelect';
|
||||
import VirtualizedRendererWrap from '../../components/VirtualizedRendererWrap';
|
||||
import { getDashboardFilterKey } from '../../dashboard/util/getDashboardFilterKey';
|
||||
import { getFilterColorMap } from '../../dashboard/util/dashboardFiltersColorMap';
|
||||
import { TIME_FILTER_LABELS } from '../../explore/constants';
|
||||
import FilterBadgeIcon from '../../components/FilterBadgeIcon';
|
||||
|
||||
import './FilterBox.less';
|
||||
@ -46,9 +47,6 @@ export const TIME_FILTER_MAP = {
|
||||
|
||||
// a shortcut to a map key, used by many components
|
||||
export const TIME_RANGE = TIME_FILTER_MAP.time_range;
|
||||
export const FILTER_LABELS = {
|
||||
[TIME_RANGE]: 'Time range',
|
||||
};
|
||||
|
||||
const propTypes = {
|
||||
chartId: PropTypes.number.isRequired,
|
||||
@ -165,7 +163,7 @@ class FilterBox extends React.Component {
|
||||
|
||||
renderDateFilter() {
|
||||
const { showDateFilter, chartId } = this.props;
|
||||
const label = t(FILTER_LABELS[TIME_RANGE]);
|
||||
const label = TIME_FILTER_LABELS.time_range;
|
||||
if (showDateFilter) {
|
||||
return (
|
||||
<div className="row space-1">
|
||||
|
Loading…
Reference in New Issue
Block a user