diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts index d6bb67457..40ea3bb13 100644 --- a/dashboards-observability/common/constants/explorer.ts +++ b/dashboards-observability/common/constants/explorer.ts @@ -90,6 +90,7 @@ export const VIZ_CONTAIN_XY_AXIS = [ VIS_CHART_TYPES.Line, VIS_CHART_TYPES.Pie, VIS_CHART_TYPES.Scatter, + VIS_CHART_TYPES.HorizontalBar, ]; // default ppl aggregation method options @@ -233,6 +234,28 @@ export const DEFAULT_STATS_CHART_PARAMETERS: DefaultStatsChartParametersProps = }, DefaultTextColor: '#FFFFFF', }; +export interface DefaultBarChartStylesProps { + BarMode: string; + GroupWidth: number; + BarWidth: number; + LineWidth: number; + LabelSize: number; +} + +export const DEFAULT_BAR_CHART_STYLES: DefaultBarChartStylesProps = { + BarMode: 'group', + GroupWidth: 0.7, + BarWidth: 0.97, + LineWidth: 1, + LabelSize: 12, +}; + +export const SIMILAR_VIZ_TYPES = [ + VIS_CHART_TYPES.Line, + VIS_CHART_TYPES.Scatter, + VIS_CHART_TYPES.HorizontalBar, + VIS_CHART_TYPES.Bar, +]; export enum ConfigChartOptionsEnum { palettePicker = 'palettePicker', diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts index 3f5a09c24..fc36ae2dc 100644 --- a/dashboards-observability/common/constants/shared.ts +++ b/dashboards-observability/common/constants/shared.ts @@ -182,3 +182,14 @@ export const DEFAULT_CHART_STYLES: DefaultChartStylesProps = { }; export const FILLOPACITY_DIV_FACTOR = 200; +export const SLIDER_MIN_VALUE = 0; +export const SLIDER_MAX_VALUE = 100; +export const SLIDER_STEP = 1; +export const THRESHOLD_LINE_WIDTH = 3; +export const THRESHOLD_LINE_OPACITY = 0.7; +export const MAX_BUCKET_LENGTH = 16; + +export enum BarOrientation { + horizontal = 'h', + vertical = 'v', +} diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index 36d5316d4..91d867566 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -258,6 +258,13 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -266,30 +273,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -388,7 +371,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -422,7 +405,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], @@ -723,6 +706,13 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -731,30 +721,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -853,7 +819,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -887,7 +853,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], @@ -1195,6 +1161,13 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -1203,30 +1176,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -1325,7 +1274,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -1359,7 +1308,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], @@ -3240,6 +3189,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "userConfigs": Object {}, }, "vis": Object { + "barwidth": 0.97, "category": "Visualizations", "categoryaxis": "xaxis", "component": [Function], @@ -3253,152 +3203,329 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "sections": Array [ Object { "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", "schemas": Array [ Object { "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, }, Object { "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, }, ], }, Object { "editor": [Function], - "id": "chart_options", - "mapTo": "chartOptions", - "name": "Chart options", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { "component": null, - "isSingleSelection": true, - "mapTo": "orientation", - "name": "Orientation", + "mapTo": "showLegend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { - "name": "Horizontal", - "orientationId": "h", + "id": "show", + "name": "Show", }, ], - "dropdownList": Array [ + "options": Array [ Object { - "name": "Vertical", - "orientationId": "v", + "id": "show", + "name": "Show", }, Object { - "name": "Horizontal", - "orientationId": "h", + "id": "hidden", + "name": "Hidden", }, ], }, }, Object { "component": null, - "isSingleSelection": true, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, + ], + }, + Object { + "editor": [Function], + "id": "chart_styles", + "mapTo": "chartStyles", + "name": "Chart styles", + "schemas": Array [ + Object { + "component": [Function], + "eleType": "buttons", "mapTo": "mode", "name": "Mode", "props": Object { "defaultSelections": Array [ Object { - "modeId": "group", + "id": "group", "name": "Group", }, ], - "dropdownList": Array [ + "options": Array [ Object { - "modeId": "group", + "id": "group", "name": "Group", }, Object { - "modeId": "stack", + "id": "stack", "name": "Stack", }, ], }, }, - ], - }, - ], - }, - Object { - "content": Array [], - "editor": [Function], - "id": "style-panel", - "mapTo": "layoutConfig", - "name": "Layout", - }, - ], - }, - "fulllabel": "Bar", - "icon": [Function], - "icontype": "visBarVerticalStacked", - "id": "horizontal_bar", - "label": "Bar", - "name": "horizontal_bar", - "orientation": "h", - "selection": Object { - "dataLoss": "nothing", - }, - "seriesaxis": "yaxis", - "type": "bar", - "visconfig": Object { - "config": Object { - "displaylogo": false, - "responsive": true, - }, - "isUniColor": false, - "layout": Object { - "height": 1180, - "legend": Object { - "orientation": "v", - "traceorder": "normal", - }, - "margin": Object { - "b": 30, - "l": 60, - "pad": 0, - "r": 30, - "t": 50, - }, - "showlegend": true, - }, - }, - }, - } - } - > - + + + +

