superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
/**
* 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 { t } from '@superset-ui/core';
import {
sharedControls,
ControlPanelConfig,
ControlSubSectionHeader,
D3_FORMAT_OPTIONS,
getStandardizedControls,
} from '@superset-ui/chart-controls';
import { DEFAULT_FORM_DATA } from './types';
const config: ControlPanelConfig = {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'groupby',
config: {
...sharedControls.groupby,
description: t('Columns to group by'),
},
},
],
['metric'],
['adhoc_filters'],
[
{
name: 'row_limit',
config: {
...sharedControls.row_limit,
choices: [...Array(10).keys()].map(n => n + 1),
default: DEFAULT_FORM_DATA.rowLimit,
},
},
],
['sort_by_metric'],
],
},
{
label: t('Chart Options'),
expanded: true,
controlSetRows: [
[<ControlSubSectionHeader>{t('General')}</ControlSubSectionHeader>],
[
{
name: 'min_val',
config: {
type: 'TextControl',
isInt: true,
default: DEFAULT_FORM_DATA.minVal,
renderTrigger: true,
label: t('Min'),
description: t('Minimum value on the gauge axis'),
},
},
{
name: 'max_val',
config: {
type: 'TextControl',
isInt: true,
default: DEFAULT_FORM_DATA.maxVal,
renderTrigger: true,
label: t('Max'),
description: t('Maximum value on the gauge axis'),
},
},
],
[
{
name: 'start_angle',
config: {
type: 'TextControl',
label: t('Start angle'),
description: t('Angle at which to start progress axis'),
renderTrigger: true,
default: DEFAULT_FORM_DATA.startAngle,
},
},
{
name: 'end_angle',
config: {
type: 'TextControl',
label: t('End angle'),
description: t('Angle at which to end progress axis'),
renderTrigger: true,
default: DEFAULT_FORM_DATA.endAngle,
},
},
],
['color_scheme'],
[
{
name: 'font_size',
config: {
type: 'SliderControl',
label: t('Font size'),
description: t(
'Font size for axis labels, detail value and other text elements',
),
renderTrigger: true,
min: 10,
max: 20,
default: DEFAULT_FORM_DATA.fontSize,
},
},
],
[
{
name: 'number_format',
config: {
type: 'SelectControl',
label: t('Number format'),
description: t(
'D3 format syntax: https://github.com/d3/d3-format',
),
freeForm: true,
renderTrigger: true,
default: DEFAULT_FORM_DATA.numberFormat,
choices: D3_FORMAT_OPTIONS,
},
},
],
['currency_format'],
[
{
name: 'value_formatter',
config: {
type: 'TextControl',
label: t('Value format'),
description: t(
'Additional text to add before or after the value, e.g. unit',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.valueFormatter,
},
},
],
[
{
name: 'show_pointer',
config: {
type: 'CheckboxControl',
label: t('Show pointer'),
description: t('Whether to show the pointer'),
renderTrigger: true,
default: DEFAULT_FORM_DATA.showPointer,
},
},
],
[
{
name: 'animation',
config: {
type: 'CheckboxControl',
label: t('Animation'),
description: t(
'Whether to animate the progress and the value or just display them',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.animation,
},
},
],
[<ControlSubSectionHeader>{t('Axis')}</ControlSubSectionHeader>],
[
{
name: 'show_axis_tick',
config: {
type: 'CheckboxControl',
label: t('Show axis line ticks'),
description: t('Whether to show minor ticks on the axis'),
renderTrigger: true,
default: DEFAULT_FORM_DATA.showAxisTick,
},
},
],
[
{
name: 'show_split_line',
config: {
type: 'CheckboxControl',
label: t('Show split lines'),
description: t('Whether to show the split lines on the axis'),
renderTrigger: true,
default: DEFAULT_FORM_DATA.showSplitLine,
},
},
],
[
{
name: 'split_number',
config: {
type: 'SliderControl',
label: t('Split number'),
description: t('Number of split segments on the axis'),
renderTrigger: true,
min: 3,
max: 30,
default: DEFAULT_FORM_DATA.splitNumber,
},
},
],
[<ControlSubSectionHeader>{t('Progress')}</ControlSubSectionHeader>],
[
{
name: 'show_progress',
config: {
type: 'CheckboxControl',
label: t('Show progress'),
description: t('Whether to show the progress of gauge chart'),
renderTrigger: true,
default: DEFAULT_FORM_DATA.showProgress,
},
},
],
[
{
name: 'overlap',
config: {
type: 'CheckboxControl',
label: t('Overlap'),
description: t(
'Whether the progress bar overlaps when there are multiple groups of data',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.overlap,
},
},
],
[
{
name: 'round_cap',
config: {
type: 'CheckboxControl',
label: t('Round cap'),
description: t(
'Style the ends of the progress bar with a round cap',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.roundCap,
},
},
],
[<ControlSubSectionHeader>{t('Intervals')}</ControlSubSectionHeader>],
[
{
name: 'intervals',
config: {
type: 'TextControl',
label: t('Interval bounds'),
description: t(
'Comma-separated interval bounds, e.g. 2,4,5 for intervals 0-2, 2-4 and 4-5. Last number should match the value provided for MAX.',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.intervals,
},
},
],
[
{
name: 'interval_color_indices',
config: {
type: 'TextControl',
label: t('Interval colors'),
description: t(
'Comma-separated color picks for the intervals, e.g. 1,2,4. Integers denote colors from the chosen color scheme and are 1-indexed. Length must be matching that of interval bounds.',
),
renderTrigger: true,
default: DEFAULT_FORM_DATA.intervalColorIndices,
},
},
],
],
},
],
formDataOverrides: formData => ({
...formData,
metric: getStandardizedControls().shiftMetric(),
groupby: getStandardizedControls().popAllColumns(),
}),
};
export default config;