feat: new vis type selector design (DHIS2-7855) (#1169)

dhis2 · Aug 11, 2020 · 50939b5 · 50939b5
1 parent a2a4cbe
commit 50939b5
Show file tree

Hide file tree

Showing 21 changed files with 262 additions and 308 deletions.
diff --git 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
@@ -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
@@ -4,23 +4,20 @@ import PropTypes from 'prop-types'
 const AreaIcon = ({
     style = { paddingRight: '8px', width: 24, height: 24 },
 }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <g>
-                <mask id="mask-area-icon" fill="white">
-                    <rect x="0" y="0" width="48" height="48" />
-                </mask>
-                <g />
-                <polygon
-                    stroke="#1976D2"
-                    strokeWidth="2"
-                    fill="#63A4FF"
-                    mask="url(#mask-area-icon)"
-                    points="4 28 16 16 26.7935166 26.7935166 33.0558406 20.5311926 53 36 53 51 0 51 0 28"
-                />
-                <rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
-                <rect fill="#9E9E9E" x="0" y="46" width="48" height="2" />
-            </g>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style={style}>
+        <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <polygon fill="#4A5768" points="6 6 8 6 8 42 6 42" />
+            <polygon fill="#4A5768" points="6 40 42 40 42 42 6 42" />
+            <polygon
+                fill="#90CAF9"
+                points="28 36 34 29 27 24 31 17 20 10 12 10 12 36"
+            />
+            <polyline
+                stroke="#147CD7"
+                strokeWidth="2"
+                points="28 36 34 29 27 24 31 17 20 10"
+            />
         </g>
     </svg>
 )

diff --git 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 },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <rect fill="#63A4FF" x="2" y="4" width="17" height="10" />
-            <rect fill="#1976D2" x="2" y="18" width="34" height="10" />
-            <rect fill="#004BA0" x="2" y="32" width="40" height="10" />
-            <rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
-            <rect fill="#9E9E9E" x="0" y="46" width="48" height="2" />
+        <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <polygon fill="#147CD7" points="12 22 18 22 18 36 12 36" />
+            <polygon fill="#147CD7" points="22 9 28 9 28 36 22 36" />
+            <polygon fill="#147CD7" points="32 19 38 19 38 36 32 36" />
+            <polygon fill="#4A5768" points="6 6 8 6 8 42 6 42" />
+            <polygon fill="#4A5768" points="6 40 42 40 42 42 6 42" />
         </g>
     </svg>
 )

diff --git 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 },
 }) => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <rect fill="#63A4FF" x="6" y="14" width="10" height="32" />
-            <rect fill="#1976D2" x="20" y="24" width="10" height="22" />
-            <rect fill="#004BA0" x="36" y="4" width="10" height="42" />
-            <rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
-            <rect fill="#9E9E9E" x="0" y="46" width="48" height="2" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style={style}>
+        <g fill="none" fillRule="evenodd">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <polygon fill="#147CD7" points="12 12 18 12 18 36 12 36" />
+            <polygon fill="#147CD7" points="22 22 28 22 28 36 22 36" />
+            <polygon fill="#147CD7" points="32 7 38 7 38 36 32 36" />
+            <polygon fill="#4A5768" points="6 6 8 6 8 42 6 42" />
+            <polygon fill="#4A5768" points="6 40 42 40 42 42 6 42" />
         </g>
     </svg>
 )

