forked from opensearch-project/OpenSearch-Dashboards
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Table Vis] add an experimental table visualization in vis builder
To convert the table visualization into React & OUI DataGrid component, in this PR, we did two main things: * add an experimental table visualization * enable it in vis builder The experimental table vis has all the features from current table. It does couple of things: * restore table vis in react using OUI datagrid component * datagrid component does not support splitted grids. For future transfer to OUI Datagrid, we create a tableGroup in visData for splitted grids. * restore basic pagenation, sort and format. * implement datagrid columns * display column title correctly * deangular and re-use formatted column * convert formatted column to data grid column * restore filter in and filter out value functions * make table vis column resizable * format table cell to show Date and percent * restore showTotal feature: it allows table vis to show total, avg, min, max and count statics on count * restore export csv feature to table vis * split table in rows and columns Issue Resolved: opensearch-project#2212 opensearch-project#2213 opensearch-project#2305 opensearch-project#2379 [Table Visualization][IMPROVE] remove repeated column from split tables (opensearch-project#2583) Currently, when we split table by columns, the split column is shown both in the table title and as a separate column. This is not needed. In this PR, we remove the repeated column in split tables in col. Partically resolved: opensearch-project#2579 (comment) Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization][BUG] remove local column width state (opensearch-project#2582) * remove local col width state to allow split tables to fetch updated col width state * fix type errors in usePagination Partially resolved: opensearch-project#2579 (comment) Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> [Table Visualization][BUG] partical rows shows metrics for all columns (opensearch-project#2648) Currently, when we enable Show partial rows in the Options panel, we see metrics been added to every column even though Show metrics for every bucket/level is not enabled. Metrics are added and returned when we enable the partial rows. This PR fixed the bug by slice the returned data to allow only the last set of metrices. Partially resolved: opensearch-project#2579 (comment) Signed-off-by: Anan Zhuang <[email protected]>
- Loading branch information
Showing
34 changed files
with
2,294 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
255 changes: 255 additions & 0 deletions
255
src/plugins/vis_builder/public/visualizations/table/components/table_viz_options.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,255 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { get, cloneDeep } from 'lodash'; | ||
| import React, { useCallback, useEffect, useMemo } from 'react'; | ||
| import { i18n } from '@osd/i18n'; | ||
| import produce from 'immer'; | ||
| import { Draft } from 'immer'; | ||
| import { EuiIconTip } from '@elastic/eui'; | ||
| import { search } from '../../../../../data/public'; | ||
| import { NumberInputOption, SwitchOption, SelectOption } from '../../../../../charts/public'; | ||
| import { | ||
| useTypedDispatch, | ||
| useTypedSelector, | ||
| setStyleState, | ||
| } from '../../../application/utils/state_management'; | ||
| import { TableOptionsDefaults } from '../table_viz_type'; | ||
| import { Option } from '../../../application/app'; | ||
| import { useIndexPatterns } from '../../../application/utils/use'; | ||
| import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public'; | ||
| import { VisBuilderServices } from '../../../types'; | ||
|
|
||
| const { tabifyGetColumns } = search; | ||
|
|
||
| export enum AggTypes { | ||
| SUM = 'sum', | ||
| AVG = 'avg', | ||
| MIN = 'min', | ||
| MAX = 'max', | ||
| COUNT = 'count', | ||
| } | ||
|
|
||
| const totalAggregations = [ | ||
| { | ||
| value: AggTypes.SUM, | ||
| text: i18n.translate('visTypeTableNew.totalAggregations.sumText', { | ||
| defaultMessage: 'Sum', | ||
| }), | ||
| }, | ||
| { | ||
| value: AggTypes.AVG, | ||
| text: i18n.translate('visTypeTableNew.totalAggregations.averageText', { | ||
| defaultMessage: 'Average', | ||
| }), | ||
| }, | ||
| { | ||
| value: AggTypes.MIN, | ||
| text: i18n.translate('visTypeTableNewNew.totalAggregations.minText', { | ||
| defaultMessage: 'Min', | ||
| }), | ||
| }, | ||
| { | ||
| value: AggTypes.MAX, | ||
| text: i18n.translate('visTypeTableNewNew.totalAggregations.maxText', { | ||
| defaultMessage: 'Max', | ||
| }), | ||
| }, | ||
| { | ||
| value: AggTypes.COUNT, | ||
| text: i18n.translate('visTypeTableNewNew.totalAggregations.countText', { | ||
| defaultMessage: 'Count', | ||
| }), | ||
| }, | ||
| ]; | ||
|
|
||
| function TableVizOptions() { | ||
| const perPageLabel = i18n.translate('visTypeTableNewNew.params.perPageLabel', { | ||
| defaultMessage: 'Max rows per page', | ||
| }); | ||
| const showMetricsLabel = i18n.translate('visTypeTableNewNew.params.showMetricsLabel', { | ||
| defaultMessage: 'Show metrics for every bucket/level', | ||
| }); | ||
| const showPartialRowsLabel = i18n.translate('visTypeTableNewNew.params.showPartialRowsLabel', { | ||
| defaultMessage: 'Show partial rows', | ||
| }); | ||
| const showTotalLabel = i18n.translate('visTypeTableNewNew.params.showTotalLabel', { | ||
| defaultMessage: 'Show total', | ||
| }); | ||
| const totalFunctionLabel = i18n.translate('visTypeTableNewNew.params.totalFunctionLabel', { | ||
| defaultMessage: 'Total function', | ||
| }); | ||
| const percentageColLabel = i18n.translate('visTypeTableNewNew.params.PercentageColLabel', { | ||
| defaultMessage: 'Percentage column', | ||
| }); | ||
| const showPartialRowsTip = i18n.translate('visTypeTableNewNew.params.showPartialRowsTip', { | ||
| defaultMessage: | ||
| 'Show rows that have partial data. This will still calculate metrics for every bucket/level, even if they are not displayed.', | ||
| }); | ||
| const defaultPercentageColText = i18n.translate('visTypeTableNewNew.params.defaultPercentageCol', { | ||
| defaultMessage: 'Don’t show', | ||
| }); | ||
| const defaultPercentageColumns = useMemo(() => [{ value: '', text: defaultPercentageColText }], [ | ||
| defaultPercentageColText, | ||
| ]); | ||
|
|
||
| const styleState = useTypedSelector((state) => state.style) as TableOptionsDefaults; | ||
| const dispatch = useTypedDispatch(); | ||
| const indexPattern = useIndexPatterns().selected; | ||
| const { | ||
| services: { | ||
| data: { | ||
| search: { aggs: aggService }, | ||
| }, | ||
| }, | ||
| } = useOpenSearchDashboards<VisBuilderServices>(); | ||
| const aggConfigParams = useTypedSelector( | ||
| (state) => state.visualization.activeVisualization?.aggConfigParams | ||
| ); | ||
| const aggConfigs = useMemo(() => { | ||
| return indexPattern && aggService.createAggConfigs(indexPattern, cloneDeep(aggConfigParams)); | ||
| }, [aggConfigParams, aggService, indexPattern]); | ||
|
|
||
| const setOption = useCallback( | ||
| (callback: (draft: Draft<typeof styleState>) => void) => { | ||
| const newState = produce(styleState, callback); | ||
| dispatch(setStyleState<TableOptionsDefaults>(newState)); | ||
| }, | ||
| [dispatch, styleState] | ||
| ); | ||
|
|
||
| // const percentageColumns = aggConfigs | ||
| // ? useMemo( | ||
| // () => [ | ||
| // defaultPercentageColumns, | ||
| // ...tabifyGetColumns(aggConfigs.getResponseAggs(), true) | ||
| // .filter((col) => get(col.aggConfig.toSerializedFieldFormat(), 'id') === 'number') | ||
| // .map(({ name }) => ({ value: name, text: name })), | ||
| // ], | ||
| // [aggConfigs] | ||
| // ) | ||
| // : [defaultPercentageColumns]; | ||
|
|
||
| const percentageColumns = useMemo( | ||
| () => | ||
| aggConfigs | ||
| ? [ | ||
| defaultPercentageColumns, | ||
| ...tabifyGetColumns(aggConfigs.getResponseAggs(), true) | ||
| .filter((col) => get(col.aggConfig.toSerializedFieldFormat(), 'id') === 'number') | ||
| .map(({ name }) => ({ value: name, text: name })), | ||
| ] | ||
| : [defaultPercentageColumns], | ||
| [aggConfigs, defaultPercentageColumns] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if ( | ||
| !percentageColumns.find(({ value }) => value === styleState.percentageCol) && | ||
| percentageColumns[0] && | ||
| percentageColumns[0].value !== styleState.percentageCol | ||
| ) { | ||
| setOption((draft) => { | ||
| draft.percentageCol = percentageColumns[0].value; | ||
| }); | ||
| } | ||
| }, [percentageColumns, styleState.percentageCol, setOption]); | ||
|
|
||
| const isPerPageValid = styleState.perPage === '' || styleState.perPage > 0; | ||
|
|
||
| return ( | ||
| <> | ||
| <Option | ||
| title={i18n.translate('visTypeTableNewNew.params.settingsTitle', { defaultMessage: 'Settings' })} | ||
| initialIsOpen | ||
| > | ||
| <NumberInputOption | ||
| label={ | ||
| <> | ||
| {perPageLabel}, | ||
| <EuiIconTip | ||
| content="Leaving this field empty means it will use number of buckets from the response." | ||
| position="right" | ||
| /> | ||
| </> | ||
| } | ||
| isInvalid={!isPerPageValid} | ||
| min={1} | ||
| paramName="perPage" | ||
| value={styleState.perPage} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.perPage = value; | ||
| }) | ||
| } | ||
| /> | ||
|
|
||
| <SwitchOption | ||
| label={showMetricsLabel} | ||
| paramName="showMetricsAtAllLevels" | ||
| value={styleState.showMetricsAtAllLevels} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.showMetricsAtAllLevels = value; | ||
| }) | ||
| } | ||
| data-test-subj="showMetricsAtAllLevels" | ||
| /> | ||
|
|
||
| <SwitchOption | ||
| label={showPartialRowsLabel} | ||
| tooltip={showPartialRowsTip} | ||
| paramName="showPartialRows" | ||
| value={styleState.showPartialRows} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.showPartialRows = value; | ||
| }) | ||
| } | ||
| data-test-subj="showPartialRows" | ||
| /> | ||
|
|
||
| <SwitchOption | ||
| label={showTotalLabel} | ||
| paramName="showTotal" | ||
| value={styleState.showTotal} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.showTotal = value; | ||
| }) | ||
| } | ||
| /> | ||
|
|
||
| <SelectOption | ||
| label={totalFunctionLabel} | ||
| disabled={!styleState.showTotal} | ||
| options={totalAggregations} | ||
| paramName="totalFunc" | ||
| value={styleState.totalFunc} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.totalFunc = value; | ||
| }) | ||
| } | ||
| /> | ||
|
|
||
| <SelectOption | ||
| label={percentageColLabel} | ||
| options={percentageColumns} | ||
| paramName="percentageCol" | ||
| value={styleState.percentageCol} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.percentageCol = value; | ||
| }) | ||
| } | ||
| id="datatableVisualizationPercentageCol" | ||
| /> | ||
| </Option> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export { TableVizOptions }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| export { createTableConfig } from './table_viz_type'; |
Oops, something went wrong.