Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Destructured visMetaData and dataConfig Objects in all visualizations #1106

Merged
merged 13 commits into from
Oct 14, 2022
Merged

Destructured visMetaData and dataConfig Objects in all visualizations #1106

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
412c48c
Bug:1058 destructure of visMetaData object
Koustubh5585 Oct 10, 2022
662b3b9
Fixed charts no results found allignment issue
Koustubh5585 Oct 10, 2022
95fef81
Code optimization
Koustubh5585 Oct 10, 2022
00f88cf
Destructured dataConfig object
Koustubh5585 Oct 11, 2022
50fbaed
Bug:1058 destructure of visMetaData object
Koustubh5585 Oct 10, 2022
a706333
Fixed charts no results found allignment issue
Koustubh5585 Oct 10, 2022
9541963
Code optimization
Koustubh5585 Oct 10, 2022
e3318cf
Destructured dataConfig object
Koustubh5585 Oct 11, 2022
e07a83e
Merged latest main
Koustubh5585 Oct 11, 2022
55844c4
Code optimized for dataConfig destructuring
Koustubh5585 Oct 12, 2022
676675e
Merged latest main
Koustubh5585 Oct 12, 2022
0ebc010
Merged latest main
Koustubh5585 Oct 13, 2022
e71e35f
Merged latest main and removed conflicts
Koustubh5585 Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...mponents/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 20px;
}
116 changes: 63 additions & 53 deletions dashboards-observability/public/components/visualizations/charts/bar/bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,16 @@
* 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 {
LONG_CHART_COLOR,
PLOTLY_COLOR,
FILLOPACITY_DIV_FACTOR,
} from '../../../../../common/constants/shared';
import { AGGREGATIONS, BREAKDOWNS, GROUPBY } from '../../../../../common/constants/explorer';
import { LONG_CHART_COLOR, PLOTLY_COLOR } 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;
Expand All @@ -31,78 +27,92 @@ export const Bar = ({ visualizations, layout, config }: any) => {
},
userConfigs,
},
vis: visMetaData,
vis: {
type,
icontype,
orientation,
labelangle,
linewidth,
barwidth,
groupwidth,
showlegend,
legendposition,
},
}: IVisualizationContainerProps = visualizations;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could destruct visMetaData at line 30 directly without renaming. Please apply this code review to all other charts that have this similar problem.

Copy link
Contributor Author

@Koustubh5585 Koustubh5585 Oct 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @mengweieric, this is already taken care, can you please check once https://github.com/opensearch-project/observability/pull/1106/files (commit id: 95fef81)

const lastIndex = fields.length - 1;
const { dataConfig = {}, layoutConfig = {}, availabilityConfig = {} } = userConfigs;
const {
dataConfig: {
colorTheme = [],
chartStyles = {},
span = {},
legend = {},
panelOptions = {},
thresholds = [],
[GROUPBY]: dimensions = [],
[AGGREGATIONS]: series = [],
[BREAKDOWNS]: breakdowns = [],
},
layoutConfig = {},
availabilityConfig = {},
} = userConfigs;

if (
isEmpty(queriedVizData) ||
!Array.isArray(dataConfig[GROUPBY]) ||
!Array.isArray(dataConfig[AGGREGATIONS]) ||
(dataConfig[BREAKDOWNS] && !Array.isArray(dataConfig[BREAKDOWNS]))
!Array.isArray(dimensions) ||
!Array.isArray(series) ||
(breakdowns && !Array.isArray(breakdowns))
)
return <EmptyPlaceholder icon={visMetaData?.icontype} />;
return <EmptyPlaceholder icon={icontype} />;

/**
* determine stylings
*/
const barOrientation = dataConfig.chartStyles?.orientation || visMetaData.orientation;
const isVertical = barOrientation === visMetaData.orientation;