diff --git 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 },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <g transform="translate(0.000000, -12.000000)">
-                <path
-                    d="M2,36 C2,23.8497355 11.8497355,14 24,14 C36.1502645,14 46,23.8497355 46,36 L48,36 C48,22.745166 37.254834,12 24,12 C10.745166,12 0,22.745166 0,36 L2,36 Z"
-                    fill="#9E9E9E"
-                    fillRule="nonzero"
-                />
-                <path
-                    d="M39.5630877,20.4405157 C39.0656993,19.9377314 38.5441136,19.4570095 38,19 C34.2678935,15.9151064 29.3575953,14 24,14 C11.8497355,14 2,23.8497355 2,36 L8,36 C8,27.163444 15.163444,20 24,20 C27.7876065,20 31.3827316,21.3146632 34.1773496,23.6246453 C34.5775703,23.9608232 34.9595684,24.3130995 35.3225781,24.6801975 L39.5630877,20.4405157 Z"
-                    fill="#63A4FF"
-                    fillRule="nonzero"
-                />
-            </g>
+        <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <path
+                stroke="#4A5768"
+                strokeWidth="2"
+                d="M32,8 C23.163444,8 16,15.163444 16,24 C16,32.836556 23.163444,40 32,40 L32,40"
+            />
+            <path
+                stroke="#147CD7"
+                strokeWidth="6"
+                d="M24.1695806,17.7796867 C22.8114502,19.4870869 22,21.6487813 22,24 C22,29.5228475 26.4771525,34 32,34"
+            />
         </g>
     </svg>
 )

diff --git 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' },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <g>
-                <g>
-                    <mask id="mask-globe-icon" fill="white">
-                        <rect x="0" y="0" width="48" height="48" />
-                    </mask>
-                    <circle
-                        stroke="#1976D2"
-                        strokeWidth="2"
-                        mask="url(#mask-globe-icon)"
-                        cx="24"
-                        cy="24"
-                        r="23"
-                    />
-                    <polyline
-                        stroke="#1976D2"
-                        strokeWidth="2"
-                        mask="url(#mask-globe-icon)"
-                        points="1 21 4 24 8 26 9 24 6 19 11 18 18 12 14 9 16 6 15 3"
-                    />
-                    <polyline
-                        stroke="#1976D2"
-                        strokeWidth="2"
-                        mask="url(#mask-globe-icon)"
-                        points="47 25 45 21 43 19 40 18 37 18 34 17 32 18 30 23 33 27 37 27 38 30 38 38 38.5 42"
-                    />
-                    <polyline
-                        stroke="#1976D2"
-                        strokeWidth="2"
-                        mask="url(#mask-globe-icon)"
-                        points="38 6 37 7 34 6 32 8 34 10 33 12 33 15 37 14 39 15 43 12"
-                    />
-                    <polyline
-                        stroke="#1976D2"
-                        strokeWidth="2"
-                        mask="url(#mask-globe-icon)"
-                        points="18 46 16 41 15 36 13 34 10 31 11 28 14 26 18 27 20 29 23 30 25 32 25 36 23 40 21 47"
-                    />
-                </g>
+        <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <path
+                fill="#4A5768"
+                fillRule="nonzero"
+                d="M24,7 C14.6111593,7 7,14.6111593 7,24 C7,33.3888407 14.6111593,41 24,41 C33.3888407,41 41,33.3888407 41,24 C41,14.6111593 33.3888407,7 24,7 Z M24,9 C32.2842712,9 39,15.7157288 39,24 C39,32.2842712 32.2842712,39 24,39 C15.7157288,39 9,32.2842712 9,24 C9,15.7157288 15.7157288,9 24,9 Z"
+            />
+            <g fillRule="nonzero" transform="translate(7 7)">
+                <polygon
+                    fill="#4A5768"
+                    points="9.676 2.441 11.574 1.809 12.437 4.398 11.273 6.142 14.347 8.448 8.244 13.679 5.837 14.16 7.515 16.956 6.114 19.758 2.241 17.822 .001 15.582 1.415 14.168 3.426 16.178 5.219 17.075 5.235 17.043 2.662 12.756 7.338 11.82 11.153 8.551 8.56 6.607 10.229 4.102"
+                />
+                <polygon
+                    fill="#4A5768"
+                    points="23.454 13.474 22.387 16.141 23.874 18.125 26.929 18.125 27.917 21.088 27.916 26.856 28.263 29.626 26.279 29.874 25.924 27.041 25.917 26.917 25.916 21.413 25.487 20.125 22.875 20.125 20.113 16.442 21.879 12.026 24.007 10.962 26.371 11.75 28.496 11.75 30.999 12.584 32.697 14.283 34.186 17.261 32.397 18.156 31.053 15.468 29.918 14.332 28.173 13.75 26.046 13.75 24.16 13.121"
+                />
+                <polygon
+                    fill="#4A5768"
+                    points="21.252 5.667 23.813 3.106 25.938 3.814 26.21 3.543 27.624 4.957 26.478 6.102 24.353 5.394 24.08 5.666 25.3 6.886 24.374 8.737 24.374 9.344 26.325 8.857 27.519 9.454 29.858 7.7 31.058 9.3 27.731 11.796 26.091 10.976 22.375 11.906 22.375 8.264 22.866 7.28"
+                />
+                <polygon
+                    fill="#147CD7"
+                    points="6.951 19.192 9.73 17.339 13.261 18.222 14.706 19.667 16.832 20.376 18.708 22.252 18.708 25.736 17.228 28.697 15.837 33.566 13.913 33.017 15.33 28.059 15.397 27.886 16.708 25.262 16.708 23.08 15.75 22.123 13.626 21.416 12.238 20.028 10.103 19.493 8.632 20.475 8.227 21.688 11.546 25.007 12.295 28.755 13.678 32.212 11.822 32.955 10.405 29.413 10.353 29.238 9.703 25.993 5.939 22.228"
+                />
+                <path
+                    fill="#4A5768"
+                    d="M17,0 C26.3888407,0 34,7.61115925 34,17 C34,26.3888407 26.3888407,34 17,34 C7.61115925,34 0,26.3888407 0,17 C0,7.61115925 7.61115925,0 17,0 Z M17,2 C8.71572875,2 2,8.71572875 2,17 C2,25.2842712 8.71572875,32 17,32 C25.2842712,32 32,25.2842712 32,17 C32,8.71572875 25.2842712,2 17,2 Z"
+                />
             </g>
         </g>
     </svg>

