forked from opensearch-project/OpenSearch-Dashboards
-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Vis Builder] Add an experimental table visualization in vis builder (o…
…pensearch-project#2705) * [Vis Builder] 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 Since this is a hookup PR, we remove un-used table vis types and options because they could be defined in vis builder. We also create follow up issues for some un-resolved PR comments. Signed-off-by: Anan Zhuang <ananzh@amazon.com> * remove unused scss tyle Signed-off-by: Anan Zhuang <ananzh@amazon.com> * remove total func and percentage col total func and percentage col are two features that we might need to remove or re-invent for future table vis. For hookup purpose, it doesn't make sense to include some features that we would like to remove. this PR removes total func and percentage col in both table vis and vis builder Signed-off-by: Anan Zhuang <ananzh@amazon.com> * comment out cellActions currently filter in/out cell doesn't function in vis builder. we will coumment out cell actions for now. Signed-off-by: Anan Zhuang <ananzh@amazon.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com>
- Loading branch information
Showing
28 changed files
with
1,380 additions
and
6 deletions.
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
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
109 changes: 109 additions & 0 deletions
109
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,109 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { get } from 'lodash'; | ||
| import React, { useCallback, useEffect, useMemo } from 'react'; | ||
| import { i18n } from '@osd/i18n'; | ||
| import { FormattedMessage } from '@osd/i18n/react'; | ||
| import produce from 'immer'; | ||
| import { Draft } from 'immer'; | ||
| import { EuiIconTip } from '@elastic/eui'; | ||
| import { search } from '../../../../../data/public'; | ||
| import { NumberInputOption, SwitchOption } from '../../../../../charts/public'; | ||
| import { | ||
| useTypedDispatch, | ||
| useTypedSelector, | ||
| setStyleState, | ||
| } from '../../../application/utils/state_management'; | ||
| import { TableOptionsDefaults } from '../table_viz_type'; | ||
| import { Option } from '../../../application/app'; | ||
|
|
||
| function TableVizOptions() { | ||
| const styleState = useTypedSelector((state) => state.style) as TableOptionsDefaults; | ||
| const dispatch = useTypedDispatch(); | ||
|
|
||
| const setOption = useCallback( | ||
| (callback: (draft: Draft<typeof styleState>) => void) => { | ||
| const newState = produce(styleState, callback); | ||
| dispatch(setStyleState<TableOptionsDefaults>(newState)); | ||
| }, | ||
| [dispatch, styleState] | ||
| ); | ||
|
|
||
| const isPerPageValid = styleState.perPage === '' || styleState.perPage > 0; | ||
|
|
||
| return ( | ||
| <> | ||
| <Option | ||
| title={i18n.translate('visTypeTableNewNew.params.settingsTitle', { | ||
| defaultMessage: 'Settings', | ||
| })} | ||
| initialIsOpen | ||
| > | ||
| <NumberInputOption | ||
| label={ | ||
| <> | ||
| {i18n.translate('visTypeTableNewNew.params.perPageLabel', { | ||
| defaultMessage: 'Max rows per page', | ||
| })} | ||
| <EuiIconTip | ||
| content={ | ||
| <FormattedMessage | ||
| id="visTypeTableNewNews.field.emptyTooltip" | ||
| defaultMessage="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={i18n.translate('visTypeTableNewNew.params.showMetricsLabel', { | ||
| defaultMessage: 'Show metrics for every bucket/level', | ||
| })} | ||
| paramName="showMetricsAtAllLevels" | ||
| value={styleState.showMetricsAtAllLevels} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.showMetricsAtAllLevels = value; | ||
| }) | ||
| } | ||
| data-test-subj="showMetricsAtAllLevels" | ||
| /> | ||
|
|
||
| <SwitchOption | ||
| label={i18n.translate('visTypeTableNewNew.params.showPartialRowsLabel', { | ||
| defaultMessage: 'Show partial rows', | ||
| })} | ||
| tooltip={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.', | ||
| })} | ||
| paramName="showPartialRows" | ||
| value={styleState.showPartialRows} | ||
| setValue={(_, value) => | ||
| setOption((draft) => { | ||
| draft.showPartialRows = value; | ||
| }) | ||
| } | ||
| data-test-subj="showPartialRows" | ||
| /> | ||
| </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'; |
95 changes: 95 additions & 0 deletions
95
src/plugins/vis_builder/public/visualizations/table/table_viz_type.ts
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,95 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { i18n } from '@osd/i18n'; | ||
| import { Schemas } from '../../../../vis_default_editor/public'; | ||
| import { AggGroupNames } from '../../../../data/public'; | ||
| import { TableVizOptions } from './components/table_viz_options'; | ||
| import { VisualizationTypeOptions } from '../../services/type_service'; | ||
| import { toExpression } from './to_expression'; | ||
|
|
||
| export interface TableOptionsDefaults { | ||
| perPage: number | ''; | ||
| showPartialRows: boolean; | ||
| showMetricsAtAllLevels: boolean; | ||
| } | ||
|
|
||
| export const createTableConfig = (): VisualizationTypeOptions<TableOptionsDefaults> => ({ | ||
| name: 'table', | ||
| title: 'Table', | ||
| icon: 'visTable', | ||
| description: 'Display table visualizations', | ||
| toExpression, | ||
| ui: { | ||
| containerConfig: { | ||
| data: { | ||
| schemas: new Schemas([ | ||
| { | ||
| group: AggGroupNames.Metrics, | ||
| name: 'metric', | ||
| title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.metricTitle', { | ||
| defaultMessage: 'Metric', | ||
| }), | ||
| min: 1, | ||
| aggFilter: ['!geo_centroid', '!geo_bounds'], | ||
| aggSettings: { | ||
| top_hits: { | ||
| allowStrings: true, | ||
| }, | ||
| }, | ||
| defaults: { | ||
| aggTypes: ['avg', 'cardinality'], | ||
| }, | ||
| }, | ||
| { | ||
| group: AggGroupNames.Buckets, | ||
| name: 'bucket', | ||
| title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.bucketTitle', { | ||
| defaultMessage: 'Split rows', | ||
| }), | ||
| aggFilter: ['!filter'], | ||
| defaults: { | ||
| aggTypes: ['terms'], | ||
| }, | ||
| }, | ||
| { | ||
| group: AggGroupNames.Buckets, | ||
| name: 'split_row', | ||
| title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.splitTitle', { | ||
| defaultMessage: 'Split table in rows', | ||
| }), | ||
| min: 0, | ||
| max: 1, | ||
| aggFilter: ['!filter'], | ||
| defaults: { | ||
| aggTypes: ['terms'], | ||
| }, | ||
| }, | ||
| { | ||
| group: AggGroupNames.Buckets, | ||
| name: 'split_column', | ||
| title: i18n.translate('visTypeTableNewNew.tableVisEditorConfig.schemas.splitTitle', { | ||
| defaultMessage: 'Split table in columns', | ||
| }), | ||
| min: 0, | ||
| max: 1, | ||
| aggFilter: ['!filter'], | ||
| defaults: { | ||
| aggTypes: ['terms'], | ||
| }, | ||
| }, | ||
| ]), | ||
| }, | ||
| style: { | ||
| defaults: { | ||
| perPage: 10, | ||
| showPartialRows: false, | ||
| showMetricsAtAllLevels: false, | ||
| }, | ||
| render: TableVizOptions, | ||
| }, | ||
| }, | ||
| }, | ||
| }); |
Oops, something went wrong.