From 5321b42bab4d0fb72311041450b513ac1c5e4feb Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 11 Oct 2023 14:02:26 -0600 Subject: [PATCH 01/84] support aspect ratio in workspace panel --- .../workspace_panel_wrapper.scss | 62 ++++++++++++++----- .../workspace_panel_wrapper.tsx | 32 +++++++++- 2 files changed, 76 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss index 391361570d04b..e6789862c22eb 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss @@ -26,7 +26,7 @@ background: $euiColorEmptyShade; height: 100%; - > * { + >* { flex: 1 1 100%; display: flex; align-items: center; @@ -37,6 +37,7 @@ &.lnsWorkspacePanelWrapper--fullscreen { margin-bottom: 0; + .lnsWorkspacePanelWrapper__pageContentBody { box-shadow: none; } @@ -120,9 +121,7 @@ // Hard-coded px values OK (@cchaos) // sass-lint:disable-block indentation filter: - drop-shadow(0 6px 12px transparentize($euiShadowColor, .8)) - drop-shadow(0 4px 4px transparentize($euiShadowColor, .8)) - drop-shadow(0 2px 2px transparentize($euiShadowColor, .8)); + drop-shadow(0 6px 12px transparentize($euiShadowColor, .8)) drop-shadow(0 4px 4px transparentize($euiShadowColor, .8)) drop-shadow(0 2px 2px transparentize($euiShadowColor, .8)); } .lnsDropIllustration__adjustFill { @@ -134,18 +133,49 @@ } @keyframes lnsWorkspacePanel__illustrationPulseArrow { - 0% { transform: translateY(0%); } - 65% { transform: translateY(0%); } - 72% { transform: translateY(10%); } - 79% { transform: translateY(7%); } - 86% { transform: translateY(10%); } - 95% { transform: translateY(0); } + 0% { + transform: translateY(0%); + } + + 65% { + transform: translateY(0%); + } + + 72% { + transform: translateY(10%); + } + + 79% { + transform: translateY(7%); + } + + 86% { + transform: translateY(10%); + } + + 95% { + transform: translateY(0); + } } @keyframes lnsWorkspacePanel__illustrationPulseContinuous { - 0% { transform: translateY(10%); } - 25% { transform: translateY(15%); } - 50% { transform: translateY(10%); } - 75% { transform: translateY(15%); } - 100% { transform: translateY(10%); } -} + 0% { + transform: translateY(10%); + } + + 25% { + transform: translateY(15%); + } + + 50% { + transform: translateY(10%); + } + + 75% { + transform: translateY(15%); + } + + 100% { + transform: translateY(10%); + } +} \ No newline at end of file diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index ea2c8d27086fb..323c4513392b7 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -107,6 +107,9 @@ export function WorkspacePanelWrapper({ const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null; const userMessages = getUserMessages('toolbar'); + const aspectRatio = { x: 9, y: 16 }; + // const aspectRatio = { x: 2, y: 1 }; + return ( - - {children} + + aspectRatio.x + ? { + height: '100%', + width: 'auto', + } + : { + height: 'auto', + width: '100%', + }), + aspectRatio: `${aspectRatio.x}/${aspectRatio.y}`, + }} + > + + {children} + + ); From fec74d40caca39df6c0eecb9c0dc51bd17783285 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 11 Oct 2023 14:33:25 -0600 Subject: [PATCH 02/84] aspect ratios for XY charts --- .../workspace_panel/workspace_panel.tsx | 1 + .../workspace_panel_wrapper.tsx | 22 +++++++++++++---- x-pack/plugins/lens/public/types.ts | 3 ++- .../lens/public/visualizations/xy/types.ts | 13 ++++++++++ .../visualizations/xy/visualization.tsx | 24 +++++++++++++++++-- 5 files changed, 55 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 6af4fe67c0622..cf92bed8863ff 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -653,6 +653,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ isFullscreen={isFullscreen} lensInspector={lensInspector} getUserMessages={getUserMessages} + hasSomethingToRender={localState.expressionToRender !== null} > {renderWorkspace()} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 323c4513392b7..7203ea0bc3c64 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -32,8 +32,8 @@ import { selectAutoApplyEnabled, selectVisualizationState, } from '../../../state_management'; -import { WorkspaceTitle } from './title'; import { LensInspector } from '../../../lens_inspector_service'; +import { WorkspaceTitle } from './title'; export const AUTO_APPLY_DISABLED_STORAGE_KEY = 'autoApplyDisabled'; @@ -48,6 +48,7 @@ export interface WorkspacePanelWrapperProps { isFullscreen: boolean; lensInspector: LensInspector; getUserMessages: UserMessagesGetter; + hasSomethingToRender: boolean; } export function VisualizationToolbar(props: { @@ -98,6 +99,7 @@ export function WorkspacePanelWrapper({ datasourceMap, isFullscreen, getUserMessages, + hasSomethingToRender, }: WorkspacePanelWrapperProps) { const dispatchLens = useLensDispatch(); @@ -107,8 +109,11 @@ export function WorkspacePanelWrapper({ const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null; const userMessages = getUserMessages('toolbar'); - const aspectRatio = { x: 9, y: 16 }; - // const aspectRatio = { x: 2, y: 1 }; + const displayOptions = hasSomethingToRender + ? activeVisualization?.getDisplayOptions?.(visualizationState) + : undefined; + + const aspectRatio = displayOptions?.aspectRatio; return ( )} + aspectRatio.x + ...(!aspectRatio + ? { + height: '100%', + width: '100%', + } + : aspectRatio.y > aspectRatio.x ? { height: '100%', width: 'auto', @@ -218,7 +230,7 @@ export function WorkspacePanelWrapper({ height: 'auto', width: '100%', }), - aspectRatio: `${aspectRatio.x}/${aspectRatio.y}`, + aspectRatio: aspectRatio ? `${aspectRatio.x}/${aspectRatio.y}` : undefined, }} > diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 5dd1cd616d48f..6cc1b996fffa0 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -978,6 +978,7 @@ export interface VisualizationType { export interface VisualizationDisplayOptions { noPanelTitle?: boolean; noPadding?: boolean; + aspectRatio?: { x: number; y: number }; } interface VisualizationStateFromContextChangeProps { @@ -1293,7 +1294,7 @@ export interface Visualization VisualizationDisplayOptions; + getDisplayOptions?: (state: T) => VisualizationDisplayOptions; /** * Get RenderEventCounters events for telemetry diff --git a/x-pack/plugins/lens/public/visualizations/xy/types.ts b/x-pack/plugins/lens/public/visualizations/xy/types.ts index 9ffb59ec0a4d5..3ad7b30fc1789 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/types.ts +++ b/x-pack/plugins/lens/public/visualizations/xy/types.ts @@ -59,6 +59,19 @@ export const SeriesTypes = { BAR_HORIZONTAL_PERCENTAGE_STACKED: 'bar_horizontal_percentage_stacked', } as const; +export const SeriesTypesByOrientation = { + [SeriesTypes.BAR]: 'vertical', + [SeriesTypes.LINE]: 'vertical', + [SeriesTypes.AREA]: 'vertical', + [SeriesTypes.BAR_STACKED]: 'vertical', + [SeriesTypes.AREA_STACKED]: 'vertical', + [SeriesTypes.BAR_HORIZONTAL]: 'horizontal', + [SeriesTypes.BAR_PERCENTAGE_STACKED]: 'vertical', + [SeriesTypes.BAR_HORIZONTAL_STACKED]: 'horizontal', + [SeriesTypes.AREA_PERCENTAGE_STACKED]: 'vertical', + [SeriesTypes.BAR_HORIZONTAL_PERCENTAGE_STACKED]: 'horizontal', +} as const; + export type YAxisMode = $Values; export type SeriesType = $Values; export interface AxesSettingsConfig { diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx index e1b453b7e9f52..504e9d3789ebb 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx @@ -57,6 +57,7 @@ import { type SeriesType, type PersistedState, visualizationTypes, + SeriesTypesByOrientation, } from './types'; import { getPersistableState, @@ -968,6 +969,17 @@ export const getXyVisualization = ({ getVisualizationInfo(state, frame) { return getVisualizationInfo(state, frame, paletteService, fieldFormats); }, + + getDisplayOptions(state) { + const chartType = getChartType(state); + if (!chartType) { + return {}; + } + return { + aspectRatio: + SeriesTypesByOrientation[chartType] === 'vertical' ? { x: 16, y: 9 } : { x: 9, y: 16 }, + }; + }, }); const getMappedAccessors = ({ @@ -1008,6 +1020,15 @@ const getMappedAccessors = ({ return mappedAccessors; }; +function getChartType(state: XYState): SeriesType | undefined { + for (const layer of state.layers) { + if (isDataLayer(layer)) { + return layer.seriesType; + } + } + return undefined; +} + function getVisualizationInfo( state: XYState, frame: Partial | undefined, @@ -1018,12 +1039,11 @@ function getVisualizationInfo( const visualizationLayersInfo = state.layers.map((layer) => { const palette = []; const dimensions = []; - let chartType: SeriesType | undefined; + const chartType: SeriesType | undefined = getChartType(state); let icon; let label; if (isDataLayer(layer)) { - chartType = layer.seriesType; const layerVisType = visualizationTypes.find((visType) => visType.id === chartType); icon = layerVisType?.icon; label = layerVisType?.fullLabel || layerVisType?.label; From ed0e84925230fd1da3beecbaf64415acb94a7c40 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 18 Oct 2023 16:59:20 -0600 Subject: [PATCH 03/84] add support for setting width/height --- .../workspace_panel/workspace_panel.tsx | 8 ++- .../workspace_panel_wrapper.tsx | 53 ++++++++++--------- x-pack/plugins/lens/public/types.ts | 20 +++++-- 3 files changed, 51 insertions(+), 30 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index cf92bed8863ff..9b5eb6bba4b39 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -642,10 +642,14 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ ); }; + const displayOptions = + localState.expressionToRender !== null + ? activeVisualization?.getDisplayOptions?.(visualization.state, datasourceLayers) + : undefined; + return ( {renderWorkspace()} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 7203ea0bc3c64..3e1b83b224b81 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -17,6 +17,7 @@ import { UserMessagesGetter, VisualizationMap, Visualization, + VisualizationDisplayOptions, } from '../../../types'; import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../utils'; import { ChartSwitch } from './chart_switch'; @@ -25,7 +26,6 @@ import { useLensDispatch, updateVisualizationState, DatasourceStates, - VisualizationState, useLensSelector, selectChangesApplied, applyChanges, @@ -40,7 +40,6 @@ export const AUTO_APPLY_DISABLED_STORAGE_KEY = 'autoApplyDisabled'; export interface WorkspacePanelWrapperProps { children: React.ReactNode | React.ReactNode[]; framePublicAPI: FramePublicAPI; - visualizationState: VisualizationState['state']; visualizationMap: VisualizationMap; visualizationId: string | null; datasourceMap: DatasourceMap; @@ -48,7 +47,7 @@ export interface WorkspacePanelWrapperProps { isFullscreen: boolean; lensInspector: LensInspector; getUserMessages: UserMessagesGetter; - hasSomethingToRender: boolean; + displayOptions: VisualizationDisplayOptions | undefined; } export function VisualizationToolbar(props: { @@ -93,13 +92,12 @@ export function VisualizationToolbar(props: { export function WorkspacePanelWrapper({ children, framePublicAPI, - visualizationState, visualizationId, visualizationMap, datasourceMap, isFullscreen, getUserMessages, - hasSomethingToRender, + displayOptions, }: WorkspacePanelWrapperProps) { const dispatchLens = useLensDispatch(); @@ -109,11 +107,30 @@ export function WorkspacePanelWrapper({ const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null; const userMessages = getUserMessages('toolbar'); - const displayOptions = hasSomethingToRender - ? activeVisualization?.getDisplayOptions?.(visualizationState) - : undefined; - const aspectRatio = displayOptions?.aspectRatio; + const maxDimensionsPX = displayOptions?.maxDimensionsPX; + + const visDimensionsCSS = aspectRatio + ? { + aspectRatio: `${aspectRatio.x}/${aspectRatio.y}`, + ...(aspectRatio.y > aspectRatio.x + ? { + height: '100%', + width: 'auto', + } + : { + height: 'auto', + width: '100%', + }), + } + : maxDimensionsPX + ? { + maxWidth: maxDimensionsPX && `${maxDimensionsPX.x}px`, + maxHeight: maxDimensionsPX && `${maxDimensionsPX.y}px`, + aspectRatio: + maxDimensionsPX.x && maxDimensionsPX.y && `${maxDimensionsPX.x}/${maxDimensionsPX.y}`, + } + : {}; return ( aspectRatio.x - ? { - height: '100%', - width: 'auto', - } - : { - height: 'auto', - width: '100%', - }), - aspectRatio: aspectRatio ? `${aspectRatio.x}/${aspectRatio.y}` : undefined, + height: '100%', + width: '100%', + ...visDimensionsCSS, }} > diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 6cc1b996fffa0..b6dde219b5601 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -975,11 +975,23 @@ export interface VisualizationType { showExperimentalBadge?: boolean; } -export interface VisualizationDisplayOptions { +export type VisualizationDisplayOptions = { noPanelTitle?: boolean; noPadding?: boolean; - aspectRatio?: { x: number; y: number }; -} +} & ( + | { + // if maxDimensions are provided, the aspect ratio will be computed from them + maxDimensionsPX?: { + x: number; + y: number; + }; + aspectRatio?: never; + } + | { + aspectRatio?: { x: number; y: number }; + maxDimensionsPX?: never; + } +); interface VisualizationStateFromContextChangeProps { suggestions: Suggestion[]; @@ -1294,7 +1306,7 @@ export interface Visualization VisualizationDisplayOptions; + getDisplayOptions?: (state: T, datasourceLayers: DatasourceLayers) => VisualizationDisplayOptions; /** * Get RenderEventCounters events for telemetry From efc0896c475ff9b928fbb0f66d4ffcd84c776ba8 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 23 Oct 2023 13:46:04 -0600 Subject: [PATCH 04/84] set dimensions from expression renderer --- .../public/components/metric_vis.tsx | 38 ++++++++++++------- .../workspace_panel/workspace_panel.tsx | 16 +++++--- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 98f59b548d1b5..9e849c1e63336 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -131,6 +131,9 @@ export const MetricVis = ({ overrides, }: MetricVisComponentProps) => { const chartTheme = getThemeService().useChartsTheme(); + + const grid = useRef([[]]); + const onRenderChange = useCallback( (isRendered) => { if (isRendered) { @@ -140,6 +143,19 @@ export const MetricVis = ({ [renderComplete] ); + const onWillRender = useCallback(() => { + const maxTileSideLength = grid.current.length * grid.current[0].length > 1 ? 200 : 300; + fireEvent({ + name: 'setDimensions', + data: { + maxDimensionsPX: { + y: grid.current.length * maxTileSideLength, + x: grid.current[0]?.length * maxTileSideLength, + }, + }, + }); + }, [fireEvent, grid]); + const [scrollChildHeight, setScrollChildHeight] = useState('100%'); const scrollContainerRef = useRef(null); const scrollDimensions = useResizeObserver(scrollContainerRef.current); @@ -270,26 +286,19 @@ export const MetricVis = ({ 'settings' ) as Partial; - const grid: MetricSpec['data'] = []; + const newGrid: MetricSpec['data'] = []; for (let i = 0; i < metricConfigs.length; i += maxCols) { - grid.push(metricConfigs.slice(i, i + maxCols)); + newGrid.push(metricConfigs.slice(i, i + maxCols)); } - let pixelHeight; - let pixelWidth; - if (renderMode === 'edit') { - // In the editor, we constrain the maximum size of the tiles for aesthetic reasons - const maxTileSideLength = metricConfigs.flat().length > 1 ? 200 : 300; - pixelHeight = grid.length * maxTileSideLength; - pixelWidth = grid[0]?.length * maxTileSideLength; - } + grid.current = newGrid; return (
{ const colRef = breakdownByColumn ?? primaryMetricColumn; - const rowLength = grid[0].length; + const rowLength = grid.current[0].length; events.forEach((event) => { if (isMetricElementEvent(event)) { const colIdx = data.columns.findIndex((col) => col === colRef); @@ -340,7 +350,7 @@ export const MetricVis = ({ } {...settingsOverrides} /> - +
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 9b5eb6bba4b39..6c2277437e0f1 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -52,6 +52,7 @@ import { UserMessagesGetter, AddUserMessages, isMessageRemovable, + VisualizationDisplayOptions, } from '../../../types'; import { switchToSuggestion } from '../suggestion_helpers'; import { buildExpression } from '../expression_helpers'; @@ -419,6 +420,10 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ } }, [expressionExists, localState.expressionToRender]); + const [dimensionDisplayOptions, setDimensionOptions] = useState< + VisualizationDisplayOptions | undefined + >(); + const onEvent = useCallback( (event: ExpressionRendererEvent) => { if (!plugins.uiActions) { @@ -449,6 +454,10 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }) ); } + + if (event.name === 'setDimensions') { + setDimensionOptions(event.data); + } }, [plugins.data.datatableUtilities, plugins.uiActions, activeVisualization, dispatchLens] ); @@ -642,11 +651,6 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ ); }; - const displayOptions = - localState.expressionToRender !== null - ? activeVisualization?.getDisplayOptions?.(visualization.state, datasourceLayers) - : undefined; - return ( {renderWorkspace()} From e4f2bd914bcf8f63ab108165613ac52cc68f1790 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 23 Oct 2023 13:50:57 -0600 Subject: [PATCH 05/84] better typing --- src/plugins/chart_expressions/common/index.ts | 8 ++++++- src/plugins/chart_expressions/common/types.ts | 24 +++++++++++++++++++ .../public/components/metric_vis.tsx | 9 +++---- .../workspace_panel/workspace_panel.tsx | 6 ++--- .../workspace_panel_wrapper.tsx | 4 ++-- x-pack/plugins/lens/public/types.ts | 17 ++----------- 6 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/plugins/chart_expressions/common/index.ts b/src/plugins/chart_expressions/common/index.ts index acc3b4d8c88cd..7207bc823d8a4 100644 --- a/src/plugins/chart_expressions/common/index.ts +++ b/src/plugins/chart_expressions/common/index.ts @@ -12,5 +12,11 @@ export { getOverridesFor, isOnAggBasedEditor, } from './utils'; -export type { Simplify, MakeOverridesSerializable } from './types'; +export type { + Simplify, + MakeOverridesSerializable, + ChartDimensionOptions, + DimensionsEvent, +} from './types'; +export { isDimensionsEvent } from './types'; export { getColorCategories } from './color_categories'; diff --git a/src/plugins/chart_expressions/common/types.ts b/src/plugins/chart_expressions/common/types.ts index acdd5909f1aec..37109d589c081 100644 --- a/src/plugins/chart_expressions/common/types.ts +++ b/src/plugins/chart_expressions/common/types.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import type { ExpressionRendererEvent } from '@kbn/expressions-plugin/public'; import React from 'react'; export type Simplify = { [KeyType in keyof T]: T[KeyType] } & {}; @@ -26,3 +27,26 @@ export type MakeOverridesSerializable = { ? MakeOverridesSerializable : NonNullable; }; + +export interface DimensionsEvent extends ExpressionRendererEvent { + name: 'dimensions'; + data: ChartDimensionOptions; +} + +export type ChartDimensionOptions = + | { + // if maxDimensions are provided, the aspect ratio will be computed from them + maxDimensionsPX?: { + x: number; + y: number; + }; + aspectRatio?: never; + } + | { + aspectRatio?: { x: number; y: number }; + maxDimensionsPX?: never; + }; + +export function isDimensionsEvent(event: ExpressionRendererEvent): event is DimensionsEvent { + return event.name === 'dimensions'; +} diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 9e849c1e63336..1df91c9718e8c 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -39,7 +39,7 @@ import { css } from '@emotion/react'; import { euiThemeVars } from '@kbn/ui-theme'; import { useResizeObserver, useEuiScrollBar, EuiIcon } from '@elastic/eui'; import { AllowedChartOverrides, AllowedSettingsOverrides } from '@kbn/charts-plugin/common'; -import { getOverridesFor } from '@kbn/chart-expressions-common'; +import { DimensionsEvent, getOverridesFor } from '@kbn/chart-expressions-common'; import { DEFAULT_TRENDLINE_NAME } from '../../common/constants'; import { VisParams } from '../../common'; import { getPaletteService, getThemeService, getFormatService } from '../services'; @@ -145,15 +145,16 @@ export const MetricVis = ({ const onWillRender = useCallback(() => { const maxTileSideLength = grid.current.length * grid.current[0].length > 1 ? 200 : 300; - fireEvent({ - name: 'setDimensions', + const event: DimensionsEvent = { + name: 'dimensions', data: { maxDimensionsPX: { y: grid.current.length * maxTileSideLength, x: grid.current[0]?.length * maxTileSideLength, }, }, - }); + }; + fireEvent(event); }, [fireEvent, grid]); const [scrollChildHeight, setScrollChildHeight] = useState('100%'); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 6c2277437e0f1..b61d6fd429d2b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -36,6 +36,7 @@ import type { Datatable } from '@kbn/expressions-plugin/public'; import { DropIllustration } from '@kbn/chart-icons'; import { DragDrop, useDragDropContext, DragDropIdentifier } from '@kbn/dom-drag-drop'; import { reportPerformanceMetricEvent } from '@kbn/ebt-tools'; +import { ChartDimensionOptions, isDimensionsEvent } from '@kbn/chart-expressions-common'; import { trackUiCounterEvents } from '../../../lens_ui_telemetry'; import { getSearchWarningMessages } from '../../../utils'; import { @@ -52,7 +53,6 @@ import { UserMessagesGetter, AddUserMessages, isMessageRemovable, - VisualizationDisplayOptions, } from '../../../types'; import { switchToSuggestion } from '../suggestion_helpers'; import { buildExpression } from '../expression_helpers'; @@ -421,7 +421,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }, [expressionExists, localState.expressionToRender]); const [dimensionDisplayOptions, setDimensionOptions] = useState< - VisualizationDisplayOptions | undefined + ChartDimensionOptions | undefined >(); const onEvent = useCallback( @@ -455,7 +455,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ ); } - if (event.name === 'setDimensions') { + if (isDimensionsEvent(event)) { setDimensionOptions(event.data); } }, diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 3e1b83b224b81..57553780a6a5e 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -11,13 +11,13 @@ import React, { useCallback } from 'react'; import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui'; import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; +import { ChartDimensionOptions } from '@kbn/chart-expressions-common'; import { DatasourceMap, FramePublicAPI, UserMessagesGetter, VisualizationMap, Visualization, - VisualizationDisplayOptions, } from '../../../types'; import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../utils'; import { ChartSwitch } from './chart_switch'; @@ -47,7 +47,7 @@ export interface WorkspacePanelWrapperProps { isFullscreen: boolean; lensInspector: LensInspector; getUserMessages: UserMessagesGetter; - displayOptions: VisualizationDisplayOptions | undefined; + displayOptions: ChartDimensionOptions | undefined; } export function VisualizationToolbar(props: { diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index b6dde219b5601..0995209fabfff 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -975,23 +975,10 @@ export interface VisualizationType { showExperimentalBadge?: boolean; } -export type VisualizationDisplayOptions = { +export interface VisualizationDisplayOptions { noPanelTitle?: boolean; noPadding?: boolean; -} & ( - | { - // if maxDimensions are provided, the aspect ratio will be computed from them - maxDimensionsPX?: { - x: number; - y: number; - }; - aspectRatio?: never; - } - | { - aspectRatio?: { x: number; y: number }; - maxDimensionsPX?: never; - } -); +} interface VisualizationStateFromContextChangeProps { suggestions: Suggestion[]; From 392b656e79f6780e99a1c4e860ed4ffd7d017ea6 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 24 Oct 2023 10:43:55 -0600 Subject: [PATCH 06/84] set aspect ratio on XY charts --- .../public/components/xy_chart.tsx | 19 ++++++++++++++++++- .../xy_chart_renderer.tsx | 12 +++++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 7fd545e82f339..fe62922e31230 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -50,7 +50,7 @@ import { LegendSizeToPixels, } from '@kbn/visualizations-plugin/common/constants'; import { PersistedState } from '@kbn/visualizations-plugin/public'; -import { getOverridesFor } from '@kbn/chart-expressions-common'; +import { ChartDimensionOptions, getOverridesFor } from '@kbn/chart-expressions-common'; import type { FilterEvent, BrushEvent, @@ -144,6 +144,7 @@ export type XYChartRenderProps = Omit & { renderComplete: () => void; uiState?: PersistedState; timeFormat: string; + setDimensions: (dimensions: ChartDimensionOptions) => void; }; function nonNullable(v: T): v is NonNullable { @@ -197,6 +198,7 @@ export function XYChart({ onClickMultiValue, layerCellValueActions, onSelectRange, + setDimensions, interactive = true, syncColors, syncTooltips, @@ -292,6 +294,20 @@ export function XYChart({ ); const dataLayers: CommonXYDataLayerConfig[] = filteredLayers.filter(isDataLayer); + + const onWillRender = useCallback(() => { + // requestAnimationFrame(() => { + setDimensions({ + aspectRatio: isHorizontalChart(dataLayers) + ? { x: 9, y: 16 } + : { + x: 16, + y: 9, + }, + }); + // }); + }, [dataLayers, setDimensions]); + const formattedDatatables = useMemo( () => getFormattedTablesByLayers(dataLayers, formatFactory, splitColumnAccessor, splitRowAccessor), @@ -784,6 +800,7 @@ export function XYChart({ /> } onRenderChange={onRenderChange} + onWillRender={onWillRender} onPointerUpdate={syncCursor ? handleCursorUpdate : undefined} externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, diff --git a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx index c2561191deb9a..76df668bf682b 100644 --- a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx @@ -26,7 +26,12 @@ import { FormatFactory } from '@kbn/field-formats-plugin/common'; import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { UsageCollectionStart } from '@kbn/usage-collection-plugin/public'; import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils'; -import { extractContainerType, extractVisualizationType } from '@kbn/chart-expressions-common'; +import { + ChartDimensionOptions, + DimensionsEvent, + extractContainerType, + extractVisualizationType, +} from '@kbn/chart-expressions-common'; import type { getDataLayers } from '../helpers'; import { LayerTypes, SeriesTypes } from '../../common/constants'; @@ -215,6 +220,10 @@ export const getXyChartRenderer = ({ const onClickMultiValue = (data: MultiFilterEvent['data']) => { handlers.event({ name: 'multiFilter', data }); }; + const setDimensions = (data: ChartDimensionOptions) => { + const event: DimensionsEvent = { name: 'dimensions', data }; + handlers.event(event); + }; const layerCellValueActions = await getLayerCellValueActions( getDataLayers(config.args.layers), @@ -277,6 +286,7 @@ export const getXyChartRenderer = ({ syncCursor={config.syncCursor} uiState={handlers.uiState as PersistedState} renderComplete={renderComplete} + setDimensions={setDimensions} /> From dedfb1f7fa0c7151f005b7382f0a5a44acf293ec Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 24 Oct 2023 10:56:22 -0600 Subject: [PATCH 07/84] use gitpkg --- package.json | 2 +- yarn.lock | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index dea9b2710f64b..06e380b3708c8 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "60.0.0", + "@elastic/charts": "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.4.0", diff --git a/yarn.lock b/yarn.lock index 1970525b853e0..45bdd2df43257 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1520,10 +1520,9 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@60.0.0": +"@elastic/charts@https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render": version "60.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-60.0.0.tgz#088c19debf1db48aed72c84bda51e98e7c291d54" - integrity sha512-oGNdvKhuZ2g2i/k4Zgv5QSUcEu+DOJSlIxV/1a7JBR/uJ2AzpV4uFyrNBUnUkM+CPJvsEn5MYABAzwUwveTgHA== + resolved "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render#1298371b6de75527a748a9a557db72399cd00ce6" dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From 91721c945347979b831d366a83611c42557efa2a Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 25 Oct 2023 07:56:58 -0600 Subject: [PATCH 08/84] revert getDisplayOptions --- x-pack/plugins/lens/public/types.ts | 2 +- .../lens/public/visualizations/xy/visualization.tsx | 12 ------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 07e0a15c15f87..65ddf5db39bb6 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -1293,7 +1293,7 @@ export interface Visualization VisualizationDisplayOptions; + getDisplayOptions?: () => VisualizationDisplayOptions; /** * Get RenderEventCounters events for telemetry diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx index ec24ea555b813..d92f8bb692e11 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx @@ -58,7 +58,6 @@ import { type SeriesType, type PersistedState, visualizationTypes, - SeriesTypesByOrientation, } from './types'; import { getPersistableState, @@ -968,17 +967,6 @@ export const getXyVisualization = ({ getVisualizationInfo(state, frame) { return getVisualizationInfo(state, frame, paletteService, fieldFormats); }, - - getDisplayOptions(state) { - const chartType = getChartType(state); - if (!chartType) { - return {}; - } - return { - aspectRatio: - SeriesTypesByOrientation[chartType] === 'vertical' ? { x: 16, y: 9 } : { x: 9, y: 16 }, - }; - }, }); const getMappedAccessors = ({ From 279e0d5d9151cb66a5490247c519473223207487 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 30 Oct 2023 15:22:31 -0600 Subject: [PATCH 09/84] revert some unused changes --- .../plugins/lens/public/visualizations/xy/types.ts | 13 ------------- .../lens/public/visualizations/xy/visualization.tsx | 12 ++---------- 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/lens/public/visualizations/xy/types.ts b/x-pack/plugins/lens/public/visualizations/xy/types.ts index 3ad7b30fc1789..9ffb59ec0a4d5 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/types.ts +++ b/x-pack/plugins/lens/public/visualizations/xy/types.ts @@ -59,19 +59,6 @@ export const SeriesTypes = { BAR_HORIZONTAL_PERCENTAGE_STACKED: 'bar_horizontal_percentage_stacked', } as const; -export const SeriesTypesByOrientation = { - [SeriesTypes.BAR]: 'vertical', - [SeriesTypes.LINE]: 'vertical', - [SeriesTypes.AREA]: 'vertical', - [SeriesTypes.BAR_STACKED]: 'vertical', - [SeriesTypes.AREA_STACKED]: 'vertical', - [SeriesTypes.BAR_HORIZONTAL]: 'horizontal', - [SeriesTypes.BAR_PERCENTAGE_STACKED]: 'vertical', - [SeriesTypes.BAR_HORIZONTAL_STACKED]: 'horizontal', - [SeriesTypes.AREA_PERCENTAGE_STACKED]: 'vertical', - [SeriesTypes.BAR_HORIZONTAL_PERCENTAGE_STACKED]: 'horizontal', -} as const; - export type YAxisMode = $Values; export type SeriesType = $Values; export interface AxesSettingsConfig { diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx index d92f8bb692e11..d3bb805a0a381 100644 --- a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx +++ b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx @@ -1007,15 +1007,6 @@ const getMappedAccessors = ({ return mappedAccessors; }; -function getChartType(state: XYState): SeriesType | undefined { - for (const layer of state.layers) { - if (isDataLayer(layer)) { - return layer.seriesType; - } - } - return undefined; -} - function getVisualizationInfo( state: XYState, frame: Partial | undefined, @@ -1026,11 +1017,12 @@ function getVisualizationInfo( const visualizationLayersInfo = state.layers.map((layer) => { const palette = []; const dimensions = []; - const chartType: SeriesType | undefined = getChartType(state); + let chartType: SeriesType | undefined; let icon; let label; if (isDataLayer(layer)) { + chartType = layer.seriesType; const layerVisType = visualizationTypes.find((visType) => visType.id === chartType); icon = layerVisType?.icon; label = layerVisType?.fullLabel || layerVisType?.label; From 6d7bde0277cbda52291786b9458545108e884770 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 30 Oct 2023 15:44:47 -0600 Subject: [PATCH 10/84] update default metric color --- .../expression_metric/public/components/metric_vis.tsx | 2 +- .../editor_frame/workspace_panel/workspace_panel.tsx | 8 +++++++- .../lens/public/visualizations/metric/visualization.tsx | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 00789c94bc4e8..9ea756e42e01b 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -45,7 +45,7 @@ import { VisParams } from '../../common'; import { getPaletteService, getThemeService, getFormatService } from '../services'; import { getDataBoundsForPalette } from '../utils'; -export const defaultColor = euiThemeVars.euiColorLightestShade; +export const defaultColor = euiThemeVars.euiColorEmptyShade; function enhanceFieldFormat(serializedFieldFormat: SerializedFieldFormat | undefined) { const formatId = serializedFieldFormat?.id || 'number'; diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index b61d6fd429d2b..5c2051a27354f 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -53,6 +53,7 @@ import { UserMessagesGetter, AddUserMessages, isMessageRemovable, + VisualizationDisplayOptions, } from '../../../types'; import { switchToSuggestion } from '../suggestion_helpers'; import { buildExpression } from '../expression_helpers'; @@ -462,6 +463,8 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ [plugins.data.datatableUtilities, plugins.uiActions, activeVisualization, dispatchLens] ); + const displayOptions = activeVisualization?.getDisplayOptions?.(); + const hasCompatibleActions = useCallback( async (event: ExpressionRendererEvent) => { if (!plugins.uiActions) { @@ -605,6 +608,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ onComponentRendered={() => { visualizationRenderStartTime.current = performance.now(); }} + displayOptions={displayOptions} /> ); }; @@ -701,6 +705,7 @@ export const VisualizationWrapper = ({ onRender$, onData$, onComponentRendered, + displayOptions, }: { expression: string | null | undefined; lensInspector: LensInspector; @@ -714,6 +719,7 @@ export const VisualizationWrapper = ({ onRender$: () => void; onData$: (data: unknown, adapters?: Partial) => void; onComponentRendered: () => void; + displayOptions: VisualizationDisplayOptions | undefined; }) => { useEffect(() => { onComponentRendered(); @@ -818,7 +824,7 @@ export const VisualizationWrapper = ({ > - showingBar(state) ? euiLightVars.euiColorPrimary : euiThemeVars.euiColorLightestShade; + showingBar(state) ? euiLightVars.euiColorPrimary : euiThemeVars.euiColorEmptyShade; export interface MetricVisualizationState { layerId: string; From 6fce51fb5b19fdfc0a9af75d2fbd145877902be1 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 2 Nov 2023 14:48:00 -0600 Subject: [PATCH 11/84] update chart dep --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 82f13d4bd34e1..e1c21c2a5dfbb 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render", + "@elastic/charts": "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render-v2", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.0", diff --git a/yarn.lock b/yarn.lock index a1894060fe923..7f42c260785ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,9 +1511,9 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render": - version "60.0.0" - resolved "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render#1298371b6de75527a748a9a557db72399cd00ce6" +"@elastic/charts@https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render-v2": + version "60.0.1" + resolved "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render-v2#f31b330569c3cbb5e56c545d7210be88ab787255" dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From dfa049202ec239e05e0b3d0eeb6b6d5fbed5242a Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 8 Nov 2023 13:35:50 -0700 Subject: [PATCH 12/84] hide incorrect chart with veil --- package.json | 6 +-- .../public/components/xy_chart.tsx | 54 ++++++++++++++----- yarn.lock | 22 +++++--- 3 files changed, 58 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 77b9615f043c4..89204463fdf79 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render-v2", + "@elastic/charts": "^61.0.0", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.0", @@ -990,7 +990,7 @@ "query-string": "^6.13.2", "rbush": "^3.0.1", "re-resizable": "^6.9.9", - "re2": "1.20.1", + "re2": "^1.20.5", "react": "^17.0.2", "react-ace": "^7.0.5", "react-color": "^2.13.8", @@ -1615,4 +1615,4 @@ "yargs": "^15.4.1", "yarn-deduplicate": "^6.0.2" } -} \ No newline at end of file +} diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index d54e8ad5b1a23..58d34571be6eb 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -42,6 +42,7 @@ import { EventAnnotationServiceType } from '@kbn/event-annotation-plugin/public' import { PointEventAnnotationRow } from '@kbn/event-annotation-plugin/common'; import { ChartsPluginSetup, ChartsPluginStart, useActiveCursor } from '@kbn/charts-plugin/public'; import { MULTILAYER_TIME_AXIS_STYLE } from '@kbn/charts-plugin/common'; +import fastIsEqual from 'fast-deep-equal'; import { getAccessorByDimension, getColumnByAccessor, @@ -298,18 +299,35 @@ export function XYChart({ const dataLayers: CommonXYDataLayerConfig[] = filteredLayers.filter(isDataLayer); - const onWillRender = useCallback(() => { - // requestAnimationFrame(() => { - setDimensions({ - aspectRatio: isHorizontalChart(dataLayers) - ? { x: 9, y: 16 } - : { - x: 16, - y: 9, - }, - }); - // }); - }, [dataLayers, setDimensions]); + const dimensions = { + aspectRatio: isHorizontalChart(dataLayers) + ? { x: 9, y: 16 } + : { + x: 16, + y: 9, + }, + }; + + const [showVeil, setShowVeil] = useState(false); + const currentDimensions = useRef(dimensions); + + if (!fastIsEqual(dimensions, currentDimensions.current)) { + // if the dimensions have changed we request new dimensions from the client + // and this sets off a chain of events + // - the charts library will plan a render + // - the client will resize the container + // - we show the veil to hide the next step + // - the charts library will render the chart based on the original container dimensions + // - the charts library will resize the chart to the updated container dimensions + // - we hide the veil + setShowVeil(true); + setDimensions(dimensions); + currentDimensions.current = dimensions; + } + + const onResize = useCallback(() => { + setShowVeil(false); + }, []); const formattedDatatables = useMemo( () => @@ -730,6 +748,16 @@ export function XYChart({ return (
+
{showLegend !== undefined && uiState && ( } onRenderChange={onRenderChange} - onWillRender={onWillRender} + onResize={onResize} onPointerUpdate={syncCursor ? handleCursorUpdate : undefined} externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, diff --git a/yarn.lock b/yarn.lock index c66527a048fa1..27cec1bd42726 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,9 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render-v2": - version "60.0.1" - resolved "https://gitpkg.now.sh/elastic/elastic-charts/packages/charts?will-render-v2#f31b330569c3cbb5e56c545d7210be88ab787255" +"@elastic/charts@^61.0.0": + version "61.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.0.tgz#8303fb9617b26f95cec731f03cd259da03cce404" + integrity sha512-iqU+I8LXLChZu+c/xs5c4QAQIUZRElYvlSgQaTYX0QyL0UsyYzTw3IHQVwTM0okbYKk0nTY+iBDaM3UUwgODCg== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" @@ -22447,6 +22448,11 @@ nan@^2.17.0: resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== +nan@^2.18.0: + version "2.18.0" + resolved "https://registry.yarnpkg.com/nan/-/nan-2.18.0.tgz#26a6faae7ffbeb293a39660e88a76b82e30b7554" + integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w== + nano-css@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.2.1.tgz#73b8470fa40b028a134d3393ae36bbb34b9fa332" @@ -25096,13 +25102,13 @@ re-resizable@^6.9.9: resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216" integrity sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA== -re2@1.20.1: - version "1.20.1" - resolved "https://registry.yarnpkg.com/re2/-/re2-1.20.1.tgz#27450f6de6299635f50305a670cc15ac30687f85" - integrity sha512-JbzIoI5adNCqGUK8wHG1dMSyggvPyA4kx2hewt1lma5sP7/iWCfM15XKbCZlX2yvu5k80jSKAOQqJF7KC+2n8Q== +re2@^1.20.5: + version "1.20.5" + resolved "https://registry.yarnpkg.com/re2/-/re2-1.20.5.tgz#b549db584a85de18dd2e47c11a66ce62dd2175c9" + integrity sha512-wZAqOjJ3m0PBgM2B8KG9dNJLwSNIAOZGiHN/c0FpKpaM1Hkg5NpKNAWSVbCXe+bb2K0xmHz6DPR4HJaQ2MejgQ== dependencies: install-artifact-from-github "^1.3.3" - nan "^2.17.0" + nan "^2.18.0" node-gyp "^9.4.0" react-ace@^7.0.5: From 441d34b8667d4bebf2f947cb46ff1b6bcdf29f83 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 8 Nov 2023 13:39:44 -0700 Subject: [PATCH 13/84] update comment --- .../public/components/xy_chart.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 58d34571be6eb..a2178c8dd9824 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -312,16 +312,18 @@ export function XYChart({ const currentDimensions = useRef(dimensions); if (!fastIsEqual(dimensions, currentDimensions.current)) { - // if the dimensions have changed we request new dimensions from the client - // and this sets off a chain of events - // - the charts library will plan a render - // - the client will resize the container - // - we show the veil to hide the next step - // - the charts library will render the chart based on the original container dimensions - // - the charts library will resize the chart to the updated container dimensions - // - we hide the veil - setShowVeil(true); + // If the dimensions have changed we request new dimensions from the client + // and set off a chain of events: + // + // 1. we show the veil to hide step 4 + // 2. the charts library will plan a render + // 3. the client will resize the container + // 4. the charts library will render the chart based on the original container dimensions + // 5. the charts library will resize the chart to the updated container dimensions + // 6. we hide the veil + setDimensions(dimensions); + setShowVeil(true); currentDimensions.current = dimensions; } From d97cfcac6dcf541cb6880caff72e7b94cab55d9b Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 8 Nov 2023 13:57:45 -0700 Subject: [PATCH 14/84] fix package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 89204463fdf79..c810fbbcd474b 100644 --- a/package.json +++ b/package.json @@ -1615,4 +1615,4 @@ "yargs": "^15.4.1", "yarn-deduplicate": "^6.0.2" } -} +} \ No newline at end of file From e18da0fc77ebf4466b29e904f56992debb059519 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 8 Nov 2023 15:10:37 -0700 Subject: [PATCH 15/84] update yarn.lock --- yarn.lock | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index 660d6f1e5d113..4c200809e33be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22447,12 +22447,7 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== -nan@^2.17.0: - version "2.17.0" - resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" - integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== - -nan@^2.18.0: +nan@^2.17.0, nan@^2.18.0: version "2.18.0" resolved "https://registry.yarnpkg.com/nan/-/nan-2.18.0.tgz#26a6faae7ffbeb293a39660e88a76b82e30b7554" integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w== From 57e9f1228f739535124c7fd0225985f364f51ef2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 8 Nov 2023 22:23:26 +0000 Subject: [PATCH 16/84] Update dependency @elastic/charts to v61 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4e4c2441fe9fc..f5172a7365746 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "60.0.0", + "@elastic/charts": "61.0.0", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.0", diff --git a/yarn.lock b/yarn.lock index 68faac71450cc..b0d56d35b484a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@60.0.0": - version "60.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-60.0.0.tgz#088c19debf1db48aed72c84bda51e98e7c291d54" - integrity sha512-oGNdvKhuZ2g2i/k4Zgv5QSUcEu+DOJSlIxV/1a7JBR/uJ2AzpV4uFyrNBUnUkM+CPJvsEn5MYABAzwUwveTgHA== +"@elastic/charts@61.0.0": + version "61.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.0.tgz#8303fb9617b26f95cec731f03cd259da03cce404" + integrity sha512-iqU+I8LXLChZu+c/xs5c4QAQIUZRElYvlSgQaTYX0QyL0UsyYzTw3IHQVwTM0okbYKk0nTY+iBDaM3UUwgODCg== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From d11c2b304e6e9186b74938cb5e39bd82de06425b Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 13 Nov 2023 14:32:52 -0700 Subject: [PATCH 17/84] XY renderer requests correct aspect ratio on first render --- .../expression_xy/public/components/xy_chart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index a2178c8dd9824..f26539a9e04be 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -309,7 +309,7 @@ export function XYChart({ }; const [showVeil, setShowVeil] = useState(false); - const currentDimensions = useRef(dimensions); + const currentDimensions = useRef(); if (!fastIsEqual(dimensions, currentDimensions.current)) { // If the dimensions have changed we request new dimensions from the client From 14ae004af75a66d53276720725779c9c78dadf7e Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 13 Nov 2023 15:09:51 -0700 Subject: [PATCH 18/84] request correct dimensions for every vis type --- src/plugins/chart_expressions/common/types.ts | 7 +++++-- .../expression_renderers/gauge_renderer.tsx | 19 ++++++++++++++++++- .../expression_renderers/heatmap_renderer.tsx | 19 ++++++++++++++++++- .../metric_vis_renderer.tsx | 19 ++++++++++++++++++- .../public/components/metric_vis.tsx | 3 ++- .../partition_vis_renderer.tsx | 14 ++++++++++++++ .../tagcloud_renderer.tsx | 19 ++++++++++++++++++- .../workspace_panel_wrapper.tsx | 17 +++++++++++------ x-pack/plugins/lens/public/types.ts | 2 ++ .../visualizations/datatable/expression.tsx | 14 ++++++++++++++ 10 files changed, 120 insertions(+), 13 deletions(-) diff --git a/src/plugins/chart_expressions/common/types.ts b/src/plugins/chart_expressions/common/types.ts index 37109d589c081..a3160bfb541b5 100644 --- a/src/plugins/chart_expressions/common/types.ts +++ b/src/plugins/chart_expressions/common/types.ts @@ -33,18 +33,21 @@ export interface DimensionsEvent extends ExpressionRendererEvent { data: ChartDimensionOptions; } +export type ChartDimensionUnit = 'pixels' | 'percentage'; + export type ChartDimensionOptions = | { // if maxDimensions are provided, the aspect ratio will be computed from them - maxDimensionsPX?: { + maxDimensions?: { x: number; y: number; + unit: ChartDimensionUnit; }; aspectRatio?: never; } | { aspectRatio?: { x: number; y: number }; - maxDimensionsPX?: never; + maxDimensions?: never; }; export function isDimensionsEvent(event: ExpressionRendererEvent): event is DimensionsEvent { diff --git a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index f86d6f2bff508..dc70ab6791ce3 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -13,7 +13,11 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers'; import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public'; import { METRIC_TYPE } from '@kbn/analytics'; -import { extractContainerType, extractVisualizationType } from '@kbn/chart-expressions-common'; +import { + DimensionsEvent, + extractContainerType, + extractVisualizationType, +} from '@kbn/chart-expressions-common'; import { ExpressionGaugePluginStart } from '../plugin'; import { EXPRESSION_GAUGE_NAME, GaugeExpressionProps, GaugeShapes } from '../../common'; import { getFormatService, getPaletteService } from '../services'; @@ -66,6 +70,19 @@ export const gaugeRenderer: ( handlers.done(); }; + const dimensionsEvent: DimensionsEvent = { + name: 'dimensions', + data: { + maxDimensions: { + x: 100, + y: 100, + unit: 'percentage', + }, + }, + }; + + handlers.event(dimensionsEvent); + const { GaugeComponent } = await import('../components/gauge_component'); render( diff --git a/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx index fa899fe3ce295..8e363c6b5e59f 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx @@ -13,7 +13,11 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers'; import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public'; import { METRIC_TYPE } from '@kbn/analytics'; -import { extractContainerType, extractVisualizationType } from '@kbn/chart-expressions-common'; +import { + DimensionsEvent, + extractContainerType, + extractVisualizationType, +} from '@kbn/chart-expressions-common'; import { I18nProvider } from '@kbn/i18n-react'; import { MultiFilterEvent } from '../../common/types'; import { ExpressionHeatmapPluginStart } from '../plugin'; @@ -78,6 +82,19 @@ export const heatmapRenderer: ( handlers.done(); }; + const dimensionsEvent: DimensionsEvent = { + name: 'dimensions', + data: { + maxDimensions: { + x: 100, + y: 100, + unit: 'percentage', + }, + }, + }; + + handlers.event(dimensionsEvent); + const timeZone = getTimeZone(getUISettings()); const { HeatmapComponent } = await import('../components/heatmap_component'); const { isInteractive } = handlers; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index 310f8e0ee54f4..027d04f89be81 100644 --- a/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -21,7 +21,11 @@ import { import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils'; import { Datatable } from '@kbn/expressions-plugin/common'; import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public'; -import { extractContainerType, extractVisualizationType } from '@kbn/chart-expressions-common'; +import { + DimensionsEvent, + extractContainerType, + extractVisualizationType, +} from '@kbn/chart-expressions-common'; import { ExpressionLegacyMetricPluginStart } from '../plugin'; import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common'; @@ -92,6 +96,19 @@ export const getMetricVisRenderer: ( handlers.done(); }; + const dimensionsEvent: DimensionsEvent = { + name: 'dimensions', + data: { + maxDimensions: { + x: 100, + y: 100, + unit: 'percentage', + }, + }, + }; + + handlers.event(dimensionsEvent); + render( diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx index 101c40b6b384d..6c8749997cbe5 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx @@ -15,7 +15,11 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { VisualizationContainer } from '@kbn/visualizations-plugin/public'; import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers'; import { METRIC_TYPE } from '@kbn/analytics'; -import { extractContainerType, extractVisualizationType } from '@kbn/chart-expressions-common'; +import { + DimensionsEvent, + extractContainerType, + extractVisualizationType, +} from '@kbn/chart-expressions-common'; import { ExpressionTagcloudRendererDependencies } from '../plugin'; import { TagcloudRendererConfig } from '../../common/types'; @@ -66,6 +70,19 @@ export const tagcloudRenderer: ( handlers.done(); }; + const dimensionsEvent: DimensionsEvent = { + name: 'dimensions', + data: { + maxDimensions: { + x: 100, + y: 100, + unit: 'percentage', + }, + }, + }; + + handlers.event(dimensionsEvent); + const palettesRegistry = await plugins.charts.palettes.getPalettes(); let isDarkMode = false; plugins.charts.theme.darkModeEnabled$ diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 57553780a6a5e..c6375b8ea95a3 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -12,6 +12,7 @@ import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/ import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; import { ChartDimensionOptions } from '@kbn/chart-expressions-common'; +import { ChartDimensionUnit } from '@kbn/chart-expressions-common/types'; import { DatasourceMap, FramePublicAPI, @@ -108,7 +109,12 @@ export function WorkspacePanelWrapper({ const userMessages = getUserMessages('toolbar'); const aspectRatio = displayOptions?.aspectRatio; - const maxDimensionsPX = displayOptions?.maxDimensionsPX; + const maxDimensions = displayOptions?.maxDimensions; + + const unitToCSSUnit: Record = { + pixels: 'px', + percentage: '%', + }; const visDimensionsCSS = aspectRatio ? { @@ -123,12 +129,11 @@ export function WorkspacePanelWrapper({ width: '100%', }), } - : maxDimensionsPX + : maxDimensions ? { - maxWidth: maxDimensionsPX && `${maxDimensionsPX.x}px`, - maxHeight: maxDimensionsPX && `${maxDimensionsPX.y}px`, - aspectRatio: - maxDimensionsPX.x && maxDimensionsPX.y && `${maxDimensionsPX.x}/${maxDimensionsPX.y}`, + maxWidth: maxDimensions && `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`, + maxHeight: maxDimensions && `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`, + aspectRatio: maxDimensions.x && maxDimensions.y && `${maxDimensions.x}/${maxDimensions.y}`, } : {}; diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 70ee578c47cc2..4f41d6d1c33cf 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -42,6 +42,7 @@ import { CellValueContext } from '@kbn/embeddable-plugin/public'; import { EventAnnotationGroupConfig } from '@kbn/event-annotation-common'; import type { DraggingIdentifier, DragDropIdentifier, DropType } from '@kbn/dom-drag-drop'; import type { AccessorConfig } from '@kbn/visualization-ui-components'; +import { DimensionsEvent } from '@kbn/chart-expressions-common'; import type { DateRange, LayerType, SortingHint } from '../common/types'; import type { LensSortActionData, @@ -1390,6 +1391,7 @@ export interface ILensInterpreterRenderHandlers extends IInterpreterRenderHandle | BrushTriggerEvent | LensEditEvent | LensTableRowContextMenuEvent + | DimensionsEvent ) => void; } diff --git a/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx b/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx index 6c97dae2baab1..0926d05a35b40 100644 --- a/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx +++ b/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx @@ -18,6 +18,7 @@ import type { IInterpreterRenderHandlers, } from '@kbn/expressions-plugin/common'; import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { DimensionsEvent } from '@kbn/chart-expressions-common'; import { trackUiCounterEvents } from '../../lens_ui_telemetry'; import { DatatableComponent } from './components/table_basic'; @@ -103,6 +104,19 @@ export const getDatatableRenderer = (dependencies: { handlers.done(); }; + const dimensionsEvent: DimensionsEvent = { + name: 'dimensions', + data: { + maxDimensions: { + x: 100, + y: 100, + unit: 'percentage', + }, + }, + }; + + handlers.event(dimensionsEvent); + // An entry for each table row, whether it has any actions attached to // ROW_CLICK_TRIGGER trigger. let rowHasRowClickTriggerActions: boolean[] = []; From dc273f7f4774f7c468deac6ffd54e3b93c60e4a4 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 13 Nov 2023 15:27:18 -0700 Subject: [PATCH 19/84] request dimension from choropleth chart renderer --- .../lens/choropleth_chart/expression_renderer.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx b/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx index 615945280c264..12f5e2151dba6 100644 --- a/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx +++ b/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx @@ -13,6 +13,7 @@ import { METRIC_TYPE } from '@kbn/analytics'; import type { CoreSetup, CoreStart } from '@kbn/core/public'; import type { FileLayer } from '@elastic/ems-client'; import type { KibanaExecutionContext } from '@kbn/core-execution-context-common'; +import { DimensionsEvent } from '@kbn/chart-expressions-common'; import type { MapsPluginStartDependencies } from '../../plugin'; import type { ChoroplethChartProps } from './types'; import type { MapEmbeddableInput, MapEmbeddableOutput } from '../../embeddable'; @@ -92,6 +93,19 @@ export function getExpressionRenderer(coreSetup: CoreSetup Date: Mon, 13 Nov 2023 18:28:39 -0700 Subject: [PATCH 20/84] fix: metric background breaking change --- .../expression_metric/public/components/metric_vis.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index a0d02562d7623..964c7d4685493 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -327,9 +327,8 @@ export const MetricVis = ({ locale={i18n.getLocale()} theme={[ { - background: { color: 'transparent' }, + background: { color: defaultColor }, metric: { - background: defaultColor, barBackground: euiThemeVars.euiColorLightShade, }, ...chartTheme, From b3f8e2755b974efc781910b7a97d035c3c49c310 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 18:31:52 -0700 Subject: [PATCH 21/84] chore: migrate all current theme usage to legacy, merge eui usages --- .../views/timeseries/utils/theme.test.ts | 20 +++++++++---------- .../views/timeseries/utils/theme.ts | 8 ++++---- .../distribution/index.tsx | 10 ++++------ .../common/components/threshold.stories.tsx | 3 +-- .../common/components/threshold.test.tsx | 3 +-- .../alerting/common/components/threshold.tsx | 2 +- .../alert_details_app_section/index.tsx | 6 +++--- .../single_metric_sparkline.tsx | 6 ++---- .../memory_usage/memory_tree_map/tree_map.tsx | 12 ++++------- .../components/alert_status_indicator.tsx | 6 +++--- .../criterion_preview_chart.tsx | 4 ++-- .../components/custom_threshold.stories.tsx | 3 +-- .../components/custom_threshold.test.tsx | 3 +-- .../components/custom_threshold.tsx | 2 +- .../metrics/metric_with_sparkline.tsx | 12 ++++------- .../public/hooks/use_chart_theme.tsx | 7 ++----- .../common/components/charts/common.test.tsx | 6 +++--- .../common/components/charts/common.tsx | 4 ++-- .../components/charts/donutchart.test.tsx | 6 +++--- .../network_timings_donut.tsx | 5 +++-- .../contexts/synthetics_theme_context.tsx | 3 --- .../public/hooks/use_chart_theme.ts | 4 ++-- .../mock/alert_summary_widget/index.ts | 2 -- .../sections/alert_summary_widget/types.ts | 2 +- .../contexts/uptime_theme_context.tsx | 3 --- .../legacy_uptime/hooks/use_chart_theme.ts | 4 ++-- 26 files changed, 60 insertions(+), 86 deletions(-) diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts index 0e7dbb81233e2..489b5c6c14510 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts @@ -7,27 +7,27 @@ */ import { getBaseTheme } from './theme'; -import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; describe('TSVB theme', () => { it('should return the basic themes if no bg color is specified', () => { // use original dark/light theme - expect(getBaseTheme(LIGHT_THEME)).toEqual(LIGHT_THEME); - expect(getBaseTheme(DARK_THEME)).toEqual(DARK_THEME); + expect(getBaseTheme(LEGACY_LIGHT_THEME)).toEqual(LEGACY_LIGHT_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME)).toEqual(LEGACY_DARK_THEME); // discard any wrong/missing bg color - expect(getBaseTheme(DARK_THEME, null)).toEqual(DARK_THEME); - expect(getBaseTheme(DARK_THEME, '')).toEqual(DARK_THEME); - expect(getBaseTheme(DARK_THEME, undefined)).toEqual(DARK_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME, null)).toEqual(LEGACY_DARK_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME, '')).toEqual(LEGACY_DARK_THEME); + expect(getBaseTheme(LEGACY_DARK_THEME, undefined)).toEqual(LEGACY_DARK_THEME); }); it('should return a highcontrast color theme for a different background', () => { // red use a near full-black color - expect(getBaseTheme(LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)'); + expect(getBaseTheme(LEGACY_LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)'); // violet increased the text color to full white for higer contrast - expect(getBaseTheme(LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)'); + expect(getBaseTheme(LEGACY_LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)'); - // light yellow, prefer the LIGHT_THEME fill color because already with a good contrast - expect(getBaseTheme(LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333'); + // light yellow, prefer the LEGACY_LIGHT_THEME fill color because already with a good contrast + expect(getBaseTheme(LEGACY_LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333'); }); }); diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts index 82567f8e8223e..6c1142d8b7e0f 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.ts @@ -8,7 +8,7 @@ // @ts-ignore import colorJS from 'color'; -import { Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { Theme, LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; function computeRelativeLuminosity(rgb: string) { return colorJS(rgb).luminosity(); @@ -96,11 +96,11 @@ export function getBaseTheme(baseTheme: Theme, bgColor?: string | null): Theme { } const bgLuminosity = computeRelativeLuminosity(bgColor); - const mainTheme = bgLuminosity <= 0.179 ? DARK_THEME : LIGHT_THEME; + const mainTheme = bgLuminosity <= 0.179 ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; const color = findBestContrastColor( bgColor, - LIGHT_THEME.axes.axisTitle.fill, - DARK_THEME.axes.axisTitle.fill + LEGACY_LIGHT_THEME.axes.axisTitle.fill, + LEGACY_DARK_THEME.axes.axisTitle.fill ); return { ...mainTheme, diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx index 2c4c9eec27e26..3d451cf485393 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx @@ -14,12 +14,10 @@ import { ScaleType, Settings, Tooltip, + LIGHT_THEME, + DARK_THEME, } from '@elastic/charts'; import { EuiTitle } from '@elastic/eui'; -import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, -} from '@elastic/eui/dist/eui_charts_theme'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; @@ -103,8 +101,8 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { legendPosition={Position.Bottom} theme={ theme.darkMode - ? EUI_CHARTS_THEME_DARK.theme - : EUI_CHARTS_THEME_LIGHT.theme + ? DARK_THEME + : LIGHT_THEME } locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx b/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx index f933c5129a691..73361902799c6 100644 --- a/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx +++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ComponentMeta } from '@storybook/react'; import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { Comparator } from '../../../../common/alerting/metrics'; import { Props, Threshold as Component } from './threshold'; @@ -30,7 +29,7 @@ export default { } as ComponentMeta; const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx b/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx index fd50c54b65f61..b78216b78f60c 100644 --- a/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx +++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx @@ -6,7 +6,6 @@ */ import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { Comparator } from '../../../../common/alerting/metrics'; import { render } from '@testing-library/react'; import { Props, Threshold } from './threshold'; @@ -15,7 +14,7 @@ import React from 'react'; describe('Threshold', () => { const renderComponent = (props: Partial = {}) => { const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx index 79e065ae7b1f3..d9ca396f9aa33 100644 --- a/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/infra/public/alerting/common/components/threshold.tsx @@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n'; import { Comparator } from '../../../../common/alerting/metrics'; export interface ChartProps { - theme: PartialTheme; + theme?: PartialTheme; baseTheme: Theme; } diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx index 15b30ab3b79cf..415624ef4dfab 100644 --- a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx +++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx @@ -6,7 +6,7 @@ */ import React, { useEffect } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; -import { LIGHT_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME } from '@elastic/charts'; import { EuiPanel } from '@elastic/eui'; import { ALERT_CONTEXT, @@ -126,7 +126,7 @@ const AlertDetailsAppSection = ({ [ // localThemeOverride, EUI_SPARKLINE_THEME_PARTIAL, - isDarkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, + isDarkMode ? DARK_THEME : LIGHT_THEME, ], [isDarkMode] ); diff --git a/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx b/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx index 0cf65ec6d0949..62e8e75a5a0d6 100644 --- a/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx +++ b/x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx @@ -11,10 +11,9 @@ import { Settings, Partition, PartitionLayout, - LIGHT_THEME, DARK_THEME, + LIGHT_THEME, } from '@elastic/charts'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common'; import { EuiComboBox, EuiComboBoxOptionOption, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -65,11 +64,8 @@ export const JobMemoryTreeMap: FC = ({ node, type, height }) => { } = useMlKibana(); const isDarkTheme = useIsDarkTheme(themeService); - const { theme, baseTheme } = useMemo( - () => - isDarkTheme - ? { theme: EUI_CHARTS_THEME_DARK, baseTheme: DARK_THEME } - : { theme: EUI_CHARTS_THEME_LIGHT, baseTheme: LIGHT_THEME }, + const baseTheme = useMemo( + () => isDarkTheme ? DARK_THEME : LIGHT_THEME, [isDarkTheme] ); @@ -173,7 +169,7 @@ export const JobMemoryTreeMap: FC = ({ node, type, height }) => { {data.length ? ( - + id="memoryUsageTreeMap" data={data} diff --git a/x-pack/plugins/observability/public/components/alert_status_indicator.tsx b/x-pack/plugins/observability/public/components/alert_status_indicator.tsx index 8090e26d4596f..9dcdbe660e6fe 100644 --- a/x-pack/plugins/observability/public/components/alert_status_indicator.tsx +++ b/x-pack/plugins/observability/public/components/alert_status_indicator.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiHealth, EuiText } from '@elastic/eui'; import { ALERT_STATUS_ACTIVE, AlertStatus } from '@kbn/rule-data-utils'; -import { LIGHT_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME } from '@elastic/charts'; interface AlertStatusIndicatorProps { alertStatus: AlertStatus; @@ -19,7 +19,7 @@ interface AlertStatusIndicatorProps { export function AlertStatusIndicator({ alertStatus, textSize = 'xs' }: AlertStatusIndicatorProps) { if (alertStatus === ALERT_STATUS_ACTIVE) { return ( - + {i18n.translate('xpack.observability.alertsTGrid.statusActiveDescription', { defaultMessage: 'Active', })} @@ -28,7 +28,7 @@ export function AlertStatusIndicator({ alertStatus, textSize = 'xs' }: AlertStat } return ( - + {i18n.translate('xpack.observability.alertsTGrid.statusRecoveredDescription', { defaultMessage: 'Recovered', diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx index a5ed7cd38c580..b04bdc6b0c0d3 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/criterion_preview_chart/criterion_preview_chart.tsx @@ -7,7 +7,7 @@ import React, { useMemo } from 'react'; import { niceTimeFormatter } from '@elastic/charts'; -import { Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { Theme, LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { EuiLoadingChart, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -76,7 +76,7 @@ export const getDomain = (series: Series, stacked: boolean = false) => { // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md export const getChartTheme = (isDarkMode: boolean): Theme => { - return isDarkMode ? DARK_THEME : LIGHT_THEME; + return isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; }; export const EmptyContainer: React.FC = ({ children }) => ( diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx index 8e1e6b590e601..6552f2a7f704b 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.stories.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ComponentMeta } from '@storybook/react'; import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { Comparator } from '../../../../common/custom_threshold_rule/types'; import { Props, Threshold as Component } from './custom_threshold'; @@ -31,7 +30,7 @@ export default { } as ComponentMeta; const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx index a1d61e0ce28cd..9c3e0aa88b69e 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.test.tsx @@ -6,7 +6,6 @@ */ import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { render } from '@testing-library/react'; import { Props, Threshold } from './custom_threshold'; @@ -16,7 +15,7 @@ import { Comparator } from '../../../../common/custom_threshold_rule/types'; describe('Threshold', () => { const renderComponent = (props: Partial = {}) => { const defaultProps: Props = { - chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME }, + chartProps: { baseTheme: LIGHT_THEME }, comparator: Comparator.GT, id: 'componentId', threshold: 90, diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx index 0dad6a2d98a18..f38cab724a451 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/custom_threshold.tsx @@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n'; import { Comparator } from '../../../../common/custom_threshold_rule/types'; export interface ChartProps { - theme: PartialTheme; + theme?: PartialTheme; baseTheme: Theme; } diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx index bbd3b9acd224c..5404b08bed376 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx @@ -5,13 +5,11 @@ * 2.0. */ -import { Chart, Settings, AreaSeries, TooltipType, Tooltip } from '@elastic/charts'; +import { Chart, Settings, AreaSeries, TooltipType, Tooltip, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiTextColor } from '@elastic/eui'; import React, { useContext } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, EUI_SPARKLINE_THEME_PARTIAL, } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeContext } from 'styled-components'; @@ -29,10 +27,8 @@ interface Props { export function MetricWithSparkline({ id, formatter, value, timeseries, color }: Props) { const themeCTX = useContext(ThemeContext); const isDarkTheme = (themeCTX && themeCTX.darkMode) || false; - const theme = [ - EUI_SPARKLINE_THEME_PARTIAL, - isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, - ]; + const theme = [EUI_SPARKLINE_THEME_PARTIAL]; + const baseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME; const colors = theme[1].colors?.vizColors ?? []; @@ -53,7 +49,7 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }: - + [ diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx index 572706719eb88..71c3c0793d72b 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx @@ -19,7 +19,7 @@ import { WrappedByAutoSizer, useThemes, } from './common'; -import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME, LEGACY_DARK_THEME } from '@elastic/charts'; jest.mock('../../lib/kibana'); @@ -181,14 +181,14 @@ describe('checkIfAllValuesAreZero', () => { (useUiSetting as jest.Mock).mockImplementation(() => false); const { result } = renderHook(() => useThemes()); - expect(result.current.baseTheme).toBe(LIGHT_THEME); + expect(result.current.baseTheme).toBe(LEGACY_LIGHT_THEME); }); it('should return dark baseTheme when isDarkMode true', () => { (useUiSetting as jest.Mock).mockImplementation(() => true); const { result } = renderHook(() => useThemes()); - expect(result.current.baseTheme).toBe(DARK_THEME); + expect(result.current.baseTheme).toBe(LEGACY_DARK_THEME); }); }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx index bf8f561cdfdf3..5bc211bc6f375 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx @@ -17,7 +17,7 @@ import type { BarSeriesStyle, Theme, } from '@elastic/charts'; -import { DARK_THEME, LIGHT_THEME, Position } from '@elastic/charts'; +import { LEGACY_DARK_THEME, LEGACY_LIGHT_THEME, Position } from '@elastic/charts'; import { EuiFlexGroup } from '@elastic/eui'; import React from 'react'; import styled from 'styled-components'; @@ -115,7 +115,7 @@ const theme: PartialTheme = { export const useThemes = (): { baseTheme: Theme; theme: PartialTheme } => { const isDarkMode = useUiSetting(DEFAULT_DARK_MODE); // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md - const baseTheme = isDarkMode ? DARK_THEME : LIGHT_THEME; + const baseTheme = isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME; return { baseTheme, theme, diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx index 18313b002b223..e29b72fbc0004 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types'; -import { LIGHT_THEME, Partition, Settings } from '@elastic/charts'; +import { LEGACY_LIGHT_THEME, Partition, Settings } from '@elastic/charts'; import { parsedMockAlertsData } from '../../../overview/components/detection_response/alerts_by_status/mock_data'; import { render } from '@testing-library/react'; import type { DonutChartProps } from './donutchart'; @@ -47,7 +47,7 @@ jest.mock('./draggable_legend', () => { }; }); -const mockBaseTheme = LIGHT_THEME; +const mockBaseTheme = LEGACY_LIGHT_THEME; jest.mock('./common', () => { return { useThemes: jest.fn(() => ({ @@ -93,7 +93,7 @@ describe('DonutChart', () => { expect(container.querySelector(`[data-test-subj="es-chart-settings"]`)).toBeInTheDocument(); const settingsProps = (Settings as jest.Mock).mock.calls[0][0]; - expect(settingsProps.baseTheme).toEqual(LIGHT_THEME); + expect(settingsProps.baseTheme).toEqual(LEGACY_LIGHT_THEME); expect(settingsProps.theme[0]).toEqual({ chartMargins: { bottom: 0, left: 0, right: 0, top: 0 }, partition: { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx index 7a53a21ca0590..193d86587fd93 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { Chart, Datum, - LIGHT_THEME, + LEGACY_LIGHT_THEME, PartialTheme, Partition, PartitionLayout, @@ -69,7 +69,8 @@ export const NetworkTimingsDonut = () => { diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx index 1415b1076cdd9..c2c19f815b90f 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/contexts/synthetics_theme_context.tsx @@ -7,7 +7,6 @@ import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; import React, { createContext, useContext, useMemo } from 'react'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; export interface SyntheticsAppColors { @@ -46,7 +45,6 @@ const defaultContext: SyntheticsThemeContextValues = { }, chartTheme: { baseTheme: LIGHT_THEME, - theme: EUI_CHARTS_THEME_LIGHT.theme, }, }; @@ -89,7 +87,6 @@ export const SyntheticsThemeContextProvider: React.FC = ({ colors, chartTheme: { baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, - theme: darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, }, }; }, [colors, darkMode]); diff --git a/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts b/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts index f9faca7927d9d..24582b475dbec 100644 --- a/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts +++ b/x-pack/plugins/synthetics/public/hooks/use_chart_theme.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { DARK_THEME, LIGHT_THEME } from '@elastic/charts'; import { useMemo } from 'react'; import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; @@ -13,7 +13,7 @@ export const useChartTheme = () => { const [darkMode] = useUiSetting$('theme:darkMode'); const theme = useMemo(() => { - return darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); return theme; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts b/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts index b155e08a77f99..bb07375721059 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/mock/alert_summary_widget/index.ts @@ -6,7 +6,6 @@ */ import { LIGHT_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { AlertSummaryTimeRange, ChartProps } from '../../sections/alert_summary_widget/types'; export const mockedAlertSummaryResponse = { @@ -40,6 +39,5 @@ export const mockedAlertSummaryTimeRange: AlertSummaryTimeRange = { }; export const mockedChartProps: ChartProps = { - theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts index 7e7e7355e1a2a..40337098bd117 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/types.ts @@ -25,7 +25,7 @@ export interface AlertSummaryTimeRange { } export interface ChartProps { - theme: PartialTheme; + theme?: PartialTheme; baseTheme: Theme; onBrushEnd?: BrushEndListener; } diff --git a/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx b/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx index b37856b03e87e..e50c076423dfb 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/contexts/uptime_theme_context.tsx @@ -7,7 +7,6 @@ import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; import React, { createContext, useMemo } from 'react'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { UptimeAppColors } from '../app/uptime_app'; @@ -36,7 +35,6 @@ const defaultContext: UptimeThemeContextValues = { }, chartTheme: { baseTheme: LIGHT_THEME, - theme: EUI_CHARTS_THEME_LIGHT.theme, }, }; @@ -76,7 +74,6 @@ export const UptimeThemeContextProvider: React.FC = ({ darkMo colors, chartTheme: { baseTheme: darkMode ? DARK_THEME : LIGHT_THEME, - theme: darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme, }, }; }, [colors, darkMode]); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts b/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts index f9faca7927d9d..300daa3047f12 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts +++ b/x-pack/plugins/uptime/public/legacy_uptime/hooks/use_chart_theme.ts @@ -5,15 +5,15 @@ * 2.0. */ -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { useMemo } from 'react'; import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; +import { DARK_THEME, LIGHT_THEME } from '@elastic/charts'; export const useChartTheme = () => { const [darkMode] = useUiSetting$('theme:darkMode'); const theme = useMemo(() => { - return darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + return darkMode ? DARK_THEME : LIGHT_THEME; }, [darkMode]); return theme; From 31bbe7427265e7eec6ced5d201d485d3832c5572 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 18:32:34 -0700 Subject: [PATCH 22/84] chore: remove unneeded size hacks on tickLine styles --- src/plugins/charts/common/static/styles/multilayer_timeaxis.ts | 2 +- .../pages/slo_edit/components/common/data_preview_chart.tsx | 2 +- .../components/alert_summary_widget_full_size.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts b/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts index 478cc7b52a73a..4b22feaa92751 100644 --- a/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts +++ b/src/plugins/charts/common/static/styles/multilayer_timeaxis.ts @@ -20,7 +20,7 @@ export const MULTILAYER_TIME_AXIS_STYLE: RecursivePartial = { }, tickLine: { visible: true, - size: 0.0001, + size: 0, padding: 4, }, }; diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx index 7dc2e00f60829..1a3b151b010b9 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx @@ -224,7 +224,7 @@ export function DataPreviewChart({ timeAxisLayerCount={2} gridLine={{ visible: true }} style={{ - tickLine: { size: 0.0001, padding: 4, visible: true }, + tickLine: { size: 0, padding: 4, visible: true }, tickLabel: { alignment: { horizontal: Position.Left, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx index 4d2945f86ed23..9638fd6900794 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx @@ -86,7 +86,7 @@ export const AlertSummaryWidgetFullSize = ({ visible: true, }} style={{ - tickLine: { size: 0.0001, padding: 4 }, + tickLine: { size: 0, padding: 4 }, tickLabel: { alignment: { horizontal: Position.Left, vertical: Position.Bottom } }, }} /> From f5a8ecfd0ebeb323e0c846e1ed30ef7345cdcc21 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 13 Nov 2023 19:43:17 -0700 Subject: [PATCH 23/84] chore: remove usage of chart plugin theme.useChartsTheme --- .../src/components/field_stats/field_stats.tsx | 15 ++++++--------- .../public/components/gauge_component.tsx | 4 +--- .../public/components/heatmap_component.tsx | 12 ++++-------- .../public/__mocks__/theme_service.ts | 1 - .../public/components/metric_vis.tsx | 9 +++------ .../public/components/partition_vis_component.tsx | 6 ++---- .../expression_xy/public/components/xy_chart.tsx | 10 +++------- .../public/components/timelion_vis_component.tsx | 3 --- .../components/vis_types/timeseries/vis.test.js | 9 --------- .../visualizations/views/timeseries/index.js | 12 +++--------- .../document_count_chart/document_count_chart.tsx | 2 -- .../components/mini_histogram/mini_histogram.tsx | 5 +++-- .../compliance_charts/compliance_score_chart.tsx | 1 - .../document_count_chart/document_count_chart.tsx | 2 -- .../analytics_collection_chart.tsx | 2 -- .../analytics/components/analytics_chart.test.tsx | 1 - .../analytics/components/analytics_chart.tsx | 1 - .../components/alert_details_app_section.tsx | 1 - .../components/expression_chart.test.tsx | 1 - .../asset_details/__stories__/decorator.tsx | 1 - .../asset_details/tabs/overview/alerts.tsx | 1 - .../components/tabs/alerts/alerts_tab_content.tsx | 1 - .../public/utils/use_timeline_chart_theme.ts | 5 ----- .../contexts/kibana/__mocks__/kibana_context.ts | 13 ------------- .../explorer_chart_distribution.js | 6 +++--- .../explorer_chart_distribution.test.js | 2 +- .../explorer_chart_single_metric.js | 6 +++--- .../explorer_chart_single_metric.test.js | 2 +- .../explorer_charts/explorer_charts_container.js | 2 +- .../components/alert_details_app_section.tsx | 1 - .../observability/public/pages/alerts/alerts.tsx | 1 - .../public/pages/overview/overview.tsx | 1 - .../public/pages/rule_details/rule_details.tsx | 5 ++--- .../pages/slo_details/components/wide_chart.tsx | 2 -- .../components/common/data_preview_chart.tsx | 2 -- .../public/pages/slo_edit/slo_edit.test.tsx | 1 - .../pages/slos/components/slo_sparkline.tsx | 3 +-- .../utils/kibana_react.storybook_decorator.tsx | 1 - .../public/hooks/use_profiling_charts_theme.ts | 8 +++----- .../public/rule_types/threshold/visualization.tsx | 6 +++--- .../helpers/app_context.mock.tsx | 2 +- .../threshold_watch_edit/watch_visualization.tsx | 8 +++++--- 42 files changed, 49 insertions(+), 128 deletions(-) diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx index 4f5b71384b326..7542d0634ecf0 100755 --- a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx +++ b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx @@ -28,6 +28,7 @@ import { Settings, TooltipType, Tooltip, + PartialTheme, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query'; @@ -222,22 +223,18 @@ const FieldStatsComponent: React.FC = ({ }; }, []); - const chartTheme = charts.theme.useChartsTheme(); const chartBaseTheme = charts.theme.useChartsBaseTheme(); - const customChartTheme: typeof chartTheme = useMemo(() => { + const chartThemeOverrides = useMemo(() => { return color ? { - ...chartTheme, barSeriesStyle: { - ...chartTheme.barSeriesStyle, rect: { - ...(chartTheme.barSeriesStyle?.rect || {}), fill: color, }, }, } - : chartTheme; - }, [chartTheme, color]); + : {}; + }, [color]); const { isLoading, @@ -485,7 +482,7 @@ const FieldStatsComponent: React.FC = ({ = ({ diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index ea8342462f05e..6565673cea0da 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -261,8 +261,6 @@ export const GaugeComponent: FC = memo( return null; } - const chartTheme = chartsThemeService.useChartsTheme(); - const metricColumn = table.columns.find((col) => col.id === accessors.metric); const chartData = table.rows.filter( @@ -366,7 +364,7 @@ export const GaugeComponent: FC = memo( } debugState={window._echDebugStateFlag ?? false} - theme={[{ background: { color: 'transparent' } }, chartTheme]} + theme={[{ background: { color: 'transparent' } }]} baseTheme={chartBaseTheme} ariaLabel={args.ariaLabel} ariaUseDefaultSummary={!args.ariaLabel} diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index f0794318e6001..c17c6cf94969c 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -159,7 +159,6 @@ export const HeatmapComponent: FC = memo( overrides, }) => { const chartRef = useRef(null); - const chartTheme = chartsThemeService.useChartsTheme(); const isDarkTheme = chartsThemeService.useDarkMode(); // legacy heatmap legend is handled by the uiState const [showLegend, setShowLegend] = useState(() => { @@ -548,12 +547,10 @@ export const HeatmapComponent: FC = memo( stroke: { width: args.gridConfig.strokeWidth ?? - chartTheme.axes?.gridLine?.horizontal?.strokeWidth ?? - 1, + chartBaseTheme.axes.gridLine.horizontal.strokeWidth, color: args.gridConfig.strokeColor ?? - chartTheme.axes?.gridLine?.horizontal?.stroke ?? - '#D3DAE6', + chartBaseTheme.axes.gridLine.horizontal.stroke, }, }, cell: { @@ -572,13 +569,13 @@ export const HeatmapComponent: FC = memo( yAxisLabel: { visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible, // eui color subdued - textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d', + textColor: chartBaseTheme.axes.tickLabel.fill, padding: yAxisColumn?.name ? 8 : 0, }, xAxisLabel: { visible: Boolean(args.gridConfig.isXAxisLabelVisible && xAxisColumn), // eui color subdued - textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`, + textColor: chartBaseTheme.axes.tickLabel.fill, padding: xAxisColumn?.name ? 8 : 0, }, brushMask: { @@ -719,7 +716,6 @@ export const HeatmapComponent: FC = memo( debugState={window._echDebugStateFlag ?? false} theme={[ themeOverrides, - chartTheme, ...(Array.isArray(settingsThemeOverrides) ? settingsThemeOverrides : [settingsThemeOverrides]), diff --git a/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts b/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts index b00ec8a6ee569..c3c23e41c01db 100644 --- a/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts +++ b/src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts @@ -8,7 +8,6 @@ export const getThemeService = () => { return { - useChartsTheme: () => ({}), useChartsBaseTheme: () => ({ metric: { minHeight: 64 } }), }; }; diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 964c7d4685493..ecf0f2535925e 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -154,7 +154,6 @@ export const MetricVis = ({ filterable, overrides, }: MetricVisComponentProps) => { - const chartTheme = getThemeService().useChartsTheme(); const onRenderChange = useCallback( (isRendered) => { if (isRendered) { @@ -167,8 +166,7 @@ export const MetricVis = ({ const [scrollChildHeight, setScrollChildHeight] = useState('100%'); const scrollContainerRef = useRef(null); const scrollDimensions = useResizeObserver(scrollContainerRef.current); - - const baseTheme = getThemeService().useChartsBaseTheme(); + const chartBaseTheme = getThemeService().useChartsBaseTheme(); const primaryMetricColumn = getColumnByAccessor(config.dimensions.metric, data.columns)!; const formatPrimaryMetric = getMetricFormatter(config.dimensions.metric, data.columns); @@ -275,7 +273,7 @@ export const MetricVis = ({ } = config; const numRows = metricConfigs.length / maxCols; - const minHeight = chartTheme.metric?.minHeight ?? baseTheme.metric.minHeight; + const minHeight = chartBaseTheme.metric.minHeight; useEffect(() => { const minimumRequiredVerticalSpace = minHeight * numRows; @@ -331,13 +329,12 @@ export const MetricVis = ({ metric: { barBackground: euiThemeVars.euiColorLightShade, }, - ...chartTheme, }, ...(Array.isArray(settingsThemeOverrides) ? settingsThemeOverrides : [settingsThemeOverrides]), ]} - baseTheme={baseTheme} + baseTheme={chartBaseTheme} onRenderChange={onRenderChange} onElementClick={ filterable diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx index 09b85a0413c59..707b0629a26ec 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx @@ -113,7 +113,6 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { hasOpenedOnAggBasedEditor, } = props; const visParams = useMemo(() => filterOutConfig(visType, preVisParams), [preVisParams, visType]); - const chartTheme = props.chartsThemeService.useChartsTheme(); const chartBaseTheme = props.chartsThemeService.useChartsBaseTheme(); const { @@ -377,12 +376,12 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { getPartitionTheme( visType, visParams, - chartTheme, + chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor ), - [visType, visParams, chartTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] + [visType, visParams, chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] ); const fixedViewPort = document.getElementById('app-fixed-viewport'); @@ -574,7 +573,6 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { // Chart background should be transparent for the usage at Canvas. { background: { color: 'transparent' } }, themeOverrides, - chartTheme, { legend: { labelOptions: { diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 5b1b40798aa29..4f994fde9f455 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -101,7 +101,6 @@ import { Annotations, getAnnotationsGroupedByInterval, isRangeAnnotation, - OUTSIDE_RECT_ANNOTATION_WIDTH, OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION, } from './annotations'; import { AxisExtentModes, SeriesTypes, ValueLabelModes, XScaleTypes } from '../../common/constants'; @@ -227,7 +226,6 @@ export function XYChart({ annotations, } = args; const chartRef = useRef(null); - const chartTheme = chartsThemeService.useChartsTheme(); const chartBaseTheme = chartsThemeService.useChartsBaseTheme(); const darkMode = chartsThemeService.useDarkMode(); const filteredLayers = getFilteredLayers(layers); @@ -798,9 +796,7 @@ export function XYChart({ legendSize={LegendSizeToPixels[legend.legendSize ?? DEFAULT_LEGEND_SIZE]} theme={[ { - ...chartTheme, barSeriesStyle: { - ...chartTheme.barSeriesStyle, ...valueLabelsStyling, }, background: { @@ -811,7 +807,7 @@ export function XYChart({ }, // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { - ...chartTheme.chartPaddings, + ...chartBaseTheme.chartPaddings, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, @@ -996,8 +992,8 @@ export function XYChart({ ? OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION : shouldUseNewTimeAxis ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding || 0) + - Number(chartTheme.axes?.tickLabel?.fontSize || 0) - : Number(chartTheme.axes?.tickLine?.size) || OUTSIDE_RECT_ANNOTATION_WIDTH + chartBaseTheme.axes.tickLabel.fontSize + : chartBaseTheme.axes.tickLine.size } /> ) : null} diff --git a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx index 9eb41c09394d9..983a2ec74c12a 100644 --- a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx +++ b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx @@ -113,8 +113,6 @@ export const TimelionVisComponent = ({ const chartRef = useRef(null); const chart = seriesList.list; const chartsService = getCharts(); - - const chartTheme = chartsService.theme.useChartsTheme(); const chartBaseTheme = chartsService.theme.useChartsBaseTheme(); const handleCursorUpdate = useActiveCursor(chartsService.activeCursor, chartRef, { @@ -216,7 +214,6 @@ export const TimelionVisComponent = ({ externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, }} - theme={chartTheme} baseTheme={chartBaseTheme} ariaLabel={ariaLabel} ariaUseDefaultSummary={!ariaLabel} diff --git a/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js b/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js index fe6f73ce66f79..d2c343d676ed9 100644 --- a/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js +++ b/src/plugins/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.test.js @@ -38,15 +38,6 @@ describe('TimeseriesVisualization', () => { setCharts({ theme: { - useChartsTheme: () => ({ - axes: { - tickLabel: { - padding: { - inner: 0, - }, - }, - }, - }), useChartsBaseTheme: () => ({ axes: { tickLabel: { diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js index 418d1c0c19969..6a3359dbeadd6 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js @@ -89,7 +89,7 @@ export const TimeSeries = ({ const { theme: themeService, activeCursor: activeCursorService } = getCharts(); const chartRef = useRef(); - const chartTheme = themeService.useChartsTheme(); + const chartBaseTheme = getBaseTheme(themeService.useChartsBaseTheme(), backgroundColor); const handleCursorUpdate = useActiveCursor(activeCursorService, chartRef, { isDateHistogram: true, @@ -127,8 +127,6 @@ export const TimeSeries = ({ // apply legend style change if bgColor is configured const classes = classNames(getChartClasses(backgroundColor)); - const baseTheme = getBaseTheme(themeService.useChartsBaseTheme(), backgroundColor); - const onBrushEndListener = ({ x }) => { if (!x) { return; @@ -196,15 +194,12 @@ export const TimeSeries = ({ pointerUpdateDebounce={0} theme={[ { - crosshair: { - ...chartTheme.crosshair, - }, axes: { tickLabel: { padding: { inner: hasVisibleAnnotations ? TICK_LABEL_WITH_ANNOTATIONS_PADDING - : chartTheme.axes.tickLabel.padding.inner, + : chartBaseTheme.axes.tickLabel.padding.inner, }, }, }, @@ -226,9 +221,8 @@ export const TimeSeries = ({ labelOptions: { maxLines: truncateLegend ? maxLegendLines ?? 1 : 0 }, }, }, - chartTheme, ]} - baseTheme={baseTheme} + baseTheme={chartBaseTheme} externalPointerEvents={{ tooltip: { visible: syncTooltips, placement: Placement.Right }, }} diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx index 7fa45baa1fdc6..3ea94490b2ec1 100644 --- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx +++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx @@ -200,7 +200,6 @@ export const DocumentCountChart: FC = (props) => { const { data, uiSettings, fieldFormats, charts } = dependencies; - const chartTheme = charts.theme.useChartsTheme(); const chartBaseTheme = charts.theme.useChartsBaseTheme(); const xAxisFormatter = fieldFormats.deserialize({ id: 'date' }); @@ -484,7 +483,6 @@ export const DocumentCountChart: FC = (props) => { setMlBrushMarginLeft(projection.left); setMlBrushWidth(projection.width); }} - theme={chartTheme} baseTheme={chartBaseTheme} debugState={window._echDebugStateFlag ?? false} showLegend={false} diff --git a/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx b/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx index 1e65c797cacbb..9b5293988551a 100644 --- a/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx +++ b/x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx @@ -46,7 +46,7 @@ export const MiniHistogram: FC = ({ const { charts } = useAiopsAppContext(); const euiTheme = useEuiTheme(); - const defaultChartTheme = charts.theme.useChartsTheme(); + const chartBaseTheme = charts.theme.useChartsBaseTheme(); const miniHistogramChartTheme: PartialTheme = { chartMargins: { @@ -107,7 +107,8 @@ export const MiniHistogram: FC = ({ diff --git a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx index 956f63ed2d3bd..f3b41a582611b 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx @@ -91,7 +91,6 @@ const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => { )} /> = ({ services: { data, uiSettings, fieldFormats, charts }, } = useDataVisualizerKibana(); - const chartTheme = charts.theme.useChartsTheme(); const chartBaseTheme = charts.theme.useChartsBaseTheme(); const xAxisFormatter = fieldFormats.deserialize({ id: 'date' }); @@ -152,7 +151,6 @@ export const DocumentCountChart: FC = ({ xDomain={xDomain} onBrushEnd={onBrushEnd as BrushEndListener} onElementClick={onElementClick} - theme={chartTheme} baseTheme={chartBaseTheme} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx index 3cda9a274cd69..231af9e9afd96 100644 --- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx @@ -62,7 +62,6 @@ export const AnalyticsCollectionChart: React.FC< const { uiSettings, charts: chartSettings } = useValues(KibanaLogic); const fromDateParsed = DateMath.parse(timeRange.from); const toDataParsed = DateMath.parse(timeRange.to); - const chartTheme = chartSettings.theme.useChartsTheme(); const baseChartTheme = chartSettings.theme.useChartsBaseTheme(); const charts = useMemo( () => [ @@ -127,7 +126,6 @@ export const AnalyticsCollectionChart: React.FC< ) : ( { diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx index 5f56ac24afb38..ded32c853be43 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx @@ -35,7 +35,6 @@ describe('AnalyticsChart', () => { expect(wrapper.find(Chart).prop('size')).toEqual({ height: 300 }); expect(wrapper.find(Axis)).toHaveLength(2); - expect(mockKibanaValues.charts.theme.useChartsTheme).toHaveBeenCalled(); expect(mockKibanaValues.charts.theme.useChartsBaseTheme).toHaveBeenCalled(); expect(wrapper.find(LineSeries)).toHaveLength(1); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx index c53d22fbcee05..a09536bced2d6 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx @@ -40,7 +40,6 @@ export const AnalyticsChart: React.FC = ({ height = 300, lines }) => { moment(tooltip.value).format(TOOLTIP_DATE_FORMAT)} /> diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx index 466d032b5c01f..0b1f377a82457 100644 --- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx +++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx @@ -72,7 +72,6 @@ export function AlertDetailsAppSection({ [createDerivedIndexPattern] ); const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]); diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx index a932821b118b3..d27692b22f06b 100644 --- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx +++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.test.tsx @@ -26,7 +26,6 @@ jest.mock('../../../hooks/use_kibana', () => ({ activeCursor: jest.fn(), theme: { useChartsBaseTheme: jest.fn(() => ({})), - useChartsTheme: jest.fn(() => ({})), }, }, }, diff --git a/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx b/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx index 11401bd256feb..77885e4efa24f 100644 --- a/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx @@ -91,7 +91,6 @@ export const DecorateWithKibanaContext: DecoratorFn = (story) => { }, charts: { theme: { - useChartsTheme: () => ({} as Theme), useChartsBaseTheme: () => ({} as Theme), }, }, diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx index 9b964a0974a23..4d22688debc8c 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx @@ -97,7 +97,6 @@ const MemoAlertSummaryWidget = React.memo( const { getAlertSummaryWidget: AlertSummaryWidget } = triggersActionsUi; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx index 245a7ee752a64..5a64a4040b288 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx @@ -91,7 +91,6 @@ const MemoAlertSummaryWidget = React.memo( }; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), onBrushEnd, }; diff --git a/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts b/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts index 7c562c90ab434..47aac1cc26bfa 100644 --- a/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts +++ b/x-pack/plugins/infra/public/utils/use_timeline_chart_theme.ts @@ -16,19 +16,15 @@ export function useTimelineChartTheme(): Pick { - return { - crosshair: { - line: { - stroke: 'black', - strokeWidth: 1, - dash: [4, 4], - }, - }, - }; - }), - }, activeCursor: { activeCursor$: new BehaviorSubject({ cursor: { diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js index 51fbb39f9f733..7c03412ec4fcc 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js @@ -326,9 +326,9 @@ export class ExplorerChartDistribution extends React.Component { return `M${xPosition},${chartHeight} ${xPosition},0`; }) // Use elastic chart's cursor line style if possible - .style('stroke', `${chartTheme.crosshair.line.stroke ?? 'black'}`) - .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth ?? '1'}px`) - .style('stroke-dasharray', chartTheme.crosshair.line.dash ?? '4,4'); + .style('stroke', chartTheme.crosshair.line.stroke) + .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth}px`) + .style('stroke-dasharray', chartTheme.crosshair.line.dash?.join(',') ?? '4,4'); cursorMouseLine.exit().remove(); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js index d77b66b960625..5a146c51b61c1 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js @@ -22,7 +22,7 @@ import { kibanaContextMock } from '../../contexts/kibana/__mocks__/kibana_contex const utilityProps = { timeBuckets: timeBucketsMock, - chartTheme: kibanaContextMock.services.charts.theme.useChartsTheme(), + chartTheme: kibanaContextMock.services.charts.theme.useChartsBaseTheme(), onPointerUpdate: jest.fn(), cursor: { x: 10432423, diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js index b93555e8c2ff9..95933451d6f47 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js @@ -257,9 +257,9 @@ export class ExplorerChartSingleMetric extends React.Component { return `M${xPosition},${chartHeight} ${xPosition},0`; }) // Use elastic chart's cursor line style if possible - .style('stroke', `${chartTheme.crosshair.line.stroke ?? 'black'}`) - .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth ?? '1'}px`) - .style('stroke-dasharray', chartTheme.crosshair.line.dash ?? '4,4'); + .style('stroke', chartTheme.crosshair.line.stroke) + .style('stroke-width', `${chartTheme.crosshair.line.strokeWidth}px`) + .style('stroke-dasharray', chartTheme.crosshair.line.dash?.join(',') ?? '4,4'); cursorMouseLine.exit().remove(); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js index abe8c0c991cc4..3bc38c5754e88 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js @@ -22,7 +22,7 @@ import { kibanaContextMock } from '../../contexts/kibana/__mocks__/kibana_contex const utilityProps = { timeBuckets: timeBucketsMock, - chartTheme: kibanaContextMock.services.charts.theme.useChartsTheme(), + chartTheme: kibanaContextMock.services.charts.theme.useChartsBaseTheme(), onPointerUpdate: jest.fn(), cursor: { x: 10432423, diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index fb340977dfae8..bd0ce88e86d34 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -188,7 +188,7 @@ function ExplorerChartContainer({ const chartRef = useRef(null); const { euiTheme } = useEuiTheme(); - const chartTheme = chartsService.theme.useChartsTheme(); + const chartTheme = chartsService.theme.useChartsBaseTheme(); const handleCursorUpdate = useActiveCursor(chartsService.activeCursor, chartRef, { isDateHistogram: true, diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx index 11a85e6b17bc2..87532851280b5 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx @@ -67,7 +67,6 @@ export default function AlertDetailsAppSection({ const [, setDataViewError] = useState(); const ruleParams = rule.params as RuleTypeParams & AlertParams; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]); diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts.tsx index 9e80d01ed82e4..4d7cecb1f6c02 100644 --- a/x-pack/plugins/observability/public/pages/alerts/alerts.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/alerts.tsx @@ -82,7 +82,6 @@ function InternalAlertsPage() { } }; const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), onBrushEnd, }; diff --git a/x-pack/plugins/observability/public/pages/overview/overview.tsx b/x-pack/plugins/observability/public/pages/overview/overview.tsx index 6b623e1636dab..17121be51c668 100644 --- a/x-pack/plugins/observability/public/pages/overview/overview.tsx +++ b/x-pack/plugins/observability/public/pages/overview/overview.tsx @@ -102,7 +102,6 @@ export function OverviewPage() { ); const chartProps = { - theme: charts.theme.useChartsTheme(), baseTheme: charts.theme.useChartsBaseTheme(), }; diff --git a/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx b/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx index b3b9ea17d5cac..6a9c38b1b1e80 100644 --- a/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx +++ b/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx @@ -50,7 +50,7 @@ export function RuleDetailsPage() { const { application: { capabilities, navigateToUrl }, charts: { - theme: { useChartsBaseTheme, useChartsTheme }, + theme: { useChartsBaseTheme }, }, http: { basePath }, share: { @@ -70,7 +70,6 @@ export function RuleDetailsPage() { const { ruleId } = useParams(); const { search } = useLocation(); - const theme = useChartsTheme(); const baseTheme = useChartsBaseTheme(); const { rule, isLoading, isError, refetch } = useFetchRule({ ruleId }); @@ -234,7 +233,7 @@ export function RuleDetailsPage() { } onPointerUpdate={handleCursorUpdate} externalPointerEvents={{ diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx index 1a3b151b010b9..386661ae0d318 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx @@ -70,7 +70,6 @@ export function DataPreviewChart({ isError, } = useDebouncedGetPreviewData(isIndicatorSectionValid, watch('indicator')); - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const dateFormat = uiSettings.get('dateFormat'); const numberFormat = @@ -189,7 +188,6 @@ export function DataPreviewChart({ showLegend={false} theme={[ { - ...theme, lineSeriesStyle: { point: { visible: false }, }, diff --git a/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx index 8d4d45a08d709..e347c0dcd43d6 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.test.tsx @@ -74,7 +74,6 @@ const mockKibana = () => { }, charts: { theme: { - useChartsTheme: () => {}, useChartsBaseTheme: () => {}, }, }, diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx index 3f2e9915cd6cc..daaa3df2be0ea 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx @@ -40,7 +40,6 @@ export interface Props { export function SloSparkline({ chart, data, id, isLoading, state }: Props) { const charts = useKibana().services.charts; - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const { euiTheme } = useEuiTheme(); @@ -57,7 +56,7 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) { diff --git a/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx b/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx index d5714924bdc97..a3cfb7833f16e 100644 --- a/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx +++ b/x-pack/plugins/observability/public/utils/kibana_react.storybook_decorator.tsx @@ -68,7 +68,6 @@ export function KibanaReactStorybookDecorator(Story: ComponentType) { charts: { theme: { useChartsBaseTheme: () => {}, - useChartsTheme: () => {}, }, activeCursor: () => {}, }, diff --git a/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts b/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts index 8e9eb4b689541..40d3d68379094 100644 --- a/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts +++ b/x-pack/plugins/profiling/public/hooks/use_profiling_charts_theme.ts @@ -4,11 +4,10 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { RecursivePartial, Theme } from '@elastic/charts'; -import { merge } from 'lodash'; +import { PartialTheme } from '@elastic/charts'; import { useProfilingDependencies } from '../components/contexts/profiling_dependencies/use_profiling_dependencies'; -const profilingTheme: RecursivePartial = { +const profilingThemeOverrides: PartialTheme = { barSeriesStyle: { rectBorder: { strokeOpacity: 1, @@ -38,10 +37,9 @@ export function useProfilingChartsTheme() { } = useProfilingDependencies(); const chartsBaseTheme = charts.theme.useChartsBaseTheme(); - const chartsTheme = charts.theme.useChartsTheme(); return { chartsBaseTheme, - chartsTheme: merge({}, chartsTheme, profilingTheme), + chartsTheme: profilingThemeOverrides, }; } diff --git a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx index c16d3dd0bdb55..c8996d9fcaa4b 100644 --- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx +++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx @@ -18,6 +18,7 @@ import { ScaleType, Settings, niceTimeFormatter, + PartialTheme, } from '@elastic/charts'; import moment from 'moment-timezone'; import { @@ -41,7 +42,7 @@ import { } from './index_threshold_api'; import { IndexThresholdRuleParams } from './types'; -const customTheme = () => { +const chartThemeOverrides = (): PartialTheme => { return { lineSeriesStyle: { line: { @@ -182,7 +183,6 @@ export const ThresholdVisualization: React.FunctionComponent = ({ if (!charts || !uiSettings || !dataFieldsFormats) { return null; } - const chartsTheme = charts.theme.useChartsTheme(); const chartsBaseTheme = charts.theme.useChartsBaseTheme(); const domain = getDomain(alertInterval, startVisualizationAt); @@ -265,7 +265,7 @@ export const ThresholdVisualization: React.FunctionComponent = ({ {alertVisualizationDataKeys.length ? ( { +const customTheme = (): PartialTheme => { return { lineSeriesStyle: { line: { @@ -90,7 +91,7 @@ const getTimeBuckets = (watch: any, timeBuckets: any) => { export const WatchVisualization = () => { const { createTimeBuckets, theme, uiSettings } = useAppContext(); const { watch } = useContext(WatchContext); - const chartsTheme = theme.useChartsTheme(); + const chartBaseTheme = theme.useChartsBaseTheme(); const { index, timeField, @@ -216,7 +217,8 @@ export const WatchVisualization = () => { {watchVisualizationDataKeys.length ? ( Date: Tue, 14 Nov 2023 03:18:16 +0000 Subject: [PATCH 24/84] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../public/components/heatmap_component.tsx | 7 ++----- .../components/partition_vis_component.tsx | 9 +++++++- .../views/timeseries/utils/theme.test.ts | 4 +++- .../distribution/index.tsx | 6 +----- .../analytics/components/analytics_chart.tsx | 5 +---- .../single_metric_sparkline.tsx | 13 +++++++++--- .../memory_usage/memory_tree_map/tree_map.tsx | 5 +---- .../metrics/metric_with_sparkline.tsx | 21 ++++++++++++++----- 8 files changed, 42 insertions(+), 28 deletions(-) diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index c17c6cf94969c..96d0b23cac0bc 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -546,11 +546,8 @@ export const HeatmapComponent: FC = memo( grid: { stroke: { width: - args.gridConfig.strokeWidth ?? - chartBaseTheme.axes.gridLine.horizontal.strokeWidth, - color: - args.gridConfig.strokeColor ?? - chartBaseTheme.axes.gridLine.horizontal.stroke, + args.gridConfig.strokeWidth ?? chartBaseTheme.axes.gridLine.horizontal.strokeWidth, + color: args.gridConfig.strokeColor ?? chartBaseTheme.axes.gridLine.horizontal.stroke, }, }, cell: { diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx index 707b0629a26ec..fb2e56771c2e7 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx @@ -381,7 +381,14 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => { rescaleFactor, hasOpenedOnAggBasedEditor ), - [visType, visParams, chartBaseTheme, containerDimensions, rescaleFactor, hasOpenedOnAggBasedEditor] + [ + visType, + visParams, + chartBaseTheme, + containerDimensions, + rescaleFactor, + hasOpenedOnAggBasedEditor, + ] ); const fixedViewPort = document.getElementById('app-fixed-viewport'); diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts index 489b5c6c14510..8983d76eca15b 100644 --- a/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts +++ b/src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/utils/theme.test.ts @@ -25,7 +25,9 @@ describe('TSVB theme', () => { expect(getBaseTheme(LEGACY_LIGHT_THEME, 'red').axes.axisTitle.fill).toEqual('rgb(23,23,23)'); // violet increased the text color to full white for higer contrast - expect(getBaseTheme(LEGACY_LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual('rgb(255,255,255)'); + expect(getBaseTheme(LEGACY_LIGHT_THEME, '#ba26ff').axes.axisTitle.fill).toEqual( + 'rgb(255,255,255)' + ); // light yellow, prefer the LEGACY_LIGHT_THEME fill color because already with a good contrast expect(getBaseTheme(LEGACY_LIGHT_THEME, '#fff49f').axes.axisTitle.fill).toEqual('#333'); diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx index 3d451cf485393..b79f30505e5db 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx @@ -99,11 +99,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { showLegend showLegendExtra legendPosition={Position.Bottom} - theme={ - theme.darkMode - ? DARK_THEME - : LIGHT_THEME - } + theme={theme.darkMode ? DARK_THEME : LIGHT_THEME} locale={i18n.getLocale()} /> = ({ height = 300, lines }) => { return ( moment(tooltip.value).format(TOOLTIP_DATE_FORMAT)} /> - + {lines.map(({ id, data, isDashed }) => ( = ({ node, type, height }) => { } = useMlKibana(); const isDarkTheme = useIsDarkTheme(themeService); - const baseTheme = useMemo( - () => isDarkTheme ? DARK_THEME : LIGHT_THEME, - [isDarkTheme] - ); + const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]); const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures(); diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx index 5404b08bed376..3e4b0476b5075 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx @@ -5,13 +5,19 @@ * 2.0. */ -import { Chart, Settings, AreaSeries, TooltipType, Tooltip, LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { + Chart, + Settings, + AreaSeries, + TooltipType, + Tooltip, + LIGHT_THEME, + DARK_THEME, +} from '@elastic/charts'; import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiTextColor } from '@elastic/eui'; import React, { useContext } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { - EUI_SPARKLINE_THEME_PARTIAL, -} from '@elastic/eui/dist/eui_charts_theme'; +import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeContext } from 'styled-components'; import { i18n } from '@kbn/i18n'; @@ -49,7 +55,12 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }: - + Date: Tue, 14 Nov 2023 06:53:50 -0700 Subject: [PATCH 25/84] workspace prompt screens are always full --- .../workspace_panel/workspace_panel.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 5c2051a27354f..7d600e5e6eb55 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -421,9 +421,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ } }, [expressionExists, localState.expressionToRender]); - const [dimensionDisplayOptions, setDimensionOptions] = useState< - ChartDimensionOptions | undefined - >(); + const [dimensionOptions, setDimensionOptions] = useState(); const onEvent = useCallback( (event: ExpressionRendererEvent) => { @@ -496,6 +494,10 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ const IS_DARK_THEME: boolean = useObservable(core.theme.theme$, { darkMode: false }).darkMode; const renderDragDropPrompt = () => { + if (dimensionOptions) { + setDimensionOptions(undefined); + } + return ( { + if (dimensionOptions) { + setDimensionOptions(undefined); + } + const applyChangesString = i18n.translate('xpack.lens.editorFrame.applyChanges', { defaultMessage: 'Apply changes', }); @@ -665,7 +671,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ isFullscreen={isFullscreen} lensInspector={lensInspector} getUserMessages={getUserMessages} - displayOptions={dimensionDisplayOptions} + displayOptions={dimensionOptions} > {renderWorkspace()} From 430906e31f0cbb4f535cb435a31363008a5617ef Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 14 Nov 2023 14:03:54 +0000 Subject: [PATCH 26/84] [CI] Auto-commit changed files from 'node scripts/lint_ts_projects --fix' --- x-pack/plugins/maps/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/maps/tsconfig.json b/x-pack/plugins/maps/tsconfig.json index 364a6d24473d6..a2351978d5607 100644 --- a/x-pack/plugins/maps/tsconfig.json +++ b/x-pack/plugins/maps/tsconfig.json @@ -74,6 +74,7 @@ "@kbn/content-management-table-list-view", "@kbn/serverless", "@kbn/logging", + "@kbn/chart-expressions-common", ], "exclude": [ "target/**/*", From b1bbf6433f9d2a4efb38d96cfeb88047f54ae96c Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 14 Nov 2023 08:47:54 -0700 Subject: [PATCH 27/84] chore: remove theme from charts theme service --- .../charts/public/services/theme/README.md | 29 ++----- .../charts/public/services/theme/mock.ts | 10 +-- .../public/services/theme/theme.test.tsx | 80 ------------------- .../charts/public/services/theme/theme.ts | 28 +------ 4 files changed, 11 insertions(+), 136 deletions(-) diff --git a/src/plugins/charts/public/services/theme/README.md b/src/plugins/charts/public/services/theme/README.md index fb4f941f79344..eca74a14019aa 100644 --- a/src/plugins/charts/public/services/theme/README.md +++ b/src/plugins/charts/public/services/theme/README.md @@ -8,11 +8,7 @@ The `theme` service offers utilities to interact with the kibana theme. EUI prov Default `baseTheme` from `@elastic/charts` (i.e. light). -## `chartsDefaultTheme` - -Default `theme` from `@elastic/eui` (i.e. light). - -## `useChartsTheme` and `useChartsBaseTheme` +## `useChartsBaseTheme` A **React hook** for simple fetching of the correct EUI `theme` and `baseTheme`. @@ -23,7 +19,7 @@ import { Chart, Settings } from '@elastic/charts'; export const YourComponent = () => ( {/* ... */} @@ -31,20 +27,18 @@ export const YourComponent = () => ( ); ``` -## `chartsTheme$` and `chartsBaseTheme$` +## `chartsBaseTheme$` An **`Observable`** of the current charts `theme` and `baseTheme`. Use this implementation for more flexible updates to the chart theme without full page refreshes. ```tsx import { npStart } from 'ui/new_platform'; -import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes'; import { Subscription, combineLatest } from 'rxjs'; import { Chart, Settings, Theme } from '@elastic/charts'; interface YourComponentProps {}; interface YourComponentState { - chartsTheme: EuiChartThemeType['theme']; chartsBaseTheme: Theme; } @@ -52,16 +46,14 @@ export class YourComponent extends Component - this.setState({ chartsTheme, chartsBaseTheme }) + ).subscribe(([chartsBaseTheme]) => + this.setState({ chartsBaseTheme }) ); } @@ -72,21 +64,14 @@ export class YourComponent extends Component - + {/* ... */} ); } } ``` - -## Why have `theme` and `baseTheme`? - -The `theme` prop is a recursive partial `Theme` that overrides properties from the `baseTheme`. This allows changes to the `Theme` TS type in `@elastic/charts` without having to update the `@elastic/eui` themes for every ``. diff --git a/src/plugins/charts/public/services/theme/mock.ts b/src/plugins/charts/public/services/theme/mock.ts index ec5d00508c510..d41f9f20dd382 100644 --- a/src/plugins/charts/public/services/theme/mock.ts +++ b/src/plugins/charts/public/services/theme/mock.ts @@ -6,14 +6,11 @@ * Side Public License, v 1. */ -import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { LIGHT_THEME } from '@elastic/charts'; import { ThemeService } from './theme'; export const themeServiceMock: ThemeService = { - chartsDefaultTheme: EUI_CHARTS_THEME_LIGHT.theme, - chartsTheme$: jest.fn(() => ({ - subscribe: jest.fn(), - })), + chartsDefaultBaseTheme: LIGHT_THEME, chartsBaseTheme$: jest.fn(() => ({ subscribe: jest.fn(), })), @@ -21,6 +18,5 @@ export const themeServiceMock: ThemeService = { subscribe: jest.fn(), })), useDarkMode: jest.fn().mockReturnValue(false), - useChartsTheme: jest.fn().mockReturnValue({}), - useChartsBaseTheme: jest.fn().mockReturnValue({}), + useChartsBaseTheme: jest.fn().mockReturnValue(LIGHT_THEME), } as any; diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx index d13050d0a506f..d71d2beda6bb0 100644 --- a/src/plugins/charts/public/services/theme/theme.test.tsx +++ b/src/plugins/charts/public/services/theme/theme.test.tsx @@ -13,7 +13,6 @@ import { renderHook, act } from '@testing-library/react-hooks'; import { render, act as renderAct } from '@testing-library/react'; import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { ThemeService } from './theme'; import { coreMock } from '@kbn/core/public/mocks'; @@ -51,31 +50,6 @@ describe('ThemeService', () => { }); }); - describe('chartsTheme$', () => { - it('returns the light theme when not in dark mode', async () => { - setUpMockTheme.theme$ = createTheme$Mock(false); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( - EUI_CHARTS_THEME_LIGHT.theme - ); - }); - - describe('in dark mode', () => { - it(`returns the dark theme`, async () => { - // Fake dark theme turned returning true - setUpMockTheme.theme$ = createTheme$Mock(true); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( - EUI_CHARTS_THEME_DARK.theme - ); - }); - }); - }); - describe('chartsBaseTheme$', () => { it('returns the light theme when not in dark mode', async () => { setUpMockTheme.theme$ = createTheme$Mock(false); @@ -98,60 +72,6 @@ describe('ThemeService', () => { }); }); - describe('useChartsTheme', () => { - it('updates when the user profile settings change', () => { - setUpMockTheme.theme$ = createTheme$Mock(false); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - const { useChartsTheme } = themeService; - - const { result } = renderHook(() => useChartsTheme()); - expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); - - act(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - expect(result.current).toBe(EUI_CHARTS_THEME_DARK.theme); - act(() => { - setUpMockTheme.theme$ = createTheme$Mock(false); - themeService.init(setUpMockTheme); - }); - expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); - }); - - it('should not rerender when emitting the same value', () => { - setUpMockTheme.theme$ = createTheme$Mock(false); - const themeService = new ThemeService(); - themeService.init(setUpMockTheme); - const { useChartsTheme } = themeService; - - const renderCounter = jest.fn(); - const Wrapper = () => { - useChartsTheme(); - renderCounter(); - return null; - }; - - render(); - expect(renderCounter).toHaveBeenCalledTimes(1); - renderAct(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - expect(renderCounter).toHaveBeenCalledTimes(2); - renderAct(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - renderAct(() => { - setUpMockTheme.theme$ = createTheme$Mock(true); - themeService.init(setUpMockTheme); - }); - expect(renderCounter).toHaveBeenCalledTimes(2); - }); - }); - describe('useBaseChartTheme', () => { it('updates when the theme setting change', () => { setUpMockTheme.theme$ = createTheme$Mock(false); diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index dff300a02aa8a..c155bbb93702b 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -10,21 +10,15 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup, CoreTheme } from '@kbn/core/public'; -import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; export class ThemeService { /** Returns default charts theme */ - public readonly chartsDefaultTheme = EUI_CHARTS_THEME_LIGHT.theme; public readonly chartsDefaultBaseTheme = LIGHT_THEME; private theme$?: Observable; - private _chartsTheme$ = new BehaviorSubject(this.chartsDefaultTheme); private _chartsBaseTheme$ = new BehaviorSubject(this.chartsDefaultBaseTheme); - /** An observable of the current charts theme */ - public chartsTheme$ = this._chartsTheme$.asObservable(); - /** An observable of the current charts base theme */ public chartsBaseTheme$ = this._chartsBaseTheme$.asObservable(); @@ -51,24 +45,6 @@ export class ThemeService { return value; }; - /** A React hook for consuming the charts theme */ - public useChartsTheme = (): PartialTheme => { - const [value, update] = useState(this._chartsTheme$.getValue()); - const ref = useRef(value); - - useEffect(() => { - const s = this.chartsTheme$.subscribe((val) => { - if (val !== ref.current) { - ref.current = val; - update(val); - } - }); - return () => s.unsubscribe(); - }, []); - - return value; - }; - /** A React hook for consuming the charts theme */ public useChartsBaseTheme = (): Theme => { const [value, update] = useState(this._chartsBaseTheme$.getValue()); @@ -91,8 +67,6 @@ export class ThemeService { public init(theme: CoreSetup['theme']) { this.theme$ = theme.theme$; this.theme$.subscribe(({ darkMode }) => { - const selectedTheme = darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - this._chartsTheme$.next(selectedTheme); this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME); }); } From 8c7eec54f926eed5196704215fb912c7fde5aa48 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 14 Nov 2023 08:48:31 -0700 Subject: [PATCH 28/84] fix: type and test errors --- .../application/contexts/kibana/__mocks__/kibana_context.ts | 4 ++++ .../components/alert_summary_widget_compact.tsx | 2 +- .../components/alert_summary_widget_full_size.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts index 013b4a1717e7b..c4831b223ee99 100644 --- a/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts +++ b/x-pack/plugins/ml/public/application/contexts/kibana/__mocks__/kibana_context.ts @@ -10,8 +10,12 @@ import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks' import { BehaviorSubject } from 'rxjs'; import { mlApiServicesMock } from '../../../services/__mocks__/ml_api_services'; import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks'; +import { LIGHT_THEME } from '@elastic/charts'; export const chartsServiceMock = { + theme: { + useChartsBaseTheme: jest.fn(() => LIGHT_THEME), + }, activeCursor: { activeCursor$: new BehaviorSubject({ cursor: { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx index ec4e91de1e9a3..2f53ada96bca6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx @@ -43,7 +43,7 @@ export const AlertSummaryWidgetCompact = ({ onClick, }: AlertSummaryWidgetCompactProps) => { const chartTheme = [ - theme, + ...(theme ? [theme] : []), EUI_SPARKLINE_THEME_PARTIAL, { chartMargins: { diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx index 9638fd6900794..3f2b5a111566b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx @@ -41,7 +41,7 @@ export const AlertSummaryWidgetFullSize = ({ hideChart, }: AlertSummaryWidgetFullSizeProps) => { const chartTheme = [ - theme, + ...(theme ? [theme] : []), { chartPaddings: { top: 7, From dbf047ce9256494a8e8fd4550f1d674ca3ffb559 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 15 Nov 2023 08:42:00 -0700 Subject: [PATCH 29/84] fix bad chart margins in xy expression renderer --- .../expression_xy/public/components/xy_chart.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 4f994fde9f455..9e89468e08019 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -30,6 +30,7 @@ import { Tooltip, XYChartSeriesIdentifier, SettingsProps, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -807,7 +808,8 @@ export function XYChart({ }, // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { - ...chartBaseTheme.chartPaddings, + // Temporary margin defaults + ...LEGACY_LIGHT_THEME.chartMargins, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, From e43fe2d49de7c93e608a1bffc29b82e95078582f Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 15 Nov 2023 08:56:05 -0700 Subject: [PATCH 30/84] use max of old outsideDimensions --- .../expression_xy/public/components/xy_chart.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 9e89468e08019..ce199a5ba580d 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -102,6 +102,7 @@ import { Annotations, getAnnotationsGroupedByInterval, isRangeAnnotation, + OUTSIDE_RECT_ANNOTATION_WIDTH, OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION, } from './annotations'; import { AxisExtentModes, SeriesTypes, ValueLabelModes, XScaleTypes } from '../../common/constants'; @@ -993,9 +994,9 @@ export function XYChart({ rangeAnnotations.length && shouldHideDetails ? OUTSIDE_RECT_ANNOTATION_WIDTH_SUGGESTION : shouldUseNewTimeAxis - ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding || 0) + + ? Number(MULTILAYER_TIME_AXIS_STYLE.tickLine?.padding ?? 0) + chartBaseTheme.axes.tickLabel.fontSize - : chartBaseTheme.axes.tickLine.size + : Math.max(chartBaseTheme.axes.tickLine.size, OUTSIDE_RECT_ANNOTATION_WIDTH) } /> ) : null} From 3e7bf25294e4e912d66c468e242e79d2a525e308 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 15 Nov 2023 10:59:07 -0700 Subject: [PATCH 31/84] verify and update screenshot changes --- .../gauge_component.test.tsx.snap | 509 +- .../partition_vis_component.test.tsx.snap | 3188 +++++++++- .../__snapshots__/xy_chart.test.tsx.snap | 5152 ++++++++++++++++- .../__snapshots__/donut_chart.test.tsx.snap | 360 +- 4 files changed, 8835 insertions(+), 374 deletions(-) diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index 17eb7b358bb47..7b42fb3275714 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -6,7 +6,513 @@ exports[`GaugeComponent renders the chart 1`] = ` > diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 451f25f93f9e2..2ce521981866d 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -236,7 +236,513 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` /> - } - onElementClick={[Function]} - onRenderChange={[Function]} - showLegend={true} - theme={ - Array [ - Object { - "background": Object { - "color": "transparent", + baseTheme={ + Object { + "arcSeriesStyle": Object { + "arc": Object { + "opacity": 1, + "stroke": "black", + "strokeWidth": 1, + "visible": true, }, }, - Object { - "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "areaSeriesStyle": Object { + "area": Object { + "opacity": 0.3, + "visible": true, }, - "partition": Object { - "circlePadding": 4, - "emptySizeRatio": 0, - "fontFamily": undefined, - "linkLabel": Object { - "fontSize": 11, - "maxCount": 5, - "maxTextLength": 100, - "textColor": undefined, + "fit": Object { + "area": Object { + "fill": "__use__series__color__", + "opacity": 0.15, + "visible": true, + }, + "line": Object { + "dash": Array [ + 5, + 5, + ], + "opacity": 1, + "stroke": "__use__series__color__", + "visible": true, }, - "maxFontSize": 16, - "minFontSize": 10, - "outerSizeRatio": undefined, - "sectorLineStroke": undefined, - "sectorLineWidth": 1.5, + }, + "isolatedPoint": Object { + "fill": "white", + "opacity": 1, + "radius": 2, + "stroke": "__use__series__color__", + "strokeWidth": 1, + "visible": true, + }, + "line": Object { + "opacity": 1, + "strokeWidth": 2, + "visible": true, + }, + "point": Object { + "fill": "#FFF", + "opacity": 1, + "radius": 3, + "stroke": "__use__series__color__", + "strokeWidth": 2, + "visible": false, }, }, - Object {}, - Object { - "legend": Object { - "labelOptions": Object { - "maxLines": 1, + "axes": Object { + "axisLine": Object { + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + "axisPanelTitle": Object { + "fill": "#333", + "fontFamily": "sans-serif", + "fontSize": 10, + "padding": Object { + "inner": 8, + "outer": 0, + }, + "visible": true, + }, + "axisTitle": Object { + "fill": "#343741", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 12, + "padding": Object { + "inner": 10, + "outer": 0, + }, + "visible": true, + }, + "gridLine": Object { + "horizontal": Object { + "dash": Array [ + 0, + 0, + ], + "opacity": 1, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + "lumaSteps": Array [ + 224, + 184, + 128, + 96, + 64, + 32, + 16, + 8, + 4, + 2, + 1, + 0, + 0, + 0, + 0, + 0, + ], + "vertical": Object { + "dash": Array [ + 4, + 4, + ], + "opacity": 1, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + }, + "tickLabel": Object { + "alignment": Object { + "horizontal": "near", + "vertical": "near", }, + "fill": "#646a77", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, + "fontStyle": "normal", + "offset": Object { + "reference": "local", + "x": 0, + "y": 0, + }, + "padding": Object { + "inner": 10, + "outer": 8, + }, + "rotation": 0, + "visible": true, + }, + "tickLine": Object { + "padding": 10, + "size": 10, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": false, }, }, - Object {}, - ] - } - /> - + } + onElementClick={[Function]} + onRenderChange={[Function]} + showLegend={true} + theme={ + Array [ + Object { + "background": Object { + "color": "transparent", + }, + }, + Object { + "chartMargins": Object { + "bottom": 0, + "left": 0, + "right": 0, + "top": 0, + }, + "partition": Object { + "circlePadding": 4, + "emptySizeRatio": 0, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "linkLabel": Object { + "fontSize": 11, + "maxCount": 5, + "maxTextLength": 100, + "textColor": "#343741", + }, + "maxFontSize": 16, + "minFontSize": 10, + "outerSizeRatio": undefined, + "sectorLineStroke": "#FFF", + "sectorLineWidth": 1.5, + }, + }, + Object { + "legend": Object { + "labelOptions": Object { + "maxLines": 1, + }, + }, + }, + Object {}, + ] + } + /> + From 47c3f05d5b314814b42c55d52b3901fd819ed055 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 16 Nov 2023 07:22:54 -0700 Subject: [PATCH 32/84] fix fn tests due to metric changes part 1 --- .../functional/apps/lens/group6/metric.ts | 30 +++++++++++----- .../apps/lens/open_in_lens/agg_based/goal.ts | 36 ++++++++++++++----- .../lens/open_in_lens/agg_based/metric.ts | 36 ++++++++++++++----- .../test/functional/page_objects/lens_page.ts | 15 ++++++-- 4 files changed, 87 insertions(+), 30 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index c2276e1cdf5ab..60d6c593ad484 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,7 +127,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -136,7 +138,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -145,7 +149,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -154,7 +160,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -163,7 +171,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -172,7 +182,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: true, showingBar: false, }, @@ -270,7 +282,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ color }) => color)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); + expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); }); const expectedDynamicColors = [ @@ -288,7 +300,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ color }) => color)).to.eql(expectedDynamicColors); + expect(data.map(({ trendlineColor }) => trendlineColor)).to.eql(expectedDynamicColors); }); it('converts color stops to number', async () => { @@ -303,7 +315,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); expect( - (await PageObjects.lens.getMetricVisualizationData()).map(({ color }) => color) + (await PageObjects.lens.getMetricVisualizationData()).map(({ trendlineColor }) => trendlineColor) ).to.eql(expectedDynamicColors); // colors shouldn't change await PageObjects.lens.closePaletteEditor(); diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index 78d0e220c61bd..3dc37db5ff2cc 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -48,7 +48,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '140.05%', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -79,7 +81,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '131,040,360.81%', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -110,7 +114,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14.37%', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -153,7 +159,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,047,486.03', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -162,7 +170,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '66,144,823.35', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -171,7 +181,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,933,477.76', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -180,7 +192,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,157,898.23', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -189,7 +203,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,365,950.93', - color: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, @@ -198,7 +214,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(0, 0, 0, 0)', + foregroundColor: 'rgba(0, 0, 0, 0)', + trendlineColor: undefined, showingBar: true, showingTrendline: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index af22bc8408de3..0b5b1d89b40b2 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -49,7 +49,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14,005', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -79,7 +81,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '13,104,036,080.615', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -109,7 +113,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '1,437', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -163,7 +169,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,228,964,670.613', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -172,7 +180,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,186,695,551.251', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -181,7 +191,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,073,190,186.423', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -190,7 +202,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,031,579,645.108', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -199,7 +213,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,009,497,206.823', - color: 'rgba(245, 247, 250, 1)', + foregroundColor: 'rgba(245, 247, 250, 1)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, @@ -208,7 +224,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + foregroundColor: 'rgba(0, 0, 0, 0)', + backgroundColor: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingBar: false, showingTrendline: false, }, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 45b451721b2cd..21d408673573d 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1332,6 +1332,11 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getMetricTiles() { return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, + async getChartBackground(): Promise { + return await ( + await findService.byCssSelector('[data-test-subj="mtrVis"] .echChart .echChartBackground') + )?.getComputedStyle('background-color') + }, async getMetricElementIfExists(selector: string, container: WebElementWrapper) { return (await findService.descendantExistsByCssSelector(selector, container)) @@ -1351,25 +1356,29 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont value: await ( await this.getMetricElementIfExists('.echMetricText__value', tile) )?.getVisibleText(), - color: await ( + foregroundColor: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), + trendlineColor: await( + await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile) + )?.getAttribute('fill'), showingTrendline: Boolean( await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) ), - }; + }; }, async getMetricVisualizationData() { const tiles = await this.getMetricTiles(); const showingBar = Boolean(await findService.existsByCssSelector('.echSingleMetricProgress')); + const backgroundColor = await this.getChartBackground(); const metricDataPromises = []; for (const tile of tiles) { metricDataPromises.push(this.getMetricDatum(tile)); } const metricData = await Promise.all(metricDataPromises); - return metricData.map((d) => ({ ...d, showingBar })); + return metricData.map((d) => ({ ...d, showingBar, backgroundColor })); }, /** From 3b5d884d108c8e3b5bd11cdc6b2fb14ae11bbc50 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 16 Nov 2023 15:10:08 +0000 Subject: [PATCH 33/84] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- x-pack/test/functional/apps/lens/group6/metric.ts | 8 ++++++-- x-pack/test/functional/page_objects/lens_page.ts | 8 ++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index 60d6c593ad484..54bb44353e8ab 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -282,7 +282,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); + expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql( + new Array(6).fill('rgba(0, 0, 0, 1)') + ); }); const expectedDynamicColors = [ @@ -315,7 +317,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); expect( - (await PageObjects.lens.getMetricVisualizationData()).map(({ trendlineColor }) => trendlineColor) + (await PageObjects.lens.getMetricVisualizationData()).map( + ({ trendlineColor }) => trendlineColor + ) ).to.eql(expectedDynamicColors); // colors shouldn't change await PageObjects.lens.closePaletteEditor(); diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 21d408673573d..8a4cf7bbe0e2c 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1335,7 +1335,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getChartBackground(): Promise { return await ( await findService.byCssSelector('[data-test-subj="mtrVis"] .echChart .echChartBackground') - )?.getComputedStyle('background-color') + )?.getComputedStyle('background-color'); }, async getMetricElementIfExists(selector: string, container: WebElementWrapper) { @@ -1359,13 +1359,13 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont foregroundColor: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), - trendlineColor: await( + trendlineColor: await ( await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile) - )?.getAttribute('fill'), + )?.getAttribute('fill'), showingTrendline: Boolean( await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) ), - }; + }; }, async getMetricVisualizationData() { From cd8ca2facf7be7f206a4dc3443ba42d15a2ebb47 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sun, 19 Nov 2023 22:16:27 -0700 Subject: [PATCH 34/84] fix metric empty background color --- package.json | 2 +- .../expression_metric/public/components/metric_vis.tsx | 1 + yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index d4044cda5b796..fd3b2a74a6f6a 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.0", + "@elastic/charts": "61.0.1", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index ecf0f2535925e..b8e5d1862e007 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -328,6 +328,7 @@ export const MetricVis = ({ background: { color: defaultColor }, metric: { barBackground: euiThemeVars.euiColorLightShade, + emptyBackground: euiThemeVars.euiColorEmptyShade, }, }, ...(Array.isArray(settingsThemeOverrides) diff --git a/yarn.lock b/yarn.lock index fd5efdc4ee695..35a808982c31f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.0": - version "61.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.0.tgz#8303fb9617b26f95cec731f03cd259da03cce404" - integrity sha512-iqU+I8LXLChZu+c/xs5c4QAQIUZRElYvlSgQaTYX0QyL0UsyYzTw3IHQVwTM0okbYKk0nTY+iBDaM3UUwgODCg== +"@elastic/charts@61.0.1": + version "61.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.1.tgz#7384c6797a9e5638346e1b335ac1cfe613c7fc32" + integrity sha512-Npb7H/AmFriPG5ZtKo4BJ1THLKLLaRy3CWIHs7sszvh6gpZhTV4/q8vF7AxR08WlHtyRcobGylykPzrY0U97eA== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From e31fb5f57cf753b3c1c042d81720f5f899ce031f Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 20 Nov 2023 20:55:16 -0700 Subject: [PATCH 35/84] update charts with changes to background colors --- package.json | 2 +- .../public/components/metric_vis.tsx | 1 + .../metric/dimension_editor.tsx | 2 +- .../lens/group3/dashboard_inline_editing.ts | 1 + .../functional/apps/lens/group6/metric.ts | 28 ++++++------------- .../lens/open_in_lens/agg_based/metric.ts | 27 ++++++------------ .../test/functional/page_objects/lens_page.ts | 10 ++----- yarn.lock | 8 +++--- 8 files changed, 28 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index fd3b2a74a6f6a..fbb1dd1c27147 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.1", + "@elastic/charts": "61.0.2", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index b8e5d1862e007..ba3ef124d7ed2 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -329,6 +329,7 @@ export const MetricVis = ({ metric: { barBackground: euiThemeVars.euiColorLightShade, emptyBackground: euiThemeVars.euiColorEmptyShade, + blendingBackground: euiThemeVars.euiColorEmptyShade, }, }, ...(Array.isArray(settingsThemeOverrides) diff --git a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx index c84fa45834fa0..6e71d21519231 100644 --- a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx +++ b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx @@ -446,7 +446,7 @@ function StaticColorControls({ onChange={(color: string) => handleColorChange(color)} color={currentColor} aria-label={colorLabel} - showAlpha={false} + showAlpha swatches={euiPaletteColorBlind()} /> diff --git a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts index da5858e0ffc1d..be052791dd5bf 100644 --- a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts +++ b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts @@ -73,6 +73,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { extraText: 'Maximum of bytes 19,986', value: '5,727.322', color: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: false, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index 54bb44353e8ab..0f12b8d6c2da3 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,8 +127,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -138,8 +137,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -149,8 +147,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -160,8 +157,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -171,8 +167,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -182,8 +177,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingTrendline: true, showingBar: false, @@ -282,9 +276,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ trendlineColor }) => trendlineColor)).to.be.eql( - new Array(6).fill('rgba(0, 0, 0, 1)') - ); + expect(data.map(({ color }) => color)).to.be.eql(new Array(6).fill('rgba(0, 0, 0, 1)')); }); const expectedDynamicColors = [ @@ -302,7 +294,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); const data = await PageObjects.lens.getMetricVisualizationData(); - expect(data.map(({ trendlineColor }) => trendlineColor)).to.eql(expectedDynamicColors); + expect(data.map(({ color }) => color)).to.eql(expectedDynamicColors); }); it('converts color stops to number', async () => { @@ -317,9 +309,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.waitForVisualization('mtrVis'); expect( - (await PageObjects.lens.getMetricVisualizationData()).map( - ({ trendlineColor }) => trendlineColor - ) + (await PageObjects.lens.getMetricVisualizationData()).map(({ color }) => color) ).to.eql(expectedDynamicColors); // colors shouldn't change await PageObjects.lens.closePaletteEditor(); diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index 0b5b1d89b40b2..94616f6eda6f7 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -49,8 +49,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14,005', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -81,8 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '13,104,036,080.615', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -113,8 +111,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '1,437', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -169,8 +166,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,228,964,670.613', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -180,8 +176,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,186,695,551.251', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -191,8 +186,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,073,190,186.423', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -202,8 +196,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,031,579,645.108', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -213,8 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,009,497,206.823', - foregroundColor: 'rgba(245, 247, 250, 1)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -224,8 +216,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingBar: false, showingTrendline: false, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 8a4cf7bbe0e2c..20caacf7f3b45 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1332,11 +1332,6 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getMetricTiles() { return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, - async getChartBackground(): Promise { - return await ( - await findService.byCssSelector('[data-test-subj="mtrVis"] .echChart .echChartBackground') - )?.getComputedStyle('background-color'); - }, async getMetricElementIfExists(selector: string, container: WebElementWrapper) { return (await findService.descendantExistsByCssSelector(selector, container)) @@ -1356,7 +1351,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont value: await ( await this.getMetricElementIfExists('.echMetricText__value', tile) )?.getVisibleText(), - foregroundColor: await ( + color: await ( await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), trendlineColor: await ( @@ -1371,14 +1366,13 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getMetricVisualizationData() { const tiles = await this.getMetricTiles(); const showingBar = Boolean(await findService.existsByCssSelector('.echSingleMetricProgress')); - const backgroundColor = await this.getChartBackground(); const metricDataPromises = []; for (const tile of tiles) { metricDataPromises.push(this.getMetricDatum(tile)); } const metricData = await Promise.all(metricDataPromises); - return metricData.map((d) => ({ ...d, showingBar, backgroundColor })); + return metricData.map((d) => ({ ...d, showingBar })); }, /** diff --git a/yarn.lock b/yarn.lock index 35a808982c31f..8decb6d8d2c7a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1511,10 +1511,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.1": - version "61.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.1.tgz#7384c6797a9e5638346e1b335ac1cfe613c7fc32" - integrity sha512-Npb7H/AmFriPG5ZtKo4BJ1THLKLLaRy3CWIHs7sszvh6gpZhTV4/q8vF7AxR08WlHtyRcobGylykPzrY0U97eA== +"@elastic/charts@61.0.2": + version "61.0.2" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.2.tgz#612a2fa842b65844ca618a0fb0176c89a4167b42" + integrity sha512-WL/5lpEIbni65LYMSZc0Rao3ZJ93a+Iou7Ak9sogG5bDwp40Y1bQdkAeQl2JoYkNGqBMQFtyEZ0pPlZc6OVMnQ== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From 7eeab53efd0eee6e8aa2df0208353e8c9ed9f18a Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 22 Nov 2023 08:46:10 -0700 Subject: [PATCH 36/84] update merge errors and fix snapshots --- .../__snapshots__/gauge_component.test.tsx.snap | 1 + .../partition_vis_component.test.tsx.snap | 6 ++++++ .../components/__snapshots__/xy_chart.test.tsx.snap | 10 ++++++++++ src/plugins/charts/public/services/theme/theme.ts | 9 ++++++++- .../slo_details/components/events_chart_panel.tsx | 2 -- 5 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index 7b42fb3275714..afd6ce21ad36f 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -431,6 +431,7 @@ exports[`GaugeComponent renders the chart 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index 2ce521981866d..241e2ac6f4faf 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -661,6 +661,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -1563,6 +1564,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -2525,6 +2527,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -3489,6 +3492,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -4391,6 +4395,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -5248,6 +5253,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 250a2333792f2..912cf7256df89 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -1003,6 +1003,7 @@ exports[`XYChart component it renders area 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -2524,6 +2525,7 @@ exports[`XYChart component it renders bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -4045,6 +4047,7 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -5566,6 +5569,7 @@ exports[`XYChart component it renders line 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -7087,6 +7091,7 @@ exports[`XYChart component it renders stacked area 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -8608,6 +8613,7 @@ exports[`XYChart component it renders stacked bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -10129,6 +10135,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -11680,6 +11687,7 @@ exports[`XYChart component split chart should render split chart if both, splitR "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -13439,6 +13447,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { @@ -15191,6 +15200,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index c155bbb93702b..b8ee2301dbb82 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -10,7 +10,7 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup, CoreTheme } from '@kbn/core/public'; -import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts'; +import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; export class ThemeService { /** Returns default charts theme */ @@ -45,6 +45,13 @@ export class ThemeService { return value; }; + /** + * @deprecated No longer need to use theme on top of baseTheme, see https://github.com/elastic/kibana/pull/170914#issuecomment-1823014121 + */ + public useChartsTheme = (): PartialTheme => { + return {}; + }; + /** A React hook for consuming the charts theme */ public useChartsBaseTheme = (): Theme => { const [value, update] = useState(this._chartsBaseTheme$.getValue()); diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx index 10655cd98b121..fdb911c80c206 100644 --- a/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx +++ b/x-pack/plugins/observability/public/pages/slo_details/components/events_chart_panel.tsx @@ -46,7 +46,6 @@ export function EventsChartPanel({ slo, range }: Props) { const { charts, uiSettings } = useKibana().services; const { euiTheme } = useEuiTheme(); const { isLoading, data } = useGetPreviewData(true, slo.indicator, range); - const theme = charts.theme.useChartsTheme(); const baseTheme = charts.theme.useChartsBaseTheme(); const chartRef = useRef(null); const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, { @@ -88,7 +87,6 @@ export function EventsChartPanel({ slo, range }: Props) { showLegend showLegendExtra={false} legendPosition={Position.Left} - theme={[theme]} noResults={ } From 9ade84f9bb36631ec7ec17a3361bf0b122bab5e1 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 27 Nov 2023 14:58:17 -0700 Subject: [PATCH 37/84] functional test --- .../workspace_panel_wrapper.tsx | 1 + .../test/functional/apps/lens/group6/index.ts | 1 + .../apps/lens/group6/workspace_dimensions.ts | 75 +++++++++++++++++++ .../test/functional/page_objects/lens_page.ts | 10 +++ 4 files changed, 87 insertions(+) create mode 100644 x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 809990b24723e..f870e2f52b38a 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -241,6 +241,7 @@ export function WorkspacePanelWrapper({ css={{ height: '100%' }} > { + let originalWindowSize: { + height: number; + width: number; + x: number; + y: number; + }; + + before(async () => { + originalWindowSize = await browser.getWindowSize(); + await browser.setWindowSize(1200, 1000); + + await PageObjects.visualize.navigateToNewVisualization(); + await PageObjects.visualize.clickVisType('lens'); + await PageObjects.lens.goToTimeRange(); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', + operation: 'terms', + field: 'ip', + }); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension', + operation: 'average', + field: 'bytes', + }); + }); + + after(async () => { + await browser.setWindowSize(originalWindowSize.width, originalWindowSize.height); + }); + + it('adjusts dimension for various vis types', async () => { + while (visTypes.length) { + const vis = visTypes.pop()!; + await PageObjects.lens.switchToVisualization(vis.id, vis.searchText); + + const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + + expect(width).to.be(vis.expectedWidth); + expect(height).to.be(vis.expectedHeight); + } + }); + }); +} diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 927e8710017ee..4bcfdab64075f 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1929,5 +1929,15 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont await this.closeDimensionEditor(); }, + + async getWorkspaceVisContainerDimensions() { + const visContainer = await testSubjects.find('lnsWorkspacePanelWrapper__innerContent'); + const [width, height] = await Promise.all([ + visContainer.getComputedStyle('width'), + visContainer.getComputedStyle('height'), + ]); + + return { width, height }; + }, }); } From 9a7407b3ea937c2af74df407a6bb4574b7694efc Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 28 Nov 2023 10:24:18 -0700 Subject: [PATCH 38/84] augment functional test --- .../apps/lens/group6/workspace_dimensions.ts | 101 +++++++++++++----- 1 file changed, 75 insertions(+), 26 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index db9daea6929d5..ab6a7441a3650 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -8,24 +8,12 @@ import expect from '@kbn/expect'; import { FtrProviderContext } from '../../../ftr_provider_context'; -const visTypes = [ - { - id: 'bar', - searchText: '', - expectedWidth: '506px', - expectedHeight: '284.625px', - }, - { - id: 'bar_horizontal', - searchText: '', - expectedWidth: '265.5px', - expectedHeight: '472px', - }, -]; - export default function ({ getService, getPageObjects }: FtrProviderContext) { const PageObjects = getPageObjects(['visualize', 'lens', 'common']); const browser = getService('browser'); + const testSubjects = getService('testSubjects'); + const retry = getService('retry'); + const log = getService('log'); describe('lens workspace dimensions', () => { let originalWindowSize: { @@ -37,18 +25,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { before(async () => { originalWindowSize = await browser.getWindowSize(); - await browser.setWindowSize(1200, 1000); + await browser.setWindowSize(1600, 1200); await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickVisType('lens'); await PageObjects.lens.goToTimeRange(); - await PageObjects.lens.configureDimension({ - dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', - operation: 'terms', - field: 'ip', - }); - await PageObjects.lens.configureDimension({ dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension', operation: 'average', @@ -60,16 +42,83 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await browser.setWindowSize(originalWindowSize.width, originalWindowSize.height); }); - it('adjusts dimension for various vis types', async () => { + const assertWorkspaceDimensions = async (expectedWidth: string, expectedHeight: string) => { + const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + + expect(width).to.be(expectedWidth); + expect(height).to.be(expectedHeight); + }; + + it('adjusts dimension for various chart types', async () => { + const VERTICAL_16_9 = { expectedWidth: '864px', expectedHeight: '486px' }; + const HORIZONTAL_16_9 = { expectedWidth: '296.438px', expectedHeight: '527px' }; + const UNCONSTRAINED = { expectedWidth: '864px', expectedHeight: '527px' }; + + /** + * This list is specifically designed to test dimension transitions. + * + * I have attempted to order the vis types to maximize the number of transitions. + */ + const visTypes: Array<{ + expectedWidth: string; + expectedHeight: string; + id: string; + searchText?: string; + }> = [ + { id: 'lnsDatatable', ...UNCONSTRAINED }, + { id: 'line', ...VERTICAL_16_9 }, + { id: 'verticalBullet', searchText: 'gauge', ...UNCONSTRAINED }, + { id: 'bar_horizontal_percentage_stacked', searchText: 'bar', ...HORIZONTAL_16_9 }, + { id: 'lnsLegacyMetric', ...UNCONSTRAINED }, + { id: 'bar_horizontal_stacked', ...HORIZONTAL_16_9 }, + { id: 'donut', ...UNCONSTRAINED }, + { id: 'bar', ...VERTICAL_16_9 }, + { id: 'mosaic', ...UNCONSTRAINED }, + { id: 'bar_percentage_stacked', searchText: 'bar', ...VERTICAL_16_9 }, + { id: 'pie', ...UNCONSTRAINED }, + { id: 'bar_stacked', ...VERTICAL_16_9 }, + { id: 'lnsMetric', expectedWidth: '300px', expectedHeight: '300px' }, + { id: 'area', ...VERTICAL_16_9 }, + { id: 'treemap', ...UNCONSTRAINED }, + { id: 'area_percentage_stacked', searchText: 'area', ...VERTICAL_16_9 }, + { id: 'waffle', ...UNCONSTRAINED }, + { id: 'area_stacked', ...VERTICAL_16_9 }, + { id: 'horizontalBullet', searchText: 'gauge', ...UNCONSTRAINED }, + { id: 'bar_horizontal', ...HORIZONTAL_16_9 }, + // { id: 'heatmap', ...UNCONSTRAINED }, // heatmap blocks render unless it's given two dimensions. This stops the expression renderer from requesting new dimensions. + // { id: 'lnsChoropleth', ...UNCONSTRAINED }, // choropleth currently erases all dimensions + // { id: 'lnsTagcloud', ...UNCONSTRAINED }, // tag cloud currently erases all dimensions + ]; + while (visTypes.length) { const vis = visTypes.pop()!; await PageObjects.lens.switchToVisualization(vis.id, vis.searchText); - const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + log.debug(`Testing ${vis.id}... expecting ${vis.expectedWidth}x${vis.expectedHeight}`); - expect(width).to.be(vis.expectedWidth); - expect(height).to.be(vis.expectedHeight); + await assertWorkspaceDimensions(vis.expectedWidth, vis.expectedHeight); } }); + + it('metric dimensions', async () => { + await PageObjects.lens.switchToVisualization('lnsMetric'); + + await assertWorkspaceDimensions('300px', '300px'); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsMetric_breakdownByDimensionPanel > lns-empty-dimension', + operation: 'terms', + field: 'ip', + }); + + await assertWorkspaceDimensions('600px', '400px'); + + await PageObjects.lens.openDimensionEditor('lnsMetric_breakdownByDimensionPanel'); + await testSubjects.setValue('lnsMetric_max_cols', '2'); + + retry.try(async () => { + await assertWorkspaceDimensions('400px', '600px'); + }); + }); }); } From a05555b7a59c99bd8091615bc7d25e9559eb80b9 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 28 Nov 2023 11:21:02 -0700 Subject: [PATCH 39/84] fix aspect ratios in constrained-dimension case --- .../workspace_panel_wrapper.tsx | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index f870e2f52b38a..9d50b37a3bdb9 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -13,6 +13,7 @@ import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; import { ChartDimensionOptions } from '@kbn/chart-expressions-common'; import { ChartDimensionUnit } from '@kbn/chart-expressions-common/types'; +import { Interpolation, Theme } from '@emotion/react'; import { DatasourceMap, FramePublicAPI, @@ -51,6 +52,26 @@ export interface WorkspacePanelWrapperProps { displayOptions: ChartDimensionOptions | undefined; } +const unitToCSSUnit: Record = { + pixels: 'px', + percentage: '%', +}; + +const computeAspectRatioAndMaxDimensions = ({ x, y }: { x: number; y: number }) => { + return { + aspectRatio: `${x}/${y}`, + ...(y > x + ? { + height: '100%', + width: 'auto', + } + : { + height: 'auto', + width: '100%', + }), + }; +}; + export function VisualizationToolbar(props: { activeVisualization: Visualization | null; framePublicAPI: FramePublicAPI; @@ -117,31 +138,17 @@ export function WorkspacePanelWrapper({ const aspectRatio = displayOptions?.aspectRatio; const maxDimensions = displayOptions?.maxDimensions; - const unitToCSSUnit: Record = { - pixels: 'px', - percentage: '%', - }; + let visDimensionsCSS: Interpolation = {}; - const visDimensionsCSS = aspectRatio - ? { - aspectRatio: `${aspectRatio.x}/${aspectRatio.y}`, - ...(aspectRatio.y > aspectRatio.x - ? { - height: '100%', - width: 'auto', - } - : { - height: 'auto', - width: '100%', - }), - } - : maxDimensions - ? { - maxWidth: maxDimensions && `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`, - maxHeight: maxDimensions && `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`, - aspectRatio: maxDimensions.x && maxDimensions.y && `${maxDimensions.x}/${maxDimensions.y}`, - } - : {}; + if (aspectRatio) { + visDimensionsCSS = computeAspectRatioAndMaxDimensions(aspectRatio ?? maxDimensions); + } + + if (maxDimensions) { + visDimensionsCSS = computeAspectRatioAndMaxDimensions(aspectRatio ?? maxDimensions); + visDimensionsCSS.maxWidth = `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`; + visDimensionsCSS.maxHeight = `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`; + } return ( Date: Tue, 28 Nov 2023 11:21:28 -0700 Subject: [PATCH 40/84] constrain gauge dimensions --- .../expression_renderers/gauge_renderer.tsx | 13 +++++++++--- .../apps/lens/group6/workspace_dimensions.ts | 20 +++++++++++++++++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index dc70ab6791ce3..bc74ee5675402 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -74,9 +74,16 @@ export const gaugeRenderer: ( name: 'dimensions', data: { maxDimensions: { - x: 100, - y: 100, - unit: 'percentage', + unit: 'pixels', + ...(config.args.shape === GaugeShapes.HORIZONTAL_BULLET + ? { + x: 600, + y: 300, + } + : { + y: 600, + x: 300, + }), }, }, }; diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index ab6a7441a3650..6ee1924f13cb8 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -67,7 +67,18 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }> = [ { id: 'lnsDatatable', ...UNCONSTRAINED }, { id: 'line', ...VERTICAL_16_9 }, - { id: 'verticalBullet', searchText: 'gauge', ...UNCONSTRAINED }, + { + id: 'verticalBullet', + searchText: 'gauge', + // these dimensions are slightly below the requested 300x600 + // that is because the window size isn't large enough to fit the requested dimensions + // and the chart is forced to shrink. + // + // this is a good thing because it makes this a test case for aspect ratio preservation + // even when specific pixel dimensions are requested. + expectedWidth: '263.5px', + expectedHeight: '527px', + }, { id: 'bar_horizontal_percentage_stacked', searchText: 'bar', ...HORIZONTAL_16_9 }, { id: 'lnsLegacyMetric', ...UNCONSTRAINED }, { id: 'bar_horizontal_stacked', ...HORIZONTAL_16_9 }, @@ -83,7 +94,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { { id: 'area_percentage_stacked', searchText: 'area', ...VERTICAL_16_9 }, { id: 'waffle', ...UNCONSTRAINED }, { id: 'area_stacked', ...VERTICAL_16_9 }, - { id: 'horizontalBullet', searchText: 'gauge', ...UNCONSTRAINED }, + { + id: 'horizontalBullet', + searchText: 'gauge', + expectedWidth: '600px', + expectedHeight: '300px', + }, { id: 'bar_horizontal', ...HORIZONTAL_16_9 }, // { id: 'heatmap', ...UNCONSTRAINED }, // heatmap blocks render unless it's given two dimensions. This stops the expression renderer from requesting new dimensions. // { id: 'lnsChoropleth', ...UNCONSTRAINED }, // choropleth currently erases all dimensions From 2fca7694bb26a2a8219ab683756059a33e6b4cc6 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 28 Nov 2023 15:01:25 -0700 Subject: [PATCH 41/84] show veil for gauge --- .../common/dimension_transition_veil.tsx | 62 +++++++++++++++++++ src/plugins/chart_expressions/common/index.ts | 1 + .../common/types/expression_renderers.ts | 2 + .../public/components/gauge_component.tsx | 26 +++++++- .../expression_renderers/gauge_renderer.tsx | 26 +++----- .../public/components/xy_chart.tsx | 41 +++--------- 6 files changed, 105 insertions(+), 53 deletions(-) create mode 100644 src/plugins/chart_expressions/common/dimension_transition_veil.tsx diff --git a/src/plugins/chart_expressions/common/dimension_transition_veil.tsx b/src/plugins/chart_expressions/common/dimension_transition_veil.tsx new file mode 100644 index 0000000000000..63dbe70019ca0 --- /dev/null +++ b/src/plugins/chart_expressions/common/dimension_transition_veil.tsx @@ -0,0 +1,62 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { useCallback, useRef, useState } from 'react'; +import fastIsEqual from 'fast-deep-equal'; +import type { ChartDimensionOptions } from './types'; + +/** + * This hook is used to show a veil over the chart while it is being resized + * in response to a change in the container dimensions. + * + * It is only relevant if client dimensions are being requested based on chart configuration. + */ +export function useDimensionTransitionVeil( + dimensions: ChartDimensionOptions, + setDimensions: (d: ChartDimensionOptions) => void +) { + const [showVeil, setShowVeil] = useState(false); + const currentDimensions = useRef(); + + if (!fastIsEqual(dimensions, currentDimensions.current)) { + // If the dimensions have changed we request new dimensions from the client + // and set off a chain of events: + // + // 1. we show the veil to hide step 4 + // 2. the charts library will plan a render + // 3. the client will resize the container + // 4. the charts library will render the chart based on the original container dimensions + // 5. the charts library will resize the chart to the updated container dimensions + // 6. we hide the veil + + setDimensions(dimensions); + setShowVeil(true); + currentDimensions.current = dimensions; + } + + const onResize = useCallback(() => { + setShowVeil(false); + }, []); + + return { + veil: ( +
+ ), + onResize, + }; +} diff --git a/src/plugins/chart_expressions/common/index.ts b/src/plugins/chart_expressions/common/index.ts index 7207bc823d8a4..19eb396846e76 100644 --- a/src/plugins/chart_expressions/common/index.ts +++ b/src/plugins/chart_expressions/common/index.ts @@ -20,3 +20,4 @@ export type { } from './types'; export { isDimensionsEvent } from './types'; export { getColorCategories } from './color_categories'; +export { useDimensionTransitionVeil } from './dimension_transition_veil'; diff --git a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts index 1cdb5b464f3f5..df52d14ee1fe6 100644 --- a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts +++ b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts @@ -11,6 +11,7 @@ import type { PersistedState } from '@kbn/visualizations-plugin/public'; import type { ChartsPluginSetup } from '@kbn/charts-plugin/public'; import type { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common'; import type { AllowedSettingsOverrides, AllowedChartOverrides } from '@kbn/charts-plugin/common'; +import type { ChartDimensionOptions } from '@kbn/chart-expressions-common'; import type { AllowedGaugeOverrides, GaugeExpressionProps } from './expression_functions'; export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat; @@ -22,4 +23,5 @@ export type GaugeRenderProps = GaugeExpressionProps & { renderComplete: () => void; uiState: PersistedState; overrides?: AllowedGaugeOverrides & AllowedSettingsOverrides & AllowedChartOverrides; + setDimensions: (d: ChartDimensionOptions) => void; }; diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index ea8342462f05e..977870f39fab7 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -12,7 +12,11 @@ import type { PaletteOutput } from '@kbn/coloring'; import { FieldFormat } from '@kbn/field-formats-plugin/common'; import type { CustomPaletteState } from '@kbn/charts-plugin/public'; import { EmptyPlaceholder } from '@kbn/charts-plugin/public'; -import { getOverridesFor } from '@kbn/chart-expressions-common'; +import { + type ChartDimensionOptions, + getOverridesFor, + useDimensionTransitionVeil, +} from '@kbn/chart-expressions-common'; import { isVisDimension } from '@kbn/visualizations-plugin/common/utils'; import { i18n } from '@kbn/i18n'; import { @@ -178,6 +182,7 @@ export const GaugeComponent: FC = memo( chartsThemeService, renderComplete, overrides, + setDimensions, }) => { const { shape: gaugeType, @@ -253,6 +258,23 @@ export const GaugeComponent: FC = memo( [renderComplete] ); + const dimensions: ChartDimensionOptions = { + maxDimensions: { + unit: 'pixels', + ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET + ? { + x: 600, + y: 300, + } + : { + y: 600, + x: 300, + }), + }, + }; + + const { veil, onResize } = useDimensionTransitionVeil(dimensions, setDimensions); + const table = data; const accessors = getAccessorsFromArgs(args, table.columns); @@ -362,6 +384,7 @@ export const GaugeComponent: FC = memo( return (
+ {veil} } @@ -371,6 +394,7 @@ export const GaugeComponent: FC = memo( ariaLabel={args.ariaLabel} ariaUseDefaultSummary={!args.ariaLabel} onRenderChange={onRenderChange} + onResize={onResize} locale={i18n.getLocale()} {...getOverridesFor(overrides, 'settings')} /> diff --git a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index bc74ee5675402..01b7f5bc87599 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -70,25 +70,14 @@ export const gaugeRenderer: ( handlers.done(); }; - const dimensionsEvent: DimensionsEvent = { - name: 'dimensions', - data: { - maxDimensions: { - unit: 'pixels', - ...(config.args.shape === GaugeShapes.HORIZONTAL_BULLET - ? { - x: 600, - y: 300, - } - : { - y: 600, - x: 300, - }), - }, - }, - }; + const setDimensions = (dimensions: DimensionsEvent['data']) => { + const dimensionsEvent: DimensionsEvent = { + name: 'dimensions', + data: dimensions, + }; - handlers.event(dimensionsEvent); + handlers.event(dimensionsEvent); + }; const { GaugeComponent } = await import('../components/gauge_component'); render( @@ -96,6 +85,7 @@ export const gaugeRenderer: (
(); - - if (!fastIsEqual(dimensions, currentDimensions.current)) { - // If the dimensions have changed we request new dimensions from the client - // and set off a chain of events: - // - // 1. we show the veil to hide step 4 - // 2. the charts library will plan a render - // 3. the client will resize the container - // 4. the charts library will render the chart based on the original container dimensions - // 5. the charts library will resize the chart to the updated container dimensions - // 6. we hide the veil - - setDimensions(dimensions); - setShowVeil(true); - currentDimensions.current = dimensions; - } - - const onResize = useCallback(() => { - setShowVeil(false); - }, []); + const { veil, onResize } = useDimensionTransitionVeil(dimensions, setDimensions); const formattedDatatables = useMemo( () => @@ -749,16 +731,7 @@ export function XYChart({ return (
-
+ {veil} {showLegend !== undefined && uiState && ( Date: Wed, 29 Nov 2023 09:32:01 -0700 Subject: [PATCH 42/84] update jest tests and fix margin issue --- .../expression_xy/public/components/xy_chart.tsx | 3 ++- .../common/charts/__snapshots__/donut_chart.test.tsx.snap | 1 + .../apps/lens/group3/dashboard_inline_editing.ts | 1 + .../functional/apps/lens/open_in_lens/agg_based/metric.ts | 2 +- x-pack/test/functional/page_objects/lens_page.ts | 8 ++++---- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 77d3ef35c4b93..638bc72861560 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -31,6 +31,7 @@ import { XYChartSeriesIdentifier, SettingsProps, LEGACY_LIGHT_THEME, + LEGACY_CHART_MARGINS, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -808,7 +809,7 @@ export function XYChart({ // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { // Temporary margin defaults - ...LEGACY_LIGHT_THEME.chartMargins, + ...LEGACY_CHART_MARGINS, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 30aa31c104866..acf41bdf93448 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -444,6 +444,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "metric": Object { "barBackground": "#EDF0F5", "border": "#EDF0F5", + "emptyBackground": "transparent", "minHeight": 64, "nonFiniteText": "N/A", "text": Object { diff --git a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts index be052791dd5bf..1f09b68fbf4f2 100644 --- a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts +++ b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts @@ -139,6 +139,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { extraText: '', value: '5,727.322', color: 'rgba(245, 247, 250, 1)', + trendlineColor: undefined, showingTrendline: false, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index 94616f6eda6f7..89cb1d7880baa 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -216,7 +216,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 8e0897e0bbc71..590d95c17d340 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1333,8 +1333,8 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, - async getMetricElementIfExists(selector: string, container: WebElementWrapper) { - return (await findService.descendantExistsByCssSelector(selector, container)) + async getMetricElementIfExists(selector: string, container: WebElementWrapper, timeout?: number) { + return (await findService.descendantExistsByCssSelector(selector, container, timeout)) ? await container.findByCssSelector(selector) : undefined; }, @@ -1355,10 +1355,10 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont await this.getMetricElementIfExists('.echMetric', tile) )?.getComputedStyle('background-color'), trendlineColor: await ( - await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile) + await this.getMetricElementIfExists('.echSingleMetricSparkline__svg > rect', tile, 500) )?.getAttribute('fill'), showingTrendline: Boolean( - await this.getMetricElementIfExists('.echSingleMetricSparkline', tile) + await this.getMetricElementIfExists('.echSingleMetricSparkline', tile, 500) ), }; }, From b8f771cc8f4f1ea475007086778053163b64898b Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 29 Nov 2023 09:36:20 -0700 Subject: [PATCH 43/84] fix chart margin export constant --- .../expression_xy/public/components/xy_chart.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 638bc72861560..00c0f05330ad2 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -30,8 +30,6 @@ import { Tooltip, XYChartSeriesIdentifier, SettingsProps, - LEGACY_LIGHT_THEME, - LEGACY_CHART_MARGINS, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -116,6 +114,13 @@ import { TooltipHeader } from './tooltip'; import { LegendColorPickerWrapperContext, LegendColorPickerWrapper } from './legend_color_picker'; import { createSplitPoint, getTooltipActions, getXSeriesPoint } from './tooltip/tooltip_actions'; +export const LEGACY_CHART_MARGINS = { + left: 10, + right: 10, + top: 10, + bottom: 10, +}; + declare global { interface Window { /** From fbe0866ffec4aafc5969d9a7bfe1c8ecee2bdff1 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 29 Nov 2023 17:20:19 +0000 Subject: [PATCH 44/84] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- x-pack/test/functional/page_objects/lens_page.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 590d95c17d340..9f71c816be845 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1333,7 +1333,11 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return findService.allByCssSelector('[data-test-subj="mtrVis"] .echChart li'); }, - async getMetricElementIfExists(selector: string, container: WebElementWrapper, timeout?: number) { + async getMetricElementIfExists( + selector: string, + container: WebElementWrapper, + timeout?: number + ) { return (await findService.descendantExistsByCssSelector(selector, container, timeout)) ? await container.findByCssSelector(selector) : undefined; From 54b921bc991d6af6667e8af9e0758697e19dbc64 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 29 Nov 2023 13:25:15 -0700 Subject: [PATCH 45/84] update functional test assertions and jest snapshots --- package.json | 2 +- .../__snapshots__/xy_chart.test.tsx.snap | 80 +++++++++---------- .../public/components/xy_chart.tsx | 10 +-- .../functional/apps/lens/group6/metric.ts | 24 +++--- .../apps/lens/open_in_lens/agg_based/goal.ts | 27 +++---- yarn.lock | 8 +- 6 files changed, 68 insertions(+), 83 deletions(-) diff --git a/package.json b/package.json index d33d31af823f0..6383dba9c04cc 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.15.0", "@elastic/apm-rum-react": "^2.0.1", - "@elastic/charts": "61.0.2", + "@elastic/charts": "61.0.3", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 912cf7256df89..60539247d3b3b 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -1127,10 +1127,10 @@ exports[`XYChart component it renders area 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -2649,10 +2649,10 @@ exports[`XYChart component it renders bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -4171,10 +4171,10 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -5693,10 +5693,10 @@ exports[`XYChart component it renders line 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -7215,10 +7215,10 @@ exports[`XYChart component it renders stacked area 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -8737,10 +8737,10 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -10259,10 +10259,10 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -11811,10 +11811,10 @@ exports[`XYChart component split chart should render split chart if both, splitR }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -13571,10 +13571,10 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { @@ -15324,10 +15324,10 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, "barSeriesStyle": Object {}, "chartMargins": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, "legend": Object { "labelOptions": Object { diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 00c0f05330ad2..77d3ef35c4b93 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -30,6 +30,7 @@ import { Tooltip, XYChartSeriesIdentifier, SettingsProps, + LEGACY_LIGHT_THEME, } from '@elastic/charts'; import { partition } from 'lodash'; import { IconType } from '@elastic/eui'; @@ -114,13 +115,6 @@ import { TooltipHeader } from './tooltip'; import { LegendColorPickerWrapperContext, LegendColorPickerWrapper } from './legend_color_picker'; import { createSplitPoint, getTooltipActions, getXSeriesPoint } from './tooltip/tooltip_actions'; -export const LEGACY_CHART_MARGINS = { - left: 10, - right: 10, - top: 10, - bottom: 10, -}; - declare global { interface Window { /** @@ -814,7 +808,7 @@ export function XYChart({ // if not title or labels are shown for axes, add some padding if required by reference line markers chartMargins: { // Temporary margin defaults - ...LEGACY_CHART_MARGINS, + ...LEGACY_LIGHT_THEME.chartMargins, ...computeChartMargins( linesPaddings, { ...tickLabelsVisibilitySettings, x: xAxisConfig?.showLabels }, diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index 0f12b8d6c2da3..e1e2644907096 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,8 +127,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -137,8 +137,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -147,8 +147,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -157,8 +157,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -167,8 +167,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, @@ -177,8 +177,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - color: 'rgba(0, 0, 0, 0)', - trendlineColor: undefined, + color: 'rgba(245, 247, 250, 1)', + trendlineColor: 'rgba(245, 247, 250, 1)', showingTrendline: true, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index 3dc37db5ff2cc..d1a63f853144b 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -48,8 +48,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '140.05%', - foregroundColor: 'rgba(0, 0, 0, 0)', - backgroundColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -81,8 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '131,040,360.81%', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -114,8 +112,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14.37%', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -159,8 +156,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,047,486.03', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -170,8 +166,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '66,144,823.35', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -181,8 +176,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,933,477.76', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -192,8 +186,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,157,898.23', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -203,8 +196,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,365,950.93', - backgroundColor: 'rgba(245, 247, 250, 1)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(245, 247, 250, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -214,8 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - backgroundColor: 'rgba(0, 0, 0, 0)', - foregroundColor: 'rgba(0, 0, 0, 0)', + color: 'rgba(0, 0, 0, 0)', trendlineColor: undefined, showingBar: true, showingTrendline: false, diff --git a/yarn.lock b/yarn.lock index ca9a32607abf7..457db5cdfbff8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1544,10 +1544,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@61.0.2": - version "61.0.2" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.2.tgz#612a2fa842b65844ca618a0fb0176c89a4167b42" - integrity sha512-WL/5lpEIbni65LYMSZc0Rao3ZJ93a+Iou7Ak9sogG5bDwp40Y1bQdkAeQl2JoYkNGqBMQFtyEZ0pPlZc6OVMnQ== +"@elastic/charts@61.0.3": + version "61.0.3" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.0.3.tgz#77a2e1f18a39dd4b421a91edfd30f19cde740594" + integrity sha512-TY7hUieULTchNFgvpi6Rt7wMxrYMCmuZ4bbS6szOGBIY4WKJvZCgMfgZ2kUdC5MVG/jEzd8Qu+Xixce7GDpRxw== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0" From 1c568cdbfeac150248c8d806caba96a003416998 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 30 Nov 2023 08:38:36 -0700 Subject: [PATCH 46/84] update empty color in fn test case --- x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index d1a63f853144b..55cb376db2e24 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -206,7 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: undefined, value: undefined, - color: 'rgba(0, 0, 0, 0)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, From cb8eabcf0e3c57c168b022a625525b3b5986ee37 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 30 Nov 2023 16:29:19 -0700 Subject: [PATCH 47/84] fix typing --- src/plugins/chart_expressions/common/tsconfig.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/common/tsconfig.json b/src/plugins/chart_expressions/common/tsconfig.json index 7ac76523fcb6c..e6426fddeda0f 100644 --- a/src/plugins/chart_expressions/common/tsconfig.json +++ b/src/plugins/chart_expressions/common/tsconfig.json @@ -4,11 +4,13 @@ "outDir": "target/types", "types": [ "jest", - "node" + "node", + "@emotion/react/types/css-prop", ] }, "include": [ "**/*.ts", + "**/*.tsx", ], "exclude": [ "target/**/*" From 8146c27eafc799c29e023c82456eb42e825fd1d4 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 30 Nov 2023 16:29:35 -0700 Subject: [PATCH 48/84] fix gauge tests --- .../components/__snapshots__/gauge_component.test.tsx.snap | 1 + .../expression_gauge/public/components/gauge_component.test.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index afd6ce21ad36f..015dc51eb2efb 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -523,6 +523,7 @@ exports[`GaugeComponent renders the chart 1`] = ` /> } onRenderChange={[Function]} + onResize={[Function]} theme={ Array [ Object { diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx index da8985d0427af..177822577d489 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx @@ -102,6 +102,7 @@ describe('GaugeComponent', function () { paletteService: await paletteThemeService.getPalettes(), uiState, renderComplete: jest.fn(), + setDimensions: jest.fn(), }; }); From 29b3f5fd1bda574e95d112320b90e0e3cd355090 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 30 Nov 2023 19:36:38 -0700 Subject: [PATCH 49/84] fix XY chart renderer test --- .../__snapshots__/xy_chart.test.tsx.snap | 23110 ++++++++++------ .../public/components/xy_chart.test.tsx | 1 + 2 files changed, 14778 insertions(+), 8333 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 60539247d3b3b..b47d5aea1627c 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -300,6 +300,18 @@ exports[`XYChart component it renders area 1`] = ` } } > +
- - -
-`; - -exports[`XYChart component it renders bar 1`] = ` -
- - - - + + +
+`; + +exports[`XYChart component it renders bar 1`] = ` +
+
+ + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, + "barSeriesStyle": Object { + "displayValue": Object { + "alignment": Object { + "horizontal": "center", + "vertical": "middle", + }, + "fill": Object { + "textBorder": 0, + }, + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, + "fontStyle": "normal", + "offsetX": 0, + "offsetY": 0, + "padding": 0, }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "rect": Object { + "opacity": 1, }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "rectBorder": Object { + "strokeWidth": 1, + "visible": false, }, - "markSizeRatio": undefined, }, - Object {}, - ] - } - /> - - - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ Array [ Object { - "accessors": Array [ - "a", - "b", - ], - "columnToLabel": "{\\"a\\": \\"Label A\\", \\"b\\": \\"Label B\\", \\"d\\": \\"Label D\\"}", - "isHistogram": false, - "isHorizontal": false, - "isPercentage": false, - "isStacked": false, - "layerId": "first", - "layerType": "data", - "palette": Object { - "name": "mock", - "params": Object {}, - "type": "palette", + "background": Object { + "color": undefined, }, - "seriesType": "bar", - "showLines": true, - "splitAccessors": Array [ - "d", - ], - "table": Object { - "columns": Array [ - Object { - "id": "a", - "meta": Object { - "params": Object { - "id": "number", - "params": Object { - "pattern": "0,0.000", - }, - }, - "type": "number", - }, - "name": "a", - }, - Object { - "id": "b", - "meta": Object { - "params": Object { - "id": "number", - "params": Object { - "pattern": "000,0", - }, - }, - "type": "number", - }, - "name": "b", - }, - Object { - "id": "c", - "meta": Object { - "field": "order_date", - "params": Object { - "id": "string", - }, - "sourceParams": Object { - "params": Object { - "interval": "auto", - }, - "type": "date-histogram", - }, - "type": "date", - }, - "name": "c", - }, - Object { - "id": "d", - "meta": Object { - "type": "string", - }, - "name": "ColD", - }, - ], - "rows": Array [ - Object { - "a": 1, - "b": 2, - "c": 1652034840000, - "d": "Foo", - }, - Object { - "a": 1, - "b": 5, - "c": 1652122440000, - "d": "Bar", - }, - ], - "type": "datatable", + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - "type": "dataLayer", - "xAccessor": "c", - "xScaleType": "ordinal", + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, + }, + "markSizeRatio": undefined, }, + Object {}, ] } - paletteService={ + /> + + + - - -
-`; - -exports[`XYChart component it renders horizontal bar 1`] = ` -
- + - - - - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - rotation={90} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, + "first": Object { + "markSizeTitles": Object {}, + "splitColumnTitles": Object {}, + "splitRowTitles": Object {}, + "splitSeriesTitles": Object { + "d": "ColD", }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "xTitles": Object { + "c": "c", }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "yTitles": Object { + "a": "a", + "b": "b", }, - "markSizeRatio": undefined, }, - Object {}, - ] - } - /> - - - - - + + +
+`; + +exports[`XYChart component it renders horizontal bar 1`] = ` +
+
+ + + + - - -
-`; - -exports[`XYChart component it renders line 1`] = ` -
- - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={90} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, }, - "crossLine": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - "line": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, }, + "markSizeRatio": undefined, }, - "flamegraph": Object { - "navigation": Object { - "buttonBackgroundColor": "#CCE4F5", - "buttonDisabledBackgroundColor": "#D3DAE626", - "buttonDisabledTextColor": "#A2ABBA", - "buttonTextColor": "#0061A6", - "textColor": "#343741", - }, - "scrollbarThumb": "#343741", - "scrollbarTrack": "#D3DAE6", + Object {}, + ] + } + /> + + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, - }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, + ], + Array [ + Object { + "id": "string", }, - }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - - - -
-`; - -exports[`XYChart component it renders stacked area 1`] = ` -
- - - - + + +
+`; + +exports[`XYChart component it renders line 1`] = ` +
+
+ + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "gridLine": Object { + "horizontal": Object { + "dash": Array [ + 0, + 0, + ], + "opacity": 1, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, + "lumaSteps": Array [ + 224, + 184, + 128, + 96, + 64, + 32, + 16, + 8, + 4, + 2, + 1, + 0, + 0, + 0, + 0, + 0, + ], + "vertical": Object { + "dash": Array [ + 4, + 4, + ], + "opacity": 1, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": true, + }, }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, + "tickLabel": Object { + "alignment": Object { + "horizontal": "near", + "vertical": "near", }, + "fill": "#646a77", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontSize": 10, + "fontStyle": "normal", + "offset": Object { + "reference": "local", + "x": 0, + "y": 0, + }, + "padding": Object { + "inner": 10, + "outer": 8, + }, + "rotation": 0, + "visible": true, + }, + "tickLine": Object { + "padding": 10, + "size": 10, + "stroke": "#eaedf3", + "strokeWidth": 1, + "visible": false, }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ Object { - "extent": Object { - "mode": "full", - "type": "axisExtentConfig", + "background": Object { + "color": undefined, }, - "formatter": Object { - "convert": [MockFunction] { - "calls": Array [ - Array [ - 1652034840000, - ], - Array [ - 1652122440000, - ], - ], - "results": Array [ - Object { - "type": "return", - "value": 1652034840000, - }, - Object { - "type": "return", - "value": 1652122440000, - }, - ], - }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - "groupId": "left", - "labelsOrientation": -90, - "position": "left", - "series": Array [ - Object { - "accessor": "a", - "layer": "first", - }, - Object { - "accessor": "b", - "layer": "first", + "legend": Object { + "labelOptions": Object { + "maxLines": 0, }, - ], - "showGridLines": false, - "showLabels": false, - "showTitle": true, - "title": "", - "type": "yAxisConfig", + }, + "markSizeRatio": undefined, }, + Object {}, ] } /> - - -
-`; - -exports[`XYChart component it renders stacked bar 1`] = ` -
- + + + + - - - + + +
+`; + +exports[`XYChart component it renders stacked area 1`] = ` +
+
+ - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, - }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, - }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - + + + - - -
-`; - -exports[`XYChart component it renders stacked horizontal bar 1`] = ` -
- - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, }, - "crossLine": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - "line": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, }, + "markSizeRatio": undefined, }, - "flamegraph": Object { - "navigation": Object { - "buttonBackgroundColor": "#CCE4F5", - "buttonDisabledBackgroundColor": "#D3DAE626", - "buttonDisabledTextColor": "#A2ABBA", - "buttonTextColor": "#0061A6", - "textColor": "#343741", - }, - "scrollbarThumb": "#343741", - "scrollbarTrack": "#D3DAE6", + Object {}, + ] + } + /> + + + + + + + +
+`; + +exports[`XYChart component it renders stacked bar 1`] = ` +
+
+ + + + + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, + }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, + }, + "markSizeRatio": undefined, + }, + Object {}, + ] + } + /> + + + + + + + +
+`; + +exports[`XYChart component it renders stacked horizontal bar 1`] = ` +
+
+ + + + +
+ } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, + }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, + }, + "markSizeRatio": undefined, + }, + Object {}, + ] + } + /> + + + + + groupId="left" + id="left" + key="left" + position="left" + style={ + Object { + "axisTitle": Object { + "padding": undefined, + "visible": true, + }, + "tickLabel": Object { + "fill": undefined, + "padding": undefined, + "rotation": -90, + "visible": false, + }, + } } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, + tickFormat={[Function]} + title="a" + /> + + - - - - - - +
+ + + - - + - - - +
+ + + - - - { eventAnnotationService: eventAnnotationServiceMock, renderComplete: jest.fn(), timeFormat: 'MMM D, YYYY @ HH:mm:ss.SSS', + setDimensions: jest.fn(), }; }); From e4046ce33a33deb8c655d01916edc5a1539b343d Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 30 Nov 2023 19:54:03 -0700 Subject: [PATCH 50/84] update metric renderer tests --- .../public/components/metric_vis.test.tsx | 193 ++++++------------ .../public/components/metric_vis.tsx | 3 - .../metric_vis_renderer.tsx | 1 - 3 files changed, 59 insertions(+), 138 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx index 209608c260eca..61ed1f63d3e61 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx @@ -22,7 +22,6 @@ import { import { SerializedFieldFormat } from '@kbn/field-formats-plugin/common'; import { SerializableRecord } from '@kbn/utility-types'; import type { IUiSettingsClient } from '@kbn/core/public'; -import { HtmlAttributes } from 'csstype'; import { CustomPaletteState } from '@kbn/charts-plugin/common/expressions/palette/types'; import { DimensionsVisParam } from '../../common'; import { euiThemeVars } from '@kbn/ui-theme'; @@ -239,7 +238,7 @@ describe('MetricVisComponent', function () { expect(visConfig).toMatchInlineSnapshot(` Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": [Function], "subtitle": undefined, @@ -299,7 +298,7 @@ describe('MetricVisComponent', function () { expect(configWithPrefix).toMatchInlineSnapshot(` Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": secondary prefix number-13.6328125 @@ -348,7 +347,7 @@ describe('MetricVisComponent', function () { expect(configWithProgress).toMatchInlineSnapshot(` Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 28.984375, "extra": , "icon": [Function], @@ -425,7 +424,7 @@ describe('MetricVisComponent', function () { expect(visConfig).toMatchInlineSnapshot(` Array [ Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -434,7 +433,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -443,7 +442,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -452,7 +451,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -461,7 +460,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -590,7 +589,7 @@ describe('MetricVisComponent', function () { Array [ Array [ Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -599,7 +598,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -608,7 +607,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -617,7 +616,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -626,7 +625,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -637,7 +636,7 @@ describe('MetricVisComponent', function () { ], Array [ Object { - "color": "#f5f7fa", + "color": "#ffffff", "extra": , "icon": undefined, "subtitle": "Median products.base_price", @@ -678,7 +677,7 @@ describe('MetricVisComponent', function () { Array [ Array [ Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 28.984375, "extra": , "icon": undefined, @@ -689,7 +688,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 28.984375, "extra": , "icon": undefined, @@ -700,7 +699,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 25.984375, "extra": , "icon": undefined, @@ -711,7 +710,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 25.784375, "extra": , "icon": undefined, @@ -722,7 +721,7 @@ describe('MetricVisComponent', function () { "valueFormatter": [Function], }, Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 25.348011363636363, "extra": , "icon": undefined, @@ -735,7 +734,7 @@ describe('MetricVisComponent', function () { ], Array [ Object { - "color": "#f5f7fa", + "color": "#ffffff", "domainMax": 24.984375, "extra": , "icon": undefined, @@ -849,124 +848,50 @@ describe('MetricVisComponent', function () { }); }); - describe('rendering with no data', () => {}); - it('should constrain dimensions in edit mode', () => { - const getContainerStyles = (editMode: boolean, multipleTiles: boolean) => - ( - shallow( - - ) - .find('div') - .at(0) - .props() as HtmlAttributes & { css: { styles: string } } - ).css.styles; - - expect(getContainerStyles(false, false)).toMatchInlineSnapshot(` - " - height: 100%; - width: 100%; - max-height: 100%; - max-width: 100%; - overflow-y: auto; - scrollbar-width: thin; - - &::-webkit-scrollbar { - inline-size: 16px; - block-size: 16px; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(105,112,125,0.5); - background-clip: content-box; - border-radius: 16px; - border: calc(8px * 0.75) solid transparent; - } - - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar-track { - background-color: transparent; - } - - scrollbar-color: rgba(105,112,125,0.5) transparent; - - " - `); - - expect(getContainerStyles(true, false)).toMatchInlineSnapshot(` - " - height: 300px; - width: 300px; - max-height: 100%; - max-width: 100%; - overflow-y: auto; - scrollbar-width: thin; - - &::-webkit-scrollbar { - inline-size: 16px; - block-size: 16px; - } + const getDimensionsRequest = (multipleTiles: boolean) => { + const fireEvent = jest.fn(); + const wrapper = shallow( + + ); - &::-webkit-scrollbar-thumb { - background-color: rgba(105,112,125,0.5); - background-clip: content-box; - border-radius: 16px; - border: calc(8px * 0.75) solid transparent; - } + wrapper.find(Settings).props().onWillRender!(); - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar-track { - background-color: transparent; - } + return fireEvent.mock.calls[0][0].data; + }; - scrollbar-color: rgba(105,112,125,0.5) transparent; - - " + expect(getDimensionsRequest(false)).toMatchInlineSnapshot(` + Object { + "maxDimensions": Object { + "unit": "pixels", + "x": 300, + "y": 300, + }, + } `); - expect(getContainerStyles(true, true)).toMatchInlineSnapshot(` - " - height: 400px; - width: 1000px; - max-height: 100%; - max-width: 100%; - overflow-y: auto; - scrollbar-width: thin; - - &::-webkit-scrollbar { - inline-size: 16px; - block-size: 16px; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(105,112,125,0.5); - background-clip: content-box; - border-radius: 16px; - border: calc(8px * 0.75) solid transparent; - } - - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar-track { - background-color: transparent; - } - - scrollbar-color: rgba(105,112,125,0.5) transparent; - - " + expect(getDimensionsRequest(true)).toMatchInlineSnapshot(` + Object { + "maxDimensions": Object { + "unit": "pixels", + "x": 1000, + "y": 400, + }, + } `); }); @@ -1308,7 +1233,7 @@ describe('MetricVisComponent', function () { const [[datum]] = component.find(Metric).props().data!; - expect(datum!.color).toBe(euiThemeVars.euiColorLightestShade); + expect(datum!.color).toBe(euiThemeVars.euiColorEmptyShade); expect(mockGetColorForValue).not.toHaveBeenCalled(); }); }); diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 06963bcf4f82c..57e6b94bc7ed5 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -29,7 +29,6 @@ import type { DatatableColumn, DatatableRow, IInterpreterRenderHandlers, - RenderMode, } from '@kbn/expressions-plugin/common'; import { CustomPaletteState } from '@kbn/charts-plugin/public'; import { @@ -140,7 +139,6 @@ export interface MetricVisComponentProps { config: Pick; renderComplete: IInterpreterRenderHandlers['done']; fireEvent: IInterpreterRenderHandlers['event']; - renderMode: RenderMode; filterable: boolean; overrides?: AllowedSettingsOverrides & AllowedChartOverrides; } @@ -150,7 +148,6 @@ export const MetricVis = ({ config, renderComplete, fireEvent, - renderMode, filterable, overrides, }: MetricVisComponentProps) => { diff --git a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx index 9841e65d5ed20..4ba6076e032fa 100644 --- a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -101,7 +101,6 @@ export const getMetricVisRenderer = ( config={visConfig} renderComplete={renderComplete} fireEvent={handlers.event} - renderMode={handlers.getRenderMode()} filterable={filterable} overrides={overrides} /> From 2f287508b9a0dc0bc88d8bf351f688dd7f41a805 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Fri, 1 Dec 2023 06:45:29 -0700 Subject: [PATCH 51/84] fix types and tests --- .../expression_metric/public/components/metric_vis.test.tsx | 2 +- .../public/expression_renderers/xy_chart_renderer.tsx | 1 - .../workspace_panel/workspace_panel_wrapper.test.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx index 61ed1f63d3e61..acebdc3b1bb0b 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx @@ -207,7 +207,7 @@ const defaultProps = { filterable: true, renderMode: 'view', uiSettings: {} as unknown as IUiSettingsClient, -} as Pick; +} as Pick; describe('MetricVisComponent', function () { afterEach(() => { diff --git a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx index e7c18f5dd7b97..76df668bf682b 100644 --- a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx @@ -287,7 +287,6 @@ export const getXyChartRenderer = ({ uiState={handlers.uiState as PersistedState} renderComplete={renderComplete} setDimensions={setDimensions} - shouldShowLegendAction={handlers.shouldShowLegendAction} />
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx index eeec313584117..8694cc7c27dcf 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx @@ -34,7 +34,6 @@ describe('workspace_panel_wrapper', () => { <> { lensInspector={{} as unknown as LensInspector} getUserMessages={() => []} children={} + displayOptions={undefined} {...propsOverrides} /> Date: Fri, 1 Dec 2023 07:40:50 -0700 Subject: [PATCH 52/84] fix visualization unit test --- .../public/visualizations/metric/visualization.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts b/x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts index 78ea5331e34cf..5307c8f3ca9c7 100644 --- a/x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts +++ b/x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts @@ -142,7 +142,7 @@ describe('metric visualization', () => { ).toMatchInlineSnapshot(` Array [ Object { - "color": "#f5f7fa", + "color": "#ffffff", "columnId": "metric-col-id", "triggerIconType": "color", }, @@ -726,7 +726,7 @@ describe('metric visualization', () => { datasourceLayers ) as ExpressionAstExpression ).chain[1].arguments.color[0] - ).toBe(euiLightVars.euiColorLightestShade); + ).toBe(euiLightVars.euiColorEmptyShade); expect( ( @@ -740,7 +740,7 @@ describe('metric visualization', () => { datasourceLayers ) as ExpressionAstExpression ).chain[1].arguments.color[0] - ).toBe(euiLightVars.euiColorLightestShade); + ).toBe(euiLightVars.euiColorEmptyShade); // this case isn't currently relevant because other parts of the code don't allow showBar to be // set when there isn't a max dimension but this test covers the branch anyhow @@ -756,7 +756,7 @@ describe('metric visualization', () => { datasourceLayers ) as ExpressionAstExpression ).chain[1].arguments.color[0] - ).toEqual(euiThemeVars.euiColorLightestShade); + ).toEqual(euiThemeVars.euiColorEmptyShade); }); }); }); From 625296983fa258799c7feba4dbea60db7132facc Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 18 Dec 2023 14:53:11 -0700 Subject: [PATCH 53/84] replace metric default color in tests --- .../lens/group3/dashboard_inline_editing.ts | 4 ++-- .../functional/apps/lens/group6/metric.ts | 24 +++++++++---------- .../lens/open_in_lens/agg_based/metric.ts | 16 ++++++------- .../group2/open_in_lens/agg_based/metric.ts | 6 ++--- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts index 1f09b68fbf4f2..0dd8ebe13e805 100644 --- a/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts +++ b/x-pack/test/functional/apps/lens/group3/dashboard_inline_editing.ts @@ -72,7 +72,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: undefined, extraText: 'Maximum of bytes 19,986', value: '5,727.322', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingTrendline: false, showingBar: false, @@ -138,7 +138,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '5,727.322', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingTrendline: false, showingBar: false, diff --git a/x-pack/test/functional/apps/lens/group6/metric.ts b/x-pack/test/functional/apps/lens/group6/metric.ts index e1e2644907096..14e46705d6d6b 100644 --- a/x-pack/test/functional/apps/lens/group6/metric.ts +++ b/x-pack/test/functional/apps/lens/group6/metric.ts @@ -127,8 +127,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 19,755', value: '19,755', - color: 'rgba(245, 247, 250, 1)', - trendlineColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', + trendlineColor: 'rgba(255, 255, 255, 1)', showingTrendline: true, showingBar: false, }, @@ -137,8 +137,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 18,994', value: '18,994', - color: 'rgba(245, 247, 250, 1)', - trendlineColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', + trendlineColor: 'rgba(255, 255, 255, 1)', showingTrendline: true, showingBar: false, }, @@ -147,8 +147,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 17,246', value: '17,246', - color: 'rgba(245, 247, 250, 1)', - trendlineColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', + trendlineColor: 'rgba(255, 255, 255, 1)', showingTrendline: true, showingBar: false, }, @@ -157,8 +157,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,687', value: '15,687', - color: 'rgba(245, 247, 250, 1)', - trendlineColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', + trendlineColor: 'rgba(255, 255, 255, 1)', showingTrendline: true, showingBar: false, }, @@ -167,8 +167,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 15,614.333', value: '15,614.333', - color: 'rgba(245, 247, 250, 1)', - trendlineColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', + trendlineColor: 'rgba(255, 255, 255, 1)', showingTrendline: true, showingBar: false, }, @@ -177,8 +177,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { subtitle: 'Average of bytes', extraText: 'Average of bytes 5,722.775', value: '5,722.775', - color: 'rgba(245, 247, 250, 1)', - trendlineColor: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', + trendlineColor: 'rgba(255, 255, 255, 1)', showingTrendline: true, showingBar: false, }, diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts index 89cb1d7880baa..632af7eed9f98 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/metric.ts @@ -49,7 +49,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14,005', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -80,7 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '13,104,036,080.615', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -111,7 +111,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '1,437', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -166,7 +166,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,228,964,670.613', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -176,7 +176,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,186,695,551.251', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -186,7 +186,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,073,190,186.423', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -196,7 +196,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,031,579,645.108', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, @@ -206,7 +206,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,009,497,206.823', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: false, showingTrendline: false, diff --git a/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/metric.ts b/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/metric.ts index abd44aefe4d5a..9bd990484cc81 100644 --- a/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/metric.ts +++ b/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/metric.ts @@ -46,7 +46,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14,005', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingBar: false, showingTrendline: false, }, @@ -72,7 +72,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '13,104,036,080.615', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingBar: false, showingTrendline: false, }, @@ -99,7 +99,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '1,437', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingBar: false, showingTrendline: false, }, From 464b898eb9fa66fdb510f3107914af85b835ace1 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Mon, 18 Dec 2023 16:16:07 -0700 Subject: [PATCH 54/84] fix visualize embeddable filter events --- .../visualizations/public/embeddable/visualize_embeddable.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx index 7743ca46f95ba..7397e085155bb 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx @@ -40,6 +40,7 @@ import { import type { RenderMode } from '@kbn/expressions-plugin/common'; import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/public'; import { mapAndFlattenFilters } from '@kbn/data-plugin/public'; +import { isDimensionsEvent } from '@kbn/chart-expressions-common'; import { isFallbackDataView } from '../visualize_app/utils'; import { VisualizationMissedSavedObjectError } from '../components/visualization_missed_saved_object_error'; import VisualizationError from '../components/visualization_error'; @@ -477,6 +478,9 @@ export class VisualizeEmbeddable this.handler.events$ .pipe( mergeMap(async (event) => { + if (isDimensionsEvent(event)) { + return; + } if (!this.input.disableTriggers) { const triggerId = get(VIS_EVENT_TO_TRIGGER, event.name, VIS_EVENT_TO_TRIGGER.filter); let context; From f5c70fe4fc8a4c9b5d20ff780561cc6a18616687 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 18 Dec 2023 23:22:43 +0000 Subject: [PATCH 55/84] [CI] Auto-commit changed files from 'node scripts/lint_ts_projects --fix' --- src/plugins/visualizations/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/plugins/visualizations/tsconfig.json b/src/plugins/visualizations/tsconfig.json index a52401eaf65da..e1cf998a737cb 100644 --- a/src/plugins/visualizations/tsconfig.json +++ b/src/plugins/visualizations/tsconfig.json @@ -65,7 +65,8 @@ "@kbn/no-data-page-plugin", "@kbn/search-response-warnings", "@kbn/logging", - "@kbn/content-management-table-list-view-common" + "@kbn/content-management-table-list-view-common", + "@kbn/chart-expressions-common" ], "exclude": [ "target/**/*", From 18d5cea09cdb10a946bc4b9aec49fe25de01f065 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 19 Dec 2023 06:16:28 -0700 Subject: [PATCH 56/84] fix goal colors --- .../apps/lens/open_in_lens/agg_based/goal.ts | 16 ++++++++-------- .../group2/open_in_lens/agg_based/goal.ts | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts index 55cb376db2e24..d9152af7411ba 100644 --- a/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts +++ b/x-pack/test/functional/apps/lens/open_in_lens/agg_based/goal.ts @@ -48,7 +48,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '140.05%', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -80,7 +80,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '131,040,360.81%', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -112,7 +112,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14.37%', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -156,7 +156,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,047,486.03', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -166,7 +166,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '66,144,823.35', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -176,7 +176,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,933,477.76', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -186,7 +186,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,157,898.23', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, @@ -196,7 +196,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '65,365,950.93', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', trendlineColor: undefined, showingBar: true, showingTrendline: false, diff --git a/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/goal.ts b/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/goal.ts index 5de789198f420..01f655af00a1f 100644 --- a/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/goal.ts +++ b/x-pack/test_serverless/functional/test_suites/common/visualizations/group2/open_in_lens/agg_based/goal.ts @@ -50,7 +50,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '140.05%', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingBar: true, showingTrendline: false, }, @@ -77,7 +77,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '131,040,360.81%', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingBar: true, showingTrendline: false, }, @@ -105,7 +105,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: undefined, extraText: '', value: '14.37%', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingBar: true, showingTrendline: false, }, @@ -133,7 +133,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,228,964,670.613', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingTrendline: false, showingBar: true, }, @@ -142,7 +142,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,186,695,551.251', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingTrendline: false, showingBar: true, }, @@ -151,7 +151,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,073,190,186.423', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingTrendline: false, showingBar: true, }, @@ -160,7 +160,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,031,579,645.108', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingTrendline: false, showingBar: true, }, @@ -169,7 +169,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { subtitle: 'Average machine.ram', extraText: '', value: '13,009,497,206.823', - color: 'rgba(245, 247, 250, 1)', + color: 'rgba(255, 255, 255, 1)', showingTrendline: false, showingBar: true, }, From 643c380e3cd105609b8abbb7cae81aadcd6d4b51 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 21 Dec 2023 12:27:16 -0700 Subject: [PATCH 57/84] change test order --- x-pack/test/functional/apps/lens/group6/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/index.ts b/x-pack/test/functional/apps/lens/group6/index.ts index 0c37221fa4794..490c7a82d48e0 100644 --- a/x-pack/test/functional/apps/lens/group6/index.ts +++ b/x-pack/test/functional/apps/lens/group6/index.ts @@ -80,9 +80,9 @@ export default ({ getService, loadTestFile, getPageObjects }: FtrProviderContext loadTestFile(require.resolve('./inspector')); // 1m 19s loadTestFile(require.resolve('./error_handling')); // 1m 8s loadTestFile(require.resolve('./lens_tagging')); // 1m 9s - loadTestFile(require.resolve('./lens_reporting')); // 3m loadTestFile(require.resolve('./workspace_dimensions')); // 1m 30s - // keep these two last in the group in this order because they are messing with the default saved objects + // keep these last in the group in this order because they are messing with the default saved objects + loadTestFile(require.resolve('./lens_reporting')); // 3m loadTestFile(require.resolve('./rollup')); // 1m 30s loadTestFile(require.resolve('./no_data')); // 36s }); From b3dfebcfe4dfe5a92cb58e0b0f98ed2055325e6e Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 21 Dec 2023 13:38:17 -0700 Subject: [PATCH 58/84] update limits --- packages/kbn-optimizer/limits.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index d38e1399ed3aa..6412e89b05e0f 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -53,7 +53,7 @@ pageLoadAssetSize: expressionLegacyMetricVis: 23121 expressionMetric: 22238 expressionMetricVis: 23121 - expressionPartitionVis: 28000 + expressionPartitionVis: 29000 expressionRepeatImage: 22341 expressionRevealImage: 25675 expressions: 140958 From 4d90e52489ec5223b2eed579be9e3855a5b24b25 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 21 Dec 2023 14:19:19 -0700 Subject: [PATCH 59/84] always retry --- .../apps/lens/group6/workspace_dimensions.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index 6ee1924f13cb8..4ff6fdc5193a0 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -43,10 +43,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); const assertWorkspaceDimensions = async (expectedWidth: string, expectedHeight: string) => { - const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + await retry.try(() => { + const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); - expect(width).to.be(expectedWidth); - expect(height).to.be(expectedHeight); + expect(width).to.be(expectedWidth); + expect(height).to.be(expectedHeight); + }); }; it('adjusts dimension for various chart types', async () => { @@ -132,9 +134,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.openDimensionEditor('lnsMetric_breakdownByDimensionPanel'); await testSubjects.setValue('lnsMetric_max_cols', '2'); - retry.try(async () => { - await assertWorkspaceDimensions('400px', '600px'); - }); + await assertWorkspaceDimensions('400px', '600px'); }); }); } From a8f39df3fcbda7b7c226eddd24d179c3f36c563d Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 21 Dec 2023 15:18:39 -0700 Subject: [PATCH 60/84] fix test --- x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index 4ff6fdc5193a0..04ca8894a0fed 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -43,7 +43,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); const assertWorkspaceDimensions = async (expectedWidth: string, expectedHeight: string) => { - await retry.try(() => { + await retry.try(async () => { const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); expect(width).to.be(expectedWidth); From 9b7ae0c336c7e05a0280030af0b33fe2daf8998d Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 2 Jan 2024 12:52:54 -0700 Subject: [PATCH 61/84] update test --- .../apps/lens/group6/workspace_dimensions.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index 04ca8894a0fed..dc43696ad8583 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -25,7 +25,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { before(async () => { originalWindowSize = await browser.getWindowSize(); - await browser.setWindowSize(1600, 1200); + await browser.setWindowSize(1400, 900); await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickVisType('lens'); @@ -52,9 +52,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }; it('adjusts dimension for various chart types', async () => { - const VERTICAL_16_9 = { expectedWidth: '864px', expectedHeight: '486px' }; - const HORIZONTAL_16_9 = { expectedWidth: '296.438px', expectedHeight: '527px' }; - const UNCONSTRAINED = { expectedWidth: '864px', expectedHeight: '527px' }; + const VERTICAL_16_9 = { expectedWidth: '690px', expectedHeight: '388.125px' }; + const HORIZONTAL_16_9 = { expectedWidth: '225px', expectedHeight: '400px' }; + const UNCONSTRAINED = { expectedWidth: '690px', expectedHeight: '400px' }; /** * This list is specifically designed to test dimension transitions. @@ -78,8 +78,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { // // this is a good thing because it makes this a test case for aspect ratio preservation // even when specific pixel dimensions are requested. - expectedWidth: '263.5px', - expectedHeight: '527px', + expectedWidth: '200px', + expectedHeight: '400px', }, { id: 'bar_horizontal_percentage_stacked', searchText: 'bar', ...HORIZONTAL_16_9 }, { id: 'lnsLegacyMetric', ...UNCONSTRAINED }, @@ -110,7 +110,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { while (visTypes.length) { const vis = visTypes.pop()!; - await PageObjects.lens.switchToVisualization(vis.id, vis.searchText); + await retry.try(async () => { + await PageObjects.lens.switchToVisualization(vis.id, vis.searchText); + }); log.debug(`Testing ${vis.id}... expecting ${vis.expectedWidth}x${vis.expectedHeight}`); @@ -119,7 +121,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); it('metric dimensions', async () => { - await PageObjects.lens.switchToVisualization('lnsMetric'); + await retry.try(async () => { + await PageObjects.lens.switchToVisualization('lnsMetric'); + }); await assertWorkspaceDimensions('300px', '300px'); @@ -134,7 +138,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.openDimensionEditor('lnsMetric_breakdownByDimensionPanel'); await testSubjects.setValue('lnsMetric_max_cols', '2'); - await assertWorkspaceDimensions('400px', '600px'); + await assertWorkspaceDimensions('266.664px', '400px'); }); }); } From c63274e5fa4bcfd6b935faceb319a0ff4f988c0d Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 2 Jan 2024 20:46:06 +0000 Subject: [PATCH 62/84] [CI] Auto-commit changed files from 'node scripts/notice' --- NOTICE.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/NOTICE.txt b/NOTICE.txt index 45af6e5231783..d02031c4b5a2b 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -1,5 +1,5 @@ Kibana source code with Kibana X-Pack source code -Copyright 2012-2023 Elasticsearch B.V. +Copyright 2012-2024 Elasticsearch B.V. --- Pretty handling of logarithmic axes. From 3318505630cfed4041c3158a6488659a00ac1fb9 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 3 Jan 2024 11:26:00 -0600 Subject: [PATCH 63/84] CSS optimization Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> --- .../editor_frame/workspace_panel/workspace_panel_wrapper.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 9d50b37a3bdb9..c75dbc23d1612 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -245,7 +245,9 @@ export function WorkspacePanelWrapper({ alignItems="center" justifyContent="center" direction="column" - css={{ height: '100%' }} + css={css` + height: 100%; + `} > Date: Wed, 3 Jan 2024 10:36:24 -0700 Subject: [PATCH 64/84] increase pixel tolerance --- .../apps/lens/group6/workspace_dimensions.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index dc43696ad8583..7db72736e6ece 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -42,12 +42,22 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await browser.setWindowSize(originalWindowSize.width, originalWindowSize.height); }); + const pxToN = (pixels: string) => Number(pixels.substring(0, pixels.length - 2)); + const assertWorkspaceDimensions = async (expectedWidth: string, expectedHeight: string) => { + const tolerance = 1; + await retry.try(async () => { const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); - expect(width).to.be(expectedWidth); - expect(height).to.be(expectedHeight); + expect(pxToN(width)).to.within( + pxToN(expectedWidth) - tolerance, + pxToN(expectedWidth) + tolerance + ); + expect(pxToN(height)).to.within( + pxToN(expectedHeight) - tolerance, + pxToN(expectedHeight) + tolerance + ); }); }; From 9206cc8ae7fe2c36749b27ea57b5f3a54a88dca8 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 3 Jan 2024 10:39:49 -0700 Subject: [PATCH 65/84] clarify check --- .../visualizations/public/embeddable/visualize_embeddable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx index 7397e085155bb..af8024f9f19cc 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx @@ -478,6 +478,7 @@ export class VisualizeEmbeddable this.handler.events$ .pipe( mergeMap(async (event) => { + // Visualize doesn't respond to sizing events, so ignore. if (isDimensionsEvent(event)) { return; } From a253ba2bf4a7d916ec8f92884a1e8c056ddda284 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 3 Jan 2024 11:09:44 -0700 Subject: [PATCH 66/84] resolve import --- .../editor_frame/workspace_panel/workspace_panel_wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index c75dbc23d1612..31b1c17504466 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -13,7 +13,7 @@ import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; import { ChartDimensionOptions } from '@kbn/chart-expressions-common'; import { ChartDimensionUnit } from '@kbn/chart-expressions-common/types'; -import { Interpolation, Theme } from '@emotion/react'; +import { Interpolation, Theme, css } from '@emotion/react'; import { DatasourceMap, FramePublicAPI, From 13b8c14a5b9245c74a69fbfe962eb58a9190f206 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 3 Jan 2024 13:59:55 -0700 Subject: [PATCH 67/84] remove mention of dimensions --- ...eil.tsx => chart_size_transition_veil.tsx} | 16 ++++++++-------- src/plugins/chart_expressions/common/index.ts | 11 +++-------- src/plugins/chart_expressions/common/types.ts | 17 +++++++++-------- .../common/types/expression_renderers.ts | 4 ++-- .../components/gauge_component.test.tsx | 2 +- .../public/components/gauge_component.tsx | 10 +++++----- .../expression_renderers/gauge_renderer.tsx | 14 +++++++------- .../expression_renderers/heatmap_renderer.tsx | 8 ++++---- .../metric_vis_renderer.tsx | 8 ++++---- .../public/components/metric_vis.tsx | 6 +++--- .../partition_vis_renderer.tsx | 8 ++++---- .../tagcloud_renderer.tsx | 8 ++++---- .../public/components/xy_chart.test.tsx | 2 +- .../public/components/xy_chart.tsx | 12 ++++++------ .../xy_chart_renderer.tsx | 10 +++++----- .../embeddable/visualize_embeddable.tsx | 4 ++-- .../workspace_panel/workspace_panel.tsx | 19 +++++++++---------- .../workspace_panel_wrapper.tsx | 8 ++++---- x-pack/plugins/lens/public/types.ts | 4 ++-- .../visualizations/datatable/expression.tsx | 8 ++++---- .../choropleth_chart/expression_renderer.tsx | 8 ++++---- 21 files changed, 91 insertions(+), 96 deletions(-) rename src/plugins/chart_expressions/common/{dimension_transition_veil.tsx => chart_size_transition_veil.tsx} (80%) diff --git a/src/plugins/chart_expressions/common/dimension_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx similarity index 80% rename from src/plugins/chart_expressions/common/dimension_transition_veil.tsx rename to src/plugins/chart_expressions/common/chart_size_transition_veil.tsx index 63dbe70019ca0..1761ce385f81f 100644 --- a/src/plugins/chart_expressions/common/dimension_transition_veil.tsx +++ b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { useCallback, useRef, useState } from 'react'; import fastIsEqual from 'fast-deep-equal'; -import type { ChartDimensionOptions } from './types'; +import type { ChartSizeSpec } from './types'; /** * This hook is used to show a veil over the chart while it is being resized @@ -17,14 +17,14 @@ import type { ChartDimensionOptions } from './types'; * * It is only relevant if client dimensions are being requested based on chart configuration. */ -export function useDimensionTransitionVeil( - dimensions: ChartDimensionOptions, - setDimensions: (d: ChartDimensionOptions) => void +export function useSizeTransitionVeil( + chartSizeSpec: ChartSizeSpec, + setChartSize: (d: ChartSizeSpec) => void ) { const [showVeil, setShowVeil] = useState(false); - const currentDimensions = useRef(); + const currentChartSizeSpec = useRef(); - if (!fastIsEqual(dimensions, currentDimensions.current)) { + if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) { // If the dimensions have changed we request new dimensions from the client // and set off a chain of events: // @@ -35,9 +35,9 @@ export function useDimensionTransitionVeil( // 5. the charts library will resize the chart to the updated container dimensions // 6. we hide the veil - setDimensions(dimensions); + setChartSize(chartSizeSpec); setShowVeil(true); - currentDimensions.current = dimensions; + currentChartSizeSpec.current = chartSizeSpec; } const onResize = useCallback(() => { diff --git a/src/plugins/chart_expressions/common/index.ts b/src/plugins/chart_expressions/common/index.ts index 19eb396846e76..93b5d83710bb2 100644 --- a/src/plugins/chart_expressions/common/index.ts +++ b/src/plugins/chart_expressions/common/index.ts @@ -12,12 +12,7 @@ export { getOverridesFor, isOnAggBasedEditor, } from './utils'; -export type { - Simplify, - MakeOverridesSerializable, - ChartDimensionOptions, - DimensionsEvent, -} from './types'; -export { isDimensionsEvent } from './types'; +export type { Simplify, MakeOverridesSerializable, ChartSizeSpec, ChartSizeEvent } from './types'; +export { isChartSizeEvent } from './types'; export { getColorCategories } from './color_categories'; -export { useDimensionTransitionVeil } from './dimension_transition_veil'; +export { useSizeTransitionVeil } from './chart_size_transition_veil'; diff --git a/src/plugins/chart_expressions/common/types.ts b/src/plugins/chart_expressions/common/types.ts index a3160bfb541b5..fd55aa752396b 100644 --- a/src/plugins/chart_expressions/common/types.ts +++ b/src/plugins/chart_expressions/common/types.ts @@ -28,20 +28,20 @@ export type MakeOverridesSerializable = { : NonNullable; }; -export interface DimensionsEvent extends ExpressionRendererEvent { - name: 'dimensions'; - data: ChartDimensionOptions; +export interface ChartSizeEvent extends ExpressionRendererEvent { + name: 'chartSize'; + data: ChartSizeSpec; } -export type ChartDimensionUnit = 'pixels' | 'percentage'; +export type ChartSizeUnit = 'pixels' | 'percentage'; -export type ChartDimensionOptions = +export type ChartSizeSpec = | { // if maxDimensions are provided, the aspect ratio will be computed from them maxDimensions?: { x: number; y: number; - unit: ChartDimensionUnit; + unit: ChartSizeUnit; }; aspectRatio?: never; } @@ -50,6 +50,7 @@ export type ChartDimensionOptions = maxDimensions?: never; }; -export function isDimensionsEvent(event: ExpressionRendererEvent): event is DimensionsEvent { - return event.name === 'dimensions'; +export function isChartSizeEvent(event: ExpressionRendererEvent): event is ChartSizeEvent { + const expectedName: ChartSizeEvent['name'] = 'chartSize'; + return event.name === expectedName; } diff --git a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts index df52d14ee1fe6..5e20310ebcbf4 100644 --- a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts +++ b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts @@ -11,7 +11,7 @@ import type { PersistedState } from '@kbn/visualizations-plugin/public'; import type { ChartsPluginSetup } from '@kbn/charts-plugin/public'; import type { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common'; import type { AllowedSettingsOverrides, AllowedChartOverrides } from '@kbn/charts-plugin/common'; -import type { ChartDimensionOptions } from '@kbn/chart-expressions-common'; +import type { ChartSizeSpec } from '@kbn/chart-expressions-common'; import type { AllowedGaugeOverrides, GaugeExpressionProps } from './expression_functions'; export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat; @@ -23,5 +23,5 @@ export type GaugeRenderProps = GaugeExpressionProps & { renderComplete: () => void; uiState: PersistedState; overrides?: AllowedGaugeOverrides & AllowedSettingsOverrides & AllowedChartOverrides; - setDimensions: (d: ChartDimensionOptions) => void; + setChartSize: (d: ChartSizeSpec) => void; }; diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx index 177822577d489..47b9a94675583 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx @@ -102,7 +102,7 @@ describe('GaugeComponent', function () { paletteService: await paletteThemeService.getPalettes(), uiState, renderComplete: jest.fn(), - setDimensions: jest.fn(), + setChartSize: jest.fn(), }; }); diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index e09bfd5cb342d..9a5275c82234c 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -13,9 +13,9 @@ import { FieldFormat } from '@kbn/field-formats-plugin/common'; import type { CustomPaletteState } from '@kbn/charts-plugin/public'; import { EmptyPlaceholder } from '@kbn/charts-plugin/public'; import { - type ChartDimensionOptions, + type ChartSizeSpec, getOverridesFor, - useDimensionTransitionVeil, + useSizeTransitionVeil, } from '@kbn/chart-expressions-common'; import { isVisDimension } from '@kbn/visualizations-plugin/common/utils'; import { i18n } from '@kbn/i18n'; @@ -182,7 +182,7 @@ export const GaugeComponent: FC = memo( chartsThemeService, renderComplete, overrides, - setDimensions, + setChartSize, }) => { const { shape: gaugeType, @@ -258,7 +258,7 @@ export const GaugeComponent: FC = memo( [renderComplete] ); - const dimensions: ChartDimensionOptions = { + const chartSizeSpec: ChartSizeSpec = { maxDimensions: { unit: 'pixels', ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET @@ -273,7 +273,7 @@ export const GaugeComponent: FC = memo( }, }; - const { veil, onResize } = useDimensionTransitionVeil(dimensions, setDimensions); + const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize); const table = data; const accessors = getAccessorsFromArgs(args, table.columns); diff --git a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index 01b7f5bc87599..74c3d8bb52737 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -14,7 +14,7 @@ import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expre import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public'; import { METRIC_TYPE } from '@kbn/analytics'; import { - DimensionsEvent, + ChartSizeEvent, extractContainerType, extractVisualizationType, } from '@kbn/chart-expressions-common'; @@ -70,13 +70,13 @@ export const gaugeRenderer: ( handlers.done(); }; - const setDimensions = (dimensions: DimensionsEvent['data']) => { - const dimensionsEvent: DimensionsEvent = { - name: 'dimensions', - data: dimensions, + const setChartSize = (chartSizeSpec: ChartSizeEvent['data']) => { + const event: ChartSizeEvent = { + name: 'chartSize', + data: chartSizeSpec, }; - handlers.event(dimensionsEvent); + handlers.event(event); }; const { GaugeComponent } = await import('../components/gauge_component'); @@ -85,7 +85,7 @@ export const gaugeRenderer: (
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index 57e6b94bc7ed5..b30b1e1022efa 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -40,7 +40,7 @@ import { css } from '@emotion/react'; import { euiThemeVars } from '@kbn/ui-theme'; import { useResizeObserver, useEuiScrollBar, EuiIcon } from '@elastic/eui'; import { AllowedChartOverrides, AllowedSettingsOverrides } from '@kbn/charts-plugin/common'; -import { DimensionsEvent, getOverridesFor } from '@kbn/chart-expressions-common'; +import { type ChartSizeEvent, getOverridesFor } from '@kbn/chart-expressions-common'; import { DEFAULT_TRENDLINE_NAME } from '../../common/constants'; import { VisParams } from '../../common'; import { getPaletteService, getThemeService, getFormatService } from '../services'; @@ -164,8 +164,8 @@ export const MetricVis = ({ const onWillRender = useCallback(() => { const maxTileSideLength = grid.current.length * grid.current[0].length > 1 ? 200 : 300; - const event: DimensionsEvent = { - name: 'dimensions', + const event: ChartSizeEvent = { + name: 'chartSize', data: { maxDimensions: { y: grid.current.length * maxTileSideLength, diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx index 0637fc1b9141c..3d487f13e0c0b 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx @@ -22,7 +22,7 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { METRIC_TYPE } from '@kbn/analytics'; import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils'; import { - DimensionsEvent, + type ChartSizeEvent, extractContainerType, extractVisualizationType, isOnAggBasedEditor, @@ -117,8 +117,8 @@ export const getPartitionVisRenderer: ( const hasOpenedOnAggBasedEditor = isOnAggBasedEditor(handlers.getExecutionContext()); - const dimensionsEvent: DimensionsEvent = { - name: 'dimensions', + const chartSizeEvent: ChartSizeEvent = { + name: 'chartSize', data: { maxDimensions: { x: 100, @@ -128,7 +128,7 @@ export const getPartitionVisRenderer: ( }, }; - handlers.event(dimensionsEvent); + handlers.event(chartSizeEvent); render( diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx index 6c8749997cbe5..fa250f03069ab 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx @@ -16,7 +16,7 @@ import { VisualizationContainer } from '@kbn/visualizations-plugin/public'; import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers'; import { METRIC_TYPE } from '@kbn/analytics'; import { - DimensionsEvent, + type ChartSizeEvent, extractContainerType, extractVisualizationType, } from '@kbn/chart-expressions-common'; @@ -70,8 +70,8 @@ export const tagcloudRenderer: ( handlers.done(); }; - const dimensionsEvent: DimensionsEvent = { - name: 'dimensions', + const chartSizeEvent: ChartSizeEvent = { + name: 'chartSize', data: { maxDimensions: { x: 100, @@ -81,7 +81,7 @@ export const tagcloudRenderer: ( }, }; - handlers.event(dimensionsEvent); + handlers.event(chartSizeEvent); const palettesRegistry = await plugins.charts.palettes.getPalettes(); let isDarkMode = false; diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx index cb394ef45fbbb..d78bcb34ba975 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx @@ -129,7 +129,7 @@ describe('XYChart component', () => { eventAnnotationService: eventAnnotationServiceMock, renderComplete: jest.fn(), timeFormat: 'MMM D, YYYY @ HH:mm:ss.SSS', - setDimensions: jest.fn(), + setChartSize: jest.fn(), }; }); diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 417a57373406b..d54bb007bb342 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -53,9 +53,9 @@ import { } from '@kbn/visualizations-plugin/common/constants'; import { PersistedState } from '@kbn/visualizations-plugin/public'; import { - useDimensionTransitionVeil, - ChartDimensionOptions, + useSizeTransitionVeil, getOverridesFor, + ChartSizeSpec, } from '@kbn/chart-expressions-common'; import type { FilterEvent, @@ -150,7 +150,7 @@ export type XYChartRenderProps = Omit & { renderComplete: () => void; uiState?: PersistedState; timeFormat: string; - setDimensions: (dimensions: ChartDimensionOptions) => void; + setChartSize: (chartSizeSpec: ChartSizeSpec) => void; shouldShowLegendAction?: (actionId: string) => boolean; }; @@ -205,7 +205,7 @@ export function XYChart({ onClickMultiValue, layerCellValueActions, onSelectRange, - setDimensions, + setChartSize, interactive = true, syncColors, syncTooltips, @@ -301,7 +301,7 @@ export function XYChart({ const dataLayers: CommonXYDataLayerConfig[] = filteredLayers.filter(isDataLayer); - const dimensions = { + const chartSizeSpec = { aspectRatio: isHorizontalChart(dataLayers) ? { x: 9, y: 16 } : { @@ -310,7 +310,7 @@ export function XYChart({ }, }; - const { veil, onResize } = useDimensionTransitionVeil(dimensions, setDimensions); + const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize); const formattedDatatables = useMemo( () => diff --git a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx index 76df668bf682b..53091eb47acb5 100644 --- a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx @@ -27,8 +27,8 @@ import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { UsageCollectionStart } from '@kbn/usage-collection-plugin/public'; import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils'; import { - ChartDimensionOptions, - DimensionsEvent, + type ChartSizeEvent, + type ChartSizeSpec, extractContainerType, extractVisualizationType, } from '@kbn/chart-expressions-common'; @@ -220,8 +220,8 @@ export const getXyChartRenderer = ({ const onClickMultiValue = (data: MultiFilterEvent['data']) => { handlers.event({ name: 'multiFilter', data }); }; - const setDimensions = (data: ChartDimensionOptions) => { - const event: DimensionsEvent = { name: 'dimensions', data }; + const setChartSize = (data: ChartSizeSpec) => { + const event: ChartSizeEvent = { name: 'chartSize', data }; handlers.event(event); }; @@ -286,7 +286,7 @@ export const getXyChartRenderer = ({ syncCursor={config.syncCursor} uiState={handlers.uiState as PersistedState} renderComplete={renderComplete} - setDimensions={setDimensions} + setChartSize={setChartSize} />
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx index af8024f9f19cc..285612700863c 100644 --- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx +++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx @@ -40,7 +40,7 @@ import { import type { RenderMode } from '@kbn/expressions-plugin/common'; import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/public'; import { mapAndFlattenFilters } from '@kbn/data-plugin/public'; -import { isDimensionsEvent } from '@kbn/chart-expressions-common'; +import { isChartSizeEvent } from '@kbn/chart-expressions-common'; import { isFallbackDataView } from '../visualize_app/utils'; import { VisualizationMissedSavedObjectError } from '../components/visualization_missed_saved_object_error'; import VisualizationError from '../components/visualization_error'; @@ -479,7 +479,7 @@ export class VisualizeEmbeddable .pipe( mergeMap(async (event) => { // Visualize doesn't respond to sizing events, so ignore. - if (isDimensionsEvent(event)) { + if (isChartSizeEvent(event)) { return; } if (!this.input.disableTriggers) { diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx index 91efdd4e85582..d814b8b05a18b 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx @@ -27,7 +27,7 @@ import type { Datatable } from '@kbn/expressions-plugin/public'; import { DropIllustration } from '@kbn/chart-icons'; import { DragDrop, useDragDropContext, DragDropIdentifier } from '@kbn/dom-drag-drop'; import { reportPerformanceMetricEvent } from '@kbn/ebt-tools'; -import { ChartDimensionOptions, isDimensionsEvent } from '@kbn/chart-expressions-common'; +import { ChartSizeSpec, isChartSizeEvent } from '@kbn/chart-expressions-common'; import { trackUiCounterEvents } from '../../../lens_ui_telemetry'; import { getSearchWarningMessages } from '../../../utils'; import { @@ -411,7 +411,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ } }, [expressionExists, localState.expressionToRender]); - const [dimensionOptions, setDimensionOptions] = useState(); + const [chartSizeSpec, setChartSize] = useState(); const onEvent = useCallback( (event: ExpressionRendererEvent) => { @@ -444,15 +444,14 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ ); } - if (isDimensionsEvent(event)) { - setDimensionOptions(event.data); + if (isChartSizeEvent(event)) { + setChartSize(event.data); } }, [plugins.data.datatableUtilities, plugins.uiActions, activeVisualization, dispatchLens] ); const displayOptions = activeVisualization?.getDisplayOptions?.(); - const hasCompatibleActions = useCallback( async (event: ExpressionRendererEvent) => { if (!plugins.uiActions) { @@ -484,8 +483,8 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ const IS_DARK_THEME: boolean = useObservable(core.theme.theme$, { darkMode: false }).darkMode; const renderDragDropPrompt = () => { - if (dimensionOptions) { - setDimensionOptions(undefined); + if (chartSizeSpec) { + setChartSize(undefined); } return ( @@ -542,8 +541,8 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ }; const renderApplyChangesPrompt = () => { - if (dimensionOptions) { - setDimensionOptions(undefined); + if (chartSizeSpec) { + setChartSize(undefined); } const applyChangesString = i18n.translate('xpack.lens.editorFrame.applyChanges', { @@ -661,7 +660,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({ isFullscreen={isFullscreen} lensInspector={lensInspector} getUserMessages={getUserMessages} - displayOptions={dimensionOptions} + displayOptions={chartSizeSpec} > {renderWorkspace()} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 31b1c17504466..42d5454c6aa18 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -11,8 +11,8 @@ import React, { useCallback } from 'react'; import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui'; import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; -import { ChartDimensionOptions } from '@kbn/chart-expressions-common'; -import { ChartDimensionUnit } from '@kbn/chart-expressions-common/types'; +import { ChartSizeSpec } from '@kbn/chart-expressions-common'; +import { ChartSizeUnit } from '@kbn/chart-expressions-common/types'; import { Interpolation, Theme, css } from '@emotion/react'; import { DatasourceMap, @@ -49,10 +49,10 @@ export interface WorkspacePanelWrapperProps { isFullscreen: boolean; lensInspector: LensInspector; getUserMessages: UserMessagesGetter; - displayOptions: ChartDimensionOptions | undefined; + displayOptions: ChartSizeSpec | undefined; } -const unitToCSSUnit: Record = { +const unitToCSSUnit: Record = { pixels: 'px', percentage: '%', }; diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index c42caea797871..230185b31577c 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -42,7 +42,7 @@ import { CellValueContext } from '@kbn/embeddable-plugin/public'; import { EventAnnotationGroupConfig } from '@kbn/event-annotation-common'; import type { DraggingIdentifier, DragDropIdentifier, DropType } from '@kbn/dom-drag-drop'; import type { AccessorConfig } from '@kbn/visualization-ui-components'; -import { DimensionsEvent } from '@kbn/chart-expressions-common'; +import type { ChartSizeEvent } from '@kbn/chart-expressions-common'; import type { DateRange, LayerType, SortingHint } from '../common/types'; import type { LensSortActionData, @@ -1394,7 +1394,7 @@ export interface ILensInterpreterRenderHandlers extends IInterpreterRenderHandle | BrushTriggerEvent | LensEditEvent | LensTableRowContextMenuEvent - | DimensionsEvent + | ChartSizeEvent ) => void; } diff --git a/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx b/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx index 0926d05a35b40..b70b4dd15f43a 100644 --- a/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx +++ b/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx @@ -18,7 +18,7 @@ import type { IInterpreterRenderHandlers, } from '@kbn/expressions-plugin/common'; import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; -import { DimensionsEvent } from '@kbn/chart-expressions-common'; +import { ChartSizeEvent } from '@kbn/chart-expressions-common'; import { trackUiCounterEvents } from '../../lens_ui_telemetry'; import { DatatableComponent } from './components/table_basic'; @@ -104,8 +104,8 @@ export const getDatatableRenderer = (dependencies: { handlers.done(); }; - const dimensionsEvent: DimensionsEvent = { - name: 'dimensions', + const chartSizeEvent: ChartSizeEvent = { + name: 'chartSize', data: { maxDimensions: { x: 100, @@ -115,7 +115,7 @@ export const getDatatableRenderer = (dependencies: { }, }; - handlers.event(dimensionsEvent); + handlers.event(chartSizeEvent); // An entry for each table row, whether it has any actions attached to // ROW_CLICK_TRIGGER trigger. diff --git a/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx b/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx index 12f5e2151dba6..8b8e385b8e244 100644 --- a/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx +++ b/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx @@ -13,7 +13,7 @@ import { METRIC_TYPE } from '@kbn/analytics'; import type { CoreSetup, CoreStart } from '@kbn/core/public'; import type { FileLayer } from '@elastic/ems-client'; import type { KibanaExecutionContext } from '@kbn/core-execution-context-common'; -import { DimensionsEvent } from '@kbn/chart-expressions-common'; +import { ChartSizeEvent } from '@kbn/chart-expressions-common'; import type { MapsPluginStartDependencies } from '../../plugin'; import type { ChoroplethChartProps } from './types'; import type { MapEmbeddableInput, MapEmbeddableOutput } from '../../embeddable'; @@ -93,8 +93,8 @@ export function getExpressionRenderer(coreSetup: CoreSetup Date: Thu, 4 Jan 2024 07:50:43 -0700 Subject: [PATCH 68/84] always constrain correct dimension --- .../workspace_panel_wrapper.tsx | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 42d5454c6aa18..34ad18122ec48 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -7,7 +7,8 @@ import './workspace_panel_wrapper.scss'; -import React, { useCallback } from 'react'; +import { useResizeObserver } from '@elastic/eui'; +import React, { useCallback, useRef } from 'react'; import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui'; import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -57,10 +58,16 @@ const unitToCSSUnit: Record = { percentage: '%', }; -const computeAspectRatioAndMaxDimensions = ({ x, y }: { x: number; y: number }) => { +const computeAspectRatioAndMaxDimensions = ( + { x, y }: { x: number; y: number }, + parentDimensions: { width: number; height: number } +) => { + const parentAspectRatio = parentDimensions.width / parentDimensions.height; + const aspectRatio = x / y; + return { aspectRatio: `${x}/${y}`, - ...(y > x + ...(parentAspectRatio > aspectRatio ? { height: '100%', width: 'auto', @@ -135,17 +142,26 @@ export function WorkspacePanelWrapper({ const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null; const userMessages = getUserMessages('toolbar'); + const outerWorkspaceRef = useRef(null); + const workspaceDimensions = useResizeObserver(outerWorkspaceRef.current); + const aspectRatio = displayOptions?.aspectRatio; const maxDimensions = displayOptions?.maxDimensions; let visDimensionsCSS: Interpolation = {}; if (aspectRatio) { - visDimensionsCSS = computeAspectRatioAndMaxDimensions(aspectRatio ?? maxDimensions); + visDimensionsCSS = computeAspectRatioAndMaxDimensions( + aspectRatio ?? maxDimensions, + workspaceDimensions + ); } if (maxDimensions) { - visDimensionsCSS = computeAspectRatioAndMaxDimensions(aspectRatio ?? maxDimensions); + visDimensionsCSS = computeAspectRatioAndMaxDimensions( + aspectRatio ?? maxDimensions, + workspaceDimensions + ); visDimensionsCSS.maxWidth = `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`; visDimensionsCSS.maxHeight = `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`; } @@ -241,6 +257,7 @@ export function WorkspacePanelWrapper({ color="transparent" > Date: Thu, 4 Jan 2024 10:39:00 -0700 Subject: [PATCH 69/84] don't apply aspect ratio when percentages are requested --- .../workspace_panel/workspace_panel_wrapper.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 34ad18122ec48..095cf05efa9c0 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -58,7 +58,7 @@ const unitToCSSUnit: Record = { percentage: '%', }; -const computeAspectRatioAndMaxDimensions = ( +const getAspectRatioStyles = ( { x, y }: { x: number; y: number }, parentDimensions: { width: number; height: number } ) => { @@ -151,17 +151,15 @@ export function WorkspacePanelWrapper({ let visDimensionsCSS: Interpolation = {}; if (aspectRatio) { - visDimensionsCSS = computeAspectRatioAndMaxDimensions( - aspectRatio ?? maxDimensions, - workspaceDimensions - ); + visDimensionsCSS = getAspectRatioStyles(aspectRatio ?? maxDimensions, workspaceDimensions); } if (maxDimensions) { - visDimensionsCSS = computeAspectRatioAndMaxDimensions( - aspectRatio ?? maxDimensions, - workspaceDimensions - ); + // if the maxDimensions are in pixels, we apply a matching aspect ratio + visDimensionsCSS = + maxDimensions.unit === 'pixels' + ? getAspectRatioStyles(aspectRatio ?? maxDimensions, workspaceDimensions) + : {}; visDimensionsCSS.maxWidth = `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`; visDimensionsCSS.maxHeight = `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`; } From e92660240e612c6d7c22440ea4647be22a97c315 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 4 Jan 2024 10:39:16 -0700 Subject: [PATCH 70/84] better functional testing --- .../apps/lens/group6/workspace_dimensions.ts | 140 +++++++++++++----- 1 file changed, 101 insertions(+), 39 deletions(-) diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index 7db72736e6ece..ce2bfb42d18f8 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -61,58 +61,64 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); }; - it('adjusts dimension for various chart types', async () => { - const VERTICAL_16_9 = { expectedWidth: '690px', expectedHeight: '388.125px' }; - const HORIZONTAL_16_9 = { expectedWidth: '225px', expectedHeight: '400px' }; - const UNCONSTRAINED = { expectedWidth: '690px', expectedHeight: '400px' }; + const assertWorkspaceAspectRatio = async (expectedRatio: number) => { + const tolerance = 0.05; + + await retry.try(async () => { + const { width, height } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + + expect(pxToN(width) / pxToN(height)).to.within( + expectedRatio - tolerance, + expectedRatio + tolerance + ); + }); + }; + const VERTICAL_16_9 = 16 / 9; + const HORIZONTAL_16_9 = 9 / 16; + const outerWorkspaceDimensions = { width: 690, height: 400 }; + const UNCONSTRAINED = outerWorkspaceDimensions.width / outerWorkspaceDimensions.height; + + it('adjusts dimension for various chart types', async () => { /** * This list is specifically designed to test dimension transitions. * * I have attempted to order the vis types to maximize the number of transitions. */ const visTypes: Array<{ - expectedWidth: string; - expectedHeight: string; id: string; searchText?: string; + expectedHeight?: string; + expectedWidth?: string; + aspectRatio?: number; }> = [ - { id: 'lnsDatatable', ...UNCONSTRAINED }, - { id: 'line', ...VERTICAL_16_9 }, + { id: 'lnsDatatable', aspectRatio: UNCONSTRAINED }, + { id: 'line', aspectRatio: VERTICAL_16_9 }, { - id: 'verticalBullet', - searchText: 'gauge', - // these dimensions are slightly below the requested 300x600 - // that is because the window size isn't large enough to fit the requested dimensions - // and the chart is forced to shrink. - // - // this is a good thing because it makes this a test case for aspect ratio preservation - // even when specific pixel dimensions are requested. - expectedWidth: '200px', - expectedHeight: '400px', + id: 'bar_horizontal_percentage_stacked', + searchText: 'bar', + aspectRatio: HORIZONTAL_16_9, }, - { id: 'bar_horizontal_percentage_stacked', searchText: 'bar', ...HORIZONTAL_16_9 }, - { id: 'lnsLegacyMetric', ...UNCONSTRAINED }, - { id: 'bar_horizontal_stacked', ...HORIZONTAL_16_9 }, - { id: 'donut', ...UNCONSTRAINED }, - { id: 'bar', ...VERTICAL_16_9 }, - { id: 'mosaic', ...UNCONSTRAINED }, - { id: 'bar_percentage_stacked', searchText: 'bar', ...VERTICAL_16_9 }, - { id: 'pie', ...UNCONSTRAINED }, - { id: 'bar_stacked', ...VERTICAL_16_9 }, - { id: 'lnsMetric', expectedWidth: '300px', expectedHeight: '300px' }, - { id: 'area', ...VERTICAL_16_9 }, - { id: 'treemap', ...UNCONSTRAINED }, - { id: 'area_percentage_stacked', searchText: 'area', ...VERTICAL_16_9 }, - { id: 'waffle', ...UNCONSTRAINED }, - { id: 'area_stacked', ...VERTICAL_16_9 }, + { id: 'lnsLegacyMetric', aspectRatio: UNCONSTRAINED }, + { id: 'bar_horizontal_stacked', aspectRatio: HORIZONTAL_16_9 }, + { id: 'donut', aspectRatio: UNCONSTRAINED }, + { id: 'bar', aspectRatio: VERTICAL_16_9 }, + { id: 'mosaic', aspectRatio: UNCONSTRAINED }, + { id: 'bar_percentage_stacked', searchText: 'bar', aspectRatio: VERTICAL_16_9 }, + { id: 'pie', aspectRatio: UNCONSTRAINED }, + { id: 'bar_stacked', aspectRatio: VERTICAL_16_9 }, { - id: 'horizontalBullet', - searchText: 'gauge', - expectedWidth: '600px', + id: 'lnsMetric', + expectedWidth: '300px', expectedHeight: '300px', }, - { id: 'bar_horizontal', ...HORIZONTAL_16_9 }, + { id: 'area', aspectRatio: VERTICAL_16_9 }, + { id: 'treemap', aspectRatio: UNCONSTRAINED }, + { id: 'area_percentage_stacked', searchText: 'area', aspectRatio: VERTICAL_16_9 }, + { id: 'waffle', aspectRatio: UNCONSTRAINED }, + { id: 'area_stacked', aspectRatio: VERTICAL_16_9 }, + + { id: 'bar_horizontal', aspectRatio: HORIZONTAL_16_9 }, // { id: 'heatmap', ...UNCONSTRAINED }, // heatmap blocks render unless it's given two dimensions. This stops the expression renderer from requesting new dimensions. // { id: 'lnsChoropleth', ...UNCONSTRAINED }, // choropleth currently erases all dimensions // { id: 'lnsTagcloud', ...UNCONSTRAINED }, // tag cloud currently erases all dimensions @@ -126,11 +132,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { log.debug(`Testing ${vis.id}... expecting ${vis.expectedWidth}x${vis.expectedHeight}`); - await assertWorkspaceDimensions(vis.expectedWidth, vis.expectedHeight); + if (vis.aspectRatio) { + await assertWorkspaceAspectRatio(vis.aspectRatio); + } else { + await assertWorkspaceDimensions(vis.expectedWidth!, vis.expectedHeight!); + } } }); - it('metric dimensions', async () => { + it('metric dimensions (absolute pixels)', async () => { await retry.try(async () => { await PageObjects.lens.switchToVisualization('lnsMetric'); }); @@ -150,5 +160,57 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await assertWorkspaceDimensions('266.664px', '400px'); }); + + it('gauge dimensions (absolute pixels)', async () => { + await retry.try(async () => { + await PageObjects.lens.switchToVisualization('horizontalBullet', 'gauge'); + }); + + await assertWorkspaceDimensions('600px', '300px'); + + await retry.try(async () => { + await PageObjects.lens.switchToVisualization('verticalBullet', 'gauge'); + }); + + // these dimensions are slightly below the requested 300x600 + // that is because the window size isn't large enough to fit the requested dimensions + // and the chart is forced to shrink. + // + // this is a good thing because it makes this a test case for aspect ratio preservation + // even when specific pixel dimensions are requested. + await assertWorkspaceDimensions('200px', '400px'); + }); + + it('preserves aspect ratio when either dimension is constrained', async () => { + const changeWindowAndAssertAspectRatio = async ( + width: number, + height: number, + expectedRatio: number + ) => { + const { width: currentWidth } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + + await browser.setWindowSize(width, height); + + // this is important so that we don't assert against the old dimensions + await retry.waitFor('workspace width to change', async () => { + const { width: newWidth } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); + return newWidth !== currentWidth; + }); + + await assertWorkspaceAspectRatio(expectedRatio); + }; + + // this test is designed to make sure the correct aspect ratio is preserved + // when the window size is constrained in EITHER width or height + await retry.try(async () => { + await PageObjects.lens.switchToVisualization('bar'); + }); + + // plenty of height, constrained width + await changeWindowAndAssertAspectRatio(1200, 1000, VERTICAL_16_9); + + // plenty of width, constrained height + await changeWindowAndAssertAspectRatio(2000, 600, VERTICAL_16_9); + }); }); } From 6921d6d28d838391312d342a6dc30cf379116b51 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 9 Jan 2024 07:54:36 -0700 Subject: [PATCH 71/84] don't constrain xy-dimensions unless vertical time series --- .../public/components/xy_chart.tsx | 21 +++-- .../apps/lens/group6/workspace_dimensions.ts | 91 +++++++++++++++---- 2 files changed, 83 insertions(+), 29 deletions(-) diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index d54bb007bb342..a958e064c94c2 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -301,14 +301,17 @@ export function XYChart({ const dataLayers: CommonXYDataLayerConfig[] = filteredLayers.filter(isDataLayer); - const chartSizeSpec = { - aspectRatio: isHorizontalChart(dataLayers) - ? { x: 9, y: 16 } - : { - x: 16, - y: 9, - }, - }; + const isTimeViz = isTimeChart(dataLayers); + + const chartSizeSpec: ChartSizeSpec = + isTimeViz && !isHorizontalChart(dataLayers) + ? { + aspectRatio: { + x: 16, + y: 9, + }, + } + : { maxDimensions: { x: 100, y: 100, unit: 'percentage' } }; const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize); @@ -390,8 +393,6 @@ export function XYChart({ (layer) => isDataLayer(layer) && layer.splitAccessors && layer.splitAccessors.length ); - const isTimeViz = isTimeChart(dataLayers); - const defaultXScaleType = isTimeViz ? XScaleTypes.TIME : XScaleTypes.ORDINAL; const isHistogramViz = dataLayers.every((l) => l.isHistogram); diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts index ce2bfb42d18f8..72cfea2b04dce 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts @@ -15,7 +15,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); const log = getService('log'); - describe('lens workspace dimensions', () => { + describe('lens workspace size', () => { let originalWindowSize: { height: number; width: number; @@ -23,9 +23,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { y: number; }; + const DEFAULT_WINDOW_SIZE = [1400, 900]; + before(async () => { originalWindowSize = await browser.getWindowSize(); - await browser.setWindowSize(1400, 900); await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickVisType('lens'); @@ -38,6 +39,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }); }); + beforeEach(async () => { + await browser.setWindowSize(DEFAULT_WINDOW_SIZE[0], DEFAULT_WINDOW_SIZE[1]); + }); + after(async () => { await browser.setWindowSize(originalWindowSize.width, originalWindowSize.height); }); @@ -75,15 +80,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { }; const VERTICAL_16_9 = 16 / 9; - const HORIZONTAL_16_9 = 9 / 16; const outerWorkspaceDimensions = { width: 690, height: 400 }; const UNCONSTRAINED = outerWorkspaceDimensions.width / outerWorkspaceDimensions.height; - it('adjusts dimension for various chart types', async () => { + it('workspace size recovers from special vis types', async () => { /** * This list is specifically designed to test dimension transitions. * * I have attempted to order the vis types to maximize the number of transitions. + * + * Excluding XY charts since they are tested separately. */ const visTypes: Array<{ id: string; @@ -92,33 +98,48 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expectedWidth?: string; aspectRatio?: number; }> = [ + { + id: 'lnsMetric', + expectedWidth: '300px', + expectedHeight: '300px', + }, { id: 'lnsDatatable', aspectRatio: UNCONSTRAINED }, - { id: 'line', aspectRatio: VERTICAL_16_9 }, { - id: 'bar_horizontal_percentage_stacked', - searchText: 'bar', - aspectRatio: HORIZONTAL_16_9, + id: 'lnsMetric', + expectedWidth: '300px', + expectedHeight: '300px', }, { id: 'lnsLegacyMetric', aspectRatio: UNCONSTRAINED }, - { id: 'bar_horizontal_stacked', aspectRatio: HORIZONTAL_16_9 }, + { + id: 'lnsMetric', + expectedWidth: '300px', + expectedHeight: '300px', + }, { id: 'donut', aspectRatio: UNCONSTRAINED }, - { id: 'bar', aspectRatio: VERTICAL_16_9 }, + { + id: 'lnsMetric', + expectedWidth: '300px', + expectedHeight: '300px', + }, { id: 'mosaic', aspectRatio: UNCONSTRAINED }, - { id: 'bar_percentage_stacked', searchText: 'bar', aspectRatio: VERTICAL_16_9 }, + { + id: 'lnsMetric', + expectedWidth: '300px', + expectedHeight: '300px', + }, { id: 'pie', aspectRatio: UNCONSTRAINED }, - { id: 'bar_stacked', aspectRatio: VERTICAL_16_9 }, { id: 'lnsMetric', expectedWidth: '300px', expectedHeight: '300px', }, - { id: 'area', aspectRatio: VERTICAL_16_9 }, { id: 'treemap', aspectRatio: UNCONSTRAINED }, - { id: 'area_percentage_stacked', searchText: 'area', aspectRatio: VERTICAL_16_9 }, + { + id: 'lnsMetric', + expectedWidth: '300px', + expectedHeight: '300px', + }, { id: 'waffle', aspectRatio: UNCONSTRAINED }, - { id: 'area_stacked', aspectRatio: VERTICAL_16_9 }, - - { id: 'bar_horizontal', aspectRatio: HORIZONTAL_16_9 }, // { id: 'heatmap', ...UNCONSTRAINED }, // heatmap blocks render unless it's given two dimensions. This stops the expression renderer from requesting new dimensions. // { id: 'lnsChoropleth', ...UNCONSTRAINED }, // choropleth currently erases all dimensions // { id: 'lnsTagcloud', ...UNCONSTRAINED }, // tag cloud currently erases all dimensions @@ -140,7 +161,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { } }); - it('metric dimensions (absolute pixels)', async () => { + it('metric size (absolute pixels)', async () => { await retry.try(async () => { await PageObjects.lens.switchToVisualization('lnsMetric'); }); @@ -161,7 +182,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await assertWorkspaceDimensions('266.664px', '400px'); }); - it('gauge dimensions (absolute pixels)', async () => { + it('gauge size (absolute pixels)', async () => { await retry.try(async () => { await PageObjects.lens.switchToVisualization('horizontalBullet', 'gauge'); }); @@ -206,11 +227,43 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.switchToVisualization('bar'); }); + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', + operation: 'date_histogram', + field: '@timestamp', + }); + // plenty of height, constrained width await changeWindowAndAssertAspectRatio(1200, 1000, VERTICAL_16_9); // plenty of width, constrained height await changeWindowAndAssertAspectRatio(2000, 600, VERTICAL_16_9); + + await PageObjects.lens.removeDimension('lnsXY_xDimensionPanel'); + }); + + it('XY chart size', async () => { + // XY charts should have 100% width and 100% height unless they are a vertical chart with a time dimension + await retry.try(async () => { + // not important that this is specifically a line chart + await PageObjects.lens.switchToVisualization('line'); + }); + + await assertWorkspaceAspectRatio(UNCONSTRAINED); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', + operation: 'date_histogram', + field: '@timestamp', + }); + + await assertWorkspaceAspectRatio(VERTICAL_16_9); + + await retry.try(async () => { + await PageObjects.lens.switchToVisualization('bar_horizontal_stacked'); + }); + + await assertWorkspaceAspectRatio(UNCONSTRAINED); }); }); } From e9ece42f2966dc7bfacf10e902408341cbdcf261 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Tue, 9 Jan 2024 09:52:30 -0700 Subject: [PATCH 72/84] don't enforce aspect ratio for pixel-style requests --- .../workspace_panel/workspace_panel_wrapper.tsx | 5 ----- x-pack/test/functional/apps/lens/group6/index.ts | 2 +- .../{workspace_dimensions.ts => workspace_size.ts} | 9 ++++----- 3 files changed, 5 insertions(+), 11 deletions(-) rename x-pack/test/functional/apps/lens/group6/{workspace_dimensions.ts => workspace_size.ts} (97%) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 095cf05efa9c0..d328343ecfd34 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -155,11 +155,6 @@ export function WorkspacePanelWrapper({ } if (maxDimensions) { - // if the maxDimensions are in pixels, we apply a matching aspect ratio - visDimensionsCSS = - maxDimensions.unit === 'pixels' - ? getAspectRatioStyles(aspectRatio ?? maxDimensions, workspaceDimensions) - : {}; visDimensionsCSS.maxWidth = `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`; visDimensionsCSS.maxHeight = `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`; } diff --git a/x-pack/test/functional/apps/lens/group6/index.ts b/x-pack/test/functional/apps/lens/group6/index.ts index 490c7a82d48e0..60b9ce859b07f 100644 --- a/x-pack/test/functional/apps/lens/group6/index.ts +++ b/x-pack/test/functional/apps/lens/group6/index.ts @@ -80,7 +80,7 @@ export default ({ getService, loadTestFile, getPageObjects }: FtrProviderContext loadTestFile(require.resolve('./inspector')); // 1m 19s loadTestFile(require.resolve('./error_handling')); // 1m 8s loadTestFile(require.resolve('./lens_tagging')); // 1m 9s - loadTestFile(require.resolve('./workspace_dimensions')); // 1m 30s + loadTestFile(require.resolve('./workspace_size')); // keep these last in the group in this order because they are messing with the default saved objects loadTestFile(require.resolve('./lens_reporting')); // 3m loadTestFile(require.resolve('./rollup')); // 1m 30s diff --git a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts b/x-pack/test/functional/apps/lens/group6/workspace_size.ts similarity index 97% rename from x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts rename to x-pack/test/functional/apps/lens/group6/workspace_size.ts index 72cfea2b04dce..eeff40479ed96 100644 --- a/x-pack/test/functional/apps/lens/group6/workspace_dimensions.ts +++ b/x-pack/test/functional/apps/lens/group6/workspace_size.ts @@ -179,7 +179,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.openDimensionEditor('lnsMetric_breakdownByDimensionPanel'); await testSubjects.setValue('lnsMetric_max_cols', '2'); - await assertWorkspaceDimensions('266.664px', '400px'); + await assertWorkspaceDimensions('400px', '400px'); }); it('gauge size (absolute pixels)', async () => { @@ -193,13 +193,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.switchToVisualization('verticalBullet', 'gauge'); }); - // these dimensions are slightly below the requested 300x600 + // this height is below the requested 600px // that is because the window size isn't large enough to fit the requested dimensions // and the chart is forced to shrink. // - // this is a good thing because it makes this a test case for aspect ratio preservation - // even when specific pixel dimensions are requested. - await assertWorkspaceDimensions('200px', '400px'); + // this is a good thing because it makes this a test case for that scenario + await assertWorkspaceDimensions('300px', '400px'); }); it('preserves aspect ratio when either dimension is constrained', async () => { From b9e1d8a3f0b55c1604f94c6e0331f4d9914cf2d2 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 10 Jan 2024 14:23:13 -0700 Subject: [PATCH 73/84] new XY chart behavior --- src/plugins/chart_expressions/common/types.ts | 25 +++---- .../public/components/gauge_component.tsx | 9 ++- .../expression_renderers/heatmap_renderer.tsx | 5 +- .../metric_vis_renderer.tsx | 5 +- .../public/components/metric_vis.tsx | 5 +- .../partition_vis_renderer.tsx | 5 +- .../tagcloud_renderer.tsx | 5 +- .../public/components/xy_chart.tsx | 11 ++- .../workspace_panel_wrapper.tsx | 18 ++++- .../visualizations/datatable/expression.tsx | 5 +- .../choropleth_chart/expression_renderer.tsx | 5 +- .../apps/lens/group6/workspace_size.ts | 68 ++++++++----------- .../test/functional/page_objects/lens_page.ts | 16 +++++ 13 files changed, 98 insertions(+), 84 deletions(-) diff --git a/src/plugins/chart_expressions/common/types.ts b/src/plugins/chart_expressions/common/types.ts index fd55aa752396b..6413a8f644efc 100644 --- a/src/plugins/chart_expressions/common/types.ts +++ b/src/plugins/chart_expressions/common/types.ts @@ -35,20 +35,17 @@ export interface ChartSizeEvent extends ExpressionRendererEvent { export type ChartSizeUnit = 'pixels' | 'percentage'; -export type ChartSizeSpec = - | { - // if maxDimensions are provided, the aspect ratio will be computed from them - maxDimensions?: { - x: number; - y: number; - unit: ChartSizeUnit; - }; - aspectRatio?: never; - } - | { - aspectRatio?: { x: number; y: number }; - maxDimensions?: never; - }; +interface ChartSizeDimensions { + x?: { value: number; unit: ChartSizeUnit }; + y?: { value: number; unit: ChartSizeUnit }; +} + +export interface ChartSizeSpec { + // if maxDimensions are provided, the aspect ratio will be computed from them + maxDimensions?: ChartSizeDimensions; + minDimensions?: ChartSizeDimensions; + aspectRatio?: { x: number; y: number }; +} export function isChartSizeEvent(event: ExpressionRendererEvent): event is ChartSizeEvent { const expectedName: ChartSizeEvent['name'] = 'chartSize'; diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index 9a5275c82234c..ba66c5678a64c 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -260,15 +260,14 @@ export const GaugeComponent: FC = memo( const chartSizeSpec: ChartSizeSpec = { maxDimensions: { - unit: 'pixels', ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET ? { - x: 600, - y: 300, + x: { value: 600, unit: 'pixels' }, + y: { value: 300, unit: 'pixels' }, } : { - y: 600, - x: 300, + y: { value: 600, unit: 'pixels' }, + x: { value: 300, unit: 'pixels' }, }), }, }; diff --git a/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx index f5cf8e2f9bc59..029a2782f70ac 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx @@ -86,9 +86,8 @@ export const heatmapRenderer: ( name: 'chartSize', data: { maxDimensions: { - x: 100, - y: 100, - unit: 'percentage', + x: { value: 100, unit: 'percentage' }, + y: { value: 100, unit: 'percentage' }, }, }, }; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx index 0547306fba510..be9164101202e 100644 --- a/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx @@ -100,9 +100,8 @@ export const getMetricVisRenderer: ( name: 'chartSize', data: { maxDimensions: { - x: 100, - y: 100, - unit: 'percentage', + x: { value: 100, unit: 'percentage' }, + y: { value: 100, unit: 'percentage' }, }, }, }; diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index b30b1e1022efa..cc4730b19f8db 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -168,9 +168,8 @@ export const MetricVis = ({ name: 'chartSize', data: { maxDimensions: { - y: grid.current.length * maxTileSideLength, - x: grid.current[0]?.length * maxTileSideLength, - unit: 'pixels', + y: { value: grid.current.length * maxTileSideLength, unit: 'pixels' }, + x: { value: grid.current[0]?.length * maxTileSideLength, unit: 'pixels' }, }, }, }; diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx index 3d487f13e0c0b..ac8a053f37ebd 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx @@ -121,9 +121,8 @@ export const getPartitionVisRenderer: ( name: 'chartSize', data: { maxDimensions: { - x: 100, - y: 100, - unit: 'percentage', + x: { value: 100, unit: 'percentage' }, + y: { value: 100, unit: 'percentage' }, }, }, }; diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx index fa250f03069ab..8dd3d7eb09358 100644 --- a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx +++ b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx @@ -74,9 +74,8 @@ export const tagcloudRenderer: ( name: 'chartSize', data: { maxDimensions: { - x: 100, - y: 100, - unit: 'percentage', + x: { value: 100, unit: 'percentage' }, + y: { value: 100, unit: 'percentage' }, }, }, }; diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index a958e064c94c2..6e3536b07c519 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -310,8 +310,17 @@ export function XYChart({ x: 16, y: 9, }, + minDimensions: { + y: { value: 300, unit: 'pixels' }, + x: { value: 100, unit: 'percentage' }, + }, } - : { maxDimensions: { x: 100, y: 100, unit: 'percentage' } }; + : { + maxDimensions: { + x: { value: 100, unit: 'percentage' }, + y: { value: 100, unit: 'percentage' }, + }, + }; const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize); diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index d328343ecfd34..6d6e98cb478aa 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -147,6 +147,7 @@ export function WorkspacePanelWrapper({ const aspectRatio = displayOptions?.aspectRatio; const maxDimensions = displayOptions?.maxDimensions; + const minDimensions = displayOptions?.minDimensions; let visDimensionsCSS: Interpolation = {}; @@ -155,8 +156,21 @@ export function WorkspacePanelWrapper({ } if (maxDimensions) { - visDimensionsCSS.maxWidth = `${maxDimensions.x}${unitToCSSUnit[maxDimensions.unit]}`; - visDimensionsCSS.maxHeight = `${maxDimensions.y}${unitToCSSUnit[maxDimensions.unit]}`; + visDimensionsCSS.maxWidth = maxDimensions.x + ? `${maxDimensions.x.value}${unitToCSSUnit[maxDimensions.x.unit]}` + : ''; + visDimensionsCSS.maxHeight = maxDimensions.y + ? `${maxDimensions.y.value}${unitToCSSUnit[maxDimensions.y.unit]}` + : ''; + } + + if (minDimensions) { + visDimensionsCSS.minWidth = minDimensions.x + ? `${minDimensions.x.value}${unitToCSSUnit[minDimensions.x.unit]}` + : ''; + visDimensionsCSS.minHeight = minDimensions.y + ? `${minDimensions.y.value}${unitToCSSUnit[minDimensions.y.unit]}` + : ''; } return ( diff --git a/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx b/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx index b70b4dd15f43a..eae35c5a925dc 100644 --- a/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx +++ b/x-pack/plugins/lens/public/visualizations/datatable/expression.tsx @@ -108,9 +108,8 @@ export const getDatatableRenderer = (dependencies: { name: 'chartSize', data: { maxDimensions: { - x: 100, - y: 100, - unit: 'percentage', + x: { value: 100, unit: 'percentage' }, + y: { value: 100, unit: 'percentage' }, }, }, }; diff --git a/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx b/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx index 8b8e385b8e244..059d612883d82 100644 --- a/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx +++ b/x-pack/plugins/maps/public/lens/choropleth_chart/expression_renderer.tsx @@ -97,9 +97,8 @@ export function getExpressionRenderer(coreSetup: CoreSetup { + const actualStyles = await PageObjects.lens.getWorkspaceVisContainerStyles(); + + expect(actualStyles).to.eql(expectedStyles); + }; + const VERTICAL_16_9 = 16 / 9; const outerWorkspaceDimensions = { width: 690, height: 400 }; const UNCONSTRAINED = outerWorkspaceDimensions.width / outerWorkspaceDimensions.height; @@ -201,46 +213,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await assertWorkspaceDimensions('300px', '400px'); }); - it('preserves aspect ratio when either dimension is constrained', async () => { - const changeWindowAndAssertAspectRatio = async ( - width: number, - height: number, - expectedRatio: number - ) => { - const { width: currentWidth } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); - - await browser.setWindowSize(width, height); - - // this is important so that we don't assert against the old dimensions - await retry.waitFor('workspace width to change', async () => { - const { width: newWidth } = await PageObjects.lens.getWorkspaceVisContainerDimensions(); - return newWidth !== currentWidth; - }); - - await assertWorkspaceAspectRatio(expectedRatio); - }; - - // this test is designed to make sure the correct aspect ratio is preserved - // when the window size is constrained in EITHER width or height - await retry.try(async () => { - await PageObjects.lens.switchToVisualization('bar'); - }); - - await PageObjects.lens.configureDimension({ - dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', - operation: 'date_histogram', - field: '@timestamp', - }); - - // plenty of height, constrained width - await changeWindowAndAssertAspectRatio(1200, 1000, VERTICAL_16_9); - - // plenty of width, constrained height - await changeWindowAndAssertAspectRatio(2000, 600, VERTICAL_16_9); - - await PageObjects.lens.removeDimension('lnsXY_xDimensionPanel'); - }); - it('XY chart size', async () => { // XY charts should have 100% width and 100% height unless they are a vertical chart with a time dimension await retry.try(async () => { @@ -248,7 +220,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.lens.switchToVisualization('line'); }); - await assertWorkspaceAspectRatio(UNCONSTRAINED); + await assertWorkspaceStyles({ + aspectRatio: 'auto', + minHeight: 'auto', + minWidth: 'auto', + maxHeight: '100%', + maxWidth: '100%', + }); await PageObjects.lens.configureDimension({ dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', @@ -256,6 +234,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { field: '@timestamp', }); + await assertWorkspaceStyles({ + aspectRatio: '16 / 9', + minHeight: '300px', + minWidth: '100%', + maxHeight: 'none', + maxWidth: 'none', + }); + await assertWorkspaceAspectRatio(VERTICAL_16_9); await retry.try(async () => { diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index afd8273d4222b..d23d91ee1f4ee 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1957,5 +1957,21 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return { width, height }; }, + + async getWorkspaceVisContainerStyles() { + const visContainer = await testSubjects.find('lnsWorkspacePanelWrapper__innerContent'); + const [width, height, maxWidth, maxHeight, minWidth, minHeight, aspectRatio] = + await Promise.all([ + visContainer.getComputedStyle('width'), + visContainer.getComputedStyle('height'), + visContainer.getComputedStyle('max-width'), + visContainer.getComputedStyle('max-height'), + visContainer.getComputedStyle('min-width'), + visContainer.getComputedStyle('min-height'), + visContainer.getComputedStyle('aspect-ratio'), + ]); + + return { width, height, maxWidth, maxHeight, minWidth, minHeight, aspectRatio }; + }, }); } From c35c408f407b8f102cae4269e93123b3be74ca8f Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 10 Jan 2024 14:28:01 -0700 Subject: [PATCH 74/84] remove now-unnecessary resize observer --- .../workspace_panel_wrapper.tsx | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 6d6e98cb478aa..acc49c4826846 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -7,8 +7,7 @@ import './workspace_panel_wrapper.scss'; -import { useResizeObserver } from '@elastic/eui'; -import React, { useCallback, useRef } from 'react'; +import React, { useCallback } from 'react'; import { EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui'; import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -58,16 +57,10 @@ const unitToCSSUnit: Record = { percentage: '%', }; -const getAspectRatioStyles = ( - { x, y }: { x: number; y: number }, - parentDimensions: { width: number; height: number } -) => { - const parentAspectRatio = parentDimensions.width / parentDimensions.height; - const aspectRatio = x / y; - +const getAspectRatioStyles = ({ x, y }: { x: number; y: number }) => { return { aspectRatio: `${x}/${y}`, - ...(parentAspectRatio > aspectRatio + ...(y > x ? { height: '100%', width: 'auto', @@ -142,9 +135,6 @@ export function WorkspacePanelWrapper({ const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null; const userMessages = getUserMessages('toolbar'); - const outerWorkspaceRef = useRef(null); - const workspaceDimensions = useResizeObserver(outerWorkspaceRef.current); - const aspectRatio = displayOptions?.aspectRatio; const maxDimensions = displayOptions?.maxDimensions; const minDimensions = displayOptions?.minDimensions; @@ -152,7 +142,7 @@ export function WorkspacePanelWrapper({ let visDimensionsCSS: Interpolation = {}; if (aspectRatio) { - visDimensionsCSS = getAspectRatioStyles(aspectRatio ?? maxDimensions, workspaceDimensions); + visDimensionsCSS = getAspectRatioStyles(aspectRatio ?? maxDimensions); } if (maxDimensions) { @@ -264,7 +254,6 @@ export function WorkspacePanelWrapper({ color="transparent" > Date: Wed, 10 Jan 2024 14:34:35 -0700 Subject: [PATCH 75/84] remove drag-drop border --- .../editor_frame/workspace_panel/workspace_panel_wrapper.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss index f5fe31395a48d..0e0ea398aaf3c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss @@ -46,8 +46,6 @@ } .lnsWorkspacePanel__dragDrop { - border: $euiBorderWidthThin solid transparent; - &.domDragDrop-isDropTarget { p { transition: filter $euiAnimSpeedFast ease-in-out; @@ -185,4 +183,4 @@ width: 100%; z-index: 1; background-color: $euiColorLightestShade; -} +} \ No newline at end of file From 81618a31d3aede034e4e264bc374fbbfcd30d9dc Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 10 Jan 2024 16:04:06 -0700 Subject: [PATCH 76/84] fix jest test --- .../public/components/metric_vis.test.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx index acebdc3b1bb0b..ed57f38ec886f 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx @@ -877,9 +877,14 @@ describe('MetricVisComponent', function () { expect(getDimensionsRequest(false)).toMatchInlineSnapshot(` Object { "maxDimensions": Object { - "unit": "pixels", - "x": 300, - "y": 300, + "x": Object { + "unit": "pixels", + "value": 300, + }, + "y": Object { + "unit": "pixels", + "value": 300, + }, }, } `); @@ -887,9 +892,14 @@ describe('MetricVisComponent', function () { expect(getDimensionsRequest(true)).toMatchInlineSnapshot(` Object { "maxDimensions": Object { - "unit": "pixels", - "x": 1000, - "y": 400, + "x": Object { + "unit": "pixels", + "value": 1000, + }, + "y": Object { + "unit": "pixels", + "value": 400, + }, }, } `); From 12030b093f615c03abe5f2ab013ea08a55fbf777 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 11 Jan 2024 07:26:23 -0700 Subject: [PATCH 77/84] try to only show veil when resize actually occurs --- .../common/chart_size_transition_veil.tsx | 34 +++++++++++++------ .../public/components/gauge_component.tsx | 10 ++++-- .../public/components/xy_chart.tsx | 9 +++-- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx index 1761ce385f81f..f5ae32311c80b 100644 --- a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx +++ b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx @@ -16,28 +16,40 @@ import type { ChartSizeSpec } from './types'; * in response to a change in the container dimensions. * * It is only relevant if client dimensions are being requested based on chart configuration. + * + * This whole feature is a nice-to-have. If it proves to be a source of bugs, + * we can consider removing it and accepting the aesthetic drawback. */ export function useSizeTransitionVeil( chartSizeSpec: ChartSizeSpec, - setChartSize: (d: ChartSizeSpec) => void + setChartSize: (d: ChartSizeSpec) => void, + containerSize: { width: number; height: number } ) { const [showVeil, setShowVeil] = useState(false); const currentChartSizeSpec = useRef(); + const specJustChanged = useRef(false); + const currentContainerSize = useRef<{ width: number; height: number }>(containerSize); - if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) { - // If the dimensions have changed we request new dimensions from the client - // and set off a chain of events: + if (!fastIsEqual(containerSize, currentContainerSize.current) && specJustChanged.current) { + // If the container size has changed, we need to show the veil to hide the chart since it + // be rendered based on the previous container size before being updated to the current size. // - // 1. we show the veil to hide step 4 - // 2. the charts library will plan a render - // 3. the client will resize the container - // 4. the charts library will render the chart based on the original container dimensions - // 5. the charts library will resize the chart to the updated container dimensions - // 6. we hide the veil + // 1. we show the veil + // 2. the charts library will render the chart based on the previous container dimensions + // 3. the charts library will resize the chart to the updated container dimensions + // 4. we hide the veil + setShowVeil(true); + currentContainerSize.current = containerSize; + } + if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) { setChartSize(chartSizeSpec); - setShowVeil(true); currentChartSizeSpec.current = chartSizeSpec; + specJustChanged.current = true; + + setTimeout(() => { + specJustChanged.current = false; + }, 500); } const onResize = useCallback(() => { diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index ba66c5678a64c..ae04028fa1a33 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -5,7 +5,8 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { FC, memo, useCallback } from 'react'; +import React, { FC, memo, useCallback, useRef } from 'react'; +import { useResizeObserver } from '@elastic/eui'; import { Chart, Goal, Settings } from '@elastic/charts'; import { FormattedMessage } from '@kbn/i18n-react'; import type { PaletteOutput } from '@kbn/coloring'; @@ -258,6 +259,9 @@ export const GaugeComponent: FC = memo( [renderComplete] ); + const wrapperRef = useRef(null); + const containerSize = useResizeObserver(wrapperRef.current); + const chartSizeSpec: ChartSizeSpec = { maxDimensions: { ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET @@ -272,7 +276,7 @@ export const GaugeComponent: FC = memo( }, }; - const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize); + const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize, containerSize); const table = data; const accessors = getAccessorsFromArgs(args, table.columns); @@ -380,7 +384,7 @@ export const GaugeComponent: FC = memo( : {}; return ( -
+
{veil} (null); + const containerSize = useResizeObserver(wrapperRef.current); + const chartSizeSpec: ChartSizeSpec = isTimeViz && !isHorizontalChart(dataLayers) ? { @@ -322,7 +325,7 @@ export function XYChart({ }, }; - const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize); + const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize, containerSize); const formattedDatatables = useMemo( () => @@ -740,7 +743,7 @@ export function XYChart({ ); return ( -
+
{veil} {showLegend !== undefined && uiState && ( Date: Thu, 11 Jan 2024 12:24:51 -0700 Subject: [PATCH 78/84] fix initial dimension computation --- .../common/chart_size_transition_veil.tsx | 21 +++++++++++++++---- .../public/components/gauge_component.tsx | 10 +++------ .../public/components/xy_chart.tsx | 9 +++----- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx index f5ae32311c80b..31c6ee7328db0 100644 --- a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx +++ b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx @@ -6,9 +6,10 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { useEffect } from 'react'; import { useCallback, useRef, useState } from 'react'; import fastIsEqual from 'fast-deep-equal'; +import { useResizeObserver } from '@elastic/eui'; import type { ChartSizeSpec } from './types'; /** @@ -22,13 +23,24 @@ import type { ChartSizeSpec } from './types'; */ export function useSizeTransitionVeil( chartSizeSpec: ChartSizeSpec, - setChartSize: (d: ChartSizeSpec) => void, - containerSize: { width: number; height: number } + setChartSize: (d: ChartSizeSpec) => void ) { + const containerRef = useRef(null); + const containerSize = useResizeObserver(containerRef.current); + const currentContainerSize = useRef<{ width: number; height: number }>(containerSize); + + // This useEffect hook is here to make up for the fact that the initial container size + // is not correctly reported by the useResizeObserver hook (see https://github.com/elastic/eui/issues/7458). + useEffect(() => { + currentContainerSize.current = { + width: containerRef.current?.clientWidth ?? 0, + height: containerRef.current?.clientHeight ?? 0, + }; + }, []); + const [showVeil, setShowVeil] = useState(false); const currentChartSizeSpec = useRef(); const specJustChanged = useRef(false); - const currentContainerSize = useRef<{ width: number; height: number }>(containerSize); if (!fastIsEqual(containerSize, currentContainerSize.current) && specJustChanged.current) { // If the container size has changed, we need to show the veil to hide the chart since it @@ -70,5 +82,6 @@ export function useSizeTransitionVeil( /> ), onResize, + containerRef, }; } diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index ae04028fa1a33..d389fe483b0dc 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -5,8 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { FC, memo, useCallback, useRef } from 'react'; -import { useResizeObserver } from '@elastic/eui'; +import React, { FC, memo, useCallback } from 'react'; import { Chart, Goal, Settings } from '@elastic/charts'; import { FormattedMessage } from '@kbn/i18n-react'; import type { PaletteOutput } from '@kbn/coloring'; @@ -259,9 +258,6 @@ export const GaugeComponent: FC = memo( [renderComplete] ); - const wrapperRef = useRef(null); - const containerSize = useResizeObserver(wrapperRef.current); - const chartSizeSpec: ChartSizeSpec = { maxDimensions: { ...(gaugeType === GaugeShapes.HORIZONTAL_BULLET @@ -276,7 +272,7 @@ export const GaugeComponent: FC = memo( }, }; - const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize, containerSize); + const { veil, onResize, containerRef } = useSizeTransitionVeil(chartSizeSpec, setChartSize); const table = data; const accessors = getAccessorsFromArgs(args, table.columns); @@ -384,7 +380,7 @@ export const GaugeComponent: FC = memo( : {}; return ( -
+
{veil} (null); - const containerSize = useResizeObserver(wrapperRef.current); - const chartSizeSpec: ChartSizeSpec = isTimeViz && !isHorizontalChart(dataLayers) ? { @@ -325,7 +322,7 @@ export function XYChart({ }, }; - const { veil, onResize } = useSizeTransitionVeil(chartSizeSpec, setChartSize, containerSize); + const { veil, onResize, containerRef } = useSizeTransitionVeil(chartSizeSpec, setChartSize); const formattedDatatables = useMemo( () => @@ -743,7 +740,7 @@ export function XYChart({ ); return ( -
+
{veil} {showLegend !== undefined && uiState && ( Date: Thu, 11 Jan 2024 12:28:06 -0700 Subject: [PATCH 79/84] move things to useEffect hooks --- .../common/chart_size_transition_veil.tsx | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx index 31c6ee7328db0..1cd91229eb403 100644 --- a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx +++ b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx @@ -42,27 +42,31 @@ export function useSizeTransitionVeil( const currentChartSizeSpec = useRef(); const specJustChanged = useRef(false); - if (!fastIsEqual(containerSize, currentContainerSize.current) && specJustChanged.current) { - // If the container size has changed, we need to show the veil to hide the chart since it - // be rendered based on the previous container size before being updated to the current size. - // - // 1. we show the veil - // 2. the charts library will render the chart based on the previous container dimensions - // 3. the charts library will resize the chart to the updated container dimensions - // 4. we hide the veil - setShowVeil(true); - currentContainerSize.current = containerSize; - } + useEffect(() => { + if (!fastIsEqual(containerSize, currentContainerSize.current) && specJustChanged.current) { + // If the container size has changed, we need to show the veil to hide the chart since it + // be rendered based on the previous container size before being updated to the current size. + // + // 1. we show the veil + // 2. the charts library will render the chart based on the previous container dimensions + // 3. the charts library will resize the chart to the updated container dimensions + // 4. we hide the veil + setShowVeil(true); + currentContainerSize.current = containerSize; + } + }, [setShowVeil, containerSize]); - if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) { - setChartSize(chartSizeSpec); - currentChartSizeSpec.current = chartSizeSpec; - specJustChanged.current = true; + useEffect(() => { + if (!fastIsEqual(chartSizeSpec, currentChartSizeSpec.current)) { + setChartSize(chartSizeSpec); + currentChartSizeSpec.current = chartSizeSpec; + specJustChanged.current = true; - setTimeout(() => { - specJustChanged.current = false; - }, 500); - } + setTimeout(() => { + specJustChanged.current = false; + }, 500); + } + }, [chartSizeSpec, setChartSize]); const onResize = useCallback(() => { setShowVeil(false); From 71f29b3b1bb026f9a37d4ebd9eabba9ccff68a58 Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 11 Jan 2024 13:30:56 -0700 Subject: [PATCH 80/84] update snapshots and veil color --- .../common/chart_size_transition_veil.tsx | 3 +- .../__snapshots__/xy_chart.test.tsx.snap | 26722 ++++++---------- 2 files changed, 10206 insertions(+), 16519 deletions(-) diff --git a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx index 1cd91229eb403..d1c9e4475d1a1 100644 --- a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx +++ b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx @@ -10,6 +10,7 @@ import React, { useEffect } from 'react'; import { useCallback, useRef, useState } from 'react'; import fastIsEqual from 'fast-deep-equal'; import { useResizeObserver } from '@elastic/eui'; +import { euiThemeVars } from '@kbn/ui-theme'; import type { ChartSizeSpec } from './types'; /** @@ -78,7 +79,7 @@ export function useSizeTransitionVeil( css={{ height: '100%', width: '100%', - backgroundColor: 'white', + backgroundColor: euiThemeVars.euiColorEmptyShade, position: 'absolute', zIndex: 1, display: showVeil ? 'block' : 'none', diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 561e65088a5d3..a2f62afd3aee6 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -303,8 +303,8 @@ exports[`XYChart component it renders area 1`] = `
+ + +
+`; + +exports[`XYChart component it renders horizontal bar 1`] = ` +
+
+ + + + - - -
-`; - -exports[`XYChart component it renders horizontal bar 1`] = ` -
-
- - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={90} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, + }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, + }, + "markSizeRatio": undefined, }, - "chartPaddings": Object { - "bottom": 0, - "left": 0, - "right": 0, - "top": 0, - }, - "colors": Object { - "defaultVizColor": "#6092C0", - "vizColors": Array [ - "#54B399", - "#6092C0", - "#9170B8", - "#CA8EAE", - "#D36086", - "#E7664C", - "#AA6556", - "#DA8B45", - "#B9A888", - "#D6BF57", - ], + Object {}, + ] + } + /> + + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={90} - showLegend={false} - showLegendExtra={false} - theme={ + isDarkMode={false} + layers={ Array [ Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "accessors": Array [ + "a", + "b", + ], + "columnToLabel": "{\\"a\\": \\"Label A\\", \\"b\\": \\"Label B\\", \\"d\\": \\"Label D\\"}", + "isHistogram": false, + "isHorizontal": true, + "isPercentage": false, + "isStacked": false, + "layerId": "first", + "layerType": "data", + "palette": Object { + "name": "mock", + "params": Object {}, + "type": "palette", }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "seriesType": "bar", + "showLines": true, + "splitAccessors": Array [ + "d", + ], + "table": Object { + "columns": Array [ + Object { + "id": "a", + "meta": Object { + "params": Object { + "id": "number", + "params": Object { + "pattern": "0,0.000", + }, + }, + "type": "number", + }, + "name": "a", + }, + Object { + "id": "b", + "meta": Object { + "params": Object { + "id": "number", + "params": Object { + "pattern": "000,0", + }, + }, + "type": "number", + }, + "name": "b", + }, + Object { + "id": "c", + "meta": Object { + "field": "order_date", + "params": Object { + "id": "string", + }, + "sourceParams": Object { + "params": Object { + "interval": "auto", + }, + "type": "date-histogram", + }, + "type": "date", + }, + "name": "c", + }, + Object { + "id": "d", + "meta": Object { + "type": "string", + }, + "name": "ColD", + }, + ], + "rows": Array [ + Object { + "a": 1, + "b": 2, + "c": 1652034840000, + "d": "Foo", + }, + Object { + "a": 1, + "b": 5, + "c": 1652122440000, + "d": "Bar", + }, + ], + "type": "datatable", }, - "markSizeRatio": undefined, + "type": "dataLayer", + "xAccessor": "c", + "xScaleType": "ordinal", }, - Object {}, ] } - /> - - - - - + +
+`; + +exports[`XYChart component it renders line 1`] = ` +
+
+ + + + - - -
-`; - -exports[`XYChart component it renders line 1`] = ` -
-
- - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, }, - "crossLine": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - "line": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, }, + "markSizeRatio": undefined, }, - "flamegraph": Object { - "navigation": Object { - "buttonBackgroundColor": "#CCE4F5", - "buttonDisabledBackgroundColor": "#D3DAE626", - "buttonDisabledTextColor": "#A2ABBA", - "buttonTextColor": "#0061A6", - "textColor": "#343741", - }, - "scrollbarThumb": "#343741", - "scrollbarTrack": "#D3DAE6", + Object {}, + ] + } + /> + + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ + isDarkMode={false} + layers={ Array [ Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, - }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "accessors": Array [ + "a", + "b", + ], + "columnToLabel": "{\\"a\\": \\"Label A\\", \\"b\\": \\"Label B\\", \\"d\\": \\"Label D\\"}", + "isHistogram": false, + "isHorizontal": false, + "isPercentage": false, + "isStacked": false, + "layerId": "first", + "layerType": "data", + "palette": Object { + "name": "mock", + "params": Object {}, + "type": "palette", }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - + + +
+`; + +exports[`XYChart component it renders stacked area 1`] = ` +
+
+ + + + - - -
-`; - -exports[`XYChart component it renders stacked area 1`] = ` -
-
- - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, }, - "rectBorder": Object { - "strokeWidth": 1, - "visible": false, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - }, - "bubbleSeriesStyle": Object { - "point": Object { - "fill": "white", - "opacity": 1, - "radius": 2, - "strokeWidth": 1, - "visible": true, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, }, + "markSizeRatio": undefined, }, - "bulletGraph": Object { - "angularTickLabelPadding": 10, - "barBackground": "#343741", - "border": "#EDF0F5", - "colorBands": Array [ - "#D9C6EF", - "#AA87D1", - ], - "fallbackBandColor": "#98A2B3", - "minHeight": 64, - "nonFiniteText": "N/A", - "textColor": "#343741", + Object {}, + ] + } + /> + + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ + isDarkMode={false} + layers={ Array [ Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "accessors": Array [ + "a", + "b", + ], + "columnToLabel": "{\\"a\\": \\"Label A\\", \\"b\\": \\"Label B\\", \\"d\\": \\"Label D\\"}", + "isHistogram": false, + "isHorizontal": false, + "isPercentage": false, + "isStacked": true, + "layerId": "first", + "layerType": "data", + "palette": Object { + "name": "mock", + "params": Object {}, + "type": "palette", }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "seriesType": "area", + "showLines": true, + "splitAccessors": Array [ + "d", + ], + "table": Object { + "columns": Array [ + Object { + "id": "a", + "meta": Object { + "params": Object { + "id": "number", + "params": Object { + "pattern": "0,0.000", + }, + }, + "type": "number", + }, + "name": "a", + }, + Object { + "id": "b", + "meta": Object { + "params": Object { + "id": "number", + "params": Object { + "pattern": "000,0", + }, + }, + "type": "number", + }, + "name": "b", + }, + Object { + "id": "c", + "meta": Object { + "field": "order_date", + "params": Object { + "id": "string", + }, + "sourceParams": Object { + "params": Object { + "interval": "auto", + }, + "type": "date-histogram", + }, + "type": "date", + }, + "name": "c", + }, + Object { + "id": "d", + "meta": Object { + "type": "string", + }, + "name": "ColD", + }, + ], + "rows": Array [ + Object { + "a": 1, + "b": 2, + "c": 1652034840000, + "d": "Foo", + }, + Object { + "a": 1, + "b": 5, + "c": 1652122440000, + "d": "Bar", + }, + ], + "type": "datatable", }, - "markSizeRatio": undefined, + "type": "dataLayer", + "xAccessor": "c", + "xScaleType": "ordinal", }, - Object {}, ] } - /> - - - - - + + +
+`; + +exports[`XYChart component it renders stacked bar 1`] = ` +
+
+ + + + - - -
-`; - -exports[`XYChart component it renders stacked bar 1`] = ` -
-
- - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ Array [ Object { - "disabled": [Function], - "label": [Function], - "onSelect": [Function], - }, - Object { - "disabled": [Function], - "label": [Function], - "onSelect": [Function], + "background": Object { + "color": undefined, + }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, + }, + "markSizeRatio": undefined, }, + Object {}, ] } - headerFormatter={[Function]} - type="vertical" /> - + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ + yAxesConfiguration={ Array [ Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "extent": Object { + "mode": "full", + "type": "axisExtentConfig", }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, + "formatter": Object { + "convert": [MockFunction] { + "calls": Array [ + Array [ + 1652034840000, + ], + Array [ + 1652122440000, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": 1652034840000, + }, + Object { + "type": "return", + "value": 1652122440000, + }, + ], }, }, - "markSizeRatio": undefined, + "groupId": "left", + "labelsOrientation": -90, + "position": "left", + "series": Array [ + Object { + "accessor": "a", + "layer": "first", + }, + Object { + "accessor": "b", + "layer": "first", + }, + ], + "showGridLines": false, + "showLabels": false, + "showTitle": true, + "title": "", + "type": "yAxisConfig", }, - Object {}, ] } /> - - - + +
+`; + +exports[`XYChart component it renders stacked horizontal bar 1`] = ` +
+
+ - - + + + - - -
-`; - -exports[`XYChart component it renders stacked horizontal bar 1`] = ` -
-
- - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={90} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, }, - "line": Object { - "dash": Array [ - 4, - 4, - ], - "stroke": "#69707D", - "strokeWidth": 1, - "visible": true, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - }, - "flamegraph": Object { - "navigation": Object { - "buttonBackgroundColor": "#CCE4F5", - "buttonDisabledBackgroundColor": "#D3DAE626", - "buttonDisabledTextColor": "#A2ABBA", - "buttonTextColor": "#0061A6", - "textColor": "#343741", + "legend": Object { + "labelOptions": Object { + "maxLines": 0, + }, }, - "scrollbarThumb": "#343741", - "scrollbarTrack": "#D3DAE6", + "markSizeRatio": undefined, }, - "goal": Object { - "arcBoxSamplePitch": 0.08726646259971647, - "barThicknessMinSizeRatio": 0.1, - "baselineArcThickness": 32, - "baselineBarThickness": 32, - "capturePad": 16, - "majorCenterLabel": Object { - "fill": "#343741", - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", - "fontStyle": "normal", - }, - "majorLabel": Object { - "fill": "#343741", - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", - "fontStyle": "normal", - }, - "marginRatio": 0.05, - "maxBulletSize": 500, - "maxCentralFontSize": 38, - "maxCircularSize": 360, - "maxFontSize": 64, - "maxLabelFontSize": 32, - "maxTickFontSize": 24, - "minFontSize": 8, - "minorCenterLabel": Object { - "fill": "#646a77", - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", - "fontStyle": "normal", - }, - "minorLabel": Object { - "fill": "#646a77", - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", - "fontStyle": "normal", - }, - "progressLine": Object { - "stroke": "#343741", - }, - "targetLine": Object { - "stroke": "#343741", - }, - "tickLabel": Object { - "fill": "#646a77", - "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", - "fontStyle": "normal", - }, - "tickLine": Object { - "stroke": "#98A2B3", - }, + Object {}, + ] + } + /> + + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={90} - showLegend={false} - showLegendExtra={false} - theme={ + isDarkMode={false} + layers={ Array [ Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, - }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "accessors": Array [ + "a", + "b", + ], + "columnToLabel": "{\\"a\\": \\"Label A\\", \\"b\\": \\"Label B\\", \\"d\\": \\"Label D\\"}", + "isHistogram": false, + "isHorizontal": true, + "isPercentage": false, + "isStacked": true, + "layerId": "first", + "layerType": "data", + "palette": Object { + "name": "mock", + "params": Object {}, + "type": "palette", }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - + + +
+`; + +exports[`XYChart component split chart should render split chart if both, splitRowAccessor and splitColumnAccessor are specified 1`] = ` +
+
+ + + + - - -
-`; - -exports[`XYChart component split chart should render split chart if both, splitRowAccessor and splitColumnAccessor are specified 1`] = ` -
-
- + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, + }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, }, }, - "b": Object { - "id": "number", + "markSizeRatio": undefined, + }, + Object {}, + ] + } + /> + + + - - - + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ + isDarkMode={false} + layers={ Array [ Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "accessors": Array [ + "a", + "b", + ], + "columnToLabel": "{\\"a\\": \\"Label A\\", \\"b\\": \\"Label B\\", \\"d\\": \\"Label D\\"}", + "isHistogram": false, + "isHorizontal": false, + "isPercentage": false, + "isStacked": false, + "layerId": "first", + "layerType": "data", + "palette": Object { + "name": "mock", + "params": Object {}, + "type": "palette", }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "seriesType": "bar", + "showLines": true, + "splitAccessors": Array [ + "d", + ], + "table": Object { + "columns": Array [ + Object { + "id": "a", + "meta": Object { + "params": Object { + "id": "number", + "params": Object { + "pattern": "0,0.000", + }, + }, + "type": "number", + }, + "name": "a", + }, + Object { + "id": "b", + "meta": Object { + "params": Object { + "id": "number", + "params": Object { + "pattern": "000,0", + }, + }, + "type": "number", + }, + "name": "b", + }, + Object { + "id": "c", + "meta": Object { + "field": "order_date", + "params": Object { + "id": "string", + }, + "sourceParams": Object { + "params": Object { + "interval": "auto", + }, + "type": "date-histogram", + }, + "type": "date", + }, + "name": "c", + }, + Object { + "id": "d", + "meta": Object { + "type": "string", + }, + "name": "ColD", + }, + ], + "rows": Array [ + Object { + "a": 1, + "b": 2, + "c": 1652034840000, + "d": "Foo", + }, + Object { + "a": 1, + "b": 5, + "c": 1652122440000, + "d": "Bar", + }, + ], + "type": "datatable", }, - "markSizeRatio": undefined, + "type": "dataLayer", + "xAccessor": "c", + "xScaleType": "ordinal", }, - Object {}, ] } - /> - - - - + +
+`; + +exports[`XYChart component split chart should render split chart if splitColumnAccessor is specified 1`] = ` +
+
+ - - + + + - - -
-`; - -exports[`XYChart component split chart should render split chart if splitColumnAccessor is specified 1`] = ` -
-
- - - - - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, + "progressLine": Object { + "stroke": "#343741", }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, + "targetLine": Object { + "stroke": "#343741", }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, + "tickLabel": Object { + "fill": "#646a77", + "fontFamily": "Inter, BlinkMacSystemFont, Helvetica, Arial, sans-serif", + "fontStyle": "normal", }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, + }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, + }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, }, - ], - Array [ - Object { + }, + "markSizeRatio": undefined, + }, + Object {}, + ] + } + /> + + + + + + - } - onBrushEnd={[Function]} - onElementClick={[Function]} - onPointerUpdate={[Function]} - onRenderChange={[Function]} - onResize={[Function]} - rotation={0} - showLegend={false} - showLegendExtra={false} - theme={ - Array [ - Object { - "background": Object { - "color": undefined, - }, - "barSeriesStyle": Object {}, - "chartMargins": Object { - "bottom": 10, - "left": 10, - "right": 10, - "top": 10, - }, - "legend": Object { - "labelOptions": Object { - "maxLines": 0, - }, - }, - "markSizeRatio": undefined, - }, - Object {}, - ] - } - /> - - - - - - + } + onBrushEnd={[Function]} + onElementClick={[Function]} + onPointerUpdate={[Function]} + onRenderChange={[Function]} + onResize={[Function]} + rotation={0} + showLegend={false} + showLegendExtra={false} + theme={ + Array [ + Object { + "background": Object { + "color": undefined, }, - "xAccessors": Object { - "c": Object { - "id": "string", - }, + "barSeriesStyle": Object {}, + "chartMargins": Object { + "bottom": 10, + "left": 10, + "right": 10, + "top": 10, }, - "yAccessors": Object { - "a": Object { - "id": "number", - "params": Object { - "pattern": "0,0.000", - }, - }, - "b": Object { - "id": "number", - "params": Object { - "pattern": "000,0", - }, + "legend": Object { + "labelOptions": Object { + "maxLines": 0, }, }, + "markSizeRatio": undefined, }, - } - } - formatFactory={ - [MockFunction] { - "calls": Array [ - Array [ - Object { - "id": "number", - "params": Object { - "pattern": "0,0.000", - }, - }, - ], - Array [ - Object { - "id": "number", - "params": Object { - "pattern": "000,0", - }, - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "number", - "params": Object { - "pattern": "0,0.000", - }, - }, - ], - Array [ - Object { - "id": "number", - "params": Object { - "pattern": "0,0.000", - }, - }, - ], - Array [ - Object { - "id": "number", - "params": Object { - "pattern": "0,0.000", - }, - }, - ], - Array [ - Object { - "id": "number", - "params": Object { - "pattern": "000,0", - }, - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { - "id": "string", - }, - ], - Array [ - Object { + Object {}, + ] + } + /> + + + + + + Date: Thu, 11 Jan 2024 13:35:34 -0700 Subject: [PATCH 81/84] more styles feedback --- .../expression_metric/public/components/metric_vis.tsx | 2 -- .../editor_frame/workspace_panel/workspace_panel_wrapper.scss | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index cc4730b19f8db..fb1383ce98d48 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -315,8 +315,6 @@ export const MetricVis = ({ css={css` height: 100%; width: 100%; - max-height: 100%; - max-width: 100%; overflow-y: auto; ${useEuiScrollBar()} `} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss index 0e0ea398aaf3c..705b942cf85ff 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss @@ -26,7 +26,7 @@ background: $euiColorEmptyShade; height: 100%; - >* { + &>* { flex: 1 1 100%; display: flex; align-items: center; From 38f0d8578c5026fdf655c654ef5863d56ee69274 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 11 Jan 2024 20:43:11 +0000 Subject: [PATCH 82/84] [CI] Auto-commit changed files from 'node scripts/lint_ts_projects --fix' --- src/plugins/chart_expressions/common/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/chart_expressions/common/tsconfig.json b/src/plugins/chart_expressions/common/tsconfig.json index e6426fddeda0f..37a3b2f5bf607 100644 --- a/src/plugins/chart_expressions/common/tsconfig.json +++ b/src/plugins/chart_expressions/common/tsconfig.json @@ -19,5 +19,6 @@ "@kbn/core-execution-context-common", "@kbn/expressions-plugin", "@kbn/data-plugin", + "@kbn/ui-theme", ] } From 851e935635c4cdaa92f2e35738fd0d5479e5e6ee Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Thu, 11 Jan 2024 15:38:35 -0700 Subject: [PATCH 83/84] fix one test --- .../test/functional/page_objects/lens_page.ts | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index d23d91ee1f4ee..747767a71befe 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -1960,18 +1960,15 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont async getWorkspaceVisContainerStyles() { const visContainer = await testSubjects.find('lnsWorkspacePanelWrapper__innerContent'); - const [width, height, maxWidth, maxHeight, minWidth, minHeight, aspectRatio] = - await Promise.all([ - visContainer.getComputedStyle('width'), - visContainer.getComputedStyle('height'), - visContainer.getComputedStyle('max-width'), - visContainer.getComputedStyle('max-height'), - visContainer.getComputedStyle('min-width'), - visContainer.getComputedStyle('min-height'), - visContainer.getComputedStyle('aspect-ratio'), - ]); + const [maxWidth, maxHeight, minWidth, minHeight, aspectRatio] = await Promise.all([ + visContainer.getComputedStyle('max-width'), + visContainer.getComputedStyle('max-height'), + visContainer.getComputedStyle('min-width'), + visContainer.getComputedStyle('min-height'), + visContainer.getComputedStyle('aspect-ratio'), + ]); - return { width, height, maxWidth, maxHeight, minWidth, minHeight, aspectRatio }; + return { maxWidth, maxHeight, minWidth, minHeight, aspectRatio }; }, }); } From 927afa3d16bdd90b40f03de887487bfd888617ed Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Fri, 12 Jan 2024 12:03:34 -0700 Subject: [PATCH 84/84] Turn on veil only for Lens --- .../common/chart_size_transition_veil.tsx | 6 ++++-- .../common/types/expression_renderers.ts | 1 + .../public/components/gauge_component.test.tsx | 1 + .../public/components/gauge_component.tsx | 7 ++++++- .../public/expression_renderers/gauge_renderer.tsx | 1 + .../expression_xy/public/components/xy_chart.test.tsx | 1 + .../expression_xy/public/components/xy_chart.tsx | 10 +++++++++- .../public/expression_renderers/xy_chart_renderer.tsx | 1 + src/plugins/expressions/common/execution/execution.ts | 1 + src/plugins/expressions/common/execution/types.ts | 5 +++++ .../expressions/common/expression_renderers/types.ts | 3 +++ .../expressions/common/service/expressions_services.ts | 5 +++++ src/plugins/expressions/public/loader.ts | 2 ++ src/plugins/expressions/public/render.ts | 5 +++++ src/plugins/expressions/public/types/index.ts | 4 ++++ .../presentation_util/public/__stories__/render.tsx | 1 + .../canvas_plugin_src/renderers/__stories__/render.tsx | 1 + x-pack/plugins/canvas/public/lib/create_handlers.ts | 1 + .../lens/public/embeddable/expression_wrapper.tsx | 1 + 19 files changed, 53 insertions(+), 4 deletions(-) diff --git a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx index d1c9e4475d1a1..8a0c11f363f9c 100644 --- a/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx +++ b/src/plugins/chart_expressions/common/chart_size_transition_veil.tsx @@ -24,7 +24,9 @@ import type { ChartSizeSpec } from './types'; */ export function useSizeTransitionVeil( chartSizeSpec: ChartSizeSpec, - setChartSize: (d: ChartSizeSpec) => void + setChartSize: (d: ChartSizeSpec) => void, + // should be retrieved from handlers.shouldUseSizeTransitionVeil function + shouldUseVeil: boolean ) { const containerRef = useRef(null); const containerSize = useResizeObserver(containerRef.current); @@ -82,7 +84,7 @@ export function useSizeTransitionVeil( backgroundColor: euiThemeVars.euiColorEmptyShade, position: 'absolute', zIndex: 1, - display: showVeil ? 'block' : 'none', + display: shouldUseVeil && showVeil ? 'block' : 'none', }} /> ), diff --git a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts index 5e20310ebcbf4..5bda3a872da00 100644 --- a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts +++ b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts @@ -23,5 +23,6 @@ export type GaugeRenderProps = GaugeExpressionProps & { renderComplete: () => void; uiState: PersistedState; overrides?: AllowedGaugeOverrides & AllowedSettingsOverrides & AllowedChartOverrides; + shouldUseVeil: boolean; setChartSize: (d: ChartSizeSpec) => void; }; diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx index 47b9a94675583..29163b414d82b 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx @@ -103,6 +103,7 @@ describe('GaugeComponent', function () { uiState, renderComplete: jest.fn(), setChartSize: jest.fn(), + shouldUseVeil: false, }; }); diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx index d389fe483b0dc..a5a71ffc25c34 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -182,6 +182,7 @@ export const GaugeComponent: FC = memo( chartsThemeService, renderComplete, overrides, + shouldUseVeil, setChartSize, }) => { const { @@ -272,7 +273,11 @@ export const GaugeComponent: FC = memo( }, }; - const { veil, onResize, containerRef } = useSizeTransitionVeil(chartSizeSpec, setChartSize); + const { veil, onResize, containerRef } = useSizeTransitionVeil( + chartSizeSpec, + setChartSize, + shouldUseVeil + ); const table = data; const accessors = getAccessorsFromArgs(args, table.columns); diff --git a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index 74c3d8bb52737..9759ceca52725 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -90,6 +90,7 @@ export const gaugeRenderer: ( chartsThemeService={plugins.charts.theme} paletteService={getPaletteService()} renderComplete={renderComplete} + shouldUseVeil={handlers.shouldUseSizeTransitionVeil()} uiState={handlers.uiState as PersistedState} />
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx index d78bcb34ba975..afd0fc347c3b8 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx @@ -130,6 +130,7 @@ describe('XYChart component', () => { renderComplete: jest.fn(), timeFormat: 'MMM D, YYYY @ HH:mm:ss.SSS', setChartSize: jest.fn(), + shouldUseVeil: false, }; }); diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx index 125ba410e0090..7e4c5a5c6b974 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx @@ -148,6 +148,7 @@ export type XYChartRenderProps = Omit & { syncCursor: boolean; eventAnnotationService: EventAnnotationServiceType; renderComplete: () => void; + shouldUseVeil: boolean; uiState?: PersistedState; timeFormat: string; setChartSize: (chartSizeSpec: ChartSizeSpec) => void; @@ -210,8 +211,11 @@ export function XYChart({ syncColors, syncTooltips, syncCursor, + shouldUseVeil, + useLegacyTimeAxis, renderComplete, + uiState, timeFormat, overrides, @@ -322,7 +326,11 @@ export function XYChart({ }, }; - const { veil, onResize, containerRef } = useSizeTransitionVeil(chartSizeSpec, setChartSize); + const { veil, onResize, containerRef } = useSizeTransitionVeil( + chartSizeSpec, + setChartSize, + shouldUseVeil + ); const formattedDatatables = useMemo( () => diff --git a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx index 53091eb47acb5..2d88ed53ac3f0 100644 --- a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx @@ -284,6 +284,7 @@ export const getXyChartRenderer = ({ syncColors={config.syncColors} syncTooltips={config.syncTooltips} syncCursor={config.syncCursor} + shouldUseVeil={handlers.shouldUseSizeTransitionVeil()} uiState={handlers.uiState as PersistedState} renderComplete={renderComplete} setChartSize={setChartSize} diff --git a/src/plugins/expressions/common/execution/execution.ts b/src/plugins/expressions/common/execution/execution.ts index 593e437fd9dc7..03a0923b4b313 100644 --- a/src/plugins/expressions/common/execution/execution.ts +++ b/src/plugins/expressions/common/execution/execution.ts @@ -287,6 +287,7 @@ export class Execution< isSyncColorsEnabled: () => execution.params.syncColors!, isSyncCursorEnabled: () => execution.params.syncCursor!, isSyncTooltipsEnabled: () => execution.params.syncTooltips!, + shouldUseSizeTransitionVeil: () => execution.params.shouldUseSizeTransitionVeil!, ...execution.executor.context, getExecutionContext: () => execution.params.executionContext, }; diff --git a/src/plugins/expressions/common/execution/types.ts b/src/plugins/expressions/common/execution/types.ts index 03dbcc8a6ff13..ac216515a3f1b 100644 --- a/src/plugins/expressions/common/execution/types.ts +++ b/src/plugins/expressions/common/execution/types.ts @@ -72,6 +72,11 @@ export interface ExecutionContext */ isSyncTooltipsEnabled?: () => boolean; + /** + * Returns whether or not to use the size transition veil when resizing visualizations. + */ + shouldUseSizeTransitionVeil?: () => boolean; + /** * Contains the meta-data about the source of the expression. */ diff --git a/src/plugins/expressions/common/expression_renderers/types.ts b/src/plugins/expressions/common/expression_renderers/types.ts index 7dae307aa6c01..46908e8b38e6e 100644 --- a/src/plugins/expressions/common/expression_renderers/types.ts +++ b/src/plugins/expressions/common/expression_renderers/types.ts @@ -97,6 +97,9 @@ export interface IInterpreterRenderHandlers { isSyncCursorEnabled(): boolean; isSyncTooltipsEnabled(): boolean; + + shouldUseSizeTransitionVeil(): boolean; + /** * This uiState interface is actually `PersistedState` from the visualizations plugin, * but expressions cannot know about vis or it creates a mess of circular dependencies. diff --git a/src/plugins/expressions/common/service/expressions_services.ts b/src/plugins/expressions/common/service/expressions_services.ts index e73e07a387c46..2683921bc038b 100644 --- a/src/plugins/expressions/common/service/expressions_services.ts +++ b/src/plugins/expressions/common/service/expressions_services.ts @@ -156,6 +156,11 @@ export interface ExpressionExecutionParams { syncTooltips?: boolean; + // if this is set to true, a veil will be shown when resizing visualizations in response + // to a chart resize event (see src/plugins/chart_expressions/common/chart_size_transition_veil.tsx). + // This should be only set to true if the client will be responding to the resize events + shouldUseSizeTransitionVeil?: boolean; + inspectorAdapters?: Adapters; executionContext?: KibanaExecutionContext; diff --git a/src/plugins/expressions/public/loader.ts b/src/plugins/expressions/public/loader.ts index f10b8db1f1287..0a3c0e0990645 100644 --- a/src/plugins/expressions/public/loader.ts +++ b/src/plugins/expressions/public/loader.ts @@ -60,6 +60,7 @@ export class ExpressionLoader { syncColors: params?.syncColors, syncTooltips: params?.syncTooltips, syncCursor: params?.syncCursor, + shouldUseSizeTransitionVeil: params?.shouldUseSizeTransitionVeil, hasCompatibleActions: params?.hasCompatibleActions, getCompatibleCellValueActions: params?.getCompatibleCellValueActions, executionContext: params?.executionContext, @@ -148,6 +149,7 @@ export class ExpressionLoader { syncColors: params.syncColors, syncCursor: params?.syncCursor, syncTooltips: params.syncTooltips, + shouldUseSizeTransitionVeil: params.shouldUseSizeTransitionVeil, executionContext: params.executionContext, partial: params.partial, throttle: params.throttle, diff --git a/src/plugins/expressions/public/render.ts b/src/plugins/expressions/public/render.ts index a7b919625b8d6..0b494f30b2e69 100644 --- a/src/plugins/expressions/public/render.ts +++ b/src/plugins/expressions/public/render.ts @@ -33,6 +33,7 @@ export interface ExpressionRenderHandlerParams { syncCursor?: boolean; syncTooltips?: boolean; interactive?: boolean; + shouldUseSizeTransitionVeil?: boolean; hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise; getCompatibleCellValueActions?: (data: object[]) => Promise; executionContext?: KibanaExecutionContext; @@ -62,6 +63,7 @@ export class ExpressionRenderHandler { syncColors, syncTooltips, syncCursor, + shouldUseSizeTransitionVeil, interactive, hasCompatibleActions = async () => false, getCompatibleCellValueActions = async () => [], @@ -113,6 +115,9 @@ export class ExpressionRenderHandler { isSyncCursorEnabled: () => { return syncCursor || true; }, + shouldUseSizeTransitionVeil: () => { + return Boolean(shouldUseSizeTransitionVeil); + }, isInteractive: () => { return interactive ?? true; }, diff --git a/src/plugins/expressions/public/types/index.ts b/src/plugins/expressions/public/types/index.ts index 7bbb486fde390..27090f36fdc7c 100644 --- a/src/plugins/expressions/public/types/index.ts +++ b/src/plugins/expressions/public/types/index.ts @@ -52,6 +52,10 @@ export interface IExpressionLoaderParams { syncColors?: boolean; syncCursor?: boolean; syncTooltips?: boolean; + // if this is set to true, a veil will be shown when resizing visualizations in response + // to a chart resize event (see src/plugins/chart_expressions/common/chart_size_transition_veil.tsx). + // This should be only set to true if the client will be responding to the resize events + shouldUseSizeTransitionVeil?: boolean; hasCompatibleActions?: ExpressionRenderHandlerParams['hasCompatibleActions']; getCompatibleCellValueActions?: ExpressionRenderHandlerParams['getCompatibleCellValueActions']; executionContext?: KibanaExecutionContext; diff --git a/src/plugins/presentation_util/public/__stories__/render.tsx b/src/plugins/presentation_util/public/__stories__/render.tsx index ca9f968842270..e02f1c803d332 100644 --- a/src/plugins/presentation_util/public/__stories__/render.tsx +++ b/src/plugins/presentation_util/public/__stories__/render.tsx @@ -18,6 +18,7 @@ export const defaultHandlers: IInterpreterRenderHandlers = { isSyncColorsEnabled: () => false, isSyncCursorEnabled: () => true, isSyncTooltipsEnabled: () => false, + shouldUseSizeTransitionVeil: () => false, isInteractive: () => true, getExecutionContext: () => undefined, done: action('done'), diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx index e53dce0a46886..c921bf5db2fe1 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx @@ -17,6 +17,7 @@ export const defaultHandlers: RendererHandlers = { isSyncColorsEnabled: () => false, isSyncCursorEnabled: () => true, isSyncTooltipsEnabled: () => false, + shouldUseSizeTransitionVeil: () => false, isInteractive: () => true, onComplete: (fn) => undefined, onEmbeddableDestroyed: action('onEmbeddableDestroyed'), diff --git a/x-pack/plugins/canvas/public/lib/create_handlers.ts b/x-pack/plugins/canvas/public/lib/create_handlers.ts index 374bdaff99721..b9c0ad97f4eb1 100644 --- a/x-pack/plugins/canvas/public/lib/create_handlers.ts +++ b/x-pack/plugins/canvas/public/lib/create_handlers.ts @@ -29,6 +29,7 @@ export const createBaseHandlers = (): IInterpreterRenderHandlers => ({ isSyncColorsEnabled: () => false, isSyncTooltipsEnabled: () => false, isSyncCursorEnabled: () => true, + shouldUseSizeTransitionVeil: () => false, isInteractive: () => true, getExecutionContext: () => undefined, }); diff --git a/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx b/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx index edb54facff31c..6c038125b0718 100644 --- a/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx +++ b/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx @@ -92,6 +92,7 @@ export function ExpressionWrapper({ syncTooltips={syncTooltips} syncCursor={syncCursor} executionContext={executionContext} + shouldUseSizeTransitionVeil={true} renderError={(errorMessage, error) => { const messages = getOriginalRequestErrorMessages(error || null); addUserMessages(messages);