Skip to content

Canvas size #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 17, 2017
Merged

Canvas size #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
21fb7ec
TraceMarkerSection handles naming section after trace types
bpostlethwaite Nov 16, 2017
e0e0fd5
CanvasSize
bpostlethwaite Nov 16, 2017
cf40784
pull trace handling from DefaultEditor into TraceSelector fixes #56
bpostlethwaite Nov 16, 2017
35784a4
remove requirement that plotly.js is passed into Editor fixes #86
bpostlethwaite Nov 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 70 additions & 46 deletions src/DefaultEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import {
AxesSelector,
AxesRange,
CanvasSize,
ColorPicker,
DataSelector,
Dropdown,
Expand All @@ -17,6 +18,7 @@ import {
MenuPanel,
SymbolSelector,
TraceAccordion,
TraceMarkerSection,
TraceSelector,
} from './components';
import {DEFAULT_FONTS} from './constants';
Expand All @@ -26,32 +28,6 @@ const LayoutPanel = connectLayoutToPlot(Panel);
const AxesFold = connectAxesToLayout(Fold);

class DefaultEditor extends Component {
constructor(props, context) {
super(props, context);

const capitalize = s => s.charAt(0).toUpperCase() + s.substring(1);

// Filter out Polar "area" type as it is fairly broken and we want to present
// scatter with fill as an "area" chart type for convenience.
const traceTypes = Object.keys(context.plotSchema.traces).filter(
t => t !== 'area'
);

const labels = traceTypes.map(capitalize);
this.traceOptions = traceTypes.map((t, i) => ({
label: labels[i],
value: t,
}));

const i = this.traceOptions.findIndex(opt => opt.value === 'scatter');
this.traceOptions.splice(
i + 1,
0,
{label: 'Line', value: 'line'},
{label: 'Area', value: 'area'}
);
}

render() {
const _ = this.props.localize;

Expand All @@ -63,7 +39,6 @@ class DefaultEditor extends Component {
label="Plot Type"
attr="type"
clearable={false}
options={this.traceOptions}
show
/>

Expand Down Expand Up @@ -115,6 +90,18 @@ class DefaultEditor extends Component {
<Numeric label={_('Opacity')} step={0.1} attr="opacity" />
</Section>

<Section name={_('Text Attributes')}>
<Flaglist
attr="textinfo"
options={[
{label: 'Label', value: 'label'},
{label: 'Text', value: 'text'},
{label: 'Value', value: 'value'},
{label: '%', value: 'percent'},
]}
/>
</Section>

<Section name={_('Display')}>
<Flaglist
attr="mode"
Expand Down Expand Up @@ -142,14 +129,21 @@ class DefaultEditor extends Component {
<ColorPicker label={_('Color')} attr="fillcolor" />
</Section>

<Section name={_('Points')}>
<TraceMarkerSection>
<Radio
attr="orientation"
options={[
{label: _('Vertical'), value: 'v'},
{label: _('Horizontal'), value: 'h'},
]}
/>
<ColorPicker label={_('Color')} attr="marker.color" />
<Numeric label={_('Opacity')} step={0.1} attr="marker.opacity" />
<Numeric label={_('Size')} attr="marker.size" />
<SymbolSelector label={_('Symbol')} attr="marker.symbol" />
<Numeric label={_('Border Width')} attr="marker.line.width" />
<ColorPicker label={_('Border Color')} attr="marker.line.color" />
</Section>
</TraceMarkerSection>

<Section name={_('Lines')}>
<Numeric label={_('Width')} step={1.0} attr="line.width" />
Expand All @@ -168,12 +162,43 @@ class DefaultEditor extends Component {

<LayoutPanel group="Style" name={_('Layout')}>
<Fold name={_('Canvas')}>
<Numeric
<Radio
attr="autosize"
options={[
{label: _('Auto'), value: true},
{label: _('Custom'), value: false},
]}
/>
<CanvasSize
label={_('Fixed Width')}
step={1}
attr="width"
postfix="px"
/>
<CanvasSize
label={_('Fixed Height')}
step={1}
attr="height"
postfix="px"
/>
<ColorPicker label={_('Color')} attr="paper_bgcolor" />
</Fold>
<Fold name={_('Margins and Padding')}>
<Numeric label={_('Top')} step={1} attr="margin.t" postfix="px" />
<Numeric
label={_('Bottom')}
step={1}
attr="margin.b"
postfix="px"
/>
<Numeric label={_('Left')} step={1} attr="margin.l" postfix="px" />
<Numeric label={_('Right')} step={1} attr="margin.r" postfix="px" />
<Numeric
label={_('Padding')}
step={1}
attr="margin.pad"
postfix="px"
/>
</Fold>
</LayoutPanel>

Expand Down Expand Up @@ -212,21 +237,21 @@ class DefaultEditor extends Component {
</Section>
</AxesFold>

<AxesFold name={_('Lines')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Tick Labels')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Tick Markers')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Zoom Interactivity')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Layout')}>
<AxesSelector />
</AxesFold>
{/* <AxesFold name={_('Lines')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Tick Labels')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Tick Markers')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Zoom Interactivity')}>
<AxesSelector />
</AxesFold>
<AxesFold name={_('Layout')}>
<AxesSelector />
</AxesFold> */}
</LayoutPanel>

<LayoutPanel group="Style" name={_('Legend')}>
Expand Down Expand Up @@ -338,7 +363,6 @@ class DefaultEditor extends Component {

DefaultEditor.contextTypes = {
dataSourceNames: PropTypes.array.isRequired,
plotSchema: PropTypes.object.isRequired,
};

export default localize(DefaultEditor);
10 changes: 6 additions & 4 deletions src/PlotlyEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ class PlotlyEditor extends Component {
noShame({plotly: this.props.plotly});

// we only need to compute this once.
this.plotSchema = this.props.plotly.PlotSchema.get();
if (this.props.plotly) {
this.plotSchema = this.props.plotly.PlotSchema.get();
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, I see how this is nice for testing, but real users will always want plotly and will be confused about what's happening if they forget it. Perhaps a warning if it's not there?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#89

}

getChildContext() {
Expand Down Expand Up @@ -51,7 +53,7 @@ class PlotlyEditor extends Component {

PlotlyEditor.propTypes = {
onUpdate: PropTypes.func,
plotly: PropTypes.object.isRequired,
plotly: PropTypes.object,
graphDiv: PropTypes.object,
locale: PropTypes.string,
dataSources: PropTypes.object,
Expand All @@ -72,8 +74,8 @@ PlotlyEditor.childContextTypes = {
layout: PropTypes.object,
locale: PropTypes.string,
onUpdate: PropTypes.func,
plotSchema: PropTypes.object.isRequired,
plotly: PropTypes.object.isRequired,
plotSchema: PropTypes.object,
plotly: PropTypes.object,
};

export default PlotlyEditor;
11 changes: 8 additions & 3 deletions src/components/containers/Section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,14 @@ class Section extends Component {
}

const isAttr = Boolean(child.props.attr);
const plotProps = isAttr
? unpackPlotProps(child.props, context, child.type)
: {isVisible: true};
let plotProps;
if (child.plotProps) {
plotProps = child.plotProps;
} else if (isAttr) {
plotProps = unpackPlotProps(child.props, context, child.type);
} else {
plotProps = {isVisible: true};
}
const childProps = Object.assign({plotProps}, child.props);
childProps.key = i;
attrChildren.push(cloneElement(child, childProps));
Expand Down
25 changes: 11 additions & 14 deletions src/components/containers/TraceAccordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,34 @@ import {connectTraceToPlot} from '../../lib';
const TraceFold = connectTraceToPlot(Fold);

export default class TraceAccordion extends Component {
constructor(props, context) {
constructor(props) {
super(props);

this.addTrace = this.addTrace.bind(this);
this.renderPanel = this.renderPanel.bind(this);
}

renderPanel(d, i) {
return (
<TraceFold key={i} traceIndex={i} name={`Trace ${i}`}>
{this.props.children}
</TraceFold>
);
}

addTrace() {
this.context.onUpdate &&
if (this.context.onUpdate) {
this.context.onUpdate({
type: EDITOR_ACTIONS.ADD_TRACE,
});
}
}

render() {
const data = this.context.data || [];
return (
<div>
{this.props.canAdd && (
{this.props.canAdd ? (
<a href="#" onClick={this.addTrace}>
Add
</a>
)}
{data.map(this.renderPanel)}
) : null}
{data.map((d, i) => (
<TraceFold key={i} traceIndex={i} name={`Trace ${i}`}>
{this.props.children}
</TraceFold>
))}
</div>
);
}
Expand All @@ -50,5 +46,6 @@ TraceAccordion.contextTypes = {
};

TraceAccordion.propTypes = {
children: PropTypes.node,
canAdd: PropTypes.bool,
};
41 changes: 41 additions & 0 deletions src/components/containers/TraceMarkerSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import Section from './Section';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import localize from '../../lib/localize';

class TraceMarkerSection extends Component {
constructor(props, context) {
super(props, context);
this.setLocals(context);
}

componentWillReceiveProps(nextProps, nextContext) {
this.setLocals(nextContext);
}

setLocals(context) {
const _ = this.props.localize;
const traceType = context.fullContainer.type;
if (traceType === 'bar') {
this.name = _('Bars');
} else {
this.name = _('Points');
}
}

render() {
return <Section name={this.name}>{this.props.children}</Section>;
}
}

TraceMarkerSection.propTypes = {
children: PropTypes.node,
localize: PropTypes.func,
name: PropTypes.string,
};

TraceMarkerSection.contextTypes = {
fullContainer: PropTypes.object,
};

export default localize(TraceMarkerSection);
4 changes: 2 additions & 2 deletions src/components/containers/__tests__/Layout-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import {Fold, Panel, Section} from '..';
import NumericInput from '../../widgets/NumericInputStatefulWrapper';
import React from 'react';
import {EDITOR_ACTIONS} from '../../../constants';
import {TestEditor, fixtures, plotly} from '../../../lib/test-utils';
import {TestEditor, fixtures} from '../../../lib/test-utils';
import {connectLayoutToPlot} from '../../../lib';
import {mount} from 'enzyme';

const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);
const Editor = props => (
<TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
<TestEditor {...{onUpdate: jest.fn(), ...props}} />
);

Layouts.forEach(Layout => {
Expand Down
Loading