How to develop a form_submission_statistics_generator (MySQL)

{
    "className": "org.joget.apps.userview.model.UserviewCategory",
    "properties": {
        "id": "category-8722A52FFBB64D058E2CD41174922807",
        "label": "Proposal Form Statistics"
    },
    "menus": [{
        "className": "org.joget.plugin.enterprise.SqlChartMenu",
        "properties": {
            "id": "807F165BFA9C4BB589E5B52E4C071250",
            "customId": "crm_proposal_monthly",
            "label": "Monthly Submission Chart",
            "chartType": "bar",
            "title": "Proposal Form Monthly Submission Chart",
            "categoryAxisLabel": "Month",
            "xAxisDisplayAS": "",
            "valueAxisLabel": "Number",
            "yaxisPrefix": "",
            "showLegend": "",
            "showValueLabel": "true",
            "stack": "",
            "horizontal": "",
            "chartWidth": "100%",
            "chartHeight": "80%",
            "colors": "",
            "query": "SELECT DATE_FORMAT(STR_TO_DATE(m.monthYear, '%c-%Y'),'%b %y') as monthYear, COUNT(fd.dateCreated) AS 'Number'\nFROM \n(\n    SELECT my.month, CONCAT(my.month, '-', IF(('#requestParam.year?sql#' REGEXP '^[0-9]{4}$'), '#requestParam.year?sql#' , '#date.yyyy?sql#')) AS monthYear FROM (\n        SELECT 1 AS month UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION SELECT 10 UNION SELECT 11 UNION SELECT 12\n    ) my\n) m\nLEFT JOIN \n(\n\t  select dateCreated FROM app_fd_crm_proposal\n) fd\nON m.monthYear=DATE_FORMAT(fd.dateCreated,'%c-%Y')\nGROUP BY monthYear\nORDER BY m.month",
            "customHeader": "<div class=\"filter\">\n    <form action=\"?\" method=\"GET\">\n        <label>Year: <\/label><input name=\"year\" value=\"#requestParam.year?html#\"\/>\n        <input type=\"submit\" value=\"Show\"\/>\n    <\/form>\n<\/div>\n<script>\n    $(function(){\n        if ($(\"[name='year']\").val() === \"\") {\n            $(\"[name='year']\").val(\"#date.yyyy#\");\n        }\n    });\n<\/script>\n<br\/>\n<br\/>",
            "customFooter": "",
            "datasource": "default",
            "keyName": ""
        }
    }, {
        "className": "org.joget.plugin.enterprise.SqlChartMenu",
        "properties": {
            "id": "39E2163319D84FD693D164D92FA93C06",
            "customId": "crm_proposal_daily",
            "label": "Daily Submission Chart",
            "chartType": "bar",
            "title": "Proposal Form Daily Submission Chart",
            "categoryAxisLabel": "Date",
            "xAxisDisplayAS": "",
            "valueAxisLabel": "Number",
            "yaxisPrefix": "",
            "showLegend": "",
            "showValueLabel": "true",
            "stack": "",
            "horizontal": "true",
            "chartWidth": "100%",
            "chartHeight": "80%",
            "colors": "",
            "query": "SELECT d.date_field, COUNT(fd.dateCreated) AS 'Number'\nFROM\n(\n    SELECT\n        MAKEDATE(IF(('#requestParam.year?sql#' REGEXP '^[0-9]{4}$'), '#requestParam.year?sql#' , '#date.yyyy?sql#'),1) +\n        INTERVAL (IF(('#requestParam.month?sql#' REGEXP '^[0-9]{2}$'), '#requestParam.month?sql#' , '#date.MM?sql#') -1) MONTH +\n        INTERVAL daynum DAY date_field\n    FROM\n    (\n        SELECT t*10+u daynum\n        FROM\n            (SELECT 0 t UNION SELECT 1 UNION SELECT 2 UNION SELECT 3) A,\n            (SELECT 0 u UNION SELECT 1 UNION SELECT 2 UNION SELECT 3\n            UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7\n            UNION SELECT 8 UNION SELECT 9) B\n        ORDER BY daynum\n    ) AA\n) d\nLEFT JOIN \n(\n\t  select dateCreated FROM app_fd_crm_proposal\n) fd\nON d.date_field=DATE_FORMAT(fd.dateCreated,'%Y-%m-%d')\nWHERE DATE_FORMAT(d.date_field,'%m') = IF(('#requestParam.month?sql#' REGEXP '^[0-9]{2}$'), '#requestParam.month?sql#' , '#date.MM?sql#')\nGROUP BY d.date_field\nORDER BY d.date_field desc",
            "customHeader": "<div class=\"filter\">\n    <form action=\"?\" method=\"GET\">\n        <label>Year: <\/label><input name=\"year\" value=\"#requestParam.year?html#\"\/>&nbsp;&nbsp;&nbsp;\n        <label>Month: <\/label><select name=\"month\"\/>\n            <option value=\"01\">Jan<\/option>\n            <option value=\"02\">Feb<\/option>\n            <option value=\"03\">Mar<\/option>\n            <option value=\"04\">Apr<\/option>\n            <option value=\"05\">May<\/option>\n            <option value=\"06\">Jun<\/option>\n            <option value=\"07\">Jul<\/option>\n            <option value=\"08\">Aug<\/option>\n            <option value=\"09\">Sep<\/option>\n            <option value=\"10\">Oct<\/option>\n            <option value=\"11\">Nov<\/option>\n            <option value=\"12\">Dec<\/option>\n        <\/select>\n        <input type=\"submit\" value=\"Show\"\/>\n    <\/form>\n<\/div>\n<script>\n    $(function(){\n        if ($(\"[name='year']\").val() === \"\") {\n            $(\"[name='year']\").val(\"#date.yyyy#\");\n        }\n        if ($(\"[name='month']\").val() !== \"#requestParam.month?javascript#\" \n            && '#requestParam.month?javascript#' !== \"\"\n            && $(\"[name='month'] option[value='#requestParam.month?javascript#']\").length > 0 ) {\n            $(\"[name='month']\").val('#requestParam.month?javascript#');\n        } else {\n            $(\"[name='month']\").val(\"#date.MM#\");\n        }\n    });\n<\/script>\n<br\/>\n<br\/>",
            "customFooter": "",
            "datasource": "default",
            "keyName": ""
        }
    }]
}