';
esc_html_e( 'The default font family and size for all text in the chart.', 'visualizer' );
echo '
';
echo '
';
self::_renderSectionEnd();
self::_renderSectionStart( esc_html__( 'Legend', 'visualizer' ), false );
self::_renderSelectItem(
esc_html__( 'Position', 'visualizer' ),
'legend[position]',
$this->legend['position'],
$this->_legendPositions,
esc_html__( 'Determines where to place the legend, compared to the chart area.', 'visualizer' )
);
self::_renderSelectItem(
esc_html__( 'Alignment', 'visualizer' ),
'legend[alignment]',
$this->legend['alignment'],
$this->_alignments,
esc_html__( 'Determines the alignment of the legend.', 'visualizer' )
);
self::_renderColorPickerItem(
esc_html__( 'Font Color', 'visualizer' ),
'legend[textStyle][color]',
isset( $this->legend['textStyle']['color'] ) ? $this->legend['textStyle']['color'] : null,
'#000'
);
self::_renderSectionEnd();
self::_renderSectionStart( esc_html__( 'Tooltip', 'visualizer' ), false );
$this->_renderTooltipSettigns();
self::_renderSectionEnd();
$this->_renderAnimationSettings();
self::_renderGroupEnd();
}
/**
* Renders animation settings section.
*
* @access protected
*/
protected function _renderAnimationSettings() {
if ( ! $this->_supportsAnimation ) {
return;
}
self::_renderSectionStart( esc_html__( 'Animation', 'visualizer' ), false );
self::_renderCheckboxItem(
esc_html__( 'Animate on startup', 'visualizer' ),
'animation[startup]',
isset( $this->animation['startup'] ) ? $this->animation['startup'] : 0,
true,
esc_html__( 'Determines if the chart will animate on the initial draw.', 'visualizer' )
);
self::_renderTextItem(
esc_html__( 'Duration', 'visualizer' ),
'animation[duration]',
isset( $this->animation['duration'] ) ? $this->animation['duration'] : 0,
esc_html__( 'The duration of the animation, in milliseconds', 'visualizer' ),
0,
'number'
);
self::_renderSelectItem(
esc_html__( 'Easing', 'visualizer' ),
'animation[easing]',
isset( $this->animation['easing'] ) ? $this->animation['easing'] : null,
array(
'linear' => esc_html__( 'Constant speed', 'visualizer' ),
'in' => esc_html__( 'Start slow and speed up', 'visualizer' ),
'out' => esc_html__( 'Start fast and slow down', 'visualizer' ),
'inAndOut' => esc_html__( 'Start slow, speed up, then slow down', 'visualizer' ),
),
esc_html__( 'The easing function applied to the animation.', 'visualizer' )
);
self::_renderSectionEnd();
}
/**
* Renders tooltip settings section.
*
* @since 1.4.0
*
* @access protected
*/
protected function _renderTooltipSettigns() {
self::_renderSelectItem(
esc_html__( 'Trigger', 'visualizer' ),
'tooltip[trigger]',
isset( $this->tooltip['trigger'] ) ? $this->tooltip['trigger'] : null,
array(
'' => '',
'focus' => esc_html__( 'The tooltip will be displayed when the user hovers over an element', 'visualizer' ),
'selection' => esc_html__( 'The tooltip will be displayed when the user selects an element', 'visualizer' ),
'none' => esc_html__( 'The tooltip will not be displayed', 'visualizer' ),
),
esc_html__( 'Determines the user interaction that causes the tooltip to be displayed.', 'visualizer' )
);
self::_renderSelectItem(
esc_html__( 'Show Color Code', 'visualizer' ),
'tooltip[showColorCode]',
isset( $this->tooltip['showColorCode'] ) ? $this->tooltip['showColorCode'] : null,
$this->_yesno,
esc_html__( 'If set to yes, will show colored squares next to the slice information in the tooltip.', 'visualizer' )
);
}
/**
* Renders chart view settings group.
*
* @since 1.0.0
*
* @access protected
*/
protected function _renderViewSettings() {
self::_renderGroupStart( esc_html__( 'Chart Size & Placement', 'visualizer' ) );
self::_renderSectionStart( esc_html__( 'Chart Size/Layout', 'visualizer' ), false );
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' ) );
echo '
';
echo '[?]';
echo '', esc_html__( 'Width And Height Of Chart', 'visualizer' ), '';
echo '
';
echo '
';
echo '
';
echo '';
echo '
';
echo '
';
echo '';
echo '
';
echo '
';
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 '
';
echo '';
self::_renderSectionDescription( esc_html__( 'Configure the background color for the main area of the chart and the chart border width and color.', 'visualizer' ) );
self::_renderTextItem(
esc_html__( 'Stroke Width', 'visualizer' ),
'backgroundColor[strokeWidth]',
isset( $this->backgroundColor['strokeWidth'] ) ? $this->backgroundColor['strokeWidth'] : null,
esc_html__( 'The chart border width in pixels.', 'visualizer' ),
'0'
);
self::_renderColorPickerItem(
esc_html__( 'Stroke Color', 'visualizer' ),
'backgroundColor[stroke]',
! empty( $this->backgroundColor['stroke'] ) ? $this->backgroundColor['stroke'] : null,
'#666'
);
$background_color = ! empty( $this->backgroundColor['fill'] ) ? $this->backgroundColor['fill'] : null;
self::_renderColorPickerItem(
esc_html__( 'Background Color', 'visualizer' ),
'backgroundColor[fill]',
$background_color,
'#fff'
);
echo '
';
echo '';
echo '
';
self::_renderSectionEnd();
self::_renderSectionStart( esc_html__( 'Placement', 'visualizer' ), false );
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' ) );
echo '
';
echo '[?]';
echo '', esc_html__( 'Left And Top Margins', 'visualizer' ), '';
echo '
';
echo '
';
echo '
';
echo '';
echo '
';
echo '
';
echo '';
echo '
';
echo '
';
echo '
';
echo '
';
esc_html_e( 'Determines how far to draw the chart from the left and top borders.', 'visualizer' );
echo '
';
echo '
';
echo '
';
echo '[?]';
echo '', esc_html__( 'Width And Height Of Chart Area', 'visualizer' ), '';
echo '
';
echo '
';
echo '
';
echo '';
echo '
';
echo '
';
echo '';
echo '
';
echo '
';
echo '
';
echo '
';
esc_html_e( 'Determines the width and hight of the chart area.', 'visualizer' );
echo '
';
echo '
';
self::_renderSectionEnd();
self::_renderGroupEnd();
}
/**
* Renders select item.
*
* @since 1.0.0
*
* @static
* @access public
* @param string $title The title of the select item.
* @param string $name The name of the select item.
* @param string $value The actual value of the select item.
* @param array $options The array of select options.
* @param string $desc The description of the select item.
* @param bool $multiple Is this a multiple select box.
* @param array $classes Any additional classes.
* @param array $attributes Custom attributes.
*/
public static function _renderSelectItem( $title, $name, $value, array $options, $desc, $multiple = false, $classes = array(), $attributes = array() ) {
$atts = '';
if ( $attributes ) {
foreach ( $attributes as $k => $v ) {
$atts .= ' data-visualizer-' . $k . '=' . esc_attr( $v );
}
}
echo '
';
}
/**
* Renders color picker item.
*
* @since 1.0.0
*
* @static
* @access protected
* @param string $title The title of the select item.
* @param string $name The name of the select item.
* @param string $value The actual value of the select item.
* @param string $default The default value of the color picker.
*/
protected static function _renderColorPickerItem( $title, $name, $value, $default ) {
echo '
';
echo '', $title, '';
echo '
';
echo '';
echo '
';
echo '
';
}
/**
* Renders text item.
*
* @since 1.0.0
*
* @static
* @access protected
* @param string $title The title of the select item.
* @param string $name The name of the select item.
* @param string $value The actual value of the select item.
* @param string $desc The description of the select item.
* @param string $placeholder The placeholder for the input.
* @param string $type The type for the input (out of number, email, tel etc., default is text).
* @param array $custom_attributes The custom attributes.
*/
protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '', $type = 'text', $custom_attributes = array() ) {
$attributes = '';
if ( $custom_attributes ) {
foreach ( $custom_attributes as $k => $v ) {
$attributes .= ' ' . $k . '="' . esc_attr( $v ) . '"';
}
}
echo '
';
}
/**
* Renders the beginning of a group.
*
* @since 1.0.0
*
* @static
* @access public
* @param string $title The title of this group.
* @param string $html Any additional HTML.
* @param string $class Any additional classes.
*/
public static function _renderGroupStart( $title, $html = '', $class = '' ) {
echo '
';
echo '
', $title, '
';
echo $html;
echo '
';
}
/**
* Renders the ending of a group.
*
* @since 1.0.0
*
* @static
* @access public
*/
public static function _renderGroupEnd() {
echo '
';
echo '
';
}
/**
* Renders the beginning of a section.
*
* @since 1.0.0
*
* @static
* @access public
* @param string $title The title of this section. If the title is empty, no title will be displayed.
* @param boolean $open Determines whether the section items block has to be expanded or collapsed.
*/
public static function _renderSectionStart( $title = false, $open = true ) {
if ( ! empty( $title ) ) {
echo '
';
echo '', $title, '';
} else {
echo '
';
}
echo '
';
}
/**
* Renders the ending of a section.
*
* @since 1.0.0
*
* @public
* @access protected
* @param string $html Any addition HTML to add.
*/
public static function _renderSectionEnd( $html = '' ) {
echo '
';
echo $html;
echo '
';
}
/**
* Renders section description block.
*
* @since 1.0.0
*
* @static
* @access public
* @param string $description The description text.
*/
public static function _renderSectionDescription( $description, $classes = '' ) {
echo '
';
echo '
', $description, '
';
echo '
';
}
/**
* Renders format field according to series type.
*
* @since 1.3.0
*
* @access protected
* @param int $index The index of the series.
*/
protected function _renderFormatField( $index = 0 ) {
switch ( $this->__series[ $index + 1 ]['type'] ) {
case 'number':
self::_renderTextItem(
esc_html__( 'Number Format', 'visualizer' ),
'series[' . $index . '][format]',
isset( $this->series[ $index ]['format'] ) ? $this->series[ $index ]['format'] : '',
sprintf( esc_html__( 'Enter custom format pattern to apply to this series value, similar to the %1$sICU pattern set%2$s. Use something like #,### to get 1,234 as output, or $# to add dollar sign before digits. Pay attention that if you use % percentage format then your values will be multiplied by 100.', 'visualizer' ), '', '' ),
'#,###.##'
);
break;
case 'date':
case 'datetime':
case 'timeofday':
self::_renderTextItem(
esc_html__( 'Date Format', 'visualizer' ),
'series[' . $index . '][format]',
isset( $this->series[ $index ]['format'] ) ? $this->series[ $index ]['format'] : '',
sprintf( esc_html__( 'Enter custom format pattern to apply to this series value, similar to the %1$sICU date and time format%2$s.', 'visualizer' ), '', '' ),
'eeee, dd LLLL yyyy'
);
break;
}
}
/**
* Render a checkbox item
*/
protected static function _renderCheckboxItem( $title, $name, $value, $default, $desc, $disabled = false ) {
echo '