Skip to content

support for examples and tutorials #715

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 2 commits into from
Aug 30, 2018
Merged

support for examples and tutorials #715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7788bf0
support for examples and tutorials
dmt0 Aug 28, 2018
b9e8b11
downgrade packages because lib:css wasn't building right
dmt0 Aug 28, 2018
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
42 changes: 37 additions & 5 deletions dev/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,41 @@ const traceTypesConfig = {
complex: true,
};

const chartHelp = {
area: {
helpDoc: 'https://help.plot.ly/make-an-area-graph/',
examplePlot: () => {
console.log('example bar plot!');
},
},
bar: {
helpDoc: 'https://help.plot.ly/stacked-bar-chart/',
examplePlot: () => {
console.log('example bar plot!');
},
},
box: {helpDoc: 'https://help.plot.ly/make-a-box-plot/'},
candlestick: {helpDoc: 'https://help.plot.ly/make-a-candlestick/'},
choropleth: {helpDoc: 'https://help.plot.ly/make-a-choropleth-map/'},
contour: {helpDoc: 'https://help.plot.ly/make-a-contour-plot/'},
heatmap: {helpDoc: 'https://help.plot.ly/make-a-heatmap/'},
histogram2d: {helpDoc: 'https://help.plot.ly/make-a-2d-histogram-heatmap/'},
histogram2dcontour: {helpDoc: 'https://help.plot.ly/make-a-histogram/'},
line: {helpDoc: 'https://help.plot.ly/make-a-line-graph/'},
mesh3d: {helpDoc: null},
ohlc: {helpDoc: 'https://help.plot.ly/make-a-ohlc/'},
pie: {helpDoc: 'https://help.plot.ly/make-a-pie-chart/'},
scatter3d: {helpDoc: 'https://help.plot.ly/make-a-3d-scatter-plot/'},
line3d: {helpDoc: null},
scatter: {helpDoc: 'https://help.plot.ly/how-to-make-a-scatter-plot/'},
scattergeo: {helpDoc: 'https://help.plot.ly/make-scatter-map/'},
scattermapbox: {helpDoc: 'https://help.plot.ly/make-a-mapbox-map/'},
scatterternary: {helpDoc: 'https://help.plot.ly/ternary-scatter-plot/'},
surface: {helpDoc: 'https://help.plot.ly/make-a-3d-surface-plot/'},
table: {helpDoc: null},
timeseries: {helpDoc: 'https://help.plot.ly/range-slider/'},
};

