fix: gauge plot lines and range values in options (#654)

* Adds support for plot lines and custom range values options for Gauge charts * Updated Analytics dep to v3.2.0 Co-authored-by: Jan Henrik Øverland <[email protected]>
dhis2 · Feb 12, 2020 · 7736b29 · 7736b29
1 parent 9de60dd
commit 7736b29
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 30 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-02-07T15:29:25.817Z\n"
-"PO-Revision-Date: 2020-02-07T15:29:25.817Z\n"
+"POT-Creation-Date: 2020-02-12T09:18:27.515Z\n"
+"PO-Revision-Date: 2020-02-12T09:18:27.515Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -214,10 +214,13 @@ msgstr ""
 msgid "Base line"
 msgstr ""
 
+msgid "Value"
+msgstr ""
+
 msgid "Title"
 msgstr ""
 
-msgid "Value"
+msgid "Base line title"
 msgstr ""
 
 msgid "Number"
@@ -307,6 +310,9 @@ msgstr ""
 msgid "Chart subtitle"
 msgstr ""
 
+msgid "Auto generated"
+msgstr ""
+
 msgid "Custom"
 msgstr ""
 
@@ -316,9 +322,6 @@ msgstr ""
 msgid "Chart title"
 msgstr ""
 
-msgid "Auto generated"
-msgstr ""
-
 msgid "Apply a legend to entire table"
 msgstr ""
 
@@ -450,6 +453,9 @@ msgstr ""
 msgid "Target line"
 msgstr ""
 
+msgid "Target line title"
+msgstr ""
+
 msgid "Top limit"
 msgstr ""
 

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -12,7 +12,7 @@
         "redux-mock-store": "^1.5.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^3.1.3",
+        "@dhis2/analytics": "^3.2.0",
         "@dhis2/d2-ui-core": "^6.5.3",
         "@dhis2/d2-ui-file-menu": "^6.5.3",
         "@dhis2/d2-ui-interpretations": "^6.5.3",

diff --git a/packages/app/src/components/VisualizationOptions/Options/BaseLine.js b/packages/app/src/components/VisualizationOptions/Options/BaseLine.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import i18n from '@dhis2/d2-i18n'
-import { Checkbox } from '@dhis2/ui-core'
+import { Checkbox, Label } from '@dhis2/ui-core'
 
 import { sGetUiOptions } from '../../../reducers/ui'
 import { acSetUiOptions } from '../../../actions/ui'
@@ -29,8 +29,14 @@ export const BaseLine = ({ enabled, onChange }) => (
             <div
                 className={`${tabSectionOptionToggleable.className} ${tabSectionOptionComplexInline.className}`}
             >
-                <BaseLineValue />
-                <BaseLineLabel />
+                <div>
+                    <Label>{i18n.t('Value')}</Label>
+                    <BaseLineValue />
+                </div>
+                <div>
+                    <Label>{i18n.t('Title')}</Label>
+                    <BaseLineLabel />
+                </div>
             </div>
         ) : null}
     </div>

diff --git a/packages/app/src/components/VisualizationOptions/Options/BaseLineLabel.js b/packages/app/src/components/VisualizationOptions/Options/BaseLineLabel.js
@@ -8,6 +8,7 @@ const BaseLineLabel = () => (
         type="text"
         width="280px"
         label={i18n.t('Title')}
+        placeholder={i18n.t('Base line title')}
         option={{
             name: 'baseLineLabel',
         }}

diff --git a/packages/app/src/components/VisualizationOptions/Options/TargetLine.js b/packages/app/src/components/VisualizationOptions/Options/TargetLine.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import i18n from '@dhis2/d2-i18n'
-import { Checkbox } from '@dhis2/ui-core'
+import { Checkbox, Label } from '@dhis2/ui-core'
 
 import { sGetUiOptions } from '../../../reducers/ui'
 import { acSetUiOptions } from '../../../actions/ui'
@@ -28,8 +28,14 @@ export const TargetLine = ({ enabled, onChange }) => (
             <div
                 className={`${tabSectionOptionToggleable.className} ${tabSectionOptionComplexInline.className}`}
             >
-                <TargetLineValue />
-                <TargetLineLabel />
+                <div>
+                    <Label>{i18n.t('Value')}</Label>
+                    <TargetLineValue />
+                </div>
+                <div>
+                    <Label>{i18n.t('Title')}</Label>
+                    <TargetLineLabel />
+                </div>
             </div>
         ) : null}
     </div>

