From bcd61784b3e39f499f56299be3b179edb376a1ef Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Fri, 6 Apr 2018 18:24:45 +0200
Subject: [PATCH 1/3] Fixed layout of counter widget

---
 web/client/components/layout/BorderLayout.jsx |  2 +-
 .../widgets/builder/wizard/CounterWizard.jsx  |  6 +++--
 .../components/widgets/widget/CounterView.jsx | 27 ++++++++++++-------
 .../widgets/widget/CounterWidget.jsx          |  6 ++---
 .../widgets/widget/WidgetContainer.jsx        |  3 ++-
 web/client/themes/default/less/widget.less    | 11 ++++++++
 6 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/web/client/components/layout/BorderLayout.jsx b/web/client/components/layout/BorderLayout.jsx
index 3660607843..a506c29796 100644
--- a/web/client/components/layout/BorderLayout.jsx
+++ b/web/client/components/layout/BorderLayout.jsx
@@ -32,7 +32,7 @@ module.exports = ({id, children, header, footer, columns, height, className}) =>
             display: "flex",
             flex: 1,
             overflowY: "auto"
-            }}>
+        }}>
             <main className="ms2-border-layout-content" style={{flex: 1}}>
                 {height ? <div style={{height}}>{children}</div> : children}
             </main>
diff --git a/web/client/components/widgets/builder/wizard/CounterWizard.jsx b/web/client/components/widgets/builder/wizard/CounterWizard.jsx
index 142218c718..9c03771f1d 100644
--- a/web/client/components/widgets/builder/wizard/CounterWizard.jsx
+++ b/web/client/components/widgets/builder/wizard/CounterWizard.jsx
@@ -44,8 +44,10 @@ const enhancePreview = compose(
 );
 
 const sampleProps = {
-    width: 430,
-    height: 200
+    style: {
+        width: 450,
+        height: 100
+    }
 };
 
 const Wizard = wizardHandlers(require('../../../misc/wizard/WizardContainer'));
diff --git a/web/client/components/widgets/widget/CounterView.jsx b/web/client/components/widgets/widget/CounterView.jsx
index 82e00952de..111768a8b6 100644
--- a/web/client/components/widgets/widget/CounterView.jsx
+++ b/web/client/components/widgets/widget/CounterView.jsx
@@ -28,12 +28,21 @@ const enhanceCounter = compose(
     emptyChartState
 );
 const React = require('react');
-module.exports = enhanceCounter(({ width = "100%", height="100%", series = [], data = [], options={}, style} = {}) => {
-    const renderCounter = ({ dataKey } = {}, i) => (<Counter
-        key={dataKey}
-        uom={get(options, `seriesOptions[${i}].uom`)}
-        value={data[0][dataKey]}
-        style={{ width, height, textAlign: "center", ...style }}
-    />);
-    return series.length === 1 ? renderCounter(series[0], 0) : <div className="counter">{series.map(renderCounter)}</div>;
-});
+module.exports = enhanceCounter(({ series = [], data = [], options = {}, style = {
+        width: "100%",
+        height: "100%",
+        transform: "translate(-50%, -50%)",
+        position: "absolute",
+        display: "inline",
+        padding: "5%",
+        top: "50%",
+        left: "50%"
+    }} ) => {
+        const renderCounter = ({ dataKey } = {}, i) => (<Counter
+            key={dataKey}
+            uom={get(options, `seriesOptions[${i}].uom`)}
+            value={data[0][dataKey]}
+            style={{ textAlign: "center", ...style }}
+        />);
+        return (<div className="counter-widget-view">{series.map(renderCounter)}</div>);
+    });
diff --git a/web/client/components/widgets/widget/CounterWidget.jsx b/web/client/components/widgets/widget/CounterWidget.jsx
index 0ae8b056c9..c21c127a66 100644
--- a/web/client/components/widgets/widget/CounterWidget.jsx
+++ b/web/client/components/widgets/widget/CounterWidget.jsx
@@ -7,6 +7,7 @@
  */
 const React = require('react');
 const Message = require('../../I18N/Message');
+
 const CounterView = require('./CounterView');
 const InfoPopover = require('./InfoPopover');
 const WidgetContainer = require('./WidgetContainer');
