Skip to content

Commit

Permalink
Merge pull request #55 from deepaknevdepsl/feature/new-visualization-…
Browse files Browse the repository at this point in the history 
…scatter-823

Implemented Scatter visualization
  • Loading branch information
@abasatwar
abasatwar authored Jul 28, 2022
2 parents ba4cb8a + 1143fb4 commit ef13bd5
Show file tree
Hide file tree
Showing 10 changed files with 367 additions and 54 deletions.
1 change: 1 addition & 0 deletions dashboards-observability/common/constants/explorer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export const VIZ_CONTAIN_XY_AXIS = [
visChartTypes.Histogram,
visChartTypes.Line,
visChartTypes.Pie,
visChartTypes.Scatter,
];

// default ppl aggregation method options
Expand Down
11 changes: 7 additions & 4 deletions dashboards-observability/common/constants/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ export enum visChartTypes {
Text = 'text',
Gauge = 'gauge',
Histogram = 'histogram',
TreeMap = 'tree_map'
TreeMap = 'tree_map',
Scatter = 'scatter',
}

export interface ValueOptionsAxes {
Expand All @@ -97,7 +98,7 @@ export interface ValueOptionsAxes {

export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];

export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap, visChartTypes.Gauge, visChartTypes.Histogram];
export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap, visChartTypes.Gauge, visChartTypes.Histogram, visChartTypes.Scatter];

//Live tail constants
export const LIVE_OPTIONS = [
Expand Down Expand Up @@ -150,7 +151,7 @@ export const LIVE_OPTIONS = [

export const LIVE_END_TIME ='now';
export interface DefaultChartStylesProps {
DefaultMode: string,
DefaultModeLine: string,
Interpolation: string,
LineWidth: number,
FillOpacity: number,
Expand All @@ -159,10 +160,11 @@ export interface DefaultChartStylesProps {
LegendPosition: string,
LabelAngle: number,
DefaultSortSectors: string,
DefaultModeScatter: string,
};

export const DefaultChartStyles: DefaultChartStylesProps = {
DefaultMode: 'lines',
DefaultModeLine: 'lines',
Interpolation: 'spline',
LineWidth: 2,
FillOpacity: 40,
Expand All @@ -171,6 +173,7 @@ export const DefaultChartStyles: DefaultChartStylesProps = {
LegendPosition: 'v',
LabelAngle: 0,
DefaultSortSectors: 'largest_to_smallest',
DefaultModeScatter: 'markers'
}

export const FILLOPACITY_DIV_FACTOR = 200;
Expand Down
308 changes: 308 additions & 0 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2451,6 +2451,314 @@ 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": "Data",
"sections": Array [
Object {
"editor": [Function],
"id": "legend",
"mapTo": "legend",
"name": "Legend",
"schemas": Array [
Object {
"component": null,
"mapTo": "showLegend",
"name": "Show Legend",
"props": Object {
"defaultSelections": Array [
Object {
"id": "show",
"name": "Show",
},
],
"options": Array [
Object {
"id": "show",
"name": "Show",
},
Object {
"id": "hidden",
"name": "Hidden",
},
],
},
},
Object {
"component": null,
"mapTo": "position",
"name": "Position",
"props": Object {
"defaultSelections": Array [
Object {
"id": "v",
"name": "Right",
},
],
"options": Array [
Object {
"id": "v",
"name": "Right",
},
Object {
"id": "h",
"name": "Bottom",
},
],
},
},
Object {
"component": [Function],
"eleType": "input",
"mapTo": "legendSize",
"name": "Legend Size",
"title": "Legend Size",
},
],
},
Object {
"editor": [Function],
"id": "chart_styles",
"mapTo": "chartStyles",
"name": "Chart styles",
"schemas": Array [
Object {
"component": [Function],
"eleType": "buttons",
"mapTo": "style",
"name": "Mode",
"props": Object {
"defaultSelections": Array [
Object {
"id": "markers",
"name": "Marker",
},
],
"options": Array [
Object {
"id": "lines",
"name": "Lines",
},
Object {
"id": "markers",
"name": "Marker",
},
Object {
"id": "lines+markers",
"name": "Lines + Markers",
},
],
},
},
Object {
"component": [Function],
"eleType": "buttons",
"mapTo": "interpolation",
"name": "Interpolation",
"props": Object {
"defaultSelections": Array [
Object {
"id": "spline",
"name": "Smooth",
},
],
"options": Array [
Object {
"id": "linear",
"name": "Linear",
},
Object {
"id": "spline",
"name": "Smooth",
},
Object {
"id": "hv",
"name": "Step before",
},
Object {
"id": "vh",
"name": "Step after",
},
],
},
},
Object {
"component": [Function],
"defaultState": 2,
"eleType": "slider",
"mapTo": "lineWidth",
"name": "Line width",
"props": Object {
"max": 10,
},
},
Object {
"component": [Function],
"defaultState": 40,
"eleType": "slider",
"mapTo": "fillOpacity",
"name": "Fill Opacity",
"props": Object {
"max": 100,
},
},
Object {
"component": [Function],
"defaultState": 5,
"eleType": "slider",
"mapTo": "pointSize",
"name": "Point Size",
"props": Object {
"max": 40,
},
},
Object {
"component": [Function],
"eleType": "input",
"mapTo": "labelSize",
"name": "Label Size",
"title": "Label Size",
},
Object {
"component": [Function],
"defaultState": 0,
"eleType": "slider",
"mapTo": "rotateLabels",
"name": "Rotate labels",
"props": Object {
"max": 90,
"min": -90,
"showTicks": true,
"ticks": Array [
Object {
"label": "-90°",
"value": -90,
},
Object {
"label": "-45°",
"value": -45,
},
Object {
"label": "0°",
"value": 0,
},
Object {
"label": "45°",
"value": 45,
},
Object {
"label": "90°",
"value": 90,
},
],
},
},
],
},
Object {
"editor": [Function],
"id": "color-theme",
"mapTo": "colorTheme",
"name": "Color theme",
"schemas": Array [],
},
Object {
"defaultState": Array [],
"editor": [Function],
"id": "thresholds",
"mapTo": "thresholds",
"name": "Thresholds",
"schemas": Array [],
},
],
},
Object {
"content": Array [],
"editor": [Function],
"id": "style-panel",
"mapTo": "layoutConfig",
"name": "Layout",
},
Object {
"editor": [Function],
"id": "availability-panel",
"mapTo": "availabilityConfig",
"name": "Availability",
},
],
},
"fullLabel": "Scatter",
"icon": [Function],
"iconType": "visLine",
"id": "scatter",
"label": "Scatter",
"name": "scatter",
"selection": Object {
"dataLoss": "nothing",
},
"seriesAxis": "yaxis",
"type": "scatter",
"visConfig": Object {
"config": Object {
"barmode": "scatter",
"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
Loading

0 comments on commit ef13bd5

Please sign in to comment.