extend column types to include derived column, pinnedLeft and related to enable column filtering, add multiselect for x/y axis fields

Author: crutan

src/@seed/api/column/column.types.ts

@@ -33,6 +33,8 @@ export type Column = {
   column_description: string;
   derived_column: number | null;
   is_excluded_from_hash: boolean;
+  related?: boolean;
+  pinnedLeft?: boolean;
 }
 
 export type ColumnsResponse = {

src/app/modules/organizations/settings/default-display-fields/default-display-fields.component.html

@@ -49,6 +49,40 @@
             </mat-form-field>
           </div>
           <mat-divider role="separator" class="mat-divider mat-divider-horizontal mb-6 mt-4" aria-orientation="horizontal"></mat-divider>
+          <div class="flex flex-col">
+            <div class="text-lg font-medium">Columns to Include in Reports x axis Options
+            </div>
+ 
+            <mat-form-field class="mb-6">
+              <mat-label>X Axis Columns
+              </mat-label>
+              <mat-select formControlName="default_reports_x_axis_options" multiple>
+                <mat-option value="">None</mat-option>
+                @for (col of xAxisColumns; track col.id) {
+                  <mat-option [value]="col.id">{{ col.display_name }}</mat-option>
+                }
+              </mat-select>
+
+            </mat-form-field>
+          </div>
+          <mat-divider role="separator" class="mat-divider mat-divider-horizontal mb-6 mt-4" aria-orientation="horizontal"></mat-divider>
+          <div class="flex flex-col">
+            <div class="text-lg font-medium">Columns to Include in Reports Y Axis Options
+            </div>
+ 
+            <mat-form-field class="mb-6">
+              <mat-label>Y Axis Columns
+              </mat-label>
+              <mat-select formControlName="default_reports_y_axis_options" multiple>
+                <mat-option value="">None</mat-option>
+                @for (col of yAxisColumns; track col.id) {
+                  <mat-option [value]="col.id">{{ col.display_name }}</mat-option>
+                }
+              </mat-select>
+
+            </mat-form-field>
+          </div>
+          <mat-divider role="separator" class="mat-divider mat-divider-horizontal mb-6 mt-4" aria-orientation="horizontal"></mat-divider>
 
           <div>
             <button mat-flat-button [disabled]="defaultDisplayFieldsForm.invalid || defaultDisplayFieldsForm.pending" color="primary">

src/app/modules/organizations/settings/default-display-fields/default-display-fields.component.ts

@@ -12,6 +12,7 @@ import { type Column, ColumnService } from '@seed/api/column'
 import { type Organization, OrganizationService } from '@seed/api/organization'
 import { PageComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
+import { naturalSort } from '@seed/utils'
 
 @Component({
   selector: 'seed-organizations-settings-default-display-fields',
@@ -26,6 +27,8 @@ export class DefaultDisplayFieldComponent implements OnDestroy, OnInit {
   organization: Organization
   propertyColumns: Column[]
   taxLotColumns: Column[]
+  xAxisColumns: Column[]
+  yAxisColumns: Column[]
   defaultDisplayFieldsForm = new FormGroup({
     property_display_field: new FormControl('address_line_1'),
     taxlot_display_field: new FormControl('address_line_1'),
@@ -38,9 +41,13 @@ export class DefaultDisplayFieldComponent implements OnDestroy, OnInit {
       this.organization = organization
       this.defaultDisplayFieldsForm.get('property_display_field').setValue(this.organization.property_display_field)
       this.defaultDisplayFieldsForm.get('taxlot_display_field').setValue(this.organization.taxlot_display_field)
+      this.defaultDisplayFieldsForm.get('default_reports_x_axis_options').setValue(this.organization.default_reports_x_axis_options.map((c) => c.id))
+      this.defaultDisplayFieldsForm.get('default_reports_y_axis_options').setValue(this.organization.default_reports_y_axis_options.map((c) => c.id))
     })
     this._columnService.propertyColumns$.pipe(takeUntil(this._unsubscribeAll$)).subscribe((propertyColumns) => {
       this.propertyColumns = propertyColumns
+      this.xAxisColumns = propertyColumns.filter((c) => !c.related && !c.pinnedLeft).sort((a, b) => naturalSort(a.display_name, b.display_name))
+      this.yAxisColumns = this.xAxisColumns.filter((c) => ['area', 'eui', 'float', 'integer', 'number'].includes(c.data_type) || c.derived_column).sort((a, b) => naturalSort(a.display_name, b.display_name))
     })
     this._columnService.taxLotColumns$.pipe(takeUntil(this._unsubscribeAll$)).subscribe((taxLotColumns) => {
       this.taxLotColumns = taxLotColumns
@@ -56,6 +63,8 @@ export class DefaultDisplayFieldComponent implements OnDestroy, OnInit {
     if (this.defaultDisplayFieldsForm.valid) {
       this.organization.property_display_field = this.defaultDisplayFieldsForm.get('property_display_field').value
       this.organization.taxlot_display_field = this.defaultDisplayFieldsForm.get('taxlot_display_field').value
+      this.organization.default_reports_x_axis_options = this.propertyColumns.filter((c) => this.defaultDisplayFieldsForm.get('default_reports_x_axis_options').value.includes(c.id))
+      this.organization.default_reports_y_axis_options = this.propertyColumns.filter((c) => this.defaultDisplayFieldsForm.get('default_reports_y_axis_options').value.includes(c.id))
       this._organizationService.updateSettings(this.organization).subscribe()
     }
   }