diff --git a/packages/app/src/components/VisualizationOptions/Options/TargetLineLabel.js b/packages/app/src/components/VisualizationOptions/Options/TargetLineLabel.js
@@ -8,6 +8,7 @@ const TargetLineLabel = () => (
         type="text"
         width="280px"
         label={i18n.t('Title')}
+        placeholder={i18n.t('Target line title')}
         option={{
             name: 'targetLineLabel',
         }}

diff --git a/packages/app/src/modules/current.js b/packages/app/src/modules/current.js
@@ -69,13 +69,18 @@ export const getOptionsFromUi = ui => {
     })
 
     // cast option values to Number for some options
-    ;['baseLineValue', 'targetLineValue', 'sortOrder', 'topLimit'].forEach(
-        option => {
-            if (Object.prototype.hasOwnProperty.call(optionsFromUi, option)) {
-                optionsFromUi[option] = Number(optionsFromUi[option])
-            }
+    ;[
+        'baseLineValue',
+        'targetLineValue',
+        'sortOrder',
+        'topLimit',
+        'rangeAxisMinValue',
+        'rangeAxisMaxValue',
+    ].forEach(option => {
+        if (Object.prototype.hasOwnProperty.call(optionsFromUi, option)) {
+            optionsFromUi[option] = Number(optionsFromUi[option])
         }
-    )
+    })
 
     return optionsFromUi
 }

diff --git a/packages/app/src/modules/options/config.js b/packages/app/src/modules/options/config.js
@@ -20,6 +20,7 @@ import stackedColumnConfig from './stackedColumnConfig'
 import lineConfig from './lineConfig'
 import areaConfig from './areaConfig'
 import pieConfig from './pieConfig'
