| @@ -139,15 +139,15 @@ | ||
| 139 | 139 | <div class="gvnsql-field"> |
| 140 | 140 | <label for="guaven_sqlcharts_xarg_l">X axis label (display text)</label> |
| 141 | 141 | <input type="text" name="guaven_sqlcharts_xarg_l" id="guaven_sqlcharts_xarg_l" |
| 142 | 142 | value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_xarg_l')); ?>" placeholder="e.g. Months"> |
| 143 | - <small>Any text you like — shown in the table view header.</small> | |
| 143 | + <small>Shown as the X axis title on Bar, Line and Scatter charts, and as the first table-view header.</small> | |
| 144 | 144 | </div> |
| 145 | 145 | <div class="gvnsql-field"> |
| 146 | 146 | <label for="guaven_sqlcharts_yarg_l">Y axis label / series name(s)</label> |
| 147 | 147 | <input type="text" name="guaven_sqlcharts_yarg_l" id="guaven_sqlcharts_yarg_l" |
| 148 | 148 | value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_yarg_l')); ?>" placeholder="e.g. Post count"> |
| 149 | - <small>Shown in the legend. With multiple queries, separate one name per query with ";".</small> | |
| 149 | + <small>Shown in the legend and as the Y axis title. With multiple queries, separate one name per query with ";" (then only the legend is used).</small> | |
| 150 | 150 | </div> |
| 151 | 151 | </div> |
| 152 | 152 | </div> |
| 153 | 153 | <datalist id="gvnsql-columns"></datalist> |
| @@ -172,8 +172,9 @@ | ||
| 172 | 172 | <textarea name="guaven_sqlcharts_variables" id="guaven_sqlcharts_variables" class="gvnsql-raw" rows="2"><?php |
| 173 | 173 | echo esc_textarea(trim($gvnsql_meta('guaven_sqlcharts_variables'))); |
| 174 | 174 | ?></textarea> |
| 175 | 175 | <p class="gvnsql-hint gvnsql-raw">Raw format: <i>name~default~label~type | name~default~label~type</i> (type: text, number or date)</p> |
| 176 | + <p class="gvnsql-hint">Tag names become URL parameters on your site, so avoid names WordPress already uses (for example <code>post_type</code>, <code>p</code>, <code>s</code>, <code>cat</code>, <code>author</code>, <code>name</code>); prefer something like <code>ptype</code>.</p> | |
| 176 | 177 | |
| 177 | 178 | <div class="gvnsql-grid2" style="margin-top:14px"> |
| 178 | 179 | <div class="gvnsql-field"> |
| 179 | 180 | <label>Visibility</label> |
| @@ -191,9 +192,9 @@ | ||
| 191 | 192 | |
| 192 | 193 | <!-- ============ TAB 3: STYLE ============ --> |
| 193 | 194 | <section class="gvnsql-section" data-tab="style"> |
| 194 | 195 | <h4 class="gvnsql-step">Colors</h4> |
| 195 | - <p class="gvnsql-hint">One color per data series (or per slice for circular charts). Leave empty for random colors.</p> | |
| 196 | + <p class="gvnsql-hint">One color per data series (or per slice for circular charts). Leave empty to use the built-in palette.</p> | |
| 196 | 197 | <div id="gvnsql-colors-rows" class="gvnsql-colors"></div> |
| 197 | 198 | <p><button type="button" class="button button-secondary" id="gvnsql-add-color">+ Add color</button></p> |
| 198 | 199 | <input type="hidden" name="guaven_sqlcharts_colors" id="guaven_sqlcharts_colors" |
| 199 | 200 | value="<?php echo esc_attr($gvnsql_meta('guaven_sqlcharts_colors')); ?>"> |
| @@ -214,9 +215,9 @@ | ||
| 214 | 215 | <div class="gvnsql-field"> |
| 215 | 216 | <label>Value labels</label> |
| 216 | 217 | <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_forcetooltips" id="guaven_sqlcharts_forcetooltips" value="1" |
| 217 | 218 | <?php echo $gvnsql_meta('guaven_sqlcharts_forcetooltips') != '' ? 'checked' : ''; ?>> |
| 218 | - Always show values on the chart (not only on mouse-over)</label> | |
| 219 | + Always show values on the chart (not only on mouse-over). Works with every chart type.</label> | |
| 219 | 220 | </div> |
| 220 | 221 | <div class="gvnsql-field"> |
| 221 | 222 | <label for="guaven_sqlcharts_chartwidth">Max width (px)</label> |
| 222 | 223 | <input type="number" name="guaven_sqlcharts_chartwidth" id="guaven_sqlcharts_chartwidth" |
| @@ -243,9 +244,14 @@ | ||
| 243 | 244 | <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_round_y_values" value="1" |
| 244 | 245 | <?php echo $gvnsql_meta('guaven_sqlcharts_round_y_values') !== '' ? 'checked' : ''; ?>> Show only round numbers on the Y axis</label> |
| 245 | 246 | <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_nostacked" value="1" |
| 246 | 247 | <?php echo $gvnsql_meta('guaven_sqlcharts_nostacked') !== '' ? 'checked' : ''; ?>> Disable stacking of multiple datasets (Bar charts)</label> |
| 248 | + <label class="gvnsql-inlinecheck"><input type="checkbox" name="guaven_sqlcharts_timeaxis" value="1" | |
| 249 | + <?php echo $gvnsql_meta('guaven_sqlcharts_timeaxis') !== '' ? 'checked' : ''; ?>> Scale X axis by date/time (Bar and Line charts)</label> | |
| 247 | 250 | </div> |
| 251 | + <p class="gvnsql-hint">Date/time scaling places each point by real elapsed time instead of equal steps. X values must be dates such as | |
| 252 | + <code>2024-02-23</code>, <code>2024-02</code>, <code>2024</code> or <code>2024-02-23 14:30</code>. If any X value is not a date, the normal axis is used. | |
| 253 | + Bars are sized from the closest pair of dates, so very uneven gaps produce thin bars.</p> | |
| 248 | 254 | |
| 249 | 255 | <h4 class="gvnsql-step">Remote MySQL database (optional)</h4> |
| 250 | 256 | <p class="gvnsql-hint">Leave all fields empty to use this WordPress site's own database.</p> |
| 251 | 257 | <div class="gvnsql-grid2"> |
| @@ -310,12 +316,26 @@ | ||
| 310 | 316 | </h4> |
| 311 | 317 | <p>Note: Shortcodes support width and height attributes, f.e. [gvn_schart<?php |
| 312 | 318 | echo esc_attr($postfix); |
| 313 | 319 | ?> id="1" width="500" height="400"]. Without attributes, the width/height from the Style tab is used. |
| 320 | +<?php | |
| 321 | + preg_match_all('/\{arg([0-9]+)\}/', guaven_sqlcharts_get_code($post->ID), $gvnsql_argtags); | |
| 322 | + $gvnsql_argtags = array_unique($gvnsql_argtags[1]); | |
| 323 | + sort($gvnsql_argtags); | |
| 324 | + if (!empty($gvnsql_argtags)) { | |
| 325 | + $gvnsql_argexample = ''; | |
| 326 | + foreach ($gvnsql_argtags as $gvnsql_argn) $gvnsql_argexample .= ' arg' . (int) $gvnsql_argn . '="..."'; | |
| 327 | +?> | |
| 328 | +<br><br><strong>This query uses shortcode arguments.</strong> Pass the values in the shortcode: | |
| 329 | +[gvn_schart<?php echo esc_attr($postfix); ?> id="<?php echo esc_attr($post->ID); ?>"<?php echo esc_html($gvnsql_argexample); ?>]. | |
| 330 | +The live preview below runs without them (every {arg} is 0), so check the real result on a page or post. | |
| 331 | +<?php } ?> | |
| 314 | 332 | </div> |
| 315 | 333 | <hr> |
| 316 | 334 | <h3 id="sqldemo" name="sqldemo">Live Preview <small style="font-weight:normal">(reflects the last saved state — press Update to refresh)</small></h3> |
| 317 | 335 | <?php |
| 336 | + $GLOBALS['guaven_sqlcharts_admin_preview'] = true; // filter inputs render disabled, see gvn_chart_top_form() | |
| 318 | 337 | echo do_shortcode('[gvn_schart' . esc_attr($postfix) . ' id="' . esc_attr($post->ID) . '" ' . ($gvnsql_meta('guaven_sqlcharts_tablepart') !== '' ? ' table="1"' : '') . ']'); |
| 338 | + $GLOBALS['guaven_sqlcharts_admin_preview'] = false; | |
| 319 | 339 | |
| 320 | 340 | } |
| 321 | 341 | ?> |
