Skip to content

Commit f19a555

Browse files
contactashish13contactashish13
committed
Add animations to chart #251 
1 parent 73428b1 commit f19a555

File tree

5 files changed

+115
-44
lines changed

5 files changed

+115
-44
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: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -38,57 +38,69 @@ class Visualizer_Render_Sidebar_Type_Gauge extends Visualizer_Render_Sidebar {
3838
* @access protected
3939
*/
4040
protected function _toHTML() {
41-
$this->_renderGeneralSettings();
42-
$this->_renderGreenColorSettings();
43-
$this->_renderYellowColorSettings();
44-
$this->_renderRedColorSettings();
41+
$this->_supportsAnimation = false;
42+
$this->_renderGaugeSettings();
4543
$this->_renderViewSettings();
4644
$this->_renderAdvancedSettings();
4745
}
4846

4947
/**
50-
* Renders chart general settings group.
48+
* Renders Gauge settings group.
5149
*
5250
* @since 1.0.0
5351
*
5452
* @access protected
5553
*/
56-
protected function _renderGeneralSettings() {
57-
self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
58-
self::_renderSectionStart();
54+
protected function _renderGaugeSettings() {
55+
self::_renderGroupStart( esc_html__( 'Gauge Settings', 'visualizer' ) );
56+
$this->_renderTickSettings();
57+
$this->_renderGreenColorSettings();
58+
$this->_renderYellowColorSettings();
59+
$this->_renderRedColorSettings();
60+
self::_renderGroupEnd();
61+
}
5962

60-
echo '<div class="viz-section-item">';
61-
echo '<a class="more-info" href="javascript:;">[?]</a>';
62-
echo '<b>', esc_html__( 'Min And Max Values', 'visualizer' ), '</b>';
63+
/**
64+
* Renders tick settings group.
65+
*
66+
* @since 1.0.0
67+
*
68+
* @access protected
69+
*/
70+
protected function _renderTickSettings() {
71+
self::_renderSectionStart( esc_html__( 'Tick Settings', 'visualizer' ), false );
6372

64-
echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
65-
echo '<tr>';
66-
echo '<td class="viz-section-table-column">';
67-
echo '<input type="text" name="min" class="control-text" value="', esc_attr( $this->min ), '" placeholder="0">';
68-
echo '</td>';
69-
echo '<td class="viz-section-table-column">';
70-
echo '<input type="text" name="max" class="control-text" value="', esc_attr( $this->max ), '" placeholder="100">';
71-
echo '</td>';
72-
echo '</tr>';
73-
echo '</table>';
73+
echo '<div class="viz-section-item">';
74+
echo '<a class="more-info" href="javascript:;">[?]</a>';
75+
echo '<b>', esc_html__( 'Min And Max Values', 'visualizer' ), '</b>';
7476

75-
echo '<p class="viz-section-description">';
76-
esc_html_e( 'The maximal and minimal values of the gauge.', 'visualizer' );
77-
echo '</p>';
78-
echo '</div>';
77+
echo '<table class="viz-section-table" cellspacing="0" cellpadding="0" border="0">';
78+
echo '<tr>';
79+
echo '<td class="viz-section-table-column">';
80+
echo '<input type="text" name="min" class="control-text" value="', esc_attr( $this->min ), '" placeholder="0">';
81+
echo '</td>';
82+
echo '<td class="viz-section-table-column">';
83+
echo '<input type="text" name="max" class="control-text" value="', esc_attr( $this->max ), '" placeholder="100">';
84+
echo '</td>';
85+
echo '</tr>';
86+
echo '</table>';
7987

80-
self::_renderTextItem(
81-
esc_html__( 'Minor Ticks', 'visualizer' ),
82-
'minorTicks',
83-
$this->minorTicks,
84-
esc_html__( 'The number of minor tick section in each major tick section.', 'visualizer' ),
85-
2
86-
);
88+
echo '<p class="viz-section-description">';
89+
esc_html_e( 'The maximal and minimal values of the gauge.', 'visualizer' );
90+
echo '</p>';
91+
echo '</div>';
8792

88-
$this->_renderFormatField();
93+
self::_renderTextItem(
94+
esc_html__( 'Minor Ticks', 'visualizer' ),
95+
'minorTicks',
96+
$this->minorTicks,
97+
esc_html__( 'The number of minor tick section in each major tick section.', 'visualizer' ),
98+
2
99+
);
89100

90-
self::_renderSectionEnd();
91-
self::_renderGroupEnd();
101+
$this->_renderFormatField();
102+
103+
self::_renderSectionEnd();
92104
}
93105

94106
/**
@@ -99,8 +111,7 @@ protected function _renderGeneralSettings() {
99111
* @access protected
100112
*/
101113
protected function _renderGreenColorSettings() {
102-
self::_renderGroupStart( esc_html__( 'Green Color', 'visualizer' ) );
103-
self::_renderSectionStart();
114+
self::_renderSectionStart( esc_html__( 'Green Color', 'visualizer' ), false );
104115
self::_renderSectionDescription( esc_html__( 'Configure the green section of the gauge chart.', 'visualizer' ) );
105116

106117
echo '<div class="viz-section-item">';
@@ -130,7 +141,6 @@ protected function _renderGreenColorSettings() {
130141
'#109618'
131142
);
132143
self::_renderSectionEnd();
133-
self::_renderGroupEnd();
134144
}
135145

136146
/**
@@ -141,8 +151,7 @@ protected function _renderGreenColorSettings() {
141151
* @access protected
142152
*/
143153
protected function _renderYellowColorSettings() {
144-
self::_renderGroupStart( esc_html__( 'Yellow Color', 'visualizer' ) );
145-
self::_renderSectionStart();
154+
self::_renderSectionStart( esc_html__( 'Yellow Color', 'visualizer' ), false );
146155
self::_renderSectionDescription( esc_html__( 'Configure the yellow section of the gauge chart.', 'visualizer' ) );
147156

148157
echo '<div class="viz-section-item">';
@@ -172,7 +181,6 @@ protected function _renderYellowColorSettings() {
172181
'#FF9900'
173182
);
174183
self::_renderSectionEnd();
175-
self::_renderGroupEnd();
176184
}
177185

178186
/**
@@ -183,8 +191,7 @@ protected function _renderYellowColorSettings() {
183191
* @access protected
184192
*/
185193
protected function _renderRedColorSettings() {
186-
self::_renderGroupStart( esc_html__( 'Red Color', 'visualizer' ) );
187-
self::_renderSectionStart();
194+
self::_renderSectionStart( esc_html__( 'Red Color', 'visualizer' ), false );
188195
self::_renderSectionDescription( esc_html__( 'Configure the red section of the gauge chart.', 'visualizer' ) );
189196

190197
echo '<div class="viz-section-item">';
@@ -214,7 +221,6 @@ protected function _renderRedColorSettings() {
214221
'#DC3912'
215222
);
216223
self::_renderSectionEnd();
217-
self::_renderGroupEnd();
218224
}
219225

220226
/**

‎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->_renderMapSettings();
4243
$this->_renderColorAxisSettings();
4344
$this->_renderSizeAxisSettings();

‎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
@@ -36,6 +36,12 @@
3636
render = new gv[render](container);
3737
}
3838

39+
if (settings['animation'] && parseInt(settings['animation']['startup']) === 1)
40+
{
41+
settings['animation']['startup'] = true;
42+
settings['animation']['duration'] = parseInt(settings['animation']['duration']);
43+
}
44+
3945
switch (chart.type) {
4046
case 'pie':
4147
if (settings.slices) {

0 commit comments

Comments
 (0)