Skip to content

Commit 4f3492c

Browse files
dmt0dmt0
authored
Merge pull request #551 from plotly/barmode-boxmode
violin implementation boxmode, barmode, violinmode more fixes
2 parents 215e856 + 25a9bc7 commit 4f3492c

File tree

11 files changed

+259
-35
lines changed

11 files changed

+259
-35
lines changed

‎dev/mocks.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
[
22
"/mocks/aggregate.json",
33
"/percy/panelTest.json",
4+
"/percy/bar.json",
5+
"/percy/box.json",
46
"/percy/histogram.json",
57
"/percy/histogram2d.json",
8+
"/percy/violin.json",
69
"0.json",
710
"1.json",
811
"10.json",

‎dev/percy/bar.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"data": [
3+
{
4+
"type": "bar",
5+
"mode": "markers",
6+
"uid": "040729",
7+
"x": [
8+
1,
9+
2,
10+
3
11+
],
12+
"xsrc": "x1",
13+
"error_x": {
14+
"visible": true,
15+
"symmetric": true
16+
},
17+
"error_y": {
18+
"visible": true,
19+
"symmetric": false
20+
}
21+
}
22+
],
23+
"layout": {
24+
"xaxis": {
25+
"type": "linear",
26+
"range": [
27+
0,
28+
115.78947368421052
29+
],
30+
"autorange": true
31+
},
32+
"yaxis": {
33+
"range": [
34+
-0.5,
35+
5.815789473684211
36+
],
37+
"autorange": true
38+
},
39+
"autosize": true,
40+
"barmode": "group",
41+
"barnorm": "percent",
42+
"bargroupgap": 0.28
43+
},
44+
"frames": []
45+
}

‎dev/percy/box.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"data": [
3+
{
4+
"type": "box",
5+
"mode": "markers",
6+
"uid": "43d2ef",
7+
"boxpoints": "all",
8+
"x": [
9+
1,
10+
2,
11+
3
12+
],
13+
"xsrc": "x1",
14+
"boxmean": true
15+
}
16+
],
17+
"layout": {
18+
"xaxis": {
19+
"type": "linear",
20+
"range": [
21+
0.7222222222222222,
22+
6.277777777777778
23+
],
24+
"autorange": true
25+
},
26+
"yaxis": {
27+
"type": "category",
28+
"range": [
29+
-0.696,
30+
0.5
31+
],
32+
"autorange": true
33+
},
34+
"autosize": true,
35+
"boxmode": "overlay"
36+
},
37+
"frames": []
38+
}

‎dev/percy/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import panelTest from './panelTest.json';
22
import histogram from './histogram.json';
33
import histogram2d from './histogram2d.json';
4+
import violin from './violin.json';
5+
import bar from './bar.json';
6+
import box from './box.json';
47

5-
export {panelTest, histogram, histogram2d};
8+
export {panelTest, histogram, histogram2d, violin, bar, box};

‎dev/percy/violin.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"data": [
3+
{
4+
"type": "violin",
5+
"mode": "markers",
6+
"uid": "91db56",
7+
"box": {
8+
"visible": true
9+
},
10+
"meanline": {
11+
"visible": true
12+
},
13+
"bandwidth": 0,
14+
"x": [
15+
1,
16+
2,
17+
3
18+
],
19+
"xsrc": "x1"
20+
}
21+
],
22+
"layout": {
23+
"xaxis": {},
24+
"yaxis": {},
25+
"autosize": true
26+
},
27+
"frames": []
28+
}

‎src/__percy__/panels.percy.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ import './percy.css';
1414
* To specify which panels to test with the mock, add entry to panelsToTest, else all panels will be tested
1515
*/
1616
const panelsToTest = {
17-
histogram: ['GraphCreatePanel'],
17+
bar: ['GraphCreatePanel', 'StyleTracesPanel'],
18+
box: ['GraphCreatePanel', 'StyleTracesPanel'],
19+
histogram: ['GraphCreatePanel', 'StyleTracesPanel'],
1820
histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
21+
violin: ['GraphCreatePanel', 'StyleTracesPanel'],
1922
};
2023