+ Legend size +

+ + +
+ + + +
+
+ + + + +
+
+ + + + +
+
@@ -12537,30 +12622,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] props={Object {}} schemas={ Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -12659,7 +12720,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -12907,652 +12968,361 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "id": "show", "name": "Show", - }, - Object { - "id": "hidden", - "name": "Hidden", - }, - ], - }, - }, - Object { - "component": null, - "mapTo": "tooltipText", - "name": "Tooltip text", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "all", - "name": "All", - }, - ], - "options": Array [ - Object { - "id": "all", - "name": "All", - }, - Object { - "id": "x", - "name": "Dimension", - }, - Object { - "id": "y", - "name": "Metrics", - }, - ], - }, - }, - ], - }, - Object { - "editor": [Function], - "id": "legend", - "mapTo": "legend", - "name": "Legend", - "schemas": Array [ - Object { - "component": null, - "mapTo": "showLegend", - "name": "Show legend", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "show", - "name": "Show", - }, - ], - "options": Array [ - Object { - "id": "show", - "name": "Show", - }, - Object { - "id": "hidden", - "name": "Hidden", - }, - ], - }, - }, - Object { - "component": null, - "mapTo": "position", - "name": "Position", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Right", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Right", - }, - Object { - "id": "h", - "name": "Bottom", - }, - ], - }, - }, - ], - }, - Object { - "editor": [Function], - "id": "chart_styles", - "mapTo": "chartStyles", - "name": "Chart styles", - "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "mode", - "name": "Mode", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "group", - "name": "Group", - }, - ], - "options": Array [ - Object { - "id": "group", - "name": "Group", - }, - Object { - "id": "stack", - "name": "Stack", - }, - ], - }, - }, - Object { - "component": [Function], - "eleType": "input", - "mapTo": "labelSize", - "name": "Label size", - }, - Object { - "component": [Function], - "defaultState": 0, - "eleType": "slider", - "mapTo": "rotateBarLabels", - "name": "Rotate bar labels", - "props": Object { - "max": 90, - "min": -90, - "showTicks": true, - "ticks": Array [ + }, Object { - "label": "-90°", - "value": -90, + "id": "hidden", + "name": "Hidden", }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ Object { - "label": "-45°", - "value": -45, + "id": "all", + "name": "All", }, + ], + "options": Array [ Object { - "label": "0°", - "value": 0, + "id": "all", + "name": "All", }, Object { - "label": "45°", - "value": 45, + "id": "x", + "name": "Dimension", }, Object { - "label": "90°", - "value": 90, + "id": "y", + "name": "Metrics", }, ], }, }, - Object { - "component": [Function], - "defaultState": 0.7, - "eleType": "slider", - "mapTo": "groupWidth", - "name": "Group width", - "props": Object { - "max": 1, - "step": 0.01, - }, - }, - Object { - "component": [Function], - "defaultState": 0.97, - "eleType": "slider", - "mapTo": "barWidth", - "name": "Bar width", - "props": Object { - "max": 1, - "step": 0.01, - }, - }, - Object { - "component": [Function], - "defaultState": 1, - "eleType": "slider", - "mapTo": "lineWidth", - "name": "Line width", - "props": Object { - "max": 10, - }, - }, - Object { - "component": [Function], - "defaultState": 80, - "eleType": "slider", - "mapTo": "fillOpacity", - "name": "Fill opacity", - "props": Object { - "max": 100, - }, - }, ], }, Object { "editor": [Function], - "id": "color-theme", - "mapTo": "colorTheme", - "name": "Color theme", - "schemas": Array [], - }, - ], - }, - Object { - "content": Array [], - "editor": [Function], - "id": "style-panel", - "mapTo": "layoutConfig", - "name": "Layout", - }, - Object { - "editor": [Function], - "id": "availability-panel", - "mapTo": "availabilityConfig", - "name": "Availability", - }, - ], - }, - "fillOpacity": 80, - "fulllabel": "Vertical bar", - "groupwidth": 0.7, - "icon": [Function], - "icontype": "visBarVerticalStacked", - "id": "bar", - "label": "Vertical bar", - "labelangle": 0, - "legendposition": "v", - "linewidth": 1, - "mode": "group", - "name": "bar", - "orientation": "v", - "selection": Object { - "dataLoss": "nothing", - }, - "seriesaxis": "yaxis", - "showlegend": "show", - "type": "bar", - "visconfig": Object { - "config": Object { - "displaylogo": false, - "responsive": true, - }, - "isUniColor": false, - "layout": Object { - "height": 1180, - "legend": Object { - "orientation": "v", - "traceorder": "normal", - }, - "margin": Object { - "b": 30, - "l": 60, - "pad": 0, - "r": 30, - "t": 50, - }, - "showlegend": true, - }, - }, - }, - } - } - vizState={Object {}} - > - -
-
- -
-
- -
-
- - -

- Orientation -

- - -
- -
- -
- - - Orientation - - -
- - - - - - - - - - -
-
- -
- - + +
+
+ +
+
+ +
+
@@ -15505,7 +15275,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] name="Fill opacity" onChange={[Function]} step={1} - value={80} + value={40} > - ENABLED_VIS_TYPES.map((vs: string) => - vs === VIS_CHART_TYPES.Line || vs === VIS_CHART_TYPES.Scatter - ? getVisType(vs, { type: vs }) - : getVisType(vs) - ), + () => ENABLED_VIS_TYPES.map((vs: string) => getVisTypeData(vs)), [] ); @@ -256,17 +253,13 @@ export const ConfigPanel = ({ [memorizedVisualizationTypes] ); - const vizTypeList = useMemo(() => { - return memorizedVisualizationTypes.filter((type) => type.id !== 'horizontal_bar'); - }, [memorizedVisualizationTypes]); - return (
{ diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx index 5b31a48f7..93af5808d 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx @@ -7,6 +7,7 @@ import React, { useMemo, useCallback, Fragment } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; +import { BarOrientation } from '../../../../../../../../common/constants/shared'; export const ConfigBarChartStyles = ({ visualizations, @@ -33,7 +34,7 @@ export const ConfigBarChartStyles = ({ /* To update the schema options based on current style mode selection */ const currentSchemas = useMemo(() => { - if (vizState?.orientation === 'h') { + if (vizState?.orientation === BarOrientation.horizontal) { return schemas.filter( (schema: IConfigPanelOptionSection) => schema.mapTo !== 'rotateBarLabels' ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts index 9576f9a0b..10c56703e 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts @@ -23,4 +23,6 @@ export { SliderConfig } from './config_style_slider'; export { ConfigColorTheme } from './config_color_theme'; export { SwitchButton } from './config_switch_button'; export { ButtonGroupItem } from './config_button_group'; -export { TextInputFieldItem } from './config_text_input'; \ No newline at end of file +export { TextInputFieldItem } from './config_text_input'; +export { ConfigBarChartStyles } from './config_bar_chart_styles'; +export { ConfigAvailability } from './config_availability'; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx index ec496a77f..e7ea547df 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { LONG_CHART_COLOR } from '../../../../../../common/constants/shared'; +import { BarOrientation, LONG_CHART_COLOR } from '../../../../../../common/constants/shared'; import { Plt } from '../../../../visualizations/plotly/plot'; export const CountDistribution = ({ countDistribution }: any) => { @@ -27,7 +27,7 @@ export const CountDistribution = ({ countDistribution }: any) => { y: [...data[fields[0].name]], type: 'bar', name: fields[0], - orientation: 'v', + orientation: BarOrientation.vertical, }, ]; diff --git a/dashboards-observability/public/components/event_analytics/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx index 98554e60c..e682846df 100644 --- a/dashboards-observability/public/components/event_analytics/utils/utils.tsx +++ b/dashboards-observability/public/components/event_analytics/utils/utils.tsx @@ -4,21 +4,21 @@ * SPDX-License-Identifier: Apache-2.0 */ +import dateMath from '@elastic/datemath'; import { uniqueId } from 'lodash'; -import React from 'react'; import moment from 'moment'; -import dateMath from '@elastic/datemath'; +import React from 'react'; +import { HttpStart } from '../../../../../../src/core/public'; +import { CUSTOM_LABEL, TIME_INTERVAL_OPTIONS } from '../../../../common/constants/explorer'; +import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared'; import { + ConfigListEntry, + GetTooltipHoverInfoType, IExplorerFields, IField, - GetTooltipHoverInfoType, - ConfigListEntry, } from '../../../../common/types/explorer'; -import { DocViewRow, IDocType } from '../explorer/events_views'; -import { HttpStart } from '../../../../../../src/core/public'; import PPLService from '../../../services/requests/ppl'; -import { CUSTOM_LABEL, TIME_INTERVAL_OPTIONS } from '../../../../common/constants/explorer'; -import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared'; +import { DocViewRow, IDocType } from '../explorer/events_views'; import { ConfigTooltip } from '../explorer/visualizations/config_panel/config_panes/config_controls'; // Create Individual table rows for events datagrid and flyouts diff --git a/dashboards-observability/public/components/trace_analytics/components/common/plots/box_plt.tsx b/dashboards-observability/public/components/trace_analytics/components/common/plots/box_plt.tsx index d3c04f1cb..b177fc2c5 100644 --- a/dashboards-observability/public/components/trace_analytics/components/common/plots/box_plt.tsx +++ b/dashboards-observability/public/components/trace_analytics/components/common/plots/box_plt.tsx @@ -4,6 +4,7 @@ */ import { EuiFlexGrid, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; +import { BarOrientation } from '../../../../../../common/constants/shared'; import React, { useMemo, useState } from 'react'; import { Plt } from '../../../../visualizations/plotly/plot'; @@ -53,7 +54,7 @@ export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) { x: [plotParams.left], y: [0], type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, width: 1, marker: { color: 'rgba(0, 0, 0, 0)' }, hoverinfo: 'none', @@ -63,7 +64,7 @@ export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) { x: [plotParams.mid - plotParams.left], y: [0], type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, width: 1, marker: { color: plotParams.currPercentileFilter === '< 95th' ? '#fcfcfc' : '#ffffff', @@ -82,7 +83,7 @@ export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) { x: [plotParams.right - plotParams.mid], y: [0], type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, width: 1, marker: { color: plotParams.currPercentileFilter === '>= 95th' ? '#aea4d1' : '#957ac9', diff --git a/dashboards-observability/public/components/trace_analytics/components/common/plots/service_map_scale.tsx b/dashboards-observability/public/components/trace_analytics/components/common/plots/service_map_scale.tsx index 86d11b7ec..e9c900bcc 100644 --- a/dashboards-observability/public/components/trace_analytics/components/common/plots/service_map_scale.tsx +++ b/dashboards-observability/public/components/trace_analytics/components/common/plots/service_map_scale.tsx @@ -4,6 +4,7 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui'; +import { BarOrientation } from '../../../../../../common/constants/shared'; import _ from 'lodash'; import React, { useEffect, useState } from 'react'; import { Plt } from '../../../../visualizations/plotly/plot'; @@ -56,7 +57,7 @@ export function ServiceMapScale(props: { { x: Array.from({ length: result.data.y.length }, () => 0), type: 'bar', - orientation: 'v', + orientation: BarOrientation.vertical, width: 0.4, hoverinfo: 'none', showlegend: false, diff --git a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx index bcad5bd54..c652224bb 100644 --- a/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx +++ b/dashboards-observability/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx @@ -8,6 +8,7 @@ import { render } from '@testing-library/react'; import { configure, mount, shallow } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import { SpanDetailPanel } from '../span_detail_panel'; +import { BarOrientation } from '../../../../../../common/constants/shared'; describe('Service breakdown panel component', () => { configure({ adapter: new Adapter() }); @@ -21,7 +22,7 @@ describe('Service breakdown panel component', () => { marker: { color: 'rgba(0, 0, 0, 0)' }, width: 0.4, type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, hoverinfo: 'none', showlegend: false, }, @@ -34,7 +35,7 @@ describe('Service breakdown panel component', () => { marker: { color: '#7492e7' }, width: 0.4, type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, hovertemplate: '%{x}', }, ] as Plotly.Data[], diff --git a/dashboards-observability/public/components/trace_analytics/requests/traces_request_handler.ts b/dashboards-observability/public/components/trace_analytics/requests/traces_request_handler.ts index 03eb33f4d..876680865 100644 --- a/dashboards-observability/public/components/trace_analytics/requests/traces_request_handler.ts +++ b/dashboards-observability/public/components/trace_analytics/requests/traces_request_handler.ts @@ -4,6 +4,7 @@ */ /* eslint-disable no-console */ +import { BarOrientation } from '../../../../common/constants/shared'; import _ from 'lodash'; import moment from 'moment'; import { v1 as uuid } from 'uuid'; @@ -242,7 +243,7 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => { }, width: 0.4, type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, hoverinfo: 'none', showlegend: false, spanId: hit._source.spanId, @@ -258,7 +259,7 @@ const hitsToSpanDetailData = async (hits: any, colorMap: any) => { }, width: 0.4, type: 'bar', - orientation: 'h', + orientation: BarOrientation.horizontal, hovertemplate: '%{x}', spanId: hit._source.spanId, } diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap index b0f5e3c57..e32a915cb 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Bar component Renders bar component 1`] = ` +exports[`Veritcal Bar component Renders veritcal bar component 1`] = ` + + +
+ +
+ +
+ + + + + + +
+ +

+ + + No results found + + +

+
+ +
+ +
+ + + +`; diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap index 80aad5341..ee405b76d 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap @@ -344,6 +344,13 @@ exports[`Line component Renders line component 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -352,30 +359,6 @@ exports[`Line component Renders line component 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -474,7 +457,7 @@ exports[`Line component Renders line component 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -508,7 +491,7 @@ exports[`Line component Renders line component 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap index cfdb61c63..81a9bd1e3 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap @@ -344,6 +344,13 @@ exports[`Logs View component Renders logs view component 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -352,30 +359,6 @@ exports[`Logs View component Renders logs view component 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -474,7 +457,7 @@ exports[`Logs View component Renders logs view component 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -508,7 +491,7 @@ exports[`Logs View component Renders logs view component 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap index ec6cad064..3866315df 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap @@ -344,6 +344,13 @@ exports[`Pie component Renders pie component 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -352,30 +359,6 @@ exports[`Pie component Renders pie component 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -474,7 +457,7 @@ exports[`Pie component Renders pie component 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -508,7 +491,7 @@ exports[`Pie component Renders pie component 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap index 66f79027c..0229c87fc 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap @@ -327,6 +327,13 @@ exports[`Text component Renders text component 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -335,30 +342,6 @@ exports[`Text component Renders text component 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -457,7 +440,7 @@ exports[`Text component Renders text component 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -491,7 +474,7 @@ exports[`Text component Renders text component 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], 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 f9ebdaabb..480851a92 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 @@ -344,6 +344,13 @@ exports[`Treemap component Renders treemap component 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, ], }, Object { @@ -352,30 +359,6 @@ exports[`Treemap component Renders treemap component 1`] = ` "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ - Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Vertical", - }, - Object { - "id": "h", - "name": "Horizontal", - }, - ], - }, - }, Object { "component": [Function], "eleType": "buttons", @@ -474,7 +457,7 @@ exports[`Treemap component Renders treemap component 1`] = ` }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill opacity", @@ -508,7 +491,7 @@ exports[`Treemap component Renders treemap component 1`] = ` }, ], }, - "fillOpacity": 80, + "fillopacity": 40, "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx index 421f5f27c..8da6bc875 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx @@ -13,10 +13,10 @@ import { TEST_VISUALIZATIONS_DATA } from '../../../../../test/event_analytics_constants'; -describe('Bar component', () => { +describe('Veritcal Bar component', () => { configure({ adapter: new Adapter() }); - it('Renders bar component', async () => { + it('Renders veritcal bar component', async () => { const wrapper = mount( { + configure({ adapter: new Adapter() }); + + it('Renders horizontal bar component', async () => { + const wrapper = mount( + + ); + + wrapper.update(); + + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + }); + }); +}); diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx index 833df28ae..823b17898 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx @@ -3,23 +3,30 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { find, isEmpty, last, some } from 'lodash'; import React, { useMemo } from 'react'; -import { forEach, isEmpty, last, some, find } from 'lodash'; -import { Plt } from '../../plotly/plot'; import { + AGGREGATIONS, + DEFAULT_BAR_CHART_STYLES, + BREAKDOWNS, + GROUPBY, +} from '../../../../../common/constants/explorer'; +import { + BarOrientation, + FILLOPACITY_DIV_FACTOR, LONG_CHART_COLOR, PLOTLY_COLOR, - FILLOPACITY_DIV_FACTOR, + THRESHOLD_LINE_OPACITY, + THRESHOLD_LINE_WIDTH, } 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'; import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds'; -import { getPropName, hexToRgb } from '../../../event_analytics/utils/utils'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; -import { AGGREGATIONS, BREAKDOWNS, GROUPBY } from '../../../../../common/constants/explorer'; -import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; +import { getPropName } from '../../../event_analytics/utils/utils'; +import { Plt } from '../../plotly/plot'; export const Bar = ({ visualizations, layout, config }: any) => { - const DEFAULT_LABEL_SIZE = 10; const { data: { defaultAxes, @@ -48,7 +55,7 @@ export const Bar = ({ visualizations, layout, config }: any) => { * determine stylings */ const barOrientation = dataConfig.chartStyles?.orientation || visMetaData.orientation; - const isVertical = barOrientation === visMetaData.orientation; + const isVertical = barOrientation === BarOrientation.vertical; const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || visMetaData.labelangle; const lineWidth = dataConfig?.chartStyles?.lineWidth || visMetaData.linewidth; @@ -62,8 +69,12 @@ export const Bar = ({ visualizations, layout, config }: any) => { dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== visMetaData.showlegend ); const legendPosition = dataConfig?.legend?.position || visMetaData.legendposition; - const labelSize = dataConfig?.chartStyles?.labelSize || DEFAULT_LABEL_SIZE; + visualizations.data?.rawVizData?.dataConfig?.metrics + ? visualizations.data.rawVizData.dataConfig.metrics + : []; + const labelSize = dataConfig?.chartStyles?.labelSize || DEFAULT_BAR_CHART_STYLES.LabelSize; + const legendSize = dataConfig?.legend?.legendSize; const getSelectedColorTheme = (field: any, index: number) => (dataConfig?.colorTheme?.length > 0 && dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.label) @@ -71,8 +82,6 @@ export const Bar = ({ visualizations, layout, config }: any) => { PLOTLY_COLOR[index % PLOTLY_COLOR.length]; let bars; - let valueSeries; - let valueForXSeries; /** * determine x axis @@ -149,29 +158,45 @@ export const Bar = ({ visualizations, layout, config }: any) => { ...(layoutConfig.layout && layoutConfig.layout), title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', barmode: dataConfig?.chartStyles?.mode || visualizations.vis.mode, - font: { - size: labelSize, - }, xaxis: { - tickangle: tickAngle, + ...(isVertical && { tickangle: tickAngle }), + automargin: true, + tickfont: { + ...(labelSize && { + size: labelSize, + }), + }, + }, + yaxis: { + ...(!isVertical && { tickangle: tickAngle }), automargin: true, + tickfont: { + ...(labelSize && { + size: labelSize, + }), + }, }, bargap: groupWidth, bargroupgap: barWidth, legend: { ...layout.legend, orientation: legendPosition, + ...(legendSize && { + font: { + size: legendSize, + }, + }), }, showlegend: showLegend, + hovermode: 'closest', }; - if (dataConfig.thresholds || availabilityConfig.level) { + if (availabilityConfig.level) { const thresholdTraces = { x: [], y: [], mode: 'text', text: [], }; - const thresholds = dataConfig.thresholds ? dataConfig.thresholds : []; const levels = availabilityConfig.level ? availabilityConfig.level : []; const mapToLine = (list: ThresholdUnitType[] | AvailabilityUnitType[], lineStyle: any) => { @@ -190,17 +215,17 @@ export const Bar = ({ visualizations, layout, config }: any) => { x1: last(queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name]), y1: thr.value, name: thr.name || '', - opacity: 0.7, + opacity: THRESHOLD_LINE_OPACITY, line: { color: thr.color, - width: 3, + width: THRESHOLD_LINE_WIDTH, ...lineStyle, }, }; }); }; - mergedLayout.shapes = [...mapToLine(thresholds, { dash: 'dashdot' }), ...mapToLine(levels, {})]; + mergedLayout.shapes = mapToLine(levels, {}); bars = [...bars, thresholdTraces]; } diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts index 9210850e5..bc2fd0742 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts @@ -8,28 +8,36 @@ import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_conf import { LensIconChartBar } from '../../assets/chart_bar'; import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor'; import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor'; -import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability'; -import { ButtonGroupItem } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group'; -import { ConfigBarChartStyles } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles'; -import { SliderConfig } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider'; import { ConfigLegend, InputFieldItem, + ConfigColorTheme, + SliderConfig, + ConfigBarChartStyles, + ButtonGroupItem, + ConfigAvailability, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; -import { DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared'; +import { BarOrientation, DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared'; import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils'; -import { ConfigColorTheme } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme'; +import { VIS_CHART_TYPES } from '../../../../../common/constants/shared'; +import { DEFAULT_BAR_CHART_STYLES } from '../../../../../common/constants/explorer'; + const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); -const { LegendPosition, ShowLegend } = DEFAULT_CHART_STYLES; +// const { LegendPosition, ShowLegend } = DEFAULT_CHART_STYLES; +const { LegendPosition, ShowLegend, LabelAngle, FillOpacity } = DEFAULT_CHART_STYLES; +const { BarMode, GroupWidth, BarWidth, LineWidth } = DEFAULT_BAR_CHART_STYLES; +const isHorizontalBar = (paramstype: string) => + paramstype === VIS_CHART_TYPES.HorizontalBar ? true : false; + export const createBarTypeDefinition = (params: any) => ({ - name: 'bar', + name: params.type || 'bar', type: 'bar', - id: 'bar', - label: 'Vertical bar', - fulllabel: 'Vertical bar', - icontype: 'visBarVerticalStacked', + id: params.type || 'bar', + label: isHorizontalBar(params.type) ? 'Horizontal bar' : 'Vertical bar', + fulllabel: isHorizontalBar(params.type) ? 'Horizontal bar' : 'Vertical bar', + icontype: isHorizontalBar(params.type) ? 'visBarHorizontalStacked' : 'visBarVerticalStacked', selection: { dataLoss: 'nothing', }, @@ -37,13 +45,13 @@ export const createBarTypeDefinition = (params: any) => ({ icon: LensIconChartBar, categoryaxis: 'xaxis', seriesaxis: 'yaxis', - orientation: 'v', - mode: 'group', - labelangle: 0, - linewidth: 1, - fillOpacity: 80, - groupwidth: 0.7, - barwidth: 0.97, + orientation: isHorizontalBar(params.type) ? BarOrientation.horizontal : BarOrientation.vertical, + mode: BarMode, + labelangle: LabelAngle, + linewidth: LineWidth, + fillopacity: FillOpacity, + groupwidth: GroupWidth, + barwidth: BarWidth, showlegend: ShowLegend, legendposition: LegendPosition, component: Bar, @@ -93,6 +101,13 @@ export const createBarTypeDefinition = (params: any) => ({ defaultSelections: [{ name: 'Right', id: LegendPosition }], }, }, + { + title: 'Legend size', + name: 'Legend size', + component: InputFieldItem, + mapTo: 'legendSize', + eleType: 'input', + }, ], }, { @@ -101,19 +116,6 @@ export const createBarTypeDefinition = (params: any) => ({ editor: ConfigBarChartStyles, mapTo: 'chartStyles', schemas: [ - { - name: 'Orientation', - component: ButtonGroupItem, - mapTo: 'orientation', - eleType: 'buttons', - props: { - options: [ - { name: 'Vertical', id: 'v' }, - { name: 'Horizontal', id: 'h' }, - ], - defaultSelections: [{ name: 'Vertical', id: 'v' }], - }, - }, { name: 'Mode', component: ButtonGroupItem, @@ -124,7 +126,7 @@ export const createBarTypeDefinition = (params: any) => ({ { name: 'Group', id: 'group' }, { name: 'Stack', id: 'stack' }, ], - defaultSelections: [{ name: 'Group', id: 'group' }], + defaultSelections: [{ name: 'Group', id: BarMode }], }, }, { @@ -138,7 +140,7 @@ export const createBarTypeDefinition = (params: any) => ({ component: SliderConfig, mapTo: 'rotateBarLabels', eleType: 'slider', - defaultState: 0, + defaultState: LabelAngle, props: { ticks: [ { label: '-90°', value: -90 }, @@ -156,7 +158,7 @@ export const createBarTypeDefinition = (params: any) => ({ name: 'Group width', component: SliderConfig, mapTo: 'groupWidth', - defaultState: 0.7, + defaultState: GroupWidth, props: { max: 1, step: 0.01, @@ -167,7 +169,7 @@ export const createBarTypeDefinition = (params: any) => ({ name: 'Bar width', component: SliderConfig, mapTo: 'barWidth', - defaultState: 0.97, + defaultState: BarWidth, props: { max: 1, step: 0.01, @@ -178,7 +180,7 @@ export const createBarTypeDefinition = (params: any) => ({ name: 'Line width', component: SliderConfig, mapTo: 'lineWidth', - defaultState: 1, + defaultState: LineWidth, props: { max: 10, }, @@ -188,7 +190,7 @@ export const createBarTypeDefinition = (params: any) => ({ name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', - defaultState: 80, + defaultState: FillOpacity, props: { max: 100, }, diff --git a/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts deleted file mode 100644 index 91168c7d2..000000000 --- a/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { Bar } from './bar'; -import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs'; -import { LensIconChartBar } from '../../assets/chart_bar'; -import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor'; -import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor'; -import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; - -const sharedConfigs = getPlotlySharedConfigs(); -const VIS_CATEGORY = getPlotlyCategory(); - -export interface BarTypeParams {} - -export const createHorizontalBarTypeDefinition = (params: BarTypeParams = {}) => ({ - id: 'horizontal_bar', - name: 'horizontal_bar', - type: 'bar', - label: 'Bar', - fulllabel: 'Bar', - icontype: 'visBarVerticalStacked', - selection: { - dataLoss: 'nothing', - }, - category: VIS_CATEGORY.BASICS, - icon: LensIconChartBar, - categoryaxis: 'xaxis', - seriesaxis: 'yaxis', - orientation: 'h', - component: Bar, - editorconfig: { - panelTabs: [ - { - id: 'data-panel', - name: 'Style', - mapTo: 'dataConfig', - editor: VizDataPanel, - sections: [ - { - id: 'value_options', - name: 'Value options', - editor: ConfigValueOptions, - mapTo: 'valueOptions', - schemas: [ - { - name: 'X-axis', - isSingleSelection: false, - component: null, - mapTo: 'xaxis', - }, - { - name: 'Y-axis', - isSingleSelection: false, - component: null, - mapTo: 'yaxis', - }, - ], - }, - { - id: 'chart_options', - name: 'Chart options', - editor: ConfigValueOptions, - mapTo: 'chartOptions', - schemas: [ - { - name: 'Orientation', - isSingleSelection: true, - component: null, - mapTo: 'orientation', - props: { - dropdownList: [ - { name: 'Vertical', orientationId: 'v' }, - { name: 'Horizontal', orientationId: 'h' }, - ], - defaultSelections: [{ name: 'Horizontal', orientationId: 'h' }], - }, - }, - { - name: 'Mode', - isSingleSelection: true, - component: null, - mapTo: 'mode', - props: { - dropdownList: [ - { name: 'Group', modeId: 'group' }, - { name: 'Stack', modeId: 'stack' }, - ], - defaultSelections: [{ name: 'Group', modeId: 'group' }], - }, - }, - ], - }, - ], - }, - { - id: 'style-panel', - name: 'Layout', - mapTo: 'layoutConfig', - editor: ConfigEditor, - content: [], - }, - ], - }, - visconfig: { - layout: { - ...sharedConfigs.layout, - }, - config: { - ...sharedConfigs.config, - }, - isUniColor: false, - }, -}); diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts index 2820a72af..f3292cb5d 100644 --- a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts +++ b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts @@ -4,22 +4,23 @@ */ import { isEmpty, take } from 'lodash'; -import { getVisType } from '../vis_types'; -import { - IVisualizationContainerProps, - IField, - IQuery, - ExplorerData, -} from '../../../../../common/types/explorer'; -import { VIS_CHART_TYPES } from '../../../../../common/constants/shared'; -import { QueryManager } from '../../../../../common/query_manager'; import { AGGREGATIONS, CUSTOM_LABEL, GROUPBY, PARENTFIELDS, + SIMILAR_VIZ_TYPES, TIME_INTERVAL_OPTIONS, } from '../../../../../common/constants/explorer'; +import { VIS_CHART_TYPES } from '../../../../../common/constants/shared'; +import { QueryManager } from '../../../../../common/query_manager'; +import { + ExplorerData, + IField, + IQuery, + IVisualizationContainerProps, +} from '../../../../../common/types/explorer'; +import { getVisType } from '../vis_types'; interface IVizContainerProps { vizId: string; appData?: { fromApp: boolean }; @@ -238,6 +239,13 @@ const getUserConfigs = ( return isEmpty(configOfUser) ? userSelectedConfigs : configOfUser; }; +export const getVisTypeData = (vizId: string) => { + if (SIMILAR_VIZ_TYPES.includes(vizId)) { + return getVisType(vizId, { type: vizId }); + } + return getVisType(vizId); +}; + export const getVizContainerProps = ({ vizId, rawVizData = {}, @@ -248,13 +256,13 @@ export const getVizContainerProps = ({ explorer = { explorerData: { jsonData: [], jsonDataAll: [] } }, }: IVizContainerProps): IVisualizationContainerProps => { const getVisTypeData = () => - vizId === VIS_CHART_TYPES.Line || vizId === VIS_CHART_TYPES.Scatter + SIMILAR_VIZ_TYPES.includes(vizId as VIS_CHART_TYPES) ? { ...getVisType(vizId, { type: vizId }) } : { ...getVisType(vizId) }; const userSetConfigs = isEmpty(query) ? userConfigs - : getUserConfigs(userConfigs, rawVizData?.metadata?.fields, getVisTypeData().name, query); + : getUserConfigs(userConfigs, rawVizData?.metadata?.fields, getVisTypeData(vizId).name, query); return { data: { appData: { ...appData }, @@ -265,12 +273,12 @@ export const getVizContainerProps = ({ ...userSetConfigs, }, defaultAxes: { - ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields, getVisTypeData().name), + ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields, getVisTypeData(vizId).name), }, explorer: { ...explorer }, }, vis: { - ...getVisTypeData(), + ...getVisTypeData(vizId), }, }; }; diff --git a/dashboards-observability/public/components/visualizations/charts/vis_types.ts b/dashboards-observability/public/components/visualizations/charts/vis_types.ts index 7fdf6ea13..858e7715d 100644 --- a/dashboards-observability/public/components/visualizations/charts/vis_types.ts +++ b/dashboards-observability/public/components/visualizations/charts/vis_types.ts @@ -4,7 +4,6 @@ */ import { createBarTypeDefinition } from './bar/bar_type'; -import { createHorizontalBarTypeDefinition } from './bar/horizontal_bar_type'; import { createLineTypeDefinition } from './lines/line_type'; import { createPieTypeDefinition } from './pie/pie_type'; import { createHistogramVisDefinition } from './histogram/histogram_type'; @@ -19,7 +18,7 @@ import { createStatsTypeDefinition } from "./stats/stats_type" export const VIS_TYPES = { bar: createBarTypeDefinition, - horizontal_bar: createHorizontalBarTypeDefinition, + horizontal_bar: createBarTypeDefinition, line: createLineTypeDefinition, pie: createPieTypeDefinition, histogram: createHistogramVisDefinition, diff --git a/dashboards-observability/test/event_analytics_constants.ts b/dashboards-observability/test/event_analytics_constants.ts index c5f6df25d..e349490ff 100644 --- a/dashboards-observability/test/event_analytics_constants.ts +++ b/dashboards-observability/test/event_analytics_constants.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { LONG_CHART_COLOR } from '../common/constants/shared'; +import { LONG_CHART_COLOR, VIS_CHART_TYPES } from '../common/constants/shared'; import { createBarTypeDefinition } from '../public/components/visualizations/charts/bar/bar_type'; import { createGaugeTypeDefinition } from '../public/components/visualizations/charts/financial/gauge/gauge_type'; import { createStatsTypeDefinition } from '../public/components/visualizations/charts/stats/stats_type'; @@ -558,3 +558,9 @@ export const STATS_TEST_VISUALIZATIONS_DATA = { ...TEST_VISUALIZATIONS_DATA, vis: createStatsTypeDefinition({}), }; +export const HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA = { + ...TEST_VISUALIZATIONS_DATA, + vis: createBarTypeDefinition({ + type: VIS_CHART_TYPES.HorizontalBar, + }), +};