diff --git 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 },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <g>
-                <mask id="mask-line-icon" fill="white">
-                    <rect x="0" y="0" width="48" height="48" />
-                </mask>
-                <polygon
-                    stroke="#1976D2"
-                    strokeWidth="2"
-                    mask="url(#mask-line-icon)"
-                    points="4 28 16 16 26.7935166 26.7935166 33.0558406 20.5311926 53 36 53 51 0 51 0 28"
-                />
-                <rect fill="#9E9E9E" x="0" y="0" width="2" height="48" />
-                <rect fill="#9E9E9E" x="0" y="46" width="48" height="2" />
-            </g>
+        <g fill="none" fillRule="evenodd" transform="matrix(0 -1 -1 0 48 48)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <polygon fill="#4A5768" points="6 6 8 6 8 42 6 42" />
+            <polygon fill="#4A5768" points="6 40 42 40 42 42 6 42" />
+            <polyline
+                stroke="#147CD7"
+                strokeWidth="2"
+                points="30 36 23 30 29 24 17 18 28 10"
+            />
         </g>
     </svg>
 )

diff --git 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 },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <defs>
-            <mask id="mask-4" fill="white">
-                <circle cx="24" cy="24" r="24" />
-            </mask>
-        </defs>
-        <g stroke="none" strokeWidth="0" fill="none" fillRule="evenodd">
-            <g transform="translate(24.000000, 24.000000) rotate(-135.000000) translate(-24.000000, -24.000000) ">
-                <g
-                    stroke="none"
-                    fill="none"
-                    strokeDasharray="30.17142857142857,240"
-                    mask="url(#mask-4)"
-                    strokeWidth="48"
-                >
-                    <path
-                        stroke="#63A4FF"
-                        d="M24 48C37.254834 48 48 37.254834 48 24 48 10.745166 37.254834 0 24 0 10.745166 0 0 10.745166 0 24 0 37.254834 10.745166 48 24 48Z"
-                    />
-                </g>
-                <g
-                    stroke="none"
-                    fill="none"
-                    strokeDasharray="82.97142857142858,240"
-                    mask="url(#mask-4)"
-                    transform="translate(24.000000, 24.000000) rotate(-72.000000) translate(-24.000000, -24.000000) "
-                    strokeWidth="48"
-                >
-                    <path
-                        stroke="#1976D2"
-                        d="M24 48C37.254834 48 48 37.254834 48 24 48 10.745166 37.254834 0 24 0 10.745166 0 0 10.745166 0 24 0 37.254834 10.745166 48 24 48Z"
-                    />
-                </g>
-                <g
-                    stroke="none"
-                    fill="none"
-                    strokeDasharray="37.71428571428572,240"
-                    mask="url(#mask-4)"
-                    transform="translate(24.000000, 24.000000) rotate(-270.000000) translate(-24.000000, -24.000000) "
-                    strokeWidth="48"
-                >
-                    <path
-                        stroke="#004BA0"
-                        d="M24 48C37.254834 48 48 37.254834 48 24 48 10.745166 37.254834 0 24 0 10.745166 0 0 10.745166 0 24 0 37.254834 10.745166 48 24 48Z"
-                    />
-                </g>
-            </g>
+        <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <circle cx="24" cy="24" r="16" stroke="#4A5768" strokeWidth="2" />
+            <path
+                fill="#FFC324"
+                d="M11,24 C11,31.1797017 16.8202983,37 24,37 C31.1797017,37 37,31.1797017 37,24 C37,16.8202983 31.1797017,11 24,11 L24,24 L11,24 Z"
+                transform="rotate(165 24 24)"
+            />
+            <path
+                fill="#147CD7"
+                d="M11,24 C11,31.1797017 16.8202983,37 24,37 C31.1797017,37 37,31.1797017 37,24 C37,16.8202983 31.1797017,11 24,11 L24,24 L11,24 Z"
+                transform="rotate(-15 24 24)"
+            />
         </g>
     </svg>
 )

