| @@ -677,8 +677,14 @@ | ||
| 677 | 677 | } |
| 678 | 678 | |
| 679 | 679 | function gvn_chart_top_form($atts){ |
| 680 | 680 | if (get_post_meta($atts["id"],'guaven_sqlcharts_formpartrole',true)!='' and !is_user_logged_in()) return; |
| 681 | + // Inside the chart builder's live preview the filter inputs are rendered disabled and without a <form> | |
| 682 | + // or submit button: the preview sits inside WordPress's own post edit form, nested forms are dropped | |
| 683 | + // by the browser, and a filter named e.g. "post_type" would otherwise be submitted with the post and | |
| 684 | + // make WordPress stop with "A post type mismatch has been detected." (chart settings not saved). | |
| 685 | + $preview = !empty($GLOBALS['guaven_sqlcharts_admin_preview']); | |
| 686 | + $dis = $preview ? ' disabled' : ''; | |
| 681 | 687 | $topform='';$dateexists=false; |
| 682 | 688 | $variables_raw=get_post_meta($atts['id'],'guaven_sqlcharts_variables',true); |
| 683 | 689 | $variables_raw=explode("|",$variables_raw); |
| 684 | 690 | foreach ($variables_raw as $vrow){ |
| @@ -690,14 +696,14 @@ | ||
| 690 | 696 | if ($vrow_arr[3]=='date') { |
| 691 | 697 | $dateexists=true; |
| 692 | 698 | $topform.= '<span class="gvn-filter-field"><label>'.$vrow_arr[2].'</label> <input class="gws_datepicker" autocomplete="off" type="text" |
| 693 | 699 | value="'.$gvalue.'" |
| 694 | - data-toggle="datepicker" name="'.$vrow_arr[0].'" placeholder="'.$dvalue.'"></span> | |
| 700 | + data-toggle="datepicker" name="'.$vrow_arr[0].'" placeholder="'.$dvalue.'"'.$dis.'></span> | |
| 695 | 701 | ';} |
| 696 | 702 | else { |
| 697 | 703 | $topform.= '<span class="gvn-filter-field"><label>'.$vrow_arr[2].'</label> <input autocomplete="off" |
| 698 | 704 | type="'.$vrow_arr[3].'" |
| 699 | - value="'.$gvalue.'" name="'.$vrow_arr[0].'" placeholder="'.$dvalue.'"></span> | |
| 705 | + value="'.$gvalue.'" name="'.$vrow_arr[0].'" placeholder="'.$dvalue.'"'.$dis.'></span> | |
| 700 | 706 | '; |
| 701 | 707 | } |
| 702 | 708 | } |
| 703 | 709 | if (!empty($topform)) { |
| @@ -714,12 +720,14 @@ | ||
| 714 | 720 | 'class' => array(), |
| 715 | 721 | 'data-toggle'=>array(), |
| 716 | 722 | 'placeholder'=>array(), |
| 717 | 723 | 'autocomplete'=>array(), |
| 724 | + 'disabled'=>array(), | |
| 718 | 725 | 'style'=>[] |
| 719 | 726 | ), |
| 720 | 727 | 'span' => array('class' => array()), |
| 721 | 728 | 'label' => array(), |
| 729 | + 'div' => array('class' => array()), | |
| 722 | 730 | ); |
| 723 | 731 | |
| 724 | 732 | $submit_button_value = get_post_meta($atts['id'], 'guaven_sqlcharts_formpartbutton', true) != '' |
| 725 | 733 | ? esc_attr(get_post_meta($atts['id'], 'guaven_sqlcharts_formpartbutton', true)) |
| @@ -724,10 +732,14 @@ | ||
| 724 | 732 | $submit_button_value = get_post_meta($atts['id'], 'guaven_sqlcharts_formpartbutton', true) != '' |
| 725 | 733 | ? esc_attr(get_post_meta($atts['id'], 'guaven_sqlcharts_formpartbutton', true)) |
| 726 | 734 | : 'OK'; |
| 727 | 735 | |
| 728 | - $topform = '<form method="get" action="" class="guaven_sqlcharts_form">' . $topform . ' | |
| 736 | + if ($preview) { | |
| 737 | + $topform = '<div class="guaven_sqlcharts_form">' . $topform . '<input type="submit" value="' . $submit_button_value . '" disabled></div>'; | |
| 738 | + } else { | |
| 739 | + $topform = '<form method="get" action="" class="guaven_sqlcharts_form">' . $topform . ' | |
| 729 | 740 | <input type="submit" value="' . $submit_button_value . '"></form>'; |
| 741 | + } | |
| 730 | 742 | |
| 731 | 743 | echo wp_kses($topform, $allowed_html); |
| 732 | 744 | } |
| 733 | 745 | } |
| @@ -985,11 +997,12 @@ | ||
| 985 | 997 | } |
| 986 | 998 | return $has_point ? $out : false; |
| 987 | 999 | } |
| 988 | 1000 | |
| 989 | -// X scale options for time-axis mode; gvnSqlChartsTimeTick (asset/front.js) formats the ticks as dates | |
| 1001 | +// X scale options for time-axis mode (globals from asset/front.js): gvnSqlChartsTimeTicks replaces the evenly | |
| 1002 | +// spaced ticks Chart.js generates on a linear scale with the actual data dates, gvnSqlChartsTimeTick formats them | |
| 990 | 1003 | function guaven_sqlcharts_time_axis_scale(){ |
| 991 | - return "type: 'linear', offset: true, ticks: {callback: gvnSqlChartsTimeTick, maxRotation: 45},"; | |
| 1004 | + return "type: 'linear', offset: true, afterBuildTicks: gvnSqlChartsTimeTicks, ticks: {callback: gvnSqlChartsTimeTick, maxRotation: 45, autoSkip: true},"; | |
| 992 | 1005 | } |
| 993 | 1006 | // extra entry for the Chart.js "plugins" object in time-axis mode (tooltip title shown as a date) |
| 994 | 1007 | function guaven_sqlcharts_time_axis_plugins($time_points){ |
| 995 | 1008 | return $time_points !== false ? 'tooltip: {callbacks: {title: gvnSqlChartsTimeTooltipTitle}}' : ''; |
| @@ -1027,9 +1040,9 @@ | ||
| 1027 | 1040 | echo wp_kses(guaven_sqlcharts_colorgenerator(count($points), 0, 0.2, guaven_sqlcharts_colors($i, $pid)),[]); |
| 1028 | 1041 | ?> |
| 1029 | 1042 | ], |
| 1030 | 1043 | borderWidth: 1, |
| 1031 | - <?php if ($time_points !== false) echo 'maxBarThickness: 48,'; ?> | |
| 1044 | + <?php if ($time_points !== false) echo 'barThickness: 24,'; // fixed width: on a time axis Chart.js would otherwise size bars from the closest pair of dates ?> | |
| 1032 | 1045 | data: [<?php |
| 1033 | 1046 | echo wp_kses(implode(",", $points),[]); |
| 1034 | 1047 | ?>], |
| 1035 | 1048 | }, |
