Skip to content
Snippets Groups Projects
Unverified Commit 0343f541 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

update table to handle api change

parent 49c4e5cf
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/reference/selectors.js
+ 10
− 0
View file @ 0343f541
......@@ -172,3 +172,13 @@ export const getIsDashboardModalOpen = (state, props) => state.reference.isDashb
export const getFieldFingerprint = (state) =>
state.reference.fieldFingerprint && state.reference.fieldFingerprint.fingerprint
export const getTableFingerprint = (state) =>
state.reference.tableFingerprint && state.reference.tableFingerprint.fingerprint
export const getTableConstituents = (state) =>
state.reference.tableFingerprint && (
Object.keys(state.reference.tableFingerprint.constituents).map(key =>
state.reference.tableFingerprint.constituents[key]
)
)
frontend/src/metabase/xray/containers/TableXRay.jsx
+ 31
− 174
View file @ 0343f541
......@@ -5,119 +5,23 @@ import { connect } from 'react-redux'
import { fetchTableFingerPrint } from 'metabase/reference/reference'
import {
getTableConstituents,
getTableFingerprint
} from 'metabase/reference/selectors'
import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
import SimpleHistogram from 'metabase/xray/SimpleHistogram'
import SimpleStat from 'metabase/xray/SimpleStat'
type Props = {
constituents: [],
fetchTableFingerPrint: () => void,
fingerprint: {}
fingerprint: {},
params: {
tableId: number
}
}
const FingerPrintList = ({ fingerprint }) =>
<div>
<ol className="full">
{ Object.keys(fingerprint).map(fieldName => {
const f = fingerprint[fieldName]
return (
<li key={fieldName}>
<h4>{fieldName}</h4>
<div>
<SimpleHistogram
data={f.histogram}
height={40}
gridLines={false}
legends={false}
/>
<ol className="Grid">
<li className="Grid-cell">
<SimpleStat name="Min" data={f.min} />
</li>
<li className="Grid-cell">
<SimpleStat name="Skewness" data={f.skewness} />
</li>
<li className="Grid-cell">
<SimpleStat name="Mean" data={f.mean} />
</li>
</ol>
</div>
</li>
)
})}
</ol>
</div>
const FingerprintGrid = ({ fingerprint, fields, distribution }) =>
<div className="full">
<ol>
<li className="border-bottom border-dark">
<ol className="Grid Grid--gutters">
<li className="Grid-cell">
<h3>Field</h3>
</li>
{ fields.map(field =>
<li className="Grid-cell">
<h3>{field}</h3>
</li>
)}
{ distribution && (
<li className="Grid-cell">
<h3>Distribution</h3>
</li>
)}
</ol>
</li>
{ Object.keys(fingerprint).map(key => {
const field = fingerprint[key]
return (
<li className="border-bottom">
<ol className="Grid Grid--gutters">
<li className="Grid-cell">
<a className="link text-bold">{key}</a>
</li>
{ fields.map(f =>
<li className="Grid-cell">
{ field[f] }
</li>
)}
{ /*
<li className="Grid-cell">
{ field['has-nils?'] }
</li>
<li className="Grid-cell">
{ field['all-distinct?'] }
</li>
<li className="Grid-cell">
{ field.mean }
</li>
<li className="Grid-cell">
{ field.min }
</li>
<li className="Grid-cell">
{ field.max }
</li>
<li className="Grid-cell">
{ field.median }
</li>
*/}
{ distribution && (
<li className="Grid-cell">
<SimpleHistogram
data={field.histogram}
gridLines={false}
height={30}
legends={false}
showValues={false}
/>
</li>
)}
</ol>
</li>
)
})}
</ol>
</div>
class TableXRay extends Component {
props: Props
......@@ -131,91 +35,44 @@ class TableXRay extends Component {
render () {
const { fingerprint } = this.props
const { constituents } = this.props
return (
<div className="wrapper" style={{ marginLeft: '6em', marginRight: '6em'}}>
<div className="my4 py4">
<h1>Xray</h1>
</div>
<LoadingAndErrorWrapper loading={!fingerprint}>
{ () =>
<div className="full">
{ this.state.grid ?(
<div className="mt3">
<div className="my4">
<h2 className="py3 my3">Overview</h2>
<FingerprintGrid
fingerprint={fingerprint}
fields={['count', 'min', 'max', 'mean', 'median']}
distribution={false}
/>
</div>
<div className="my4">
<h2 className="py3 my3">I am a cool math wizard</h2>
<FingerprintGrid
fingerprint={fingerprint}
fields={['skewness', 'has-nils?', 'all-distinct?', 'range-vs-spread', 'sum-of-squares', 'range-vs-sd']}
distribution={true}
/>
</div>
{ fingerprint['CREATED_AT'] && (
<div className="my4">
<h2 className="py3 my3">Time breakdown</h2>
<div className="my3">
<h4>Hour</h4>
<SimpleHistogram
data={fingerprint['CREATED_AT']['histogram-hour']}
height={60}
/>
</div>
<div className="my3">
<h4>Day</h4>
<LoadingAndErrorWrapper loading={!constituents}>
{ () =>
<ol>
{ constituents.map(c => {
console.log(c)
return (
<li>
<div className="full">
{c.field.display_name}
<SimpleHistogram
data={fingerprint['CREATED_AT']['histogram-day']}
height={60}
data={c.histogram}
/>
</div>
<div className="my3">
<h4>Month</h4>
<SimpleHistogram
data={fingerprint['CREATED_AT']['histogram-month']}
height={60}
/>
</div>
<div className="my3">
<h4>Quarter</h4>
<SimpleHistogram
data={fingerprint['CREATED_AT']['histogram-quarter']}
height={60}
/>
</div>
</div>
)}
</div>
)
: (
<FingerPrintList fingerprint={fingerprint} />
)}
<pre>
<code>
{ JSON.stringify(fingerprint, null, 2) }
</code>
</pre>
</div>
}
</LoadingAndErrorWrapper>
</li>
)
})}
</ol>
}
</LoadingAndErrorWrapper>
</div>
)
}
}
const mapStateToProps = state => ({
fingerprint: state.reference.tableFingerprint,
fingerprint: getTableFingerprint(state),
constituents: getTableConstituents(state)
})
const mapDispatchToProps = {
fetchTableFingerPrint: fetchTableFingerPrint
fetchTableFingerPrint
}
export default connect(mapStateToProps, mapDispatchToProps)(TableXRay)
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment