From 15b1e4c0aa19db5f34518c2656681e9e2badcc7b Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Wed, 17 Aug 2022 10:59:16 +0530 Subject: [PATCH] feedback Signed-off-by: Ramneet Chopra --- .../common/constants/colors.ts | 2 +- .../config_controls/config_chart_options.tsx | 4 +- .../event_analytics/utils/utils.tsx | 5 +- .../visualizations/charts/stats/stats.tsx | 71 ++++++++----------- 4 files changed, 32 insertions(+), 50 deletions(-) diff --git a/dashboards-observability/common/constants/colors.ts b/dashboards-observability/common/constants/colors.ts index 3845e41a0..adf3f4950 100644 --- a/dashboards-observability/common/constants/colors.ts +++ b/dashboards-observability/common/constants/colors.ts @@ -166,7 +166,7 @@ export const COLOR_PALETTES = [ type: 'gradient', }, ]; -export const HEX_CONTRAST_COLOR = 0xffffff; +export const HEX_CONTRAST_COLOR = 0xFFFFFF; export const PIE_PALETTES = [ { value: DEFAULT_PALETTE, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx index e86c67418..20237d031 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx @@ -151,9 +151,7 @@ export const ConfigChartOptions = ({ ...params, paddingTitle: schema.name, advancedTitle: 'advancedTitle', - dropdownList: - schema?.options?.map((option) => ({ ...option })) || - fields.map((item) => ({ ...item })), + dropdownList: schema?.options || fields, onSelectChange: handleConfigurationChange(schema.mapTo), isSingleSelection: schema.isSingleSelection, selectedAxis: vizState[schema.mapTo] || schema.defaultState, diff --git a/dashboards-observability/public/components/event_analytics/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx index cca1b2487..2e66c238c 100644 --- a/dashboards-observability/public/components/event_analytics/utils/utils.tsx +++ b/dashboards-observability/public/components/event_analytics/utils/utils.tsx @@ -320,7 +320,6 @@ export const lightenColor = (color: string, percent: number) => { }; export const filterDataConfigParameter = (parameter: Array) => - parameter.filter((i: ConfigListEntry) => i.label); + parameter.filter((i: ConfigListEntry) => i.label !== ''); -export const getRoundOf = (value: number, places: number) => - (Math.round(value * 10 ** places) / 10 ** places).toFixed(places); +export const getRoundOf = (value: number, places: number) => value.toFixed(places); diff --git a/dashboards-observability/public/components/visualizations/charts/stats/stats.tsx b/dashboards-observability/public/components/visualizations/charts/stats/stats.tsx index 7972a2332..99370cf93 100644 --- a/dashboards-observability/public/components/visualizations/charts/stats/stats.tsx +++ b/dashboards-observability/public/components/visualizations/charts/stats/stats.tsx @@ -102,16 +102,6 @@ export const Stats = ({ visualizations, layout, config }: any) => { // margin from left of grid cell for label/value const ANNOTATION_MARGIN_LEFT = metricsLength > 1 ? 0.01 : 0; let autoChartLayout: object = { - xaxis: { - visible: false, - showgrid: false, - anchor: 'y1', - }, - yaxis: { - visible: false, - showgrid: false, - anchor: 'x1', - }, annotations: [], }; @@ -132,18 +122,18 @@ export const Stats = ({ visualizations, layout, config }: any) => { value, index, valueColor, - }: createAnnotationType) => - textMode === 'values+names' || textMode === DefaultTextMode + }: createAnnotationType) => { + return textMode === 'values+names' || textMode === DefaultTextMode ? [ { ...STATS_ANNOTATION, x: 0 + ANNOTATION_MARGIN_LEFT, y: index > 0 - ? (index + 1) / metricsLength - ANNOTATION_MARGIN_LEFT - : 1 / metricsLength - ANNOTATION_MARGIN_LEFT, + ? (index + 1) / metricsLength + : 1 / metricsLength, xanchor: 'left', - yanchor: 'bottom', + yanchor: 'top', text: label, font: { size: titleSize, @@ -158,10 +148,10 @@ export const Stats = ({ visualizations, layout, config }: any) => { x: 1, y: index > 0 - ? (index + 1) / metricsLength - ANNOTATION_MARGIN_LEFT - : 1 / metricsLength - ANNOTATION_MARGIN_LEFT, + ? (index + 1) / metricsLength + : 1 / metricsLength, xanchor: 'right', - yanchor: 'bottom', + yanchor: 'top', text: createValueText(value), font: { size: valueSize, @@ -194,14 +184,15 @@ export const Stats = ({ visualizations, layout, config }: any) => { metricValue: value, }, ]; + }; const createAnnotationVerticalOrientation = ({ label, value, index, valueColor, - }: createAnnotationType) => - textMode === 'values+names' || textMode === DefaultTextMode + }: createAnnotationType) => { + return textMode === 'values+names' || textMode === DefaultTextMode ? [ { ...STATS_ANNOTATION, @@ -256,6 +247,7 @@ export const Stats = ({ visualizations, layout, config }: any) => { metricValue: value, }, ]; + }; // extend y axis range to increase height of subplot w.r.t metric data const extendYaxisRange = (metric: ConfigListEntry) => { @@ -268,51 +260,45 @@ export const Stats = ({ visualizations, layout, config }: any) => { return sortedData[0] + (avgSeriesDiff ? avgSeriesDiff : 100); }; + const getMetricValue = (label: string) => + typeof data[label][data[label].length - 1] === 'number' + ? getRoundOf(data[label][data[label].length - 1], precisionValue) + : 0; + const generateLineTraces = () => { return metrics.map((metric: ConfigListEntry, metricIndex: number) => { + const annotationOption = { + label: metric.label, + value: getMetricValue(metric.label), + index: metricIndex, + valueColor: '', + }; autoChartLayout = { ...autoChartLayout, annotations: autoChartLayout.annotations.concat( orientation === DefaultOrientation || metricsLength === 1 - ? createAnnotationVerticalOrientation({ - label: metric.label, - value: - typeof data[metric.label][data[metric.label].length - 1] === 'number' - ? getRoundOf(data[metric.label][data[metric.label].length - 1], precisionValue) - : 0, - index: metricIndex, - valueColor: '', - }) - : createAnnotationsHorizontalOrientation({ - label: metric.label, - value: - typeof data[metric.label][data[metric.label].length - 1] === 'number' - ? getRoundOf(data[metric.label][data[metric.label].length - 1], precisionValue) - : 0, - index: metricIndex, - valueColor: '', - }) + ? createAnnotationVerticalOrientation(annotationOption) + : createAnnotationsHorizontalOrientation(annotationOption) ), [`xaxis${metricIndex > 0 ? metricIndex + 1 : ''}`]: { visible: false, showgrid: false, anchor: `y${metricIndex > 0 ? metricIndex + 1 : ''}`, + layoutFor: metric.label }, [`yaxis${metricIndex > 0 ? metricIndex + 1 : ''}`]: { visible: false, showgrid: false, anchor: `x${metricIndex > 0 ? metricIndex + 1 : ''}`, range: [0, extendYaxisRange(metric)], + layoutFor: metric.label }, }; return { x: selectedDimensionsData, y: data[metric.label], - metricValue: - typeof data[metric.label][data[metric.label].length - 1] === 'number' - ? getRoundOf(data[metric.label][data[metric.label].length - 1], precisionValue) - : 0, + metricValue: getMetricValue(metric.label), fill: 'tozeroy', mode: 'lines', type: 'scatter', @@ -416,7 +402,6 @@ export const Stats = ({ visualizations, layout, config }: any) => { rows: 1, columns: metricsLength, xgap: STATS_GRID_SPACE_BETWEEN_X_AXIS, - ygap: STATS_GRID_SPACE_BETWEEN_Y_AXIS, } : { rows: metricsLength,