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
In this PR, we hook up an experimental table vis in vis builder. This table vis is a refactor of previous table. It is written in React and DataGrid component. In this PR, we did two main things: * add an experimental table visualization * enable it in vis builder Issue Resolved (hook up table in vis builder): opensearch-project#2704 The experimental table vis has all the features from current table, including * restore table vis in react using a 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 * 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 Beside of restoring original features, there are some changes: * [IMPROVE] remove repeated column from split tables 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. * [NEW FEATURE] adjustable table column width In the new table visualization, customer can adjust the column width as needed. Issue Resolved: opensearch-project#2212 opensearch-project#2213 opensearch-project#2305 opensearch-project#2379 opensearch-project#2579 Signed-off-by: Anan Zhuang <[email protected]>
- Loading branch information
Showing
34 changed files
with
2,296 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
243 changes: 243 additions & 0 deletions
243
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,243 @@ | ||
| /* | ||
| * 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 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 = useMemo(() => { | ||
| const defaultPercentageColText = { | ||
| value: '', | ||
| text: i18n.translate('visTypeTableNew.params.defaultPercentageCol', { | ||
| defaultMessage: 'Don’t show', | ||
| }), | ||
| }; | ||
| return aggConfigs | ||
| ? [ | ||
| defaultPercentageColText, | ||
| ...tabifyGetColumns(aggConfigs.getResponseAggs(), true) | ||
| .filter((col) => get(col.aggConfig.toSerializedFieldFormat(), 'id') === 'number') | ||
| .map(({ name }) => ({ value: name, text: name })), | ||
| ] | ||
| : [defaultPercentageColText]; | ||
| }, [aggConfigs]); | ||
|
|
||
| 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.