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

Feature/metrics chart #1

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feature/metrics chart #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
df2e9b5
metrics chart base code added
ramneet-persistent Aug 18, 2022
79532fe
feat: Metric Chart with Styles
SivaprasadAluri Aug 22, 2022
1e87ad5
updated snaps
SivaprasadAluri Aug 22, 2022
4f3d51d
removed spaces and comments
SivaprasadAluri Aug 22, 2022
f4a9592
fixed Review comments
SivaprasadAluri Aug 22, 2022
c190731
updated with review comments
SivaprasadAluri Aug 25, 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
48 changes: 38 additions & 10 deletions dashboards-observability/common/constants/explorer.ts
View file
Open in desktop
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,38 @@ 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,
};

// default ppl aggregation method options for metrics
export const METRICS_AGGREGATION_OPTIONS = [
{
label: 'COUNT',
},
{
label: 'SUM',
},
{
label: 'AVERAGE',
},
{
label: 'MAX',
},
{
label: 'MIN',
},
];
Comment on lines +181 to +182
Copy link

Choose a reason for hiding this comment

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

Please add a empty line below. You can also use Prettify to format this file.

2 changes: 2 additions & 0 deletions dashboards-observability/common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export enum visChartTypes {
TreeMap = 'tree_map',
Scatter = 'scatter',
LogsView = 'logs_view',
Metrics = 'metrics',
}

export interface ValueOptionsAxes {
Expand All @@ -110,6 +111,7 @@ export const ENABLED_VIS_TYPES = [
visChartTypes.Histogram,
visChartTypes.Scatter,
visChartTypes.LogsView,
visChartTypes.Metrics,
];

//Live tail constants
Expand Down
11 changes: 11 additions & 0 deletions dashboards-observability/common/types/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,3 +274,14 @@ export interface ConfigList {
dimensions?: ConfigListEntry[] | HistogramConfigList[];
metrics?: ConfigListEntry[];
}

export interface MetricListEntry {
label: string;
aggregation: string[];
custom_label: string;
name: string;
}

export interface MetricList {
metrics?: MetricListEntry[];
}
102 changes: 102 additions & 0 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2839,6 +2839,108 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
},
},
Object {
"category": "Visualizations",
"categoryaxis": "xaxis",
"component": [Function],
"editorconfig": Object {
"panelTabs": Array [
Object {
"editor": [Function],
"id": "data-panel",
"mapTo": "dataConfig",
"name": "Style",
"sections": Array [
Object {
"editor": [Function],
"id": "color-theme",
"mapTo": "colorTheme",
"name": "Color theme",
"schemas": Array [],
},
Object {
"editor": [Function],
"id": "fontsize",
"mapTo": "FontSize",
"name": "Metric FontSize",
"schemas": Array [
Object {
"component": [Function],
"eleType": "input",
"mapTo": "fontsize",
"name": "Font size",
"title": "Font size",
},
],
},
],
},
],
},
"fulllabel": "Metrics",
"icon": [Function],
"icontype": "visTable",
"id": "metrics",
"label": "Metrics",
"name": "metrics",
"selection": Object {
"dataLoss": "nothing",
},
"seriesaxis": "yaxis",
"type": "metrics",
"visconfig": Object {
"config": Object {
"barmode": "line",
"displaylogo": false,
"responsive": true,
"xaxis": Object {
"automargin": true,
},
"yaxis": Object {
"automargin": true,
},
},
"layout": Object {
"colorway": Array [
"#3CA1C7",
"#8C55A3",
"#DB748A",
"#F2BE4B",
"#68CCC2",
"#2A7866",
"#843769",
"#374FB8",
"#BD6F26",
"#4C636F",
],
"height": 1180,
"legend": Object {
"orientation": "v",
"traceorder": "normal",
},
"margin": Object {
"b": 30,
"l": 60,
"pad": 0,
"r": 30,
"t": 50,
},
"paper_bgcolor": "rgba(0, 0, 0, 0)",
"plot_bgcolor": "rgba(0, 0, 0, 0)",
"showlegend": true,
"xaxis": Object {
"fixedrange": true,
"showgrid": false,
"visible": true,
},
"yaxis": Object {
"fixedrange": true,
"showgrid": false,
"visible": true,
},
},
},
},
]
}
placeholder="Select a chart"
Expand Down
18 changes: 14 additions & 4 deletions ...ytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@
*/

import React, { Fragment, useCallback, useMemo } from 'react';
import { EuiAccordion, EuiSpacer } from '@elastic/eui';
import { EuiAccordion, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
import { ButtonGroupItem } from './config_button_group';
import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';

export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) => {
export const ConfigLegend = ({
schemas,
vizState,
handleConfigChange,
sectionName = 'Legend',
}: any) => {
const handleConfigurationChange = useCallback(
(stateFiledName) => {
return (changes) => {
Expand Down Expand Up @@ -50,15 +55,20 @@ export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) =>
}
return (
<Fragment key={`viz-series-${index}`}>
<DimensionComponent {...params} />
<DimensionComponent {...params} />
<EuiSpacer size="s" />
</Fragment>
);
});
}, [schemas, vizState, handleConfigurationChange]);

return (
<EuiAccordion initialIsOpen id="configPanel__legend" buttonContent="Legend" paddingSize="s">
<EuiAccordion
initialIsOpen
id={htmlIdGenerator('configPanel__legend')()}
buttonContent={sectionName}
paddingSize="s"
>
{dimensions}
</EuiAccordion>
);
Expand Down
18 changes: 13 additions & 5 deletions ...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
} else if (
visualizations.vis.name !== visChartTypes.HeatMap &&
visualizations.vis.name !== visChartTypes.Histogram &&
visualizations.vis.name !== visChartTypes.Metrics &&
(data.defaultAxes.xaxis || data.defaultAxes.yaxis)
) {
const { xaxis, yaxis } = data.defaultAxes;
Expand All @@ -94,6 +95,10 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
setConfigList({
dimensions: [{ bucketSize: '', bucketOffset: '' }],
});
} else if (visualizations.vis.name === visChartTypes.Metrics) {
setConfigList({
metrics: [initialConfigEntry],
});
Comment on lines +98 to +101
Copy link

Choose a reason for hiding this comment

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

please take a pull of latest code, we are using switch case here in place of if-else

}
}, [
data.defaultAxes,
Expand Down Expand Up @@ -311,11 +316,14 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
<EuiSpacer size="s" />
{visualizations.vis.name !== visChartTypes.Histogram ? (
<>
<EuiTitle size="xxs">
<h3>Dimensions</h3>
</EuiTitle>
{getCommonUI(configList.dimensions, 'dimensions')}

{visualizations.vis.name !== visChartTypes.Metrics && (
<>
<EuiTitle size="xxs">
<h3>Dimensions</h3>
</EuiTitle>
{getCommonUI(configList.dimensions, 'dimensions')}
</>
)}
<EuiSpacer size="s" />
<EuiTitle size="xxs">
<h3>Metrics</h3>
Expand Down
Loading