Compare Data

Links

• Description and guidelines
• Live example
• Source code

Use this Task Flow

Before continuing, make sure you have followed the instructions to install the strudel-cli.

From the root of your app, run the following on the command line:

strudel add-taskflow my-taskflow --template compare-data

Generated Files

my-taskflow
├── _config
│  ├── taskflow.config.ts
│  └── taskflow.types.ts
├── _context
│  ├── ContextProvider.tsx
│  └── actions.ts
├── _layout.tsx
├── compare.tsx
├── index.tsx
└── new.tsx

Pages

index.tsx

URL Route: /
First page of the Compare Data Task Flow. Displays a list of selectable records for a user to compare.

compare.tsx

URL Route: /compare
Compare page of the Compare Data Task Flow. When a user selects records to compare and initiates a comparison, this page displays a specialized table for comparing the selected records.

new.tsx

URL Route: /new
New record page of the Compare Data Task Flow. Displays a form for generating a new record in the data.

Configuration

This Task Flow can be configured from the taskflow.config.ts file in the _config directory of the generated template files.

taskflow.config.ts

import { CompareDataConfig } from './taskflow.types';

export const taskflow: CompareDataConfig = {
	properties: {
		/**
		 * Word (in singular form) to use in the UI for the item being compared.
		 * For example, if the app is comparing plants, this value should be "plant".
		 */
		itemName: 'scenario',
		/**
		 * Pluralized version of itemName. This is used in the UI when itemName needs to be plural.
		 * For example, if the app is comparing plants, this value should be "plants".
		 */
		itemNamePlural: 'scenarios',
	},
	data: {
		items: {
			/**
			 * Source of the data for the initial list of items.
			 */
			source: 'data/default/compare-data/scenarios.json',
			/**
			 * Field name for the unique ID in the data source.
			 */
			idField: 'id',
		},
	},
	pages: {
		index: {
			/**
			 * Title to appear at the top of the initial items list page.
			 */
			title: 'Compare Data App',
			/**
			 * Text to appear underneath the title at the top of the initial items list page.
			 */
			description: 'Description of this app section',
			/**
			 * Column definitions for the table on the initial page.
			 * See all options from MUI's DataGrid: https://mui.com/x/api/data-grid/grid-col-def/
			 */
			tableColumns: [
				{
					field: 'name',
					headerName: 'Scenario Name',
					width: 200,
				},
				{
					field: 'description',
					headerName: 'Description',
					width: 200,
				},
				{
					field: 'analysis_type',
					headerName: 'Analysis Type',
					width: 200,
				},
				{
					field: 'volumetric_flow_rate',
					headerName: 'Volumetric Flow Rate',
					width: 200,
					isComparisonMetric: true,
				},
				{
					field: 'tss_concentration',
					headerName: 'TSS Concentration',
					width: 200,
					isComparisonMetric: true,
				},
				{
					field: 'cod_concentration',
					headerName: 'COD Concentration',
					width: 200,
					isComparisonMetric: true,
				},
				{
					field: 'tkn_concentration',
					headerName: 'TKN Concentration',
					width: 200,
					isComparisonMetric: true,
				},
				{
					field: 'acetic_acid_concentration',
					headerName: 'Acetic Acid Concentration',
					width: 200,
					isComparisonMetric: true,
				},
			],
		},
		new: {
			/**
			 * Title to appear at the top of the new item page.
			 */
			title: 'New Scenario',
			/**
			 * Text to appear underneath the title at the top of the new item page.
			 */
			description: 'Description of this app section',
		},
		compare: {
			/**
			 * Title to appear at the top of the comparison page.
			 */
			title: 'Compare Scenarios',
			/**
			 * Text to appear underneath the title at the top of the comparison page.
			 */
			description: 'Description of this app section',
		},
	},
};