From 50939b5265385ff267cdc663cfaaf0aa07b22665 Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 11 Aug 2020 16:19:11 +0200 Subject: [PATCH] feat: new vis type selector design (DHIS2-7855) (#1169) --- packages/app/i18n/en.pot | 3 + packages/app/package.json | 2 +- packages/app/src/assets/AreaIcon.js | 31 ++++----- packages/app/src/assets/BarIcon.js | 13 ++-- packages/app/src/assets/ColumnIcon.js | 15 +++-- packages/app/src/assets/GaugeIcon.js | 25 ++++--- packages/app/src/assets/GlobeIcon.js | 67 ++++++++----------- packages/app/src/assets/LineIcon.js | 23 +++---- packages/app/src/assets/PieIcon.js | 59 ++++------------ packages/app/src/assets/PivotTableIcon.js | 18 ++--- packages/app/src/assets/RadarIcon.js | 21 +++--- packages/app/src/assets/SingleValueIcon.js | 38 ++++++----- packages/app/src/assets/StackedBarIcon.js | 26 +++---- packages/app/src/assets/StackedColumnIcon.js | 40 +++-------- .../app/src/assets/YearOverYearColumnIcon.js | 22 +++--- .../app/src/assets/YearOverYearLineIcon.js | 40 ++++------- .../VisualizationTypeListItem.js | 11 ++- .../VisualizationTypeSelector.js | 43 ++++++------ .../VisualizationTypeSelector.module.css | 63 +++++++++++------ packages/plugin/package.json | 2 +- yarn.lock | 8 +-- 21 files changed, 262 insertions(+), 308 deletions(-) diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot index 7e5865aec0..fdd5e7fbbf 100644 --- a/packages/app/i18n/en.pot +++ b/packages/app/i18n/en.pot @@ -540,6 +540,9 @@ msgstr "" msgid "Open as Map" msgstr "" +msgid "Visually plot data on a world map. Data elements use separate map layers." +msgstr "" + msgid "Reporting rate" msgstr "" diff --git a/packages/app/package.json b/packages/app/package.json index 3dcbbeac09..1ba53453d6 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -12,7 +12,7 @@ "redux-mock-store": "^1.5.4" }, "dependencies": { - "@dhis2/analytics": "^8.1.0", + "@dhis2/analytics": "^8.2.0", "@dhis2/app-runtime": "*", "@dhis2/d2-i18n": "*", "@dhis2/d2-ui-file-menu": "^7.0.4", diff --git a/packages/app/src/assets/AreaIcon.js b/packages/app/src/assets/AreaIcon.js index 59395e856a..c48ab4843c 100644 --- a/packages/app/src/assets/AreaIcon.js +++ b/packages/app/src/assets/AreaIcon.js @@ -4,23 +4,20 @@ import PropTypes from 'prop-types' const AreaIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - - - + + + + + + + ) diff --git a/packages/app/src/assets/BarIcon.js b/packages/app/src/assets/BarIcon.js index 62a4932b37..fcd13bc584 100644 --- a/packages/app/src/assets/BarIcon.js +++ b/packages/app/src/assets/BarIcon.js @@ -5,12 +5,13 @@ const BarIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - + + + + + + + ) diff --git a/packages/app/src/assets/ColumnIcon.js b/packages/app/src/assets/ColumnIcon.js index 59dfa47434..8744d3a382 100644 --- a/packages/app/src/assets/ColumnIcon.js +++ b/packages/app/src/assets/ColumnIcon.js @@ -4,13 +4,14 @@ import PropTypes from 'prop-types' const ColumnIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - + + + + + + + + ) diff --git a/packages/app/src/assets/GaugeIcon.js b/packages/app/src/assets/GaugeIcon.js index 3ad4844f11..f17d7f968c 100644 --- a/packages/app/src/assets/GaugeIcon.js +++ b/packages/app/src/assets/GaugeIcon.js @@ -5,19 +5,18 @@ const GaugeIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - + + + + ) diff --git a/packages/app/src/assets/GlobeIcon.js b/packages/app/src/assets/GlobeIcon.js index 8ca29f0060..a86c25b03e 100644 --- a/packages/app/src/assets/GlobeIcon.js +++ b/packages/app/src/assets/GlobeIcon.js @@ -5,45 +5,34 @@ const GlobeIcon = ({ style = { width: 24, height: 24, paddingRight: '8px' }, }) => ( - - - - - - - - - - - - + + + + + + + + + diff --git a/packages/app/src/assets/LineIcon.js b/packages/app/src/assets/LineIcon.js index c7b8b0dc0b..2308f68ad5 100644 --- a/packages/app/src/assets/LineIcon.js +++ b/packages/app/src/assets/LineIcon.js @@ -5,20 +5,15 @@ const LineIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - + + + + + ) diff --git a/packages/app/src/assets/PieIcon.js b/packages/app/src/assets/PieIcon.js index 55060dc23e..e4e4868bc1 100644 --- a/packages/app/src/assets/PieIcon.js +++ b/packages/app/src/assets/PieIcon.js @@ -5,52 +5,19 @@ const PieIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - - - - - - - - - + + + + + ) diff --git a/packages/app/src/assets/PivotTableIcon.js b/packages/app/src/assets/PivotTableIcon.js index 66932067a0..85fbba7124 100644 --- a/packages/app/src/assets/PivotTableIcon.js +++ b/packages/app/src/assets/PivotTableIcon.js @@ -5,20 +5,20 @@ const PivotTableIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - + - - - - + + + + ) diff --git a/packages/app/src/assets/RadarIcon.js b/packages/app/src/assets/RadarIcon.js index 830a18c8c1..5390f0b543 100644 --- a/packages/app/src/assets/RadarIcon.js +++ b/packages/app/src/assets/RadarIcon.js @@ -5,15 +5,18 @@ const RadarIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - + + + + + + + + ) diff --git a/packages/app/src/assets/SingleValueIcon.js b/packages/app/src/assets/SingleValueIcon.js index 983fcb03d4..9a2628db3f 100644 --- a/packages/app/src/assets/SingleValueIcon.js +++ b/packages/app/src/assets/SingleValueIcon.js @@ -5,22 +5,28 @@ const SingleValueIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - + + + + + + 123 + + + ) diff --git a/packages/app/src/assets/StackedBarIcon.js b/packages/app/src/assets/StackedBarIcon.js index 838be7fce7..3907a50a28 100644 --- a/packages/app/src/assets/StackedBarIcon.js +++ b/packages/app/src/assets/StackedBarIcon.js @@ -5,22 +5,16 @@ const StackedBarIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - + + + + + + + + + + ) diff --git a/packages/app/src/assets/StackedColumnIcon.js b/packages/app/src/assets/StackedColumnIcon.js index 867eb394d1..a73f4ec4ac 100644 --- a/packages/app/src/assets/StackedColumnIcon.js +++ b/packages/app/src/assets/StackedColumnIcon.js @@ -5,36 +5,16 @@ const StackedColumnIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - + + + + + + + + + + ) diff --git a/packages/app/src/assets/YearOverYearColumnIcon.js b/packages/app/src/assets/YearOverYearColumnIcon.js index 7d25518dd3..269a3ad20f 100644 --- a/packages/app/src/assets/YearOverYearColumnIcon.js +++ b/packages/app/src/assets/YearOverYearColumnIcon.js @@ -5,18 +5,16 @@ const YearOverYearColumnIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - - - - + + + + + + + + + + ) diff --git a/packages/app/src/assets/YearOverYearLineIcon.js b/packages/app/src/assets/YearOverYearLineIcon.js index 27d5eafd68..b11b16ba9d 100644 --- a/packages/app/src/assets/YearOverYearLineIcon.js +++ b/packages/app/src/assets/YearOverYearLineIcon.js @@ -5,32 +5,20 @@ const YearOverYearLineIcon = ({ style = { paddingRight: '8px', width: 24, height: 24 }, }) => ( - - - - - - - - - - - + + + + + + ) diff --git a/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeListItem.js b/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeListItem.js index 50fec700bf..cd923452fe 100644 --- a/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeListItem.js +++ b/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeListItem.js @@ -8,6 +8,7 @@ import styles from './styles/VisualizationTypeSelector.module.css' const VisualizationTypeListItem = ({ iconType, label, + description, disabled, isSelected, onClick, @@ -24,20 +25,24 @@ const VisualizationTypeListItem = ({ return (
- +
{ } - - {label} +
+
+

{label}

+

{description}

+
) } VisualizationTypeListItem.propTypes = { + description: PropTypes.string, disabled: PropTypes.bool, iconType: PropTypes.string, isSelected: PropTypes.bool, diff --git a/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js b/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js index 6e70d5c9a1..d8820a116b 100644 --- a/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js +++ b/packages/app/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js @@ -2,10 +2,8 @@ import React, { useState, createRef } from 'react' import { createPortal } from 'react-dom' import PropTypes from 'prop-types' import { connect } from 'react-redux' - import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown' - -import { visTypeDisplayNames } from '@dhis2/analytics' +import { visTypeDisplayNames, visTypeDescriptions } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import { Card, Divider, Popper } from '@dhis2/ui' @@ -19,7 +17,6 @@ import { apiSaveAOInUserDataStore, CURRENT_AO_KEY, } from '../../api/userDataStore' - import VisualizationTypeListItem from './VisualizationTypeListItem' import ListItemIcon from './ListItemIcon' import styles from './styles/VisualizationTypeSelector.module.css' @@ -64,23 +61,31 @@ export const VisualizationTypeSelector = ( const VisTypesList = (
- {getVisTypes().map(type => ( +
+ {getVisTypes().map(type => ( + + ))} +
+ +
- ))} - - +
) diff --git a/packages/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css b/packages/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css index eb80891a5f..2c3884f84c 100644 --- a/packages/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css +++ b/packages/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css @@ -22,38 +22,55 @@ .cardContainer { margin: 1px 0; - max-width: 600px; min-height: 200px; } .listContainer { - height: 85vh; - overflow: auto; + max-width: 888px; + box-shadow: 0 0 1px 0 rgba(64, 75, 90, 0.29), + 0 3px 8px -2px rgba(64, 75, 90, 0.3); + border-radius: 3px; + padding: 12px 16px; +} + +.listSection { + display: flex; + flex-wrap: wrap; } .listItem { - height: 120px; - width: 126px; - margin: var(--spacers-dp8); - padding: 0; + width: 280px; + background: #fff; + border: 1px solid var(--colors-grey300); + border-radius: 3px; + padding: var(--spacers-dp8); display: flex; - flex-direction: column; - justify-content: center; - border-radius: var(--spacers-dp8); - float: left; + align-items: flex-start; + margin-bottom: var(--spacers-dp8); cursor: pointer; } +.listItem:nth-child(3n + 1) { + margin-right: var(--spacers-dp8); +} + +.listItem:nth-child(3n + 3) { + margin-left: var(--spacers-dp8); +} + .listItem:hover { - background-color: #fafafa; + background: var(--colors-grey050); + border-color: var(--colors-grey400); } .listItemActive { - background-color: #d9eceb; + background: var(--colors-teal050); + border: 2px solid var(--colors-teal300); } .listItemDisabled { opacity: 0.5; + cursor: not-allowed; } .listItemDisabled:hover { @@ -66,14 +83,20 @@ } .listItemIcon { - margin: 0 auto; - margin-bottom: 15px; + width: 48px; + height: 48px; + margin-right: var(--spacers-dp8); } -.listItemText { +.listItemName { font-size: 14px; - flex: none; - padding: 0; - white-space: normal; - text-align: center; + font-weight: 500; + margin: 4px 0; +} + +.listItemDescription { + font-size: 12px; + color: var(--colors-grey700); + margin: 0; + line-height: 1.4; } diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 5b03d73d18..5cbcd7b657 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -10,7 +10,7 @@ "access": "public" }, "dependencies": { - "@dhis2/analytics": "^8.1.0", + "@dhis2/analytics": "^8.2.0", "@dhis2/ui": "^5.3.1", "lodash-es": "^4.17.11" }, diff --git a/yarn.lock b/yarn.lock index df17498b51..5349250202 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,10 +1524,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@dhis2/analytics@^8.1.0": - version "8.1.0" - resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-8.1.0.tgz#fea90bb51930efbcc97bb9d14297e767613e65fa" - integrity sha512-8h4mN1HNFclGRm8JH0H9lvLCULvUxd5+O4VC0SPDa8uAGqs424Jj2g8/5x1ytwAKew30xkxyESSYyGysh8SEVg== +"@dhis2/analytics@^8.2.0": + version "8.2.0" + resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-8.2.0.tgz#8437dfd1f4c51e1f0fc0a0e3210404c2b9828971" + integrity sha512-Dg+3HhKwCLTcrCtFsutX7JhYWbVceLI3UUHP19zeg9ob6Z51UQ+bznVlfug4zDBPxL2WsWl4JgdbbUsAP4rD+w== dependencies: "@dhis2/d2-ui-org-unit-dialog" "^7.0.4" "@dhis2/ui" "^5.3.0"