_library = 'chartjs';
parent::__construct( $data );
$this->_legendPositions = array(
'left' => esc_html__( 'Left of the chart', 'visualizer' ),
'right' => esc_html__( 'Right of the chart', 'visualizer' ),
'top' => esc_html__( 'Above the chart', 'visualizer' ),
'bottom' => esc_html__( 'Below the chart', 'visualizer' ),
);
}
/**
* Renders concrete series settings for the Bar chart.
*
* @since 3.3.0
*
* @access protected
* @param int $index The series index.
*/
protected function _renderChartTypeSeries( $index ) {
// empty.
}
/**
* Renders settings specific to the Bar chart.
*
* @since 3.3.0
*
* @access protected
*/
protected function _renderChartTypeSettings() {
// empty
}
/**
* Registers additional hooks.
*
* @access protected
*/
protected function hooks() {
if ( $this->_library === 'chartjs' ) {
add_filter( 'visualizer_assets_render', array( $this, 'load_chartjs_assets' ), 10, 2 );
}
}
/**
* Loads the assets.
*/
function load_chartjs_assets( $deps, $is_frontend ) {
$this->load_dependent_assets( array( 'moment', 'numeral' ) );
wp_register_script( 'chartjs', VISUALIZER_ABSURL . 'js/lib/chartjs.min.js', array( 'numeral', 'moment' ), null, true );
wp_register_script(
'visualizer-render-chartjs-lib',
VISUALIZER_ABSURL . 'js/render-chartjs.js',
array(
'chartjs',
),
Visualizer_Plugin::VERSION,
true
);
return array_merge(
$deps,
array( 'visualizer-render-chartjs-lib' )
);
}
/**
* Renders series settings group.
*
* @since 3.3.0
*
* @access protected
*/
protected function _renderSeriesSettings() {
self::_renderGroupStart( esc_html__( 'Series Settings', 'visualizer' ) );
self::_renderSectionStart();
self::_renderSectionDescription( esc_html__( 'If you have just updated/modified the chart data, you may need to save it before the new data reflects in the settings.', 'visualizer' ), 'viz-info-msg' );
self::_renderSectionEnd();
for ( $i = 1, $cnt = count( $this->__series ); $i < $cnt; $i++ ) {
if ( ! empty( $this->__series[ $i ]['label'] ) ) {
self::_renderSectionStart( esc_html( $this->__series[ $i ]['label'] ), false );
$this->_renderSeries( $i - 1 );
self::_renderSectionEnd();
}
}
self::_renderGroupEnd();
}
/**
* Renders concrete series settings.
*
* @since 3.3.0
*
* @access protected
* @param int $index The series index.
*/
protected function _renderSeries( $index ) {
$this->_renderFormatField( $index );
$this->_renderChartTypeSeries( $index );
}
/**
* Renders template.
*
* @since 3.3.0
*
* @access protected
*/
protected function _toHTML() {
$this->_renderGeneralSettings();
$this->_renderAxesSettings();
$this->_renderChartTypeSettings();
$this->_renderSeriesSettings();
$this->_renderViewSettings();
$this->_renderAdvancedSettings();
}
/**
* Renders chart title settings.
*
* @since 3.3.0
*
* @access protected
*/
protected function _renderChartTitleSettings() {
self::_renderTextItem(
esc_html__( 'Chart Title', 'visualizer' ),
'title[text]',
isset( $this->title['text'] ) ? $this->title['text'] : '',
esc_html__( 'Text to display above the chart.', 'visualizer' )
);
self::_renderColorPickerItem(
esc_html__( 'Chart Title Color', 'visualizer' ),
'title[fontColor]',
isset( $this->title['fontColor'] ) ? $this->title['fontColor'] : '',
'#000'
);
echo '';
self::_renderTextAreaItem(
esc_html__( 'Chart Description', 'visualizer' ),
'description',
$this->description,
sprintf( esc_html__( 'Description to display in the structured data schema as explained %1$shere%2$s', 'visualizer' ), '', '' )
);
}
/**
* Renders chart general settings group.
*
* @since 3.3.0
*
* @access protected
*/
protected function _renderGeneralSettings() {
self::_renderGroupStart( esc_html__( 'General Settings', 'visualizer' ) );
self::_renderSectionStart();
self::_renderSectionDescription( esc_html__( 'Configure title, font styles, tooltip, legend and else settings for the chart.', 'visualizer' ) );
self::_renderSectionEnd();
self::_renderSectionStart( esc_html__( 'Title', 'visualizer' ), false );
$this->_renderChartTitleSettings();
self::_renderSectionEnd();
self::_renderSectionStart( esc_html__( 'Font Styles', 'visualizer' ), false );
echo '';
echo '
[?]';
echo '
', esc_html__( 'Family And Size', 'visualizer' ), '';
echo '
';
echo '';
echo '| ';
echo '';
echo ' | ';
echo '';
echo '';
echo ' | ';
echo '
';
echo '
';
echo '
';
esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
echo '
';
echo '
';
echo '
[?]';
echo '
', esc_html__( 'Family And Size', 'visualizer' ), '';
echo '
';
echo '';
echo '| ';
echo '';
echo ' | ';
echo '';
echo '';
echo ' | ';
echo '
';
echo '
';
self::_renderColorPickerItem(
esc_html__( 'Font Color', 'visualizer' ),
'legend[labels][fontColor]',
isset( $this->legend['labels']['fontColor'] ) ? $this->legend['labels']['fontColor'] : null,
'#000'
);
echo '
';
echo '
[?]';
echo '
', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '';
echo '
';
echo '
';
esc_html_e( 'Determines the total width and height of the chart. This will only show in the front-end.', 'visualizer' );
echo '
';
echo '