Skip to content

Commit 302522c

Browse files
rodica-andronacherodica-andronache
authored
Merge pull request #274 from contactashish13/issue-251
Add animations to chart #251
2 parents 056b3c4 + ec6cbc6 commit 302522c

File tree

5 files changed

+124
-40
lines changed

5 files changed

+124
-40
lines changed

‎classes/Visualizer/Render/Sidebar.php

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,14 @@ abstract class Visualizer_Render_Sidebar extends Visualizer_Render {
8383
*/
8484
protected $_alignments;
8585

86+
/**
87+
* Whether this chart supports animation or not.
88+
*
89+
* @access protected
90+
* @var bool
91+
*/
92+
protected $_supportsAnimation = true;
93+
8694
/**
8795
* Constructor.
8896
*
@@ -311,9 +319,58 @@ protected function _renderGeneralSettings() {
311319
self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
312320
$this->_renderTooltipSettigns();
313321
self::_renderSectionEnd();
322+
323+
$this->_renderAnimationSettings();
324+
314325
self::_renderGroupEnd();
315326
}
316327

328+
/**
329+
* Renders animation settings section.
330+
*
331+
* @access protected
332+
*/
333+
protected function _renderAnimationSettings() {
334+
if ( ! $this->_supportsAnimation ) {
335+
return;
336+
}
337+
338+
self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
339+
340+
self::_renderCheckboxItem(
341+
esc_html__( 'Animate on startup', 'visualizer' ),
342+
'animation[startup]',
343+
$this->animation['startup'],
344+
true,
345+
esc_html__( 'Determines if the chart will animate on the initial draw.', 'visualizer' )
346+
);
347+
348+
self::_renderTextItem(
349+
esc_html__( 'Duration', 'visualizer' ),
350+
'animation[duration]',
351+
isset( $this->animation['duration'] ) ? $this->animation['duration'] : 0,
352+
esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
353+
0,
354+
'number'
355+
);
356+
357+
self::_renderSelectItem(
358+
esc_html__( 'Easing', 'visualizer' ),
359+
'animation[easing]',
360+
isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
361+
array(
362+
'linear' => esc_html__( 'Constant speed', 'visualizer' ),
363+
'in' => esc_html__( 'Start slow and speed up', 'visualizer' ),
364+
'out' => esc_html__( 'Start fast and slow down', 'visualizer' ),
365+
'inAndOut' => esc_html__( 'Start slow, speed up, then slow down', 'visualizer' ),
366+
),
367+
esc_html__( 'The easing function applied to the animation.', 'visualizer' )
368+
);
369+
370+
self::_renderSectionEnd();
371+
372+
}
373+
317374
/**
318375
* Renders tooltip settings section.
319376
*

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

Lines changed: 59 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,31 @@ class Visualizer_Render_Sidebar_Type_Gauge extends Visualizer_Render_Sidebar {
3838
* @access protected
3939
*/
4040
protected function _toHTML() {
41+
$this->_supportsAnimation = false;
4142
$this->_renderGeneralSettings();
42-
$this->_renderGreenColorSettings();
43-
$this->_renderYellowColorSettings();
44-
$this->_renderRedColorSettings();
43+
$this->_renderGaugeSettings();
4544
$this->_renderViewSettings();
4645
$this->_renderAdvancedSettings();
4746
}
4847

4948
/**
50-
* Renders chart general settings group.
49+
* Renders Gauge settings group.
50+
*
51+
* @since 1.0.0
52+
*
53+
* @access protected
54+
*/
55+
protected function _renderGaugeSettings() {
56+
self::_renderGroupStart( esc_html__( 'Gauge Settings', 'visualizer' ) );
57+
$this->_renderTickSettings();
58+
$this->_renderGreenColorSettings();
59+
$this->_renderYellowColorSettings();
60+
$this->_renderRedColorSettings();
61+
self::_renderGroupEnd();
62+
}
63+
64+
/**
65+
* Renders general settings group.
5166
*
5267
* @since 1.0.0
5368
*
@@ -66,39 +81,49 @@ protected function _renderGeneralSettings() {
6681
self::_renderSectionEnd();
6782

6883
self::_renderSectionStart( esc_html__( 'Gauge Settings', 'visualizer' ), false );
84+
}
6985

70-
echo '<div class="viz-section-item">';
71-
echo '<a class="more-info" href="javascript:;">[?]</a>';
72-
echo '<b>', esc_html__( 'Min And Max Values', 'visualizer' ), '</b>';
86+
/**
87+
* Renders tick settings group.
88+
*
89+
* @since 1.0.0
90+
*
91+
* @access protected
92+
*/
93+
protected function _renderTickSettings() {
94+
self::_renderSectionStart( esc_html__( 'Tick Settings', 'visualizer' ), false );
7395

74-
echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
75-
echo '<tr>';
76-
echo '<td class="viz-section-table-column">';
77-
echo '<input type="text" name="min" class="control-text" value="', esc_attr( $this->min ), '" placeholder="0">';
78-
echo '</td>';
79-
echo '<td class="viz-section-table-column">';
80-
echo '<input type="text" name="max" class="control-text" value="', esc_attr( $this->max ), '" placeholder="100">';
81-
echo '</td>';
82-
echo '</tr>';
83-
echo '</table>';
96+
echo '<div class="viz-section-item">';
97+
echo '<a class="more-info" href="javascript:;">[?]</a>';
98+
echo '<b>', esc_html__( 'Min And Max Values', 'visualizer' ), '</b>';
8499

85-
echo '<p class="viz-section-description">';
86-
esc_html_e( 'The maximal and minimal values of the gauge.', 'visualizer' );
87-
echo '</p>';
88-
echo '</div>';
100+
echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
101+
echo '<tr>';
102+
echo '<td class="viz-section-table-column">';
103+
echo '<input type="text" name="min" class="control-text" value="', esc_attr( $this->min ), '" placeholder="0">';
104+
echo '</td>';
105+
echo '<td class="viz-section-table-column">';
106+
echo '<input type="text" name="max" class="control-text" value="', esc_attr( $this->max ), '" placeholder="100">';
107+
echo '</td>';
108+
echo '</tr>';
109+
echo '</table>';
89110

90-
self::_renderTextItem(
91-
esc_html__( 'Minor Ticks', 'visualizer' ),
92-
'minorTicks',
93-
$this->minorTicks,
94-
esc_html__( 'The number of minor tick section in each major tick section.', 'visualizer' ),
95-
2
96-
);
111+
echo '<p class="viz-section-description">';
112+
esc_html_e( 'The maximal and minimal values of the gauge.', 'visualizer' );
113+
echo '</p>';
114+
echo '</div>';
97115

98-
$this->_renderFormatField();
116+
self::_renderTextItem(
117+
esc_html__( 'Minor Ticks', 'visualizer' ),
118+
'minorTicks',
119+
$this->minorTicks,
120+
esc_html__( 'The number of minor tick section in each major tick section.', 'visualizer' ),
121+
2
122+
);
99123

100-
self::_renderSectionEnd();
101-
self::_renderGroupEnd();
124+
$this->_renderFormatField();
125+
126+
self::_renderSectionEnd();
102127
}
103128

104129
/**
@@ -109,8 +134,7 @@ protected function _renderGeneralSettings() {
109134
* @access protected
110135
*/
111136
protected function _renderGreenColorSettings() {
112-
self::_renderGroupStart( esc_html__( 'Green Color', 'visualizer' ) );
113-
self::_renderSectionStart();
137+
self::_renderSectionStart( esc_html__( 'Green Color', 'visualizer' ), false );
114138
self::_renderSectionDescription( esc_html__( 'Configure the green section of the gauge chart.', 'visualizer' ) );
115139

116140
echo '<div class="viz-section-item">';
@@ -140,7 +164,6 @@ protected function _renderGreenColorSettings() {
140164
'#109618'
141165
);
142166
self::_renderSectionEnd();
143-
self::_renderGroupEnd();
144167
}
145168

146169
/**
@@ -151,8 +174,7 @@ protected function _renderGreenColorSettings() {
151174
* @access protected
152175
*/
153176
protected function _renderYellowColorSettings() {
154-
self::_renderGroupStart( esc_html__( 'Yellow Color', 'visualizer' ) );
155-
self::_renderSectionStart();
177+
self::_renderSectionStart( esc_html__( 'Yellow Color', 'visualizer' ), false );
156178
self::_renderSectionDescription( esc_html__( 'Configure the yellow section of the gauge chart.', 'visualizer' ) );
157179

158180
echo '<div class="viz-section-item">';
@@ -182,7 +204,6 @@ protected function _renderYellowColorSettings() {
182204
'#FF9900'
183205
);
184206
self::_renderSectionEnd();
185-
self::_renderGroupEnd();
186207
}
187208

188209
/**
@@ -193,8 +214,7 @@ protected function _renderYellowColorSettings() {
193214
* @access protected
194215
*/
195216
protected function _renderRedColorSettings() {
196-
self::_renderGroupStart( esc_html__( 'Red Color', 'visualizer' ) );
197-
self::_renderSectionStart();
217+
self::_renderSectionStart( esc_html__( 'Red Color', 'visualizer' ), false );
198218
self::_renderSectionDescription( esc_html__( 'Configure the red section of the gauge chart.', 'visualizer' ) );
199219

200220
echo '<div class="viz-section-item">';
@@ -224,7 +244,6 @@ protected function _renderRedColorSettings() {
224244
'#DC3912'
225245
);
226246
self::_renderSectionEnd();
227-
self::_renderGroupEnd();
228247
}
229248

230249
/**

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ class Visualizer_Render_Sidebar_Type_Geo extends Visualizer_Render_Sidebar {
3838
* @access protected
3939
*/
4040
protected function _toHTML() {
41+
$this->_supportsAnimation = false;
4142
$this->_renderGeneralSettings();
4243
$this->_renderMapSettings();
4344
$this->_renderColorAxisSettings();

‎classes/Visualizer/Render/Sidebar/Type/Pie.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ class Visualizer_Render_Sidebar_Type_Pie extends Visualizer_Render_Sidebar {
3838
* @access protected
3939
*/
4040
protected function _toHTML() {
41+
$this->_supportsAnimation = false;
4142
$this->_renderGeneralSettings();
4243
$this->_renderPieSettings();
4344
$this->_renderResidueSettings();

‎js/render.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ var __visualizer_chart_images = [];
4040
render = new gv[render](container);
4141
}
4242

43+
if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
44+
{
45+
settings['animation']['startup'] = true;
46+
settings['animation']['duration'] = parseInt(settings['animation']['duration']);
47+
}
48+
4349
switch (chart.type) {
4450
case 'pie':
4551
if (settings.slices) {

0 commit comments

Comments
 (0)