From d83cf2738f95c113f3fcd1bfdc2f24fbddb025f3 Mon Sep 17 00:00:00 2001 From: Abhay Pandey Date: Tue, 27 Sep 2022 17:05:39 +0530 Subject: [PATCH] changes after rebase Signed-off-by: Abhay Pandey --- .../event_analytics/explorer/explorer.tsx | 1 - .../charts/financial/gauge/gauge.tsx | 170 +++++++++--------- 2 files changed, 88 insertions(+), 83 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 74bca13c6..df132811e 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -925,7 +925,6 @@ export const Explorer = ({ if (selectedContentTabId === TAB_CHART_ID) { // parse stats section on every search - const qm = new QueryManager(); const statsTokens = qm.queryParser().parse(tempQuery).getStats(); const updatedDataConfig = getUpdatedDataConfig(statsTokens); 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 f52375d46..a425033b5 100644 --- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx +++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx @@ -64,7 +64,7 @@ export const Gauge = ({ visualizations, layout, config }: any) => { xaxes = [timestampField, ...xaxes]; } - const dimensionsLength = xaxes.length; + const xaxesLength = xaxes.length; const getAggValue = (metric: any) => { return metric.alias ? metric.alias : metric.aggregation + '' + '(' + metric.name + ')'; @@ -74,93 +74,99 @@ export const Gauge = ({ visualizations, layout, config }: any) => { const gaugeData: Plotly.Data[] = useMemo(() => { let calculatedGaugeData: Plotly.Data[] = []; - if (dimensionsLength || seriesLength) { - // case 1 and 2 is removed because dimension is not blank in any case. - // case 3: multiple dimensions and multiple metrics - - if (dimensionsLength && seriesLength) { - const selectedDimensionsData = xaxes - .map((dimension: any) => { - return queriedVizData[dimension.name] - ? queriedVizData[dimension.name].slice(0, numberOfGauges) - : []; - }) - .reduce((prev, cur) => { - return prev.map((i, j) => `${i}, ${cur[j]}`); - }); - const selectedSeriesData = series.map((seriesItem: any) => { - const val = getAggValue(seriesItem); - return queriedVizData[`${val}`] ? queriedVizData[`${val}`].slice(0, numberOfGauges) : []; - }); + // case 1,2: no dimension, single/multiple metrics + if (!xaxesLength && seriesLength >= 1) { + calculatedGaugeData = series.map((seriesItem: any) => { + return { + field_name: getAggValue(seriesItem), + value: queriedVizData[getAggValue(seriesItem)][0], + }; + }); + } - selectedSeriesData.map((seriesSlice: any, seriesSliceIndex: number) => { - calculatedGaugeData = [ - ...calculatedGaugeData, - ...seriesSlice.map((seriesSliceData: any, seriesSliceDataIndex: number) => { - return { - field_name: `${selectedDimensionsData[seriesSliceDataIndex]}, ${getAggValue( - series[seriesSliceData] - )}`, - value: seriesSliceData, - }; - }), - ]; + // case 3: multiple dimensions and multiple metrics + + if (xaxesLength && seriesLength) { + const selectedDimensionsData = xaxes + .map((dimension: any) => { + return queriedVizData[dimension.name] + ? queriedVizData[dimension.name].slice(0, numberOfGauges) + : []; + }) + .reduce((prev, cur) => { + return prev.map((i, j) => `${i}, ${cur[j]}`); }); - } + const selectedSeriesData = series.map((seriesItem: any) => { + const val = getAggValue(seriesItem); + return queriedVizData[`${val}`] ? queriedVizData[`${val}`].slice(0, numberOfGauges) : []; + }); - return calculatedGaugeData.map((gauge, index) => { - return { - type: 'indicator', - mode: 'gauge+number+delta', - value: gauge.value || 0, - title: { - text: gauge.field_name, - font: { size: titleSize }, - align: legendPlacement, - }, - ...(valueSize && { - number: { - font: { - size: valueSize, - }, - }, + selectedSeriesData.map((seriesSlice: any, seriesSliceIndex: number) => { + calculatedGaugeData = [ + ...calculatedGaugeData, + ...seriesSlice.map((seriesSliceData: any, seriesSliceDataIndex: number) => { + return { + field_name: `${selectedDimensionsData[seriesSliceDataIndex]}, ${getAggValue( + series[seriesSliceIndex] + )}`, + value: seriesSliceData, + }; }), - domain: { - ...(orientation === 'auto' || orientation === 'h' - ? { - row: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER), - column: index % PLOTLY_GAUGE_COLUMN_NUMBER, - } - : { - column: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER), - row: index % PLOTLY_GAUGE_COLUMN_NUMBER, - }), - }, - gauge: { - ...(showThresholdMarkers && - thresholds && - thresholds.length && { - threshold: { - line: { color: thresholds[0]?.color || 'red', width: 4 }, - thickness: 0.75, - value: thresholds[0]?.value || 0, - }, - }), - // threshold labels - ...(showThresholdLabels && thresholds && thresholds.length - ? { - axis: { - ticktext: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.name)], - tickvals: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.value)], - ticklen: TickLength, - }, - } - : {}), - }, - }; + ]; }); } - return calculatedGaugeData; + + return calculatedGaugeData.map((gauge, index) => { + return { + type: 'indicator', + mode: 'gauge+number+delta', + value: gauge.value || 0, + title: { + text: gauge.field_name, + font: { size: titleSize }, + align: legendPlacement, + }, + ...(valueSize && { + number: { + font: { + size: valueSize, + }, + }, + }), + domain: { + ...(orientation === 'auto' || orientation === 'h' + ? { + row: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER), + column: index % PLOTLY_GAUGE_COLUMN_NUMBER, + } + : { + column: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER), + row: index % PLOTLY_GAUGE_COLUMN_NUMBER, + }), + }, + gauge: { + ...(showThresholdMarkers && + thresholds && + thresholds.length && { + threshold: { + line: { color: thresholds[0]?.color || 'red', width: 4 }, + thickness: 0.75, + value: thresholds[0]?.value || 0, + }, + }), + // threshold labels + ...(showThresholdLabels && thresholds && thresholds.length + ? { + axis: { + ticktext: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.name)], + tickvals: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.value)], + ticklen: TickLength, + }, + } + : {}), + }, + }; + }); }, [ xaxes, series,