Skip to content

DataTable support #458

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.

Sign up for GitHub

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

Merged
merged 10 commits into from
Jul 18, 2019
Merged

DataTable support #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f0df73b
Merge pull request #3 from Codeinwp/master
HardeepAsrani Jul 10, 2019
aba9b3f
[WIP]: Made DataTable work
HardeepAsrani Jul 13, 2019
a0c1df7
[WIP] add sidebar options
HardeepAsrani Jul 13, 2019
7dc1ace
Merge branch 'gutenberg-integration' into 3.3.0
HardeepAsrani Jul 13, 2019
3d35af3
Merge pull request #5 from Codeinwp/3.3.0
HardeepAsrani Jul 13, 2019
f98ddb5
Merge pull request #6 from Codeinwp/3.3.0
HardeepAsrani Jul 15, 2019
db89231
Add styling settings to DataTable
HardeepAsrani Jul 16, 2019
ac99b97
Complete DataTable integration
HardeepAsrani Jul 17, 2019
f4c5adc
Added DataTable
HardeepAsrani Jul 18, 2019
f116a8c
Grunt fix
HardeepAsrani Jul 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions classes/Visualizer/Gutenberg/Block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ public function enqueue_gutenberg_scripts() {

// Enqueue the bundled block JS file
wp_enqueue_script( 'handsontable', $handsontableJS );
wp_enqueue_script( 'visualizer-gutenberg-block', $blockPath, array( 'wp-api', 'handsontable' ), $version, true );
wp_enqueue_script( 'visualizer-gutenberg-block', $blockPath, array( 'wp-api', 'handsontable', 'visualizer-datatables', 'moment' ), $version, true );

$type = 'community';

Expand All @@ -94,12 +94,13 @@ public function enqueue_gutenberg_scripts() {
'isPro' => $type,
'proTeaser' => Visualizer_Plugin::PRO_TEASER_URL,
'absurl' => VISUALIZER_ABSURL,
'charts' => Visualizer_Module_Admin::_getChartTypesLocalized(),
);
wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );

// Enqueue frontend and editor block styles
wp_enqueue_style( 'handsontable', $handsontableCSS );
wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, '', $version );
wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, array( 'visualizer-datatables' ), $version );
}
/**
* Hook server side rendering into render callback
Expand Down
2 changes: 1 addition & 1 deletion classes/Visualizer/Gutenberg/build/block.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 18 additions & 18 deletions classes/Visualizer/Gutenberg/build/block.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added classes/Visualizer/Gutenberg/build/chart_types_june2019_g.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion classes/Visualizer/Gutenberg/build/handsontable.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added classes/Visualizer/Gutenberg/chart_types_june2019_g.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions classes/Visualizer/Gutenberg/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"eslint-config-wordpress": "^2.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^4.0.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.10.0",
"postcss-loader": "^3.0.0",
Expand Down
42 changes: 28 additions & 14 deletions classes/Visualizer/Gutenberg/src/Components/ChartRender.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
*/
import { Chart } from 'react-google-charts';

import DataTable from './DataTable.js';

import merge from 'merge';

import { compact, formatDate, isValidJSON } from '../utils.js';
Expand Down Expand Up @@ -34,13 +36,16 @@ class ChartRender extends Component {
}

render() {

let chart;

let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );

if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
chart = startCase( this.props.chart['visualizer-chart-type']);
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
if ( 'dataTable' === data['visualizer-chart-type']) {
chart = data['visualizer-chart-type'];
} else {
chart = startCase( this.props.chart['visualizer-chart-type']);
}
} else {
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
}
Expand All @@ -66,17 +71,26 @@ class ChartRender extends Component {
</Toolbar>
</BlockControls>

<Chart
chartType={ chart }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
compact( this.props.chart['visualizer-settings'])
}
height="500px"
/>
{ ( 'dataTable' === chart ) ? (
<DataTable
id={ this.props.id }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={ data['visualizer-settings'] }
/>
) : (
<Chart
chartType={ chart }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
compact( this.props.chart['visualizer-settings'])
}
height="500px"
/>
) }

</Fragment>
}
Expand Down
42 changes: 29 additions & 13 deletions classes/Visualizer/Gutenberg/src/Components/ChartSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
*/
import { Chart } from 'react-google-charts';

import DataTable from './DataTable.js';

import FileImport from './Import/FileImport.js';

import RemoteImport from './Import/RemoteImport.js';
Expand Down Expand Up @@ -57,8 +59,12 @@ class ChartSelect extends Component {

let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );

if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
chart = startCase( this.props.chart['visualizer-chart-type']);
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
if ( 'dataTable' === data['visualizer-chart-type']) {
chart = data['visualizer-chart-type'];
} else {
chart = startCase( this.props.chart['visualizer-chart-type']);
}
} else {
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
}
Expand Down Expand Up @@ -120,17 +126,27 @@ class ChartSelect extends Component {
<div className="visualizer-settings__chart">

{ ( null !== this.props.chart ) &&
<Chart
chartType={ chart }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
compact( this.props.chart['visualizer-settings'])
}
height="500px"
/>

( 'dataTable' === chart ) ? (
<DataTable
id={ this.props.id }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={ data['visualizer-settings'] }
/>
) : (
<Chart
chartType={ chart }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
compact( this.props.chart['visualizer-settings'])
}
height="500px"
/>
)
}

</div>
Expand Down
31 changes: 19 additions & 12 deletions classes/Visualizer/Gutenberg/src/Components/Charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
*/
import { Chart } from 'react-google-charts';

import DataTable from './DataTable.js';

import { formatDate, filterCharts } from '../utils.js';

/**
Expand Down Expand Up @@ -80,7 +82,6 @@ class Charts extends Component {
<div className="visualizer-settings__charts-grid">

{ ( Object.keys( charts ) ).map( i => {

const data = formatDate( charts[i]['chart_data']);

let title, chart;
Expand All @@ -107,23 +108,29 @@ class Charts extends Component {
}
}

if ( 'dataTable' === chart ) {
return;
}

return (
<div className="visualizer-settings__charts-single">

<div className="visualizer-settings__charts-title">
{ title }
</div>

<Chart
chartType={ chart }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={ filterCharts( data['visualizer-settings']) }
/>
{ ( 'dataTable' === chart ) ? (
<DataTable
id={ charts[i].id }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
chartsScreen={ true }
options={ filterCharts( data['visualizer-settings']) }
/>
) : (
<Chart
chartType={ chart }
rows={ data['visualizer-data'] }
columns={ data['visualizer-series'] }
options={ filterCharts( data['visualizer-settings']) }
/>
) }

<div
className="visualizer-settings__charts-controls"
Expand All @@ -138,7 +145,7 @@ class Charts extends Component {
}) }
</div>

{ ! chartsLoaded && (
{ ! chartsLoaded && 5 < charts.length && (
<Button
isPrimary
isLarge
Expand Down
Loading