merge upstream

Author: edbrett

app/javascript/components/charts/composed-chart/composed-chart-component.js app/javascript/components/charts/composed-chart/composed-chart-component.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { format } from 'd3-format';
 import maxBy from 'lodash/maxBy';
 import max from 'lodash/max';
+import cx from 'classnames';
 import {
   Line,
   Bar,
@@ -18,6 +19,7 @@ import {
 
 import ChartToolTip from '../components/chart-tooltip';
 import CustomTick from './custom-tick-component';
+import CustomBackground from './custom-background-component';
 import './composed-chart-styles.scss';
 
 class CustomComposedChart extends PureComponent {
@@ -48,6 +50,8 @@ class CustomComposedChart extends PureComponent {
   render() {
     const {
       xKey,
+      yKey,
+      xKeys,
       yKeys,
       xAxis,
       yAxis,
@@ -58,21 +62,26 @@ class CustomComposedChart extends PureComponent {
       height,
       margin
     } = this.props.config;
+
     const {
       className,
       data,
       config,
       simple,
       handleMouseMove,
-      handleMouseLeave
+      handleMouseLeave,
+      handleClick,
+      barBackground
     } = this.props;
 
-    const { lines, bars, areas } = yKeys;
+    const isVertical = !!xKeys;
+    const dataKeys = yKeys || xKeys;
+    const { lines, bars, areas } = dataKeys;
     const maxYValue = this.findMaxValue(data, config);
 
     return (
       <div
-        className={`c-composed-chart ${className}`}
+        className={cx('c-composed-chart', className)}
         style={{ height: simple ? 100 : height || 250 }}
       >
         <ResponsiveContainer width="99%">
@@ -81,14 +90,16 @@ class CustomComposedChart extends PureComponent {
             margin={
               margin || {
                 top: !simple ? 15 : 0,
-                right: 0,
-                left: !simple ? 42 : 0,
+                right: isVertical ? 10 : 0,
+                left: simple || isVertical ? 0 : 42,
                 bottom: 0
               }
             }
             padding={{ left: 50 }}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
+            onClick={handleClick}
+            layout={isVertical ? 'vertical' : 'horizontal'}
           >
             <defs>
               {gradients &&
@@ -121,35 +132,50 @@ class CustomComposedChart extends PureComponent {
             />
             {!simple && (
               <YAxis
+                dataKey={yKey || ''}
+                tickLine={!isVertical}
                 axisLine={false}
-                strokeDasharray="3 4"
-                tickSize={-42}
-                mirror
-                tickMargin={0}
+                {...(!isVertical
+                  ? {
+                    strokeDasharray: '3 4',
+                    tickSize: -42,
+                    mirror: true,
+                    tickMargin: 0
+                  }
+                  : {})}
                 tick={
                   <CustomTick
-                    dataMax={maxYValue}
+                    dataMax={xKeys && maxYValue}
                     unit={unit || ''}
                     unitFormat={
                       unitFormat ||
                       (value =>
                         (value < 1 ? format('.2r')(value) : format('.2s')(value)))
                     }
                     fill="#555555"
+                    vertical={isVertical}
                   />
                 }
                 {...yAxis}
               />
             )}
             {!simple && (
-              <CartesianGrid vertical={false} strokeDasharray="3 4" />
+              <CartesianGrid
+                vertical={isVertical}
+                horizontal={!isVertical}
+                strokeDasharray="3 4"
+              />
             )}
+
             <Tooltip
               simple={simple}
               cursor={{
                 opacity: 0.5,
                 stroke: '#d6d6d9',
-                ...(!!bars && { strokeWidth: `${1.2 * (100 / data.length)}%` })
+                ...(!!bars && {
+                  strokeWidth: `${1.2 *
+                    ((isVertical ? 45 : 100) / data.length)}%`
+                })
               }}
               content={<ChartToolTip settings={tooltip} />}
             />
@@ -169,7 +195,20 @@ class CustomComposedChart extends PureComponent {
               ))}
             {bars &&
               Object.keys(bars).map(key => (
-                <Bar key={key} dataKey={key} dot={false} {...bars[key]}>
+                <Bar
+                  key={key}
+                  dataKey={key}
+                  dot={false}
+                  background={d =>
+                    barBackground && (
+                      <CustomBackground
+                        {...d}
+                        activeIndex={barBackground.activeIndex}
+                      />
+                    )
+                  }
+                  {...bars[key]}
+                >
                   {bars[key].itemColor &&
                     data.map(item => (
                       <Cell key={`c_${item.color}`} fill={item.color} />
@@ -190,7 +229,9 @@ CustomComposedChart.propTypes = {
   simple: PropTypes.bool,
   handleMouseMove: PropTypes.func,
   handleMouseLeave: PropTypes.func,
-  backgroundColor: PropTypes.string
+  handleClick: PropTypes.func,
+  backgroundColor: PropTypes.string,
+  barBackground: PropTypes.object
 };
 
 export default CustomComposedChart;

app/javascript/components/charts/composed-chart/custom-background-component.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CustomBackground = props => (
+  <svg
+    key={props.index}
+    x={props.x}
+    y={props.y - 3}
+    width={props.width + 1}
+    height={1.2 * props.height}
+    viewBox={`0 0 ${props.width} ${props.height}`}
+  >
+    <g>
+      <rect
+        fill={props.index === props.activeIndex ? '#4a4a4a' : 'transparent'}
+        opacity="0.1"
+        x="-5"
+        y="0"
+        width={props.width + 5}
+        height={1.2 * props.height}
+      />
+      {props.index === props.activeIndex && (
+        <polygon
+          fill="#FFFFFF"
+          points={`${props.width -
+            Math.sqrt(
+              (1.2 * props.height - 30) ** 2 +
+                ((1.2 * props.height - 30) / 2) ** 2
+            ) +
+            5} ${1.2 * props.height / 2} ${props.width} ${1.2 * props.height -
+            15} ${props.width} 15`}
+        />
+      )}
+    </g>
+  </svg>
+);
+
+CustomBackground.propTypes = {
+  x: PropTypes.number,
+  y: PropTypes.number,
+  index: PropTypes.number,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  activeIndex: PropTypes.number
+};
+
+export default CustomBackground;

app/javascript/components/charts/composed-chart/custom-tick-component.jsx

@@ -9,7 +9,9 @@ const CustomTick = ({
   unit,
   unitFormat,
   fill,
-  backgroundColor
+  fontSize,
+  backgroundColor,
+  vertical
 }) => {
   const tickValue = payload && payload.value;
   const formattedTick = tickValue ? unitFormat(tickValue) : 0;
@@ -27,8 +29,8 @@ const CustomTick = ({
         filter="url(#solid)"
         x="0"
         y="3"
-        textAnchor="start"
-        fontSize="12px"
+        textAnchor={vertical ? 'end' : 'start'}
+        fontSize={fontSize || '12px'}
         fill={fill}
       >
         {tick}
@@ -45,7 +47,9 @@ CustomTick.propTypes = {
   unit: PropTypes.string,
   unitFormat: PropTypes.func,
   fill: PropTypes.string,
-  backgroundColor: PropTypes.string
+  fontSize: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  vertical: PropTypes.bool
 };
 
 export default CustomTick;

app/javascript/components/maps/components/analysis/selectors.js

@@ -119,23 +119,25 @@ export const getLayerEndpoints = createSelector(
     );
 
     const groupedEndpoints = groupBy(endpoints, 'slug');
-    const parsedEndpoints = Object.keys(groupedEndpoints).map(slug => {
-      let params = {};
-      groupedEndpoints[slug].forEach(e => {
-        params = {
-          ...params,
-          ...e.params
+    const parsedEndpoints = Object.keys(groupedEndpoints)
+      .filter(slug => slug !== 'undefined')
+      .map(slug => {
+        let params = {};
+        groupedEndpoints[slug].forEach(e => {
+          params = {
+            ...params,
+            ...e.params
+          };
+        });
+
+        return {
+          slug,
+          params,
+          version: groupedEndpoints[slug][0].version,
+          name: groupedEndpoints[slug][0].name
         };
       });
 
-      return {
-        slug,
-        params,
-        version: groupedEndpoints[slug][0].version,
-        name: groupedEndpoints[slug][0].name
-      };
-    });
-
     return adm2
       ? parsedEndpoints.filter(e => !e.slug.includes('forma'))
       : parsedEndpoints;

app/javascript/components/maps/main-map/components/data-analysis-menu/component.jsx

@@ -14,6 +14,7 @@ class DataAnalysisMenu extends PureComponent {
       links,
       clearAnalysisError,
       setMainMapSettings,
+      setMapSettings,
       showAnalysis,
       hidden
     } = this.props;
@@ -27,6 +28,7 @@ class DataAnalysisMenu extends PureComponent {
             (showAnalysis && l.active && !hidden) ||
             (!showAnalysis && l.active && !hidden)
         });
+        setMapSettings({ draw: false });
         clearAnalysisError();
       }
     }));
@@ -70,6 +72,7 @@ DataAnalysisMenu.propTypes = {
   menuSection: PropTypes.object,
   links: PropTypes.array,
   setMainMapSettings: PropTypes.func,
+  setMapSettings: PropTypes.func,
   clearAnalysisError: PropTypes.func,
   embed: PropTypes.bool
 };

app/javascript/components/maps/main-map/components/data-analysis-menu/index.js

@@ -2,10 +2,12 @@ import { connect } from 'react-redux';
 
 import { clearAnalysisError } from 'components/maps/components/analysis/actions';
 import { setMainMapSettings } from 'components/maps/main-map/actions';
+import { setMapSettings } from 'components/maps/map/actions';
 import { getDataAnalysisMenuProps } from './selectors';
 import Component from './component';
 
 export default connect(getDataAnalysisMenuProps, {
   clearAnalysisError,
-  setMainMapSettings
+  setMainMapSettings,
+  setMapSettings
 })(Component);

app/javascript/components/maps/main-map/components/map-controls/map-controls-component.jsx

@@ -196,29 +196,29 @@ class MapControlsButtons extends PureComponent {
 
   renderZoomButtons = () => {
     const { mapSettings, setMapSettings } = this.props;
-    const { zoom, minZoom, maxZoom } = mapSettings || {};
+    const { minZoom, maxZoom, zoom } = mapSettings || {};
 
     return (
       <Fragment>
         <Button
           theme="theme-button-map-control"
           onClick={() => {
-            setMapSettings({ zoom: zoom - 1 });
+            setMapSettings({ zoom: zoom - 1 < minZoom ? minZoom : zoom - 1 });
             track('zoomOut');
           }}
           tooltip={{ text: 'Zoom out' }}
-          disabled={zoom === minZoom}
+          disabled={zoom <= minZoom}
         >
           <Icon icon={minusIcon} className="minus-icon" />
         </Button>
         <Button
           theme="theme-button-map-control"
           onClick={() => {
-            setMapSettings({ zoom: zoom + 1 });
+            setMapSettings({ zoom: zoom + 1 > maxZoom ? maxZoom : zoom + 1 });
             track('zoomIn');
           }}
           tooltip={{ text: 'Zoom in' }}
-          disabled={zoom === maxZoom}
+          disabled={zoom >= maxZoom}
         >
           <Icon icon={plusIcon} className="plus-icon" />
         </Button>
@@ -298,16 +298,12 @@ class MapControlsButtons extends PureComponent {
   );
 
   renderMapPosition = () => {
-    const { mapSettings } = this.props;
-    const { zoom, center } = mapSettings || {};
+    const { mapSettings: { center: { lat, lng }, zoom } } = this.props;
 
     return (
       <div className="map-position">
-        <span>zoom: {zoom}</span>
-        <span>
-          lat,lon:{' '}
-          {`${format('.5f')(center.lat)}, ${format('.5f')(center.lng)}`}
-        </span>
+        <span>zoom: {format('.2f')(zoom)}</span>
+        <span>lat,lon: {`${format('.5f')(lat)}, ${format('.5f')(lng)}`}</span>
       </div>
     );
   };