| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
const { __ } = wp.i18n; |
| 5 |
|
| 6 |
const { Component } = wp.element; |
| 7 |
|
| 8 |
const { |
| 9 |
ExternalLink, |
| 10 |
PanelBody, |
| 11 |
SelectControl, |
| 12 |
TextControl |
| 13 |
} = wp.components; |
| 14 |
|
| 15 |
class MapSettings extends Component { |
| 16 |
constructor() { |
| 17 |
super( ...arguments ); |
| 18 |
} |
| 19 |
|
| 20 |
render() { |
| 21 |
|
| 22 |
const settings = this.props.chart['visualizer-settings']; |
| 23 |
|
| 24 |
return ( |
| 25 |
<PanelBody |
| 26 |
title={ __( 'Map Settings' ) } |
| 27 |
initialOpen={ false } |
| 28 |
className="visualizer-advanced-panel" |
| 29 |
> |
| 30 |
|
| 31 |
<PanelBody |
| 32 |
title={ __( 'API' ) } |
| 33 |
className="visualizer-inner-sections" |
| 34 |
initialOpen={ false } |
| 35 |
> |
| 36 |
|
| 37 |
<TextControl |
| 38 |
label={ __( 'API Key' ) } |
| 39 |
help={ __( 'Add the Google Maps API key.' ) } |
| 40 |
value={ settings['map_api_key'] } |
| 41 |
onChange={ e => { |
| 42 |
settings['map_api_key'] = e; |
| 43 |
this.props.edit( settings ); |
| 44 |
} } |
| 45 |
/> |
| 46 |
|
| 47 |
<ExternalLink |
| 48 |
href="https://developers.google.com/maps/documentation/javascript/get-api-key" |
| 49 |
> |
| 50 |
{ __( 'Get API Keys' ) } |
| 51 |
</ExternalLink> |
| 52 |
|
| 53 |
</PanelBody> |
| 54 |
|
| 55 |
<PanelBody |
| 56 |
title={ __( 'Region' ) } |
| 57 |
className="visualizer-inner-sections" |
| 58 |
initialOpen={ false } |
| 59 |
> |
| 60 |
|
| 61 |
<ul className="visualizer-list"> |
| 62 |
<li>{ __( 'A map of the entire world using \'world\'.' ) }</li> |
| 63 |
<li> |
| 64 |
{ __( 'A continent or a sub-continent, specified by its 3-digit code, e.g., \'011\' for Western Africa. ' ) } |
| 65 |
<ExternalLink |
| 66 |
href="https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#Continent_Hierarchy" |
| 67 |
> |
| 68 |
{ __( 'More info here.' ) } |
| 69 |
</ExternalLink> |
| 70 |
</li> |
| 71 |
<li> |
| 72 |
{ __( 'A country, specified by its ISO 3166-1 alpha-2 code, e.g., \'AU\' for Australia. ' ) } |
| 73 |
<ExternalLink |
| 74 |
href="http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2" |
| 75 |
> |
| 76 |
{ __( 'More info here.' ) } |
| 77 |
</ExternalLink> |
| 78 |
</li> |
| 79 |
<li> |
| 80 |
{ __( 'A state in the United States, specified by its ISO 3166-2:US code, e.g., \'US-AL\' for Alabama. Note that the resolution option must be set to either \'provinces\' or \'metros\'. ' ) } |
| 81 |
<ExternalLink |
| 82 |
href="http://en.wikipedia.org/wiki/ISO_3166-2:US" |
| 83 |
> |
| 84 |
{ __( 'More info here.' ) } |
| 85 |
</ExternalLink> |
| 86 |
</li> |
| 87 |
</ul> |
| 88 |
|
| 89 |
<TextControl |
| 90 |
label={ __( 'Reigion' ) } |
| 91 |
help={ __( 'Configure the region area to display on the map. (Surrounding areas will be displayed as well.)' ) } |
| 92 |
value={ settings.region } |
| 93 |
onChange={ e => { |
| 94 |
settings.region = e; |
| 95 |
this.props.edit( settings ); |
| 96 |
} } |
| 97 |
/> |
| 98 |
|
| 99 |
</PanelBody> |
| 100 |
|
| 101 |
<PanelBody |
| 102 |
title={ __( 'Resolution' ) } |
| 103 |
className="visualizer-inner-sections" |
| 104 |
initialOpen={ false } |
| 105 |
> |
| 106 |
|
| 107 |
<ul className="visualizer-list"> |
| 108 |
<li>{ __( '\'countries\' - Supported for all regions, except for US state regions.' ) }</li> |
| 109 |
<li>{ __( '\'provinces\' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.' ) }</li> |
| 110 |
<li>{ __( '\'metros\' - Supported for the US country region and US state regions only.' ) }</li> |
| 111 |
</ul> |
| 112 |
|
| 113 |
<SelectControl |
| 114 |
label={ __( 'Resolution' ) } |
| 115 |
help={ __( 'The resolution of the map borders.' ) } |
| 116 |
value={ settings.resolution ? settings.resolution : 'countries' } |
| 117 |
options={ [ |
| 118 |
{ label: __( 'Countries' ), value: 'countries' }, |
| 119 |
{ label: __( 'Provinces' ), value: 'provinces' }, |
| 120 |
{ label: __( 'Metros' ), value: 'metros' } |
| 121 |
] } |
| 122 |
onChange={ e => { |
| 123 |
settings.resolution = e; |
| 124 |
this.props.edit( settings ); |
| 125 |
} } |
| 126 |
/> |
| 127 |
|
| 128 |
</PanelBody> |
| 129 |
|
| 130 |
<PanelBody |
| 131 |
title={ __( 'Display Mode' ) } |
| 132 |
className="visualizer-inner-sections" |
| 133 |
initialOpen={ false } |
| 134 |
> |
| 135 |
|
| 136 |
<ul className="visualizer-list"> |
| 137 |
<li>{ __( '\'auto\' - Choose based on the format of the data.' ) }</li> |
| 138 |
<li>{ __( '\'regions\' - This is a region map.' ) }</li> |
| 139 |
<li>{ __( '\'markers\' - This is a marker map.' ) }</li> |
| 140 |
</ul> |
| 141 |
|
| 142 |
<SelectControl |
| 143 |
label={ __( 'Display Mode' ) } |
| 144 |
help={ __( 'Determines which type of map this is.' ) } |
| 145 |
value={ settings.displayMode ? settings.displayMode : 'auto' } |
| 146 |
options={ [ |
| 147 |
{ label: __( 'Auto' ), value: 'auto' }, |
| 148 |
{ label: __( 'Regions' ), value: 'regions' }, |
| 149 |
{ label: __( 'Markers' ), value: 'markers' } |
| 150 |
] } |
| 151 |
onChange={ e => { |
| 152 |
settings.displayMode = e; |
| 153 |
this.props.edit( settings ); |
| 154 |
} } |
| 155 |
/> |
| 156 |
|
| 157 |
</PanelBody> |
| 158 |
|
| 159 |
<PanelBody |
| 160 |
title={ __( 'Tooltip' ) } |
| 161 |
className="visualizer-inner-sections" |
| 162 |
initialOpen={ false } |
| 163 |
> |
| 164 |
|
| 165 |
<SelectControl |
| 166 |
label={ __( 'Trigger' ) } |
| 167 |
help={ __( 'Determines the user interaction that causes the tooltip to be displayed.' ) } |
| 168 |
value={ settings.tooltip.trigger ? settings.tooltip.trigger : 'focus' } |
| 169 |
options={ [ |
| 170 |
{ label: __( 'The tooltip will be displayed when the user hovers over an element' ), value: 'focus' }, |
| 171 |
{ label: __( 'The tooltip will not be displayed' ), value: 'none' } |
| 172 |
] } |
| 173 |
onChange={ e => { |
| 174 |
settings.tooltip.trigger = e; |
| 175 |
this.props.edit( settings ); |
| 176 |
} } |
| 177 |
/> |
| 178 |
|
| 179 |
</PanelBody> |
| 180 |
|
| 181 |
</PanelBody> |
| 182 |
); |
| 183 |
} |
| 184 |
} |
| 185 |
|
| 186 |
export default MapSettings; |
| 187 |
|
