@cdc/dashboard 4.26.3 → 4.26.5

package/src/scss/main.scss

@@ -1,18 +1,23 @@
 @import '@cdc/core/styles/utils/breakpoints';
+@import '@cdc/core/styles/layout/callout';
 
 button.row-menu__btn[title*='Equal Height Rows'] {
   margin-left: 15px;
 }
 
 .cove-visualization.type-dashboard {
+  --dashboard-condition-active-blue: var(--blue);
+  --dashboard-condition-active-blue-bg: #f2f7fb;
+  --dashboard-condition-active-blue-bg-hover: #e6eff7;
+
   @import 'editor-panel';
   @import 'grid';
 
-  .loading>div.la-ball-beat {
+  .loading > div.la-ball-beat {
     margin-top: 20%;
   }
 
-  >.cove-editor__content {
+  > .cove-editor__content {
     width: 100% !important;
     left: 0px;
   }
@@ -66,6 +71,26 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           height: 25px;
         }
 
+        .download-image-controls {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          flex-basis: 100%;
+        }
+
+        .download-image-mode-select {
+          width: 14em;
+          max-width: 100%;
+          height: 25px;
+        }
+
+        .download-image-label-input {
+          width: 14em;
+          max-width: 14em;
+          margin-top: 5px;
+          height: 25px;
+        }
+
         label {
           display: block;
           width: 100%;
@@ -135,13 +160,15 @@ button.row-menu__btn[title*='Equal Height Rows'] {
     }
   }
 
-  .btn {
+  .dashboard-filters__actions {
+    align-items: flex-end;
+    display: flex;
+    flex: 0 0 auto;
+    width: auto;
 
-    // Expand and Collapse Buttons for Multiviz Dashboard
-    &.expand-collapse-buttons {
-      background-color: var(--lightestGray);
-      border: 1px var(--lightGray) solid;
-      color: black;
+    > .cove-button {
+      flex: 0 0 auto;
+      width: auto;
     }
   }
 
@@ -194,18 +221,26 @@ button.row-menu__btn[title*='Equal Height Rows'] {
 
   // Override Bootstrap's row negative margins to prevent horizontal scrollbar
   .row {
+    --dashboard-column-gap: 1.5rem;
     margin-right: 0;
     margin-left: 0;
+    column-gap: 0;
     // Row spacing for desktop
     margin-bottom: 1.5rem;
 
-    // Remove padding from first and last columns to keep content flush to edges
-    >[class*='col-']:first-child {
+    > [class*='col-'] {
+      // Remove side padding when columns stack to full width.
       padding-left: 0;
+      padding-right: 0;
+      flex: 0 0 100%;
+      max-width: 100%;
+      width: 100%;
+      margin-bottom: 1.5rem;
     }
 
-    >[class*='col-']:last-child {
-      padding-right: 0;
+    // Last column doesn't need margin (row margin handles gap to next row)
+    > [class*='col-']:last-child {
+      margin-bottom: 0;
     }
 
     // Last row doesn't need bottom margin
@@ -214,30 +249,6 @@ button.row-menu__btn[title*='Equal Height Rows'] {
     }
   }
 
-  // Mobile layout adjustments
-  @include breakpoint(xs) {
-    .row {
-      margin-bottom: 1.5rem;
-
-      >[class*='col-'] {
-        // Remove side padding when columns stack to full width
-        padding-left: 0;
-        padding-right: 0;
-        margin-bottom: 1.5rem;
-      }
-
-      // Last column doesn't need margin (row margin handles gap to next row)
-      >[class*='col-']:last-child {
-        margin-bottom: 0;
-      }
-
-      // Last row doesn't need extra margin
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
   .dashboard-row {
     display: flex;
     flex-direction: column;
@@ -252,7 +263,7 @@ button.row-menu__btn[title*='Equal Height Rows'] {
 
     // Disable the module individual margin
     .map-container,
-    .cove-visualization.type-chart .cove-visualization__body>* {
+    .cove-visualization.type-chart .cove-visualization__body > * {
       margin-left: 0;
       margin-right: 0;
     }
@@ -272,7 +283,43 @@ button.row-menu__btn[title*='Equal Height Rows'] {
     width: 100%;
   }
 
-  @include breakpointClass(md) {
+  @include breakpoint(md) {
+    .row {
+      column-gap: var(--dashboard-column-gap);
+
+      > [class*='col-'] {
+        min-width: 0;
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-bottom: 0;
+      }
+
+      > .col-md-12 {
+        flex-basis: 100%;
+        max-width: 100%;
+        width: 100%;
+      }
+      > .col-md-8 {
+        flex-basis: calc((100% * 8 / 12) - (var(--dashboard-column-gap) * 4 / 12));
+        max-width: calc((100% * 8 / 12) - (var(--dashboard-column-gap) * 4 / 12));
+        width: calc((100% * 8 / 12) - (var(--dashboard-column-gap) * 4 / 12));
+      }
+      > .col-md-6 {
+        flex-basis: calc((100% * 6 / 12) - (var(--dashboard-column-gap) * 6 / 12));
+        max-width: calc((100% * 6 / 12) - (var(--dashboard-column-gap) * 6 / 12));
+        width: calc((100% * 6 / 12) - (var(--dashboard-column-gap) * 6 / 12));
+      }
+      > .col-md-4 {
+        flex-basis: calc((100% * 4 / 12) - (var(--dashboard-column-gap) * 8 / 12));
+        max-width: calc((100% * 4 / 12) - (var(--dashboard-column-gap) * 8 / 12));
+        width: calc((100% * 4 / 12) - (var(--dashboard-column-gap) * 8 / 12));
+      }
+      > .col-md-3 {
+        flex-basis: calc((100% * 3 / 12) - (var(--dashboard-column-gap) * 9 / 12));
+        max-width: calc((100% * 3 / 12) - (var(--dashboard-column-gap) * 9 / 12));
+        width: calc((100% * 3 / 12) - (var(--dashboard-column-gap) * 9 / 12));
+      }
+    }
     .dashboard-row {
       flex-direction: row;
       margin: 1em 0;
@@ -291,6 +338,10 @@ button.row-menu__btn[title*='Equal Height Rows'] {
     .dashboard-col-4 {
       width: 33%;
     }
+
+    .dashboard-col-3 {
+      width: 25%;
+    }
   }
 
   @include breakpointClass(sm) {
@@ -323,11 +374,10 @@ button.row-menu__btn[title*='Equal Height Rows'] {
       [class*='col-'] {
         display: flex;
         flex-direction: column !important;
-        flex: 1 1 auto !important;
         align-items: stretch !important;
         min-height: 0 !important;
 
-        >* {
+        > * {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
@@ -345,10 +395,10 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           min-height: 0 !important;
           width: 100% !important;
 
-          >.cove-visualization__content,
-          >.cove-visualization__outer,
-          >.cove-visualization__inner,
-          >.cove-visualization__body {
+          > .cove-visualization__content,
+          > .cove-visualization__outer,
+          > .cove-visualization__inner,
+          > .cove-visualization__body {
             display: flex !important;
             flex-direction: column !important;
             flex: 1 1 auto !important;
@@ -356,9 +406,9 @@ button.row-menu__btn[title*='Equal Height Rows'] {
             min-height: 0 !important;
             width: 100% !important;
 
-            >.cove-visualization__inner,
-            >.cove-visualization__body,
-            >.cove-visualization__body-wrap {
+            > .cove-visualization__inner,
+            > .cove-visualization__body,
+            > .cove-visualization__body-wrap {
               display: flex !important;
               flex-direction: column !important;
               flex: 1 1 auto !important;
@@ -371,7 +421,8 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           .cove-visualization__outer,
           .cove-visualization__inner,
           .cove-visualization__body,
-          .cove-visualization__body-wrap {
+          .cove-visualization__body-wrap,
+          .markup-include-tp5 {
             display: flex !important;
             flex-direction: column !important;
             flex: 1 1 auto !important;
@@ -398,14 +449,17 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           min-height: 0 !important;
         }
 
-        .cove-visualization .cove-visualization__body.bite__style--tp5>.cove-visualization__body-wrap {
+        .cove-visualization .cove-visualization__body.bite__style--tp5 > .cove-visualization__body-wrap {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
           min-height: 0 !important;
         }
 
-        .cove-visualization .cove-visualization__body.bite__style--tp5>.cove-visualization__body-wrap>.cove-visualization__content-section {
+        .cove-visualization
+          .cove-visualization__body.bite__style--tp5
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
@@ -413,7 +467,11 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           width: 100% !important;
         }
 
-        .cove-visualization .cove-visualization__body.bite__style--tp5>.cove-visualization__body-wrap>.cove-visualization__content-section>.cdc-callout {
+        .cove-visualization
+          .cove-visualization__body.bite__style--tp5
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .cdc-callout {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
@@ -421,16 +479,27 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           width: 100% !important;
         }
 
-        .cove-visualization.waffle__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap,
-        .cove-visualization.gauge__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap {
+        .cove-visualization.waffle__style--tp5 .cove-visualization__body > .cove-visualization__body-wrap,
+        .cove-visualization.gauge__style--tp5 .cove-visualization__body > .cove-visualization__body-wrap,
+        .cove-visualization.markup-include__style--tp5 .cove-visualization__body > .cove-visualization__body-wrap {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
           min-height: 0 !important;
         }
 
-        .cove-visualization.waffle__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section,
-        .cove-visualization.gauge__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section {
+        .cove-visualization.waffle__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section,
+        .cove-visualization.gauge__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section,
+        .cove-visualization.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
@@ -438,8 +507,16 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           width: 100% !important;
         }
 
-        .cove-visualization.waffle__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section>.cdc-callout,
-        .cove-visualization.gauge__style--tp5 .cove-visualization__body>.cove-visualization__body-wrap>.cove-visualization__content-section>.cdc-callout {
+        .cove-visualization.waffle__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .cdc-callout,
+        .cove-visualization.gauge__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .cdc-callout {
           display: flex !important;
           flex-direction: column !important;
           flex: 1 1 auto !important;
@@ -447,10 +524,47 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           width: 100% !important;
         }
 
-        .cove-visualization .cove-visualization__body.bite__style--tp5 .cdc-callout__body {
+        .cove-visualization.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .markup-include-tp5 {
           display: flex !important;
+          flex-direction: column !important;
           flex: 1 1 auto !important;
-          align-items: stretch !important;
+          min-height: 100% !important;
+          width: 100% !important;
+        }
+
+        .cove-visualization.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .markup-include-tp5
+          > .cdc-callout__body,
+        .cove-visualization.markup-include__style--tp5
+          .cove-visualization__body
+          > .cove-visualization__body-wrap
+          > .cove-visualization__content-section
+          > .markup-include-tp5
+          > .cdc-callout__body
+          > .cdc-callout__content {
+          display: flex !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization.markup-include__style--tp5 .markup-include-component--tp5 {
+          display: flex !important;
+          flex-direction: column !important;
+          flex: 1 1 auto !important;
+          min-height: 0 !important;
+        }
+
+        .cove-visualization .cove-visualization__body.bite__style--tp5 .cdc-callout__body {
+          display: grid !important;
+          flex: 1 1 auto !important;
+          align-items: start !important;
           min-height: 0 !important;
         }
 
@@ -459,6 +573,37 @@ button.row-menu__btn[title*='Equal Height Rows'] {
           min-height: 0 !important;
         }
       }
+      @include breakpoint(md) {
+        > .col-md-12 {
+          flex-basis: 100% !important;
+          max-width: 100% !important;
+          width: 100% !important;
+        }
+
+        > .col-md-8 {
+          flex-basis: calc((100% * 8 / 12) - (var(--dashboard-column-gap) * 4 / 12)) !important;
+          max-width: calc((100% * 8 / 12) - (var(--dashboard-column-gap) * 4 / 12)) !important;
+          width: calc((100% * 8 / 12) - (var(--dashboard-column-gap) * 4 / 12)) !important;
+        }
+
+        > .col-md-6 {
+          flex-basis: calc((100% * 6 / 12) - (var(--dashboard-column-gap) * 6 / 12)) !important;
+          max-width: calc((100% * 6 / 12) - (var(--dashboard-column-gap) * 6 / 12)) !important;
+          width: calc((100% * 6 / 12) - (var(--dashboard-column-gap) * 6 / 12)) !important;
+        }
+
+        > .col-md-4 {
+          flex-basis: calc((100% * 4 / 12) - (var(--dashboard-column-gap) * 8 / 12)) !important;
+          max-width: calc((100% * 4 / 12) - (var(--dashboard-column-gap) * 8 / 12)) !important;
+          width: calc((100% * 4 / 12) - (var(--dashboard-column-gap) * 8 / 12)) !important;
+        }
+
+        > .col-md-3 {
+          flex-basis: calc((100% * 3 / 12) - (var(--dashboard-column-gap) * 9 / 12)) !important;
+          max-width: calc((100% * 3 / 12) - (var(--dashboard-column-gap) * 9 / 12)) !important;
+          width: calc((100% * 3 / 12) - (var(--dashboard-column-gap) * 9 / 12)) !important;
+        }
+      }
     }
 
     // TP5 adjustments when there are 2+ data bites in a row
@@ -478,10 +623,8 @@ button.row-menu__btn[title*='Equal Height Rows'] {
     // TP5 Waffle/Gauge adjustments when there are 2+ in a row
     .row:has(.waffle__style--tp5):has([class*='col-'] ~ [class*='col-']),
     .row:has(.gauge__style--tp5):has([class*='col-'] ~ [class*='col-']) {
-
       .waffle__style--tp5,
       .gauge__style--tp5 {
-
         .cdc-callout {
           flex: 1;
         }
@@ -497,8 +640,6 @@ button.row-menu__btn[title*='Equal Height Rows'] {
         }
 
         .cdc-callout__heading {
-          // Fixed minimum height to align titles - adjust based on design needs
-          min-height: 3em;
           display: flex;
           align-items: flex-start;
         }
@@ -510,6 +651,16 @@ button.row-menu__btn[title*='Equal Height Rows'] {
       }
     }
 
+    // TP5 Markup Include adjustments when there are 2+ in a row
+    .row:has(.markup-include__style--tp5):has([class*='col-'] ~ [class*='col-']) {
+      .markup-include__style--tp5 {
+        .cdc-callout__heading {
+          display: flex;
+          align-items: flex-start;
+        }
+      }
+    }
+
     // Data bite alignment styles are now in packages/data-bite/src/scss/bite.scss
     // under .cdc-dashboard-inner-container to ensure proper specificity
   }
@@ -542,4 +693,4 @@ button.row-menu__btn[title*='Equal Height Rows'] {
     display: block;
     margin: 1em 0;
   }
-}
+}

package/src/store/dashboard.actions.ts

@@ -5,19 +5,31 @@ import { ConfigRow } from '../types/ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { SharedFilter } from '../types/SharedFilter'
 
-type ADD_VISUALIZATION = Action<'ADD_VISUALIZATION', { rowIdx: number; colIdx: number; newViz: AnyVisualization }>
+type ADD_VISUALIZATION = Action<
+  'ADD_VISUALIZATION',
+  { rowIdx: number; colIdx: number; entryIdx?: number; newViz: AnyVisualization }
+>
 type APPLY_CONFIG = Action<'APPLY_CONFIG', [Config, Object?]>
 type DELETE_WIDGET = Action<'DELETE_WIDGET', { uid: string }>
+type CLONE_VISUALIZATION = Action<
+  'CLONE_VISUALIZATION',
+  { sourceWidgetKey: string; rowIdx: number; colIdx: number; entryIdx?: number }
+>
 type MOVE_VISUALIZATION = Action<
   'MOVE_VISUALIZATION',
-  { rowIdx: number; colIdx: number; widget: AnyVisualization & { rowIdx: number; colIdx: number } }
+  {
+    rowIdx: number
+    colIdx: number
+    entryIdx?: number
+    widget: AnyVisualization & { rowIdx: number; colIdx: number; entryIdx?: number }
+  }
 >
 type SET_CONFIG = Action<'SET_CONFIG', Partial<Config> & { activeDashboard?: number }>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
-type SET_DATA = Action<'SET_DATA', Record<string, any[]>>
+type SET_DATA = Action<'SET_DATA', { data: Record<string, any[]>; activeDashboard?: number }>
 type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_PREVIEW = Action<'SET_PREVIEW', boolean>
-type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', Object>
+type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', { filteredData: Object; activeDashboard?: number }>
 type SET_SHARED_FILTERS = Action<'SET_SHARED_FILTERS', SharedFilter[]>
 type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', Tab>
 type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
@@ -38,6 +50,7 @@ type DashboardActions =
   | ADD_VISUALIZATION
   | APPLY_CONFIG
   | ADD_NEW_DASHBOARD
+  | CLONE_VISUALIZATION
   | DELETE_WIDGET
   | MOVE_VISUALIZATION
   | SET_CONFIG