Skip to content

Commit da1a4da

Browse files
contactashish13contactashish13
committed
Gutenberg: "Advanced Options" on certain charts break
1 parent 291d07f commit da1a4da

File tree

7 files changed

+149
-19
lines changed

7 files changed

+149
-19
lines changed

‎classes/Visualizer/Gutenberg/build/block.js

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎classes/Visualizer/Gutenberg/src/Components/Sidebar.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import RowCellSettings from './Sidebar/RowCellSettings.js';
2020
import ComboSettings from './Sidebar/ComboSettings.js';
2121
import SeriesSettings from './Sidebar/SeriesSettings.js';
2222
import SlicesSettings from './Sidebar/SlicesSettings.js';
23+
import BubbleSettings from './Sidebar/BubbleSettings.js';
2324
import ColumnSettings from './Sidebar/ColumnSettings.js';
2425
import LayoutAndChartArea from './Sidebar/LayoutAndChartArea.js';
2526
import FrontendActions from './Sidebar/FrontendActions.js';
@@ -113,10 +114,15 @@ class Sidebar extends Component {
113114
<ComboSettings chart={ this.props.chart } edit={ this.props.edit } />
114115
) }
115116

116-
{ ( -1 >= [ 'timeline', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
117+
{ ( -1 >= [ 'timeline', 'bubble', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
117118
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
118119
) }
119120

121+
{ ( 0 <= [ 'bubble' ].indexOf( type ) ) && (
122+
<BubbleSettings chart={ this.props.chart } edit={ this.props.edit } />
123+
) }
124+
125+
120126
{ ( 0 <= [ 'pie' ].indexOf( type ) ) && (
121127
<SlicesSettings chart={ this.props.chart } edit={ this.props.edit } />
122128
) }

‎classes/Visualizer/Gutenberg/src/Components/Sidebar/BubbleSettings.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { __ } = wp.i18n;
5+
6+
const { Component } = wp.element;
7+
8+
const { ColorPalette } = wp.blockEditor || wp.editor;
9+
10+
import { isChecked } from '../../utils.js';
11+
12+
const {
13+
CheckboxControl,
14+
BaseControl,
15+
PanelBody,
16+
TextControl
17+
} = wp.components;
18+
19+
class BubbleSettings extends Component {
20+
constructor() {
21+
super( ...arguments );
22+
}
23+
24+
componentDidMount() {
25+
26+
}
27+
28+
render() {
29+
30+
const settings = this.props.chart['visualizer-settings'];
31+
32+
return (
33+
<PanelBody
34+
title={ __( 'Bubble Settings' ) }
35+
initialOpen={ false }
36+
className="visualizer-advanced-panel"
37+
>
38+
39+
<TextControl
40+
label={ __( 'Opacity' ) }
41+
help={ __( 'The default opacity of the bubbles, where 0.0 is fully transparent and 1.0 is fully opaque.' ) }
42+
type="number"
43+
min="0"
44+
max="1"
45+
step="0.1"
46+
value={ settings.bubble.opacity }
47+
onChange={ e => {
48+
if ( ! settings.bubble ) {
49+
settings.bubble = {};
50+
}
51+
settings.bubble.opacity = e;
52+
this.props.edit( settings );
53+
} }
54+
/>
55+
56+
<BaseControl
57+
label={ __( 'Stroke Color' ) }
58+
>
59+
<ColorPalette
60+
value={ settings.bubble.stroke }
61+
onChange={ e => {
62+
if ( ! settings.bubble ) {
63+
settings.bubble = {};
64+
}
65+
settings.bubble.stroke = e;
66+
this.props.edit( settings );
67+
} }
68+
/>
69+
</BaseControl>
70+
71+
<CheckboxControl
72+
label={ __( 'Sort Bubbles by Size' ) }
73+
help={ __( 'If checked, sorts the bubbles by size so the smaller bubbles appear above the larger bubbles. If unchecked, bubbles are sorted according to their order in the table.' ) }
74+
checked={ isChecked( settings, 'sortBubblesBySize' ) }
75+
onChange={ e => {
76+
settings.sortBubblesBySize = e;
77+
this.props.edit( settings );
78+
} }
79+
/>
80+
81+
<TextControl
82+
label={ __( 'Size (max)' ) }
83+
help={ __( 'The size value (as appears in the chart data) to be mapped to sizeAxis.maxSize. Larger values will be cropped to this value.' ) }
84+
type="number"
85+
step="1"
86+
value={ settings.sizeAxis.maxValue }
87+
onChange={ e => {
88+
if ( ! settings.sizeAxis ) {
89+
settings.sizeAxis = {};
90+
}
91+
settings.sizeAxis.maxValue = e;
92+
this.props.edit( settings );
93+
} }
94+
/>
95+
96+
<TextControl
97+
label={ __( 'Size (min)' ) }
98+
help={ __( 'The size value (as appears in the chart data) to be mapped to sizeAxis.minSize. Smaller values will be cropped to this value.' ) }
99+
type="number"
100+
step="1"
101+
value={ settings.sizeAxis.minValue }
102+
onChange={ e => {
103+
if ( ! settings.sizeAxis ) {
104+
settings.sizeAxis = {};
105+
}
106+
settings.sizeAxis.minValue = e;
107+
this.props.edit( settings );
108+
} }
109+
/>
110+
111+
</PanelBody>
112+
);
113+
}
114+
}
115+
116+
export default BubbleSettings;

‎classes/Visualizer/Gutenberg/src/Components/Sidebar/GeneralSettings.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ class GeneralSettings extends Component {
230230
</PanelBody>
231231
) }
232232

233-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'dataTable' ].indexOf( type ) ) && (
233+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'dataTable', 'timeline' ].indexOf( type ) ) && (
234234
<PanelBody
235235
title={ __( 'Tooltip' ) }
236236
className="visualizer-inner-sections"

‎classes/Visualizer/Gutenberg/src/Editor.js

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -379,15 +379,18 @@ class Editor extends Component {
379379
fieldName = 'slices';
380380
}
381381

382-
Object.keys( data['visualizer-settings'][fieldName])
383-
.map( i => {
384-
if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
385-
if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
386-
delete data['visualizer-settings'][fieldName][i].temp;
387-
}
388-
}
389-
}
390-
);
382+
// no series for bubble and timeline charts.
383+
if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
384+
Object.keys( data['visualizer-settings'][fieldName])
385+
.map( i => {
386+
if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
387+
if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
388+
delete data['visualizer-settings'][fieldName][i].temp;
389+
}
390+
}
391+
}
392+
);
393+
}
391394

