DRAFT FDG-9759 Create New Data Table

env/qat.js

@@ -4,7 +4,7 @@ module.exports = {
   API_BASE_URL: 'https://api.fiscaldata.treasury.gov',
   DATA_DOWNLOAD_BASE_URL: 'https://fiscaldata.treasury.gov',
   WEB_SOCKET_BASE_URL: 'wss://downloads.fiscaldata.treasury.gov/main',
-  EXPERIMENTAL_WHITELIST: ['experimental-page', 'afg-overview', 'publishedReportsSection'],
+  EXPERIMENTAL_WHITELIST: ['experimental-page', 'afg-overview', 'publishedReportsSection', 'dataPreview'],
   ADDITIONAL_DATASETS: {},
   USE_MOCK_RELEASE_CALENDAR_DATA_ON_API_FAIL: true,
   ADDITIONAL_ENDPOINTS: {},

src/components/data-preview/__snapshots__/data-preview.spec.js.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataPreview correctly prepares pivoted data with aggregation and summing and handles non-numeric
+  values 1`] = `
+{
+  "data": [
+    {
+      "CHART_DATE": "2020-05-01",
+      "Federal Bank": 1010.1010000000001,
+      "Medical Safe": 3020202,
+      "record_calendar_year__record_calendar_month": "May 2020",
+    },
+    {
+      "CHART_DATE": "2020-04-01",
+      "Federal Bank": "1000.0001",
+      "Medical Safe": 3000000.7,
+      "record_calendar_year__record_calendar_month": "Apr 2020",
+    },
+  ],
+  "meta": {
+    "dataTypes": {
+      "Federal Bank": "CURRENCY",
+      "Medical Safe": "CURRENCY",
+      "record_calendar_year__record_calendar_month": "AGGREGATION_DATE",
+    },
+    "labels": {
+      "Federal Bank": "Federal Bank",
+      "Medical Safe": "Medical Safe",
+      "record_calendar_year__record_calendar_month": "Time Period",
+    },
+  },
+  "pivotApplied": "By Classification:cost",
+}
+`;
+
+exports[`DataPreview correctly prepares pivoted data without aggregation 1`] = `
+{
+  "data": [
+    {
+      "Federal Financing Bank": "2.685",
+      "Total Marketable": "1.964",
+      "Treasury Bills": "0.596",
+      "Treasury Bonds": "3.764",
+      "Treasury Floating Rate Note (FRN)": "0.285",
+      "Treasury Inflation-Protected Securities (TIPS)": "0.751",
+      "Treasury Notes": "2.069",
+      "reporting_date": "2020-04-30",
+    },
+    {
+      "Federal Financing Bank": "2.385",
+      "Total Marketable": "1.264",
+      "Treasury Bills": "1.596",
+      "Treasury Bonds": "3.164",
+      "Treasury Nickels": "3.864",
+      "reporting_date": "2020-05-31",
+    },
+  ],
+  "meta": {
+    "dataTypes": {
+      "Federal Financing Bank": "PERCENTAGE",
+      "Total Marketable": "PERCENTAGE",
+      "Treasury Bills": "PERCENTAGE",
+      "Treasury Bonds": "PERCENTAGE",
+      "Treasury Floating Rate Note (FRN)": "PERCENTAGE",
+      "Treasury Inflation-Protected Securities (TIPS)": "PERCENTAGE",
+      "Treasury Nickels": "PERCENTAGE",
+      "Treasury Notes": "PERCENTAGE",
+      "reporting_date": "DATE",
+    },
+    "labels": {
+      "Federal Financing Bank": "Federal Financing Bank",
+      "Total Marketable": "Total Marketable",
+      "Treasury Bills": "Treasury Bills",
+      "Treasury Bonds": "Treasury Bonds",
+      "Treasury Floating Rate Note (FRN)": "Treasury Floating Rate Note (FRN)",
+      "Treasury Inflation-Protected Securities (TIPS)": "Treasury Inflation-Protected Securities (TIPS)",
+      "Treasury Nickels": "Treasury Nickels",
+      "Treasury Notes": "Treasury Notes",
+      "reporting_date": "Calendar Date",
+    },
+  },
+  "pivotApplied": "by sec type:avg_interest_rate_amt",
+}
+`;

src/components/data-preview/data-preview-data-table/data-preview-data-table-body/data-preview-data-table-body.module.scss

@@ -0,0 +1,41 @@
+@import 'src/variables.module';
+
+.fillCellGrey,
+.fillCellWhite {
+  color: #555555;
+}
+
+.detailButton {
+  background-color: transparent;
+  border: none;
+  color: $primary;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: $font-size-16;
+  font-weight: 400;
+}
+
+.fillCellGrey {
+  background: #f1f1f1;
+}
+
+.fillCellWhite {
+  background: white;
+}
+
+.cellBorder {
+  border-top: 1px solid #d9d9d9;
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.rightAlignText {
+  text-align: right;
+}
+
+.cellText {
+  vertical-align: top;
+}
+
+.hidden {
+  overflow: hidden;
+}

src/components/data-preview/data-preview-data-table/data-preview-data-table-body/data-preview-data-table-body.tsx

@@ -0,0 +1,74 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { IDataTableBody } from '../../../../models/IDataTableBody';
+import {
+  cellBorder,
+  cellText,
+  detailButton,
+  fillCellGrey,
+  fillCellWhite,
+  hidden,
+  rightAlignText,
+} from '../../../data-table/data-table-body/data-table-body.module.scss';
+import classNames from 'classnames';
+import { rightAlign } from '../../../data-table/data-table-helper';
+import { flexRender } from '@tanstack/react-table';
+
+const DataPreviewDataTableBody: FunctionComponent<IDataTableBody> = ({
+  table,
+  dataTypes,
+  allowColumnWrap,
+  detailViewConfig,
+  setDetailViewState,
+  setSummaryValues,
+}) => {
+  let fillCell = false;
+  const handleDetailClick = (rowConfig: {}, cellValue: string) => {
+    const currentRow = rowConfig[0]?.row.original;
+    const secondaryFilterValue = detailViewConfig?.secondaryField ? currentRow[detailViewConfig.secondaryField] : null;
+    setDetailViewState({ value: cellValue, secondary: secondaryFilterValue });
+    setSummaryValues(currentRow);
+  };
+
+  return (
+    <tbody>
+      {table.getRowModel().rows.map(row => {
+        fillCell = !fillCell;
+        const rowConfig = row.getVisibleCells();
+        return (
+          <tr key={row.id} className={fillCell ? fillCellGrey : fillCellWhite} data-testid="row">
+            {rowConfig.map(cell => {
+              const cellValue = cell.getValue()?.toString();
+              const display = !cellValue || cellValue === 'null';
+              const wrapStyle = allowColumnWrap?.includes(cell.column.id);
+              const detailViewButton = detailViewConfig?.field === cell.column.id;
+              const cellDisplay = (children: ReactNode) =>
+                detailViewButton ? (
+                  <button onClick={() => handleDetailClick(rowConfig, cellValue)} className={detailButton}>
+                    {children}
+                  </button>
+                ) : (
+                  <>{children}</>
+                );
+
+              return (
+                <td
+                  key={cell.id}
+                  className={classNames([
+                    `${rightAlign(dataTypes[cell.column.id]) ? rightAlignText : null}`,
+                    fillCell ? cellBorder : null,
+                    wrapStyle ? null : hidden,
+                    cellText,
+                  ])}
+                >
+                  {display ? <div /> : <>{cellDisplay(flexRender(cell.column.columnDef.cell, cell.getContext()))}</>}
+                </td>
+              );
+            })}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+export default DataPreviewDataTableBody;

src/components/data-preview/data-preview-data-table/data-preview-data-table-header/data-preview-data-table-header.module.scss

@@ -0,0 +1,94 @@
+@import '../../../../variables.module.scss';
+
+.sortArrowPill,
+.defaultSortArrowPill {
+  height: 1.25rem;
+  width: 1.75rem;
+  min-width: 1.75rem;
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.375rem;
+  cursor: pointer;
+}
+
+.stickyHeader {
+  position: sticky;
+  top: 0;
+}
+
+.sortArrowPill {
+  background-color: $primary;
+}
+
+.defaultSortArrowPill:hover {
+  background-color: #cfe8ff;
+}
+
+.sortArrow,
+.defaultSortArrow {
+  width: 1rem !important;
+}
+
+.sortArrow {
+  margin: auto 0.375rem;
+  color: white;
+}
+
+.defaultSortArrow {
+  color: $primary;
+}
+
+.colHeader {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0;
+  white-space: nowrap;
+
+  &.rightAlignText {
+    justify-content: flex-end;
+  }
+
+  &.noFilter {
+    margin-bottom: 2.5rem;
+  }
+}
+
+.colHeaderText {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 1.25rem;
+}
+
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 0.3125rem;
+  background: $font-body-copy;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  border-radius: 1.25rem;
+}
+
+.resizer.isResizing {
+  background: $font-body-copy;
+  opacity: 1;
+}
+
+.columnMinWidth {
+  min-width: 160px;
+}
+
+@media (hover: hover) {
+  .resizer {
+    opacity: 0;
+  }
+
+  *:hover > .resizer {
+    opacity: 1;
+  }
+}