Feature/no content text

app/javascript/components/widgets/components/widget/component.jsx

@@ -97,7 +97,7 @@ class Widget extends PureComponent {
 
 Widget.propTypes = {
   widget: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.object.isRequired,
   setWidgetSettingsUrl: PropTypes.func.isRequired,
   settings: PropTypes.object,
   config: PropTypes.object,

app/javascript/components/widgets/widgets/people/forestry-employment/component.jsx

@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import NoContent from 'components/ui/no-content';
+import WidgetPieChartLegend from 'components/widgets/components/widget-pie-chart-legend';
+
+import './styles';
+
+class WidgetForestryEmployment extends PureComponent {
+  render() {
+    const { data } = this.props;
+
+    return (
+      <div className="c-widget-forestry-employment">
+        {data[0].noContent ? (
+          <NoContent message="No gender data available" />
+        ) : (
+          <WidgetPieChartLegend {...this.props} />
+        )}
+      </div>
+    );
+  }
+}
+
+WidgetForestryEmployment.propTypes = {
+  data: PropTypes.array
+};
+export default WidgetForestryEmployment;

app/javascript/components/widgets/widgets/people/forestry-employment/forestry-employment.js

@@ -1,4 +1,4 @@
-import Component from 'components/widgets/components/widget-pie-chart-legend';
+import Component from './component';
 import { getData } from './actions';
 import { parseData, getSentence } from './selectors';
 import initialState from './initial-state';

app/javascript/components/widgets/widgets/people/forestry-employment/selectors.js

@@ -32,12 +32,12 @@ export const getFilteredData = createSelector(
 export const parseData = createSelector(
   [getFilteredData, getSettings, getColors],
   (data, settings, colors) => {
-    if (isEmpty(data)) return null;
+    if (isEmpty(data)) return [{ noContent: true }];
 
     const { year } = settings;
     const selectedFAO = data.filter(item => item.year === year);
     const { male, female } = selectedFAO[0];
-    if (!female) return null;
+    if (!female) return [{ noContent: true }];
 
     const total = male + female;
     const formatedData = [

app/javascript/components/widgets/widgets/people/forestry-employment/styles.scss

@@ -0,0 +1,7 @@
+@import '~styles/settings.scss';
+
+.c-widget-forestry-employment {
+  .c-no-content {
+    padding-top: rem(100px);
+  }
+}