Skip to content

Commit a8da496

Browse files
VeraZabVeraZab
authored
Merge pull request #370 from plotly/tables
Add table trace
2 parents c552309 + 810b5ac commit a8da496

File tree

6 files changed

+102
-15
lines changed

6 files changed

+102
-15
lines changed

‎dev/App.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@ import Nav from './Nav';
1010
import ACCESS_TOKENS from '../accessTokens';
1111

1212
const dataSources = {
13-
col1: [1, 2, 3], // eslint-disable-line no-magic-numbers
14-
col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
15-
col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
13+
col1: ['Jan', 'Feb', 'Mar'], // eslint-disable-line no-magic-numbers
14+
col2: [1, 2, 3],
15+
col3: [4, 3, 2], // eslint-disable-line no-magic-numbers
16+
col4: [17, 13, 9], // eslint-disable-line no-magic-numbers
17+
col5: ['blue'],
18+
col6: ['yellow', 'green', 'yellow'],
1619
};
1720
const dataSourceOptions = Object.keys(dataSources).map(name => ({
1821
value: name,

‎src/components/fields/DataSelector.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@ export class UnconnectedDataSelector extends Component {
3838
}
3939

4040
this.is2D =
41-
props.attr === 'z' &&
42-
['contour', 'heatmap', 'surface'].includes(props.container.type);
41+
(props.attr === 'z' &&
42+
['contour', 'heatmap', 'surface'].includes(props.container.type)) ||
43+
(props.container.type === 'table' && props.attr !== 'columnorder');
4344
}
4445

4546
updatePlot(value) {
@@ -52,6 +53,28 @@ export class UnconnectedDataSelector extends Component {
5253
update[this.props.attr] = value
5354
.filter(v => Array.isArray(this.dataSources[v]))
5455
.map(v => this.dataSources[v]);
56+
57+
// Table traces have many configuration options,
58+
// The below attributes can be 2d or 1d and will affect the plot differently
59+
// EX:
60+
// header.values = ['Jan', 'Feb', 'Mar'] => will put data in a row
61+
// header.values = [['Jan', 1], ['Feb', 2], ['Mar', 3]] => will create 3 columns
62+
// 1d arrays affect columns
63+
// 2d arrays affect rows within each column
64+
65+
if (
66+
this.props.container.type === 'table' &&
67+
value.length === 1 &&
68+
[
69+
'header.values',
70+
'header.font.color',
71+
'header.font.size',
72+
'header.fill.color',
73+
'columnwidth',
74+
].includes(this.props.attr)
75+
) {
76+
update[this.props.attr] = update[this.props.attr][0];
77+
}
5578
update[this.srcAttr] = value;
5679
} else {
5780
update[this.srcAttr] = value;

‎src/components/fields/derived.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -529,6 +529,10 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
529529
];
530530
}
531531

532+
if (context.container.type === 'table') {
533+
plotProps.isVisible = false;
534+
}
535+
532536
plotProps.options = options;
533537
},
534538
});

‎src/default_panels/GraphCreatePanel.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ const GraphCreatePanel = ({localize: _}) => {
6262
<DataSelector label={_('A')} attr="a" />
6363
<DataSelector label={_('B')} attr="b" />
6464
<DataSelector label={_('C')} attr="c" />
65+
<DataSelector label={_('Headers')} attr="header.values" />
66+
<DataSelector label={_('Columns')} attr="cells.values" />
6567
</Section>
6668

6769
<Section name={_('Axes to Use')}>
@@ -80,6 +82,23 @@ const GraphCreatePanel = ({localize: _}) => {
8082
<ErrorBars localize={_} attr="error_z" />
8183
</Section>
8284

85+
<Section name={_('Header Options')}>
86+
<DataSelector label={_('Fill Color')} attr="header.fill.color" />
87+
<DataSelector label={_('Font Color')} attr="header.font.color" />
88+
<DataSelector label={_('Font Size')} attr="header.font.size" />
89+
</Section>
90+
91+
<Section name={_('Cell Options')}>
92+
<DataSelector label={_('Fill Color')} attr="cells.fill.color" />
93+
<DataSelector label={_('Font Color')} attr="cells.font.color" />
94+
<DataSelector label={_('Font Size')} attr="cells.font.size" />
95+
</Section>
96+
97+
<Section name={_('Column Options')}>
98+
<DataSelector label={_('Width')} attr="columnwidth" />
99+
<DataSelector label={_('Order')} attr="columnorder" />
100+
</Section>
101+
83102
<Section name={_('Options')}>
84103
<DataSelector label={_('Intensity')} attr="intensity" />
85104
<DataSelector label={_('Facecolor')} attr="facecolor" />

‎src/default_panels/StyleTracesPanel.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,44 @@ const StyleTracesPanel = ({localize: _}) => (
5555
/>
5656
</Section>
5757

58+
<Section name={_('Header')}>
59+
<Numeric label={_('Height')} attr="header.height" />
60+
<ColorPicker label={_('Fill Color')} attr="header.fill.color" />
61+
<FontSelector label={_('Typeface')} attr="header.font.family" />
62+
<Numeric label={_('Font Size')} attr="header.font.size" />
63+
<Dropdown
64+
label={_('Text Alignment')}
65+
options={[
66+
{label: _('Left'), value: 'left'},
67+
{label: _('Center'), value: 'center'},
68+
{label: _('Right'), value: 'right'},
69+
]}
70+
attr="header.align"
71+
/>
72+
<ColorPicker label={_('Font Color')} attr="header.font.color" />
73+
<Numeric label={_('Border Width')} attr="header.line.width" />
74+
<ColorPicker label={_('Border Color')} attr="header.line.color" />
75+
</Section>
76+
77+
<Section name={_('Cells')}>
78+
<Numeric label={_('Height')} attr="cells.height" />
79+
<ColorPicker label={_('Fill Color')} attr="cells.fill.color" />
80+
<FontSelector label={_('Typeface')} attr="cells.font.family" />
81+
<Numeric label={_('Font Size')} attr="cells.font.size" />
82+
<Dropdown
83+
label={_('Text Alignment')}
84+
options={[
85+
{label: _('Left'), value: 'left'},
86+
{label: _('Center'), value: 'center'},
87+
{label: _('Right'), value: 'right'},
88+
]}
89+
attr="cells.align"
90+
/>
91+
<ColorPicker label={_('Font Color')} attr="cells.font.color" />
92+
<Numeric label={_('Border Width')} attr="cells.line.width" />
93+
<ColorPicker label={_('Border Color')} attr="cells.line.color" />
94+
</Section>
95+
5896
<Section name={_('Display')}>
5997
<Flaglist
6098
attr="mode"

‎src/lib/traceTypes.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,21 +61,21 @@ export const traceTypes = _ => [
6161
label: _('Line'),
6262
category: chartCategory(_).SIMPLE,
6363
},
64-
// {
65-
// value: 'area',
66-
// label: _('Area'),
67-
// category: chartCategory(_).SIMPLE,
68-
// },
64+
{
65+
value: 'area',
66+
label: _('Area'),
67+
category: chartCategory(_).SIMPLE,
68+
},
6969
{
7070
value: 'heatmap',
7171
label: _('Heatmap'),
7272
category: chartCategory(_).SIMPLE,
7373
},
74-
// {
75-
// value: 'table',
76-
// label: _('Table'),
77-
// category: chartCategory(_).SIMPLE,
78-
// },
74+
{
75+
value: 'table',
76+
label: _('Table'),
77+
category: chartCategory(_).SIMPLE,
78+
},
7979
{
8080
value: 'contour',
8181
label: _('Contour'),

0 commit comments

Comments
 (0)