@cdc/core 4.24.9-1 → 4.24.10

package/{styles/_data-table.scss → components/DataTable/data-table.css}

@@ -1,298 +1,268 @@
-.collapsed + .table-container {
-  border-bottom: none;
-}
-.table-container {
-  overflow-x: auto;
-  border-right: 1px solid $lightGray;
-  border-left: 1px solid $lightGray;
-  border-bottom: 1px solid $lightGray;
-}
-
-div.data-table-heading {
-  position: relative;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.5em 0.7em;
-  border: $lightGray 1px solid;
-  cursor: pointer;
-
-  svg {
-    position: absolute;
-    height: 100%;
-    width: 15px;
-    top: 0;
-    right: 1em;
-  }
-
-  &:focus {
-    z-index: 2;
-    position: relative;
-  }
-  @include breakpoint(xs) {
-    font-size: $font-small + 0.2em;
-  }
-}
-
-table.horizontal {
-  th,
-  td {
-    min-width: 200px;
-  }
-}
-
-table.data-table {
-  min-width: 100%;
-  background: #fff;
-  position: relative;
-  border: none;
-  overflow-x: auto;
-  border-collapse: collapse;
-  overflow: auto;
-  appearance: none;
-  table-layout: fixed;
-  * {
-    box-sizing: border-box;
-  }
-
-  thead {
-    user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-
-    button {
-      background: none;
-      font-size: initial;
-      color: #fff;
-      border: 0;
-    }
-
-    tr {
-      background: none;
-    }
-  }
-  thead {
-    color: #fff;
-    background-color: $mediumGray;
-    .resizer {
-      cursor: e-resize;
-      width: 10px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      touch-action: none;
-    }
-    tr {
-      text-align: left;
-    }
-    th,
-    td {
-      padding: 0.5em 1.3em 0.5em 0.7em;
-      line-height: normal;
-      position: relative;
-      text-align: left;
-      cursor: pointer;
-      border-right: 1px solid $lightGray !important;
-      svg {
-        margin-left: 1rem;
-      }
-    }
-
-    th.sort {
-      background-color: darken($mediumGray, 10%);
-      background-repeat: no-repeat;
-      background-position: right 0.5em center;
-      background-size: 10px 5px;
-    }
-
-    // format the white triangle sort icon in data table headers
-    .sort-icon {
-      fill: white;
-      width: 30px;
-      float: right;
-      align-self: center;
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    th:last-child,
-    td:last-child {
-      border-right: 0;
-    }
-  }
-
-  tbody {
-    tr {
-      width: 100%;
-      &:hover {
-        background: rgba(0, 0, 0, 0.05);
-      }
-    }
-  }
-
-  tr {
-    border-bottom: solid 1px #e5e5e5;
-    min-width: 100%; // Needed to fill content up
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
-
-  td {
-    padding: 0.3em 0.7em;
-
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-  }
-
-  th,
-  td {
-    width: 1% !important;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    &:last-child {
-      border-right: 0 !important;
-    }
-
-    @include breakpoint(xs) {
-      font-size: $font-small;
-    }
-  }
-  tr {
-    & > * {
-      width: 100%;
-    }
-  }
-  th {
-    flex-grow: 1;
-  }
-
-  td {
-    position: relative;
-    flex-grow: 1;
-  }
-
-  td a {
-    padding: 0.3em 0.7em;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    display: block;
-    color: inherit;
-    text-decoration: none;
-  }
-
-  td span.table-link {
-    text-decoration: underline;
-    cursor: pointer;
-    color: #075290;
-    svg {
-      max-width: 13px;
-      vertical-align: baseline;
-      margin-left: 5px;
-    }
-  }
-
-  .boxplot-td {
-    //display: inline-block;
-    //box-sizing: border-box;
-    table-layout: fixed;
-    width: 200;
-    //min-width: 150px;
-    //max-width: 400px;
-  }
-}
-
-.no-data {
-  position: relative;
-  .no-data-message {
-    @include emptyState;
-    h3 {
-      font-size: 1.3rem;
-      font-weight: 600;
-      margin-bottom: 0.3rem;
-    }
-  }
-  tr:hover {
-    background: #fff;
-  }
-  th,
-  td {
-    width: 50%;
-    &::before {
-      content: '\00a0';
-    }
-  }
-}
-
-.data-table-pagination {
-  margin: 1rem 0;
-  display: flex;
-  align-items: center;
-  ul {
-    list-style: none;
-    margin: 0 1rem 0 0;
-    display: flex;
-    li + li {
-      margin-left: 0.3rem;
-    }
-    button {
-      background: $mediumGray;
-      padding: 0.6rem 0.8rem;
-      &:hover {
-        background: lighten($mediumGray, 5%);
-      }
-    }
-    button.btn-next {
-      &::before {
-        content: ' ';
-        background-image: url(../assets/icon-caret-filled-up.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(90deg);
-      }
-    }
-    button.btn-prev {
-      &::before {
-        content: ' ';
-        background-image: url(../assets/icon-caret-filled-up.svg);
-        background-size: 10px 5px;
-        width: 10px;
-        height: 5px;
-        display: block;
-        transform: rotate(-90deg);
-      }
-    }
-    button[disabled] {
-      background: $mediumGray;
-      opacity: 0.3;
-      cursor: default;
-      &:hover {
-        background: $mediumGray;
-      }
-    }
-  }
-}
-
-.btn-download {
-  color: #fff;
-  float: right;
-  text-decoration: none;
-  transition: 0.3s all;
-  margin: 1em 0;
-  &:hover {
-    transition: 0.3s all;
-  }
-}
-.cove,
-.cdc-open-viz-module {
-  .download-links a:not(:last-child) {
-    margin-right: 10px;
-    display: inline-block;
-  }
-}
+.table {
+  width: unset;
+  min-width: 100%;
+}
+
+.collapsed + .table-container {
+  border-bottom: none;
+}
+.table-container {
+  overflow-x: auto;
+  border-right: 1px solid var(--lightGray);
+  border-left: 1px solid var(--lightGray);
+  border-bottom: 1px solid var(--lightGray);
+}
+
+.cdc-open-viz-module div.data-table-heading {
+  position: relative;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.5em 0.7em;
+  border: var(--lightGray) 1px solid;
+
+  svg {
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    top: 0;
+    right: 1em;
+  }
+
+  &:focus {
+    z-index: 2;
+    position: relative;
+  }
+  @media (max-width: var(--breakpoint-sm)) {
+    font-size: var(--font-small) + 0.2em;
+  }
+}
+
+table.horizontal {
+  th,
+  td {
+    min-width: 200px;
+  }
+}
+
+table.data-table {
+  margin-bottom: 0;
+  background: #fff;
+  position: relative;
+  border: none;
+  border-collapse: collapse;
+  appearance: none;
+  table-layout: fixed;
+  * {
+    box-sizing: border-box;
+  }
+
+  thead {
+    user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+
+    button {
+      background: none;
+      font-size: initial;
+      color: #fff;
+      border: 0;
+    }
+
+    tr {
+      background: none;
+    }
+  }
+  thead {
+    color: #fff;
+    .resizer {
+      cursor: e-resize;
+      width: 10px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      touch-action: none;
+    }
+    tr {
+      text-align: left;
+    }
+    th,
+    td {
+      padding: 0.5em 1.3em 0.5em 0.7em;
+      line-height: normal;
+      position: relative;
+      text-align: left;
+      border-right: 1px solid var(--lightGray) !important;
+    }
+
+    th {
+      background-color: var(--primary);
+      background-repeat: no-repeat;
+      background-position: right 0.5em center;
+      background-size: 10px 5px;
+    }
+
+    th:last-child,
+    td:last-child {
+      border-right: 0;
+    }
+  }
+
+  tr {
+    &.row-group {
+      background-color: var(--tertiary) !important;
+      font-weight: bold;
+    }
+    border-bottom: solid 1px #e5e5e5;
+    min-width: 100%; /* Needed to fill content up*/
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  th,
+  td {
+    padding: 0.3em 0.7em;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    &:last-child {
+      border-right: 0 !important;
+    }
+    font-size: var(--font-size);
+  }
+
+  td {
+    position: relative;
+    svg {
+      margin-left: 1rem;
+    }
+  }
+
+  td a {
+    padding: 0.3em 0.7em;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: block;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  td span.table-link {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #075290;
+    svg {
+      max-width: 13px;
+      vertical-align: baseline;
+      margin-left: 5px;
+    }
+  }
+
+  .boxplot-td {
+    table-layout: fixed;
+    width: 200;
+  }
+}
+
+.no-data {
+  position: relative;
+  .no-data-message {
+    background: rgba(255, 255, 255, 0.5);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 7;
+    :is(h3) {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: 0.3rem;
+    }
+  }
+  tr:hover {
+    background: #fff;
+  }
+  th,
+  td {
+    width: 50%;
+    &::before {
+      content: '\00a0';
+    }
+  }
+}
+
+.data-table-pagination {
+  margin: 1rem 0;
+  display: flex;
+  align-items: center;
+  ul {
+    list-style: none;
+    margin: 0 1rem 0 0;
+    display: flex;
+    li + li {
+      margin-left: 0.3rem;
+    }
+    button {
+      background: var(--mediumGray);
+      padding: 0.6rem 0.8rem;
+      &:hover {
+        background: lighten(var(--mediumGray), 5%);
+      }
+    }
+    button.btn-next {
+      &::before {
+        content: ' ';
+        background-image: url(../assets/icon-caret-filled-up.svg);
+        background-size: 10px 5px;
+        width: 10px;
+        height: 5px;
+        display: block;
+        transform: rotate(90deg);
+      }
+    }
+    button.btn-prev {
+      &::before {
+        content: ' ';
+        background-image: url(../assets/icon-caret-filled-up.svg);
+        background-size: 10px 5px;
+        width: 10px;
+        height: 5px;
+        display: block;
+        transform: rotate(-90deg);
+      }
+    }
+    button[disabled] {
+      background: var(--mediumGray);
+      opacity: 0.3;
+      cursor: default;
+      &:hover {
+        background: var(--mediumGray);
+      }
+    }
+  }
+}
+
+.btn-download {
+  color: #fff;
+  float: right;
+  text-decoration: none;
+  transition: 0.3s all;
+  margin: 1em 0;
+  &:hover {
+    transition: 0.3s all;
+  }
+}
+.cove,
+.cdc-open-viz-module {
+  .download-links a:not(:last-child) {
+    margin-right: 10px;
+    display: inline-block;
+  }
+}

package/components/DataTable/helpers/customSort.ts

@@ -14,7 +14,7 @@ export const customSort = (a, b, sortBy, config) => {
       const numberB = parseInt(b.match(/\d+$/)[0], 10)
 
       // Compare the numeric parts
-      return !sortBy.asc ? Number(numberA) - Number(numberB) : Number(numberB) - Number(numberA)
+      return sortBy.asc ? Number(numberA) - Number(numberB) : Number(numberB) - Number(numberA)
     }
   }
 
@@ -26,39 +26,35 @@ export const customSort = (a, b, sortBy, config) => {
   const trimmedB = String(valueB).trim()
 
   if (config.xAxis?.dataKey === sortBy.column && config.xAxis.type === 'date') {
-    let dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)
+    const dateA = parseDate(config.xAxis.dateParseFormat, trimmedA)?.getTime()
 
-    let dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)
-
-    if (dateA && dateA.getTime) dateA = dateA.getTime()
-
-    if (dateB && dateB.getTime) dateB = dateB.getTime()
-
-    return !sortBy.asc ? dateA - dateB : dateB - dateA
+    const dateB = parseDate(config.xAxis.dateParseFormat, trimmedB)?.getTime()
+    console.log(dateA, dateB)
+    return sortBy.asc ? dateA - dateB : dateB - dateA
   }
   // Check if values are numbers
   const isNumA = !isNaN(Number(valueA)) && valueA !== undefined && valueA !== null && trimmedA !== ''
   const isNumB = !isNaN(Number(valueB)) && valueB !== undefined && valueB !== null && trimmedB !== ''
 
   // Handle empty strings or spaces
-  if (trimmedA === '' && trimmedB !== '') return !sortBy.asc ? -1 : 1
-  if (trimmedA !== '' && trimmedB === '') return !sortBy.asc ? 1 : -1
+  if (trimmedA === '' && trimmedB !== '') return sortBy.asc ? -1 : 1
+  if (trimmedA !== '' && trimmedB === '') return sortBy.asc ? 1 : -1
 
   // Both are numbers: Compare numerically
   if (isNumA && isNumB) {
-    return !sortBy.asc ? Number(valueA) - Number(valueB) : Number(valueB) - Number(valueA)
+    return sortBy.asc ? Number(valueA) - Number(valueB) : Number(valueB) - Number(valueA)
   }
 
   // Only A is a number
   if (isNumA) {
-    return !sortBy.asc ? -1 : 1
+    return sortBy.asc ? -1 : 1
   }
 
   // Only B is a number
   if (isNumB) {
-    return !sortBy.asc ? 1 : -1
+    return sortBy.asc ? 1 : -1
   }
 
   // Neither are numbers: Compare as strings
-  return !sortBy.asc ? trimmedA.localeCompare(trimmedB) : trimmedB.localeCompare(trimmedA)
+  return sortBy.asc ? trimmedA.localeCompare(trimmedB) : trimmedB.localeCompare(trimmedA)
 }

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -56,6 +56,10 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
     }
   })
 
