fix: reorder options for consistency (DHIS2-9004) (#1153)

* Removes two incorrect fields in Style tab and adds missing section titles (areaConfig, lineConfig), as per DHIS2-9004 * Moves ShowData from Data to Style (areaConfig, lineConfig, stackedColumnConfig) * Adds missing section splitting in the Data tab (areaConfig, lineConfig) * Changes the label const to instead use the getLabel function (areaConfig, lineConfig)
dhis2 · Jul 27, 2020 · 519b0ba · 519b0ba
1 parent b5de74b
commit 519b0ba
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 35 deletions.
diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-06-02T04:24:38.833Z\n"
-"PO-Revision-Date: 2020-06-02T04:24:38.833Z\n"
+"POT-Creation-Date: 2020-07-21T09:20:20.828Z\n"
+"PO-Revision-Date: 2020-07-21T09:20:20.828Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -739,22 +739,22 @@ msgstr ""
 msgid "Data"
 msgstr ""
 
-msgid "Axes"
+msgid "Display"
 msgstr ""
 
-msgid "Vertical (y) axis"
+msgid "Lines"
 msgstr ""
 
-msgid "Horizontal (x) axis"
+msgid "Axes"
 msgstr ""
 
-msgid "Style"
+msgid "Vertical (y) axis"
 msgstr ""
 
-msgid "Display"
+msgid "Horizontal (x) axis"
 msgstr ""
 
-msgid "Lines"
+msgid "Style"
 msgstr ""
 
 msgid "Chart style"

diff --git a/packages/app/src/modules/options/areaConfig.js b/packages/app/src/modules/options/areaConfig.js
@@ -18,9 +18,7 @@ import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeA
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
 import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
-import Title from '../../components/VisualizationOptions/Options/Title'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
-import Subtitle from '../../components/VisualizationOptions/Options/Subtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 
 export default [
@@ -29,23 +27,31 @@ export default [
         getLabel: () => i18n.t('Data'),
         content: [
             {
-                key: 'data-section-1',
+                key: 'data-display',
+                getLabel: () => i18n.t('Display'),
                 content: React.Children.toArray([
-                    <ShowData />,
                     <PercentStackedValues />,
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
+                    <SortOrder />,
+                ]),
+            },
+            {
+                key: 'data-lines',
+                getLabel: () => i18n.t('Lines'),
+                content: React.Children.toArray([
                     <RegressionType />,
                     <TargetLine />,
                     <BaseLine />,
-                    <SortOrder />,
-                    <AggregationType />,
                 ]),
             },
             {
                 key: 'data-advanced',
                 getLabel: () => i18n.t('Advanced'),
-                content: React.Children.toArray([<CompletedOnly />]),
+                content: React.Children.toArray([
+                    <AggregationType />,
+                    <CompletedOnly />,
+                ]),
             },
         ],
     },
@@ -55,7 +61,7 @@ export default [
         content: [
             {
                 key: 'axes-vertical-axis',
-                label: i18n.t('Vertical (y) axis'),
+                getLabel: () => i18n.t('Vertical (y) axis'),
                 content: React.Children.toArray([
                     <RangeAxisLabel />,
                     <AxisRange />,
@@ -65,7 +71,7 @@ export default [
             },
             {
                 key: 'axes-horizontal-axis',
-                label: i18n.t('Horizontal (x) axis'),
+                getLabel: () => i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
@@ -75,12 +81,15 @@ export default [
         getLabel: () => i18n.t('Style'),
         content: [
             {
-                key: 'style-section-1',
+                key: 'style-chart-style',
+                getLabel: () => i18n.t('Chart style'),
+                content: React.Children.toArray([<ShowData />, <HideLegend />]),
+            },
+            {
+                key: 'style-titles',
+                getLabel: () => i18n.t('Titles'),
                 content: React.Children.toArray([
-                    <HideLegend />,
-                    <Title />,
                     <HideTitle />,
-                    <Subtitle />,
                     <HideSubtitle />,
                 ]),
             },

diff --git a/packages/app/src/modules/options/lineConfig.js b/packages/app/src/modules/options/lineConfig.js
@@ -17,9 +17,7 @@ import RangeAxisLabel from '../../components/VisualizationOptions/Options/RangeA
 import DomainAxisLabel from '../../components/VisualizationOptions/Options/DomainAxisLabel'
 import HideLegend from '../../components/VisualizationOptions/Options/HideLegend'
 import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
-import Title from '../../components/VisualizationOptions/Options/Title'
 import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
-import Subtitle from '../../components/VisualizationOptions/Options/Subtitle'
 import CompletedOnly from '../../components/VisualizationOptions/Options/CompletedOnly'
 
 export default [
@@ -28,22 +26,30 @@ export default [
         getLabel: () => i18n.t('Data'),
         content: [
             {
-                key: 'data-section-1',
+                key: 'data-display',
+                getLabel: () => i18n.t('Display'),
                 content: React.Children.toArray([
-                    <ShowData />,
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
+                    <SortOrder />,
+                ]),
+            },
+            {
+                key: 'data-lines',
+                getLabel: () => i18n.t('Lines'),
+                content: React.Children.toArray([
                     <RegressionType />,
                     <TargetLine />,
                     <BaseLine />,
-                    <SortOrder />,
-                    <AggregationType />,
                 ]),
             },
             {
                 key: 'data-advanced',
                 getLabel: () => i18n.t('Advanced'),
-                content: React.Children.toArray([<CompletedOnly />]),
+                content: React.Children.toArray([
+                    <AggregationType />,
+                    <CompletedOnly />,
+                ]),
             },
         ],
     },
@@ -53,7 +59,7 @@ export default [
         content: [
             {
                 key: 'axes-vertical-axis',
-                label: i18n.t('Vertical (y) axis'),
+                getLabel: () => i18n.t('Vertical (y) axis'),
                 content: React.Children.toArray([
                     <RangeAxisLabel />,
                     <AxisRange />,
@@ -63,7 +69,7 @@ export default [
             },
             {
                 key: 'axes-horizontal-axis',
-                label: i18n.t('Horizontal (x) axis'),
+                getLabel: () => i18n.t('Horizontal (x) axis'),
                 content: React.Children.toArray([<DomainAxisLabel />]),
             },
         ],
@@ -73,12 +79,15 @@ export default [
         getLabel: () => i18n.t('Style'),
         content: [
             {
-                key: 'style-section-1',
+                key: 'style-chart-style',
+                getLabel: () => i18n.t('Chart style'),
+                content: React.Children.toArray([<ShowData />, <HideLegend />]),
+            },
+            {
+                key: 'style-titles',
+                getLabel: () => i18n.t('Titles'),
                 content: React.Children.toArray([
-                    <HideLegend />,
-                    <Title />,
                     <HideTitle />,
-                    <Subtitle />,
                     <HideSubtitle />,
                 ]),
             },

diff --git a/packages/app/src/modules/options/stackedColumnConfig.js b/packages/app/src/modules/options/stackedColumnConfig.js
@@ -31,7 +31,6 @@ export default [
                 key: 'data-display',
                 getLabel: () => i18n.t('Display'),
                 content: React.Children.toArray([
-                    <ShowData />,
                     <PercentStackedValues />,
                     <CumulativeValues />,
                     <HideEmptyRowItems />,
@@ -86,6 +85,7 @@ export default [
                 key: 'style-chart-style',
                 getLabel: () => i18n.t('Chart style'),
                 content: React.Children.toArray([
+                    <ShowData />,
                     <NoSpaceBetweenColumns />,
                     <HideLegend />,
                     /* TODO new option <BackgroundLines /> */