@@ -33,8 +34,6 @@ module.exports = ({
     series = [],
     loading,
     showTable,
-    width,
-    height,
     confirmDelete= false,
     headerStyle,
     toggleTableView= () => {},
@@ -43,6 +42,7 @@ module.exports = ({
     onDelete=() => {},
     ...props}) =>
     (<WidgetContainer
+        className="counter-widget"
         id={`widget-chart-${id}`}
         title={title}
         topLeftItems={renderHeaderLeftTopItem({loading, title, description, showTable, toggleTableView})}
@@ -57,5 +57,5 @@ module.exports = ({
                 <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash"/>&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
             </DropdownButton>
         </ButtonToolbar>}>
-        <CounterView id={id} style={{ width: "80%", height: "80%", margin: "0 auto"}} containerSize={{ width, height }} isAnimationActive={!loading} loading={loading} data={data} series={series} iconFit {...props} />
+        <CounterView id={id} isAnimationActive={!loading} loading={loading} data={data} series={series} iconFit {...props} />
     </WidgetContainer>);
diff --git a/web/client/components/widgets/widget/WidgetContainer.jsx b/web/client/components/widgets/widget/WidgetContainer.jsx
index 9eee1d7426..a8e8b1e11a 100644
--- a/web/client/components/widgets/widget/WidgetContainer.jsx
+++ b/web/client/components/widgets/widget/WidgetContainer.jsx
@@ -14,6 +14,7 @@ module.exports = ({
     id,
     title,
     confirmDelete= false,
+    className,
     handle = "draggableHandle",
     toggleDeleteConfirm = () => {},
     onDelete=() => {},
@@ -23,7 +24,7 @@ module.exports = ({
     children
     }) =>
     (<div className="mapstore-widget-card" id={id}>
-        <BorderLayout header={(<div style={headerStyle} className={`mapstore-widget-info ${handle ? handle : ""}`}>
+        <BorderLayout className={className} header={(<div style={headerStyle} className={`mapstore-widget-info ${handle ? handle : ""}`}>
                     <div className="mapstore-widget-header">
                         {topLeftItems}
                         <span className="widget-title">{title}</span>
diff --git a/web/client/themes/default/less/widget.less b/web/client/themes/default/less/widget.less
index 178671d3c7..9aace9e41f 100644
--- a/web/client/themes/default/less/widget.less
+++ b/web/client/themes/default/less/widget.less
@@ -104,6 +104,17 @@
             overflow-x: hidden;
             overflow-y: auto;
         }
+
+        .counter-widget-view > div > div {
+            transform: translate(-50%, -50%);
+            position: absolute;
+            top: 38%;
+            left: 50%;
+        }
+        .counter-widget .ms2-border-layout-body {
+            position: relative;
+        }
+
     }
 }
 

From b31dfcfffddf10ae69f109966cb28784fcf6624c Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Mon, 9 Apr 2018 10:00:12 +0200
Subject: [PATCH 2/3] Adjusted padding

---
 web/client/components/widgets/widget/CounterView.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/client/components/widgets/widget/CounterView.jsx b/web/client/components/widgets/widget/CounterView.jsx
index 111768a8b6..431f0ebf4e 100644
--- a/web/client/components/widgets/widget/CounterView.jsx
+++ b/web/client/components/widgets/widget/CounterView.jsx
@@ -34,7 +34,7 @@ module.exports = enhanceCounter(({ series = [], data = [], options = {}, style =
         transform: "translate(-50%, -50%)",
         position: "absolute",
         display: "inline",
-        padding: "5%",
+        padding: "1%",
         top: "50%",
         left: "50%"
     }} ) => {

From 27c2c8eb2dcd79f13849f1fa39bb8e00f4013574 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Tue, 10 Apr 2018 11:13:23 +0200
Subject: [PATCH 3/3] Add unit test

---
 .../widgets/widget/__tests__/CounterView-test.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/client/components/widgets/widget/__tests__/CounterView-test.jsx b/web/client/components/widgets/widget/__tests__/CounterView-test.jsx
index 274e14f36b..4fc042d4b7 100644
--- a/web/client/components/widgets/widget/__tests__/CounterView-test.jsx
+++ b/web/client/components/widgets/widget/__tests__/CounterView-test.jsx
@@ -39,4 +39,19 @@ describe('CounterView component', () => {
         const container = document.getElementById('container');
         expect(container.querySelector('.glyphicon-warning-sign')).toExist();
     });
+    it('CounterView rendering style', () => {
+        ReactDOM.render(<CounterView data={[{ dataKey: 1 }]} series={[{ dataKey: "dataKey" }]} />, document.getElementById("container"));
+        const container = document.getElementById('container');
+        const el = container.querySelector('.counter-widget-view');
+        expect(el).toExist();
+        const content = el.querySelector('div');
+        expect(content.style.width).toBe("100%");
+        expect(content.style.height).toBe("100%");
+        expect(content.style.transform).toExist();
+        expect(content.style.top).toBe('50%');
+        expect(content.style.left).toBe('50%');
+        ReactDOM.render(<CounterView data={[{ dataKey: 1 }]} style={{top: "10px"}} series={[{ dataKey: "dataKey" }]} />, document.getElementById("container"));
+        const content2 = container.querySelector('.counter-widget-view div');
+        expect(content2.style.top).toBe('10px');
+    });
 });