Skip to content

Commit 7d29b90

Browse files
contactashish13contactashish13
authored
Merge pull request #452 from contactashish13/issue-373
add user friendliness
2 parents 022df77 + 53061bb commit 7d29b90

File tree

6 files changed

+31
-60
lines changed

6 files changed

+31
-60
lines changed

‎classes/Visualizer/Module/Utility.php

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ class Visualizer_Module_Utility extends Visualizer_Module {
3131
const NAME = __CLASS__;
3232

3333
/**
34-
* Some default chart colors.
34+
* Some default distinct colors.
3535
*
3636
* @since 3.3.0
3737
*
3838
* @access private
3939
* @var _CHART_COLORS
4040
*/
4141
private static $_CHART_COLORS = array(
42-
'#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC',
42+
'#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080',
4343
);
4444

4545

@@ -219,6 +219,11 @@ private static function set_defaults_chartjs( $chart, $post_status ) {
219219
break;
220220
}
221221

222+
if ( $post_status === 'auto-draft' ) {
223+
// the charts are huge in size so let's always get them down to 50%.
224+
$settings['width'] = $settings['height'] = '50%';
225+
}
226+
222227
if ( $attributes ) {
223228
$settings[ $name ] = $attributes;
224229
update_post_meta( $chart->ID, Visualizer_Plugin::CF_SETTINGS, $settings );

‎classes/Visualizer/Render/Sidebar.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -438,8 +438,8 @@ protected function _renderTooltipSettigns() {
438438
* @access protected
439439
*/
440440
protected function _renderViewSettings() {
441-
self::_renderGroupStart( esc_html__( 'Layout & Chart Area', 'visualizer' ) );
442-
self::_renderSectionStart( esc_html__( 'Layout', 'visualizer' ), false );
441+
self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
442+
self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
443443
self::_renderSectionDescription( esc_html__( 'Configure the total size of the chart. Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
444444

445445
echo '<div class="viz-section-item">';
@@ -458,7 +458,7 @@ protected function _renderViewSettings() {
458458
echo '</table>';
459459

460460
echo '<p class="viz-section-description">';
461-
esc_html_e( 'Determines the total width and height of the chart.', 'visualizer' );
461+
esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
462462
echo '</p>';
463463
echo '</div>';
464464

@@ -497,7 +497,7 @@ protected function _renderViewSettings() {
497497
echo '</div>';
498498
self::_renderSectionEnd();
499499

500-
self::_renderSectionStart( esc_html__( 'Chart Area', 'visualizer' ), false );
500+
self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
501501
self::_renderSectionDescription( esc_html__( 'Configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
502502

503503
echo '<div class="viz-section-item">';

‎classes/Visualizer/Render/Sidebar/ChartJS.php

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -355,8 +355,8 @@ protected function _renderManualConfigDescription() {
355355
* @access protected
356356
*/
357357
protected function _renderViewSettings() {
358-
self::_renderGroupStart( esc_html__( 'Layout & Chart Area', 'visualizer' ) );
359-
self::_renderSectionStart( esc_html__( 'Layout', 'visualizer' ), false );
358+
self::_renderGroupStart( esc_html__( 'Chart Size', 'visualizer' ) );
359+
self::_renderSectionStart();
360360
self::_renderSectionDescription( esc_html__( 'Configure the total size of the chart. Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
361361

362362
echo '<div class="viz-section-item">';
@@ -375,54 +375,7 @@ protected function _renderViewSettings() {
375375
echo '</table>';
376376

377377
echo '<p class="viz-section-description">';
378-
esc_html_e( 'Determines the total width and height of the chart.', 'visualizer' );
379-
echo '</p>';
380-
echo '</div>';
381-
382-
echo '<div class="viz-section-delimiter"></div>';
383-
384-
self::_renderSectionEnd();
385-
386-
self::_renderSectionStart( esc_html__( 'Chart Area', 'visualizer' ), false );
387-
self::_renderSectionDescription( esc_html__( 'Configure the placement and size of the chart area (where the chart itself is drawn, excluding axis and legends). Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
388-
389-
echo '<div class="viz-section-item">';
390-
echo '<a class="more-info" href="javascript:;">[?]</a>';
391-
echo '<b>', esc_html__( 'Left And Top Margins', 'visualizer' ), '</b>';
392-
393-
echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
394-
echo '<tr>';
395-
echo '<td class="viz-section-table-column">';
396-
echo '<input type="text" name="chartArea[left]" class="control-text" value="', $this->chartArea['left'] || $this->chartArea['left'] === '0' ? esc_attr( $this->chartArea['left'] ) : '', '" placeholder="20%">';
397-
echo '</td>';
398-
echo '<td class="viz-section-table-column">';
399-
echo '<input type="text" name="chartArea[top]" class="control-text" value="', $this->chartArea['top'] || $this->chartArea['top'] === '0' ? esc_attr( $this->chartArea['top'] ) : '', '" placeholder="20%">';
400-
echo '</td>';
401-
echo '</tr>';
402-
echo '</table>';
403-
404-
echo '<p class="viz-section-description">';
405-
esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
406-
echo '</p>';
407-
echo '</div>';
408-
409-
echo '<div class="viz-section-item">';
410-
echo '<a class="more-info" href="javascript:;">[?]</a>';
411-
echo '<b>', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '</b>';
412-
413-
echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
414-
echo '<tr>';
415-
echo '<td class="viz-section-table-column">';
416-
echo '<input type="text" name="chartArea[width]" class="control-text" value="', ! empty( $this->chartArea['width'] ) ? esc_attr( $this->chartArea['width'] ) : '', '" placeholder="60%">';
417-
echo '</td>';
418-
echo '<td class="viz-section-table-column">';
419-
echo '<input type="text" name="chartArea[height]" class="control-text" value="', ! empty( $this->chartArea['height'] ) ? esc_attr( $this->chartArea['height'] ) : '', '" placeholder="60%">';
420-
echo '</td>';
421-
echo '</tr>';
422-
echo '</table>';
423-
424-
echo '<p class="viz-section-description">';
425-
esc_html_e( 'Determines the width and hight of the chart area.', 'visualizer' );
378+
esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
426379
echo '</p>';
427380
echo '</div>';
428381
self::_renderSectionEnd();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ protected function _renderRedColorSettings() {
254254
* @access protected
255255
*/
256256
protected function _renderViewSettings() {
257-
self::_renderGroupStart( esc_html__( 'Layout & Chart Area', 'visualizer' ) );
257+
self::_renderGroupStart( esc_html__( 'Chart Size', 'visualizer' ) );
258258
self::_renderSectionStart();
259259
self::_renderSectionDescription( esc_html__( 'Configure the total size of the chart. Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
260260

@@ -274,7 +274,7 @@ protected function _renderViewSettings() {
274274
echo '</table>';
275275

276276
echo '<p class="viz-section-description">';
277-
esc_html_e( 'Determines the total width and height of the chart.', 'visualizer' );
277+
esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
278278
echo '</p>';
279279
echo '</div>';
280280
self::_renderSectionEnd();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ protected function _renderMagnifyingGlassSettings() {
358358
* @access protected
359359
*/
360360
protected function _renderViewSettings() {
361-
self::_renderGroupStart( esc_html__( 'Layout Settings', 'visualizer' ) );
361+
self::_renderGroupStart( esc_html__( 'Chart Size', 'visualizer' ) );
362362
self::_renderSectionStart();
363363
self::_renderSectionDescription( esc_html__( 'Configure the total size of the chart. Two formats are supported: a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage.', 'visualizer' ) );
364364

@@ -378,7 +378,7 @@ protected function _renderViewSettings() {
378378
echo '</table>';
379379

380380
echo '<p class="viz-section-description">';
381-
esc_html_e( 'Determines the total width and height of the chart.', 'visualizer' );
381+
esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
382382
echo '</p>';
383383
echo '</div>';
384384

‎js/render-chartjs.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,9 @@
104104
}
105105

106106
if(v.is_front == false){ // jshint ignore:line
107+
// this line needs to be included twice. This is not an error.
108+
// if this one is removed, the preview gets messed up.
109+
// if this line is included all the time, in this very place (out of the if), the front-end gets messed up.
107110
$.extend(settings, { responsive: true, maintainAspectRatio: false });
108111
}
109112

@@ -118,6 +121,16 @@
118121
options: settings
119122
});
120123

124+
// this line needs to be included twice. This is not an error.
125+
$.extend(settings, { responsive: true, maintainAspectRatio: false });
126+
127+
// chart area
128+
if(v.is_front == true){ // jshint ignore:line
129+
$('#' + id).css('position', 'relative');
130+
chartjs.canvas.parentNode.style.height = settings.height;
131+
chartjs.canvas.parentNode.style.width = settings.width;
132+
}
133+
121134
// allow user to extend the settings.
122135
$('body').trigger('visualizer:chart:settings:extend', {id: id, chart: chart, settings: settings});
123136

0 commit comments

Comments
 (0)