Skip to content

Commit 21226a1

Browse files
aulneauVeraZab
aulneau
authored and
VeraZab
committed
clean up, refine layout, abstract out actions, misc updates
1 parent 5db75ee commit 21226a1

File tree

6 files changed

+162
-125
lines changed

6 files changed

+162
-125
lines changed

‎dev/_temp/ic-table.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/containers/Modal.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ const ModalHeader = ({title, handleClose}) => (
1616
</div>
1717
);
1818

19+
const ModalContent = ({children}) => (
20+
<div className="modal__content">{children}</div>
21+
);
22+
1923
class Modal extends Component {
2024
constructor(props) {
2125
super(props);
@@ -34,7 +38,7 @@ class Modal extends Component {
3438
title={title}
3539
handleClose={() => this.context.handleClose()}
3640
/>
37-
{children}
41+
<ModalContent>{children}</ModalContent>
3842
</div>
3943
<div
4044
className="modal__backdrop"
@@ -45,10 +49,6 @@ class Modal extends Component {
4549
}
4650
}
4751

48-
const ModalContent = ({children}) => (
49-
<div className="modal__content">{children}</div>
50-
);
51-
5252
ModalHeader.propTypes = {
5353
title: PropTypes.node,
5454
handleClose: PropTypes.func.isRequired,

‎src/components/widgets/TraceTypeSelector.js

Lines changed: 60 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,75 @@ import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
33
import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
44
import Modal, {ModalContent} from 'components/containers/Modal';
5-
import {
6-
traceTypeToPlotlyInitFigure,
7-
localize,
8-
plotlyTraceToCustomTrace,
9-
computeTraceOptionsFromSchema,
10-
} from 'lib';
5+
import {traceTypeToPlotlyInitFigure, localize} from 'lib';
116

12-
// to be removed when icons are converted to svg
13-
function slugify(text) {
14-
return text
15-
.toString()
16-
.toLowerCase()
17-
.replace(/\s+/g, '-') // Replace spaces with -
18-
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
19-
.replace(/\-\-+/g, '-') // Replace multiple - with single -
20-
.replace(/^-+/, '') // Trim - from start of text
21-
.replace(/-+$/, ''); // Trim - from end of text
22-
}
23-
24-
const Item = ({item, active, columnLength, columnIndex, handleClick}) => {
25-
const isEven = value => value % 2 === 0;
26-
const middle = Math.floor(columnLength / 2);
7+
const actions = ({value}) => [
8+
{
9+
label: `Charts like this by Plotly users.`,
10+
href: `https://plot.ly/feed/?q=plottype:${value}`,
11+
icon: <SearchIcon />,
12+
},
13+
{
14+
label: `View tutorials on this chart type.`,
15+
href: `#`, // update
16+
icon: <ThumnailViewIcon />,
17+
},
18+
{
19+
label: `See a basic example.`,
20+
href: `#`, // update
21+
icon: <GraphIcon />,
22+
},
23+
];
2724

28-
// for left leaning columns
29-
let position = '-right';
30-
31-
// if we have an even number of columns
32-
// we want to have the 2 center rows display their tooltip
33-
// in the middle vs left/right
34-
if (isEven(columnLength) && columnLength > 3) {
35-
if (columnIndex === middle || columnIndex === middle - 1) {
36-
position = '';
37-
}
38-
} else {
39-
if (columnIndex === middle) {
40-
position = '';
41-
}
42-
}
25+
/**
26+
* This renders our item actions
27+
*/
28+
const renderActionItems = (actionItems, item) =>
29+
actionItems(item).map((action, i) => (
30+
<a
31+
className="trace-item__actions__item"
32+
key={i}
33+
aria-label={action.label}
34+
data-microtip-position={`top-left`}
35+
role="tooltip"
36+
href={action.href}
37+
target="_blank"
38+
>
39+
{action.icon}
40+
</a>
41+
));
4342

44-
// for right leaning columns
45-
if (columnIndex > middle) {
46-
position = '-left';
47-
}
48-
const {label, value, type} = item;
43+
/**
44+
* Trace Type Item
45+
*/
46+
const Item = ({item, active, handleClick}) => {
47+
const {label, value} = item;
4948
return (
5049
<div
5150
className={`trace-item${active ? ' trace-item--active' : ''}`}
5251
onClick={() => handleClick()}
5352
>
5453
<div className="trace-item__actions">
55-
<a
56-
className="trace-item__actions__item"
57-
aria-label="Charts like this by Plotly users."
58-
data-microtip-position={`top${position}`}
59-
role="tooltip"
60-
href={`https://plot.ly/feed/?q=plottype:${type}`}
61-
target="_blank"
62-
>
63-
<SearchIcon />
64-
</a>
65-
<div
66-
className="trace-item__actions__item"
67-
aria-label="View tutorials on this chart type."
68-
data-microtip-position={`top${position}`}
69-
role="tooltip"
70-
>
71-
<ThumnailViewIcon />
72-
</div>
73-
<div
74-
className="trace-item__actions__item"
75-
aria-label="See a basic example."
76-
data-microtip-position={`bottom${position}`}
77-
role="tooltip"
78-
>
79-
<GraphIcon />
80-
</div>
54+
{actions ? renderActionItems(actions, item) : null}
8155
</div>
8256
<div className="trace-item__image">
83-
<img src={`/_temp/ic-${slugify(value)}.svg`} />
57+
<img src={`/_temp/ic-${value}.svg`} />
8458
</div>
8559
<div className="trace-item__label">{label}</div>
8660
</div>
8761
);
8862
};
8963

64+
/**
65+
* Trace Type Selector
66+
*/
9067
class TraceTypeSelector extends Component {
9168
selectAndClose(value) {
9269
const computedValue = traceTypeToPlotlyInitFigure(value);
9370
this.props.updateContainer(computedValue);
9471
this.context.handleClose();
9572
}
73+
9674
renderCategories() {
9775
const {fullValue, localize: _} = this.props;
9876
const {traces, categories} = this.context.traceSelectorConfig;
@@ -101,14 +79,21 @@ class TraceTypeSelector extends Component {
10179
const items = traces(_).filter(
10280
({category: {value}}) => value === category.value
10381
);
82+
83+
const MAX_ITEMS = 6;
84+
let columnClasses = 'trace-grid__column';
85+
86+
// If the category has more than 6 items, it will span 2 columns
87+
if (items.length > MAX_ITEMS) {
88+
columnClasses += ' trace-grid__column--double';
89+
}
90+
10491
return (
105-
<div className="trace-grid__column" key={i}>
92+
<div className={columnClasses} key={i}>
10693
<div className="trace-grid__column__header">{category.label}</div>
10794
<div className="trace-grid__column__items">
10895
{items.map(item => (
10996
<Item
110-
columnLength={categories.length}
111-
columnIndex={i}
11297
key={item.value}
11398
active={fullValue === item.value}
11499
item={item}
@@ -124,15 +109,16 @@ class TraceTypeSelector extends Component {
124109
render() {
125110
return (
126111
<Modal title="Select Chart Type">
127-
<ModalContent>
128112
<div className="trace-grid">{this.renderCategories()}</div>
129-
</ModalContent>
130113
</Modal>
131114
);
132115
}
133116
}
117+
134118
TraceTypeSelector.propTypes = {
135119
updateContainer: PropTypes.func,
120+
fullValue: PropTypes.string,
121+
localize: PropTypes.func,
136122
};
137123
TraceTypeSelector.contextTypes = {
138124
traceSelectorConfig: PropTypes.object,
@@ -141,6 +127,7 @@ TraceTypeSelector.contextTypes = {
141127
Item.propTypes = {
142128
item: PropTypes.object,
143129
active: PropTypes.bool,
130+
handleClick: PropTypes.func,
144131
};
145132

146133
export default localize(TraceTypeSelector);

‎src/lib/traceTypes.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,19 @@ export const chartCategory = _ => {
3030
},
3131
WEB_GL: {
3232
value: 'WEB_GL',
33-
label: _('WebGL Accelerated'),
33+
label: _('WebGL'),
3434
},
3535
};
3636
};
3737

3838
// Layout specification for TraceTypeSelector.js
3939
export const categoryLayout = _ => [
4040
chartCategory(_).SIMPLE,
41-
chartCategory(_).CHARTS_3D,
42-
chartCategory(_).FINANCIAL,
41+
chartCategory(_).WEB_GL,
4342
chartCategory(_).DISTRIBUTIONS,
43+
chartCategory(_).FINANCIAL,
4444
chartCategory(_).MAPS,
45-
chartCategory(_).WEB_GL,
45+
chartCategory(_).SPECIALIZED,
4646
];
4747

4848
export const traceTypes = _ => [
@@ -89,22 +89,22 @@ export const traceTypes = _ => [
8989
{
9090
value: 'scatter3d',
9191
label: _('3D Scatter'),
92-
category: chartCategory(_).CHARTS_3D,
92+
category: chartCategory(_).WEB_GL,
9393
},
9494
{
9595
value: 'line3d',
9696
label: _('3D Line'),
97-
category: chartCategory(_).CHARTS_3D,
97+
category: chartCategory(_).WEB_GL,
9898
},
9999
{
100100
value: 'surface',
101101
label: _('3D Surface'),
102-
category: chartCategory(_).CHARTS_3D,
102+
category: chartCategory(_).WEB_GL,
103103
},
104104
{
105105
value: 'mesh3d',
106106
label: _('3D Mesh'),
107-
category: chartCategory(_).CHARTS_3D,
107+
category: chartCategory(_).WEB_GL,
108108
},
109109
{
110110
value: 'box',
@@ -188,17 +188,17 @@ export const traceTypes = _ => [
188188
},
189189
{
190190
value: 'scattergl',
191-
label: _('Scatter (GL)'),
191+
label: _('Scatter'),
192192
category: chartCategory(_).WEB_GL,
193193
},
194194
{
195195
value: 'scatterpolarghl',
196-
label: _('Scatter Polar (GL)'),
196+
label: _('Scatter Polar'),
197197
category: chartCategory(_).WEB_GL,
198198
},
199199
{
200200
value: 'heatmapgl',
201-
label: _('Heatmap (GL)'),
201+
label: _('Heatmap'),
202202
category: chartCategory(_).WEB_GL,
203203
},
204204
];

0 commit comments

Comments
 (0)