Hi,
I was trying to incorporate clickable charts in my kibana plugin using data plugin something like this:
SearchBar
const onRefreshClick = (payload) => {
const timeRange = data.query.timefilter.timefilter.getTime();
setPropStartDate(payload.dateRange.from);
setPropEndDate(payload.dateRange.to);
setPropQuery(payload.query);
}
const testFilters = (filters:Filter[]) => {
console.log("Lets see filters :",filters)
}
const searchBar = (
<navigation.ui.TopNavMenu
appName={PLUGIN_ID}
showSearchBar={true}
useDefaultBehaviors={true}
indexPatterns={indexPattern ? [indexPattern] : undefined}
onQuerySubmit={(payload) => onRefreshClick(payload)}
onFiltersUpdated={testFilters}
/>
)
Chart
const onelementclick = (clickElements:any,fieldValue:{field:string,value?:any}) =>{
if (!patterIndex) return;
// const existing_filters = props.data.query.filterManager.getFilters()
const value = typeof fieldValue.value == undefined ? clickElements[0][0]['x'] : fieldValue.value
const newFilter = buildPhraseFilter(patterIndex.getFieldByName(fieldValue.field),value,patterIndex);
props.data.query.filterManager.addFilters(newFilter);
fetchData();
}
const acknowledgedTimeChart = (
<div>
< Chart size={{ height: 50 }}>
<Settings onElementClick={(indata)=> onelementclick(indata,{field:"acknowledged",value:true})} theme={customAcknTheme} showLegend={false} legendPosition="right" />
<ChartType
id="alertTimeSeries"
name="Count"
data={alertAcknowledgedTimeGraphData}
xScaleType="time"
xAccessor={0}
yAccessors={[1]}
/>
</Chart >
</div>
)
though I am successfully able to add filters in appState using data plugin. whenver I remove the filters form the filter bar, onFiltersUpdated does not seam to work. function never get called. and on occasions following error is thrown on console:
checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `value` supplied to `EuiSelect`.
in EuiSelect (created by ValueInputTypeUI)
in ValueInputTypeUI (created by InjectIntl(ValueInputTypeUI))
in InjectIntl(ValueInputTypeUI) (created by PhraseValueInputUI)
in div (created by EuiFormRow)
in div (created by EuiFormRow)
in EuiFormRow (created by PhraseValueInputUI)
in PhraseValueInputUI (created by EnhancedType)
in EnhancedType (created by InjectIntl(EnhancedType))
in InjectIntl(EnhancedType) (created by FilterEditorUI)
in div (created by FilterEditorUI)
in div (created by FilterEditorUI)
in div (created by EuiForm)
in EuiForm (created by FilterEditorUI)
in div (created by FilterEditorUI)
in div (created by FilterEditorUI)
in FilterEditorUI (created by InjectIntl(FilterEditorUI))
in InjectIntl(FilterEditorUI) (created by FilterBarUI)
in div (created by FilterBarUI)
in div (created by EuiFlexItem)
in EuiFlexItem (created by FilterBarUI)
in div (created by EuiMutationObserver)
in EuiMutationObserver (created by EuiPopover)
in div (created by EuiPanel)
in EuiPanel (created by EuiPopover)
in div (created by ForwardRef)
in ForwardRef (created by ForwardRef)
in ForwardRef (created by ForwardRef)
in ForwardRef (created by ForwardRef)
in ForwardRef (created by EuiFocusTrap)
in div (created by OutsideEventDetector)
in OutsideEventDetector (created by EuiFocusTrap)
in EuiOutsideClickDetector (created by EuiFocusTrap)
in EuiFocusTrap (created by EuiPopover)
in EuiPortal (created by EuiPopover)
in div (created by EuiPopover)
in EuiOutsideClickDetector (created by EuiPopover)
in EuiPopover (created by FilterBarUI)
in div (created by EuiFlexItem)
in EuiFlexItem (created by FilterBarUI)
in div (created by EuiFlexGroup)
in EuiFlexGroup (created by FilterBarUI)
in div (created by EuiFlexItem)
in EuiFlexItem (created by FilterBarUI)
in div (created by EuiFlexGroup)
in EuiFlexGroup (created by FilterBarUI)
in FilterBarUI (created by InjectIntl(FilterBarUI))
in InjectIntl(FilterBarUI) (created by SearchBarUI)
in div (created by SearchBarUI)
in div (created by SearchBarUI)
in div (created by SearchBarUI)
in SearchBarUI (created by EnhancedType)
in EnhancedType (created by InjectIntl(EnhancedType))
in InjectIntl(EnhancedType) (created by WrappedSearchBar)
in Suspense (created by WrappedSearchBar)
in WrappedSearchBar (created by EnhancedType)
in EnhancedType (created by InjectIntl(EnhancedType))
in InjectIntl(EnhancedType)
in Provider
in Unknown (created by TopNavMenu)
in span (created by TopNavMenu)
in TopNavMenu
in EuiContext (created by I18nContext)
in PseudoLocaleWrapper (created by I18nProvider)
in IntlProvider (created by I18nProvider)
in I18nProvider (created by I18nContext)
in I18nContext
in Unknown (created by CorrelationAppApp)
in div (created by CorrelationAppApp)
in CorrelationAppApp
in Router (created by BrowserRouter)
in BrowserRouter
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1875
createElementWithValidation @ react.development.js:2059
render @ value_input_type.tsx:98
finishClassComponent @ react-dom.development.js:18470
updateClassComponent @ react-dom.development.js:18423
beginWork$1 @ react-dom.development.js:20186
beginWork$$1 @ react-dom.development.js:25756
performUnitOfWork @ react-dom.development.js:24698
workLoopSync @ react-dom.development.js:24671
performSyncWorkOnRoot @ react-dom.development.js:24270
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedEventUpdates$1 @ react-dom.development.js:24407
batchedEventUpdates @ react-dom.development.js:1415
dispatchEventForPluginEventSystem @ react-dom.development.js:5894
attemptToDispatchEvent @ react-dom.development.js:6010
dispatchEvent @ react-dom.development.js:5914
ListPicker._handleMouseUp
Please, if you can look into it, whether its a bug or something is wrong with my impementation.
Thanks and Regards
Chaitanya