Skip to content

Commit 6af5b97

Browse files
nicolaskruchtennicolaskruchten
committed
wip
1 parent 54ed82e commit 6af5b97

File tree

6 files changed

+144
-120
lines changed

6 files changed

+144
-120
lines changed

‎src/EditorControls.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
shamefullyAdjustSplitStyleTargetContainers,
1212
shamefullyDeleteRelatedAnalysisTransforms,
1313
shamefullyAdjustSizeref,
14+
shamefullyAdjustAxisDirection,
1415
} from './shame';
1516
import {EDITOR_ACTIONS} from './lib/constants';
1617
import isNumeric from 'fast-isnumeric';
@@ -71,7 +72,7 @@ class EditorControls extends Component {
7172
}
7273

7374
shamefullyAdjustSizeref(graphDiv, payload);
74-
75+
shamefullyAdjustAxisDirection(graphDiv, payload);
7576
shamefullyClearAxisTypes(graphDiv, payload);
7677
shamefullyAdjustAxisRef(graphDiv, payload);
7778
shamefullyAddTableColumns(graphDiv, payload);

‎src/components/containers/TraceMarkerSection.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ class TraceMarkerSection extends Component {
1515
setLocals(context) {
1616
const _ = this.context.localize;
1717
const traceType = context.fullContainer.type;
18-
if (['bar', 'histogram'].includes(traceType)) {
18+
if (['bar', 'histogram', 'funnel', 'waterfall'].includes(traceType)) {
1919
this.name = _('Bars');
20-
} else if (traceType === 'funnelarea') {
21-
this.name = _('Funnel Segments');
22-
} else if (traceType === 'pie') {
23-
this.name = _('Pie Segments');
24-
} else if (traceType === 'sunburst') {
25-
this.name = _('Sunburst Segments');
20+
} else if (['funnelarea', 'pie', 'sunburst'].includes(traceType)) {
21+
this.name = _('Segments');
2622
} else {
2723
this.name = _('Points');
2824
}

‎src/components/fields/derived.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,12 +500,23 @@ function computeAxesRefOptions(axes, propsAttr) {
500500
export const TextInfo = connectToContainer(UnconnectedFlaglist, {
501501
modifyPlotProps: (props, context, plotProps) => {
502502
const {localize: _, container} = context;
503-
const options = [
503+
504+
let options = [
504505
{label: _('Label'), value: 'label'},
505506
{label: _('Value'), value: 'value'},
506507
{label: _('%'), value: 'percent'},
507508
];
508509

510+
if (container.type === 'funnel') {
511+
options = [
512+
{label: _('Label'), value: 'label'},
513+
{label: _('Value'), value: 'value'},
514+
{label: _('% initial'), value: 'percent initial'},
515+
{label: _('% previous'), value: 'percent previous'},
516+
{label: _('% total'), value: 'percent total'},
517+
];
518+
}
519+
509520
if (container.text) {
510521
options.push({label: _('Text'), value: 'text'});
511522
}

‎src/default_panels/StyleTracesPanel.js

Lines changed: 120 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -91,39 +91,24 @@ const StyleTracesPanel = (props, {localize: _}) => (
9191
<Numeric label={_('Max Tube segments')} attr="maxdisplayed" />
9292
</PlotlySection>
9393
<MultiColorPicker label={_('Color')} attr="color" />
94-
<TraceTypeSection name={_('Waterfall')} traceTypes={['waterfall']} mode="trace">
95-
<LayoutSection attr="name">
96-
<Radio
97-
label={_('Mode')}
98-
attr="waterfallmode"
99-
options={[{label: _('Group'), value: 'group'}, {label: _('Overlay'), value: 'overlay'}]}
100-
/>
101-
<NumericFraction label={_('Gap')} attr="waterfallgap" />
102-
<NumericFraction label={_('Group gap')} attr="waterfallgroupgap" />
103-
</LayoutSection>
104-
</TraceTypeSection>
105-
<TraceTypeSection name={_('Pie Colors')} traceTypes={['pie']} mode="trace">
94+
<TraceTypeSection
95+
name={_('Segment Colors')}
96+
traceTypes={['pie', 'sunburst', 'funnelarea']}
97+
mode="trace"
98+
>
10699
<LayoutSection attr="name">
107100
<ColorwayPicker label={_('Colors')} attr="piecolorway" />
108101
<Radio
109102
label={_('Extended Colors')}
110103
attr="extendpiecolors"
111104
options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
112105
/>
113-
</LayoutSection>
114-
</TraceTypeSection>
115-
<TraceTypeSection name={_('Sunburst Colors')} traceTypes={['sunburst']} mode="trace">
116-
<LayoutSection attr="name">
117106
<ColorwayPicker label={_('Colors')} attr="sunburstcolorway" />
118107
<Radio
119108
label={_('Extended Colors')}
120109
attr="extendsunburstcolors"
121110
options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
122111
/>
123-
</LayoutSection>
124-
</TraceTypeSection>
125-
<TraceTypeSection name={_('Funnel Area Colors')} traceTypes={['funnelarea']} mode="trace">
126-
<LayoutSection attr="name">
127112
<ColorwayPicker label={_('Colors')} attr="funnelareacolorway" />
128113
<Radio
129114
label={_('Extended Colors')}
@@ -252,7 +237,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
252237
</PlotlySection>
253238
<TraceTypeSection
254239
name={_('Bar Grouping, Sizing and Spacing')}
255-
traceTypes={['bar', 'histogram']}
240+
traceTypes={['bar', 'histogram', 'funnel', 'waterfall']}
256241
mode="trace"
257242
>
258243
<LayoutSection attr="name">
@@ -279,6 +264,32 @@ const StyleTracesPanel = (props, {localize: _}) => (
279264
/>
280265
<NumericFractionInverse label={_('Bar Width')} attr="bargap" />
281266
<NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
267+
268+
<Dropdown
269+
label={_('Bar Mode')}
270+
attr="funnelmode"
271+
options={[
272+
{label: _('Grouped'), value: 'group'},
273+
{label: _('Stacked'), value: 'stack'},
274+
{label: _('Overlaid'), value: 'overlay'},
275+
]}
276+
clearable={false}
277+
/>
278+
<NumericFractionInverse label={_('Bar Width')} attr="funnelgap" />
279+
<NumericFraction label={_('Bar Padding')} attr="funnelgroupgap" />
280+
281+
<Dropdown
282+
label={_('Bar Mode')}
283+
attr="waterfallmode"
284+
options={[
285+
{label: _('Grouped'), value: 'group'},
286+
{label: _('Stacked'), value: 'stack'},
287+
{label: _('Overlaid'), value: 'overlay'},
288+
]}
289+
clearable={false}
290+
/>
291+
<NumericFractionInverse label={_('Bar Width')} attr="waterfallgap" />
292+
<NumericFraction label={_('Bar Padding')} attr="waterfallgroupgap" />
282293
</LayoutSection>
283294
</TraceTypeSection>
284295
<PlotlySection name={_('Binning')}>
@@ -384,6 +395,60 @@ const StyleTracesPanel = (props, {localize: _}) => (
384395
<MultiColorPicker label={_('Border Color')} attr="marker.line.color" />
385396
<Numeric label={_('Max Number of Points')} attr="marker.maxdisplayed" />
386397
</TraceMarkerSection>
398+
<PlotlySection name={_('Connector Styles')}>
399+
<Radio
400+
attr="connector.visible"
401+
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
402+
/>
403+
<MultiColorPicker label={_('Fill Color')} attr="connector.fillcolor" />
404+
<Numeric label={_('Line Width')} attr="connector.line.width" />
405+
<MultiColorPicker label={_('Line Color')} attr="connector.line.color" />
406+
<LineDashSelector label={_('Line Type')} attr="connector.line.dash" />
407+
<Dropdown
408+
label={_('Line Shape')}
409+
options={[
410+
{label: _('Spanning'), value: 'spanning'},
411+
{label: _('Between'), value: 'between'},
412+
]}
413+
attr="connector.mode"
414+
clearable={false}
415+
/>
416+
</PlotlySection>
417+
<PlotlySection name={_('Increasing Marker Styles')}>
418+
<TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
419+
<Numeric label={_('Width')} attr="increasing.line.width" />
420+
<MultiColorPicker label={_('Line Color')} attr="increasing.line.color" />
421+
<MultiColorPicker label={_('Marker Color')} attr="increasing.marker.color" />
422+
<MultiColorPicker label={_('Line Color')} attr="increasing.marker.line.color" />
423+
<Numeric label={_('Line Width')} attr="increasing.marker.line.width" />
424+
<MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
425+
<LineDashSelector label={_('Type')} attr="increasing.line.dash" />
426+
<Radio
427+
label={_('Show in Legend')}
428+
attr="increasing.showlegend"
429+
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
430+
/>
431+
</PlotlySection>
432+
<PlotlySection name={_('Decreasing Marker Styles')}>
433+
<TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
434+
<Numeric label={_('Width')} attr="decreasing.line.width" />
435+
<MultiColorPicker label={_('Line Color')} attr="decreasing.line.color" />
436+
<MultiColorPicker label={_('Marker Color')} attr="decreasing.marker.color" />
437+
<MultiColorPicker label={_('Line Color')} attr="decreasing.marker.line.color" />
438+
<Numeric label={_('Line Width')} attr="decreasing.marker.line.width" />
439+
<MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
440+
<LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
441+
<Radio
442+
label={_('Show in Legend')}
443+
attr="decreasing.showlegend"
444+
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
445+
/>
446+
</PlotlySection>
447+
<PlotlySection name={_('Total Marker Styles')}>
448+
<MultiColorPicker label={_('Marker Color')} attr="totals.marker.color" />
449+
<MultiColorPicker label={_('Line Color')} attr="totals.marker.line.color" />
450+
<Numeric label={_('Line Width')} attr="totals.marker.line.width" />
451+
</PlotlySection>
387452
<PlotlySection name={_('Ticks')}>
388453
<Numeric label={_('Width')} attr="tickwidth" />
389454
</PlotlySection>
@@ -547,6 +612,40 @@ const StyleTracesPanel = (props, {localize: _}) => (
547612
options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
548613
/>
549614
</TraceTypeSection>
615+
<PlotlySection name={_('Hover/Tooltip')}>
616+
<HoveronDropdown attr="hoveron" label={_('Hover on')} />
617+
<HoverTemplateSwitch attr="hovertemplate" label={_('Mode')} />
618+
<HoverInfo attr="hoverinfo" label={_('Show')} />
619+
<HoverTemplateText attr="hovertemplate" label={_('Template')} />
620+
<Radio
621+
label={_('Split labels')}
622+
attr="hoverlabel.split"
623+
options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
624+
/>
625+
<HoverLabelNameLength label={_('Trace Name')} attr="hoverlabel.namelength" />
626+
<VisibilitySelect
627+
attr="contour.show"
628+
label={_('Show Contour')}
629+
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
630+
showOn={true}
631+
defaultOpt={false}
632+
>
633+
<MultiColorPicker label={_('Contour Color')} attr="contour.color" />
634+
<Numeric label={_('Contour Width')} attr="contour.width" />
635+
</VisibilitySelect>
636+
<Dropdown
637+
label={_('Text Alignment')}
638+
attr="hoverlabel.align"
639+
options={[
640+
{label: _('Auto'), value: 'auto'},
641+
{label: _('Left'), value: 'left'},
642+
{label: _('Right'), value: 'right'},
643+
]}
644+
clearable={false}
645+
/>
646+
<Text label={_('Value Format')} attr="valueformat" />
647+
<Text label={_('Value Suffix')} attr="valuesuffix" />
648+
</PlotlySection>
550649
<PlotlySection name={_('Colorscale')}>
551650
<ColorscalePicker label={_('Colorscale')} attr="colorscale" />
552651
<Radio
@@ -618,60 +717,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
618717
<NumericFraction label={_('Y')} attr="lightposition.y" />
619718
<NumericFraction label={_('Z')} attr="lightposition.z" />
620719
</PlotlySection>
621-
<PlotlySection name={_('Increasing Marker Styles')}>
622-
<TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
623-
<Numeric label={_('Width')} attr="increasing.line.width" />
624-
<MultiColorPicker label={_('Line Color')} attr="increasing.line.color" />
625-
<MultiColorPicker label={_('Marker Color')} attr="increasing.marker.color" />
626-
<MultiColorPicker label={_('Line Color')} attr="increasing.marker.line.color" />
627-
<Numeric label={_('Line Width')} attr="increasing.marker.line.width" />
628-
<MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
629-
<LineDashSelector label={_('Type')} attr="increasing.line.dash" />
630-
<Radio
631-
label={_('Show in Legend')}
632-
attr="increasing.showlegend"
633-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
634-
/>
635-
</PlotlySection>
636-
<PlotlySection name={_('Decreasing Marker Styles')}>
637-
<TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
638-
<Numeric label={_('Width')} attr="decreasing.line.width" />
639-
<MultiColorPicker label={_('Line Color')} attr="decreasing.line.color" />
640-
<MultiColorPicker label={_('Marker Color')} attr="decreasing.marker.color" />
641-
<MultiColorPicker label={_('Line Color')} attr="decreasing.marker.line.color" />
642-
<Numeric label={_('Line Width')} attr="decreasing.marker.line.width" />
643-
<MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
644-
<LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
645-
<Radio
646-
label={_('Show in Legend')}
647-
attr="decreasing.showlegend"
648-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
649-
/>
650-
</PlotlySection>
651-
<PlotlySection name={_('Total Marker Styles')}>
652-
<MultiColorPicker label={_('Marker Color')} attr="totals.marker.color" />
653-
<MultiColorPicker label={_('Line Color')} attr="totals.marker.line.color" />
654-
<Numeric label={_('Line Width')} attr="totals.marker.line.width" />
655-
</PlotlySection>
656-
<PlotlySection name={_('Connector Styles')}>
657-
<Radio
658-
attr="connector.visible"
659-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
660-
/>
661-
<MultiColorPicker label={_('Fill Color')} attr="connector.fillcolor" />
662-
<Numeric label={_('Line Width')} attr="connector.line.width" />
663-
<MultiColorPicker label={_('Line Color')} attr="connector.line.color" />
664-
<LineDashSelector label={_('Line Type')} attr="connector.line.dash" />
665-
<Dropdown
666-
label={_('Line Shape')}
667-
options={[
668-
{label: _('Spanning'), value: 'spanning'},
669-
{label: _('Between'), value: 'between'},
670-
]}
671-
attr="connector.mode"
672-
clearable={false}
673-
/>
674-
</PlotlySection>
675720
<PlotlySection name={_('Scaling')}>
676721
<GroupCreator label={_('Scale Group')} prefix={_('Group')} attr="scalegroup" />
677722
<Radio
@@ -751,42 +796,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
751796
<MultiColorPicker label={_('Line Color')} attr="link.line.color" />
752797
<Numeric label={_('Line Width')} attr="link.line.width" min={0} />
753798
</PlotlySection>
754-
<PlotlySection name={_('Hover/Tooltip Text')}>
755-
<HoverTemplateSwitch attr="hovertemplate" label={_('Mode')} />
756-
<HoverInfo attr="hoverinfo" label={_('Show')} />
757-
<HoverTemplateText attr="hovertemplate" label={_('Template')} />
758-
<Radio
759-
label={_('Split labels')}
760-
attr="hoverlabel.split"
761-
options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
762-
/>
763-
<HoverLabelNameLength label={_('Trace Name')} attr="hoverlabel.namelength" />
764-
<VisibilitySelect
765-
attr="contour.show"
766-
label={_('Show Contour')}
767-
options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
768-
showOn={true}
769-
defaultOpt={false}
770-
>
771-
<MultiColorPicker label={_('Contour Color')} attr="contour.color" />
772-
<Numeric label={_('Contour Width')} attr="contour.width" />
773-
</VisibilitySelect>
774-
<Dropdown
775-
label={_('Text Alignment')}
776-
attr="hoverlabel.align"
777-
options={[
778-
{label: _('Auto'), value: 'auto'},
779-
{label: _('Left'), value: 'left'},
780-
{label: _('Right'), value: 'right'},
781-
]}
782-
clearable={false}
783-
/>
784-
<Text label={_('Value Format')} attr="valueformat" />
785-
<Text label={_('Value Suffix')} attr="valuesuffix" />
786-
</PlotlySection>
787-
<PlotlySection name={_('Hover Action')}>
788-
<HoveronDropdown attr="hoveron" label={_('Hover on')} />
789-
</PlotlySection>
790799
<TraceTypeSection
791800
name={_('Error Bars X')}
792801
traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}

‎src/lib/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export const TRACE_TO_AXIS = {
7373
'scattercarpet',
7474
'contourcarpet',
7575
'waterfall',
76+
'funnel',
7677
],
7778
ternary: ['scatterternary'],
7879
gl3d: ['scatter3d', 'surface', 'mesh3d', 'cone', 'streamtube'],

‎src/shame.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,3 +212,9 @@ export const shamefullyAdjustSizeref = (gd, {update}) => {
212212
update['marker.sizemode'] = 'area';
213213
}
214214
};
215+
216+
export const shamefullyAdjustAxisDirection = (gd, {update}) => {
217+
if (update.type === 'funnel' && gd.data.length === 1) {
218+
gd.layout.yaxis.autorange = 'reversed';
219+
}
220+
};

0 commit comments

Comments
 (0)