fix: layout for pivot tables (#577)

* fix: rename constant value * fix: update analytics dep
dhis2 · Jan 28, 2020 · 033be21 · 033be21
1 parent ac05af6
commit 033be21
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 14 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-01-20T08:17:07.464Z\n"
-"PO-Revision-Date: 2020-01-20T08:17:07.464Z\n"
+"POT-Creation-Date: 2020-01-28T14:43:38.800Z\n"
+"PO-Revision-Date: 2020-01-28T14:43:38.800Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -104,6 +104,12 @@ msgstr ""
 msgid "{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}"
 msgstr ""
 
+msgid "Columns"
+msgstr ""
+
+msgid "Rows"
+msgstr ""
+
 msgid "None selected"
 msgstr ""
 
@@ -394,15 +400,15 @@ msgstr ""
 msgid "Skip rounding"
 msgstr ""
 
-msgid "Custom sort order"
-msgstr ""
-
 msgid "Low to high"
 msgstr ""
 
 msgid "High to low"
 msgstr ""
 
+msgid "Custom sort order"
+msgstr ""
+
 msgid "Add a subtitle"
 msgstr ""
 
@@ -440,8 +446,8 @@ msgid "No data available"
 msgstr ""
 
 msgid ""
-"The selected dimensions didn’t return any data. There may be no data, or\n"
-"            you may not have access to it."
+"The selected dimensions didn’t return any data. There may be no data, or "
+"you may not have access to it."
 msgstr ""
 
 msgid "Series is empty"

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": "^2.8.5",
+        "@dhis2/analytics": "^2.8.6",
         "@dhis2/d2-ui-core": "^6.5.0",
         "@dhis2/d2-ui-file-menu": "^6.5.0",
         "@dhis2/d2-ui-interpretations": "^6.5.0",

diff --git a/packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js b/packages/app/src/components/Layout/DefaultLayout/DefaultAxis.js
@@ -66,7 +66,9 @@ class Axis extends React.Component {
                 onDragOver={this.onDragOver}
                 onDrop={this.onDrop}
             >
-                <div style={styles.label}>{getAxisName(axisId)}</div>
+                <div style={styles.label}>
+                    {this.props.label || getAxisName(axisId)}
+                </div>
                 <Droppable droppableId={axisId} direction="horizontal">
                     {provided => (
                         <div
@@ -122,6 +124,7 @@ Axis.propTypes = {
     getOpenHandler: PropTypes.func,
     getRemoveHandler: PropTypes.func,
     itemsByDimension: PropTypes.object,
+    label: PropTypes.string,
     layout: PropTypes.object,
     style: PropTypes.object,
     type: PropTypes.string,

diff --git a/packages/app/src/components/Layout/Layout.js b/packages/app/src/components/Layout/Layout.js
@@ -6,20 +6,23 @@ import {
     LAYOUT_TYPE_DEFAULT,
     LAYOUT_TYPE_PIE,
     LAYOUT_TYPE_YEAR_OVER_YEAR,
+    LAYOUT_TYPE_PIVOT_TABLE,
     getLayoutTypeByVisType,
     canDimensionBeAddedToAxis,
 } from '@dhis2/analytics'
 
 import DefaultLayout from './DefaultLayout/DefaultLayout'
 import YearOverYearLayout from './YearOverYearLayout/YearOverYearLayout'
 import PieLayout from './PieLayout/PieLayout'
+import PivotTableLayout from './PivotTableLayout/PivotTableLayout'
 import { sGetUiLayout, sGetUiType } from '../../reducers/ui'
 import { acAddUiLayoutDimensions, acSetUiLayout } from '../../actions/ui'
 
 const componentMap = {
     [LAYOUT_TYPE_DEFAULT]: DefaultLayout,
     [LAYOUT_TYPE_PIE]: PieLayout,
     [LAYOUT_TYPE_YEAR_OVER_YEAR]: YearOverYearLayout,
+    [LAYOUT_TYPE_PIVOT_TABLE]: PivotTableLayout,
 }
 
 const Layout = props => {

diff --git a/packages/app/src/components/Layout/PivotTableLayout/PivotTableLayout.js b/packages/app/src/components/Layout/PivotTableLayout/PivotTableLayout.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import i18n from '@dhis2/d2-i18n'
+import {
+    AXIS_ID_COLUMNS,
+    AXIS_ID_ROWS,
+    AXIS_ID_FILTERS,
+} from '@dhis2/analytics'
+
+import DefaultAxis from '../DefaultLayout/DefaultAxis'
+import defaultAxisStyles from '../DefaultLayout/styles/DefaultAxis.style'
+import defaultLayoutStyles from '../DefaultLayout/styles/DefaultLayout.style'
+import pivotTableLayoutStyles from './styles/PivotTableLayout.style'
+
+const Layout = () => (
+    <div id="layout-ct" style={defaultLayoutStyles.ct}>
+        <div
+            id="axis-group-1"
+            style={{
+                ...defaultLayoutStyles.axisGroup,
+                ...pivotTableLayoutStyles.axisGroupLeft,
+            }}
+        >
+            <DefaultAxis
+                axisId={AXIS_ID_COLUMNS}
+                label={i18n.t('Columns')}
+                style={{
+                    ...defaultLayoutStyles.columns,
+                    ...defaultAxisStyles.axisContainerLeft,
+                }}
+            />
+            <DefaultAxis
+                axisId={AXIS_ID_ROWS}
+                label={i18n.t('Rows')}
+                style={{
+                    ...defaultLayoutStyles.rows,
+                    ...defaultAxisStyles.axisContainerLeft,
+                }}
+            />
+        </div>
+        <div
+            id="axis-group-2"
+            style={{
+                ...defaultLayoutStyles.axisGroup,
+                ...pivotTableLayoutStyles.axisGroupRight,
+            }}
+        >
+            <DefaultAxis
+                axisId={AXIS_ID_FILTERS}
+                style={defaultLayoutStyles.filters}
+            />
+        </div>
+    </div>
+)
+
+Layout.displayName = 'Layout'
+
+export default Layout
diff --git a/packages/app/src/components/Layout/PivotTableLayout/styles/PivotTableLayout.style.js b/packages/app/src/components/Layout/PivotTableLayout/styles/PivotTableLayout.style.js
@@ -0,0 +1,14 @@
+// Axis
+export const FILTER_AXIS_WIDTH = '50%'
+
+// Axis (generated)
+export const DIMENSION_AXIS_WIDTH = `${100 - parseInt(FILTER_AXIS_WIDTH, 10)}%`
+
+export default {
+    axisGroupLeft: {
+        flexBasis: DIMENSION_AXIS_WIDTH,
+    },
+    axisGroupRight: {
+        flexBasis: FILTER_AXIS_WIDTH,
+    },
+}
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": "^2.8.5",
+        "@dhis2/analytics": "^2.8.6",
         "@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@^2.8.5":
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.5.tgz#8c0ae9a5c3b63d49901f895630a080fd5e5358bf"
-  integrity sha512-+M8WSHvt7Jscuc5cS/HPsLQRRTKayf3GSQDuVIGToaYt7paskJBSK9gA8ldu6pcRkdYho7JPg7C852JEbM8Y4g==
+"@dhis2/analytics@^2.8.6":
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.6.tgz#15102d5155ba933e494b8b1409e81058899e1863"
+  integrity sha512-YY3f+RuCuSblyriwjF5w98P5zSse31QwHG9B8/oGIKkAxS5yZL7N4XWE1woNTz9V71x2yFl9pCOYTM0QfVp9CA==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.4"
     "@dhis2/d2-ui-org-unit-dialog" "^6.3.2"