';
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();
self::_renderGroupEnd();
}
/**
* 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__( 'Layout & Chart Area', 'visualizer' ) );
self::_renderSectionStart( esc_html__( '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.', '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__( 'Chart Area', '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 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 array $options The array of select options.
* @param string $desc The description of the select item.
*/
protected static function _renderSelectItem( $title, $name, $value, array $options, $desc ) {
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.
*/
protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '' ) {
echo '
';
}
/**
* Renders the beginning of a group.
*
* @since 1.0.0
*
* @static
* @access protected
* @param string $title The title of this group.
*/
protected static function _renderGroupStart( $title ) {
echo '
';
echo '
', $title, '
';
echo '
';
}
/**
* Renders the ending of a group.
*
* @since 1.0.0
*
* @static
* @access protected
*/
protected static function _renderGroupEnd() {
echo '
';
echo '
';
}
/**
* Renders the beginning of a section.
*
* @since 1.0.0
*
* @static
* @access protected
* @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.
*/
protected static function _renderSectionStart( $title = false, $open = true ) {
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 ) {
echo '