From d616623e41c336b75a67af34a41f4bcef3b42ae0 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Thu, 13 Jan 2022 15:40:15 +0200
Subject: [PATCH] Update ApexCharts config handling
---
.../components/facet_results/ApexCharts.js | 45 +++++++++++++++----
.../ApexCharts/ApexChartsConfig.js | 16 +++----
2 files changed, 42 insertions(+), 19 deletions(-)
diff --git a/src/client/components/facet_results/ApexCharts.js b/src/client/components/facet_results/ApexCharts.js
index 799fea67..73ca7496 100644
--- a/src/client/components/facet_results/ApexCharts.js
+++ b/src/client/components/facet_results/ApexCharts.js
@@ -33,13 +33,15 @@ class ApexChart extends React.Component {
constructor (props) {
super(props)
this.chartRef = React.createRef()
- const { resultClassConfig, apexChartsConfig } = this.props
- let resultClass = this.props.resultClass
+ const { apexChartsConfig } = this.props
+ let { resultClass, resultClassConfig } = this.props
if (resultClassConfig.dropdownForResultClasses) {
resultClass = resultClassConfig.defaultResultClass
+ resultClassConfig = resultClassConfig.resultClasses[resultClass]
}
this.state = {
resultClass,
+ resultClassConfig,
createChartData: resultClassConfig.createChartData
? apexChartsConfig[resultClassConfig.createChartData]
: apexChartsConfig[resultClassConfig.chartTypes[0].createChartData],
@@ -111,19 +113,41 @@ class ApexChart extends React.Component {
if (this.chart !== undefined) {
this.chart.destroy()
}
+ let chartTypeObj = null
+ const { resultClassConfig, chartType } = this.state
+ if (resultClassConfig.dropdownForChartTypes) {
+ chartTypeObj = resultClassConfig.chartTypes.find(chartTypeObj => chartTypeObj.id === chartType)
+ }
this.chart = new ApexCharts(
this.chartRef.current,
- this.state.createChartData({ ...this.props })
+ this.state.createChartData({
+ ...this.props,
+ resultClassConfig: this.state.resultClassConfig,
+ chartTypeObj
+ })
)
this.chart.render()
}
}
- handleResultClassOnChanhge = event => this.setState({ resultClass: event.target.value })
+ handleResultClassOnChange = event => {
+ const { apexChartsConfig } = this.props
+ const newResultClass = event.target.value
+ const resultClassConfig = this.props.resultClassConfig.resultClasses[newResultClass]
+ this.setState({
+ resultClass: newResultClass,
+ resultClassConfig,
+ createChartData: resultClassConfig.createChartData
+ ? apexChartsConfig[resultClassConfig.createChartData]
+ : apexChartsConfig[resultClassConfig.chartTypes[0].createChartData],
+ chartType: resultClassConfig.dropdownForChartTypes ? resultClassConfig.chartTypes[0].id : null
+ })
+ }
- handleChartTypeOnChanhge = event => {
+ handleChartTypeOnChange = event => {
+ const { resultClassConfig } = this.state
const chartType = event.target.value
- const chartTypeObj = this.props.resultClassConfig.chartTypes.find(chartTypeObj => chartTypeObj.id === chartType)
+ const chartTypeObj = resultClassConfig.chartTypes.find(chartTypeObj => chartTypeObj.id === chartType)
this.setState({
chartType,
createChartData: this.props.apexChartsConfig[chartTypeObj.createChartData]
@@ -161,8 +185,11 @@ class ApexChart extends React.Component {
}
render () {
+ // static configs from props
const { classes, fetching, resultClassConfig } = this.props
- const { pageType = 'facetResults', dropdownForResultClasses, resultClasses, dropdownForChartTypes, chartTypes } = resultClassConfig
+ const { pageType = 'facetResults', dropdownForResultClasses, resultClasses } = resultClassConfig
+ // dynamic configs from state
+ const { dropdownForChartTypes, chartTypes } = this.state.resultClassConfig
let rootStyle = {
width: '100%',
height: '100%'
@@ -201,7 +228,7 @@ class ApexChart extends React.Component {
<Select
id='select-result-class'
value={this.state.resultClass}
- onChange={this.handleResultClassOnChanhge}
+ onChange={this.handleResultClassOnChange}
>
{Object.keys(resultClasses).map(resultClass =>
<MenuItem key={resultClass} value={resultClass}>{intl.get(`apexCharts.resultClasses.${resultClass}`)}</MenuItem>
@@ -216,7 +243,7 @@ class ApexChart extends React.Component {
<Select
id='select-chart-type'
value={this.state.chartType}
- onChange={this.handleChartTypeOnChanhge}
+ onChange={this.handleChartTypeOnChange}
>
{chartTypes.map(chartType =>
<MenuItem key={chartType.id} value={chartType.id}>{intl.get(`apexCharts.${chartType.id}`)}</MenuItem>
diff --git a/src/client/library_configs/ApexCharts/ApexChartsConfig.js b/src/client/library_configs/ApexCharts/ApexChartsConfig.js
index 1e2fe0b9..bf51863b 100644
--- a/src/client/library_configs/ApexCharts/ApexChartsConfig.js
+++ b/src/client/library_configs/ApexCharts/ApexChartsConfig.js
@@ -140,11 +140,7 @@ export const createApexPieChartData = ({
const series = []
let otherCount = 0
const arraySum = results.reduce((sum, current) => sum + current.instanceCount, 0)
- let actualResultClassConfig = resultClassConfig
- if (resultClassConfig.dropdownForResultClasses) {
- actualResultClassConfig = resultClassConfig.resultClasses[perspectiveState.resultClass]
- }
- const { sliceVisibilityThreshold = defaultSliceVisibilityThreshold, propertyID } = actualResultClassConfig
+ const { sliceVisibilityThreshold = defaultSliceVisibilityThreshold, propertyID } = resultClassConfig
results.forEach(item => {
const sliceFraction = item.instanceCount / arraySum
if (sliceFraction <= sliceVisibilityThreshold) {
@@ -244,6 +240,7 @@ export const createApexBarChartData = ({
facetClass,
perspectiveState,
results,
+ chartTypeObj,
resultClassConfig,
screenSize
}) => {
@@ -258,12 +255,11 @@ export const createApexBarChartData = ({
const data = []
let otherCount = 0
const arraySum = results.reduce((sum, current) => sum + current.instanceCount, 0)
- let actualResultClassConfig = resultClassConfig
- if (resultClassConfig.dropdownForResultClasses) {
- actualResultClassConfig = resultClassConfig.resultClasses[perspectiveState.resultClass]
+ const { sliceVisibilityThreshold = defaultSliceVisibilityThreshold, propertyID } = resultClassConfig
+ if (chartTypeObj && chartTypeObj.sortByLocaleCompare) {
+ const prop = chartTypeObj.sortByLocaleCompare
+ results.sort((a, b) => a[prop].localeCompare(b[prop]))
}
- const { sliceVisibilityThreshold = defaultSliceVisibilityThreshold, propertyID } = actualResultClassConfig
-
results.forEach(item => {
const sliceFraction = item.instanceCount / arraySum
if (sliceFraction <= sliceVisibilityThreshold) {
--
GitLab