[Templates] Charts functionality

[ThuF]

Overview

• https://www.chartjs.org is used as a framework for the charts.
• Adds support for Bar, Line, Pie, Doughnut, Polar Area and Radar charts.
• Support of multiple datasets (multiple properties in the entity/report definition).
  • For better visualization of the Pie and Doughnut charts use single dataset (just one property in the entity/report definition).

Demo

charts-demo.mp4

Chart Data Queries

Data Count

select count(*) from
(
    select PROJECT_NAME as "Project",
        sum(TIMESHEET_HOURS) as "TotalHours",
        convert(avg(TIMESHEET_RATE), float) as "AverageRate",
        convert(sum(TIMESHEET_HOURS * TIMESHEET_RATE), float) AS "Total"
    from ${tablePrefix}PROJECT, ${tablePrefix}PROJECTASSIGNMENT, ${tablePrefix}TIMESHEET
    where PROJECT_ID = PROJECTASSIGNMENT_PROJECT and PROJECTASSIGNMENT_ID = TIMESHEET_PROJECTASSIGNMENT
    ${
        filter.Project && filter.StartPeriod && filter.EndPeriod ?
            'and PROJECT_ID = ? and TIMESHEET_STARTPERIOD >= ? and TIMESHEET_ENDPERIOD <= ?'
        :
        filter.Project && filter.StartPeriod ?
            'and PROJECT_ID = ? and TIMESHEET_STARTPERIOD >= ?'
        :
        filter.Project && filter.EndPeriod ?
            'and PROJECT_ID = ? and TIMESHEET_ENDPERIOD <= ?'
        :
        filter.StartPeriod && filter.EndPeriod ?
            'and TIMESHEET_STARTPERIOD >= ? and TIMESHEET_ENDPERIOD <= ?'
        :
        filter.Project ?
            'and PROJECT_ID = ?'
        :
        filter.StartPeriod ?
            'and TIMESHEET_STARTPERIOD >= ?'
        :
        filter.EndPeriod ?
            'and TIMESHEET_ENDPERIOD <= ?'
        :
            ''
    }
    group by PROJECT_NAME
)

Data Query

select PROJECT_NAME as "Project",
    sum(TIMESHEET_HOURS) as "TotalHours",
    convert(avg(TIMESHEET_RATE), float) as "AverageRate",
    convert(sum(TIMESHEET_HOURS * TIMESHEET_RATE), float) AS "Total"
from ${tablePrefix}PROJECT, ${tablePrefix}PROJECTASSIGNMENT, ${tablePrefix}TIMESHEET
where PROJECT_ID = PROJECTASSIGNMENT_PROJECT and PROJECTASSIGNMENT_ID = TIMESHEET_PROJECTASSIGNMENT
${
    filter.Project && filter.StartPeriod && filter.EndPeriod ?
        'and PROJECT_ID = ? and TIMESHEET_STARTPERIOD >= ? and TIMESHEET_ENDPERIOD <= ?'
    :
    filter.Project && filter.StartPeriod ?
        'and PROJECT_ID = ? and TIMESHEET_STARTPERIOD >= ?'
    :
    filter.Project && filter.EndPeriod ?
        'and PROJECT_ID = ? and TIMESHEET_ENDPERIOD <= ?'
    :
    filter.StartPeriod && filter.EndPeriod ?
        'and TIMESHEET_STARTPERIOD >= ? and TIMESHEET_ENDPERIOD <= ?'
    :
    filter.Project ?
        'and PROJECT_ID = ?'
    :
    filter.StartPeriod ?
        'and TIMESHEET_STARTPERIOD >= ?'
    :
    filter.EndPeriod ?
        'and TIMESHEET_ENDPERIOD <= ?'
    :
        ''
}
group by PROJECT_NAME
${
    filter["$limit"] && filter["$offset"] ?
        'limit ? offset ?'
    :
    filter["$limit"] ?
        'limit ?'
    :
    filter["$offset"] ?
        'offset ?'
    :
        ''
}

Bar Chart

Line Chart

Pie Chart

Pie Chart (Single Dataset)

Doughnut Chart

Doughnut Chart (Single Dataset)

Polar Area

Radar

Fixes: #3307

[ThuF]

TODO

• Consider using WebJar instead of CDN:

  "org.webjars.npm" % "chart.js" % "4.4.2"
  

  <dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>chart.js</artifactId>
    <version>4.4.2</version>
  </dependency>

Currently the CDN distribution is being used, as using the WebJar results into the following error:

		<!-- <script src="/webjars/chart.js/4.4.2/dist/chart.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>