Template:Mobility: Difference between revisions

Revision as of 10:49, 20 March 2025

This template dynamically generates a Mobility chart using data from DataSrc:T241. Usage: Simply insert

|option = {

   tooltip: {
     trigger: 'axis',
     axisPointer: { type: 'shadow' }
   },
   legend: {},
   dataset: [
     {
       id: 'raw',
       dimensions: ['mobility','status','participants'],
       source: [[[:Template:MobilityRowInline]],Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline]
     },
     {
       id: 'Student bachelor',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Student bachelor' }
       }
     },
     {
       id: 'Student master',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Student master' }
       }
     },
     {
       id: 'Student doctorate',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Student doctorate' }
       }
     },
     {
       id: 'Staff academic',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Staff academic' }
       }
     },
     {
       id: 'Staff administrative',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Staff administrative' }
       }
     },
     {
       id: 'Researcher',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Researcher' }
       }
     }
   ],
   xAxis: {
     type: 'category',
     // Categories (the mobility types) are read from the dataset's "mobility" field.
   },
   yAxis: {
     type: 'value'
   },
   series: [
     {
       name: 'Student bachelor',
       type: 'bar',
       datasetId: 'Student bachelor',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Student master',
       type: 'bar',
       datasetId: 'Student master',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Student doctorate',
       type: 'bar',
       datasetId: 'Student doctorate',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Staff academic',
       type: 'bar',
       datasetId: 'Staff academic',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Staff administrative',
       type: 'bar',
       datasetId: 'Staff administrative',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Researcher',
       type: 'bar',
       datasetId: 'Researcher',
       encode: { x: 'mobility', y: 'participants' }
     }
   ]

}

on a page.

}}

|option = {

   tooltip: {
     trigger: 'axis',
     axisPointer: { type: 'shadow' }
   },
   legend: {},
   dataset: [
     {
       id: 'raw',
       dimensions: ['mobility','status','participants'],
       source: [[[:Template:MobilityRowInline]],Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline,Template:MobilityRowInline]
     },
     {
       id: 'Student bachelor',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Student bachelor' }
       }
     },
     {
       id: 'Student master',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Student master' }
       }
     },
     {
       id: 'Student doctorate',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Student doctorate' }
       }
     },
     {
       id: 'Staff academic',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Staff academic' }
       }
     },
     {
       id: 'Staff administrative',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Staff administrative' }
       }
     },
     {
       id: 'Researcher',
       fromDatasetId: 'raw',
       transform: {
         type: 'filter',
         config: { dimension: 'status', '=': 'Researcher' }
       }
     }
   ],
   xAxis: {
     type: 'category',
     // Categories (the mobility types) are read from the dataset's "mobility" field.
   },
   yAxis: {
     type: 'value'
   },
   series: [
     {
       name: 'Student bachelor',
       type: 'bar',
       datasetId: 'Student bachelor',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Student master',
       type: 'bar',
       datasetId: 'Student master',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Student doctorate',
       type: 'bar',
       datasetId: 'Student doctorate',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Staff academic',
       type: 'bar',
       datasetId: 'Staff academic',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Staff administrative',
       type: 'bar',
       datasetId: 'Staff administrative',
       encode: { x: 'mobility', y: 'participants' }
     },
     {
       name: 'Researcher',
       type: 'bar',
       datasetId: 'Researcher',
       encode: { x: 'mobility', y: 'participants' }
     }
   ]

}

</includeonly>

@@ Line 1: / Line 1: @@
 <noinclude>
-This template dynamically generates a bar chart from the T241 data.
+This template dynamically generates a Mobility chart using data from DataSrc:T241.
-Usage: Insert {{Mobility}} on any page.
+Usage: Simply insert {{Mobility}} on a page.
 [[Category:Mobility]]
 </noinclude>
 <includeonly>
-<!-- Step 1: Define an inline row formatter for each data row -->
+<!-- Step 1: Define an inline JSON row formatter -->
 {{#vardefine: MobilityRowInline |
+<noinclude>Defines the JSON output for each row</noinclude>
+<includeonly>{
    "mobility": "{{{type_of_mobility}}}",
    "status": "{{{status_of_mobility_participant}}}",
    "participants": {{{participants|0}}}
+}</includeonly>
 }}
-<!-- Step 2: Query all rows from DataSrc:T241 and output them as a raw JSON array -->
+<!-- Step 2: Query all rows from DataSrc:T241 and store the raw JSON array -->
 {{#vardefine:rawData|
    {{#ask:
@@ Line 27: / Line 30: @@
 }}
-<!-- Step 3: Render the chart using ECharts -->
+<!-- Step 3: Render the Mobility bar chart using ECharts -->
 {{#echarts:
 | width=800px
@@ Line 93: / Line 96: @@
      ],
      xAxis: {
-       type: 'category'
+       type: 'category',
+      // Categories (the mobility types) are read from the dataset's "mobility" field.
      },
      yAxis: {