Skip to content

Commit

Permalink
Refactor chart widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiberiuichim
tiberiuichim committed Jan 9, 2020
1 parent 173ac17 commit 8ee7886
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 67 deletions.
5 changes: 4 additions & 1 deletion src/ChartBlock/Edit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { DATA_PROVIDER_TYPES } from 'volto-datablocks/constants';
import { SidebarPortal, SelectWidget } from '@plone/volto/components';

import { getDataFromProvider } from 'volto-datablocks/actions';
import { changeSidebarState } from 'volto-sidebar/actions';

const LoadablePlotlyEditor = Loadable({
loader: () => import('react-chart-editor'),
Expand Down Expand Up @@ -43,10 +44,12 @@ class Edit extends Component {
if (this.props.url) {
this.props.getDataFromProvider(this.props.url);
}
this.props.changeSidebarState(true);
}

componentDidUpdate(prevProps) {
if (this.props.url && this.props.url !== prevProps.url) {
this.props.changeSidebarState(true);
this.props.getDataFromProvider(this.props.url);
}
}
Expand Down Expand Up @@ -155,5 +158,5 @@ export default connect(
dataSourceOptions: getDataSourceOptions(providerData || dataSources),
};
},
{ searchContent, getDataFromProvider },
{ searchContent, getDataFromProvider, changeSidebarState },
)(Edit);
101 changes: 62 additions & 39 deletions src/Widget/ModalEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import Loadable from 'react-loadable';
import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';
import { connect } from 'react-redux';

import { addAppURL } from '@plone/volto/helpers';
import { getDataFromProvider } from 'volto-datablocks/actions';
import { searchContent } from '@plone/volto/actions';

