feat: new branch for explore data customization

superset-frontend/src/pages/DvtChart/dvtChartDataCustomize.ts

@@ -338,143 +338,233 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
     chart_name: 'table',
     collapses: [
       {
-        collapse_label: t('Query'),
-        collapse_popper_error: t('This section contains validation errors'),
-        collapse_active: 'query',
-        tabs_name: 'query_mode',
-        tabs_actives: {
-          aggregate: [
-            'groupby',
-            'metrics',
-            'percent_metrics',
-            'adhoc_filters',
-            'timeseries_limit_metric',
-            'server_pagination',
-            'server_page_length',
-            'order_desc',
-            'show_totals',
-          ],
-          raw: [
-            'all_columns',
-            'adhoc_filters',
-            'order_by_cols',
-            'server_pagination',
-            'server_page_length',
-          ],
-        },
+        collapse_label: t('Options'),
+        collapse_active: 'options',
         forms: [
           {
-            label: t('QUERY MODE'),
-            name: 'query_mode',
-            status: 'tabs',
-            options: [
-              { label: t('AGGREGATE'), value: 'aggregate' },
-              { label: t('RAW RECORDS'), value: 'raw' },
-            ],
+            label: t('TIMESTAMP FORMAT'),
+            name: 'table_timestamp_format',
+            status: 'input-drop',
+            popper: t('D3 time format for datetime columns'),
+            options: [],
           },
           {
-            ...formDimensions,
-            popperError: t(
-              'Group By, Metrics or Percentage Metrics must have a value',
+            label: t('PAGE LENGTH'),
+            name: 'page_length',
+            status: 'input-drop',
+            popper: t('Rows per page, 0 means no pagination'),
+            options: chartFormsOption.page_length,
+          },
+          {
+            label: t('SEARCH BOX'),
+            name: '', //cannot find.
+            status: 'checkbox',
+          },
+          {
+            label: t('CELL BARS'),
+            name: 'show_cell_bars',
+            status: 'checkbox',
+            popper: t(
+              'Whether to display a bar chart background in table columns',
             ),
           },
           {
-            ...formMetrics,
-            popperError: t(
-              'Group By, Metrics or Percentage Metrics must have a value',
+            label: t('ALIGN +/-'),
+            name: 'align_pn',
+            status: 'checkbox',
+            popper: t(
+              'Whether to align background charts with both positive and negative values at 0',
             ),
           },
           {
-            label: t('PERCENTAGE METRICS'),
-            name: 'percent_metrics',
+            label: t('COLOR +/-'),
+            name: 'color_pn',
+            status: 'checkbox',
             popper: t(
-              'Select one or many metrics to display, that will be displayed in the percentages of total. Percentage metrics will be calculated only from data within the row limit. You can use an aggregation function on a column or write custom SQL to create a percentage metric.',
+              'Whether to colorize numeric values by whether they are positive or negative',
             ),
-            popperError: t(
-              'Group By, Metrics or Percentage Metrics must have a value',
+          },
+          {
+            label: t('ALLOW COLUMNS TO BE REARRANGED'),
+            name: 'allow_rearrange_columns',
+            status: 'checkbox',
+            popper: t(
+              "Allow end user to drag-and-drop column headers to rearrange them. Note their changes won't persist for the next time they open the chart.",
             ),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    chart_name: 'big_number_total',
+    collapses: [
+      {
+        collapse_label: t('Chart Options'),
+        collapse_active: 'chart_options',
+        forms: [
+          {
+            label: t('BIG NUMBER FONT SIZE'),
+            name: 'header_font_size',
             status: 'input-drop',
-            multiple: true,
-            type: 'aggregates',
-            savedType: 'metric',
+            popper: t('Changing this control takes effect instantly'),
+            multiple: false,
+            type: 'normal',
+            savedType: 'expressions',
+            options: chartFormsOption.header_font_size,
           },
           {
-            label: t('COLUMNS'),
-            name: 'all_columns',
-            popper: t('Columns to display'),
-            popperError: t('must have a value'),
+            label: t('SUBHEADER FONT SIZE'),
+            name: 'subheader_font_size',
+            popper: t('Changing this control takes effect instantly'),
             status: 'input-drop',
-            multiple: true,
+            multiple: false,
             type: 'normal',
             savedType: 'expressions',
           },
-          formFilters,
-          formSortBy,
           {
-            label: t('ORDERING'),
-            name: 'order_by_cols',
-            popper: t('Order results by selected columns'),
-            placeholder: t('Select ...'),
-            status: 'multiple-select',
-            options: chartFormsOption.order_by_cols,
+            label: t('NUMBER FORMAT'),
+            name: 'number_format',
+            status: 'input-drop',
+            multiple: false,
+            type: 'normal',
+            savedType: 'expressions',
+            popper: t(
+              'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.',
+            ),
+            options: [],
           },
           {
-            label: t('SERVER PAGINATION'),
-            name: 'server_pagination',
-            status: 'checkbox',
+            label: t('DATE FORMAT'),
+            name: 'time_format',
+            status: 'input-drop',
+            multiple: false,
+            type: 'normal',
+            savedType: 'expressions',
+            popper: t('D3 format syntax: https://github.com/d3/d3-format'),
+            options: [],
           },
           {
-            label: t('SERVER PAGE LENGTH'),
-            name: 'server_page_length',
-            popper: t('Rows per page, 0 means no pagination'),
-            placeholder: t('Select ...'),
-            status: 'select',
-            options: chartFormsOption.server_page_length,
+            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,
+              },
+            ],
           },
-          sortDescending,
           {
-            label: t('SHOW TOTALS'),
-            name: 'show_totals',
+            label: t('FORCE DATE FORMAT'),
+            name: 'force_timestamp_formatting',
             status: 'checkbox',
+            popper: t(
+              'Use date formatting even when metric value is not a timestamp',
+            ),
           },
+          //need to Conditional Formatting
         ],
       },
     ],
   },
   {
-    chart_name: 'big_number_total',
+    chart_name: 'pie',
     collapses: [
       {
-        collapse_label: t('Query'),
+        collapse_label: t('Chart Options'),
         collapse_popper_error: t('This section contains validation errors'),
-        collapse_active: 'query',
-        forms: [formMetric, formFilters],
-      },
-      {
-        collapse_label: t('Display settings'),
-        collapse_active: 'display_settings',
+        collapse_active: 'chart_options',
         forms: [
           {
-            name: 'subheader',
-            label: t('SUBHEADER'),
+            label: t('COLOR SCHEME'),
+            name: 'color_scheme',
+            status: 'color',
+            popper: t('The color scheme for rendering chart'),
+          },
+          {
+            label: t('PERCENTAGE THRESHOLD'),
+            name: 'show_labels_threshold',
             status: 'input',
+            number: true,
+            popper: t(
+              'Minimum threshold in percentage points for showing labels.',
+            ),
+          },
+          {
+            label: t('SHOW LEGEND'),
+            name: 'show_legend',
+            status: 'checkbox',
+            popper: t('Whether to display a legend for the chart'),
+          },
+          {
+            label: t('LABEL TYPE'),
+            name: 'label_type',
+            status: 'input-drop',
+            multiple: false,
+            type: 'normal',
+            savedType: 'expressions',
+            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',
+            popper: t(
+              'D3 format syntax: https://github.com/d3/d3-format Only applies when "Label Type" is set to show values.',
+            ),
+            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('SHOW LABELS'),
+            name: 'show_labels',
+            status: 'checkbox',
+            popper: t('Whether to display the labels.'),
+          },
+          {
+            label: t('PUT LABELS OUTSIDE'),
+            name: 'labels_outside',
+            status: 'checkbox',
+            popper: t('Put the labels outside of the pie?'),
+          },
+          {
+            label: t('LABEL LINE'),
+            name: 'label_line',
+            status: 'checkbox',
+            popper: t('Draw line from Pie to label when labels outside?'),
           },
-        ],
-      },
-    ],
-  },
-  {
-    chart_name: 'pie',
-    collapses: [
-      {
-        collapse_label: t('Query'),
-        collapse_popper_error: t('This section contains validation errors'),
-        collapse_active: 'query',
-        forms: [
           {
-            label: t('SORT BY METRIC'),
-            name: 'sort_by_metric',
+            label: t('SHOW TOTAL'),
+            name: 'show_total',
             status: 'checkbox',
+            popper: t('Whether to display the aggregate count.'),
           },
           {
             label: t('OUTER RADIUS'),
@@ -486,6 +576,22 @@ const DvtChartCustomize: DvtChartCustomizeProps[] = [
               step: 1,
             },
           },
+          {
+            label: t('DONUT'),
+            name: 'donut',
+            status: 'checkbox',
+            popper: t('Do you want a donut or a pie?'),
+          },
+          {
+            label: t('INNER RADIUS'),
+            name: 'innerRadius',
+            status: 'range',
+            rangeConfig: {
+              min: 0,
+              max: 100,
+              step: 1,
+            },
+          },
         ],
       },
     ],