Skip to content

Commit

Permalink
Merge branch 'profiler-histogram'
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrb24
mrb24 committed Sep 15, 2020
2 parents 94db764 + cf148f3 commit 6e26bec
Show file tree
Hide file tree
Showing 5 changed files with 242 additions and 215 deletions.
199 changes: 86 additions & 113 deletions src/core/components/spreadsheet/ColumnView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ import { Table} from 'react-bootstrap';
import { profile } from './StatisticsUtils';

import {
CartesianGrid,
Tooltip,
XAxis,
YAxis,
BarChart,
Bar,
Legend,
CartesianGrid,
Tooltip,
XAxis,
YAxis,
BarChart,
Bar,
Legend,
} from 'recharts';
import styled from 'styled-components';
const Centered = styled.div`
Expand All @@ -48,128 +48,101 @@ class ColumnView extends React.Component {
static propTypes = {
dataset: PropTypes.object.isRequired,
}

render() {
const { dataset} = this.props;

const profiledData = profile (dataset);

const profiledData = (dataset.properties == null || Object.keys(dataset.properties).length === 0) ? profile(dataset) : dataset.properties;
const columns = dataset.columns;
// Grid header
let header = [<RowIndexCell key={-1} value=' ' />];
for (let cidx = 0; cidx < columns.length; cidx++) {
const column = columns[cidx];
const dataPlot_ = profiledData != null
? profiledData.find( item => {
return item.column.id === column.id;
})
:
[{}];

let dataPlot_ = [{}];
for (let property of profiledData.columns){
if (property.column.id === column.id){
dataPlot_= property;
break;
}
}
header.push(
<tr key={'rowse_' + column.id}>
<td key={'rows_' + column.name} style={{width: '20%'}}>
<h4> { column.name } </h4>
</td>
<td key={'rows_cf' + column.name} style={{width: '15%'}}>
<button
className="btn btn-secondary float-right"
disabled={true}
style={{ backgroundColor: '#e3e3e3', borderColor: '#cfcfcf', borderRadius: '4px'}}
>
{ column.type }
</button>
</td>
<td key={column.name} style={{width: '30%'}}>
<div className="card mb-4" style={{overflow: 'auto'}}>
<Centered>
<BarChart
width={250}
height={180}
data={dataPlot_.values}
<tr key={'rowse_' + column.id}>
<td key={'rows_' + column.name} style={{width: '20%'}}>
<h4> { column.name } </h4>
</td>
<td key={'rows_cf' + column.name} style={{width: '15%'}}>
<button
className="btn btn-secondary float-right"
disabled={true}
style={{ backgroundColor: '#e3e3e3', borderColor: '#cfcfcf', borderRadius: '4px'}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="count" fill="steelblue" />
</BarChart>
</Centered>
</div>
</td>
<td key={'rows_' + column.name} style={{width: '35%'}}>
{
column.type === 'varchar' || column.type === 'categorical' || column.type === 'boolean'
?
<div className="row">
<ul style={{ listStyle: 'none', columnCount: 2, columnGap: 10 }}>
{dataPlot_.values.length && <li>Unique Values</li>}
{dataPlot_.values.length && <li>Most Common</li>}

{dataPlot_.values.length && (
<li>{dataPlot_.values.length}</li>
)}
{dataPlot_.values.length && (
<li>{}</li>
)}
</ul>
</div>
:
dataPlot_.stats ?
<div className="row">
<ul style={{ listStyle: 'none', columnCount: 2, columnGap: 10 }}>
{dataPlot_.stats.max && <li>Maximun</li>}
{dataPlot_.stats.min && <li>Minimun</li>}
{dataPlot_.stats.mean && <li>Mean</li>}
{dataPlot_.stats.stdDev && <li>Std Deviation</li>}

{dataPlot_.stats.max && (
<li>{dataPlot_.stats.max}</li>
)}
{dataPlot_.stats.min && (
<li>{dataPlot_.stats.min}</li>
)}
{dataPlot_.stats.mean && (
<li>{dataPlot_.stats.mean.toFixed(2)}</li>
)}
{dataPlot_.stats.stdDev && (
<li>{dataPlot_.stats.stdDev.toFixed(2)}</li>
)}
</ul>
{/* <div className="col-xs-6">
<ul style={{listStyle: 'none'}}>
<li><span>Maximun</span></li>
<li><span>Minimun </span></li>
<li><span>Mean </span></li>
<li><span>Std. Deviation </span></li>
</ul>
{ column.type }
</button>
</td>
<td key={column.name} style={{width: '30%'}}>
<div className="card mb-4" style={{overflow: 'auto'}}>
<Centered>
<BarChart
width={250}
height={180}
data={dataPlot_.values}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="count" fill="steelblue" />
</BarChart>
</Centered>
</div>
<div className="col-xs-6" style={{textAlign: 'right'}}>
<ul style={{listStyle: 'none'}}>
<li><span>{ dataPlot_.stats.max}</span></li>
<li><span>{ dataPlot_.stats.min}</span></li>
<li><span>{dataPlot_.stats.mean != null ?
dataPlot_.stats.mean.toFixed(2) : null}</span></li>
<li><span>{ dataPlot_.stats.stdDev != null ?
dataPlot_.stats.stdDev.toFixed(2) : null}</span></li>
</ul>
</div> */}
</div>
:
<div/>
}
</td>
</tr>
<td key={'rows_' + column.name} style={{width: '35%'}}>
{
column.type === 'string' || column.type === 'varchar' || column.type === 'categorical' || column.type === 'boolean'
?
<div className="row">
<ul style={{ listStyle: 'none', columnCount: 2, columnGap: 10 }}>
{dataPlot_.distinctValueCount != null && <li>Unique Values</li>}
{dataPlot_.count != null && <li>Total Values</li>}
{dataPlot_.distinctValueCount != null && (<li>{dataPlot_.distinctValueCount}</li>)}
{dataPlot_.count != null && (<li>{dataPlot_.count}</li>)}
</ul>
</div>
:
dataPlot_ ?
<div className="row">
<ul style={{ listStyle: 'none', columnCount: 2, columnGap: 10 }}>
{dataPlot_.max != null && <li>Maximum</li>}
{dataPlot_.min != null &&<li>Minimum</li>}
{dataPlot_.mean != null && <li>Mean</li>}
{dataPlot_.stdDev != null && <li>Std Deviation</li>}
{dataPlot_.sum != null && <li>Sum</li>}
{dataPlot_.distinctValueCount != null && <li>Unique Values</li>}
{dataPlot_.count != null && <li>Total Values</li>}
{dataPlot_.max != null && (<li>{dataPlot_.max}</li>)}
{dataPlot_.min != null && (<li>{dataPlot_.min}</li>)}
{dataPlot_.mean != null && (<li>{dataPlot_.mean.toFixed(2)}</li>)}
{dataPlot_.stdDev != null && (<li>{dataPlot_.stdDev.toFixed(2)}</li>)}
{dataPlot_.sum != null && (<li>{dataPlot_.sum.toFixed(2)}</li>)}
{dataPlot_.distinctValueCount != null && (<li>{dataPlot_.distinctValueCount}</li>)}
{dataPlot_.count != null && (<li>{dataPlot_.count}</li>)}
</ul>
</div>
:
<div/>
}
</td>
</tr>
);
}
header = (<tbody>{header}</tbody>);
return (
<div style={{maxHeight: 400, minHeight: 400, overflow: 'auto' }}>
<Table>
{header}
</Table>
</div>
<div style={{maxHeight: 400, minHeight: 400, overflow: 'auto' }}>
<Table>
{header}
</Table>
</div>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/core/components/spreadsheet/DatasetView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ class DatasetView extends React.Component {
key={column.id}
column={column}
columnIndex={cidx}
summaryPlot={this.state.typeView === 2 ? true : false}
summaryPlot={this.state.typeView === 2}
/>
);
}
Expand Down

0 comments on commit 6e26bec

Please sign in to comment.