From c0a0769c7a8cba1869e0645ec388f9a1066d06f1 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Fri, 13 Aug 2021 09:11:47 +0300
Subject: [PATCH] Pie chart: use translated label for missing value
---
src/client/components/facet_bar/ChartDialog.js | 4 +++-
src/client/components/facet_bar/FacetHeader.js | 3 +++
src/client/components/facet_bar/HierarchicalFacet.js | 5 ++---
src/client/configs/sampo/ApexCharts/PieChartConfig.js | 7 ++++++-
src/client/helpers/helpers.js | 7 +++++++
5 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/src/client/components/facet_bar/ChartDialog.js b/src/client/components/facet_bar/ChartDialog.js
index 8ef4f3f1..ea003479 100644
--- a/src/client/components/facet_bar/ChartDialog.js
+++ b/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>
diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js
index 83f329f6..b52a735c 100644
--- a/src/client/components/facet_bar/FacetHeader.js
+++ b/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 &&
<>
diff --git a/src/client/components/facet_bar/HierarchicalFacet.js b/src/client/components/facet_bar/HierarchicalFacet.js
index 642765b9..697c10dc 100644
--- a/src/client/components/facet_bar/HierarchicalFacet.js
+++ b/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 (
<>
diff --git a/src/client/configs/sampo/ApexCharts/PieChartConfig.js b/src/client/configs/sampo/ApexCharts/PieChartConfig.js
index fa9f563b..de9e55fa 100644
--- a/src/client/configs/sampo/ApexCharts/PieChartConfig.js
+++ b/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))
}
diff --git a/src/client/helpers/helpers.js b/src/client/helpers/helpers.js
index 57f99ec0..0ac74f64 100644
--- a/src/client/helpers/helpers.js
+++ b/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'
+}
--
GitLab