-
Notifications
You must be signed in to change notification settings - Fork 5
Technical Documentation
- See the codebook for a high level summary of the data set
- View a title for the codebook along with total columns shown
- Navigate to the codebook, data listing, chart maker, and settings tabs
- Create custom labels for tabs
- View controls header along with total rows shown
- Show/hide the codebook controls
- Change the input on the group by filter and see an updated chart
- Change display type on categorical grouped variables
- View a tab header that explains the tab's functionality
- Select the type of metadata to appear in the header details for all charts and individual charts
- Show/hide all of the charts in the codebook
- View a loading indicator when the system is processing input
- Highlight a bar in a chart and see that subset of data highlighted in all charts
- View the metadata provided for each variable
- Turn off/on standard axes for continuous variables
- Summarize categorical variables by rate or frequency
- Sort levels on categorical variables with more than 5 levels
- Change the input on the data filters, and see an updated chart
- Display metadata when hovering over a bar, histogram, dot plot, box plot, and data values
- View data listings
- Search for a term
- Sort the data listing by clicking on the column header
- View data in multiple pages using pagination
- Export the data listing to a .csv file
- Create custom charts comparing 2 variables from the raw data set
- Update the codebook settings
- Update filters and groups columns
- Add custom labels to variables
- Hide columns by default
- Update the codebook's data file
Above the navigation and controls is a header showing the name of the file in the following format: 'myFileName' Codebook. The name of the file used to create the codebook is inserted into the title.
The header also displays the number of columns being summarized in the codebook. This statement provides the total number of data set columns shown in the codebook in integers as well as percentages to one decimal place. In the default view, column data is included in the codebook, or 100%. When columns are hidden or unhidden by the user, the number of data set rows shown at the top of the page may increase or decrease, depending on the variable selected.
The codebook has navigation tabs so the user can access the codebook, data listing, chart maker, and settings views. When less than 2 tabs are available to a user, the navigation tabs will be automatically hidden. Additional settings can be applied to create custom labels for the tabs in this chart.
The controls header is located at the top of the controls panel, underneath the navigation tabs. This header includes the title "Controls" to explain the content included below it.
The header also displays the number of rows being summarized in the codebook. The statement provides the total number of data set rows shown in the codebook in integers as well as percentages of to one decimal place. In the default view, all row data is included in the codebook, or 100%. When filters are used, the data shown in the codebook is manipulated and the number of data set rows shown at the top of the page may increase or decrease, depending on the variable selected.
Users can opt to show or hide the codebook controls. By clicking on the button in the top right of the codebook controls box, the controls will disappear when the user selects "Hide" and reappear when the user selects "Show". The controls included in the codebook controls box are the group by feature, show/hide all charts, and the filters.
This drop-down menu is used to group the data by a selected variable. One group variable can be selected at a time. The default group variable is set to none, but the default can be adjusted to any group upon the project team's request. Users can select any variable associated with the data file and may vary by data file. Selecting a group will display the file's data points by group. Display Type: Another feature that categorical variables assume when the data is grouped is the ability to display the data as paneled bar charts or as grouped dot plots. This feature is available for all categorical variables with 5 or fewer levels. The default is set to show the data as a paneled bar chart.
The tab header is located directly below the controls and includes a text explanation of functionality of the given tab. This header also and introduces tab-specific controls, if applicable.
The "Show All Charts" and "Hide All Charts" buttons are located beneath the controls section in the codebook header. The "Show All Charts" button allows users to show all of the charts within the codebook on a single click and the "Hide All Charts" button allows users to hide all of the charts within the codebook on a single click. Charts can also be expanded or collapsed individually by clicking the grey arrow to the left of the variable name. There are configuration options to show or hide all charts by default.
This indicator appears when a user is grouping by a variable, highlighting, filtering, or manipulating the charts and the chart is processing the input. The indicator is intended to let the user know that the input has been received and the chart should update with the changes momentarily.
Users can implement settings in the object model that hides selected columns on default. This option to hide columns when a chart is loaded is dictated by the needs of the study team. These columns can still be accessed by changing the settings in the settings tab.
Users can click on a bar to highlight that subset of the data. Once a bar is selected, the color of the bar will change from grey to orange. The codebook will also highlight that subset of data in all of the other charts in the codebook. Once a bar has been highlighted, the number of records affected will be noted in controls title next to number of rows selected. Users can select multiple grey bars to highlight and add their values to the highlighted population. Selecting a bar with highlight will remove the highlight from that bar and all associated highlighted data. In addition to highlighting the selected data in the codebook, highlighted records will have an orange background in the data listing view and will be sorted to appear first in the data listing. Users can remove the highlight by selecting the "Clear Highlighting" button and the highlight will reset if the user selects a grouping variable, changes the file, or changes a setting in the codebook.
A title of each variable is provided in bold text along with the number and percentage of missing values. Missing values above a predetermined threshold will be shown in red. Each header will also shown a small data summary graphic that mimics the distribution shown in the chart. Continuous variables will include summary statistics, including mean, standard deviation, median, min, and max. Categorical variables will include the number of unique values for each variable and the most frequent values represented.
Categorical variables will either be displayed as a horizontal or vertical bar chart. Categorical variables that contain 5 or fewer levels will be a horizontal bar chart and categorical variables with more than 5 levels will be rendered as a vertical bar chart. Continuous variables are summarized graphically using a combination histogram/boxplot. Charts can also include column metadata to the right of each vertical bar if the user chooses to include it.
Displayed under the row of filters, this statement provides the total number of data set columns shown in the codebook. The statement also displays the number of data set rows in integers as well as the percentage of rows to one decimal place. The total number of columns is static when the user manipulates the data, but the number of rows shown changes. In the default view, all row data is included in the codebook, or 100%. When filters are used, the data shown in the codebook is manipulated and the number of data set rows shown at the top of the page may increase or decrease, depending on the variable selected. When columns are hidden or unhidden, the number of columns changes.
When the user groups the data, a checkbox titled "Standardize axes across panels?" will display for continuous variables. Selecting this checkbox causes the range for the panels to conform to the same scale. Unselecting the checkbox causes each panel to yield an individual range for the data.
Categorical variables can be summarized by rate or frequency. The default is to show the data by rate, which shows the data as a percentage. When the user selects to summarize the data by frequency, the data changes to counts.
Categorical variables with more than 5 levels will show the option to sort the levels alphabetically, in ascending, or in descending order. The default is to show the data in alphabetical order.
The chart can be configured to have any number of data filters. Each column provided in the data set can be loaded into a specified filter with a drop-down menu. These filters can be used to filter the data records captured in the codebook. If the data is filtered down to values that do not match any data points, then a message will display stating “No values selected. Update the filters above or load a different data set.”
By moving a mouse cursor over a continuous variable's bar in the chart, users can view metadata for some variables. Hovering the cursor over a particular bar will display the n and the range for that data point. Hovering over a vertical bar will display metadata (n and an additional variable) and hovering over a horizontal bar will display metadata (variable, n, percent, and number and line corresponding to difference from overall rate). Hovering over one of the data values listed underneath a categorical variable will display the n and hover over the "…" in a variable with continuous data will display the number of values not shown. When categorical data is grouped, users can hover over a grouped dot plot to display its metadata (variable, n, and percent).
The data listing tab takes the user to another screen to view the underlying data records in the codebook. The data captured here can be filtered and grouped like the codebook.
This view allows the user to search for a specific term to locate it in the data. To initiate this feature, users can type text into the box and the entry automatically searches through the data listing and displays results with matching text. To return to the default view, the user can click in the search box and delete the entered text.
Users can click on a column header and sort the data within a column in ascending and descending order. The first time a user clicks the column header, the column is sorted in ascending order and a box appears above the data listing containing the variable name that has been selected and an arrow indicating the direction of the ordered data. When a user clicks the column header a second time, the data will be sorted in descending order and the direction of the arrow in the box above the data listing will change to match the new sort. The box containing the variable name can be closed out.
On the bottom of the page in the data listing, there is pagination and links to other pages of records. Each page defaults to show 25 records, so the pagination allows users to explore more data records than what is presented on the default page.
Users can download the data as a CSV by clicking on the 'CSV' button located underneath the chart within the detailed view. The CSV file will contain all of the data if no filters have been utilized. If filters have been used, the CSV file will contain the resulting data. The file will also capture any sorting that has been initialized in the data. The CSV download will be named using the following convention: webchartsTableExport, date, and time.
This tab allows users to create custom charts to compare 2 variables from the loaded data set. The user can use the x-axis and y-axis drop-down menus to select any column from the data. Grouping by a variable will panel the charts automatically and add the variable options as labels to the charts. This chart maker supports 4 chart types that render automatically in repose to the type of variables selected by the user. When x and y are both continuous, a scatter plot is created; when x is continuous and y is categorical, a horizontal dot plot is created; when x is categorical and y is continuous, a vertical dot plot is created; when x and y are both categorical, a stacked bar chart is created along with a legend. Additionally, all highlighting done in the codebook is also reflected as orange data points in the charts created by the Chart Maker.
The settings tab takes the user to another screen to view and edit the codebook settings. These settings include manipulating the ability to group by, filter by, and hide variable columns.
When the settings column is accessed, users can choose to add or remove columns from the codebook interface by checking or unchecking a box in a row with the column. Users can manipulate a column's ability to group by, filter by, or hide that variable.
Users can add labels for each variable name can also be added within the settings to display a user-defined label next to each variable name; these labels will also appear in the data listing tab when a user hovers over the variable name.
The files table takes users to another screen to view files that can be loaded into the codebook. The tab shows a list of available files, and once a file is selected, a codebook is created for that file. The title, row count, and column count updates when a new file is selected.
- Confirm that all charts are hidden as a default on initial load
- Confirm that the following settings hide all charts on initial load: {"chartVisibility":"minimized"}
- Confirm that the following settings show all charts on initial load: {"chartVisibility":"visible"}
- Confirm that the following settings remove all charts on initial load: {"chartVisibility":"hidden"}
- Confirm that the codebook has a title in the following format (myFileName Codebook) using the following settings: {"dataName":"myFileName"}
- Confirm that the number and percentage of columns in the header is displaying correctly
- Confirm that the codebook has the following navigation options: codebook, data listing, charts, and settings (icon)
- Confirm that using the following settings removes the navigation when fewer than 2 tabs are rendered: {"tabs":["codebook"]}
- Confirm that using the following settings produces a tab with a custom label: { "tabs":[ "codebook", {"key":"settings","label":"Settingz","instructions":"Set!"} ] }
- Confirm that the number and percentage of data rows displayed in the current view is working correctly by using a filter and noting a change in the number and percentage of rows shown
- Confirm that selecting the "Hide" button to the right of "Codebook Controls" hides the controls menu
- Confirm that selecting the "Show" button to the right of "Codebook Controls" shows the controls menu
- Confirm that there is a text explanation for the tab’s functionality
- Confirm that clicking “Show All Details” opens a chart for each variable
- Confirm that clicking “Hide All Details” closes each variable’s chart
- Expand variable rows by clicking on the grey arrow beside the variable ID
- Collapse variable rows by clicking on the grey arrow beside the variable ID
- Confirm that SITEID renders as categorical by default
- Change variableTypes for SITEID to continuous using CAT - confirm that the continuous chart is rendered in the codebook tab. Change it back to cagetorical, and confirm that it displays the categorical chart.
- Set the variableType for SITEID to 'continuous' and then 'categorical' using the meta parameter and confirm the correct chart renders. Use these text settings: (See the example under Test Notes here https://github.com/RhoInc/web-codebook/issues/128)
- Confirm that "variableType" takes precedence over "meta", try the various combinations of "continuous" and "categorical" and confirm the chart renders as expected: (See the example under Test Notes here https://github.com/RhoInc/web-codebook/issues/128)
- Confirm that continuous variables are marked with a "#", categorical variables (with unique levels <= config.maxLevels) are marked with "cat" and categorical variables (with unique levels > config.maxLevels) are marked as 'abc' indicating a character variable.
- Change the maxLevels option using CAT (e.g. settings of
{maxLevels:10}) and confirm that the type indicator updates as expected. - Open a character variable and confirm that no chart is drawn until the link is clicked, at which time a vertical bar chart is drawn.
- Confirm that character variable displays work when a group variable is selected.
- Change the type of some variables in the settings tab and confirm that the "#" appears/disappears as expected.
- Confirm that changing a character variable (like "RACE") to "continuous", and confirm that all values are given as missing.
- Confirm that missing values are no longer counted as a unique level for categorical variables. For example, AESEQ in the default ADAE data set in CAT should have 5 unique levels (not 6).
- Confirm that non-numeric variables are treated as missing when type is set to "continuous". This can be tested on any data set in CAT by toggling a character variable ("RACE", "SEX", etc) to a type of "continuous" on the settings page.
- Confirm that horizontal bar charts are being displayed for categorical variables with 5 or fewer levels. Confirm that these charts display an x-axis
- Confirm that vertical bar charts are being displayed for categorical variables with more than 5 levels. Confirm that these charts do not display an x-axis
- Confirm that the "Summarize by" drop-down is working correctly for categorical variables and offers the options: "rate" and "frequency"
- Confirm that the “Sort levels” drop-down is working correctly for vertical bar charts and offers the options: “Alphabetical”, “Ascending”, and “Descending”
- Confirm that a histogram chart renders for continuous variables
- Confirm that outliers are in the box plot for continuous charts lots of outliers (n>100). Message should be printed in console (e.g.
clinical-trials/sdtm/lb.csvin CAT)
- Confirm that all chart types are behaving as expected when using the “Group by” control
- Confirm that grouping by variables prompts the loading indicator to appear
- Confirm that the "Display Type" drop-down is working correctly for horizontal bar charts when the user groups the data by a variable and offers the options: "Paneled (Bar Charts)" or "Grouped (Dot Plot)"
- Confirm that the "Standardize axes across panels" checkbox appears for continuous variables when the user group the data by a variable
- Confirm that when checkbox is clicked, all x- and y-axis should have the same range for all panels
- Confirm that when checkbox is not clicked, x- and y-axis should vary to match the range for each individual panel
- Change the input on the data filters, confirm the chart updates
- Confirm that manipulating the filters prompts the loading indicator to appear
- Confirm that an error message displays if you filter the data down to values that do not match any data points
- Confirm using the settings tab to toggle between "continuous" and "categorical" type for various columns. Make sure that the chart type updates and the codebook view generally functions as expected.
- Confirm that filters that include missing values now show "[No Value Provided]" instead of just an empty string, and that the filters still work as expected. This can be seen for several filters (AESER, AEONGO) with the default data set in CAT.
- Confirm that the "group by" control is hidden when no grouping variables are available. This can be tested on any data set by going to the settings tab and unchecking all group variables.
- Confirm that clicking on a bar highlights a subset of the data in orange highlight
- Confirm that highlighting prompts the loading indicator to appear
- Confirm that the number of highlighted records is noted in the controls title next to the number of rows selected
- Confirm that corresponding data to data in the selected bar should be drawn in all other bar charts
- Confirm that clicking multiple bars adds new data to the subset of highlighted data
- Confirm that the rows for the highlighted records have an orange background in the data listing view and they are shown first in the listing
- Confirm that the highlighted data points appear in scatter plots, horizontal, and vertical charts created in the chart maker tab
- Confirm that clicking the column headers in the data listing view sorts the data as expected
- Confirm that clicking the "Clear Highlighting" button removes all highlight functionality
- Confirm that filtering the data resets the highlight
- Confirm that selecting a grouping variable resets the highlight
- Confirm that changing a setting on the settings page resets the highlight
- Confirm that changing the value in the “Summarize by” drop-down for a chart does not remove the highlighting
- Confirm that changing the value in the “Sort levels” drop-down for a chart does not remove the highlighting
- Hover over a vertical bar to confirm it displays metadata (n and an additional variable)
- Hover over a horizontal bar to confirm it displays metadata (variable, n, percent, and number and line corresponding to difference from overall rate)
- Hover over a grouped dot plot to confirm it displays metadata (variable, n, and percent)
- Hover over a histogram to confirm it displays metadata (n and range)
- Hover over a histogram's value metadata to confirm that the "..." displays the number of values shown
- Hover over a box plot under a histogram to confirm it displays metadata (n, mean, SD, and/or quartile)
- Confirm that mousing over the "100% missing" text and confirm that the missing values are listed in the tooltip.
- Confirm that the “Show All Charts” and “Hide All Charts” buttons are not available in the data listing
- Change the input on the data filters, confirm that the listing updates
- Click a column header to confirm that it sorts the data values
- Click the “x” on the sorted column name box and confirm that the box disappears
- Confirm that selecting the CSV export button allows the user to download a CSV of the data shown
- Confirm pagination is listed at the bottom of the page and the page links work
- Type a value into the search box and confirm that the data listing updates
- Delete the entered value from the search bar and confirm that the data listing resets
- Confirm that selecting a categorical x-axis variable and a categorical y-axis variable renders a stacked bar chart and a legend
- Confirm that selecting a categorical x-axis variable and a continuous y-axis variable renders a vertical dot plot
- Confirm that selecting a continuous x-axis variable and a categorical y-axis variable renders a horizontal dot plot
- Confirm that selecting a continuous x-axis variable and a continuous y-axis variable renders a scatter plot
- Confirm that the filters are functional on all chart types in the tab
- Confirm that grouping by a variable work as expected on all chart types in the tab
- Confirm that the legend only appears when the user created a stacked bar chart
- Confirm that checking a box under “Hide” within the “Settings” hides the data column by default in both the “Codebook” and “Data Listing” views. This includes not displaying it as a filter or an option in the “Group by” drop-down
- Confirm that checking a box under “Filter” within the “Settings” adds the column variable to the available filters
- Confirm that checking a box under “Group” within the “Settings” adds the column variable to the list of options in the “Group by” drop-down
- Confirm that unchecking a box under “Hide” within the “Settings” results in the data column being displayed again in both the “Codebook” and “Data Listing” views
- Confirm that unchecking a box under “Filter” within the “Settings” removes the column variable from the available filters
- Confirm that unchecking a box under “Group” within the “Settings” removes the column variable from the list of options in the “Group by” drop-down
- Confirm that adding a label for a variable name displays a label next to the variable name in the codebook
- Confirm that the label also appears in the data listing tab when hovering over the variable name
- Set whiteSpaceAsMissing to false and confirm that empty strings are no longer treated as missing for categorical variables. In the default data set, % missing should go to 0 for all categorical variables
- Set whiteSpaceAsMissing to false and confirm that empty strings are still treated as missing for continuous variables
- Confirm that "M" is treated as missing for "SEX" when using the following text settings: { "missingValues": ["M"] }
- Confirm files tab appears and shows a list of available files
- Confirm that clicking a file shows the codebook for the correct file
- Confirm that the title, row count and column count updates when a new file is selected
- Confirm that basic functionality on codebook, data listing, and settings tabs work as expected