2124
window.URL.createObjectURL = function() {

‎src/components/fields/FilterOperation.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ class UnconnectedFilterValue extends Component {
168168
const {fullValue, attr, defaultValue} = this.props;
169169
const op = findOperation(operation);
170170

171-
let label1 = _('Target');
171+
let label1 = _('Reference');
172172
if (op === 'inrange' || op === 'exrange') {
173173
label1 = _('Lower Bound');
174174
} else if (op === 'inset' || op === 'exset') {

‎src/default_panels/StyleTracesPanel.js

Lines changed: 108 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -189,12 +189,25 @@ const StyleTracesPanel = (props, {localize: _}) => (
189189
{label: _('Unsorted'), value: false},
190190
]}
191191
/>
192-
<Radio
192+
<Dropdown
193+
options={[
194+
{label: _('Show All'), value: 'all'},
195+
{label: _('Outliers'), value: 'outliers'},
196+
{label: _('Suspected Outliers'), value: 'suspectedoutliers'},
197+
{label: _('Hide'), value: false},
198+
]}
193199
attr="boxpoints"
200+
clearable={false}
201+
/>
202+
<Dropdown
194203
options={[
195-
{label: _('Show'), value: 'all'},
204+
{label: _('Show All'), value: 'all'},
205+
{label: _('Outliers'), value: 'outliers'},
206+
{label: _('Suspected Outliers'), value: 'suspectedoutliers'},
196207
{label: _('Hide'), value: false},
197208
]}
209+
attr="points"
210+
clearable={false}
198211
/>
199212
<NumericFraction label={_('Jitter')} attr="jitter" />
200213
<Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
@@ -207,17 +220,54 @@ const StyleTracesPanel = (props, {localize: _}) => (
207220
<ColorPicker label={_('Border Color')} attr="marker.line.color" />
208221
</TraceMarkerSection>
209222
<LayoutSection name={_('Size and Spacing')}>
210-
<NumericFractionInverse label={_('Bar Width')} attr="bargap" />
223+
<Radio
224+
label={_('Box Mode')}
225+
attr="boxmode"
226+
options={[
227+
{label: _('Overlay'), value: 'overlay'},
228+
{label: _('Group'), value: 'group'},
229+
]}
230+
/>
211231
<NumericFractionInverse label={_('Box Width')} attr="boxgap" />
212-
<NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
213232
<NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
233+
<Dropdown
234+
label={_('Bar Mode')}
235+
attr="barmode"
236+
options={[
237+
{label: _('Overlay'), value: 'overlay'},
238+
{label: _('Group'), value: 'group'},
239+
{label: _('Stack'), value: 'stack'},
240+
{label: _('Relative'), value: 'relative'},
241+
]}
242+
clearable={false}
243+
/>
244+
<Dropdown
245+
label={_('Normalization')}
246+
attr="barnorm"
247+
options={[
248+
{label: _('None'), value: ''},
249+
{label: _('Fraction'), value: 'fraction'},
250+
{label: _('Percent'), value: 'percent'},
251+
]}
252+
clearable={false}
253+
/>
254+
<NumericFractionInverse label={_('Bar Width')} attr="bargap" />
255+
<NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
256+
<Radio
257+
label={_('Violin Mode')}
258+
attr="violinmode"
259+
options={[
260+
{label: _('Overlay'), value: 'overlay'},
261+
{label: _('Group'), value: 'group'},
262+
]}
263+
/>
264+
<NumericFractionInverse label={_('Violin Width')} attr="violingap" />
265+
<NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
214266
</LayoutSection>
267+
<NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
215268
<PlotlySection name={_('Ticks')}>
216269
<Numeric label={_('Width')} attr="tickwidth" />
217270
</PlotlySection>
218-
<PlotlySection name={_('Whiskers')}>
219-
<Numeric label={_('Width')} attr="whiskerwidth" />
220-
</PlotlySection>
221271
<TraceTypeSection
222272
name={_('Lines')}
223273
traceTypes={[
@@ -395,23 +445,69 @@ const StyleTracesPanel = (props, {localize: _}) => (
395445
]}
396446
/>
397447
</PlotlySection>
398-
<PlotlySection name={_('Highlight')}>
448+
<PlotlySection name={_('Scaling')}>
449+
<Numeric label={_('Bandwidth')} attr="bandwidth" />
450+
<Radio
451+
label="Scale Mode"
452+
attr="scalemode"
453+
options={[
454+
{label: _('Width'), value: 'width'},
455+
{label: _('Count'), value: 'count'},
456+
]}
457+
/>
458+
<Radio
459+
label="Span Mode"
460+
attr="spanmode"
461+
options={[
462+
{label: _('Soft'), value: 'soft'},
463+
{label: _('Hard'), value: 'hard'},
464+
{label: _('Manual'), value: 'manual'},
465+
]}
466+
/>
467+
<Numeric label={_('Span')} attr="span" />
468+
<Radio
469+
attr="side"
470+
label={_('Visible Sides')}
471+
options={[
472+
{label: _('Both'), value: 'both'},
473+
{label: _('Positive'), value: 'positive'},
474+
{label: _('Negative'), value: 'negative'},
475+
]}
476+
/>
477+
</PlotlySection>
478+
<PlotlySection name={_('Box Mean')}>
399479
<Radio
400480
attr="boxmean"
401-
label={_('Mean')}
481+
options={[
482+
{label: _('Mean'), value: true},
483+
{label: _('Mean & SD'), value: 'sd'},
484+
{label: _('None'), value: false},
485+
]}
486+
/>
487+
</PlotlySection>
488+
<PlotlySection name={_('Box')}>
489+
<Radio
490+
attr="box.visible"
402491
options={[
403492
{label: _('Show'), value: true},
404493
{label: _('Hide'), value: false},
405494
]}
406495
/>
496+
<NumericFraction label={_('Box Width')} attr="box.width" />
497+
<ColorPicker label={_('Box Fill Color')} attr="box.color" />
498+
<NumericFraction label={_('Box Line Width')} attr="box.line.width" />
499+
<ColorPicker label={_('Box Line Color')} attr="box.line.color" />
500+
</PlotlySection>
501+
<PlotlySection name={_('Meanline')}>
407502
<Radio
408-
attr="boxmean"
409-
label={_('Standard Deviation')}
503+
attr="meanline.visible"
410504
options={[
411-
{label: _('Show'), value: 'sd'},
505+
{label: _('Show'), value: true},
412506
{label: _('Hide'), value: false},
413507
]}
414508
/>
509+
<NumericFraction label={_('Meanline Width')} attr="meanline.width" />
510+
<ColorPicker label={_('Meanline Color')} attr="meanline.color" />
415511
</PlotlySection>
416512
<PlotlySection name={_('On Hover')}>
417513
<HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />

‎src/lib/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const TRACE_TO_AXIS = {
5858
'scatter',
5959
'scattergl',
6060
'box',
61+
'violin',
6162
'bar',
6263
'heatmap',
6364
'heatmapgl',

‎src/lib/customTraceType.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@ export function traceTypeToPlotlyInitFigure(traceType) {
4949
type: 'box',
5050
boxpoints: false,
5151
};
52+
case 'violin':
53+
return {
54+
type: 'violin',
55+
box: {visible: false},
56+
meanline: {visible: false},
57+
bandwidth: 0,
58+
};
5259
case 'line3d':
5360
return {
5461
type: 'scatter3d',

0 commit comments

Comments
 (0)