Chart Rendering

We use ApexCharts to render our charts, which is a JavaScript charting library that allows developers to create interactive and visually appealing charts for web applications. It is powerful because it is highly customizable and can create a wide variety of charts, including line, bar, area, scatter, and pie charts, among others. Additionally, it supports a wide range of data formats, allowing developers to easily integrate it with their existing data sources. Finally, it is open-source and has a large community of developers contributing to its development and maintenance.

Chart rendering involves two parts: the first part is aggregating data from the database, and the second part is writing a React component that renders the UI given specific data.

Thanks to Prisma, querying data is extremely easy because you do not have to write any raw SQL. Prisma does all the hard work for you to synthesize the optimized SQL. Here is an example Prisma query to find all teams' performance:

const rawSeries = await prisma.project.findMany({
  where: {
    course: {
      code: "COMP0067"
    }
  },
  select: {
    teamAssessments: {
      select: {
        week: true,
        performance: true
      }
    }
  }
});

This query above finds all team assessment data for the course with code "COMP0067". Here we query the week and performance fields from the database. The example data contained in the raw series will be like this:

{
	teamAssessments: [
		{
			week: 1,
			performance: "Green"
		},
		{
			week: 2,
			performance: "DarkGreen"
		},
		{
			week: 3,
			performance: "Amber"
		},
		...
	]
}

The next step is to process the data into a suitable format so that we can pass it to ApexCharts and render it in the frontend.

For example, the processed data will be like:

{
	"Green": [12, 13, ...., 24],
	"DarkGreen": [1, 4, ..., 32],
	...
}

Each array has a fixed length which is equal to the maximum week number, and each element of the array represents the number of teams that score a certain value at a certain week. For example, "Green": [12, 13, ...., 24] indicates the number of teams that score Green in week 1 is 12, and the number of teams in week 2 is 13, etc. We send this data to our React component written by following the JSX expression, where series is the data we are going to pass in:

<ReactApexChart options={...} series={...} type="bar" />

We use the same technique to render other charts. For example, to render a line chart for a student's overall performance, we need to:

1. Query the necessary data from the database using Prisma. This data should include the user's performance and week number for a specific course.
2. Process the data into a suitable format so that we can pass it to ApexCharts. This format should include an array of objects, where each object represents a data series for the chart. Each object should have a name property and a data property. The name property should be a string that represents the name of the data series. The data property should be an array of objects, where each object represents a point on the chart. Each point should have an x property and a y property. The x property should represent the week number, and the y property should represent the numerical value of the performance.
3. Define the options object for the chart. This object should include configuration options such as the chart title, legend, and axis labels.
4. Render the line chart in the React component using the ReactApexChart component from ApexCharts. Pass in the options object and the processed data as the series object to this component.

Similarly, by following these steps, we can use ApexCharts to render a line chart for a student's overall performance. As we can see, ApexChart offers great versatility when it comes to chart rendering. It is really convenient for developers to render multiple types of charts that are guaranteed to be clear, convincing, and colorful.