From 20fb4cd52b97f373d64f196e50891dfed1d78f5b Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Wed, 12 Oct 2022 16:27:23 +0530 Subject: [PATCH 1/5] plot margin top increased, testing: in progress Signed-off-by: Ramneet Chopra --- .../public/components/visualizations/plotly/plot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboards-observability/public/components/visualizations/plotly/plot.tsx b/dashboards-observability/public/components/visualizations/plotly/plot.tsx index 1d7a7f1e9..edef8f907 100644 --- a/dashboards-observability/public/components/visualizations/plotly/plot.tsx +++ b/dashboards-observability/public/components/visualizations/plotly/plot.tsx @@ -37,7 +37,7 @@ export function Plt(props: PltProps) { l: 30, r: 5, b: 30, - t: 5, + t: 100, pad: 4, }, barmode: 'stack', From 5351c1a4fc086b303aba98ec337abb457507223c Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Wed, 12 Oct 2022 17:27:21 +0530 Subject: [PATCH 2/5] margin added for all visualizations Signed-off-by: Ramneet Chopra --- dashboards-observability/common/constants/shared.ts | 8 ++++++++ .../public/components/visualizations/charts/bar/bar.tsx | 2 ++ .../visualizations/charts/financial/gauge/gauge.tsx | 7 ++++++- .../visualizations/charts/histogram/histogram.tsx | 2 ++ .../components/visualizations/charts/lines/line.tsx | 2 ++ .../components/visualizations/charts/maps/heatmap.tsx | 2 ++ .../components/visualizations/charts/maps/treemaps.tsx | 3 ++- .../public/components/visualizations/charts/pie/pie.tsx | 2 ++ .../public/components/visualizations/plotly/plot.tsx | 7 ------- 9 files changed, 26 insertions(+), 9 deletions(-) diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts index fc36ae2dc..3e653a95d 100644 --- a/dashboards-observability/common/constants/shared.ts +++ b/dashboards-observability/common/constants/shared.ts @@ -193,3 +193,11 @@ export enum BarOrientation { horizontal = 'h', vertical = 'v', } + +export const PLOT_MARGIN = { + l: 30, + r: 5, + b: 30, + t: 50, + pad: 4, +}; diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx index c6ddc9a3a..4174d3b4f 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx @@ -18,6 +18,7 @@ import { PLOTLY_COLOR, THRESHOLD_LINE_OPACITY, THRESHOLD_LINE_WIDTH, + PLOT_MARGIN, } from '../../../../../common/constants/shared'; import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability'; @@ -187,6 +188,7 @@ export const Bar = ({ visualizations, layout, config }: any) => { }, showlegend: showLegend, hovermode: 'closest', + margin: PLOT_MARGIN, }; if (availabilityConfig.level) { const thresholdTraces = { diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx index 8cdf8e114..5cc006cf4 100644 --- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx +++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx @@ -11,8 +11,9 @@ import { AGGREGATIONS, GROUPBY, PLOTLY_GAUGE_COLUMN_NUMBER, + DEFAULT_GAUGE_CHART_PARAMETERS, } from '../../../../../../common/constants/explorer'; -import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../common/constants/explorer'; +import { PLOT_MARGIN } from '../../../../../../common/constants/shared'; import { ThresholdUnitType } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds'; import { EmptyPlaceholder } from '../../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; import { IVisualizationContainerProps } from '../../../../../../common/types/explorer'; @@ -193,6 +194,10 @@ export const Gauge = ({ visualizations, layout, config }: any) => { ...layout, ...(layoutConfig.layout && layoutConfig.layout), title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', + margin: { + ...PLOT_MARGIN, + t: 100, + }, }; }, [layout, gaugeData.length, layoutConfig.layout, dataConfig?.panelOptions?.title, orientation]); diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx index 9335d39af..d2d7336ff 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx @@ -11,6 +11,7 @@ import { FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR, VIS_CHART_TYPES, + PLOT_MARGIN, } from '../../../../../common/constants/shared'; import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; import { hexToRgb } from '../../../../components/event_analytics/utils/utils'; @@ -95,6 +96,7 @@ export const Histogram = ({ visualizations, layout, config }: any) => { orientation: legendPosition, }, showlegend: showLegend, + margin: PLOT_MARGIN, }; const mergedConfigs = useMemo( diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index ba6740775..0ccc464d5 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -13,6 +13,7 @@ import { FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR, VIS_CHART_TYPES, + PLOT_MARGIN, } from '../../../../../common/constants/shared'; import { getPropName, hexToRgb } from '../../../../components/event_analytics/utils/utils'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; @@ -181,6 +182,7 @@ export const Line = ({ visualizations, layout, config }: any) => { showlegend: showLegend, ...(isBarMode && layoutForBarMode), ...(multiMetrics && multiMetrics), + margin: PLOT_MARGIN, }; if (dataConfig.thresholds || availabilityConfig.level) { diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index c39c70c23..aec547f83 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -21,6 +21,7 @@ import { IVisualizationContainerProps } from '../../../../../common/types/explor import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; import { Plt } from '../../plotly/plot'; import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer'; +import { PLOT_MARGIN } from '../../../../../common/constants/shared'; export const HeatMap = ({ visualizations, layout, config }: any) => { const { @@ -143,6 +144,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { ...layout, ...(layoutConfig.layout && layoutConfig.layout), title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', + margin: PLOT_MARGIN, }; const mergedConfigs = useMemo( diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 5761ae525..48eee49a3 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -14,7 +14,7 @@ import { MULTI_COLOR_PALETTE, SINGLE_COLOR_PALETTE, } from '../../../../../common/constants/colors'; -import { DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared'; +import { DEFAULT_CHART_STYLES, PLOT_MARGIN } from '../../../../../common/constants/shared'; import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; import { GROUPBY, AGGREGATIONS } from '../../../../../common/constants/explorer'; @@ -180,6 +180,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { ...(layoutConfig.layout && layoutConfig.layout), title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', treemapcolorway: colorway, + margin: PLOT_MARGIN, }; const mapData = [ diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx index 86ea12888..700a4a15c 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx @@ -20,6 +20,7 @@ import { AGGREGATIONS, GROUPBY, } from '../../../../../common/constants/explorer'; +import { PLOT_MARGIN } from '../../../../../common/constants/shared'; export const Pie = ({ visualizations, layout, config }: any) => { const { @@ -149,6 +150,7 @@ export const Pie = ({ visualizations, layout, config }: any) => { }), }, showlegend: showLegend, + margin: PLOT_MARGIN, }; }, [series, layoutConfig.layout, title, layout.legend]); diff --git a/dashboards-observability/public/components/visualizations/plotly/plot.tsx b/dashboards-observability/public/components/visualizations/plotly/plot.tsx index edef8f907..bf1a61642 100644 --- a/dashboards-observability/public/components/visualizations/plotly/plot.tsx +++ b/dashboards-observability/public/components/visualizations/plotly/plot.tsx @@ -33,13 +33,6 @@ export function Plt(props: PltProps) { const finalLayout = { autosize: true, - margin: { - l: 30, - r: 5, - b: 30, - t: 100, - pad: 4, - }, barmode: 'stack', legend: { orientation: 'h', From 8f26f0a7e0233eb0a5ae6d3f624509a51d0994a7 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Wed, 12 Oct 2022 12:19:27 +0000 Subject: [PATCH 3/5] yarn test Signed-off-by: Ramneet Chopra --- .../__snapshots__/histogram.test.tsx.snap | 20 +++++++++---------- .../__snapshots__/treemap.test.tsx.snap | 20 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap index 0588c8a3e..c04f1e70a 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap @@ -574,11 +574,11 @@ exports[`Histogram component Renders histogram component 1`] = ` "orientation": "v", }, "margin": Object { - "b": 15, - "l": 60, - "pad": 0, - "r": 10, - "t": 30, + "b": 30, + "l": 30, + "pad": 4, + "r": 5, + "t": 50, }, "showlegend": true, "title": "", @@ -631,11 +631,11 @@ exports[`Histogram component Renders histogram component 1`] = ` "orientation": "v", }, "margin": Object { - "b": 15, - "l": 60, - "pad": 0, - "r": 10, - "t": 30, + "b": 30, + "l": 30, + "pad": 4, + "r": 5, + "t": 50, }, "showlegend": true, "title": "", diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap index 7289b8a68..aa87d5fd5 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap @@ -583,11 +583,11 @@ exports[`Treemap component Renders treemap component 1`] = ` ], "height": 220, "margin": Object { - "b": 15, - "l": 60, - "pad": 0, - "r": 10, - "t": 30, + "b": 30, + "l": 30, + "pad": 4, + "r": 5, + "t": 50, }, "showlegend": true, "title": "", @@ -655,11 +655,11 @@ exports[`Treemap component Renders treemap component 1`] = ` "traceorder": "normal", }, "margin": Object { - "b": 15, - "l": 60, - "pad": 0, - "r": 10, - "t": 30, + "b": 30, + "l": 30, + "pad": 4, + "r": 5, + "t": 50, }, "showlegend": true, "title": "", From f00581779cb3be7ef53ed2f4e8162d279b12b571 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Thu, 13 Oct 2022 11:01:55 +0530 Subject: [PATCH 4/5] pie title moved to right side Signed-off-by: Ramneet Chopra --- .../components/visualizations/charts/pie/pie.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx index 700a4a15c..b01e491d5 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx @@ -141,7 +141,6 @@ export const Pie = ({ visualizations, layout, config }: any) => { }, ...layout, ...(layoutConfig.layout && layoutConfig.layout), - title, legend: { ...layout.legend, orientation: legend.position || visMetaData.legendposition, @@ -150,7 +149,19 @@ export const Pie = ({ visualizations, layout, config }: any) => { }), }, showlegend: showLegend, - margin: PLOT_MARGIN, + margin: { + ...PLOT_MARGIN, + t: 100, + }, + title: { + text: title, + xanchor: 'right', + yanchor: 'top', + x: 1, + y: 1, + xref: 'paper', + yref: 'container', + }, }; }, [series, layoutConfig.layout, title, layout.legend]); From bbacfc96897f49f72cb52999c599d840f5181c38 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Thu, 13 Oct 2022 08:59:01 +0000 Subject: [PATCH 5/5] color theme extra space fixed Signed-off-by: Ramneet Chopra --- .../explorer/visualizations/config_panel/config_panel.scss | 4 ++++ .../config_panes/config_controls/config_color_theme.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss index a919709f5..74aaed5b5 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss @@ -189,3 +189,7 @@ $vis-editor-sidebar-min-width: 350px; .panel_title:first-letter { text-transform: uppercase; } + +.color-theme-combo-box-option .euiFlexItem.euiFlexItem--flexGrowZero { + display: none; +} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx index f91c03843..7cd1b9229 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx @@ -47,6 +47,7 @@ export const ConfigColorTheme = ({ ).map((item) => ({ ...item, label: vis.name === VIS_CHART_TYPES.Histogram ? item.name : getPropName(item), + className: 'color-theme-combo-box-option', })); const getUpdatedOptions = () =>