Skip to content

Commit c90b685

Browse files
edro15edro15
authored
Merge pull request #4 from edro15/master
Minor changes to both visualizations
2 parents 545c2ad + 154d5cb commit c90b685

File tree

7 files changed

+204443
-204408
lines changed

7 files changed

+204443
-204408
lines changed

‎appserver/static/visualizations/boxplot/package-lock.json‎

Lines changed: 21 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎appserver/static/visualizations/boxplot/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
"c3": "^0.6.6",
1818
"d3": "^5.5.0",
1919
"jquery": "^2.2.4",
20-
"nvd3": "^1.8.6",
21-
"plotly": "^1.0.6",
2220
"plotly.js-dist": "^1.46.0",
2321
"regexp-replace-loader": "^1.0.1",
2422
"save": "^2.3.2",

‎appserver/static/visualizations/boxplot/src/visualization_source.js‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,20 @@ function(
1414
SplunkVisualizationUtils
1515
) {
1616

17+
var isDarkTheme = SplunkVisualizationUtils.getCurrentTheme &&
18+
SplunkVisualizationUtils.getCurrentTheme() === 'dark';
19+
1720
return SplunkVisualizationBase.extend({
1821

1922
initialize: function() {
2023
// Save this.$el for convenience
2124
this.$el = $(this.el);
2225

26+
// Handle multiple Graphs
27+
this.__uniqueID = Math.floor(Math.random() * 100000);
28+
2329
// Add a css selector class
24-
this.$el.attr('id', 'boxplotContainer');
30+
this.$el.attr('id', 'boxplotContainer_' + this.__uniqueID);
2531
},
2632

2733
getInitialDataParams: function() {
@@ -105,14 +111,15 @@ function(
105111
var plotPoints = this._getBoxOutliers(this._getEscapedProperty('boxPoints', config) || "none");
106112

107113
// Cleanup previous data
108-
Plotly.purge('boxplotContainer');
114+
Plotly.purge('boxplotContainer_' + this.__uniqueID);
109115
$('#' + this.id).empty();
110116

111117
// create a trace for every group of data
112118
let dataInput = boxIds.map((v, i, a) => {
113119
return {
114120
type: 'box',
115121
y: boxValues[i],
122+
hoverinfo: 'x+y',
116123
name: boxLabels[i],
117124
boxmean: plotMean,
118125
boxpoints: plotPoints
@@ -124,29 +131,39 @@ function(
124131
var layout = {
125132
autosize: true,
126133
margin: {
127-
r: 10,
128-
t: 10,
129-
b: 40,
130-
l: 60
134+
t: 50
135+
},
136+
137+
paper_bgcolor: isDarkTheme ? "transparent" : "#fff",
138+
plot_bgcolor: isDarkTheme ? "transparent" : "#fff",
139+
font: {
140+
color: isDarkTheme ? '#DCDCDC' : '#444',
141+
},
142+
143+
legend: {
144+
bgcolor: isDarkTheme ? '#212527' : '#fff',
131145
},
132146
showlegend: dispLegend,
147+
133148
xaxis: {
134149
autorange: true,
135150
tickangle: xTickAngle,
136151
title: xAxisLabel,
152+
gridcolor: isDarkTheme ? "#A6A6A6" : "#eee"
137153
},
138154
yaxis: {
139155
zeroline: false,
140156
autorange: true,
141157
tickangle: yTickAngle,
158+
gridcolor: isDarkTheme ? "#A6A6A6" : "#eee",
142159
title: yAxisLabel
143-
},
144-
boxmode: 'group'
160+
}
145161
};
146162

147163
// Plotting the chart
148-
Plotly.plot('boxplotContainer', dataInput, layout, {
149-
displayModeBar: modeBar
164+
Plotly.plot('boxplotContainer_' + this.__uniqueID, dataInput, layout, {
165+
displayModeBar: modeBar,
166+
displaylogo: false
150167
});
151168

152169
},

‎appserver/static/visualizations/boxplot/visualization.js‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,20 @@ define(["api/SplunkVisualizationBase","api/SplunkVisualizationUtils"], function(
5959
SplunkVisualizationUtils
6060
) {
6161

62+
var isDarkTheme = SplunkVisualizationUtils.getCurrentTheme &&
63+
SplunkVisualizationUtils.getCurrentTheme() === 'dark';
64+
6265
return SplunkVisualizationBase.extend({
6366

6467
initialize: function() {
6568
// Save this.$el for convenience
6669
this.$el = $(this.el);
6770

71+
// Handle multiple Graphs
72+
this.__uniqueID = Math.floor(Math.random() * 100000);
73+
6874
// Add a css selector class
69-
this.$el.attr('id', 'boxplotContainer');
75+
this.$el.attr('id', 'boxplotContainer_' + this.__uniqueID);
7076
},
7177

7278
getInitialDataParams: function() {
@@ -150,14 +156,15 @@ define(["api/SplunkVisualizationBase","api/SplunkVisualizationUtils"], function(
150156
var plotPoints = this._getBoxOutliers(this._getEscapedProperty('boxPoints', config) || "none");
151157

152158
// Cleanup previous data
153-
Plotly.purge('boxplotContainer');
159+
Plotly.purge('boxplotContainer_' + this.__uniqueID);
154160
$('#' + this.id).empty();
155161

156162
// create a trace for every group of data
157163
let dataInput = boxIds.map((v, i, a) => {
158164
return {
159165
type: 'box',
160166
y: boxValues[i],
167+
hoverinfo: 'x+y',
161168
name: boxLabels[i],
162169
boxmean: plotMean,
163170
boxpoints: plotPoints
@@ -169,29 +176,39 @@ define(["api/SplunkVisualizationBase","api/SplunkVisualizationUtils"], function(
169176
var layout = {
170177
autosize: true,
171178
margin: {
172-
r: 10,
173-
t: 10,
174-
b: 40,
175-
l: 60
179+
t: 50
180+
},
181+
182+
paper_bgcolor: isDarkTheme ? "transparent" : "#fff",
183+
plot_bgcolor: isDarkTheme ? "transparent" : "#fff",
184+
font: {
185+
color: isDarkTheme ? '#DCDCDC' : '#444',
186+
},
187+
188+
legend: {
189+
bgcolor: isDarkTheme ? '#212527' : '#fff',
176190
},
177191
showlegend: dispLegend,
192+
178193
xaxis: {
179194
autorange: true,
180195
tickangle: xTickAngle,
181196
title: xAxisLabel,
197+
gridcolor: isDarkTheme ? "#A6A6A6" : "#eee"
182198
},
183199
yaxis: {
184200
zeroline: false,
185201
autorange: true,
186202
tickangle: yTickAngle,
203+
gridcolor: isDarkTheme ? "#A6A6A6" : "#eee",
187204
title: yAxisLabel
188-
},
189-
boxmode: 'group'
205+
}
190206
};
191207

192208
// Plotting the chart
193-
Plotly.plot('boxplotContainer', dataInput, layout, {
194-
displayModeBar: modeBar
209+
Plotly.plot('boxplotContainer_' + this.__uniqueID, dataInput, layout, {
210+
displayModeBar: modeBar,
211+
displaylogo: false
195212
});
196213

197214
},

‎appserver/static/visualizations/ohlc/src/visualization_source.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ define([
195195
paper_bgcolor: isDarkTheme ? "transparent" : "#fff",
196196
plot_bgcolor: isDarkTheme ? "transparent" : "#fff",
197197
font: {
198-
color: isDarkTheme ? '#F0F0F0' : '#000',
198+
color: isDarkTheme ? '#DCDCDC' : '#444',
199199
},
200200
showlegend: dispLegend,
201201
// https://plot.ly/javascript/reference/#layout-legend
@@ -210,10 +210,12 @@ define([
210210
rangeslider: {
211211
visible: rSlider
212212
},
213+
gridcolor: isDarkTheme ? "#A6A6A6" : "#eee",
213214
type: 'date'
214215
},
215216
yaxis: {
216217
autorange: true,
218+
gridcolor: isDarkTheme ? "#A6A6A6" : "#eee",
217219
tickangle: yTickAngle,
218220
title: yAxisLabel
219221
}
@@ -226,7 +228,7 @@ define([
226228
displayModeBar: modeBar,
227229
displaylogo: false,
228230
// https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js
229-
modeBarButtonsToRemove: ['pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'resetScale2d'],
231+
modeBarButtonsToRemove: ['select2d', 'lasso2d'],
230232
});
231233

232234
},

0 commit comments

Comments
 (0)