+import gaugeConfig from './gaugeConfig'
 
 export const getOptionsByType = type => {
     switch (type) {
@@ -36,8 +37,9 @@ export const getOptionsByType = type => {
             return lineConfig
         case VIS_TYPE_AREA:
             return areaConfig
-        case VIS_TYPE_PIE:
         case VIS_TYPE_GAUGE:
+            return gaugeConfig
+        case VIS_TYPE_PIE:
         case VIS_TYPE_SINGLE_VALUE:
             return pieConfig
         case VIS_TYPE_PIVOT_TABLE:

diff --git a/packages/app/src/modules/options/gaugeConfig.js b/packages/app/src/modules/options/gaugeConfig.js
@@ -0,0 +1,54 @@
+/* eslint-disable react/jsx-key */
+import React from 'react'
+import i18n from '@dhis2/d2-i18n'
+
+import TargetLine from '../../components/VisualizationOptions/Options/TargetLine'
+import BaseLine from '../../components/VisualizationOptions/Options/BaseLine'
+import AggregationType from '../../components/VisualizationOptions/Options/AggregationType'
+import HideTitle from '../../components/VisualizationOptions/Options/HideTitle'
+import HideSubtitle from '../../components/VisualizationOptions/Options/HideSubtitle'
+import AxisRange from '../../components/VisualizationOptions/Options/AxisRange'
+
+export default [
+    {
+        key: 'data-tab',
+        label: i18n.t('Data'),
+        content: [
+            {
+                key: 'data-lines',
+                label: i18n.t('Lines'),
+                content: React.Children.toArray([<TargetLine />, <BaseLine />]),
+            },
+            {
+                key: 'data-advanced',
+                label: i18n.t('Advanced'),
+                content: React.Children.toArray([<AggregationType />]),
+            },
+        ],
+    },
+    {
+        key: 'axes-tab',
+        label: i18n.t('Axes'),
+        content: [
+            {
+                key: 'axes-vertical-axis',
+                label: i18n.t('Vertical (y) axis'),
+                content: React.Children.toArray([<AxisRange />]),
+            },
+        ],
+    },
+    {
+        key: 'style-tab',
+        label: i18n.t('Style'),
+        content: [
+            {
+                key: 'style-titles',
+                label: i18n.t('Titles'),
+                content: React.Children.toArray([
+                    <HideTitle />,
+                    <HideSubtitle />,
+                ]),
+            },
+        ],
+    },
+]
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -6,7 +6,7 @@
     "module": "./build/es/lib.js",
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^3.1.3",
+        "@dhis2/analytics": "^3.2.0",
         "@material-ui/core": "^3.1.2",
         "d2-analysis": "33.2.11",
         "lodash-es": "^4.17.11",

diff --git a/yarn.lock b/yarn.lock
@@ -1442,10 +1442,10 @@
     react-beautiful-dnd "^10.1.1"
     styled-jsx "^3.2.1"
 
-"@dhis2/analytics@^3.1.3":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-3.1.3.tgz#44ea6812ad74620b26e43b8062e7f8e4cfaaabd8"
-  integrity sha512-8gGKivu6SxShvFbI6Md9NMqBKSjbQx4/9DdvUfqPZQ8w1vcC//kEuzMX+GBHBEvMuKfWJk0jzqYSj7mWXBhvUA==
+"@dhis2/analytics@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-3.2.0.tgz#f0566c629f4c50272a4df0332fd26eda1e738ba4"
+  integrity sha512-qt6Qm6jZMx+kDY1/kRJ9SGL5U5d32GXfWw7m3GF+I7t0LOgV0k39MmG/c6+d/VLfga/ZgYCKJ8vlPlhy3V8G0Q==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.4"
     "@dhis2/d2-ui-org-unit-dialog" "^6.3.2"
@@ -1456,7 +1456,7 @@
     classnames "^2.2.6"
     d2-utilizr "^0.2.16"
     d3-color "^1.2.3"
-    highcharts "^7.1.2"
+    highcharts "^7.2.1"
     lodash "^4.17.13"
     react-beautiful-dnd "^10.1.1"
     resize-observer-polyfill "^1.5.1"
@@ -1772,10 +1772,10 @@
   dependencies:
     prop-types "^15"
 
-"@dhis2/ui-core@^4.1.1", "@dhis2/ui-core@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-4.7.1.tgz#62f663896b67f8a2b1a557b5cb32f1352cf056bc"
-  integrity sha512-CHfesGZ15Gs08mCifqmW4LiOM+MpS2spkbdr3P27Yn0uPYjCOG9QbX0UIrdifIqraUSHqTgwtD2HAA4aG2IXEw==
+"@dhis2/ui-core@^4.1.1":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-4.9.0.tgz#d2af15cee87a7873741e8698ac2923c423f671c1"
+  integrity sha512-9Cf7Tv4JQ+2TX9CCoy3xGMn0P5FWvA1KNx9qzWFccHorEwlvbDYUbeAJaZ2LMnHUBeS5llmBbDByYzAH4K5SmA==
   dependencies:
     "@dhis2/prop-types" "^1.5.0"
     classnames "^2.2.6"
@@ -1788,6 +1788,14 @@
     "@dhis2/prop-types" "^1.5.0"
     classnames "^2.2.6"
 
+"@dhis2/ui-core@^4.7.1":
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-4.7.1.tgz#62f663896b67f8a2b1a557b5cb32f1352cf056bc"
+  integrity sha512-CHfesGZ15Gs08mCifqmW4LiOM+MpS2spkbdr3P27Yn0uPYjCOG9QbX0UIrdifIqraUSHqTgwtD2HAA4aG2IXEw==
+  dependencies:
+    "@dhis2/prop-types" "^1.5.0"
+    classnames "^2.2.6"
+
 "@dhis2/ui-widgets@^2.0.4":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@dhis2/ui-widgets/-/ui-widgets-2.0.6.tgz#95247dbdfad0ec7d6836f3ccbe8ae85adf5f631d"
@@ -7518,6 +7526,11 @@ highcharts@^7.1.2:
   resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-7.2.0.tgz#d6bd00240767cfab67210ead47c6cd015384e74d"
   integrity sha512-jOlMzj3oRuqNBoJg+rqHZI9vnlLHipwVfceJr00gAreXu8268UwahEh7yBGI/m1wa6Uc/XoBMIuzMpXUFMvFdg==
 
+highcharts@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-7.2.1.tgz#313c434bbfd4525a72b76c6bfbd9c39dfe2d1993"
+  integrity sha512-/fSUZiONmM+x49IQJNf8XwZGiNGOPRmxEOcd0xdJP9Xc3OlG46ZiUWgSLfhYQ9Oyhmzc3V3SKYCLud8+rKLi+w==
+
 history@^4.7.2:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"