Pie chart: use translated label for missing value

Author: esikkala

src/client/components/facet_bar/ChartDialog.js

@@ -20,7 +20,8 @@ const useStyles = makeStyles(theme => ({
 const ChartDialog = props => {
   const {
     fetchData, facetID, rawData, rawDataUpdateID, createChartData, facetClass,
-    resultClass, fetching, tooltip, title, xaxisTitle, yaxisTitle, seriesTitle, lineChartConfig
+    resultClass, fetching, tooltip, title, xaxisTitle, yaxisTitle, seriesTitle, lineChartConfig,
+    layoutConfig
   } = props
   let xaxisType = null; let xaxisTickAmount = null; let stroke = null
   if (lineChartConfig) {
@@ -72,6 +73,7 @@ const ChartDialog = props => {
             xaxisType={xaxisType}
             xaxisTickAmount={xaxisTickAmount}
             stroke={stroke}
+            layoutConfig={layoutConfig}
           />
         </div>
       </GeneralDialog>

src/client/components/facet_bar/FacetHeader.js

@@ -298,6 +298,7 @@ class FacetHeader extends React.Component {
             icon={<PieChartIcon />}
             tooltip={intl.get('facetBar.pieChart.tooltip')}
             dialogTitle={this.props.facetLabel}
+            layoutConfig={this.props.layoutConfig}
           />}
         {barChartButton &&
           <ChartDialog
@@ -314,6 +315,7 @@ class FacetHeader extends React.Component {
             xaxisTitle={intl.get(`facetBar.barChart.${this.props.facetID}.xaxisTitle`)}
             yaxisTitle={intl.get(`facetBar.barChart.${this.props.facetID}.yaxisTitle`)}
             seriesTitle={intl.get(`facetBar.barChart.${this.props.facetID}.seriesTitle`)}
+            layoutConfig={this.props.layoutConfig}
           />}
         {lineChartButton &&
           <ChartDialog
@@ -331,6 +333,7 @@ class FacetHeader extends React.Component {
             yaxisTitle={intl.get(`facetBar.lineChart.${this.props.facetID}.yaxisTitle`)}
             seriesTitle={intl.get(`facetBar.lineChart.${this.props.facetID}.seriesTitle`)}
             lineChartConfig={this.props.facet.lineChartConfig}
+            layoutConfig={this.props.layoutConfig}
           />}
         {menuButtons.length > 0 &&
           <>

src/client/components/facet_bar/HierarchicalFacet.js

@@ -14,6 +14,7 @@ import IconButton from '@material-ui/core/IconButton'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'
 import Typography from '@material-ui/core/Typography'
+import { generateLabelForMissingValue } from '../../helpers/helpers'
 
 const styles = () => ({
   facetSearchContainer: {
@@ -261,9 +262,7 @@ class HierarchicalFacet extends Component {
       isSearchMatch = this.state.matches.some(match => match.node.id === node.id)
     }
     if (node.id === 'http://ldf.fi/MISSING_VALUE') {
-      // Check if there is a translated label for missing value, or use defaults
-      node.prefLabel = intl.get(`perspectives.${this.props.facetClass}.properties.${this.props.facetID}.missingValueLabel`) ||
-        intl.get('facetBar.defaultMissingValueLabel') || 'Unknown'
+      node.prefLabel = generateLabelForMissingValue({ facetClass: this.props.facetClass, facetID: this.props.facetID })
     }
     return (
       <>

src/client/configs/sampo/ApexCharts/PieChartConfig.js

@@ -1,4 +1,6 @@
-export const createApexPieChartData = ({ rawData, screenSize }) => {
+import { generateLabelForMissingValue } from '../../../helpers/helpers'
+
+export const createApexPieChartData = ({ rawData, screenSize, facetClass, facetID }) => {
   const labels = []
   const series = []
   let otherCount = 0
@@ -9,6 +11,9 @@ export const createApexPieChartData = ({ rawData, screenSize }) => {
     if (portion < threshold) {
       otherCount += parseInt(item.instanceCount)
     } else {
+      if (item.id === 'http://ldf.fi/MISSING_VALUE') {
+        item.prefLabel = generateLabelForMissingValue({ facetClass, facetID })
+      }
       labels.push(item.prefLabel)
       series.push(parseInt(item.instanceCount))
     }

src/client/helpers/helpers.js

@@ -1,5 +1,6 @@
 import querystring from 'querystring'
 import { has } from 'lodash'
+import intl from 'react-intl-universal'
 
 export const stateToUrl = ({
   facets,
@@ -151,3 +152,9 @@ export const arrayToObject = ({ array, keyField }) =>
     obj[item[keyField]] = item
     return obj
   }, {})
+
+export const generateLabelForMissingValue = ({ facetClass, facetID }) => {
+  // Check if there is a translated label for missing value, or use defaults
+  return intl.get(`perspectives.${facetClass}.properties.${facetID}.missingValueLabel`) ||
+   intl.get('facetBar.defaultMissingValueLabel') || 'Unknown'
+}