Skip to content

Commit da1c5be

Browse files
edro15edro15
authored
Added new viz (#5)
* Added multiple-axes viz first draft * Updated README * Updated search_fragment to match README * Changed app version to 2.2
1 parent c90b685 commit da1c5be

File tree

17 files changed

+208411
-4
lines changed

17 files changed

+208411
-4
lines changed

‎MultipleAxes_plot.png‎

475 KB
Loading

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ A collection of Splunk modular visualizations based on [plotly.js](https://githu
44
Visualizations included into this collection:
55
* OHLC Chart - for Stocks and Financial Data ([source code](appserver/static/visualizations/ohlc/src/visualization_source.js))
66
* Box Plot Chart - for Statistical Data ([source code](appserver/static/visualizations/boxplot/src/visualization_source.js))
7+
* Multiple Axes Chart - for Advanced Statistical Data Visualizations ([source code](appserver/static/visualizations/multiple-axes/src/visualization_source.js))
78

89
## Installation
910
- [Download Splunk for your platform](http://www.splunk.com/download?r=productOverview).
@@ -17,7 +18,7 @@ Visualizations included into this collection:
1718

1819
## Usage
1920
* Type your search
20-
* Click on tab `Visualization` and then select either `OHLC Chart` or `Box Plot` among available visualizations
21+
* Click on tab `Visualization` and then select either `OHLC Chart`, `Box Plot` or `Multiple Axes` among available visualizations
2122
* Format the visualization as needed
2223

2324
### OHLC Chart
@@ -37,6 +38,19 @@ Replace `box_name` and `value` with your fields to start.
3738
| `box_name` | string | Label of the box | `A` |
3839
| `value` | numeric | Data forming box dataset | `20` |
3940

41+
### Multiple Axes Plot
42+
`<basesearch> | table _time y2-dataset y-dataset1 y-dataset2 y-datasetN`
43+
44+
Replace `_time`, `y2-dataset` and `y-datasetX` with your fields to start.
45+
46+
| FieldName | Format | Description | Example |
47+
|--------------|---------|----------------------------------------------|-----------------------|
48+
| `_time` | date | Event time reference | `2019-05-17 07:30:02` |
49+
| `y2-dataset` | numeric | Dataset for scatter plot on secondary Y-Axis | `-1.6` |
50+
| `y-dataset1` | numeric | Dataset for 1st line plot on regular Y-Axis | `10` |
51+
| `y-dataset2` | numeric | Dataset for 2nd line plot on regular Y-Axis | `3` |
52+
| `y-datasetN` | numeric | Dataset for Nth line plot on regular Y-Axis | `32` |
53+
4054
## Examples
4155
Sample SPL Search for OHLC:
4256

@@ -78,3 +92,4 @@ Sample SPL Search for BoxPlot:
7892
7993
![alt text](boxplot_chart.png "Boxplot Chart")
8094
95+

‎README/savedsearches.conf.spec‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,15 @@ display.visualizations.custom.boxplot.line_chart.xAxisName = <string>;
2727
display.visualizations.custom.boxplot.line_chart.yAxisName = <string>;
2828

2929
display.visualizations.custom.boxplot.line_chart.showLegend = <number>;
30+
31+
display.visualizations.custom.multiple-axes.line_chart.mbDisplay = <number>;
32+
33+
display.visualizations.custom.multiple-axes.line_chart.xAngle = <float>;
34+
display.visualizations.custom.multiple-axes.line_chart.yAngle = <float>;
35+
display.visualizations.custom.multiple-axes.line_chart.y2Angle = <float>;
36+
37+
display.visualizations.custom.multiple-axes.line_chart.xAxisName = <string>;
38+
display.visualizations.custom.multiple-axes.line_chart.yAxisName = <string>;
39+
display.visualizations.custom.multiple-axes.line_chart.y2AxisName = <string>;
40+
41+
display.visualizations.custom.multiple-axes.line_chart.showLegend = <number>;

‎appserver/static/visualizations/multiple-axes/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Splunk Visualization App Template
2+
3+
This is the basic template for a splunk visualization app. This teamplate is meant to be edited to build custom visualizations. It contains:
4+
5+
- The relevant directory structure for a visuzliation app
6+
- A standin visualization package directory with a standin visualiztion and a basic webpack configuration
7+
- Relevant .conf files for the visualization
8+
9+
## Building the visualization
10+
11+
NOTE: You must have npm installed in oder to build. If you do not have npm installed, install it and come back.
12+
13+
The visualization contained in this app must be built using web pack in order to run it on Splunk. There is a basic webpack configuration built in to the app. To build from the command line, first, cd to the *visualization/standin* directory. On the first run you will have to install the dependeincies with npm:
14+
15+
```
16+
$ npm install
17+
```
18+
Once you done that, you can build the viz with the provided build task:
19+
20+
```
21+
$ npm run build
22+
```
23+
24+
This will create a *visualization.js* file in the visualization directory.
25+
26+
## Adding Your Own Code
27+
28+
The standin viz isn't very interesting, so you will want to add your own code. You should rename the *visualization/src/standin.js* file to something appropriate, then you can edit it as you see fit. To build, you will have to change the `entry` variable in *visualization/webpack.config* to corespond to your new file name. Then you can run the build task again.
29+
30+
## More Information
31+
For more information on building custom visualizations including a tutorial, API overview, and more see:
32+
33+
http://docs.splunk.com/Documentation/Splunk/6.5.0/AdvancedDev/CustomVizDevOverview

‎appserver/static/visualizations/multiple-axes/contrib/css/c3.css‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/*-- Chart --*/
2+
.c3 svg {
3+
font: 10px sans-serif;
4+
-webkit-tap-highlight-color: transparent; }
5+
6+
.c3 path, .c3 line {
7+
fill: none;
8+
stroke: #000; }
9+
10+
.c3 text {
11+
-webkit-user-select: none;
12+
-moz-user-select: none;
13+
user-select: none; }
14+
15+
.c3-legend-item-tile,
16+
.c3-xgrid-focus,
17+
.c3-ygrid,
18+
.c3-event-rect,
19+
.c3-bars path {
20+
shape-rendering: crispEdges; }
21+
22+
.c3-chart-arc path {
23+
stroke: #fff; }
24+
25+
.c3-chart-arc rect {
26+
stroke: white;
27+
stroke-width: 1; }
28+
29+
.c3-chart-arc text {
30+
fill: #fff;
31+
font-size: 13px; }
32+
33+
/*-- Axis --*/
34+
/*-- Grid --*/
35+
.c3-grid line {
36+
stroke: #aaa; }
37+
38+
.c3-grid text {
39+
fill: #aaa; }
40+
41+
.c3-xgrid, .c3-ygrid {
42+
stroke-dasharray: 3 3; }
43+
44+
/*-- Text on Chart --*/
45+
.c3-text.c3-empty {
46+
fill: #808080;
47+
font-size: 2em; }
48+
49+
/*-- Line --*/
50+
.c3-line {
51+
stroke-width: 1px; }
52+
53+
/*-- Point --*/
54+
.c3-circle._expanded_ {
55+
stroke-width: 1px;
56+
stroke: white; }
57+
58+
.c3-selected-circle {
59+
fill: white;
60+
stroke-width: 2px; }
61+
62+
/*-- Bar --*/
63+
.c3-bar {
64+
stroke-width: 0; }
65+
66+
.c3-bar._expanded_ {
67+
fill-opacity: 1;
68+
fill-opacity: 0.75; }
69+
70+
/*-- Focus --*/
71+
.c3-target.c3-focused {
72+
opacity: 1; }
73+
74+
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
75+
stroke-width: 2px; }
76+
77+
.c3-target.c3-defocused {
78+
opacity: 0.3 !important; }
79+
80+
/*-- Region --*/
81+
.c3-region {
82+
fill: steelblue;
83+
fill-opacity: .1; }
84+
85+
/*-- Brush --*/
86+
.c3-brush .extent {
87+
fill-opacity: .1; }
88+
89+
/*-- Select - Drag --*/
90+
/*-- Legend --*/
91+
.c3-legend-item {
92+
font-size: 12px; }
93+
94+
.c3-legend-item-hidden {
95+
opacity: 0.15; }
96+
97+
.c3-legend-background {
98+
opacity: 0.75;
99+
fill: white;
100+
stroke: lightgray;
101+
stroke-width: 1; }
102+
103+
/*-- Title --*/
104+
.c3-title {
105+
font: 14px sans-serif; }
106+
107+
/*-- Tooltip --*/
108+
.c3-tooltip-container {
109+
z-index: 10; }
110+
111+
.c3-tooltip {
112+
border-collapse: collapse;
113+
border-spacing: 0;
114+
background-color: #fff;
115+
empty-cells: show;
116+
-webkit-box-shadow: 7px 7px 12px -9px #777777;
117+
-moz-box-shadow: 7px 7px 12px -9px #777777;
118+
box-shadow: 7px 7px 12px -9px #777777;
119+
opacity: 0.9; }
120+
121+
.c3-tooltip tr {
122+
border: 1px solid #CCC; }
123+
124+
.c3-tooltip th {
125+
background-color: #aaa;
126+
font-size: 14px;
127+
padding: 2px 5px;
128+
text-align: left;
129+
color: #FFF; }
130+
131+
.c3-tooltip td {
132+
font-size: 13px;
133+
padding: 3px 6px;
134+
background-color: #fff;
135+
border-left: 1px dotted #999; }
136+
137+
.c3-tooltip td > span {
138+
display: inline-block;
139+
width: 10px;
140+
height: 10px;
141+
margin-right: 6px; }
142+
143+
.c3-tooltip td.value {
144+
text-align: right; }
145+
146+
/*-- Area --*/
147+
.c3-area {
148+
stroke-width: 0;
149+
opacity: 0.2; }
150+
151+
/*-- Arc --*/
152+
.c3-chart-arcs-title {
153+
dominant-baseline: middle;
154+
font-size: 1.3em; }
155+
156+
.c3-chart-arcs .c3-chart-arcs-background {
157+
fill: #e0e0e0;
158+
stroke: #FFF; }
159+
160+
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
161+
fill: #000;
162+
font-size: 16px; }
163+
164+
.c3-chart-arcs .c3-chart-arcs-gauge-max {
165+
fill: #777; }
166+
167+
.c3-chart-arcs .c3-chart-arcs-gauge-min {
168+
fill: #777; }
169+
170+
.c3-chart-arc .c3-gauge-value {
171+
fill: #000;
172+
/* font-size: 28px !important;*/ }
173+
174+
.c3-chart-arc.c3-target g path {
175+
opacity: 1; }
176+
177+
.c3-chart-arc.c3-target.c3-focused g path {
178+
opacity: 1; }

‎appserver/static/visualizations/multiple-axes/formatter.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<form class="splunk-formatter-section" section-label="General">
2+
3+
<splunk-control-group label="Display Plotly Mode Bar">
4+
<splunk-radio-input name="{{VIZ_NAMESPACE}}.mbDisplay" value='0'>
5+
<option value='1'>Show</option>
6+
<option value='0'>Hide</option>
7+
</splunk-radio-input>
8+
</splunk-control-group>
9+
10+
<splunk-control-group label="Display Legend">
11+
<splunk-radio-input name="{{VIZ_NAMESPACE}}.showLegend" value='1'>
12+
<option value='1'>Show</option>
13+
<option value='0'>Hide</option>
14+
</splunk-radio-input>
15+
</splunk-control-group>
16+
</form>
17+
18+
<form class="splunk-formatter-section" section-label="X Axis">
19+
<splunk-control-group label="X-Axis Label Name">
20+
<splunk-text-input name="{{VIZ_NAMESPACE}}.xAxisName">
21+
</splunk-text-input>
22+
</splunk-control-group>
23+
24+
<splunk-control-group label="X-Axis Label Rotation">
25+
<splunk-radio-input name="{{VIZ_NAMESPACE}}.xAngle" value=0>
26+
<option value=0>Default</option>
27+
<option value=45>45°</option>
28+
<option value=90>90°</option>
29+
</splunk-radio-input>
30+
</splunk-control-group>
31+
</form>
32+
33+
<form class="splunk-formatter-section" section-label="Y Axes">
34+
<splunk-control-group label="Y-Axis Label Name">
35+
<splunk-text-input name="{{VIZ_NAMESPACE}}.yAxisName">
36+
</splunk-text-input>
37+
</splunk-control-group>
38+
39+
<splunk-control-group label="Y-Axis Label Rotation">
40+
<splunk-radio-input name="{{VIZ_NAMESPACE}}.yAngle" value=0>
41+
<option value=0>Default</option>
42+
<option value=45>45°</option>
43+
<option value=90>90°</option>
44+
</splunk-radio-input>
45+
</splunk-control-group>
46+
47+
<splunk-control-group label="Y2-Axis Label Name">
48+
<splunk-text-input name="{{VIZ_NAMESPACE}}.y2AxisName">
49+
</splunk-text-input>
50+
</splunk-control-group>
51+
52+
<splunk-control-group label="Y2-Axis Label Rotation">
53+
<splunk-radio-input name="{{VIZ_NAMESPACE}}.y2Angle" value=0>
54+
<option value=0>Default</option>
55+
<option value=45>45°</option>
56+
<option value=90>90°</option>
57+
</splunk-radio-input>
58+
</splunk-control-group>
59+
</form>

0 commit comments

Comments
 (0)