Skip to content

Commit

Permalink
Pie chart 2way sync (#1029)
Browse files Browse the repository at this point in the history
* mode bug fixed code: added, 2 way changes testing: in progress

Signed-off-by: Ramneet Chopra <[email protected]>

* pie two sync done

Signed-off-by: Ramneet Chopra <[email protected]>

* yarn test

Signed-off-by: Ramneet Chopra <[email protected]>

* pr feedback

Signed-off-by: Ramneet Chopra <[email protected]>

* spaces added in between lines

Signed-off-by: Ramneet Chopra <[email protected]>

* usememo removed from xlables

Signed-off-by: Ramneet Chopra <[email protected]>

Signed-off-by: Ramneet Chopra <[email protected]>
  • Loading branch information
ramneet-persistent authored Sep 23, 2022
1 parent 6e973b5 commit 6641976
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 135 deletions.
39 changes: 30 additions & 9 deletions common/constants/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,16 @@ export const AGGREGATION_OPTIONS = [
];

// numeric fields type for metrics
export const numericalTypes = ['float', 'double', 'bigint', 'long', 'octet', 'short', 'byte', 'integer'];
export const numericalTypes = [
'float',
'double',
'bigint',
'long',
'octet',
'short',
'byte',
'integer',
];
// Data table constants
export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px';
export const GRID_PAGE_RANGE_DISPLAY = 5;
Expand All @@ -136,19 +145,31 @@ export const HEADER_HEIGHT = 35;

// gauge chart default parameters
export interface DefaultGaugeChartParametersProps {
GaugeTitleSize: number,
DisplayDefaultGauges: number,
OrientationDefault: string,
TickLength: number,
LegendPlacement: string,
ThresholdsMaxLimit: number
};
GaugeTitleSize: number;
DisplayDefaultGauges: number;
OrientationDefault: string;
TickLength: number;
LegendPlacement: string;
ThresholdsMaxLimit: number;
}

export const DefaultGaugeChartParameters: DefaultGaugeChartParametersProps = {
GaugeTitleSize: 14,
DisplayDefaultGauges: 1,
OrientationDefault: 'h',
TickLength: 5,
LegendPlacement: 'center',
ThresholdsMaxLimit: 1
ThresholdsMaxLimit: 1,
};

// pie chart default parameters
export const PLOTLY_PIE_COLUMN_NUMBER = 2;
export const PIE_XAXIS_GAP = 0.2;
export const PIE_YAXIS_GAP = 0.1;
export interface DefaultPieChartParametersProps {
DefaultMode: string;
}

