From 2626a851f8fd9c34673f7542359a9ec1cb4a830b Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 2 Nov 2022 09:52:16 -0700 Subject: [PATCH] Revert "[Feature] Move series side config from data config panel to chart styles (#1199)" This reverts commit 284db6c8dff50010ad34e309f83bac28dddfe602. --- common/constants/explorer.ts | 5 - .../__snapshots__/utils.test.tsx.snap | 21 --- .../__snapshots__/config_panel.test.tsx.snap | 7 - .../config_controls/config_yaxis_side.tsx | 143 ------------------ .../data_configurations_panel.tsx | 18 +++ .../config_panes/config_controls/index.ts | 1 - .../visualizations/charts/lines/line.tsx | 56 +++---- .../visualizations/charts/lines/line_type.ts | 8 - 8 files changed, 42 insertions(+), 217 deletions(-) delete mode 100644 public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts index 96908eab0..4d07b7033 100644 --- a/common/constants/explorer.ts +++ b/common/constants/explorer.ts @@ -82,7 +82,6 @@ export const PLOTLY_GAUGE_COLUMN_NUMBER = 4; export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/; export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )'; export const ADD_BUTTON_TEXT = '+ Add color theme'; -export const ADD_SERIES_POSITION_TEXT = '+ Add label position'; export const NUMBER_INPUT_MIN_LIMIT = 1; export const VIZ_CONTAIN_XY_AXIS = [ @@ -281,7 +280,3 @@ export const DATA_CONFIG_HINTS_INFO = { [BREAKDOWNS]: "Defines how each series is broken down. Breakdowns are 'by' clauses that subdivide the existing series.", }; -export const SERIES_POSITION_OPTIONS = [ - { id: htmlIdGenerator('ct')(), label: 'Left', side: 'left' }, - { id: htmlIdGenerator('ct')(), label: 'Right', side: 'right' }, -]; diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index a61ee008d..d8a2d7f31 100644 --- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -1885,13 +1885,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - Object { - "editor": [Function], - "id": "yaxis-side", - "mapTo": "seriesPosition", - "name": "Series label position", - "schemas": Array [], - }, Object { "editor": [Function], "id": "color-theme", @@ -2393,13 +2386,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - Object { - "editor": [Function], - "id": "yaxis-side", - "mapTo": "seriesPosition", - "name": "Series label position", - "schemas": Array [], - }, Object { "editor": [Function], "id": "color-theme", @@ -2915,13 +2901,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - Object { - "editor": [Function], - "id": "yaxis-side", - "mapTo": "seriesPosition", - "name": "Series label position", - "schemas": Array [], - }, Object { "editor": [Function], "id": "color-theme", diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 3efa4edcc..7283927bb 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -1410,13 +1410,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - Object { - "editor": [Function], - "id": "yaxis-side", - "mapTo": "seriesPosition", - "name": "Series label position", - "schemas": Array [], - }, Object { "editor": [Function], "id": "color-theme", diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx deleted file mode 100644 index 492c4d2e3..000000000 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx +++ /dev/null @@ -1,143 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React, { Fragment, useCallback } from 'react'; -import { - EuiButton, - EuiAccordion, - EuiFormRow, - EuiSpacer, - EuiIcon, - EuiFlexGroup, - EuiFlexItem, - htmlIdGenerator, - EuiComboBox, -} from '@elastic/eui'; -import { isEmpty } from 'lodash'; -import { - ADD_SERIES_POSITION_TEXT, - AGGREGATIONS, - SERIES_POSITION_OPTIONS, -} from '../../../../../../../../common/constants/explorer'; -import { getPropName } from '../../../../../utils/utils'; - -export const ConfigYAxisSide = ({ - visualizations, - schemas, - vizState = [], - handleConfigChange, - sectionName = 'Series position', -}: any) => { - const { data } = visualizations; - const { metadata: { fields = [] } = {} } = data?.rawVizData; - const { dataConfig = {} } = data?.userConfigs; - - const options = (dataConfig[AGGREGATIONS] && dataConfig[AGGREGATIONS].length !== 0 - ? dataConfig[AGGREGATIONS] - : fields - ).map((optionItem) => ({ - ...optionItem, - label: getPropName(optionItem), - side: 'left', - className: 'color-theme-combo-box-option', - ctid: htmlIdGenerator('ct')(), - })); - - const getUpdatedOptions = () => - options.filter((option) => !vizState.some((vizOpt) => option.label === vizOpt?.label)); - - const handleColorThemeChange = useCallback( - (ctId, ctName) => (event) => { - const value = event.length ? event[0][ctName] : ''; - handleConfigChange([ - ...vizState.map((ct) => { - if (ctId !== ct.ctid) return ct; - return { - ...ct, - [ctName]: value, - }; - }), - ]); - }, - [vizState, handleConfigChange] - ); - - const handleDeletePosition = useCallback( - (ctId) => (event) => handleConfigChange([...vizState.filter((ct) => ct.ctid !== ctId)]), - [vizState, handleConfigChange] - ); - - const handleAddPosition = useCallback(() => { - const res = isEmpty(vizState) - ? [options.length ? options[0] : { id: htmlIdGenerator('ct')(), label: '', side: 'left' }] - : [ - ...vizState, - ...options.filter((option) => !vizState.some((vizOpt) => option.label === vizOpt?.label)), - ]; - handleConfigChange(res); - }, [vizState, handleConfigChange]); - - return ( - - - {ADD_SERIES_POSITION_TEXT} - - - {!isEmpty(vizState) && - vizState.map((ct) => { - return ( - - - - - - - - - - - positionItem.side === ct.side - ) - : [] - } - onChange={handleColorThemeChange(ct.ctid, 'side')} - aria-label="series-position-dropdown" - /> - - - - - - - - - - - ); - })} - - ); -}; diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx index 09a3b59b2..998cf3c71 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx @@ -306,6 +306,11 @@ export const DataConfigPanelItem = ({ fillVisDataInStore({ visData: visData, query, visConfMetadata, visMeta }); }; + const isPositionButtonVisible = (sectionName: string) => + sectionName === AGGREGATIONS && + (visualizations.vis.name === VIS_CHART_TYPES.Line || + visualizations.vis.name === VIS_CHART_TYPES.Scatter); + const getTimeStampFilteredFields = (options: IField[]) => filter(options, (i: IField) => i.type !== TIMESTAMP); @@ -376,6 +381,19 @@ export const DataConfigPanelItem = ({ )} {/* Show input fields for dimensions */} {!isAggregations && getCommonDimensionsField(selectedObj, name)} + {isPositionButtonVisible(name) && ( + + updateList(id, 'side')} + /> + + )} diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts index c026190a6..10c56703e 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts @@ -26,4 +26,3 @@ export { ButtonGroupItem } from './config_button_group'; export { TextInputFieldItem } from './config_text_input'; export { ConfigBarChartStyles } from './config_bar_chart_styles'; export { ConfigAvailability } from './config_availability'; -export { ConfigYAxisSide } from './config_yaxis_side'; diff --git a/public/components/visualizations/charts/lines/line.tsx b/public/components/visualizations/charts/lines/line.tsx index 88de3ae06..d669c60ed 100644 --- a/public/components/visualizations/charts/lines/line.tsx +++ b/public/components/visualizations/charts/lines/line.tsx @@ -44,7 +44,6 @@ export const Line = ({ visualizations, layout, config }: any) => { userConfigs: { dataConfig: { chartStyles = {}, - seriesPosition = [], legend = {}, span = {}, colorTheme = [], @@ -86,8 +85,7 @@ export const Line = ({ visualizations, layout, config }: any) => { colorTheme.find((colorSelected) => colorSelected.name.name === field)?.color) || PLOTLY_COLOR[index % PLOTLY_COLOR.length]; const timestampField = find(fields, (field) => field.type === 'timestamp'); - const xaxis = [timestampField]; - let multiYAxisLayout = {}; + let xaxis = [timestampField]; if (!timestampField || isEmpty(series)) return ; @@ -96,34 +94,16 @@ export const Line = ({ visualizations, layout, config }: any) => { return traces.map((trace, idx: number) => { const selectedColor = getSelectedColorTheme(trace.aggName, idx); const fillColor = hexToRgb(selectedColor, fillOpacity); - const side = seriesPosition.find((seriesItem) => seriesItem.label === trace.name); - const multiYaxis = { yaxis: `y${idx + 1}` }; - - multiYAxisLayout = { - ...multiYAxisLayout, - [`yaxis${idx > 0 ? idx + 1 : ''}`]: { - titlefont: { - color: selectedColor, - }, - automargin: true, - tickfont: { - color: selectedColor, - ...(labelSize && { - size: labelSize, - }), - }, - ...(idx > 0 && { overlaying: 'y' }), - side: side ? side.side : 'left', - }, - }; return { ...trace, hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, type: 'line', mode, - fill: 'tozeroy', - fillcolor: fillColor, + ...{ + fill: 'tozeroy', + fillcolor: fillColor, + }, line: { shape: lineShape, width: lineWidth, @@ -131,13 +111,14 @@ export const Line = ({ visualizations, layout, config }: any) => { }, marker: { size: markerSize, - color: fillColor, - line: { - color: selectedColor, - width: lineWidth, + ...{ + color: fillColor, + line: { + color: selectedColor, + width: lineWidth, + }, }, }, - ...(idx >= 1 && multiYaxis), }; }); }; @@ -162,7 +143,16 @@ export const Line = ({ visualizations, layout, config }: any) => { transformPreprocessedDataToTraces(preprocessJsonData(jsonData, visConfig), visConfig), traceStyles ); - }, [chartStyles, jsonData, dimensions, series, span, breakdowns, panelOptions, tooltipOptions]); + }, [ + chartStyles, + jsonData, + dimensions, + series, + span, + breakdowns, + panelOptions, + tooltipOptions, + ]); const mergedLayout = useMemo(() => { const axisLabelsStyle = { @@ -191,7 +181,9 @@ export const Line = ({ visualizations, layout, config }: any) => { tickangle: tickAngle, ...axisLabelsStyle, }, - ...multiYAxisLayout, + yaxis: { + ...axisLabelsStyle, + }, showlegend: showLegend, margin: PLOT_MARGIN, }; diff --git a/public/components/visualizations/charts/lines/line_type.ts b/public/components/visualizations/charts/lines/line_type.ts index ccbde39ab..d02558b66 100644 --- a/public/components/visualizations/charts/lines/line_type.ts +++ b/public/components/visualizations/charts/lines/line_type.ts @@ -14,7 +14,6 @@ import { ConfigLegend, InputFieldItem, ConfigColorTheme, - ConfigYAxisSide, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability'; import { @@ -205,13 +204,6 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, - { - id: 'yaxis-side', - name: 'Series label position', - editor: ConfigYAxisSide, - mapTo: 'seriesPosition', - schemas: [], - }, { id: 'color-theme', name: 'Color theme',