class App extends Component {
constructor() {
super();
Expand Down Expand Up @@ -148,6 +183,7 @@ class App extends Component {
// traceTypesConfig={traceTypesConfig}
// makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
// fontOptions={[{label:'Arial', value: 'arial'}]}
// chartHelp={chartHelp}
>
<DefaultEditor>
<Panel group="Dev" name="JSON">
Expand Down Expand Up @@ -211,11 +247,7 @@ class App extends Component {
Refresh
</button>
<div style={{height: '80vh'}}>
<Inspector
data={{_full: this.state.full}}
expandLevel={2}
sortObjectKeys={true}
/>
<Inspector data={{_full: this.state.full}} expandLevel={2} sortObjectKeys={true} />
</div>
</Panel>
</DefaultEditor>
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-traverse": "^6.26.0",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.4",
"eslint": "^5.4.0",
Expand All @@ -59,9 +59,9 @@
"jest-cli": "^23.5.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.7.2",
"postcss": "^7.0.2",
"postcss": "^6.0.23",
"postcss-combine-duplicated-selectors": "^6.0.2",
"postcss-custom-properties": "^7.0.0",
"postcss-custom-properties": "^6.3.1",
"postcss-remove-root": "^0.0.2",
"prettier": "1.14.2",
"react": "^16.0.0",
Expand Down
3 changes: 3 additions & 0 deletions src/EditorControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ class EditorControls extends Component {
glByDefault: this.props.glByDefault,
mapBoxAccess: this.props.mapBoxAccess,
fontOptions: this.props.fontOptions,
chartHelp: this.props.chartHelp,
};
}

Expand Down Expand Up @@ -335,6 +336,7 @@ EditorControls.propTypes = {
glByDefault: PropTypes.bool,
mapBoxAccess: PropTypes.bool,
fontOptions: PropTypes.array,
chartHelp: PropTypes.object,
};

EditorControls.defaultProps = {
Expand Down Expand Up @@ -376,6 +378,7 @@ EditorControls.childContextTypes = {
glByDefault: PropTypes.bool,
mapBoxAccess: PropTypes.bool,
fontOptions: PropTypes.array,
chartHelp: PropTypes.object,
};

export default EditorControls;
2 changes: 2 additions & 0 deletions src/PlotlyEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ class PlotlyEditor extends Component {
glByDefault={this.props.glByDefault}
mapBoxAccess={Boolean(this.props.config && this.props.config.mapboxAccessToken)}
fontOptions={this.props.fontOptions}
chartHelp={this.props.chartHelp}
>
{this.props.children}
</EditorControls>
Expand Down Expand Up @@ -80,6 +81,7 @@ PlotlyEditor.propTypes = {
makeDefaultTrace: PropTypes.func,
glByDefault: PropTypes.bool,
fontOptions: PropTypes.array,
chartHelp: PropTypes.object,
};

PlotlyEditor.defaultProps = {
Expand Down
123 changes: 77 additions & 46 deletions src/components/widgets/TraceTypeSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,22 @@ import {traceTypeToPlotlyInitFigure, renderTraceIcon, plotlyTraceToCustomTrace}

const renderActionItems = (actionItems, item) =>
actionItems
? actionItems(item).map((action, i) => (
<a
className="trace-item__actions__item"
key={i}
aria-label={action.label}
data-microtip-position={`top-left`}
role="tooltip"
href={action.href}
target="_blank"
>
{action.icon}
</a>
))
? actionItems(item).map(
(action, i) =>
!action.onClick ? null : (
Copy link
Contributor

Choose a reason for hiding this comment

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

this could just be action.onClick && x instead of !action.onClick ? null : x. Not a big deal but it jumped out at me for some reason

<a
className="trace-item__actions__item"
key={i}
aria-label={action.label}
data-microtip-position={`top-left`}
role="tooltip"
onClick={action.onClick}
target="_blank"
>
{action.icon}
</a>
)
)
: null;

const Item = ({item, active, handleClick, actions, showActions, complex}) => {
Expand All @@ -28,10 +31,7 @@ const Item = ({item, active, handleClick, actions, showActions, complex}) => {
const ComplexIcon = renderTraceIcon(icon ? icon : value, 'TraceType');

return (
<div
className={`trace-item${active ? ' trace-item--active' : ''}`}
onClick={() => handleClick()}
>
<div className={`trace-item${active ? ' trace-item--active' : ''}`} onClick={handleClick}>
<div className="trace-item__actions">
{actions && showActions ? renderActionItems(actions, item) : null}
</div>
Expand All @@ -52,7 +52,29 @@ const Item = ({item, active, handleClick, actions, showActions, complex}) => {
);
};

Item.propTypes = {
item: PropTypes.object,
active: PropTypes.bool,
complex: PropTypes.bool,
handleClick: PropTypes.func,
actions: PropTypes.func,
showActions: PropTypes.bool,
};
Item.contextTypes = {
localize: PropTypes.func,
};

class TraceTypeSelector extends Component {
constructor(props) {
super(props);

this.selectAndClose = this.selectAndClose.bind(this);
this.actions = this.actions.bind(this);
this.renderCategories = this.renderCategories.bind(this);
this.renderGrid = this.renderGrid.bind(this);
this.renderSingleBlock = this.renderSingleBlock.bind(this);
}

selectAndClose(value) {
const {
updateContainer,
Expand All @@ -72,21 +94,38 @@ class TraceTypeSelector extends Component {
}

actions({value}) {
const {localize: _} = this.context;
const {localize: _, chartHelp} = this.context;

const onClick = (e, func) => {
e.stopPropagation();
func();
this.context.handleClose();
};

return [
{
label: _('Charts like this by Plotly users.'),
href: `https://plot.ly/feed/?q=plottype:${value}`,
onClick:
chartHelp[value] &&
(e =>
onClick(e, () =>
window.open(
`https://plot.ly/feed/?q=${chartHelp[value] ? chartHelp[value].feedQuery : value}`,
'_blank'
)
)),
icon: <SearchIcon />,
},
{
label: _('View tutorials on this chart type.'),
href: '#',
onClick:
chartHelp[value] &&
(e => onClick(e, () => window.open(chartHelp[value].helpDoc, '_blank'))),
icon: <ThumnailViewIcon />,
},
{
label: _('See a basic example.'),
href: '#',
onClick: chartHelp[value] && (e => onClick(e, chartHelp[value].examplePlot)),
icon: <GraphIcon />,
},
];
Expand All @@ -98,6 +137,7 @@ class TraceTypeSelector extends Component {
traceTypesConfig: {traces, categories, complex},
mapBoxAccess,
localize: _,
chartHelp,
} = this.context;

return categories(_).map((category, i) => {
Expand Down Expand Up @@ -131,8 +171,8 @@ class TraceTypeSelector extends Component {
active={fullValue === item.value}
item={item}
actions={this.actions}
showActions={false}
handleClick={() => this.selectAndClose(item.value)}
showActions={Boolean(chartHelp)}
/>
))}
</div>
Expand Down Expand Up @@ -193,6 +233,20 @@ class TraceTypeSelector extends Component {
}
}

TraceTypeSelector.propTypes = {
updateContainer: PropTypes.func,
fullValue: PropTypes.string,
fullContainer: PropTypes.object,
glByDefault: PropTypes.bool,
};
TraceTypeSelector.contextTypes = {
traceTypesConfig: PropTypes.object,
handleClose: PropTypes.func,
localize: PropTypes.func,
mapBoxAccess: PropTypes.bool,
chartHelp: PropTypes.object,
};

export class TraceTypeSelectorButton extends Component {
render() {
const {
Expand All @@ -209,7 +263,7 @@ export class TraceTypeSelectorButton extends Component {
const Icon = renderTraceIcon(icon ? icon : value);

return (
<div className="trace-type-select-button" onClick={handleClick ? () => handleClick() : null}>
<div className="trace-type-select-button" onClick={handleClick ? handleClick : null}>
<div className="trace-type-select-button__icon">
<Icon />
</div>
Expand All @@ -219,18 +273,6 @@ export class TraceTypeSelectorButton extends Component {
}
}

TraceTypeSelector.propTypes = {
updateContainer: PropTypes.func,
fullValue: PropTypes.string,
fullContainer: PropTypes.object,
glByDefault: PropTypes.bool,
};
TraceTypeSelector.contextTypes = {
traceTypesConfig: PropTypes.object,
handleClose: PropTypes.func,
localize: PropTypes.func,
mapBoxAccess: PropTypes.bool,
};
TraceTypeSelectorButton.propTypes = {
handleClick: PropTypes.func.isRequired,
container: PropTypes.object,
Expand All @@ -239,16 +281,5 @@ TraceTypeSelectorButton.propTypes = {
TraceTypeSelectorButton.contextTypes = {
localize: PropTypes.func,
};
Item.propTypes = {
item: PropTypes.object,
active: PropTypes.bool,
complex: PropTypes.bool,
handleClick: PropTypes.func,
actions: PropTypes.func,
showActions: PropTypes.bool,
};
Item.contextTypes = {
localize: PropTypes.func,
};

export default TraceTypeSelector;
1 change: 1 addition & 0 deletions src/styles/components/widgets/_trace-type-selector.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ $item-size: 90px;
display: block;
width: 16px;
height: 16px;
fill: currentColor;
}
}
}
Expand Down