-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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.
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
Migrate Pivot Table visualization to React #4133
Merged
Merged
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
324ea07
npm install react-pivottable
gabrieldutra 489c8d9
Initiate Pivot Table Migration
gabrieldutra 09cf7a4
Merge branch 'master' into react-pivottable
gabrieldutra bace703
Update renderer with editor options
gabrieldutra c82a4c6
Clean up
gabrieldutra 4032c1c
Remove old pivottable from package.json
gabrieldutra 9a3c74b
Test Percy Snapshot with Pivot Table in a Dashboard
gabrieldutra dd43500
Merge branch 'master' into react-pivottable
gabrieldutra 26090dd
Tmp: use cy.wait to make sure dashboard is loaded
gabrieldutra b7b325e
Clean up Percy snapshot test
gabrieldutra 88096e2
Small improvements
gabrieldutra d8a9a89
Watch for options in the Renderer
gabrieldutra c5bb351
Merge branch 'master' into react-pivottable
gabrieldutra 842e7a3
Merge branch 'master' into react-pivottable
gabrieldutra File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,10 @@ | ||
import { isArray, indexOf, get, map, includes, every, some, toNumber, toLower } from 'lodash'; | ||
import { isArray, indexOf, get, map, includes, every, some, toNumber } from 'lodash'; | ||
import moment from 'moment'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { react2angular } from 'react2angular'; | ||
import Select from 'antd/lib/select'; | ||
import { formatDateTime, formatDate } from '@/filters/datetime'; | ||
import { formatColumnValue } from '@/filters'; | ||
|
||
const ALL_VALUES = '###Redash::Filters::SelectAll###'; | ||
const NONE_VALUES = '###Redash::Filters::Clear###'; | ||
|
@@ -71,21 +71,6 @@ export function filterData(rows, filters = []) { | |
return result; | ||
} | ||
|
||
function formatValue(value, columnType) { | ||
if (moment.isMoment(value)) { | ||
if (columnType === 'date') { | ||
return formatDate(value); | ||
} | ||
return formatDateTime(value); | ||
} | ||
|
||
if (typeof value === 'boolean') { | ||
return value.toString(); | ||
} | ||
|
||
return value; | ||
} | ||
|
||
export function Filters({ filters, onChange }) { | ||
if (filters.length === 0) { | ||
return null; | ||
|
@@ -99,7 +84,7 @@ export function Filters({ filters, onChange }) { | |
<div className="row"> | ||
{map(filters, (filter) => { | ||
const options = map(filter.values, (value, index) => ( | ||
<Select.Option key={index}>{formatValue(value, get(filter, 'column.type'))}</Select.Option> | ||
<Select.Option key={index}>{formatColumnValue(value, get(filter, 'column.type'))}</Select.Option> | ||
)); | ||
|
||
return ( | ||
|
@@ -115,10 +100,10 @@ export function Filters({ filters, onChange }) { | |
mode={filter.multiple ? 'multiple' : 'default'} | ||
value={isArray(filter.current) ? | ||
map(filter.current, | ||
value => ({ key: `${indexOf(filter.values, value)}`, label: formatValue(value) })) : | ||
({ key: `${indexOf(filter.values, filter.current)}`, label: formatValue(filter.current) })} | ||
value => ({ key: `${indexOf(filter.values, value)}`, label: formatColumnValue(value) })) : | ||
({ key: `${indexOf(filter.values, filter.current)}`, label: formatColumnValue(filter.current) })} | ||
allowClear={filter.multiple} | ||
filterOption={(searchText, option) => includes(toLower(option.props.children), toLower(searchText))} | ||
optionFilterProp="children" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Took the opportunity to simplify this |
||
showSearch | ||
onChange={values => onChange(filter, values)} | ||
> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
import moment from 'moment'; | ||
import { capitalize as _capitalize, isEmpty } from 'lodash'; | ||
import { formatDate, formatDateTime } from './datetime'; | ||
|
||
export const IntervalEnum = { | ||
NEVER: 'Never', | ||
|
@@ -168,3 +169,18 @@ export function join(arr) { | |
|
||
return arr.join(' / '); | ||
} | ||
|
||
export function formatColumnValue(value, columnType = null) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just moved this from |
||
if (moment.isMoment(value)) { | ||
if (columnType === 'date') { | ||
return formatDate(value); | ||
} | ||
return formatDateTime(value); | ||
} | ||
|
||
if (typeof value === 'boolean') { | ||
return value.toString(); | ||
} | ||
|
||
return value; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React, { useState, useEffect } from 'react'; | ||
import { find, pick, map, mapValues } from 'lodash'; | ||
import PivotTableUI from 'react-pivottable/PivotTableUI'; | ||
import { RendererPropTypes } from '@/visualizations'; | ||
import { formatColumnValue } from '@/filters'; | ||
|
||
import 'react-pivottable/pivottable.css'; | ||
import './renderer.less'; | ||
|
||
const VALID_OPTIONS = [ | ||
'data', | ||
'rows', | ||
'cols', | ||
'vals', | ||
'aggregatorName', | ||
'valueFilter', | ||
'sorters', | ||
'rowOrder', | ||
'colOrder', | ||
'derivedAttributes', | ||
'rendererName', | ||
'hiddenAttributes', | ||
'hiddenFromAggregators', | ||
'hiddenFromDragDrop', | ||
'menuLimit', | ||
'unusedOrientationCutoff', | ||
]; | ||
|
||
function formatRows({ rows, columns }) { | ||
return map(rows, row => mapValues(row, (value, key) => formatColumnValue(value, find(columns, { name: key }).type))); | ||
} | ||
|
||
export default function Renderer({ data, options, onOptionsChange }) { | ||
const [config, setConfig] = useState({ data: formatRows(data), ...options }); | ||
|
||
useEffect(() => { | ||
setConfig({ data: formatRows(data), ...options }); | ||
}, [data]); | ||
|
||
const onChange = (updatedOptions) => { | ||
const validOptions = pick(updatedOptions, VALID_OPTIONS); | ||
setConfig(validOptions); | ||
onOptionsChange(validOptions); | ||
}; | ||
|
||
return ( | ||
<div className="pivot-table-renderer"> | ||
<PivotTableUI {...pick(config, VALID_OPTIONS)} onChange={onChange} /> | ||
</div> | ||
); | ||
} | ||
|
||
Renderer.propTypes = RendererPropTypes; | ||
Renderer.defaultProps = { onOptionsChange: () => {} }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
@redash-gray: rgba(102, 136, 153, 1); | ||
|
||
// TODO: Change .pivot-table-renderer to .pivot-table-visualization-container | ||
.pivot-table-renderer { | ||
&.hide-controls { | ||
.pvtAxisContainer, .pvtRenderer, .pvtVals { | ||
display: none !important; | ||
} | ||
} | ||
} | ||
|
||
.pvtAxisContainer, .pvtVals { | ||
border: 1px solid fade(@redash-gray, 15%); | ||
background: #fff; | ||
} | ||
|
||
.pvtUi { | ||
td, th { | ||
padding: 5px; | ||
} | ||
|
||
li.ui-sortable-handle { | ||
padding: 5px 5px 5px 0; | ||
} | ||
} | ||
|
||
.pvtAxisContainer li span.pvtAttr { | ||
background: fade(@redash-gray, 10%); | ||
border: 1px solid fade(@redash-gray, 15%); | ||
border-radius: 3px; | ||
} | ||
|
||
.pvtCheckContainer { | ||
border-top: 1px solid fade(@redash-gray, 15%); | ||
border-bottom: 1px solid fade(@redash-gray, 15%); | ||
} | ||
|
||
.pvtCheckContainer p { | ||
margin: 2px; | ||
line-height: 1; | ||
} | ||
|
||
.pvtTriangle { | ||
color: fade(@redash-gray, 90%); | ||
} | ||
|
||
table.pvtTable thead tr th, table.pvtTable tbody tr th { | ||
background-color: fade(@redash-gray, 10%); | ||
border: 1px solid #ced8dc; | ||
} | ||
|
||
table.pvtTable tbody tr td { | ||
border: 1px solid #ced8dc; | ||
} | ||
|
||
.pvtFilterBox { | ||
border: 1px solid fade(@redash-gray, 15%); | ||
border-radius: 3px; | ||
box-shadow: fade(@redash-gray, 15%) 0px 4px 9px -3px; | ||
|
||
button { | ||
background-color: rgba(102, 136, 153, 0.15); | ||
margin-right: 5px; | ||
border: 1px solid transparent; | ||
padding: 3px 6px; | ||
font-size: 13px; | ||
line-height: 1.42857143; | ||
border-radius: 3px; | ||
|
||
&:hover { | ||
background-color: rgba(102, 136, 153, 0.25); | ||
} | ||
} | ||
|
||
input[type='text'] { | ||
width: 90%; | ||
margin: 0 auto 10px; | ||
height: 35px; | ||
padding: 6px 12px; | ||
border: 1px solid #e8e8e8; | ||
border-radius: 3px; | ||
} | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this related to this PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I faced an issue with the react version, it doesn't handle Moment values as the jQuery version does. The jQuery tries to stringfy it, while the react version just breaks the whole thing.
So I was thinking about moving the logic we have to normalize row values for Filters somewhere shared and use it here as well.