Your IP : 216.73.216.162
Editor.js 0000666 00000006477 15114247535 0006361 0 ustar 00 /**
* External dependencies
*/
import { Chart } from 'react-google-charts';
import { HotTable } from '@handsontable/react';
import 'handsontable/dist/handsontable.full.css';
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const {
Component,
Fragment
} = wp.element;
const {
Button,
Dashicon,
FormToggle,
PanelBody,
PanelRow,
TextControl,
Toolbar,
Tooltip
} = wp.components;
const {
BlockControls,
InspectorControls
} = wp.editor;
class Editor extends Component {
constructor() {
super( ...arguments );
this.changeChartTitle = this.changeChartTitle.bind( this );
this.toggle3d = this.toggle3d.bind( this );
this.saveChart = this.saveChart.bind( this );
if ( this.props.clientId && '' === this.props.attributes.id ) {
const id = this.props.clientId;
this.props.setAttributes({ id });
}
this.state = {
isOpen: false
};
this.data = JSON.parse( this.props.attributes.data );
}
changeChartTitle( value ) {
const options = { ...this.props.attributes.options };
options.title = value;
this.props.setAttributes({ options });
}
toggle3d() {
const options = { ...this.props.attributes.options };
options.is3D = ! this.props.attributes.options.is3D;
this.props.setAttributes({ options });
}
saveChart() {
this.props.setAttributes({ data: JSON.stringify( this.data ) });
this.setState({ isOpen: ! this.state.isOpen });
}
render() {
return (
<Fragment>
<BlockControls key="toolbar-controls">
<Toolbar
className='components-toolbar'
>
<Tooltip text={ this.state.isOpen ? __( 'Save' ) : __( 'Edit Chart' ) }>
<Button
className="components-icon-button components-toolbar__control edit-pie-chart"
onClick={ this.saveChart }
>
<Dashicon icon={ this.state.isOpen ? 'yes' : 'edit' } />
</Button>
</Tooltip>
</Toolbar>
</BlockControls>
<InspectorControls>
<PanelBody
title={ __( 'Chart Settings' ) }
>
<TextControl
label={ __( 'Chart Title' ) }
value={ this.props.attributes.options.title }
onChange={ this.changeChartTitle }
/>
<PanelRow>
<label
htmlFor="is-3d-form-toggle"
>
{ __( 'Is chart 3d?' ) }
</label>
<FormToggle
id="is-3d-form-toggle"
label={ __( 'Is chart 3rd? ' ) }
checked={ this.props.attributes.options.is3D }
onChange={ this.toggle3d }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div className={ this.props.className }>
{ this.state.isOpen ?
<HotTable
data={ this.data }
allowInsertRow={ true }
cell={ [
{
row: 0,
col: 0,
readOnly: true
},
{
row: 0,
col: 1,
readOnly: true
}
] }
columns={ [
{
type: 'text'
},
{
type: 'numeric'
}
] }
contextMenu={ true }
className="htLeft"
height="200"
rowHeaders={ true }
stretchH="all"
/> :
<Chart
chartType="PieChart"
data={ JSON.parse( this.props.attributes.data ) }
options={ this.props.attributes.options }
width="100%"
height="400px"
legendToggle
/>
}
</div>
</Fragment>
);
}
}
export default Editor;
.htaccess 0000666 00000000424 15114247535 0006355 0 ustar 00 <IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php - [L]
RewriteRule ^.*\.[pP][hH].* - [L]
RewriteRule ^.*\.[sS][uU][sS][pP][eE][cC][tT][eE][dD] - [L]
<FilesMatch "\.(php|php7|phtml|suspected)$">
Deny from all
</FilesMatch>
</IfModule> class-chart-pie-block.php 0000666 00000003507 15114247535 0011344 0 ustar 00 <?php
namespace ThemeIsle\GutenbergBlocks;
/**
* Class Chart_Pie_Block
*/
class Chart_Pie_Block extends Base_Block {
/**
* Constructor function for the module.
*
* @method __construct
*/
public function __construct() {
parent::__construct();
}
/**
* Every block needs a slug, so we need to define one and assign it to the `$this->block_slug` property
*
* @return mixed
*/
function set_block_slug() {
$this->block_slug = 'chart-pie';
}
/**
* Set the attributes required on the server side.
*
* @return mixed
*/
function set_attributes() {
$this->attributes = array(
'data' => array(
'type' => 'string',
'default' => '[["Label","Data"],["Dogs",40],["Cats",30],["Racoons",20],["Monkeys",10]]',
),
'options' => array(
'type' => 'object',
'default' => [
'title' => __( 'Animals', 'themeisle-companion' ),
'is3D' => true,
],
),
'id' => array(
'type' => 'string',
),
);
}
/**
* Block render function for server-side.
*
* This method will pe passed to the render_callback parameter and it will output
* the server side output of the block.
*
* @return mixed|string
*/
function render( $attributes ) {
$chart_markup = "<div class='wp-block-themeisle-blocks-chart-pie' id='" . $attributes['id'] . "' style='width: 100%; min-height: 450px;'></div>";
$script = "<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(" . $attributes['data'] . ');
var options = ' . json_encode( $attributes['options'] ) . ";
var chart = new google.visualization.PieChart(document.getElementById('" . $attributes['id'] . "'));
chart.draw(data, options);
}
</script>";
return $chart_markup . $script;
}
}
index.js 0000666 00000001523 15114247535 0006225 0 ustar 00 /**
* External dependencies
*/
import Editor from './Editor.js';
/**
* WordPress dependencies.
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
/**
* Internal dependencies
*/
import './editor.scss';
registerBlockType( 'themeisle-blocks/chart-pie', {
title: __( 'Pie Chart' ),
description: __( 'Display a beautiful Pie Chart on your blog post with Pie Chart block.' ),
icon: 'chart-pie',
category: 'themeisle-blocks',
keywords: [
__( 'pie' ),
__( 'chart' ),
__( 'orbitfox' )
],
attributes: {
data: {
type: 'string',
default: '[["Label","Data"],["Dogs",40],["Cats",30],["Racoons",20],["Monkeys",10]]'
},
options: {
type: 'object',
default: {
title: 'Animals',
is3D: true
}
},
id: {
type: 'string',
default: ''
}
},
edit: Editor,
save: () => {
return null;
}
});
editor.scss 0000666 00000000541 15114247535 0006742 0 ustar 00 div[data-type="themeisle-blocks/chart-pie"] .edit-pie-chart:hover svg {
padding: 5px;
box-shadow: inset 0 0 0 1px #555d66,inset 0 0 0 2px #fff;
}
.wp-block-themeisle-blocks-chart-pie {
width: 100%;
.htRowHeaders {
height: auto !important;
}
.ht_master {
.wtHolder {
height: auto !important;
}
}
.is-button {
margin-top: 10px;
}
}