Skip to content

Commit

Permalink
chore: clean code for sonar
Browse files Browse the repository at this point in the history
  • Loading branch information
ALEXANDRU MEDESAN committed Sep 28, 2023
1 parent 5059376 commit 0b66519
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 189 deletions.
137 changes: 33 additions & 104 deletions src/ConnectedChart/ConnectedChart.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,21 @@
import React, { useEffect, useState, useRef } from 'react';
import { compose } from 'redux';
import cx from 'classnames';
import loadable from '@loadable/component';
import config from '@plone/volto/registry';
import { toPublicURL } from '@plone/volto/helpers';
import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
import { updateChartDataFromProvider } from '@eeacms/volto-datablocks/helpers';
import { connectBlockToVisualization } from '@eeacms/volto-plotlycharts/hocs';
import { useHistory } from 'react-router-dom';

import {
Download,
Sources,
FigureNote,
MoreInfo,
Enlarge,
} from '@eeacms/volto-plotlycharts/Utils';
import PlotlyComponent from './PlotlyComponent';

const LoadablePlotly = loadable(() => import('react-plotly.js'));

/*
* ConnectedChart
*/
function ConnectedChart(props) {
const [firstLoad, setFirstLoad] = useState(true);
const chartRef = useRef(null);
Expand All @@ -35,7 +29,7 @@ function ConnectedChart(props) {
visualization,
visualization_data,
} = props;
const { hover_format_xy } = props.data || {};

const {
data_provenance,
figure_note,
Expand All @@ -44,11 +38,16 @@ function ConnectedChart(props) {
publisher,
geo_coverage,
} = visualization_data || {};
const use_live_data = props.data?.use_live_data ?? true;
const with_sources = props.data?.with_sources ?? false;
const with_notes = props.data?.with_notes ?? false;
const download_button = props.data?.download_button;
const with_more_info = props.data?.with_more_info ?? false;

const {
hover_format_xy,
use_live_data = true,
with_sources = false,
with_notes = false,
download_button,
with_more_info = false,
} = props.data || {};

const loadingProviderData =
loadingVisualizationData || (hasProviderUrl && props.loadingProviderData);

Expand All @@ -63,10 +62,10 @@ function ConnectedChart(props) {
family: config.settings.chartLayoutFontFamily || "'Roboto', sans-serif",
},
margin: {
l: 80, // default: 80
r: 80, // default: 80
b: 80, // default: 80
t: 100, // default: 100
l: 80,
r: 80,
b: 80,
t: 100,
...(chartData.layout?.margin || {}),
},
};
Expand Down Expand Up @@ -118,98 +117,28 @@ function ConnectedChart(props) {
return <div>Loading chart...</div>;
}

return !Object.keys(chartData).length ? (
<div>No valid data.</div>
) : (
if (!Object.keys(chartData).length) {
return <div>No valid data.</div>;
}

return (
<div className="visualization-wrapper">
<div className={cx('visualization', { autosize: layout.autosize })}>
<Enlarge data={data} layout={layout} history={history} />
<LoadablePlotly
onInitialized={(_, chartEl) => {
chartRef.current = chartEl;
}}
useResizeHandler
data={data}
layout={layout}
frames={[]}
config={{
displayModeBar: false,
editable: false,
responsive: true,
}}
onClick={(trace) => {
const { customLink, clickmode, meta = [] } = layout;
// Ex: catalogue?size=n_10_n&filters[0][field]={parent}&filters[0][values][0]={value}&filters[0][type]=any
// will not redirect on clicking a parent of point (treemap has a zoom feature and usually parents don't have
// the same significance as children, with relation to filter types)
if (customLink && clickmode !== 'none') {
const {
id,
label,
parent,
data = {},
curveNumber = 0,
pointIndex = 0,
} = trace?.points[0] || {};
const { type, parents = [], y = [], x = [] } = data;
const shouldRedirect = type
? type !== 'treemap'
? true
: parents.indexOf(id) === -1
? true
: false
: false;
const shouldComposeLinks = meta.length > 0;

if (type === 'bar' && shouldComposeLinks) {
if (customLink === 'allLinks') {
const yIsLabels = y.indexOf(label) > -1;
const labels = yIsLabels
? y.filter((label) => label === 0 || label)
: x.filter((label) => label === 0 || label); //trimming
const noOfLabels = labels.length;
const correspondingLinkPosition =
noOfLabels * curveNumber + pointIndex;
const correspondingLink = meta[correspondingLinkPosition];

history.push(correspondingLink);
} else if (customLink === 'fullLinks') {
const correspondingLinkPosition = pointIndex;
const correspondingLink = meta[correspondingLinkPosition];

history.push(correspondingLink);
}
} else if (shouldRedirect) {
const link = layout.customLink
.replace('{value}', id || label)
.replace('{parent}', parent);
history.push(link);
}
}
}}
onHover={(e) => {
if (layout.customLink && layout.clickmode !== 'none') {
e.event.target.style.opacity = 0.8;
e.event.target.style.transition = 'opacity 0.1s ease-in-out';
e.event.target.style.cursor = 'pointer';
}
}}
onUnhover={(e) => {
if (layout.customLink && layout.clickmode !== 'none') {
e.event.target.style.opacity = 1;
e.event.target.style.cursor = 'default';
}
}}
style={{
position: 'relative',
display: 'block',
...(!layout.height ? { minHeight: '450px' } : {}),
}}
/>
<Enlarge>
{/* For Enlarge we overwrite the custom size setting in order to enlarge it */}
<PlotlyComponent
{...{
chartRef,
data,
layout: { ...layout, autosize: true, height: null, width: null },
history,
}}
/>
</Enlarge>
<PlotlyComponent {...{ chartRef, data, layout, history }} />
</div>
<div className="visualization-info-container">
<div className="visualization-info">
{/* // behavior EEA Core metadata */}
{with_notes && <FigureNote notes={figure_note} />}
{with_sources && (
<Sources
Expand Down
91 changes: 91 additions & 0 deletions src/ConnectedChart/PlotlyComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react';
import loadable from '@loadable/component';

const LoadablePlotly = loadable(() => import('react-plotly.js'));

const PlotlyComponent = ({ chartRef, data, layout, history }) => {
const handleChartClick = (trace, layout, history) => {
const { customLink, clickmode, meta = [] } = layout;

if (customLink && clickmode !== 'none') {
const { id, label, parent, data = {}, curveNumber = 0, pointIndex = 0 } =
trace?.points[0] || {};

const { type, parents = [], y = [], x = [] } = data;
const shouldRedirect = type
? type !== 'treemap'
? true
: parents.indexOf(id) === -1
? true
: false
: false;

const shouldComposeLinks = meta.length > 0;

if (type === 'bar' && shouldComposeLinks) {
if (customLink === 'allLinks') {
const yIsLabels = y.indexOf(label) > -1;
const labels = yIsLabels
? y.filter((label) => label === 0 || label)
: x.filter((label) => label === 0 || label);

const noOfLabels = labels.length;
const correspondingLinkPosition =
noOfLabels * curveNumber + pointIndex;
const correspondingLink = meta[correspondingLinkPosition];
history.push(correspondingLink);
} else if (customLink === 'fullLinks') {
const correspondingLinkPosition = pointIndex;
const correspondingLink = meta[correspondingLinkPosition];
history.push(correspondingLink);
}
} else if (shouldRedirect) {
const link = customLink
.replace('{value}', id || label)
.replace('{parent}', parent);
history.push(link);
}
}
};

const handleChartHover = (e, layout) => {
if (layout.customLink && layout.clickmode !== 'none') {
e.event.target.style.opacity = 0.8;
e.event.target.style.transition = 'opacity 0.1s ease-in-out';
e.event.target.style.cursor = 'pointer';
}
};

const handleChartUnhover = (e, layout) => {
if (layout.customLink && layout.clickmode !== 'none') {
e.event.target.style.opacity = 1;
e.event.target.style.cursor = 'default';
}
};

return (
<LoadablePlotly
onInitialized={(_, chartEl) => {
chartRef.current = chartEl;
}}
useResizeHandler
{...{ data, layout }}
frames={[]}
config={{
displayModeBar: false,
editable: false,
responsive: true,
}}
onClick={(trace) => handleChartClick(trace, layout, history)}
onHover={(trace) => handleChartHover(trace, layout)}
onUnhover={(trace) => handleChartUnhover(trace, layout)}
style={{
position: 'relative',
display: 'block',
...(!layout.height ? { minHeight: '450px' } : {}),
}}
/>
);
};

export default PlotlyComponent;
87 changes: 2 additions & 85 deletions src/Utils/Enlarge/Enlarge.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React, { useState } from 'react';
import { Modal, Button } from 'semantic-ui-react';
import loadable from '@loadable/component';
import fullscreenIcon from '@plone/volto/icons/fullscreen.svg';
import { Icon } from '@plone/volto/components';

const LoadablePlotly = loadable(() => import('react-plotly.js'));

const EnlargeWidget = ({ data, layout, history }) => {
const EnlargeWidget = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);

return (
Expand All @@ -15,87 +12,7 @@ const EnlargeWidget = ({ data, layout, history }) => {
<Icon name={fullscreenIcon} size="24px" />
</button>
<Modal open={isOpen} className="plotly-enlarge-modal">
<Modal.Content>
<LoadablePlotly
useResizeHandler
data={data}
layout={{ ...layout, autosize: true, height: null, width: null }}
frames={[]}
config={{
displayModeBar: false,
editable: false,
responsive: true,
}}
onClick={(trace) => {
const { customLink, clickmode, meta = [] } = layout;
// Ex: catalogue?size=n_10_n&filters[0][field]={parent}&filters[0][values][0]={value}&filters[0][type]=any
// will not redirect on clicking a parent of point (treemap has a zoom feature and usually parents don't have
// the same significance as children, with relation to filter types)
if (customLink && clickmode !== 'none') {
const {
id,
label,
parent,
data = {},
curveNumber = 0,
pointIndex = 0,
} = trace?.points[0] || {};
const { type, parents = [], y = [], x = [] } = data;
const shouldRedirect = type
? type !== 'treemap'
? true
: parents.indexOf(id) === -1
? true
: false
: false;
const shouldComposeLinks = meta.length > 0;

if (type === 'bar' && shouldComposeLinks) {
if (customLink === 'allLinks') {
const yIsLabels = y.indexOf(label) > -1;
const labels = yIsLabels
? y.filter((label) => label === 0 || label)
: x.filter((label) => label === 0 || label); //trimming
const noOfLabels = labels.length;
const correspondingLinkPosition =
noOfLabels * curveNumber + pointIndex;
const correspondingLink = meta[correspondingLinkPosition];

history.push(correspondingLink);
} else if (customLink === 'fullLinks') {
const correspondingLinkPosition = pointIndex;
const correspondingLink = meta[correspondingLinkPosition];

history.push(correspondingLink);
}
} else if (shouldRedirect) {
const link = layout.customLink
.replace('{value}', id || label)
.replace('{parent}', parent);
history.push(link);
}
}
}}
onHover={(e) => {
if (layout.customLink && layout.clickmode !== 'none') {
e.event.target.style.opacity = 0.8;
e.event.target.style.transition = 'opacity 0.1s ease-in-out';
e.event.target.style.cursor = 'pointer';
}
}}
onUnhover={(e) => {
if (layout.customLink && layout.clickmode !== 'none') {
e.event.target.style.opacity = 1;
e.event.target.style.cursor = 'default';
}
}}
style={{
position: 'relative',
display: 'block',
...(!layout.height ? { minHeight: '450px' } : {}),
}}
/>
</Modal.Content>
<Modal.Content>{children}</Modal.Content>
<Modal.Actions>
{' '}
<Button onClick={() => setIsOpen(false)}>Close</Button>
Expand Down

0 comments on commit 0b66519

Please sign in to comment.