const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || visMetaData.labelangle;
const lineWidth = dataConfig?.chartStyles?.lineWidth || visMetaData.linewidth;
const fillOpacity =
dataConfig?.chartStyles?.fillOpacity !== undefined
? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR
: visMetaData.fillOpacity / FILLOPACITY_DIV_FACTOR;
const barWidth = 1 - (dataConfig?.chartStyles?.barWidth || visMetaData.barwidth);
const groupWidth = 1 - (dataConfig?.chartStyles?.groupWidth || visMetaData.groupwidth);
const showLegend = !(
dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== visMetaData.showlegend
);
const legendPosition = dataConfig?.legend?.position || visMetaData.legendposition;
const labelSize = dataConfig?.chartStyles?.labelSize || DEFAULT_LABEL_SIZE;
const barOrientation = chartStyles.orientation || orientation;
const isVertical = barOrientation === orientation;
const tickAngle = chartStyles.rotateBarLabels || labelangle;
const lineWidth = chartStyles.lineWidth || linewidth;
const barWidth = 1 - (chartStyles.barWidth || barwidth);
const groupWidth = 1 - (chartStyles.groupWidth || groupwidth);
const showLegend = !(legend.showLegend && legend.showLegend !== showlegend);
const legendPosition = legend.position || legendposition;
const labelSize = chartStyles.labelSize || DEFAULT_LABEL_SIZE;

const getSelectedColorTheme = (field: any, index: number) =>
(dataConfig?.colorTheme?.length > 0 &&
dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.label)
?.color) ||
(colorTheme.length > 0 &&
colorTheme.find((colorSelected) => colorSelected.name.name === field.label)?.color) ||
PLOTLY_COLOR[index % PLOTLY_COLOR.length];

let bars;
let valueSeries;
let valueForXSeries;

/**
* determine x axis
*/
const xaxes = useMemo(() => {
// breakdown selections
if (dataConfig[BREAKDOWNS]) {
if (breakdowns) {
return [
...dataConfig[GROUPBY].filter(
(dimension) =>
!some(dataConfig[BREAKDOWNS], (breakdown) => breakdown.label === dimension.label)
...dimensions.filter(
(dimension) => !some(breakdowns, (breakdown) => breakdown.label === dimension.label)
),
];
}

// span selection
const timestampField = find(fields, (field) => field.type === 'timestamp');
if (dataConfig.span && dataConfig.span.time_field && timestampField) {
return [timestampField, ...dataConfig[GROUPBY]];
if (span && span.time_field && timestampField) {
return [timestampField, ...dimensions];
}

return [...dataConfig[GROUPBY]];
}, [dataConfig[GROUPBY], dataConfig[BREAKDOWNS]]);
return [...dimensions];
}, [dimensions, breakdowns]);

/**
* determine y axis
*/
const yaxes = useMemo(() => {
return Array.isArray(dataConfig[AGGREGATIONS]) ? [...dataConfig[AGGREGATIONS]] : [];
}, [dataConfig[AGGREGATIONS]]);
return Array.isArray(series) ? [...series] : [];
}, [series]);

