From 5aa2a2118159b45721b8f8cd97fb597a3626fdd6 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 28 Sep 2022 14:48:14 -0700 Subject: [PATCH] [Vis Builder] Misc Bar chart fixes (#2401) * consolidates state to saved object serialization Signed-off-by: Ashwin P Chandran * fixes histogram agg Signed-off-by: Ashwin P Chandran * fixes orderBy Signed-off-by: Ashwin P Chandran * style fixes Signed-off-by: Ashwin P Chandran * updates base test Signed-off-by: Ashwin P Chandran * Updates changelog Signed-off-by: Ashwin P Chandran Signed-off-by: Ashwin P Chandran (cherry picked from commit 83f13067fd4d5e5270037734b6ae82784ec692a5) --- CHANGELOG.md | 3 + src/plugins/wizard/opensearch_dashboards.json | 18 +++--- .../components/data_tab/config_panel.scss | 4 ++ .../components/data_tab/secondary_panel.tsx | 20 +++++- .../public/application/components/top_nav.tsx | 23 ++++--- .../application/components/workspace.scss | 18 +++++- .../application/utils/get_top_nav_config.tsx | 30 +-------- .../utils/use/use_index_pattern.tsx | 4 +- src/plugins/wizard/public/plugin.ts | 4 +- src/plugins/wizard/public/plugin_services.ts | 6 +- .../saved_visualizations/transforms.test.ts | 64 +++++++++++++++++++ .../public/saved_visualizations/transforms.ts | 28 ++++++++ .../common/expression_helpers.ts | 8 ++- .../vislib/area/to_expression.ts | 12 ++-- .../vislib/common/create_vis.ts | 21 ++++++ .../vislib/histogram/histogram_vis_type.ts | 2 +- .../vislib/histogram/to_expression.ts | 12 ++-- .../vislib/line/to_expression.ts | 12 ++-- test/functional/apps/wizard/_base.ts | 2 +- 19 files changed, 214 insertions(+), 77 deletions(-) create mode 100644 src/plugins/wizard/public/saved_visualizations/transforms.test.ts create mode 100644 src/plugins/wizard/public/saved_visualizations/transforms.ts create mode 100644 src/plugins/wizard/public/visualizations/vislib/common/create_vis.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 6509bd835027..04c3ce768959 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,9 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### 📈 Features/Enhancements ### 🐛 Bug Fixes +* [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401)) +* [Vis Builder] Fixes visualization shift when editing agg ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401)) +* [Vis Builder] Renames "Histogram" to "Bar" in vis type picker ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401)) ### 🚞 Infrastructure diff --git a/src/plugins/wizard/opensearch_dashboards.json b/src/plugins/wizard/opensearch_dashboards.json index ae088bfe4c8f..1068a7228d18 100644 --- a/src/plugins/wizard/opensearch_dashboards.json +++ b/src/plugins/wizard/opensearch_dashboards.json @@ -5,19 +5,19 @@ "server": true, "ui": true, "requiredPlugins": [ + "dashboard", + "data", + "embeddable", + "expressions", "navigation", + "savedObjects", + "visualizations" + ], + "requiredBundles": [ "charts", - "data", "opensearchDashboardsReact", "opensearchDashboardsUtils", - "savedObjects", - "embeddable", - "expressions", - "dashboard", - "visualizations", - "opensearchUiShared", "visDefaultEditor", "visTypeVislib" - ], - "optionalPlugins": [] + ] } diff --git a/src/plugins/wizard/public/application/components/data_tab/config_panel.scss b/src/plugins/wizard/public/application/components/data_tab/config_panel.scss index 6a7f4ac4fc78..0ba8c29bdc56 100644 --- a/src/plugins/wizard/public/application/components/data_tab/config_panel.scss +++ b/src/plugins/wizard/public/application/components/data_tab/config_panel.scss @@ -36,6 +36,10 @@ position: absolute; top: 0; left: 100%; + + .visEditorAggParam--half { + margin: $euiSize 0; + } } &.showSecondary > .wizConfig__section { diff --git a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx index 6fa6789d508e..086140bdb13a 100644 --- a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx @@ -19,7 +19,9 @@ import { setValidity } from '../../utils/state_management/metadata_slice'; const EDITOR_KEY = 'CONFIG_PANEL'; export function SecondaryPanel() { - const draftAgg = useTypedSelector((state) => state.visualization.activeVisualization!.draftAgg); + const { draftAgg, aggConfigParams } = useTypedSelector( + (state) => state.visualization.activeVisualization! + ); const isEditorValid = useTypedSelector((state) => state.metadata.editor.validity[EDITOR_KEY]); const [touched, setTouched] = useState(false); const dispatch = useTypedDispatch(); @@ -39,9 +41,21 @@ export function SecondaryPanel() { indexPattern && draftAgg && aggService.createAggConfigs(indexPattern, [cloneDeep(draftAgg)]) ); }, [draftAgg, aggService, indexPattern]); - const aggConfig = aggConfigs?.aggs[0]; + const metricAggs = useMemo( + () => + indexPattern + ? aggService.createAggConfigs( + indexPattern, + cloneDeep( + aggConfigParams.filter((aggConfigParam) => aggConfigParam.schema === 'metric') + ) + ).aggs + : [], + [aggConfigParams, aggService, indexPattern] + ); + const selectedSchema = useMemo( () => schemas.find((schema) => schema.name === aggConfig?.schema), [aggConfig?.schema, schemas] @@ -93,7 +107,7 @@ export function SecondaryPanel() { schemas={schemas} formIsTouched={touched} groupName={selectedSchema?.group ?? 'none'} - metricAggs={[]} + metricAggs={metricAggs} state={{ data: {}, description: '', diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx index 4e45ba2f05ee..d816a72d0aae 100644 --- a/src/plugins/wizard/public/application/components/top_nav.tsx +++ b/src/plugins/wizard/public/application/components/top_nav.tsx @@ -16,6 +16,7 @@ import { useIndexPatterns, useSavedWizardVis } from '../utils/use'; import { useTypedSelector, useTypedDispatch } from '../utils/state_management'; import { setEditorState } from '../utils/state_management/metadata_slice'; import { useCanSave } from '../utils/use/use_can_save'; +import { saveStateToSavedObject } from '../../saved_visualizations/transforms'; export const TopNav = () => { // id will only be set for the edit route @@ -32,26 +33,29 @@ export const TopNav = () => { const saveDisabledReason = useCanSave(); const savedWizardVis = useSavedWizardVis(visualizationIdFromUrl); + const { selected: indexPattern } = useIndexPatterns(); const config = useMemo(() => { - if (savedWizardVis === undefined) return; - - const { visualization: visualizationState, style: styleState } = rootState; + if (!savedWizardVis || !indexPattern) return; return getTopNavConfig( { visualizationIdFromUrl, - savedWizardVis, - visualizationState, - styleState, + savedWizardVis: saveStateToSavedObject(savedWizardVis, rootState, indexPattern), saveDisabledReason, dispatch, }, services ); - }, [rootState, savedWizardVis, services, visualizationIdFromUrl, saveDisabledReason, dispatch]); - - const indexPattern = useIndexPatterns().selected; + }, [ + savedWizardVis, + visualizationIdFromUrl, + rootState, + indexPattern, + saveDisabledReason, + dispatch, + services, + ]); // reset validity before component destroyed useUnmount(() => { @@ -65,6 +69,7 @@ export const TopNav = () => { config={config} setMenuMountPoint={setHeaderActionMenu} indexPatterns={indexPattern ? [indexPattern] : []} + showDatePicker={!!indexPattern?.timeFieldName ?? true} showSearchBar showSaveQuery useDefaultBehaviors diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss index 1a57a891262e..9e4d79faa278 100644 --- a/src/plugins/wizard/public/application/components/workspace.scss +++ b/src/plugins/wizard/public/application/components/workspace.scss @@ -2,6 +2,12 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ + +$animation-time: 3; +$animation-multiplier: 5; +$total-duartion: $animation-time * $animation-multiplier; +$keyframe-multiplier: 1 / $animation-multiplier; + .wizWorkspace { display: grid; -ms-grid-rows: auto $euiSizeM 1fr; @@ -21,22 +27,28 @@ } &__handFieldSvg { - animation: wizDragAnimation 6s ease-in-out infinite forwards; + animation: wizDragAnimation #{$total-duartion}s ease-in-out infinite forwards; position: absolute; top: 34.5%; } } +@media (prefers-reduced-motion) { + .wizWorkspace__handFieldSvg { + animation: none; + } +} + @keyframes wizDragAnimation { 0% { transform: none; } - 30% { + #{$keyframe-multiplier * 50%} { transform: translate(116%, -80%); } - 60% { + #{$keyframe-multiplier * 100%} { transform: none; } diff --git a/src/plugins/wizard/public/application/utils/get_top_nav_config.tsx b/src/plugins/wizard/public/application/utils/get_top_nav_config.tsx index 75ebd87fbd7c..cad63d62c9a7 100644 --- a/src/plugins/wizard/public/application/utils/get_top_nav_config.tsx +++ b/src/plugins/wizard/public/application/utils/get_top_nav_config.tsx @@ -38,33 +38,19 @@ import { } from '../../../../saved_objects/public'; import { WizardServices } from '../..'; import { WizardVisSavedObject } from '../../types'; -import { StyleState, VisualizationState, AppDispatch } from './state_management'; +import { AppDispatch } from './state_management'; import { EDIT_PATH } from '../../../common'; import { setEditorState } from './state_management/metadata_slice'; interface TopNavConfigParams { visualizationIdFromUrl: string; savedWizardVis: WizardVisSavedObject; - visualizationState: VisualizationState; - styleState: StyleState; saveDisabledReason?: string; dispatch: AppDispatch; } export const getTopNavConfig = ( - { - visualizationIdFromUrl, - savedWizardVis, - visualizationState, - styleState, - saveDisabledReason, - dispatch, - }: TopNavConfigParams, - { - history, - toastNotifications, - i18n: { Context: I18nContext }, - data: { indexPatterns }, - }: WizardServices + { visualizationIdFromUrl, savedWizardVis, saveDisabledReason, dispatch }: TopNavConfigParams, + { history, toastNotifications, i18n: { Context: I18nContext } }: WizardServices ) => { const topNavConfig: TopNavMenuData[] = [ { @@ -94,16 +80,6 @@ export const getTopNavConfig = ( return; } const currentTitle = savedWizardVis.title; - const indexPattern = await indexPatterns.get(visualizationState.indexPattern || ''); - savedWizardVis.searchSourceFields = { - index: indexPattern, - }; - const vizStateWithoutIndex = { - searchField: visualizationState.searchField, - activeVisualization: visualizationState.activeVisualization, - }; - savedWizardVis.visualizationState = JSON.stringify(vizStateWithoutIndex); - savedWizardVis.styleState = JSON.stringify(styleState); savedWizardVis.title = newTitle; savedWizardVis.description = newDescription; savedWizardVis.copyOnSave = newCopyOnSave; diff --git a/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx b/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx index b5c60ee20944..b66c902302ef 100644 --- a/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx +++ b/src/plugins/wizard/public/application/utils/use/use_index_pattern.tsx @@ -17,7 +17,7 @@ export const useIndexPatterns = () => { services: { data }, } = useOpenSearchDashboards(); - let foundSelected: IndexPattern; + let foundSelected: IndexPattern | undefined; if (!loading && !error) { foundSelected = indexPatterns.filter((p) => p.id === indexId)[0]; if (foundSelected === undefined) { @@ -47,6 +47,6 @@ export const useIndexPatterns = () => { indexPatterns, error, loading, - selected: foundSelected!, + selected: foundSelected, }; }; diff --git a/src/plugins/wizard/public/plugin.ts b/src/plugins/wizard/public/plugin.ts index 9c56562f4ba1..5746913bd4ad 100644 --- a/src/plugins/wizard/public/plugin.ts +++ b/src/plugins/wizard/public/plugin.ts @@ -26,7 +26,7 @@ import { EDIT_PATH, PLUGIN_ID, PLUGIN_NAME, WIZARD_SAVED_OBJECT } from '../commo import { TypeService } from './services/type_service'; import { getPreloadedStore } from './application/utils/state_management'; import { - setAggService, + setSearchService, setIndexPatterns, setHttp, setSavedWizardLoader, @@ -150,7 +150,7 @@ export class WizardPlugin }); // Register plugin services - setAggService(data.search.aggs); + setSearchService(data.search); setExpressionLoader(expressions.ExpressionLoader); setReactExpressionRenderer(expressions.ReactExpressionRenderer); setHttp(core.http); diff --git a/src/plugins/wizard/public/plugin_services.ts b/src/plugins/wizard/public/plugin_services.ts index 8f01ea6e9b6b..b2cedc41c99f 100644 --- a/src/plugins/wizard/public/plugin_services.ts +++ b/src/plugins/wizard/public/plugin_services.ts @@ -10,9 +10,9 @@ import { HttpStart, IUiSettingsClient } from '../../../core/public'; import { ExpressionsStart } from '../../expressions/public'; import { TypeServiceStart } from './services/type_service'; -export const [getAggService, setAggService] = createGetterSetter< - DataPublicPluginStart['search']['aggs'] ->('data.search.aggs'); +export const [getSearchService, setSearchService] = createGetterSetter< + DataPublicPluginStart['search'] +>('data.search'); export const [getExpressionLoader, setExpressionLoader] = createGetterSetter< ExpressionsStart['ExpressionLoader'] diff --git a/src/plugins/wizard/public/saved_visualizations/transforms.test.ts b/src/plugins/wizard/public/saved_visualizations/transforms.test.ts new file mode 100644 index 000000000000..df2fd7f1d197 --- /dev/null +++ b/src/plugins/wizard/public/saved_visualizations/transforms.test.ts @@ -0,0 +1,64 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { coreMock } from '../../../../core/public/mocks'; +import { getStubIndexPattern } from '../../../../plugins/data/public/test_utils'; +import { IndexPattern } from '../../../data/public'; +import { RootState } from '../application/utils/state_management'; +import { WizardVisSavedObject } from '../types'; +import { saveStateToSavedObject } from './transforms'; + +const getConfig = (cfg: any) => cfg; + +describe('transforms', () => { + describe('saveStateToSavedObject', () => { + let TEST_INDEX_PATTERN_ID; + let savedObject; + let rootState: RootState; + let indexPattern: IndexPattern; + + beforeEach(() => { + TEST_INDEX_PATTERN_ID = 'test-pattern'; + savedObject = {} as WizardVisSavedObject; + rootState = { + metadata: { editor: { state: 'loading', validity: {} } }, + style: '', + visualization: { + searchField: '', + indexPattern: TEST_INDEX_PATTERN_ID, + activeVisualization: { + name: 'bar', + aggConfigParams: [], + }, + }, + }; + indexPattern = getStubIndexPattern( + TEST_INDEX_PATTERN_ID, + getConfig, + null, + [], + coreMock.createSetup() + ); + }); + + test('should save root state information into saved object', async () => { + saveStateToSavedObject(savedObject, rootState, indexPattern); + + expect(savedObject.visualizationState).not.toContain(TEST_INDEX_PATTERN_ID); + expect(savedObject.styleState).toEqual(JSON.stringify(rootState.style)); + expect(savedObject.searchSourceFields?.index?.id).toEqual(TEST_INDEX_PATTERN_ID); + }); + + test('should fail if the index pattern does not match the value on state', () => { + rootState.visualization.indexPattern = 'Some-other-pattern'; + + expect(() => + saveStateToSavedObject(savedObject, rootState, indexPattern) + ).toThrowErrorMatchingInlineSnapshot( + `"indexPattern id should match the value in redux state"` + ); + }); + }); +}); diff --git a/src/plugins/wizard/public/saved_visualizations/transforms.ts b/src/plugins/wizard/public/saved_visualizations/transforms.ts new file mode 100644 index 000000000000..9772decbbafc --- /dev/null +++ b/src/plugins/wizard/public/saved_visualizations/transforms.ts @@ -0,0 +1,28 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import produce from 'immer'; +import { IndexPattern } from '../../../data/public'; +import { RootState, VisualizationState } from '../application/utils/state_management'; +import { WizardVisSavedObject } from '../types'; + +export const saveStateToSavedObject = ( + obj: WizardVisSavedObject, + state: RootState, + indexPattern: IndexPattern +): WizardVisSavedObject => { + if (state.visualization.indexPattern !== indexPattern.id) + throw new Error('indexPattern id should match the value in redux state'); + + obj.visualizationState = JSON.stringify( + produce(state.visualization, (draft: VisualizationState) => { + delete draft.indexPattern; + }) + ); + obj.styleState = JSON.stringify(state.style); + obj.searchSourceFields = { index: indexPattern }; + + return obj; +}; diff --git a/src/plugins/wizard/public/visualizations/common/expression_helpers.ts b/src/plugins/wizard/public/visualizations/common/expression_helpers.ts index 561f724f2568..069666677d60 100644 --- a/src/plugins/wizard/public/visualizations/common/expression_helpers.ts +++ b/src/plugins/wizard/public/visualizations/common/expression_helpers.ts @@ -8,7 +8,7 @@ import { OpenSearchaggsExpressionFunctionDefinition } from '../../../../data/pub import { ExpressionFunctionOpenSearchDashboards } from '../../../../expressions'; import { buildExpressionFunction } from '../../../../expressions/public'; import { VisualizationState } from '../../application/utils/state_management'; -import { getAggService, getIndexPatterns } from '../../plugin_services'; +import { getSearchService, getIndexPatterns } from '../../plugin_services'; export const getAggExpressionFunctions = async (visualization: VisualizationState) => { const { activeVisualization, indexPattern: indexId = '' } = visualization; @@ -17,7 +17,10 @@ export const getAggExpressionFunctions = async (visualization: VisualizationStat const indexPatternsService = getIndexPatterns(); const indexPattern = await indexPatternsService.get(indexId); // aggConfigParams is the serealizeable aggConfigs that need to be reconstructed here using the agg servce - const aggConfigs = getAggService().createAggConfigs(indexPattern, cloneDeep(aggConfigParams)); + const aggConfigs = getSearchService().aggs.createAggConfigs( + indexPattern, + cloneDeep(aggConfigParams) + ); const opensearchDashboards = buildExpressionFunction( 'opensearchDashboards', @@ -38,6 +41,7 @@ export const getAggExpressionFunctions = async (visualization: VisualizationStat return { aggConfigs, + indexPattern, expressionFns: [opensearchDashboards, opensearchaggs], }; }; diff --git a/src/plugins/wizard/public/visualizations/vislib/area/to_expression.ts b/src/plugins/wizard/public/visualizations/vislib/area/to_expression.ts index 9d40d64c1cfc..7512b2f746cc 100644 --- a/src/plugins/wizard/public/visualizations/vislib/area/to_expression.ts +++ b/src/plugins/wizard/public/visualizations/vislib/area/to_expression.ts @@ -3,23 +3,25 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Vis, buildVislibDimensions } from '../../../../../visualizations/public'; +import { buildVislibDimensions } from '../../../../../visualizations/public'; import { buildExpression, buildExpressionFunction } from '../../../../../expressions/public'; import { AreaOptionsDefaults } from './area_vis_type'; import { getAggExpressionFunctions } from '../../common/expression_helpers'; import { VislibRootState, getValueAxes, getPipelineParams } from '../common'; +import { createVis } from '../common/create_vis'; export const toExpression = async ({ style: styleState, visualization, }: VislibRootState) => { - const { aggConfigs, expressionFns } = await getAggExpressionFunctions(visualization); + const { aggConfigs, expressionFns, indexPattern } = await getAggExpressionFunctions( + visualization + ); const { addLegend, addTooltip, legendPosition, type } = styleState; - const params = getPipelineParams(); - const vis = new Vis(type); - vis.data.aggs = aggConfigs; + const vis = await createVis(type, aggConfigs, indexPattern); + const params = getPipelineParams(); const dimensions = await buildVislibDimensions(vis, params); const valueAxes = getValueAxes(dimensions.y); diff --git a/src/plugins/wizard/public/visualizations/vislib/common/create_vis.ts b/src/plugins/wizard/public/visualizations/vislib/common/create_vis.ts new file mode 100644 index 000000000000..8bee18b8d94b --- /dev/null +++ b/src/plugins/wizard/public/visualizations/vislib/common/create_vis.ts @@ -0,0 +1,21 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { AggConfigs, IndexPattern } from '../../../../../data/public'; +import { Vis } from '../../../../../visualizations/public'; +import { getSearchService } from '../../../plugin_services'; + +export const createVis = async ( + type: string, + aggConfigs: AggConfigs, + indexPattern: IndexPattern +) => { + const vis = new Vis(type); + vis.data.aggs = aggConfigs; + vis.data.searchSource = await getSearchService().searchSource.create(); + vis.data.searchSource.setField('index', indexPattern); + + return vis; +}; diff --git a/src/plugins/wizard/public/visualizations/vislib/histogram/histogram_vis_type.ts b/src/plugins/wizard/public/visualizations/vislib/histogram/histogram_vis_type.ts index e99f062cb615..a5b1a7df1356 100644 --- a/src/plugins/wizard/public/visualizations/vislib/histogram/histogram_vis_type.ts +++ b/src/plugins/wizard/public/visualizations/vislib/histogram/histogram_vis_type.ts @@ -18,7 +18,7 @@ export interface HistogramOptionsDefaults extends BasicOptionsDefaults { export const createHistogramConfig = (): VisualizationTypeOptions => ({ name: 'histogram', - title: 'Histogram', + title: 'Bar', icon: 'visBarVertical', description: 'Display histogram visualizations', toExpression, diff --git a/src/plugins/wizard/public/visualizations/vislib/histogram/to_expression.ts b/src/plugins/wizard/public/visualizations/vislib/histogram/to_expression.ts index 6357b6acee22..64308a3a02f4 100644 --- a/src/plugins/wizard/public/visualizations/vislib/histogram/to_expression.ts +++ b/src/plugins/wizard/public/visualizations/vislib/histogram/to_expression.ts @@ -3,23 +3,25 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Vis, buildVislibDimensions } from '../../../../../visualizations/public'; +import { buildVislibDimensions } from '../../../../../visualizations/public'; import { buildExpression, buildExpressionFunction } from '../../../../../expressions/public'; import { HistogramOptionsDefaults } from './histogram_vis_type'; import { getAggExpressionFunctions } from '../../common/expression_helpers'; import { VislibRootState, getValueAxes, getPipelineParams } from '../common'; +import { createVis } from '../common/create_vis'; export const toExpression = async ({ style: styleState, visualization, }: VislibRootState) => { - const { aggConfigs, expressionFns } = await getAggExpressionFunctions(visualization); + const { aggConfigs, expressionFns, indexPattern } = await getAggExpressionFunctions( + visualization + ); const { addLegend, addTooltip, legendPosition, type } = styleState; - const params = getPipelineParams(); - const vis = new Vis(type); - vis.data.aggs = aggConfigs; + const vis = await createVis(type, aggConfigs, indexPattern); + const params = getPipelineParams(); const dimensions = await buildVislibDimensions(vis, params); const valueAxes = getValueAxes(dimensions.y); diff --git a/src/plugins/wizard/public/visualizations/vislib/line/to_expression.ts b/src/plugins/wizard/public/visualizations/vislib/line/to_expression.ts index 32d40726bedf..5cadc0e278e8 100644 --- a/src/plugins/wizard/public/visualizations/vislib/line/to_expression.ts +++ b/src/plugins/wizard/public/visualizations/vislib/line/to_expression.ts @@ -3,23 +3,25 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Vis, buildVislibDimensions } from '../../../../../visualizations/public'; +import { buildVislibDimensions } from '../../../../../visualizations/public'; import { buildExpression, buildExpressionFunction } from '../../../../../expressions/public'; import { LineOptionsDefaults } from './line_vis_type'; import { getAggExpressionFunctions } from '../../common/expression_helpers'; import { VislibRootState, getValueAxes, getPipelineParams } from '../common'; +import { createVis } from '../common/create_vis'; export const toExpression = async ({ style: styleState, visualization, }: VislibRootState) => { - const { aggConfigs, expressionFns } = await getAggExpressionFunctions(visualization); + const { aggConfigs, expressionFns, indexPattern } = await getAggExpressionFunctions( + visualization + ); const { addLegend, addTooltip, legendPosition, type } = styleState; - const params = getPipelineParams(); - const vis = new Vis(type); - vis.data.aggs = aggConfigs; + const vis = await createVis(type, aggConfigs, indexPattern); + const params = getPipelineParams(); const dimensions = await buildVislibDimensions(vis, params); const valueAxes = getValueAxes(dimensions.y); diff --git a/test/functional/apps/wizard/_base.ts b/test/functional/apps/wizard/_base.ts index c8940704da5c..819a67a628f5 100644 --- a/test/functional/apps/wizard/_base.ts +++ b/test/functional/apps/wizard/_base.ts @@ -28,7 +28,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('should show visualization when a field is added', async () => { - const expectedData = [2858, 2904, 2814, 1322, 2784]; + const expectedData = [2904, 2858, 2814, 2784, 1322]; await PageObjects.wizard.addField('metric', 'Count'); await PageObjects.wizard.addField('segment', 'Terms', 'machine.os.raw');