You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by li...@apache.org on 2024/03/27 16:28:02 UTC

(superset) 01/04: added visual formatting section

This is an automated email from the ASF dual-hosted git repository.

lilykuang pushed a commit to branch table-time-comparison-color
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 6e69fa8ff8cfcdff178dc1d8e7a515d76aa2b1ca
Author: lilykuang <ji...@gmail.com>
AuthorDate: Mon Mar 18 14:54:48 2024 -0700

    added visual formatting section
---
 .../plugin-chart-table/src/controlPanel.tsx        | 82 ++++++++++++----------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
index cf0ad3d952..93402978b7 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
@@ -479,82 +479,92 @@ const config: ControlPanelConfig = {
               description: t('Whether to include a client-side search box'),
             },
           },
+        ],
+        [
           {
-            name: 'show_cell_bars',
+            name: 'allow_rearrange_columns',
             config: {
               type: 'CheckboxControl',
-              label: t('Cell bars'),
+              label: t('Allow columns to be rearranged'),
               renderTrigger: true,
-              default: true,
+              default: false,
               description: t(
-                'Whether to display a bar chart background in table columns',
+                "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.",
               ),
+              visibility: ({ controls }) =>
+                !controls?.enable_time_comparison?.value ||
+                !isFeatureEnabled(FeatureFlag.ChartPluginsExperimental),
             },
           },
         ],
         [
           {
-            name: 'align_pn',
+            name: 'column_config',
             config: {
-              type: 'CheckboxControl',
-              label: t('Align +/-'),
+              type: 'ColumnConfigControl',
+              label: t('Customize columns'),
+              description: t('Further customize how to display each column'),
+              width: 400,
+              height: 320,
               renderTrigger: true,
-              default: false,
-              description: t(
-                'Whether to align background charts with both positive and negative values at 0',
-              ),
+              shouldMapStateToProps() {
+                return true;
+              },
+              mapStateToProps(explore, _, chart) {
+                return {
+                  queryResponse: chart?.queriesResponse?.[0] as
+                    | ChartDataResponseResult
+                    | undefined,
+                };
+              },
             },
           },
+        ],
+      ],
+    },
+    {
+      label: t('Visual formatting'),
+      expanded: true,
+      controlSetRows: [
+        [
           {
-            name: 'color_pn',
+            name: 'show_cell_bars',
             config: {
               type: 'CheckboxControl',
-              label: t('Color +/-'),
+              label: t('Show Cell bars'),
               renderTrigger: true,
               default: true,
               description: t(
-                'Whether to colorize numeric values by whether they are positive or negative',
+                'Whether to display a bar chart background in table columns',
               ),
             },
           },
         ],
         [
           {
-            name: 'allow_rearrange_columns',
+            name: 'align_pn',
             config: {
               type: 'CheckboxControl',
-              label: t('Allow columns to be rearranged'),
+              label: t('Align +/-'),
               renderTrigger: true,
               default: false,
               description: 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.",
+                'Whether to align background charts with both positive and negative values at 0',
               ),
-              visibility: ({ controls }) =>
-                !controls?.enable_time_comparison?.value ||
-                !isFeatureEnabled(FeatureFlag.ChartPluginsExperimental),
             },
           },
         ],
         [
           {
-            name: 'column_config',
+            name: 'color_pn',
             config: {
-              type: 'ColumnConfigControl',
-              label: t('Customize columns'),
-              description: t('Further customize how to display each column'),
-              width: 400,
-              height: 320,
+              type: 'CheckboxControl',
+              label: t('add colors to cell bars for +/-'),
               renderTrigger: true,
-              shouldMapStateToProps() {
-                return true;
-              },
-              mapStateToProps(explore, _, chart) {
-                return {
-                  queryResponse: chart?.queriesResponse?.[0] as
-                    | ChartDataResponseResult
-                    | undefined,
-                };
-              },
+              default: true,
+              description: t(
+                'Whether to colorize numeric values by whether they are positive or negative',
+              ),
             },
           },
         ],