/**
* prepare data for visualization, map x-xais to y-xais
Expand All @@ -125,7 +135,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
return {
y: isVertical ? queriedVizData[getPropName(yMetric)] : chartAxis,
x: isVertical ? chartAxis : queriedVizData[getPropName(yMetric)],
type: visMetaData.type,
type: type,
marker: {
color: getSelectedColorTheme(yMetric, idx),
line: {
Expand All @@ -147,8 +157,8 @@ export const Bar = ({ visualizations, layout, config }: any) => {
colorway: plotlyColorway,
...layout,
...(layoutConfig.layout && layoutConfig.layout),
title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
barmode: dataConfig?.chartStyles?.mode || visualizations.vis.mode,
title: panelOptions?.title || layoutConfig.layout?.title || '',
barmode: chartStyles.mode || visualizations.vis.mode,
font: {
size: labelSize,
},
Expand All @@ -164,14 +174,14 @@ export const Bar = ({ visualizations, layout, config }: any) => {
},
showlegend: showLegend,
};
if (dataConfig.thresholds || availabilityConfig.level) {
if (thresholds || availabilityConfig.level) {
const thresholdTraces = {
x: [],
y: [],
mode: 'text',
text: [],
};
const thresholds = dataConfig.thresholds ? dataConfig.thresholds : [];
const threshold = thresholds ? thresholds : [];
const levels = availabilityConfig.level ? availabilityConfig.level : [];

const mapToLine = (list: ThresholdUnitType[] | AvailabilityUnitType[], lineStyle: any) => {
Expand Down Expand Up @@ -200,7 +210,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
});
};

mergedLayout.shapes = [...mapToLine(thresholds, { dash: 'dashdot' }), ...mapToLine(levels, {})];
mergedLayout.shapes = [...mapToLine(threshold, { dash: 'dashdot' }), ...mapToLine(levels, {})];
bars = [...bars, thresholdTraces];
}

Expand Down
28 changes: 15 additions & 13 deletions dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,28 +43,30 @@ export const DataTable = ({ visualizations, layout, config }: any) => {
vis: visMetaData,
}: IVisualizationContainerProps = visualizations;

const { dataConfig = {} } = userConfigs;
const {
dataConfig: { chartStyles = {} },
} = userConfigs;

const enablePagination =
typeof dataConfig?.chartStyles?.enablePagination !== 'undefined'
? dataConfig?.chartStyles?.enablePagination
typeof chartStyles.enablePagination !== 'undefined'
? chartStyles.enablePagination
: visualizations.vis.enablepagination;

const showTableHeader =
typeof dataConfig?.chartStyles?.showTableHeader !== 'undefined'
? dataConfig?.chartStyles?.showTableHeader
typeof chartStyles.showTableHeader !== 'undefined'
? chartStyles.showTableHeader
: visualizations.vis.showtableheader;

const colunmFilter =
typeof dataConfig?.chartStyles?.colunmFilter !== 'undefined'
? dataConfig?.chartStyles?.colunmFilter
typeof chartStyles.colunmFilter !== 'undefined'
? chartStyles.colunmFilter
: visualizations.vis.colunmfilter;

const columnAlignment =
dataConfig?.chartStyles?.columnAlignment || visualizations.vis.columnalignment;
const columnAlignment = chartStyles.columnAlignment || visualizations.vis.columnalignment;

const columnWidth =
typeof dataConfig?.chartStyles?.columnWidth !== 'undefined'
? dataConfig?.chartStyles?.columnWidth
typeof chartStyles.columnWidth !== 'undefined'
? chartStyles.columnWidth
: visualizations.vis.columnwidth;

useEffect(() => {
Expand Down Expand Up @@ -127,14 +129,14 @@ export const DataTable = ({ visualizations, layout, config }: any) => {
}, [colunmFilter, columnAlignment]);

useEffect(() => {
if (!dataConfig?.chartStyles?.columnWidth) {
if (!chartStyles.columnWidth) {
gridRef?.current?.api?.sizeColumnsToFit();
} else {
columns.forEach((col: any) =>
gridRef?.current?.columnApi?.setColumnWidth(col.field, Number(columnWidth))
);
}
}, [columnWidth, columns, dataConfig]);
}, [columnWidth, columns]);

const onPageSizeChanged = useCallback(
(val: number) => {
Expand Down
61 changes: 33 additions & 28 deletions dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React, { useMemo } from 'react';
import Plotly from 'plotly.js-dist';
import { find, isEmpty } from 'lodash';
import { Plt } from '../../../plotly/plot';
import Plotly from 'plotly.js-dist';
import React, { useMemo } from 'react';
import {
AGGREGATIONS,
DEFAULT_GAUGE_CHART_PARAMETERS,
GROUPBY,
PLOTLY_GAUGE_COLUMN_NUMBER,
} from '../../../../../../common/constants/explorer';
import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../common/constants/explorer';
import { IVisualizationContainerProps } from '../../../../../../common/types/explorer';
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';
import { getPropName } from '../../../../event_analytics/utils/utils';
import { Plt } from '../../../plotly/plot';

const {
GaugeTitleSize,
Expand All @@ -35,41 +35,46 @@ export const Gauge = ({ visualizations, layout, config }: any) => {
},
userConfigs,
},
vis: visMetaData,
vis: { icontype },
}: IVisualizationContainerProps = visualizations;

// data config parametrs
const { dataConfig = {}, layoutConfig = {} } = userConfigs;
let xaxes = dataConfig[GROUPBY] ?? [];
const series = dataConfig[AGGREGATIONS] ?? [];
const {
dataConfig: {
span = {},
chartStyles = {},
panelOptions = {},
thresholds = [],
[GROUPBY]: dimensions = [],
[AGGREGATIONS]: series = [],
},
layoutConfig = {},
} = userConfigs;

const seriesLength = series.length;
const numberOfGauges = dataConfig?.panelOptions?.numberOfGauges || DisplayDefaultGauges;
const numberOfGauges = panelOptions.numberOfGauges || DisplayDefaultGauges;

// style parameters
const thresholds = dataConfig?.thresholds || [];
const titleSize = dataConfig?.chartStyles?.titleSize || GaugeTitleSize;
const valueSize = dataConfig?.chartStyles?.valueSize;
const showThresholdMarkers = dataConfig?.chartStyles?.showThresholdMarkers || false;
const showThresholdLabels = dataConfig?.chartStyles?.showThresholdLabels || false;
const orientation = dataConfig?.chartStyles?.orientation || OrientationDefault;
const legendPlacement = dataConfig?.chartStyles?.legendPlacement || LegendPlacement;

const titleSize = chartStyles.titleSize || GaugeTitleSize;
const valueSize = chartStyles.valueSize;
const showThresholdMarkers = chartStyles.showThresholdMarkers || false;
const showThresholdLabels = chartStyles.showThresholdLabels || false;
const orientation = chartStyles.orientation || OrientationDefault;
const legendPlacement = chartStyles.legendPlacement || LegendPlacement;

let xaxes = dimensions;
const isEmptyPlot = !seriesLength || isEmpty(queriedVizData);

const timestampField = find(fields, (field) => field.type === 'timestamp');

if (dataConfig.span && dataConfig.span.time_field && timestampField) {
if (span && span.time_field && timestampField) {
xaxes = [timestampField, ...xaxes];
}

const xaxesLength = xaxes.length;

if (isEmptyPlot) return <EmptyPlaceholder icon={visMetaData?.icontype} />;
if (isEmptyPlot) return <EmptyPlaceholder icon={icontype} />;

const gaugeData: Plotly.Data[] = useMemo(() => {
let calculatedGaugeData: Plotly.Data[] = [];
// case 1,2: no dimension, single/multiple metrics
if (!xaxesLength && seriesLength >= 1) {
if (!xaxes.length && seriesLength >= 1) {
calculatedGaugeData = series.map((seriesItem: any) => {
return {
field_name: getPropName(seriesItem),
Expand All @@ -79,7 +84,7 @@ export const Gauge = ({ visualizations, layout, config }: any) => {
}

// case 3: multiple dimensions and multiple metrics
if (xaxesLength && seriesLength) {
if (xaxes.length && seriesLength) {
const selectedDimensionsData = xaxes
.map((dimension: any) => {
return queriedVizData[dimension.name]
Expand Down Expand Up @@ -192,9 +197,9 @@ export const Gauge = ({ visualizations, layout, config }: any) => {
},
...layout,
...(layoutConfig.layout && layoutConfig.layout),
title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
title: panelOptions.title || layoutConfig.layout?.title || '',
};
}, [layout, gaugeData.length, layoutConfig.layout, dataConfig?.panelOptions?.title, orientation]);
}, [layout, gaugeData.length, layoutConfig.layout, panelOptions.title, orientation]);

const mergedConfigs = {
...config,
Expand Down
Loading