Я готовлю панель мониторинга с несколькими диаграммами, внутри существует много диаграмм одного типа (BarChart или PieChart ... et c), это означает, что компонент, который рисует гистограмму, вызывается много раз, другой Идентификатор назначен для каждого. Моя проблема заключается в фильтрации.
Если я фильтрую на графике, все они должны быть отфильтрованы, я использую componentDidUpdate, чтобы изменить URL-адрес диаграмм (новое состояние), что позволяет мне фильтровать, добавив fq (поле-запрос). Недостаток заключается в том, что при фильтрации фильтруется только выбранная мною диаграмма, а не все остальные, как это должно работать.
Если новое состояние компонента имеет фильтр в componentDidUpdate (фильтры поступают из сеанса хранилище), почему фильтруются только те диаграммы, на которые я нажал, если они все используют один и тот же код?
Другой вопрос: как адекватно перенести фильтры между разными типами диаграмм (P ie, Линия)? sessionStorage?
все мои компоненты объявлены как класс, и идея состоит не в том, чтобы переписать их для использования хуков или редуксов ... слишком поздно.
каждая панель содержит одну диаграмму
Панели . js
import axios from 'axios';
import { Col } from 'react-bootstrap'
import Bars from '../Graphs/BARS/Modules';
class Panel extends Component {
constructor (props) {
super(props)
this.state = {
core: '',
description: '',
title: '',
mode: 'count',
facet: '',
colors: [],
limit: 10,
graph: '',
grap2:'',
id: '',
isLoaded: false,
}
this.handleInit = this.handleInit(props)
}
handleInit (props) {
const url = 'https://buscador.creangel.com/proxyreact/acceso/creangel/solrDash30/panelsGen/select?rows=1&fq=id:"'+props.id+'"';
axios.get(url)
.then(response => {
let result = response.data.response.docs[0];
let mode = 'count'
let facet = ''
let graph = 'None'
let graph2 = 'None'
let limit = 10
try{ mode = result.mode[0]; }catch{}
try{ facet = result.facet[0]; }catch{}
try{ graph = result.panel[0]; }catch{}
try{ limit = result.limit[0]; }catch{}
this.setState({
core: result.core[0],
description: result.description[0],
title: result.title[0],
mode: mode,
facet: facet,
colors: result.colors[0],
limit: limit,
graph: graph,
grap2: graph2,
isLoaded: true
})
})
}
/*componentWillUnmount() {
this._isMounted = false;
}*/
render(){
let Graph = ''
let Graph2 = ''
if(this.state.isLoaded){
if(this.state.graph.indexOf('BAR')!==-1){
Graph = <Bars.BAR01V id={this.props.id} data={this.state} details={this.state} ></Bars.BAR01V>;
//Graph = <Bars.PIE01 id={this.props.id} data={this.state} ></Bars.PIE01>;
//Graph = <Bars.LINE01S id={this.props.id} data={this.state} ></Bars.LINE01S>;
}
else if(this.state.graph.indexOf('LINE')!==0){
//Graph = <Bars.BAR01V id={this.props.id} data={this.state} ></Bars.BAR01V>;
//Graph = <Bars.PIE01 id={this.props.id} data={this.state} ></Bars.PIE01>;
//Graph = <Bars.LINE01S id={this.props.id} data={this.state} ></Bars.LINE01S>;
}
if(this.state.graph.indexOf('PIE')!==0){
//Graph = <Bars.BAR01V id={this.props.id} data={this.state} ></Bars.BAR01V>;
//Graph = <Bars.PIE01 id={this.props.id} data={this.state} ></Bars.PIE01>;
//Graph = <Bars.LINE01S id={this.props.id} data={this.state} ></Bars.LINE01S>;
}
}
return (
<Col sm={this.props.panelSize} className="h-100 dashPanel radius border panel-resizable">
{this.props.panelSize} - {this.props.id} - {this.state.graph} {Graph}
</Col>
);
}
}
export default Panel;
BAR01V. js
import React, {Component, useRef, useState, useEffect} from 'react';
//import { Col } from 'react-bootstrap'
//import { connect, useSelector, useDispatch} from 'react-redux';
import axios from 'axios';
import $ from 'jquery';
import { BarChart , Bar } from 'recharts';
import { CartesianGrid,
XAxis,
YAxis,
Tooltip,
Legend,
ResponsiveContainer,
LabelList
} from 'recharts';
import CustomTooltip from '../CustomTooltip';
class BAR01V extends Component {
constructor (props) {
super(props)
var facetfield = props.data.facet
this.state = {
data: '',
url: 'https://buscador.creangel.com/proxyreact/acceso/creangel/Data36/'+props.data.core+'/select?facet=on&json.facet={'+facetfield+":{type:terms,limit:"+props.data.limit+ ",field:" + facetfield + "}}",
isLoaded: true,
details: false
}
//window.addEventListener('storage', (e) => {
// })
this.handleInit = this.handleInit(props)
this.handleClick = this.handleClick.bind(this)
}
componentDidMount(){
}
componentDidUpdate() {
//window.addEventListener('storage', (e) => {
//})
if (this.state.details === true )
{
var facetfield = this.props.data.facet;
var urlFiltered = sessionStorage.getItem('url') + sessionStorage.getItem('urlFragment')
console.log(urlFiltered)
axios.get(urlFiltered)
.then(response => {
let data = []
let facets = response.data.facets[facetfield].buckets
for (let i in facets){
let slice = {
"name":facets[i].val,
"count":facets[i].count
};
data.push(slice);
}
this.setState({
data: data,
isLoaded: true,
details: false
})
})
}else{
}
}
componentWillUnmount() {
window.removeEventListener();
}
handleInit(props){
var facetfield = props.data.facet
console.log(this.state.url)
axios.get(this.state.url)
.then(response => {
let data = []
let facets = response.data.facets[facetfield].buckets
for (let i in facets){
let slice = {
"name":facets[i].val,
"count":facets[i].count
};
data.push(slice);
}
this.setState({
data: data,
isLoaded: true
})
})
}
handleClick(e) {
var facetfield = this.props.data.facet
let filters = []
let indexfilter = [];
console.log(e)
this.setState({
justClicked: e.target,
filter: e.activeLabel,
url: 'https://buscador.creangel.com/proxyreact/acceso/creangel/Data36/'+this.props.data.core+'/select?facet=on&json.facet={'+facetfield+":{type:terms,limit:"+this.props.data.limit+ ",field:" + facetfield + "}}",
urlFragment: '&fq='+facetfield+':'+ e.activeLabel,
parent : this.props.data.facet,
letter : e.activeLabel,
details: true
});
sessionStorage.setItem('url', this.state.url)
sessionStorage.setItem('urlFragment', '&fq='+facetfield+':'+ e.activeLabel)
sessionStorage.setItem('parent', this.props.data.facet)
sessionStorage.setItem('letter', e.activeLabel);
//let event = new Event('storage');
// window.dispatchEvent(event);
}
render(){
let width = ($('#'+this.props.id).width());
let height = ($('#'+this.props.id).height());
return (
<ResponsiveContainer id={this.props.id} width="80%" height="80%">
<BarChart width={730} height={250} data={this.state.data} onClick={this.handleClick}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip content={<CustomTooltip />}/>
<Bar dataKey="count" fill="#8884d8" >
</Bar>
</BarChart>
</ResponsiveContainer>
);
}
}
export default BAR01V;