mirror of https://github.com/apache/superset.git
chore: make control panel sub sections look better (#24736)
This commit is contained in:
parent
9b6ed315f8
commit
22a0fe555c
|
@ -0,0 +1,26 @@
|
||||||
|
/**
|
||||||
|
* 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 { styled } from '@superset-ui/core';
|
||||||
|
|
||||||
|
export const ControlSubSectionHeader = styled.div`
|
||||||
|
font-weight: ${({ theme }) => theme.typography.weights.bold};
|
||||||
|
font-size: ${({ theme }) => theme.typography.sizes.s};
|
||||||
|
margin-bottom: ${({ theme }) => theme.gridUnit}px;
|
||||||
|
`;
|
||||||
|
export default ControlSubSectionHeader;
|
|
@ -29,6 +29,7 @@ export * from './components/InfoTooltipWithTrigger';
|
||||||
export * from './components/ColumnOption';
|
export * from './components/ColumnOption';
|
||||||
export * from './components/ColumnTypeLabel/ColumnTypeLabel';
|
export * from './components/ColumnTypeLabel/ColumnTypeLabel';
|
||||||
export * from './components/MetricOption';
|
export * from './components/MetricOption';
|
||||||
|
export * from './components/ControlSubSectionHeader';
|
||||||
|
|
||||||
export * from './shared-controls';
|
export * from './shared-controls';
|
||||||
export * from './types';
|
export * from './types';
|
||||||
|
|
|
@ -18,6 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t, RollingType, ComparisonType } from '@superset-ui/core';
|
import { t, RollingType, ComparisonType } from '@superset-ui/core';
|
||||||
|
|
||||||
|
import { ControlSubSectionHeader } from '../components/ControlSubSectionHeader';
|
||||||
import { ControlPanelSectionConfig } from '../types';
|
import { ControlPanelSectionConfig } from '../types';
|
||||||
import { formatSelectOptions } from '../utils';
|
import { formatSelectOptions } from '../utils';
|
||||||
|
|
||||||
|
@ -30,7 +32,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
|
||||||
'of query results',
|
'of query results',
|
||||||
),
|
),
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('Rolling window')}</div>],
|
[<ControlSubSectionHeader>{t('Rolling window')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'rolling_type',
|
name: 'rolling_type',
|
||||||
|
@ -99,7 +101,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Time comparison')}</div>],
|
[<ControlSubSectionHeader>{t('Time comparison')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'time_compare',
|
name: 'time_compare',
|
||||||
|
@ -150,7 +152,7 @@ export const advancedAnalyticsControls: ControlPanelSectionConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Resample')}</div>],
|
[<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'resample_rule',
|
name: 'resample_rule',
|
||||||
|
|
|
@ -18,6 +18,8 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
|
|
||||||
|
import { ControlSubSectionHeader } from '../components/ControlSubSectionHeader';
|
||||||
import { ControlPanelSectionConfig } from '../types';
|
import { ControlPanelSectionConfig } from '../types';
|
||||||
import { formatSelectOptions } from '../utils';
|
import { formatSelectOptions } from '../utils';
|
||||||
|
|
||||||
|
@ -33,7 +35,7 @@ export const titleControls: ControlPanelSectionConfig = {
|
||||||
tabOverride: 'customize',
|
tabOverride: 'customize',
|
||||||
expanded: true,
|
expanded: true,
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'x_axis_title',
|
name: 'x_axis_title',
|
||||||
|
@ -61,7 +63,7 @@ export const titleControls: ControlPanelSectionConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'y_axis_title',
|
name: 'y_axis_title',
|
||||||
|
@ -81,7 +83,7 @@ export const titleControls: ControlPanelSectionConfig = {
|
||||||
type: 'SelectControl',
|
type: 'SelectControl',
|
||||||
freeForm: true,
|
freeForm: true,
|
||||||
clearable: true,
|
clearable: true,
|
||||||
label: t('Y AXIS TITLE MARGIN'),
|
label: t('Y Axis Title Margin'),
|
||||||
renderTrigger: true,
|
renderTrigger: true,
|
||||||
default: TITLE_MARGIN_OPTIONS[0],
|
default: TITLE_MARGIN_OPTIONS[0],
|
||||||
choices: formatSelectOptions(TITLE_MARGIN_OPTIONS),
|
choices: formatSelectOptions(TITLE_MARGIN_OPTIONS),
|
||||||
|
@ -96,7 +98,7 @@ export const titleControls: ControlPanelSectionConfig = {
|
||||||
type: 'SelectControl',
|
type: 'SelectControl',
|
||||||
freeForm: true,
|
freeForm: true,
|
||||||
clearable: false,
|
clearable: false,
|
||||||
label: t('Y AXIS TITLE POSITION'),
|
label: t('Y Axis Title Position'),
|
||||||
renderTrigger: true,
|
renderTrigger: true,
|
||||||
default: TITLE_POSITION_OPTIONS[0][0],
|
default: TITLE_POSITION_OPTIONS[0][0],
|
||||||
choices: TITLE_POSITION_OPTIONS,
|
choices: TITLE_POSITION_OPTIONS,
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t, validateNonEmpty } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ColumnMeta,
|
ColumnMeta,
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
D3_TIME_FORMAT_OPTIONS,
|
D3_TIME_FORMAT_OPTIONS,
|
||||||
|
@ -241,7 +242,11 @@ const config: ControlPanelConfig = {
|
||||||
),
|
),
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Rolling Window')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Rolling Window')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'rolling_type',
|
name: 'rolling_type',
|
||||||
|
@ -293,7 +298,11 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Time Comparison')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Time Comparison')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'time_compare',
|
name: 'time_compare',
|
||||||
|
@ -342,7 +351,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Resample')}</div>],
|
[<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'resample_rule',
|
name: 'resample_rule',
|
||||||
|
|
|
@ -20,6 +20,7 @@ import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
D3_TIME_FORMAT_OPTIONS,
|
D3_TIME_FORMAT_OPTIONS,
|
||||||
|
@ -123,7 +124,11 @@ const config: ControlPanelConfig = {
|
||||||
),
|
),
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Rolling Window')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Rolling Window')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'rolling_type',
|
name: 'rolling_type',
|
||||||
|
@ -175,7 +180,11 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Time Comparison')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Time Comparison')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'time_compare',
|
name: 'time_compare',
|
||||||
|
@ -224,7 +233,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Resample')}</div>],
|
[<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'resample_rule',
|
name: 'resample_rule',
|
||||||
|
|
|
@ -22,6 +22,7 @@ import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelSectionConfig,
|
ControlPanelSectionConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
CustomControlItem,
|
CustomControlItem,
|
||||||
D3_TIME_FORMAT_OPTIONS,
|
D3_TIME_FORMAT_OPTIONS,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
|
@ -390,7 +391,11 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
|
||||||
'of query results',
|
'of query results',
|
||||||
),
|
),
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('Rolling Window')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Rolling Window')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'rolling_type',
|
name: 'rolling_type',
|
||||||
|
@ -443,7 +448,11 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Time Comparison')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Time Comparison')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'time_compare',
|
name: 'time_compare',
|
||||||
|
@ -494,7 +503,7 @@ export const timeSeriesSection: ControlPanelSectionConfig[] = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Resample')}</div>],
|
[<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'resample_rule',
|
name: 'resample_rule',
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
import { hasGenericChartAxes, smartDateFormatter, t } from '@superset-ui/core';
|
import { hasGenericChartAxes, smartDateFormatter, t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_TIME_FORMAT_OPTIONS,
|
D3_TIME_FORMAT_OPTIONS,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
|
@ -170,7 +171,11 @@ const config: ControlPanelConfig = {
|
||||||
expanded: false,
|
expanded: false,
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Rolling Window')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Rolling Window')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'rolling_type',
|
name: 'rolling_type',
|
||||||
|
@ -223,7 +228,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Resample')}</div>],
|
[<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'resample_rule',
|
name: 'resample_rule',
|
||||||
|
|
|
@ -20,6 +20,7 @@ import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
||||||
sections,
|
sections,
|
||||||
|
@ -77,7 +78,7 @@ const config: ControlPanelConfig = {
|
||||||
['color_scheme'],
|
['color_scheme'],
|
||||||
...funnelLegendSection,
|
...funnelLegendSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Labels')}</div>],
|
[<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'label_type',
|
name: 'label_type',
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
sharedControls,
|
sharedControls,
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
sections,
|
sections,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
|
@ -73,7 +74,7 @@ const config: ControlPanelConfig = {
|
||||||
label: t('Chart Options'),
|
label: t('Chart Options'),
|
||||||
expanded: true,
|
expanded: true,
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('General')}</div>],
|
[<ControlSubSectionHeader>{t('General')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'min_val',
|
name: 'min_val',
|
||||||
|
@ -193,7 +194,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'show_axis_tick',
|
name: 'show_axis_tick',
|
||||||
|
@ -232,7 +233,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Progress')}</div>],
|
[<ControlSubSectionHeader>{t('Progress')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'show_progress',
|
name: 'show_progress',
|
||||||
|
@ -273,7 +274,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Intervals')}</div>],
|
[<ControlSubSectionHeader>{t('Intervals')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'intervals',
|
name: 'intervals',
|
||||||
|
|
|
@ -20,6 +20,7 @@ import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
sharedControls,
|
sharedControls,
|
||||||
|
@ -99,7 +100,7 @@ const controlPanel: ControlPanelConfig = {
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
['color_scheme'],
|
['color_scheme'],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('Layout')}</div>],
|
[<ControlSubSectionHeader>{t('Layout')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'layout',
|
name: 'layout',
|
||||||
|
|
|
@ -23,6 +23,7 @@ import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelSectionConfig,
|
ControlPanelSectionConfig,
|
||||||
ControlSetRow,
|
ControlSetRow,
|
||||||
|
ControlSubSectionHeader,
|
||||||
CustomControlItem,
|
CustomControlItem,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
|
@ -128,7 +129,7 @@ function createCustomizeSection(
|
||||||
controlSuffix: string,
|
controlSuffix: string,
|
||||||
): ControlSetRow[] {
|
): ControlSetRow[] {
|
||||||
return [
|
return [
|
||||||
[<div className="section-header">{label}</div>],
|
[<ControlSubSectionHeader>{label}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: `seriesType${controlSuffix}`,
|
name: `seriesType${controlSuffix}`,
|
||||||
|
@ -311,7 +312,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
['x_axis_time_format'],
|
['x_axis_time_format'],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
@ -335,7 +336,7 @@ const config: ControlPanelConfig = {
|
||||||
],
|
],
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'minorSplitLine',
|
name: 'minorSplitLine',
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { ensureIsInt, t, validateNonEmpty } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
|
@ -90,7 +91,7 @@ const config: ControlPanelConfig = {
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Labels')}</div>],
|
[<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'label_type',
|
name: 'label_type',
|
||||||
|
@ -195,7 +196,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Pie shape')}</div>],
|
[<ControlSubSectionHeader>{t('Pie shape')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'outerRadius',
|
name: 'outerRadius',
|
||||||
|
|
|
@ -26,6 +26,7 @@ import {
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
|
@ -85,7 +86,7 @@ const config: ControlPanelConfig = {
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
['color_scheme'],
|
['color_scheme'],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('Labels')}</div>],
|
[<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'show_labels',
|
name: 'show_labels',
|
||||||
|
@ -156,7 +157,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Radar')}</div>],
|
[<ControlSubSectionHeader>{t('Radar')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'column_config',
|
name: 'column_config',
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
|
@ -64,7 +65,7 @@ const config: ControlPanelConfig = {
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
['color_scheme'],
|
['color_scheme'],
|
||||||
['linear_color_scheme'],
|
['linear_color_scheme'],
|
||||||
[<div className="section-header">{t('Labels')}</div>],
|
[<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'show_labels',
|
name: 'show_labels',
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_TIME_FORMAT_DOCS,
|
D3_TIME_FORMAT_DOCS,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
|
@ -179,7 +180,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'x_axis_time_format',
|
name: 'x_axis_time_format',
|
||||||
|
@ -212,7 +213,7 @@ const config: ControlPanelConfig = {
|
||||||
],
|
],
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
['y_axis_format'],
|
['y_axis_format'],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
|
|
@ -23,6 +23,7 @@ import {
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
ControlSetRow,
|
ControlSetRow,
|
||||||
ControlStateMapping,
|
ControlStateMapping,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_TIME_FORMAT_DOCS,
|
D3_TIME_FORMAT_DOCS,
|
||||||
formatSelectOptions,
|
formatSelectOptions,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
|
@ -292,9 +293,9 @@ const config: ControlPanelConfig = {
|
||||||
tabOverride: 'customize',
|
tabOverride: 'customize',
|
||||||
expanded: true,
|
expanded: true,
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
...createAxisTitleControl('x'),
|
...createAxisTitleControl('x'),
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
...createAxisTitleControl('y'),
|
...createAxisTitleControl('y'),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -318,10 +319,10 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
...createAxisControl('x'),
|
...createAxisControl('x'),
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
...createAxisControl('y'),
|
...createAxisControl('y'),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_TIME_FORMAT_DOCS,
|
D3_TIME_FORMAT_DOCS,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
|
@ -167,7 +168,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'x_axis_time_format',
|
name: 'x_axis_time_format',
|
||||||
|
@ -200,7 +201,7 @@ const config: ControlPanelConfig = {
|
||||||
],
|
],
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
['y_axis_format'],
|
['y_axis_format'],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_TIME_FORMAT_DOCS,
|
D3_TIME_FORMAT_DOCS,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
|
@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
|
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
@ -144,7 +145,7 @@ const config: ControlPanelConfig = {
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
['y_axis_format'],
|
['y_axis_format'],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_TIME_FORMAT_DOCS,
|
D3_TIME_FORMAT_DOCS,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
|
@ -109,7 +110,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'x_axis_time_format',
|
name: 'x_axis_time_format',
|
||||||
|
@ -143,7 +144,7 @@ const config: ControlPanelConfig = {
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
|
|
||||||
['y_axis_format'],
|
['y_axis_format'],
|
||||||
[
|
[
|
||||||
|
|
|
@ -21,6 +21,7 @@ import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_TIME_FORMAT_DOCS,
|
D3_TIME_FORMAT_DOCS,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
|
@ -161,7 +162,7 @@ const config: ControlPanelConfig = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...legendSection,
|
...legendSection,
|
||||||
[<div className="section-header">{t('X Axis')}</div>],
|
[<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'x_axis_time_format',
|
name: 'x_axis_time_format',
|
||||||
|
@ -194,7 +195,7 @@ const config: ControlPanelConfig = {
|
||||||
],
|
],
|
||||||
...richTooltipSection,
|
...richTooltipSection,
|
||||||
// eslint-disable-next-line react/jsx-key
|
// eslint-disable-next-line react/jsx-key
|
||||||
[<div className="section-header">{t('Y Axis')}</div>],
|
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
|
||||||
['y_axis_format'],
|
['y_axis_format'],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
|
|
|
@ -20,6 +20,7 @@ import React from 'react';
|
||||||
import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
|
import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
getStandardizedControls,
|
getStandardizedControls,
|
||||||
sections,
|
sections,
|
||||||
sharedControls,
|
sharedControls,
|
||||||
|
@ -108,7 +109,7 @@ const controlPanel: ControlPanelConfig = {
|
||||||
label: t('Chart options'),
|
label: t('Chart options'),
|
||||||
expanded: true,
|
expanded: true,
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('Layout')}</div>],
|
[<ControlSubSectionHeader>{t('Layout')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'layout',
|
name: 'layout',
|
||||||
|
|
|
@ -20,6 +20,7 @@ import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelConfig,
|
ControlPanelConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
D3_FORMAT_DOCS,
|
D3_FORMAT_DOCS,
|
||||||
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
D3_NUMBER_FORMAT_DESCRIPTION_VALUES_TEXT,
|
||||||
D3_FORMAT_OPTIONS,
|
D3_FORMAT_OPTIONS,
|
||||||
|
@ -62,7 +63,7 @@ const config: ControlPanelConfig = {
|
||||||
expanded: true,
|
expanded: true,
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
['color_scheme'],
|
['color_scheme'],
|
||||||
[<div className="section-header">{t('Labels')}</div>],
|
[<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'show_labels',
|
name: 'show_labels',
|
||||||
|
|
|
@ -22,6 +22,7 @@ import {
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
ControlSetItem,
|
ControlSetItem,
|
||||||
ControlSetRow,
|
ControlSetRow,
|
||||||
|
ControlSubSectionHeader,
|
||||||
DEFAULT_SORT_SERIES_DATA,
|
DEFAULT_SORT_SERIES_DATA,
|
||||||
SORT_SERIES_CHOICES,
|
SORT_SERIES_CHOICES,
|
||||||
sharedControls,
|
sharedControls,
|
||||||
|
@ -96,7 +97,7 @@ const legendOrientationControl: ControlSetItem = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const legendSection: ControlSetRow[] = [
|
export const legendSection: ControlSetRow[] = [
|
||||||
[<div className="section-header">{t('Legend')}</div>],
|
[<ControlSubSectionHeader>{t('Legend')}</ControlSubSectionHeader>],
|
||||||
[showLegendControl],
|
[showLegendControl],
|
||||||
[legendTypeControl],
|
[legendTypeControl],
|
||||||
[legendOrientationControl],
|
[legendOrientationControl],
|
||||||
|
@ -210,7 +211,7 @@ const tooltipSortByMetricControl: ControlSetItem = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const richTooltipSection: ControlSetRow[] = [
|
export const richTooltipSection: ControlSetRow[] = [
|
||||||
[<div className="section-header">{t('Tooltip')}</div>],
|
[<ControlSubSectionHeader>{t('Tooltip')}</ControlSubSectionHeader>],
|
||||||
[richTooltipControl],
|
[richTooltipControl],
|
||||||
[tooltipSortByMetricControl],
|
[tooltipSortByMetricControl],
|
||||||
[tooltipTimeFormatControl],
|
[tooltipTimeFormatControl],
|
||||||
|
@ -243,7 +244,7 @@ const sortSeriesAscending: ControlSetItem = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const seriesOrderSection: ControlSetRow[] = [
|
export const seriesOrderSection: ControlSetRow[] = [
|
||||||
[<div className="section-header">{t('Series Order')}</div>],
|
[<ControlSubSectionHeader>{t('Series Order')}</ControlSubSectionHeader>],
|
||||||
[sortSeriesType],
|
[sortSeriesType],
|
||||||
[sortSeriesAscending],
|
[sortSeriesAscending],
|
||||||
];
|
];
|
||||||
|
|
|
@ -18,7 +18,10 @@
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { t } from '@superset-ui/core';
|
import { t } from '@superset-ui/core';
|
||||||
import { ControlPanelSectionConfig } from '@superset-ui/chart-controls';
|
import {
|
||||||
|
ControlPanelSectionConfig,
|
||||||
|
ControlSubSectionHeader,
|
||||||
|
} from '@superset-ui/chart-controls';
|
||||||
|
|
||||||
export const datasourceAndVizType: ControlPanelSectionConfig = {
|
export const datasourceAndVizType: ControlPanelSectionConfig = {
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
|
@ -122,7 +125,11 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
|
||||||
'of query results',
|
'of query results',
|
||||||
),
|
),
|
||||||
controlSetRows: [
|
controlSetRows: [
|
||||||
[<div className="section-header">{t('Rolling window')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Rolling window')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'rolling_type',
|
name: 'rolling_type',
|
||||||
|
@ -171,7 +178,11 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Time comparison')}</div>],
|
[
|
||||||
|
<ControlSubSectionHeader>
|
||||||
|
{t('Time comparison')}
|
||||||
|
</ControlSubSectionHeader>,
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'time_compare',
|
name: 'time_compare',
|
||||||
|
@ -220,7 +231,7 @@ export const NVD3TimeSeries: ControlPanelSectionConfig[] = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[<div className="section-header">{t('Resample')}</div>],
|
[<ControlSubSectionHeader>{t('Resample')}</ControlSubSectionHeader>],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'resample_rule',
|
name: 'resample_rule',
|
||||||
|
|
Loading…
Reference in New Issue