diff --git 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 },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g fill="none" fillRule="evenodd">
             <polygon points="0 0 48 0 48 48 0 48" />
             <rect
-                stroke="#4A5768"
-                strokeWidth="2"
-                x="7"
-                y="11"
                 width="34"
                 height="26"
+                x="7"
+                y="11"
+                stroke="#4A5768"
+                strokeWidth="2"
             />
-            <rect fill="#4A5768" x="8" y="18" width="32" height="2" />
-            <rect fill="#4A5768" x="19" y="11" width="2" height="26" />
-            <rect fill="#4A5768" x="8" y="24" width="32" height="2" />
-            <rect fill="#4A5768" x="8" y="30" width="32" height="2" />
+            <rect width="32" height="2" x="8" y="18" fill="#4A5768" />
+            <rect width="2" height="26" x="19" y="11" fill="#4A5768" />
+            <rect width="32" height="2" x="8" y="24" fill="#4A5768" />
+            <rect width="32" height="2" x="8" y="30" fill="#4A5768" />
         </g>
     </svg>
 )

diff --git 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 },
 }) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,48,48" style={style}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <circle stroke="#9E9E9E" strokeWidth="2" cx="24" cy="24" r="23" />
-            <circle stroke="#9E9E9E" strokeWidth="2" cx="24" cy="24" r="15" />
-            <circle stroke="#9E9E9E" strokeWidth="2" cx="24" cy="24" r="5" />
-            <circle fill="#1976D2" cx="24" cy="9" r="2" />
-            <circle fill="#1976D2" cx="11" cy="31" r="2" />
-            <circle fill="#63A4FF" cx="24" cy="39" r="2" />
-            <circle fill="#004BA0" cx="39" cy="24" r="2" />
-            <circle fill="#004BA0" cx="40" cy="40" r="2" />
+        <g fill="none" fillRule="evenodd" transform="rotate(90 24 24)">
+            <polygon points="0 0 48 0 48 48 0 48" />
+            <circle cx="24" cy="24" r="16" stroke="#4A5768" strokeWidth="2" />
+            <circle cx="24" cy="24" r="9" stroke="#4A5768" strokeWidth="2" />
+            <circle cx="24" cy="33" r="3" fill="#147CD7" />
+            <circle cx="10" cy="16" r="3" fill="#147CD7" />
+            <circle cx="37" cy="15" r="3" fill="#147CD7" />
+            <polygon
+                stroke="#147CD7"
+                strokeWidth="2"
+                points="24 33 10 16 37 15"
+            />
         </g>
     </svg>
 )