392395
apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
393396
( data ) => {

‎classes/Visualizer/Gutenberg/src/utils.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,8 @@ export const CSVToArray = ( strData, strDelimiter ) => {
9292

9393
return ( arrData );
9494
};
95+
96+
97+
export const isChecked = ( settings, param ) => {
98+
return true === settings[param] || 'true' === settings[param] || '1' === settings[param] || 1 === settings[param];
99+
};

‎classes/Visualizer/Render/Sidebar/Type/GoogleCharts/Bubble.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ protected function _renderBubbleSettings() {
8181
self::_renderColorPickerItem(
8282
esc_html__( 'Stroke Color', 'visualizer' ),
8383
'bubble[stroke]',
84-
isset( $this->bubble[ $index ]['stroke'] ) ? $this->bubble[ $index ]['stroke'] : null,
84+
isset( $this->bubble['stroke'] ) ? $this->bubble['stroke'] : null,
8585
null
8686
);
8787

@@ -90,7 +90,7 @@ protected function _renderBubbleSettings() {
9090
'sortBubblesBySize',
9191
$this->sortBubblesBySize ? 1 : 0,
9292
1,
93-
esc_html__( 'If true, sorts the bubbles by size so the smaller bubbles appear above the larger bubbles. If false, bubbles are sorted according to their order in the DataTable.', 'visualizer' )
93+
esc_html__( 'If checked, sorts the bubbles by size so the smaller bubbles appear above the larger bubbles. If unchecked, bubbles are sorted according to their order in the table.', 'visualizer' )
9494
);
9595

9696
self::_renderTextItem(

0 commit comments

Comments
 (0)