Expand Down Expand Up @@ -30,31 +32,41 @@ function getDataSourceOptions(data) {
const config = { editable: true };

class Edit extends Component {
constructor(props) {
super(props);

console.log('chart editor props', props);
const chartData = props.value || {};

this.state = {
data: chartData.data || [],
layout: chartData.layout || {},
frames: chartData.frames || [],
};

this.onSubmit = this.onSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleChangeProvider = this.handleChangeProvider.bind(this);
}

onSubmit() {
const chartData = {
data: this.state.data,
layout: this.state.layout,
frames: this.state.frames,
};
this.props.onChangeValue(chartData);
}
// constructor(props) {
// super(props);
//
// console.log('chart editor props', props);
// const chartData = props.value || {};
//
// // this.state = {
// // data: chartData.data || [],
// // layout: chartData.layout || {},
// // frames: chartData.frames || [],
// // provider_url: '',
// // };
//
// // this.onSubmit = this.onSubmit.bind(this);
// // this.handleChange = this.handleChange.bind(this);
// // this.handleChangeProvider = this.handleChangeProvider.bind(this);
// }

// onSubmit() {
// // const chartData = {
// // data: this.state.data,
// // layout: this.state.layout,
// // frames: this.state.frames,
// // };
// const url = this.state.provider_url;
// this.props.onChangeValue(chartData, url);
// }

// handleChange(data, layout, frames) {
// this.setState({ data, layout, frames }, this.onSubmit);
// }

// handleChangeProvider(ev, { value }) {
// this.props.getDataFromProvider(value);
// }

componentDidMount() {
// TODO: this needs to use a subrequest
Expand All @@ -63,14 +75,6 @@ class Edit extends Component {
});
}

handleChange(data, layout, frames) {
this.setState({ data, layout, frames }, this.onSubmit);
}

handleChangeProvider(ev, { value }) {
this.props.getDataFromProvider(value);
}

render() {
const plotly = require('plotly.js/dist/plotly');
const selectProviders = this.props.providers.map(el => {
Expand All @@ -91,20 +95,24 @@ class Edit extends Component {
fluid
selection
options={selectProviders}
onChange={this.handleChangeProvider}
onChange={(ev, { value }) =>
this.props.onChangeValue({ ...this.props.data, url: value })
}
/>
<LoadablePlotlyEditor
data={this.state.data}
layout={this.state.layout}
data={this.props.data?.data || []}
layout={this.props.data?.layout || {}}
config={config}
frames={this.state.frames}
frames={this.props.data?.frames || []}
dataSources={this.props.providerData || dataSources}
dataSourceOptions={
this.props.dataSourceOptions ||
getDataSourceOptions(dataSources)
}
plotly={plotly}
onUpdate={this.handleChange}
onUpdate={data =>
this.props.onChangeValue(data, this.props.url)
}
useResizeHandler
debug
advancedTraceTypeSelector
Expand All @@ -119,9 +127,24 @@ class Edit extends Component {
}
}

function getProviderData(state, props) {
// state.data_providers ? state.data_providers.item : {};
let path = props?.data?.url || null;

if (!path) return;

path = `${path}/@connector-data`;
const url = `${addAppURL(path)}/@connector-data`;

const data = state.data_providers.data || {};
const res = path ? data[path] || data[url] : [];
// console.log('res', res);
return res;
}

export default connect(
(state, props) => {
const providerData = state.data_providers ? state.data_providers.item : {};
const providerData = getProviderData(state, props);
return {
providers: state.search.items,
providerData,
Expand Down
45 changes: 18 additions & 27 deletions src/Widget/Widget.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,28 @@ import React, { Component } from 'react';
import { Button, Modal, Form, Grid, Label } from 'semantic-ui-react';
import { map } from 'lodash';

// import showIcon from '@plone/volto/icons/show.svg';
// import { Icon as VoltoIcon } from '@plone/volto/components';

class ModalChartEditor extends Component {
constructor(props) {
super(props);
this.state = {
chartData: props.value,
value: props.value,
};
this.handleSave = this.handleSave.bind(this);
}

handleSave() {
this.props.onChange(this.state.chartData);
this.props.onChange(this.state.value);
}

render() {
return (
<Modal open={true} size="fullscreen">
<Modal.Content scrolling>
<ChartEditor
value={this.props.value}
onChangeValue={data => {
console.log('Set chart data', data);
this.setState({ chartData: data });
data={this.props.value}
onChangeValue={value => {
console.log('Set chart data', value);
this.setState({ value });
}}
/>
</Modal.Content>
Expand All @@ -46,22 +43,10 @@ class ChartWidget extends Component {
super(props);

console.log('Chartwidget props', props);
const chartData = props.value || {};

const layout = {
...chartData.layout,
width: (chartData.layout && chartData.layout.width) || 320,
height: (chartData.layout && chartData.layout.height) || 240,
};

this.state = {
data: chartData.data || [],
layout,
frames: chartData.frames || [],
showChartEditor: false,
};

console.log('State', this.state);
}

render() {
Expand All @@ -75,8 +60,17 @@ class ChartWidget extends Component {
onChange,
fieldSet,
} = this.props;

if (__SERVER__) return '';

// value is { data || [], layout || {}, frames || [], provider_url }

const layout = {
...this.props.value?.layout,
width: this.props.value?.layout?.width || 320,
height: this.props.value?.layout?.height || 240,
};

const LoadablePlot = require('react-plotly.js').default;
return (
<Form.Field
Expand Down Expand Up @@ -112,9 +106,6 @@ class ChartWidget extends Component {
console.log('Got value from editor', value);
this.setState({
showChartEditor: false,
data: (value && value.data) || [],
layout: (value && value.layout) || {},
frames: (value && value.frames) || [],
});
}}
/>
Expand All @@ -123,9 +114,9 @@ class ChartWidget extends Component {
)}

<LoadablePlot
data={this.state.data}
layout={this.state.layout}
frames={this.state.frames}
data={this.props.value.data || []}
frames={this.props.value.frames || []}
layout={layout}
config={{ displayModeBar: false }}
/>

Expand Down

0 comments on commit 8ee7886

Please sign in to comment.