Migrating unique NVD3 viz controls (#9445)

* donut control

* labels outside

* linting

* x_log_scale, pie_label_type

* linting

* line_charts, line_charts_2

* marker_labels

* marker_line_labels, marker_lines, markers

* prefix_metric_with_slice_name, range_labels, ranges

* stacked_style

* Revert "stacked_style"

This reverts commit aae2d418b8f1950fbe32248b62e50a12fbf186bd.

* stacked_style take 2...

* Revert "stacked_style take 2..."

This reverts commit 38b7155f50143684c92a67b2a9fa16f65c269d35.
This commit is contained in:
Evan Rusackas 2020-04-03 12:50:07 -07:00 committed by GitHub
parent 9e79cf37f8
commit cd572334c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 190 additions and 154 deletions

View File

@ -1041,15 +1041,12 @@ The filter-box configuration references column names (via the `column` key) and
| Field | Type | Notes |
| --------------------- | --------- | ------------------------------------------------ |
| `color_picker` | _object_ | The **Fixed Color** widget |
| `donut` | _boolean_ | The **Donut** widget |
| `global_opacity` | _number_ | The **Opacity** widget |
| `label_colors` | _object_ | The **Color Scheme** widget |
| `labels_outside` | _boolean_ | The **Put labels outside** widget |
| `line_interpolation` | _string_ | The **Line Style** widget |
| `link_length` | _number_ | The **No of Bins** widget |
| `normalized` | _boolean_ | The **Normalized** widget |
| `number_format` | _string_ | The **Number format** widget |
| `pie_label_type` | _string_ | [HIDDEN] |
| `rich_tooltip` | _boolean_ | The **Rich Tooltip** widget |
| `send_time_range` | _boolean_ | The **Show Markers** widget |
| `show_brush` | _string_ | The **Show Range Filter** widget |
@ -1064,7 +1061,6 @@ The filter-box configuration references column names (via the `column` key) and
| `x_axis_format` | _string_ | The **X Axis Format** widget |
| `x_axis_label` | _string_ | The **X Axis Label** widget |
| `x_axis_showminmax` | _boolean_ | The **X bounds** widget |
| `x_log_scale` | _N/A_ | _Deprecated?_ |
| `x_ticks_layout` | _string_ | The **X Tick Layout** widget |
### Y Axis
@ -1131,10 +1127,7 @@ Note the `y_axis_format` is defined under various section for some charts.
| `instant_filtering` | _N/A_ | |
| `js_columns` | _N/A_ | |
| `label` | _N/A_ | |
| `labels_outside` | _N/A_ | |
| `legend_position` | _N/A_ | |
| `line_charts` | _N/A_ | |
| `line_charts_2` | _N/A_ | |
| `line_column` | _N/A_ | |
| `line_type` | _N/A_ | |
| `line_width` | _N/A_ | |
@ -1142,10 +1135,6 @@ Note the `y_axis_format` is defined under various section for some charts.
| `log_scale` | _N/A_ | |
| `mapbox_label` | _N/A_ | |
| `mapbox_style` | _N/A_ | |
| `marker_labels` | _N/A_ | |
| `marker_line_labels` | _N/A_ | |
| `marker_lines` | _N/A_ | |
| `markers` | _N/A_ | |
| `markup_type` | _N/A_ | |
| `min_periods` | _N/A_ | |
| `multiplier` | _N/A_ | |
@ -1159,9 +1148,6 @@ Note the `y_axis_format` is defined under various section for some charts.
| `period_ratio_type` | _N/A_ | |
| `perm` | _N/A_ | |
| `point_radius_fixed` | _N/A_ | |
| `prefix_metric_with_slice_name` | _N/A_ | |
| `range_labels` | _N/A_ | |
| `ranges` | _N/A_ | |
| `rdo_save` | _N/A_ | |
| `reduce_x_ticks` | _N/A_ | |
| `refresh_frequency` | _N/A_ | |

View File

@ -48,7 +48,19 @@ export default {
controlSetRows: [
['x_axis_label', 'left_margin'],
['x_axis_format', 'x_ticks_layout'],
['x_log_scale', 'x_axis_showminmax'],
[
{
name: 'x_log_scale',
config: {
type: 'CheckboxControl',
label: t('X Log Scale'),
default: false,
renderTrigger: true,
description: t('Use a log scale for the X-axis'),
},
},
'x_axis_showminmax',
],
],
},
{

View File

@ -30,9 +30,66 @@ export default {
label: t('Chart Options'),
expanded: true,
controlSetRows: [
['ranges', 'range_labels'],
['markers', 'marker_labels'],
['marker_lines', 'marker_line_labels'],
[
{
name: 'ranges',
config: {
type: 'TextControl',
label: t('Ranges'),
default: '',
description: t('Ranges to highlight with shading'),
},
},
{
name: 'range_labels',
config: {
type: 'TextControl',
label: t('Range labels'),
default: '',
description: t('Labels for the ranges'),
},
},
],
[
{
name: 'markers',
config: {
type: 'TextControl',
label: t('Markers'),
default: '',
description: t('List of values to mark with triangles'),
},
},
{
name: 'marker_labels',
config: {
type: 'TextControl',
label: t('Marker labels'),
default: '',
description: t('Labels for the markers'),
},
},
],
[
{
name: 'marker_lines',
config: {
type: 'TextControl',
label: t('Marker lines'),
default: '',
description: t('List of values to mark with lines'),
},
},
{
name: 'marker_line_labels',
config: {
type: 'TextControl',
label: t('Marker line labels'),
default: '',
description: t('Labels for the marker lines'),
},
},
],
],
},
],

View File

@ -19,6 +19,7 @@
import { t } from '@superset-ui/translation';
import { annotations } from './sections';
import { D3_TIME_FORMAT_OPTIONS } from '../controls';
import * as v from '../validators';
export default {
requiresTime: true,
@ -28,7 +29,18 @@ export default {
expanded: true,
controlSetRows: [
['color_scheme', 'label_colors'],
['prefix_metric_with_slice_name', null],
[
{
name: 'prefix_metric_with_slice_name',
config: {
type: 'CheckboxControl',
label: t('Prefix metric name with slice name'),
default: false,
renderTrigger: true,
},
},
null,
],
['show_legend', 'show_markers'],
['line_interpolation', null],
],
@ -45,12 +57,68 @@ export default {
{
label: t('Y Axis 1'),
expanded: true,
controlSetRows: [['line_charts', 'y_axis_format']],
controlSetRows: [
[
{
name: 'line_charts',
config: {
type: 'SelectAsyncControl',
multi: true,
label: t('Left Axis chart(s)'),
validators: [v.nonEmpty],
default: [],
description: t('Choose one or more charts for left axis'),
dataEndpoint:
'/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi',
placeholder: t('Select charts'),
onAsyncErrorMessage: t('Error while fetching charts'),
mutator: data => {
if (!data || !data.result) {
return [];
}
return data.result.map(o => ({
value: o.id,
label: o.slice_name,
}));
},
},
},
'y_axis_format',
],
],
},
{
label: t('Y Axis 2'),
expanded: false,
controlSetRows: [['line_charts_2', 'y_axis_2_format']],
controlSetRows: [
[
{
name: 'line_charts_2',
config: {
type: 'SelectAsyncControl',
multi: true,
label: t('Right Axis chart(s)'),
validators: [],
default: [],
description: t('Choose one or more charts for right axis'),
dataEndpoint:
'/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi',
placeholder: t('Select charts'),
onAsyncErrorMessage: t('Error while fetching charts'),
mutator: data => {
if (!data || !data.result) {
return [];
}
return data.result.map(o => ({
value: o.id,
label: o.slice_name,
}));
},
},
},
'y_axis_2_format',
],
],
},
{
label: t('Query'),
@ -60,10 +128,6 @@ export default {
annotations,
],
controlOverrides: {
line_charts: {
label: t('Left Axis chart(s)'),
description: t('Choose one or more charts for left axis'),
},
y_axis_format: {
label: t('Left Axis Format'),
},

View File

@ -34,9 +34,52 @@ export default {
label: t('Chart Options'),
expanded: true,
controlSetRows: [
['pie_label_type', 'number_format'],
['donut', 'show_legend'],
['show_labels', 'labels_outside'],
[
{
name: 'pie_label_type',
config: {
type: 'SelectControl',
label: t('Label Type'),
default: 'key',
renderTrigger: true,
choices: [
['key', 'Category Name'],
['value', 'Value'],
['percent', 'Percentage'],
['key_value', 'Category and Value'],
['key_percent', 'Category and Percentage'],
],
description: t('What should be shown on the label?'),
},
},
'number_format',
],
[
{
name: 'donut',
config: {
type: 'CheckboxControl',
label: t('Donut'),
default: false,
renderTrigger: true,
description: t('Do you want a donut or a pie?'),
},
},
'show_legend',
],
[
'show_labels',
{
name: 'labels_outside',
config: {
type: 'CheckboxControl',
label: t('Put labels outside'),
default: true,
renderTrigger: true,
description: t('Put the labels outside the pie?'),
},
},
],
['color_scheme', 'label_colors'],
],
},

View File

@ -1088,21 +1088,6 @@ export const controls = {
description: t('Line interpolation as defined by d3.js'),
},
pie_label_type: {
type: 'SelectControl',
label: t('Label Type'),
default: 'key',
renderTrigger: true,
choices: [
['key', 'Category Name'],
['value', 'Value'],
['percent', 'Percentage'],
['key_value', 'Category and Value'],
['key_percent', 'Category and Percentage'],
],
description: t('What should be shown on the label?'),
},
code: {
type: 'TextAreaControl',
label: t('Code'),
@ -1272,14 +1257,6 @@ export const controls = {
description: t('Use a log scale for the Y-axis'),
},
x_log_scale: {
type: 'CheckboxControl',
label: t('X Log Scale'),
default: false,
renderTrigger: true,
description: t('Use a log scale for the X-axis'),
},
log_scale: {
type: 'CheckboxControl',
label: t('Log Scale'),
@ -1288,22 +1265,6 @@ export const controls = {
description: t('Use a log scale'),
},
donut: {
type: 'CheckboxControl',
label: t('Donut'),
default: false,
renderTrigger: true,
description: t('Do you want a donut or a pie?'),
},
labels_outside: {
type: 'CheckboxControl',
label: t('Put labels outside'),
default: true,
renderTrigger: true,
description: t('Put the labels outside the pie?'),
},
contribution: {
type: 'CheckboxControl',
label: t('Contribution'),
@ -1411,48 +1372,6 @@ export const controls = {
description: t('Pick a color'),
},
ranges: {
type: 'TextControl',
label: t('Ranges'),
default: '',
description: t('Ranges to highlight with shading'),
},
range_labels: {
type: 'TextControl',
label: t('Range labels'),
default: '',
description: t('Labels for the ranges'),
},
markers: {
type: 'TextControl',
label: t('Markers'),
default: '',
description: t('List of values to mark with triangles'),
},
marker_labels: {
type: 'TextControl',
label: t('Marker labels'),
default: '',
description: t('Labels for the markers'),
},
marker_lines: {
type: 'TextControl',
label: t('Marker lines'),
default: '',
description: t('List of values to mark with lines'),
},
marker_line_labels: {
type: 'TextControl',
label: t('Marker line labels'),
default: '',
description: t('Labels for the marker lines'),
},
annotation_layers: {
type: 'AnnotationLayerControl',
label: '',
@ -1565,51 +1484,6 @@ export const controls = {
description: t('The width of the lines'),
},
line_charts: {
type: 'SelectAsyncControl',
multi: true,
label: t('Line charts'),
validators: [v.nonEmpty],
default: [],
description: t('Pick a set of line charts to layer on top of one another'),
dataEndpoint:
'/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi',
placeholder: t('Select charts'),
onAsyncErrorMessage: t('Error while fetching charts'),
mutator: data => {
if (!data || !data.result) {
return [];
}
return data.result.map(o => ({ value: o.id, label: o.slice_name }));
},
},
line_charts_2: {
type: 'SelectAsyncControl',
multi: true,
label: t('Right Axis chart(s)'),
validators: [],
default: [],
description: t('Choose one or more charts for right axis'),
dataEndpoint:
'/sliceasync/api/read?_flt_0_viz_type=line&_flt_7_viz_type=line_multi',
placeholder: t('Select charts'),
onAsyncErrorMessage: t('Error while fetching charts'),
mutator: data => {
if (!data || !data.result) {
return [];
}
return data.result.map(o => ({ value: o.id, label: o.slice_name }));
},
},
prefix_metric_with_slice_name: {
type: 'CheckboxControl',
label: t('Prefix metric name with slice name'),
default: false,
renderTrigger: true,
},
reverse_long_lat: {
type: 'CheckboxControl',
label: t('Reverse Lat & Long'),