export const DefaultPieChartParameters: DefaultPieChartParametersProps = {
DefaultMode: 'pie',
};
4 changes: 4 additions & 0 deletions common/types/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -322,3 +322,7 @@ export interface DataConfigPanelProps {
visualizations: IVisualizationContainerProps;
qm?: QueryManager;
}
export interface GetTooltipHoverInfoType {
tooltipMode: string;
tooltipText: string;
}
Original file line number Diff line number Diff line change
Expand Up @@ -1422,25 +1422,25 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"name": "Chart styles",
"schemas": Array [
Object {
"component": null,
"defaultState": Array [
Object {
"label": "Pie",
"modeId": "pie",
"name": "Pie",
},
],
"component": [Function],
"eleType": "buttons",
"isSingleSelection": true,
"mapTo": "mode",
"name": "Mode",
"props": Object {
"dropdownList": Array [
"defaultSelections": Array [
Object {
"modeId": "pie",
"id": "pie",
"name": "Pie",
},
],
"options": Array [
Object {
"id": "pie",
"name": "Pie",
},
Object {
"modeId": "donut",
"id": "donut",
"name": "Donut",
},
],
Expand Down Expand Up @@ -1493,12 +1493,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
"id": "pie",
"label": "Pie",
"legendposition": "v",
"mode": "pie",
"name": "pie",
"selection": Object {
"dataLoss": "nothing",
},
"seriesaxis": "yaxis",
"showlegend": true,
"showlegend": "show",
"type": "pie",
"visconfig": Object {
"config": Object {
Expand Down
20 changes: 17 additions & 3 deletions public/components/event_analytics/utils/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import { uniqueId } from 'lodash';
import React from 'react';
import moment from 'moment';
import dateMath from '@elastic/datemath';
import { IExplorerFields, IField } from '../../../../common/types/explorer';
import {
IExplorerFields,
IField,
GetTooltipHoverInfoType,
} from '../../../../common/types/explorer';
import { DocViewRow, IDocType } from '../explorer/events_views';
import { HttpStart } from '../../../../../../src/core/public';
import PPLService from '../../../services/requests/ppl';
Expand Down Expand Up @@ -121,8 +125,8 @@ export const populateDataGrid = (
</table>
)}
{explorerFields?.queriedFields &&
explorerFields?.queriedFields?.length > 0 &&
explorerFields.selectedFields?.length === 0 ? null : (
explorerFields?.queriedFields?.length > 0 &&
explorerFields.selectedFields?.length === 0 ? null : (
<table className="osd-table table" data-test-subj="docTable">
<thead>{header2}</thead>
<tbody>{body2}</tbody>
Expand Down Expand Up @@ -354,3 +358,13 @@ export const fetchConfigObject = (editor: string, propsOptions: any) => {
return null;
}
};

export const getTooltipHoverInfo = ({ tooltipMode, tooltipText }: GetTooltipHoverInfoType) => {
if (tooltipMode === 'hidden') {
return 'none';
}
if (tooltipText === undefined) {
return 'all';
}
return tooltipText;
};
154 changes: 76 additions & 78 deletions public/components/visualizations/charts/pie/pie.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,81 @@
*/

import React, { useMemo } from 'react';
import { take, isEmpty } from 'lodash';
import { isEmpty, find } from 'lodash';
import { Plt } from '../../plotly/plot';
import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
import { getTooltipHoverInfo } from '../../../event_analytics/utils/utils';
import { ConfigListEntry } from '../../../../../common/types/explorer';
import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
import {
PLOTLY_PIE_COLUMN_NUMBER,
PIE_YAXIS_GAP,
PIE_XAXIS_GAP,
} from '../../../../../common/constants/explorer';

export const Pie = ({ visualizations, layout, config }: any) => {
const { vis } = visualizations;
const {
data,
metadata: { fields },
} = visualizations.data.rawVizData;
const { defaultAxes } = visualizations.data;
const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;
const xaxis = dataConfig?.dimensions ? dataConfig.dimensions.filter((item) => item.label) : [];
const yaxis = dataConfig?.metrics ? dataConfig.metrics.filter((item) => item.label) : [];
const type = dataConfig?.chartStyles?.mode ? dataConfig?.chartStyles?.mode[0]?.modeId : 'pie';
const lastIndex = fields.length - 1;
const colorTheme = dataConfig?.chartStyles?.colorTheme
? dataConfig?.chartStyles?.colorTheme
: { name: DEFAULT_PALETTE };
const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : vis.showlegend;
const legendPosition = dataConfig?.legend?.position || vis.legendposition;
const legendSize = dataConfig?.legend?.size || vis.legendSize;
const labelSize = dataConfig?.chartStyles?.labelSize || vis.labelSize;
const tooltipMode =
dataConfig?.tooltipOptions?.tooltipMode !== undefined
? dataConfig.tooltipOptions.tooltipMode
: 'show';
const tooltipText =
dataConfig?.tooltipOptions?.tooltipText !== undefined
? dataConfig.tooltipOptions.tooltipText
: 'all';

if (isEmpty(xaxis) || isEmpty(yaxis))
return <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;
const {
dataConfig: {
chartStyles = {},
dimensions = [],
metrics = [],
span = {},
legend = {},
panelOptions = {},
tooltipOptions = {},
},
layoutConfig = {},
} = visualizations?.data?.userConfigs;
const type = chartStyles.mode || vis.mode;
const colorTheme = chartStyles.colorTheme ? chartStyles.colorTheme : { name: DEFAULT_PALETTE };
const showLegend = legend.showLegend === 'hidden' ? false : vis.showlegend;
const legendSize = legend.size || vis.legendSize;
const labelSize = chartStyles.labelSize || vis.labelSize;
const title = panelOptions.title || layoutConfig.layout?.title || '';
const timestampField = find(fields, (field) => field.type === 'timestamp');

let valueSeries;
if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
valueSeries = [...yaxis];
/**
* determine x axis
*/
let xaxes: ConfigListEntry[];
if (span && span.time_field && timestampField) {
xaxes = [timestampField, ...dimensions];
} else {
valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
xaxes = dimensions;
}

if (isEmpty(xaxes) || isEmpty(metrics)) {
return <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;
}

const invertHex = (hex: string) =>
(Number(`0x1${hex}`) ^ HEX_CONTRAST_COLOR).toString(16).substr(1).toUpperCase();

const createLegendLabels = (dimLabels: string[], xaxisLables: string[]) => {
return dimLabels.map((label: string, index: number) => {
return [xaxisLables[index], label].join(',');
});
};

const labelsOfXAxis = useMemo(() => {
let legendLabels = [];
if (xaxis.length > 0) {
let dimLabelsArray = data[xaxis[0].label];
for (let i = 0; i < xaxis.length - 1; i++) {
dimLabelsArray = createLegendLabels(dimLabelsArray, data[xaxis[i + 1].label]);
}
legendLabels = dimLabelsArray;
} else {
legendLabels = data[fields[lastIndex].name];
const labelsOfXAxis = xaxes.reduce((prev, cur) => {
if (data[cur.name]) {
if (prev.length === 0) return data[cur.name].flat();
return prev.map(
(item: string | number, index: number) => `${item}, ${data[cur.name][index]}`
);
}
return legendLabels;
}, [xaxis, data, fields, createLegendLabels]);
}, []);

const hexColor = invertHex(colorTheme);

const pies = useMemo(
() =>
valueSeries.map((field: any, index: number) => {
metrics.map((field: any, index: number) => {
const fieldName = field.alias ? field.alias : `${field.aggregation}(${field.name})`;
const marker =
colorTheme.name !== DEFAULT_PALETTE
? {
marker: {
colors: [...Array(data[field.name].length).fill(colorTheme.childColor)],
colors: [...Array(data[fieldName].length).fill(colorTheme.childColor)],
line: {
color: hexColor,
width: 1,
Expand All @@ -88,57 +88,55 @@ export const Pie = ({ visualizations, layout, config }: any) => {
: undefined;
return {
labels: labelsOfXAxis,
values: data[field.label],
values: data[fieldName],
type: 'pie',
name: field.name,
name: fieldName,
hole: type === 'pie' ? 0 : 0.5,
text: field.name,
text: fieldName,
textinfo: 'percent',
hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
hoverinfo: getTooltipHoverInfo({
tooltipMode: tooltipOptions.tooltipMode,
tooltipText: tooltipOptions.tooltipText,
}),
automargin: true,
textposition: 'outside',
title: { text: fieldName },
domain: {
row: Math.floor(index / 3),
column: index % 3,
row: Math.floor(index / PLOTLY_PIE_COLUMN_NUMBER),
column: index % PLOTLY_PIE_COLUMN_NUMBER,
},
...marker,
outsidetextfont: {
size: labelSize,
},
};
}),
[valueSeries, valueSeries, data, labelSize, labelsOfXAxis, colorTheme]
[metrics, data, labelSize, labelsOfXAxis, colorTheme]
);

const isAtleastOneFullRow = Math.floor(valueSeries.length / 3) > 0;

const mergedLayout = useMemo(
() => ({
const mergedLayout = useMemo(() => {
const isAtleastOneFullRow = Math.floor(metrics.length / PLOTLY_PIE_COLUMN_NUMBER) > 0;
return {
grid: {
rows: Math.floor(valueSeries.length / 3) + 1,
columns: isAtleastOneFullRow ? 3 : valueSeries.length,
xgap: PIE_XAXIS_GAP,
ygap: PIE_YAXIS_GAP,
rows: Math.floor(metrics.length / PLOTLY_PIE_COLUMN_NUMBER) + 1,
columns: isAtleastOneFullRow ? PLOTLY_PIE_COLUMN_NUMBER : metrics.length,
pattern: 'independent',
},
...layout,
...(layoutConfig.layout && layoutConfig.layout),
title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
title,
legend: {
...layout.legend,
orientation: legendPosition,
font: { size: legendSize },
orientation: legend.position || vis.legendposition,
...(legendSize && {
font: { size: legendSize },
}),
},
showlegend: showLegend,
}),
[
valueSeries,
isAtleastOneFullRow,
layoutConfig.layout,
dataConfig?.panelOptions?.title,
layoutConfig.layout?.title,
layout.legend,
legendPosition,
legendSize,
]
);
};
}, [metrics, layoutConfig.layout, title, layout.legend]);

const mergedConfigs = useMemo(
() => ({
Expand Down
Loading

0 comments on commit 6641976

Please sign in to comment.