Feature/new configs 670 #3

rinku-kumar-psl · 2022-05-19T13:13:59Z

Description

[Describe what this change achieves]

The features included are:

Legend
Mode
Interpolation
Line Width
Fill Opacity
Point Size

Issues Resolved

[List any issues this PR will resolve]
opensearch-project#697

Check List

New functionality includes Legend mode and chart styles config as per Implementation of Visualizations opensearch-project/observability#697
- All tests pass, including unit test,
Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

Signed-off-by: rinku-kumar-psl <[email protected]>

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx

…from chartOption Signed-off-by: rinku-kumar-psl <[email protected]>

Signed-off-by: rinku-kumar-psl <[email protected]>

spattnaik · 2022-05-20T08:21:27Z

dashboards-observability/common/constants/shared.ts

+  ShowLegend = 'show',
+  LegendPosition = 'v'
+};


Add a newline here

spattnaik · 2022-05-20T09:39:37Z

dashboards-observability/common/constants/shared.ts

+export const LIVE_END_TIME ='now';
+
+export enum DefaultChartStyles {


I think, this should be a class or interface rather than an enum. You should define an interface first with all these properties and can create a simple object of that interface type which have these default values. Enum is usually used when similar items are there for considerations. Something like ChartStyles, which can be "Bar", "Tree", "Gause"... But this is some characteristics you are defining here, whose properties are not similar in nature.

Thanks, @spattnaik
changes are done as per your suggestion.

spattnaik · 2022-05-20T09:47:15Z

...nalytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx

+      };
+      return (
+        <>
+          <DimensionComponent key={`viz-series-${index}`} {...params} />


Ideally, index should not be used as a key unless we have no other choices. Are there any other parameter we can use here? Is the Title unique?

As per our discussion, kept as it is.

spattnaik · 2022-05-20T09:52:48Z

...plorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx

+  const currentSchemas = useMemo(() => {
+    if (!vizState?.style || vizState?.style === "lines") {
+      return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize');
+    } else if (vizState?.style === "bar") {


You do not need else blocks here. All blocks can be converted to if blocks. You will never have an else condition, as the function is going to terminate with the return statement.

spattnaik · 2022-05-20T09:53:25Z

...plorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx

+      return schemas.filter((schema: IConfigPanelOptionSection) => !["interpolation", "pointSize"].includes(schema.mapTo));
+    } else if (vizState?.style === "markers") {
+      return schemas.filter((schema: IConfigPanelOptionSection) => ["style", "pointSize"].includes(schema.mapTo));
+    } else return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation');


This can be a simple return statement without any else.

spattnaik · 2022-05-20T09:55:42Z

...plorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx

+      }
+      return (
+        <>
+          <DimensionComponent key={`viz-series-${index}`} {...params} />


Similar to an earlier comment, index should not ideally be used as the key.

spattnaik · 2022-05-20T09:56:12Z

dashboards-observability/public/components/event_analytics/utils/utils.tsx

+  const [, r, g, b] = rgbElements.map((color) => parseInt(color, 16));
+  const rgbaFormat = `rgba(${r},${g},${b},${opacity})`;
+  return rgbaFormat;
+};


Add newline

spattnaik · 2022-05-20T09:58:22Z

dashboards-observability/public/components/visualizations/charts/lines/line.tsx

+  const showLegend = dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend ? false : true;
+  const legendPosition = dataConfig?.legend?.position || LegendPosition;
+  const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize;
+  const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 200 : FillOpacity / 200;


Avoid using numbers directly. Define what is 200 in a constant and then use it here.

Signed-off-by: rinku-kumar-psl <[email protected]>

rinku-kumar-psl · 2022-05-25T09:00:44Z

Will raise external PR.

rinku-kumar-psl added 11 commits May 19, 2022 17:43

graph style section UI schema

42d0679

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

changes for style mode and interpolation

3b3abea

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

lineWidth integration for line mode

2105e8e

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

changes for Legend and Orientation in Line

68fb02b

Signed-off-by: rinku-kumar-psl <[email protected]>

point size and Bar Alignment changes

b2758a9

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts

implemented fill opacity for line chart

6cf80f8

Signed-off-by: rinku-kumar-psl <[email protected]> # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx

changes for line width and fill opacity in bar mode and removed mode …

9e41e21

…from chartOption Signed-off-by: rinku-kumar-psl <[email protected]>

updated bar mode opacity in line chart

07d1243

Signed-off-by: rinku-kumar-psl <[email protected]>

refactored the config chart style code

f678627

Signed-off-by: rinku-kumar-psl <[email protected]>

snapshot updated and code refactored

2c47319

Signed-off-by: rinku-kumar-psl <[email protected]>

type added to new component

7efa6ff

Signed-off-by: rinku-kumar-psl <[email protected]>

rinku-kumar-psl requested review from spattnaik and abasatwar May 19, 2022 13:13

spattnaik requested changes May 20, 2022

View reviewed changes

review comments addressed

b101c83

Signed-off-by: rinku-kumar-psl <[email protected]>

abasatwar approved these changes May 24, 2022

View reviewed changes

cypress test case added and resolve button label wraping issue

c0f9783

Signed-off-by: rinku-kumar-psl <[email protected]>

rinku-kumar-psl closed this May 25, 2022

rinku-kumar-psl deleted the feature/new-configs-670 branch May 25, 2022 09:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/new configs 670 #3

Feature/new configs 670 #3

rinku-kumar-psl commented May 19, 2022

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022 •

edited

Loading

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022

spattnaik May 20, 2022

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022

spattnaik May 20, 2022

rinku-kumar-psl May 23, 2022

rinku-kumar-psl commented May 25, 2022

		export const LIVE_END_TIME ='now';

		export enum DefaultChartStyles {

Feature/new configs 670 #3

Feature/new configs 670 #3

Conversation

rinku-kumar-psl commented May 19, 2022

Description

Issues Resolved

Check List

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rinku-kumar-psl May 23, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rinku-kumar-psl commented May 25, 2022

rinku-kumar-psl May 23, 2022 •

edited

Loading