| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
const { __ } = wp.i18n; |
| 5 |
|
| 6 |
const { |
| 7 |
Component, |
| 8 |
Fragment |
| 9 |
} = wp.element; |
| 10 |
|
| 11 |
const { |
| 12 |
PanelBody, |
| 13 |
SelectControl, |
| 14 |
TextControl |
| 15 |
} = wp.components; |
| 16 |
|
| 17 |
class LinesSettings extends Component { |
| 18 |
constructor() { |
| 19 |
super( ...arguments ); |
| 20 |
} |
| 21 |
|
| 22 |
render() { |
| 23 |
|
| 24 |
const type = this.props.chart['visualizer-chart-type']; |
| 25 |
|
| 26 |
const settings = this.props.chart['visualizer-settings']; |
| 27 |
|
| 28 |
return ( |
| 29 |
<PanelBody |
| 30 |
title={ __( 'Lines Settings' ) } |
| 31 |
initialOpen={ false } |
| 32 |
className="visualizer-advanced-panel" |
| 33 |
> |
| 34 |
|
| 35 |
<TextControl |
| 36 |
label={ __( 'Line Width' ) } |
| 37 |
help={ __( 'Data line width in pixels. Use zero to hide all lines.' ) } |
| 38 |
value={ settings.lineWidth } |
| 39 |
onChange={ e => { |
| 40 |
settings.lineWidth = e; |
| 41 |
this.props.edit( settings ); |
| 42 |
} } |
| 43 |
/> |
| 44 |
|
| 45 |
<TextControl |
| 46 |
label={ __( 'Point Size' ) } |
| 47 |
help={ __( 'Diameter of displayed points in pixels. Use zero to hide all the points.' ) } |
| 48 |
value={ settings.pointSize } |
| 49 |
onChange={ e => { |
| 50 |
settings.pointSize = e; |
| 51 |
this.props.edit( settings ); |
| 52 |
} } |
| 53 |
/> |
| 54 |
|
| 55 |
{ ( -1 >= [ 'area' ].indexOf( type ) ) && ( |
| 56 |
<SelectControl |
| 57 |
label={ __( 'Curve Type' ) } |
| 58 |
help={ __( 'Determines whether the series has to be presented in the legend or not.' ) } |
| 59 |
value={ settings.curveType ? settings.curveType : 'none' } |
| 60 |
options={ [ |
| 61 |
{ label: __( 'Straight line without curve' ), value: 'none' }, |
| 62 |
{ label: __( 'The angles of the line will be smoothed' ), value: 'function' } |
| 63 |
] } |
| 64 |
onChange={ e => { |
| 65 |
settings.curveType = e; |
| 66 |
this.props.edit( settings ); |
| 67 |
} } |
| 68 |
/> |
| 69 |
) } |
| 70 |
|
| 71 |
{ ( -1 >= [ 'scatter' ].indexOf( type ) ) && ( |
| 72 |
<SelectControl |
| 73 |
label={ __( 'Focus Target' ) } |
| 74 |
help={ __( 'The type of the entity that receives focus on mouse hover. Also affects which entity is selected by mouse click.' ) } |
| 75 |
value={ settings.focusTarget ? settings.focusTarget : 'datum' } |
| 76 |
options={ [ |
| 77 |
{ label: __( 'Focus on a single data point.' ), value: 'datum' }, |
| 78 |
{ label: __( 'Focus on a grouping of all data points along the major axis.' ), value: 'category' } |
| 79 |
] } |
| 80 |
onChange={ e => { |
| 81 |
settings.focusTarget = e; |
| 82 |
this.props.edit( settings ); |
| 83 |
} } |
| 84 |
/> |
| 85 |
) } |
| 86 |
|
| 87 |
<SelectControl |
| 88 |
label={ __( 'Selection Mode' ) } |
| 89 |
help={ __( 'Determines how many data points an user can select on a chart.' ) } |
| 90 |
value={ settings.selectionMode ? settings.selectionMode : 'single' } |
| 91 |
options={ [ |
| 92 |
{ label: __( 'Single data point' ), value: 'single' }, |
| 93 |
{ label: __( 'Multiple data points' ), value: 'multiple' } |
| 94 |
] } |
| 95 |
onChange={ e => { |
| 96 |
settings.selectionMode = e; |
| 97 |
this.props.edit( settings ); |
| 98 |
} } |
| 99 |
/> |
| 100 |
|
| 101 |
<SelectControl |
| 102 |
label={ __( 'Aggregation Target' ) } |
| 103 |
help={ __( 'Determines how multiple data selections are rolled up into tooltips. To make it working you need to set multiple selection mode and tooltip trigger to display it when an user selects an element.' ) } |
| 104 |
value={ settings.aggregationTarget ? settings.aggregationTarget : 'auto' } |
| 105 |
options={ [ |
| 106 |
{ label: __( 'Group selected data by x-value' ), value: 'category' }, |
| 107 |
{ label: __( 'Group selected data by series' ), value: 'series' }, |
| 108 |
{ label: __( 'Group selected data by x-value if all selections have the same x-value, and by series otherwise' ), value: 'auto' }, |
| 109 |
{ label: __( 'Show only one tooltip per selection' ), value: 'none' } |
| 110 |
] } |
| 111 |
onChange={ e => { |
| 112 |
settings.aggregationTarget = e; |
| 113 |
this.props.edit( settings ); |
| 114 |
} } |
| 115 |
/> |
| 116 |
|
| 117 |
<TextControl |
| 118 |
label={ __( 'Point Opacity' ) } |
| 119 |
help={ __( 'The transparency of data points, with 1.0 being completely opaque and 0.0 fully transparent.' ) } |
| 120 |
value={ settings.dataOpacity } |
| 121 |
onChange={ e => { |
| 122 |
settings.dataOpacity = e; |
| 123 |
this.props.edit( settings ); |
| 124 |
} } |
| 125 |
/> |
| 126 |
|
| 127 |
{ ( -1 >= [ 'scatter', 'line' ].indexOf( type ) ) && ( |
| 128 |
<Fragment> |
| 129 |
<TextControl |
| 130 |
label={ __( 'Area Opacity' ) } |
| 131 |
help={ __( 'The default opacity of the colored area under an area chart series, where 0.0 is fully transparent and 1.0 is fully opaque. To specify opacity for an individual series, set the area opacity value in the series property.' ) } |
| 132 |
value={ settings.areaOpacity } |
| 133 |
onChange={ e => { |
| 134 |
settings.areaOpacity = e; |
| 135 |
this.props.edit( settings ); |
| 136 |
} } |
| 137 |
/> |
| 138 |
|
| 139 |
<SelectControl |
| 140 |
label={ __( 'Is Stacked' ) } |
| 141 |
help={ __( 'If set to yes, series elements are stacked.' ) } |
| 142 |
value={ settings.isStacked ? settings.isStacked : '0' } |
| 143 |
options={ [ |
| 144 |
{ label: __( 'Yes' ), value: '1' }, |
| 145 |
{ label: __( 'No' ), value: '0' } |
| 146 |
] } |
| 147 |
onChange={ e => { |
| 148 |
settings.isStacked = e; |
| 149 |
this.props.edit( settings ); |
| 150 |
} } |
| 151 |
/> |
| 152 |
</Fragment> |
| 153 |
) } |
| 154 |
|
| 155 |
{ ( -1 >= [ 'scatter', 'area' ].indexOf( type ) ) && ( |
| 156 |
<SelectControl |
| 157 |
label={ __( 'Interpolate Nulls' ) } |
| 158 |
help={ __( 'Whether to guess the value of missing points. If yes, it will guess the value of any missing data based on neighboring points. If no, it will leave a break in the line at the unknown point.' ) } |
| 159 |
value={ settings.interpolateNulls ? settings.interpolateNulls : '0' } |
| 160 |
options={ [ |
| 161 |
{ label: __( 'Yes' ), value: '1' }, |
| 162 |
{ label: __( 'No' ), value: '0' } |
| 163 |
] } |
| 164 |
onChange={ e => { |
| 165 |
settings.interpolateNulls = e; |
| 166 |
this.props.edit( settings ); |
| 167 |
} } |
| 168 |
/> |
| 169 |
) } |
| 170 |
|
| 171 |
</PanelBody> |
| 172 |
); |
| 173 |
} |
| 174 |
} |
| 175 |
|
| 176 |
export default LinesSettings; |
| 177 |
|
