insights-tiles

Overview

This library contains the React components for the tiles. Currently being used in insights-class-insights.

Version Handling

This repository is part of Orcavenger's CI pipeline. On merge to master the minor version will increment automatically, and tagged for release. If you want to increment the major version write [increment major] in the box provided when merging. If you want to increment the patch version write [increment patch] in the box provided when merging. There is no need for a developer to manually update this module's version.

Usage

Inactive Aggregation Tile [Engagement]

Use this tile to display the number of student have have not accessed the course in the past 7 days in an aggregation tile. You can find an example usage at insights-class-insights.

Argument	Required	Type	Description
data	Yes	{students: [{lastCourseAccess: moment(x)}]}	Used to compute the value and description of the resulting aggregation tile.
filterdData	Yes	{students: [{lastCourseAccess: moment(x)}]}	Used to compute the value and description of the resulting aggregation tile.
filters	Yes	Dictionary	A dictionary of active filters
context	Yes	{timezone: 'some/Timezone'}	Will be used to determine the timezone
setFilter	Yes	func(key, filters)	Callback that takes a key and array of filters.
removeFilter	Yes	func(filtersName)	Callback that takes the name of a filter and removes it.
```
<NumberOfInactiveStudentsTile
data={classroomData}
filteredData={classroomData}
filters={[f1, f2, ... fn]}
context={{timezone: 'someTimezone'}} />
setFilter={function(name, filter) {//do something}}
removeFilter={function(filterName) {//do something}}
```

Computing Aggregation Tile

Use this tile to configure an aggregation tile that will display some value and description that is computed by the dataset it is given. You are responsible for ensuring the functions for computing the value, description.

Argument	Required	Type	Description
click	No	func()	Determine action taken when tile is clicked.
computeDescription	Yes	func(computedValue, data, computedMetaValue, metaData)	Function used to compute the description.
computeDisability	Yes	func(computedValue, data, computedMetaValue, metaData)	Function used to determine if the tile should be disabled.
computeMetaValue	No	func(metaData)	Function used to compute extra information
computeValue	Yes	func(data, computedMetaValue, metaData)	Function used to compute the aggregated value
data	Yes	any	Used to compute the value and description of the resulting aggregation tile.
metaData	No	any	Extra information that may be required for computeValue, computeDisability or computeDescription.
```
<ComputingAggregationTile
click={onclickFunction()}
computeDescription={computingDescriptionFunction(computedValue, data, computedMetaValue, metaData)}
computeDisability={this.computingDisabilityFunction(computedValue, data, computedMetaValue, metaData)}
computeMetaValue={computingMetaValueFunction(metaData)}
computeValue={computingValueFunction(data, computedMetaValue, metaData)}
data={yourDataset}
metaData={yourDataset} />
```
#### Aggregation Tile
Use this tile if you already know the final value for your aggregation and the associated description.

Argument	Required	Type	Description
data	Yes	{value: aggregatedValue, description: description}	Determines what to display on the tile.
disabled	No (Default: false)	boolean	When the tile is disabled it is unclickable and greyed out.
click	No	func()	Determine action taken when tile is clicked.
selected	No (Default: false)	boolean	The state of the tile, passed down from the parent (usually via flux or implied by whether filter is applied or not)
freezeOnZero	No. (Default: false)	boolean	clearFilter('search-bar')
```
<AggregationTile
data={{value: expectedValue, description: expectedDescription}}
disabled={true/false}
click={expectedClick}
selected={true/false}
freezeOnZero={true/false} />
```
#### Grade Distribution Tile
Argument	Required	Type	Description
-------------------	-------------	---------	--------------
data	Yes	Object	The unfiltered set of student data
filteredData	Yes	Object	The filtered set of student data
langTerms	Yes	Object	Lang terms for the component
setFilter	Yes	func()	Callback from parent to run when filter from this tile should be applied
removeFilter	Yes	func()	Callback from parent to run when filter from this tile should be removed
filters	Yes	Object	The set of currently active filters
```
<GradeDistributionTile
data={students:[array of student data]}
filteredData={students:[array of filtered student data]}
langTerms={Object containing lang terms}
setFilter={setFilterCallback}
removeFilter={removeFilterCallback}
filters={KVP object of current filters}
/>
```

Example Student Object:

{
    "firstName": "string", //User's first name
    "lastName": "string", //User's last name
    "studentId": "string", //User's username (Login name)
    "studentNumber": "string", //User's Org Defined ID
    "userId": "int", //User's D2LID (duplicate)
    "key": "int", //User's D2LID
    "currentGrade": "int", //Aggregated value that represents the users current grade
    "lastCourseAccess": "Moment.js object with LE timezone",
    "predictedGrade": "int", //Aggregated value that predicts the user's final grade (via S3)
    "threadsStarted": "int", //Aggregated count of threads the user has started
    "postsRepliedTo": "int", //Aggregated count of posts the user has replied to
    "fullName": "string", //full name of the student
    "discussions": "int" //value that represents the sort
}