From 815c08d090e594120e3abaaf594aa8bc25201b02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Baran=20Tomak?= Date: Tue, 9 Apr 2024 10:29:28 +0300 Subject: [PATCH] feat: pushed for dev pull --- .../pages/DvtChart/dvtChartDataCustomize.ts | 489 +++++++++++++----- .../src/pages/DvtChart/dvtChartDataOptions.ts | 206 +++++++- 2 files changed, 561 insertions(+), 134 deletions(-) diff --git a/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts b/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts index 7b90aa896074..bcd33d37990a 100644 --- a/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts +++ b/superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts @@ -322,10 +322,10 @@ const lineAndBarChart: CollapsesProps[] = [ ]; const DvtChartCustomize: DvtChartCustomizeProps[] = [ - { - chart_name: 'echarts_timeseries_line', - collapses: lineAndBarChart, - }, + // { + // chart_name: 'echarts_timeseries_line', + // collapses: lineAndBarChart, + // }, { chart_name: 'echarts_timeseries_bar', collapses: lineAndBarChart, @@ -334,6 +334,12 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ chart_name: 'echarts_area', collapses: lineAndBarChart, }, + // { + // chart_name:'echarts_area', + // collapses: [ + // {collapse_label:} + // ] + // } { chart_name: 'table', collapses: [ @@ -344,14 +350,14 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('TIMESTAMP FORMAT'), name: 'table_timestamp_format', - status: 'input-drop', + status: 'select', popper: t('D3 time format for datetime columns'), options: [], }, { label: t('PAGE LENGTH'), name: 'page_length', - status: 'input-drop', + status: 'select', popper: t('Rows per page, 0 means no pagination'), options: chartFormsOption.page_length, }, @@ -396,6 +402,310 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ }, ], }, + + { + chart_name: 'echarts_timeseries_line', + collapses: [ + { + collapse_label: t('Chart Title'), + collapse_active: 'chart_title', + forms: [ + { + label: t('X AXIS TITLE'), + name: 'x_axis_title', + status: 'input', + popper: t('Changing this control takes effect instantly'), + }, + { + label: t('X AXIS TITLE BOTTOM MARGIN'), + name: 'x_axis_title_margin', + status: 'select', + popper: t('Changing this control takes effect instantly'), + options: chartFormsOption.x_axis_title_margin, + }, + { + label: t('Y AXIS TITLE'), + name: 'y_axis_title', + status: 'input', + popper: t('Changing this control takes effect instantly'), + }, + { + label: t('Y AXIS TITLE MARGIN'), + name: 'y_axis_title_margin', + status: 'select', + popper: t('Changing this control takes effect instantly'), + options: chartFormsOption.y_axis_title_margin, + }, + { + label: t('Y AXIS TITLE POSITION'), + name: 'y_axis_title_position', + status: 'select', + popper: t('Changing this control takes effect instantly'), + options: chartFormsOption.y_axis_title_position, + }, + ], + }, + { + collapse_label: t('Chart Options'), + collapse_active: 'chart_options', + forms: [ + { + label: t('SORT SERIES BY'), + name: 'sort_series_type', + status: 'select', + popper: t( + 'Based on what should series be ordered on the chart and legend', + ), + options: chartFormsOption.sort_series_type, + }, + { + label: t('SORT SERIES ASCENDING'), + name: 'sort_series_ascending', + status: 'checkbox', + popper: t('Sort series in ascending order'), + }, + { + label: t('COLOR SCHEME'), + name: 'color_scheme', + status: 'color', + popper: t('The color scheme for rendering chart'), + }, + { + label: t('SERIES STYLE'), + name: 'seriesType', + status: 'select', + popper: t('Series chart type (line, bar etc)'), + options: chartFormsOption.seriesType, + }, + { + label: t('SHOW VALUE'), + name: 'show_value', + status: 'checkbox', + popper: t('Show series values on the chart'), + }, + { + label: t('SERIES STYLE'), + name: 'seriesType', + status: 'select', + popper: t('Series chart type (line, bar etc)'), + options: chartFormsOption.seriesType, + }, + { + label: t('AREA CHART'), + name: 'area', + status: 'checkbox', + popper: t( + 'Draw area under curves. Only applicable for line types.', + ), + }, + { + label: t('AREA CHART OPACITY'), + name: 'opacity', + status: 'range', + popper: t( + 'Opacity of Area Chart. Also applies to confidence band.', + ), + rangeConfig: { + min: 0, + max: 1, + step: 0.1, + }, + }, + { + label: t('MARKER'), + name: 'markerEnabled', + status: 'checkbox', + popper: t( + 'Draw a marker on data points. Only applicable for line types.', + ), + }, + { + label: t('MARKER SIZE'), + name: 'markerSize', + status: 'range', + popper: t('Size of marker. Also applies to forecast observations.'), + rangeConfig: { + min: 0, + max: 20, + step: 1, + }, + }, + { + label: t('DATA ZOOM'), + name: 'zoomable', + status: 'checkbox', + popper: t('Enable data zooming controls'), + }, + { + label: t('MINOR TICKS'), + name: 'minorTicks', + status: 'checkbox', + popper: t('Show minor ticks on axes.'), + }, + { + label: t('SHOW LEGEND'), + name: 'show_legend', + status: 'checkbox', + popper: t('Whether to display a legend for the chart'), + }, + { + label: t('TYPE'), + name: 'legendType', + status: 'select', + popper: t('Legend type'), + options: chartFormsOption.legendType, + }, + { + label: t('ORIENTATION'), + name: 'legendOrientation', + status: 'select', + popper: t('Legend Orientation'), + options: chartFormsOption.legendOrientation, + }, + { + label: t('MARGIN'), + name: 'legendMargin', + status: 'input', + number: true, + popper: t('Additional padding for legend.'), + }, + { + label: t('TIME FORMAT'), + name: 'x_axis_time_format', + status: 'select', + popper: t( + 'D3 time format syntax: https://github.com/d3/d3-time-format. When using other than adaptive formatting, labels may overlap', + ), + options: [], + }, + { + label: t('ROTATE X AXIS LABEL'), + name: 'xAxisLabelRotation', + status: 'select', + popper: t('Input field supports custom rotation. e.g. 30 for 30°'), + options: chartFormsOption.xAxisLabelRotation, + }, + { + label: t('RICH TOOLTIP'), + name: 'rich_tooltip', + status: 'checkbox', + popper: t( + 'Shows a list of all series available at that point in time', + ), + }, + { + label: t('TOOLTIP SORT BY METRIC'), + name: 'tooltipSortByMetric', + status: 'checkbox', + popper: t( + 'Whether to sort tooltip by the selected metric in descending order.', + ), + }, + { + label: t('TOOLTIP TIME FORMAT'), + name: 'tooltipTimeFormat', + status: 'select', + popper: t( + 'D3 time format syntax: https://github.com/d3/d3-time-format', + ), + options: [], + }, + { + label: t('Y AXIS FORMAT'), + name: 'y_axis_format', + status: 'select', + popper: t('D3 format syntax: https://github.com/d3/d3-format'), + options: [], + }, + { + label: t('CURRENCY FORMAT'), + name: 'currency_format', + status: 'two-select', + values: [ + { + name: 'symbolPosition', + placeholder: t('Prefix or suffix'), + options: chartFormsOption.currency_format.symbolPosition, + }, + { + name: 'symbol', + placeholder: t('Currency'), + options: chartFormsOption.currency_format.symbol, + }, + ], + }, + { + label: t('LOGARITHMIC Y-AXIS'), + name: 'logAxis', + status: 'checkbox', + popper: t('Logarithmic y-axis'), + }, + { + label: t('MINOR SPLIT LINE'), + name: 'minorSplitLine', + status: 'checkbox', + popper: t('Draw split lines for minor y-axis ticks'), + }, + { + label: t('TRUNCATE X AXIS'), + name: 'truncateXAxis', + status: 'checkbox', + popper: t( + 'Truncate X Axis. Can be overridden by specifying a min or max bound. Only applicable for numercal X axis.', + ), + }, + { + label: t('X AXIS BOUNDS'), + name: 'xAxisBounds', + status: 'two-input', + popper: t( + "Bounds for numerical X axis. Not applicable for temporal or categorical axes. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.", + ), + values: [ + { + placeholder: t('MIN'), + number: true, + name: 'min', + }, + { + placeholder: t('MAX'), + number: true, + name: 'max', + }, + ], + }, + { + label: t('TRUNCATE Y AXIS'), + name: 'truncateYAxis', + status: 'checkbox', + popper: t( + 'Truncate Y Axis. Can be overridden by specifying a min or max bound.', + ), + }, + { + label: t('Y AXIS BOUNDS'), + name: 'y_axis_bounds', + status: 'two-input', + popper: t( + "Bounds for the Y-axis. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.", + ), + values: [ + { + placeholder: t('MIN'), + number: true, + name: 'min', + }, + { + placeholder: t('MAX'), + number: true, + name: 'max', + }, + ], + }, + ], + }, + ], + }, { chart_name: 'big_number_total', collapses: [ @@ -406,29 +716,20 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('BIG NUMBER FONT SIZE'), name: 'header_font_size', - status: 'input-drop', + status: 'select', popper: t('Changing this control takes effect instantly'), - multiple: false, - type: 'normal', - savedType: 'expressions', options: chartFormsOption.header_font_size, }, { label: t('SUBHEADER FONT SIZE'), name: 'subheader_font_size', popper: t('Changing this control takes effect instantly'), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('NUMBER FORMAT'), name: 'number_format', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t( 'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.', ), @@ -437,10 +738,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('DATE FORMAT'), name: 'time_format', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t('D3 format syntax: https://github.com/d3/d3-format'), options: [], }, @@ -506,20 +804,14 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('LABEL TYPE'), name: 'label_type', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t('What should be shown on the label?'), options: chartFormsOption.label_type, }, { label: t('NUMBER FORMAT'), name: 'number_format', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t( 'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.', ), @@ -619,19 +911,13 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ label: t('TYPE'), name: 'legendType', popper: t('Legent type'), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('ORIENTATION'), name: 'legendOrientation', popper: t('Legent orientation'), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('MARGIN'), @@ -644,19 +930,13 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ label: t('MAX BUBBLE SIZE'), name: 'max_bubble_size', popper: t('Changing this control takes effect instantly'), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('BUBBLE SIZE NUMBER FORMAT'), name: 'max_bubble_size', popper: t('D3 format syntax: https://github.com/d3/d3-format'), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('BUBBLE OPACITY'), @@ -672,42 +952,30 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ popper: t('Changing this control takes effect instantly'), status: 'input', }, - // { - // label: t('ROTATE X AXIS LABEL'), - // name: 'xAxisLabelRotation', - // popper: t('Input field supports custom rotation. e.g. 30 for 30°'), - // status: 'input-drop', - // multiple: false, - // type: 'normal', - // savedType: 'expressions', - // }, - // { - // label: t('X AXIS TITLE MARGIN'), - // name: 'x_axis_title_margin', - // popper: t('Changing this control takes effect instantly'), - // status: 'input-drop', - // multiple: false, - // type: 'normal', - // savedType: 'expressions', - // }, - // { - // label: t('X AXIS FORMAT'), - // name: 'xAxisFormat', - // popper: t('D3 format syntax: https://github.com/d3/d3-format'), - // status: 'input-drop', - // multiple: false, - // type: 'normal', - // savedType: 'expressions', - // }, - // { - // label: t('LOGARITHMIC X-AXIS'), - // name: 'logXAxis', - // popper: t('Logarithmic x-axis'), - // status: 'input-drop', - // multiple: false, - // type: 'normal', - // savedType: 'expressions', - // }, + { + label: t('ROTATE X AXIS LABEL'), + name: 'xAxisLabelRotation', + popper: t('Input field supports custom rotation. e.g. 30 for 30°'), + status: 'select', + }, + { + label: t('X AXIS TITLE MARGIN'), + name: 'x_axis_title_margin', + popper: t('Changing this control takes effect instantly'), + status: 'select', + }, + { + label: t('X AXIS FORMAT'), + name: 'xAxisFormat', + popper: t('D3 format syntax: https://github.com/d3/d3-format'), + status: 'select', + }, + { + label: t('LOGARITHMIC X-AXIS'), + name: 'logXAxis', + popper: t('Logarithmic x-axis'), + status: 'select', + }, { label: t('Y AXIS TITLE'), name: 'y_axis_label', @@ -721,15 +989,12 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ status: 'select', options: chartFormsOption.yAxisLabelRotation, }, - // { - // label: t('Y AXIS FORMAT'), - // name: 'y_axis_format', - // popper: t('Changing this control takes effect instantly'), - // status: 'input-drop', - // multiple: false, - // type: 'normal', - // savedType: 'expressions', - // }, + { + label: t('Y AXIS FORMAT'), + name: 'y_axis_format', + popper: t('Changing this control takes effect instantly'), + status: 'select', + }, { label: t('LOGARITHMIC Y-AXIS'), name: 'logYAxis', @@ -821,10 +1086,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ label: t('NO OF BINS'), name: 'link_length', popper: t('Select the number of bins for the histogram'), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('X AXIS LABEL'), @@ -883,7 +1145,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('ORIENTATION'), name: 'legendOrientation', - status: 'input-drop', + status: 'select', popper: t('Legend Orientation'), }, { @@ -896,31 +1158,22 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('NUMBER FORMAT'), name: 'number_format', - status: 'input-drop', + status: 'select', popper: t( 'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.', ), - multiple: false, - type: 'normal', - savedType: 'expressions', }, { label: t('TOOLTIP CONTENTS'), name: 'tooltip_label_type', - status: 'input-drop', + status: 'select', popper: t('What should be shown as the tooltip label'), - multiple: false, - type: 'normal', - savedType: 'expressions', }, { label: t('LABEL CONTENTS'), name: 'label_type', - status: 'input-drop', + status: 'select', popper: t('What should be shown as the label'), - multiple: false, - type: 'normal', - savedType: 'expressions', }, { label: t('CURRENCY FORMAT'), @@ -1009,10 +1262,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ popper: t( 'Font size for axis labels, detail value and other text elements', ), - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', }, { label: t('CURRENCY FORMAT'), @@ -1157,19 +1407,13 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('TIME FORMAT'), name: 'x_axis_time_format', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t('x_axis_time_format'), }, { label: t('X TICK LAYOUT'), name: 'x_ticks_layout', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t('The way the ticks are laid out on the X-axis'), }, @@ -1182,10 +1426,7 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [ { label: t('Y AXIS FORMAT'), name: 'y_axis_format', - status: 'input-drop', - multiple: false, - type: 'normal', - savedType: 'expressions', + status: 'select', popper: t('D3 format syntax: https://github.com/d3/d3-format'), options: chartFormsOption.y_axis_format, }, diff --git a/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts b/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts index 7ece383f8696..462383d1b3ec 100644 --- a/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts +++ b/superset-frontend/src/pages/DvtChart/dvtChartDataOptions.ts @@ -588,45 +588,45 @@ const chartFormsOption = { ], header_font_size: [ { - label: 'Tiny', + label: t('Tiny'), value: 0.2, }, { - label: 'Small', + label: t('Small'), value: 0.3, }, { - label: 'Normal', + label: t('Normal'), value: 0.4, }, { - label: 'Large', + label: t('Large'), value: 0.5, }, { - label: 'Huge', + label: t('Huge'), value: 0.6, }, ], subheader_font_size: [ { - label: 'Tiny', + label: t('Tiny'), value: 0.125, }, { - label: 'Small', + label: t('Small'), value: 0.15, }, { - label: 'Normal', + label: t('Normal'), value: 0.2, }, { - label: 'Large', + label: t('Large'), value: 0.3, }, { - label: 'Huge', + label: t('Huge'), value: 0.4, }, ], @@ -656,6 +656,192 @@ const chartFormsOption = { value: 200, }, ], + x_axis_title_margin: [ + { + label: '15', + value: 15, + }, + { + label: '30', + value: 30, + }, + { + label: '50', + value: 50, + }, + { + label: '75', + value: 75, + }, + { + label: '100', + value: 100, + }, + { + label: '125', + value: 125, + }, + { + label: '150', + value: 150, + }, + { + label: '200', + value: 200, + }, + ], + y_axis_title_margin: [ + { + label: '15', + value: 15, + }, + { + label: '30', + value: 30, + }, + { + label: '50', + value: 50, + }, + { + label: '75', + value: 75, + }, + { + label: '100', + value: 100, + }, + { + label: '125', + value: 125, + }, + { + label: '150', + value: 150, + }, + { + label: '200', + value: 200, + }, + ], + y_axis_title_position: [ + { + label: t('Left'), + value: 'Left', + }, + { + label: t('Top'), + value: 'Top', + }, + ], + sort_series_type: [ + { + label: t('Category name'), + value: 'name', + }, + { + label: t('Total value'), + value: 'sum', + }, + { + label: t('Minimum value'), + value: 'min', + }, + { + label: t('Max value'), + value: 'max', + }, + { + label: t('Average value'), + value: 'avg', + }, + ], + seriesType: [ + { + label: t('Line'), + value: 'line', + }, + { + label: t('Scatter'), + value: 'scatter', + }, + { + label: t('Smooth Line'), + value: 'smooth', + }, + { + label: t('Bar'), + value: 'bar', + }, + { + label: t('Step - start'), + value: 'start', + }, + { + label: t('Step - middle'), + value: 'middle', + }, + { + label: t('Step - end'), + value: 'end', + }, + ], + stack: [ + { + label: t('Stack'), + value: 'stack', + }, + { + label: t('None'), + value: '', + }, + { + label: t('Stream'), + value: 'Stream', + }, + ], + legendType: [ + { + label: t('Scroll'), + value: 'scroll', + }, + { + label: t('Plain'), + value: 'plain', + }, + ], + legendOrientation: [ + { + label: t('Top'), + value: 'top', + }, + { + label: t('Bottom'), + value: 'bottom', + }, + { + label: t('Left'), + value: 'left', + }, + { + label: t('Right'), + value: 'right', + }, + ], + xAxisLabelRotation: [ + { + label: '0°', + value: 0, + }, + { + label: '45°', + value: 45, + }, + { + label: '90°', + value: 90, + }, + ], }; export { forecastSeasonality, chartFormsOption };