Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Commit 04c388d

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
authored
Issue 342- Add column type support for conditionals (#343)
1 parent 8f22841 commit 04c388d

File tree

10 files changed

+168
-18
lines changed

10 files changed

+168
-18
lines changed

Diff for: ‎CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22
All notable changes to this project will be documented in this file.
33
This project adheres to [Semantic Versioning](http://semver.org/).
44

5+
## [Unreleased]
6+
### Added
7+
[#342](https://github.com/plotly/dash-core/issues/342)
8+
- Added `column_type` condition to style `if`; allows applying styles based on the type of the column for props
9+
- `style_cell_conditional`
10+
- `style_data_conditional`
11+
- `style_filter_conditional`
12+
- `style_header_conditional`
13+
14+
### Fixed
15+
[#342](https://github.com/plotly/dash-core/issues/342)
16+
- Added already supported `filter` nested prop / condition to `style_data_conditional` props definition
17+
518
## [3.4.0] - 2019-02-08
619
### Added
720
[#364](https://github.com/plotly/dash-table/pull/364)

Diff for: ‎dash_table/bundle.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dash_table/bundle.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dash_table/demo.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dash_table/demo.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dash_table/metadata.json

+76
Original file line numberDiff line numberDiff line change
@@ -1048,6 +1048,24 @@
10481048
}
10491049
],
10501050
"required": false
1051+
},
1052+
"column_type": {
1053+
"name": "enum",
1054+
"value": [
1055+
{
1056+
"value": "'any'",
1057+
"computed": false
1058+
},
1059+
{
1060+
"value": "'numeric'",
1061+
"computed": false
1062+
},
1063+
{
1064+
"value": "'text'",
1065+
"computed": false
1066+
}
1067+
],
1068+
"required": false
10511069
}
10521070
},
10531071
"required": false
@@ -1083,6 +1101,28 @@
10831101
],
10841102
"required": false
10851103
},
1104+
"column_type": {
1105+
"name": "enum",
1106+
"value": [
1107+
{
1108+
"value": "'any'",
1109+
"computed": false
1110+
},
1111+
{
1112+
"value": "'numeric'",
1113+
"computed": false
1114+
},
1115+
{
1116+
"value": "'text'",
1117+
"computed": false
1118+
}
1119+
],
1120+
"required": false
1121+
},
1122+
"filter": {
1123+
"name": "string",
1124+
"required": false
1125+
},
10861126
"row_index": {
10871127
"name": "union",
10881128
"value": [
@@ -1138,6 +1178,24 @@
11381178
}
11391179
],
11401180
"required": false
1181+
},
1182+
"column_type": {
1183+
"name": "enum",
1184+
"value": [
1185+
{
1186+
"value": "'any'",
1187+
"computed": false
1188+
},
1189+
{
1190+
"value": "'numeric'",
1191+
"computed": false
1192+
},
1193+
{
1194+
"value": "'text'",
1195+
"computed": false
1196+
}
1197+
],
1198+
"required": false
11411199
}
11421200
},
11431201
"required": false
@@ -1169,6 +1227,24 @@
11691227
],
11701228
"required": false
11711229
},
1230+
"column_type": {
1231+
"name": "enum",
1232+
"value": [
1233+
{
1234+
"value": "'any'",
1235+
"computed": false
1236+
},
1237+
{
1238+
"value": "'numeric'",
1239+
"computed": false
1240+
},
1241+
{
1242+
"value": "'text'",
1243+
"computed": false
1244+
}
1245+
],
1246+
"required": false
1247+
},
11721248
"header_index": {
11731249
"name": "union",
11741250
"value": [

Diff for: ‎src/dash-table/DataTable.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -861,7 +861,8 @@ export const propTypes = {
861861
style_cell_conditional: PropTypes.arrayOf(PropTypes.shape({
862862
// .exact
863863
if: PropTypes.shape({
864-
column_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
864+
column_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
865+
column_type: PropTypes.oneOf(['any', 'numeric', 'text'])
865866
})
866867
})),
867868

@@ -874,6 +875,8 @@ export const propTypes = {
874875
// .exact
875876
if: PropTypes.shape({
876877
column_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
878+
column_type: PropTypes.oneOf(['any', 'numeric', 'text']),
879+
filter: PropTypes.string,
877880
row_index: PropTypes.oneOfType([
878881
PropTypes.number,
879882
PropTypes.oneOf(['odd', 'even'])
@@ -889,7 +892,8 @@ export const propTypes = {
889892
style_filter_conditional: PropTypes.arrayOf(PropTypes.shape({
890893
// .exact
891894
if: PropTypes.shape({
892-
column_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
895+
column_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
896+
column_type: PropTypes.oneOf(['any', 'numeric', 'text'])
893897
})
894898
})),
895899

@@ -902,6 +906,7 @@ export const propTypes = {
902906
// .exact
903907
if: PropTypes.shape({
904908
column_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
909+
column_type: PropTypes.oneOf(['any', 'numeric', 'text']),
905910
header_index: PropTypes.oneOfType([
906911
PropTypes.number,
907912
PropTypes.oneOf(['odd', 'even'])

Diff for: ‎src/dash-table/conditional/index.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ColumnId, Datum } from 'dash-table/components/Table/props';
1+
import { ColumnId, Datum, ColumnType } from 'dash-table/components/Table/props';
22
import SyntaxTree from 'core/syntax-tree';
33

44
export interface IConditionalElement {
@@ -17,10 +17,14 @@ export interface INamedElement {
1717
column_id?: ColumnId;
1818
}
1919

20-
export type ConditionalBasicFilter = INamedElement;
21-
export type ConditionalDataCell = IConditionalElement & IIndexedRowElement & INamedElement;
22-
export type ConditionalCell = INamedElement;
23-
export type ConditionalHeader = IIndexedHeaderElement & INamedElement;
20+
export interface ITypedElement {
21+
column_type?: ColumnType;
22+
}
23+
24+
export type ConditionalBasicFilter = INamedElement & ITypedElement;
25+
export type ConditionalDataCell = IConditionalElement & IIndexedRowElement & INamedElement & ITypedElement;
26+
export type ConditionalCell = INamedElement & ITypedElement;
27+
export type ConditionalHeader = IIndexedHeaderElement & INamedElement & ITypedElement;
2428

2529
function ifAstFilter(ast: SyntaxTree, datum: Datum) {
2630
return ast.isValid && ast.evaluate(datum);
@@ -32,6 +36,12 @@ export function ifColumnId(condition: INamedElement | undefined, columnId: Colum
3236
condition.column_id === columnId;
3337
}
3438

39+
export function ifColumnType(condition: ITypedElement | undefined, columnType?: ColumnType) {
40+
return !condition ||
41+
condition.column_type === undefined ||
42+
condition.column_type === (columnType || ColumnType.Any);
43+
}
44+
3545
export function ifRowIndex(condition: IIndexedRowElement | undefined, rowIndex: number) {
3646
if (!condition ||
3747
condition.row_index === undefined) {

Diff for: ‎src/dash-table/derived/style/index.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ import {
2121
IIndexedHeaderElement,
2222
IIndexedRowElement,
2323
INamedElement,
24-
ifColumnId
24+
ITypedElement,
25+
ifColumnId,
26+
ifColumnType
2527
} from 'dash-table/conditional';
2628

2729
export interface IConvertedStyle {
@@ -31,15 +33,19 @@ export interface IConvertedStyle {
3133
matchesFilter: (datum: Datum) => boolean;
3234
}
3335

34-
type GenericIf = Partial<IConditionalElement & IIndexedHeaderElement & IIndexedRowElement & INamedElement>;
36+
type GenericIf = Partial<IConditionalElement & IIndexedHeaderElement & IIndexedRowElement & INamedElement & ITypedElement>;
3537
type GenericStyle = Style & Partial<{ if: GenericIf }>;
3638

3739
function convertElement(style: GenericStyle) {
3840
const indexFilter = style.if && (style.if.header_index || style.if.row_index);
3941
let ast: SyntaxTree;
4042

4143
return {
42-
matchesColumn: (column: IVisibleColumn) => ifColumnId(style.if, column.id),
44+
matchesColumn: (column: IVisibleColumn) =>
45+
!style.if || (
46+
ifColumnId(style.if, column.id) &&
47+
ifColumnType(style.if, column.type)
48+
),
4349
matchesRow: (index: number) =>
4450
indexFilter === undefined ?
4551
true :

Diff for: ‎tests/visual/percy-storybook/Style.percy.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import DataTable from 'dash-table/DataTable';
4+
import fixtures from './fixtures';
5+
import { ColumnType } from 'dash-table/components/Table/props';
6+
7+
const setProps = () => { };
8+
9+
// Legacy: Tests previously run in Python
10+
const fixtureStories = storiesOf('DashTable/Fixtures', module);
11+
fixtures.forEach(fixture => fixtureStories.add(fixture.name, () => (<DataTable {...Object.assign(fixture.props)} />)));
12+
13+
storiesOf('DashTable/Style type condition', module)
14+
.add('with 1 column', () => (<DataTable
15+
setProps={setProps}
16+
id='table'
17+
data={[
18+
{ a: 1, b: 2, c: '3', d: '4', e: 5, f: 6, g: 7, h: 8 },
19+
{ a: 11, b: 22, c: '33', d: '44', e: 55, f: 66, g: 77, h: 88 },
20+
{ a: 111, b: 222, c: '333', d: '444', e: 555, f: 666, g: 777, h: 888 }
21+
]}
22+
columns={[
23+
{ id: 'a', name: 'A', type: ColumnType.Any },
24+
{ id: 'b', name: 'B', type: ColumnType.Any },
25+
{ id: 'c', name: 'C', type: ColumnType.Text },
26+
{ id: 'd', name: 'D', type: ColumnType.Text },
27+
{ id: 'e', name: 'E', type: ColumnType.Numeric },
28+
{ id: 'f', name: 'F', type: ColumnType.Numeric },
29+
{ id: 'g', name: 'G' },
30+
{ id: 'h', name: 'H' }
31+
]}
32+
style_data_conditional={[
33+
{ if: { column_type: ColumnType.Any, row_index: 'even' }, background_color: 'blue', color: 'white' },
34+
{ if: { column_type: ColumnType.Text, row_index: 'even' }, background_color: 'red', color: 'white' },
35+
{ if: { column_type: ColumnType.Numeric, row_index: 'even' }, background_color: 'green', color: 'white' },
36+
{ if: { column_type: ColumnType.Any }, background_color: 'blue' },
37+
{ if: { column_type: ColumnType.Text }, background_color: 'red' },
38+
{ if: { column_type: ColumnType.Numeric }, background_color: 'green' }
39+
]}
40+
/>));

0 commit comments

Comments
 (0)