Merge branch 'next' of github.com:appbaseio/reactivesearch into next

Author: bietkul

packages/web/examples/ReactiveChart/StackedBarChart/src/index.js

@@ -25,7 +25,7 @@ const Main = () => (
 				<ReactiveChart
 					componentId="stackedBarChart"
 					dataField="release_year"
-					chartType="bar"
+					chartType="custom"
 					filterLabel="Language"
 					URLParams
 					title="Languages"
@@ -58,18 +58,23 @@ const Main = () => (
 									genres.key.split(',').forEach((genre) => {
 										// genres might be a comma separated value
 										if (releaseYearGenresTable[releaseYear][genre]) {
-											releaseYearGenresTable[releaseYear][genre] += genres.doc_count;
+											releaseYearGenresTable[releaseYear][genre]
+												+= genres.doc_count;
 										} else {
 											releaseYearGenresTable[releaseYear][genre] = 0;
-											releaseYearGenresTable[releaseYear][genre] = genres.doc_count;
+											releaseYearGenresTable[releaseYear][genre]
+												= genres.doc_count;
 										}
 									});
 								});
 							});
 							Object.keys(releaseYearGenresTable).forEach((year) => {
 								Object.keys(releaseYearGenresTable[year]).forEach((genre) => {
-									if (!genresReleaseYearTable[genre]) genresReleaseYearTable[genre] = {};
-									genresReleaseYearTable[genre][year] = releaseYearGenresTable[year][genre];
+									if (!genresReleaseYearTable[genre]) {
+										genresReleaseYearTable[genre] = {};
+									}
+									genresReleaseYearTable[genre][year]
+										= releaseYearGenresTable[year][genre];
 								});
 							});
 						}
@@ -89,6 +94,32 @@ const Main = () => (
 							})),
 						};
 					}}
+					customQuery={value =>
+						(value && value.secondaryLabel && value.mainLabel
+							? {
+								query: {
+									bool: {
+										must: [
+											{
+												term: {
+													release_year: value.mainLabel,
+												},
+											},
+											{
+												term: {
+													'genres_data.keyword': value.secondaryLabel,
+												},
+											},
+										],
+									},
+								},
+							  }
+							: {
+								query: {
+									match_all: {},
+								},
+							  })
+					}
 				/>
 			</div>
 

packages/web/src/components/basic/SelectedFilters.js

@@ -82,6 +82,29 @@ class SelectedFilters extends Component {
 			if (value.location) {
 				label = `${value.location} - ${label}`;
 			}
+			// Detect if value is from a chart with chartType as custom
+			if (value && typeof value === 'object') {
+				if (value.mainLabel || value.secondaryLabel) {
+					let data = '';
+					try {
+						if (value.data) {
+							data = JSON.stringify(value.data);
+						}
+					} catch (e) {
+						data = String(value.data);
+					}
+					if (value.mainLabel && value.secondaryLabel) {
+						label = `${value.mainLabel}-${value.secondaryLabel}`;
+					} else if (value.mainLabel) {
+						label = `${value.mainLabel}`;
+					} else {
+						label = `${value.secondaryLabel}`;
+					}
+					if (data) {
+						label += `-${data}`;
+					}
+				}
+			}
 			return label;
 		}
 		return value;

packages/web/src/components/basic/URLParamsProvider.js

@@ -201,6 +201,9 @@ class URLParamsProvider extends Component {
 			// TODO: support for NestedList
 			if (value.location) return value;
 			if (value.category) return value;
+			if (Object.hasOwn(value, 'mainLabel') || Object.hasOwn(value, 'secondaryLabel')) {
+				return value;
+			}
 			return value.label || value.key || null;
 		}
 		return value;

packages/web/src/components/chart/ReactiveChart.d.ts

@@ -17,6 +17,7 @@ export interface ReactiveChartProps extends CommonProps {
 	onGlobalOut?: (...args: any[]) => any;
 	onContextMenu?: (...args: any[]) => any;
 	onDataZoom?: (...args: any[]) => any;
+	beforeValueChange?: (...args: any[]) => any;
 	// ---- user props ---
 	// props to configure query
 	dataField: types.dataFieldArray;

packages/web/src/components/chart/ReactiveChart.js

@@ -41,6 +41,7 @@ const ChartTypes = {
 	Histogram: 'histogram',
 	Line: 'line',
 	Bar: 'bar',
+	Custom: 'custom',
 };
 
 class ReactiveChart extends React.Component {
@@ -66,6 +67,15 @@ class ReactiveChart extends React.Component {
 		}
 		this.setReact(props, this.internalComponent);
 		this.handleRange = debounce(this.handleRange, 100);
+
+		if (props.chartType === ChartTypes.Custom) {
+			if (typeof props.defaultQuery !== 'function' || typeof props.setOption !== 'function') {
+				throw new Error('defaultQuery and setOption should be defined when chartType is custom');
+			}
+			if (props.useAsFilter && typeof props.customQuery !== 'function') {
+				throw new Error('customQuery should be defined when chartType is custom and useAsFilter is true');
+			}
+		}
 	}
 	componentDidUpdate(prevProps) {
 		if (!isEqual(prevProps.options, this.props.options)) {
@@ -182,6 +192,13 @@ class ReactiveChart extends React.Component {
 			if (!Number.isNaN(parseInt(value, 10))) {
 				value = parseInt(value, 10);
 			}
+			if (chartType === ChartTypes.Custom) {
+				value = {
+					mainLabel: item.name,
+					secondaryLabel: item.seriesName,
+					data: item.data,
+				};
+			}
 			this.setValue(value);
 		}
 	};
@@ -343,8 +360,7 @@ class ReactiveChart extends React.Component {
 
 ReactiveChart.generateQueryOptions = (props, after, value = {}) => {
 	const queryOptions = getQueryOptions(props);
-	const valueArray = Array.isArray(value) ? value : [value];
-	return getAggsQuery(valueArray, queryOptions, props);
+	return getAggsQuery(value, queryOptions, props);
 };
 
 ReactiveChart.defaultQuery = (value, props) => {
@@ -639,6 +655,7 @@ ReactiveChart.propTypes = {
 	onMouseOut: func,
 	onGlobalOut: func,
 	onContextMenu: func,
+	beforeValueChange: func,
 	onDataZoom: func,
 	// ---- user props ---
 	// props to configure query