-  tmpSeriesColumns.sort((a, b) => columnOrderingHash[a] - columnOrderingHash[b])
+  tmpSeriesColumns.sort((a, b) => {
+    if (a === 'pivotColumn') return -1
+    if (b === 'pivotColumn') return 1
+    return columnOrderingHash[a] - columnOrderingHash[b]
+  })
   return tmpSeriesColumns
 }

package/components/DataTable/helpers/getNewSortBy.ts

@@ -0,0 +1,35 @@
+type SortBy = {
+  asc: boolean
+  column?: string
+}
+
+export const getNewSortBy = (
+  sortBy: SortBy,
+  column: string,
+  index: number
+): { column: string; asc: boolean; colIndex: number } => {
+  let asc
+  let sortByCol = column
+  const ascending = sortBy.asc === true
+  const descending = sortBy.asc === false
+  const isInactive = sortBy.asc === undefined
+  const noColumnSelected = sortBy.column === undefined
+  if (noColumnSelected || sortBy.column !== column) {
+    // this is the first time a column is clicked
+    asc = true
+  } else {
+    // clicking the same column
+    if (descending) {
+      // reset
+      sortByCol = undefined
+      asc = undefined
+    }
+    if (isInactive) {
+      asc = true
+    }
+    if (ascending) {
+      asc = false
+    }
+  }
+  return { column: sortByCol, asc, colIndex: index }
+}