Fixed layout of counter widget (#2804)

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>

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'));

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: "1%",
+        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>);
+    });

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>);

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>

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');
+    });
 });

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;
+        }
+
     }
 }