@cdc/chart 1.3.3 → 4.22.10

package/src/scss/main.scss

@@ -5,7 +5,7 @@
 @import '~@cdc/core/styles/v2/themes/color-definitions';
 
 .form-container {
-  overflow: scroll;
+  overflow-y: auto;
 }
 
 .d-flex { display: flex; }
@@ -19,6 +19,14 @@
 
   border-radius: 3px;
 
+  .checkbox-group {
+    padding: 16px;
+    border: 1px solid #c4c4c4;
+    border-radius: 8px;
+    margin-top: 8px;
+    margin-bottom: 24px;  
+  }
+
   .visually-hidden {
     position: fixed;
     left: -10000px;
@@ -96,6 +104,10 @@
     margin-bottom: 20px;
   }
 
+  .section-subtext {
+    padding: 15px;
+  }
+
   .legend-container {
     background: #fff;
     width: 100%;
@@ -118,6 +130,13 @@
       top: 1em;
       border-radius: 3px;
 
+
+      &--dynamic {
+        position: relative;
+        float: right;
+        right: unset;
+      }
+
       &:hover {
         background: rgba(0, 0, 0, .15);
         transition: .3s all;
@@ -152,6 +171,29 @@
     }
   }
 
+  .dynamic-legend-list {
+
+    // overide traditional legend item that uses !important
+    .legend-item {
+      align-items: flex-end !important;
+      justify-content: space-between;
+
+      .btn-wrapper {
+        background: transparent;
+      }
+    }
+
+    .visx-legend-label {
+      width: auto !important;
+      display: inline-block !important;
+    }
+
+    button {
+      width: auto;
+      display: inline-block;
+    }
+  }
+
   .tooltip {
     background-color: #fff;
     border: rgba(0, 0, 0, 0.3) 1px solid !important;
@@ -205,6 +247,32 @@
       > svg circle {
         opacity: 1;
       }
+
+      // Animations for line chart and data points
+      > svg.animated {
+        circle {
+          opacity: 0;
+          animation: revealLolly 0.25s linear forwards;
+          animation-delay: 0.75s;
+          animation-play-state: paused;
+        }
+
+        &.animate {
+          circle {
+            animation-play-state: running;
+          }
+        }
+      }
+    }
+
+    @keyframes revealLolly {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
     }
 
     &.chart-bar--no-border {
@@ -215,7 +283,10 @@
   }
 
   .filters-section {
-    display: inline-block;
+    @include breakpoint(md) {
+      display: flex;
+      gap: 30px;
+    }
 
     label:not(:empty) {
       margin-right: .4em;
@@ -225,8 +296,8 @@
       font-size: 1em;
     }
 
-    .single-filter + .single-filter {
-      margin-left: 1em;
+    .single-filter {
+      margin-bottom: .5em;
     }
   }
 
@@ -331,9 +402,135 @@
       }
     }
   }
+
   [tabindex]:focus-visible {
     outline: 2px solid rgb(0, 95, 204) !important;
   }
+
+    // ANIMATIONS
+    // Pie Chart Animations
+    .animated-pie {
+      transition: all .4s ease-in-out;
+      opacity: 0;
+      transform-origin: center;
+      transform: scale(0, 0);
+
+      &.animated {
+        opacity: 1;
+        transform-origin: center;
+        transform: scale(1, 1);
+      }
+
+      path,
+      text {
+        border: rgba(0,0,0,.3) 1px solid !important;
+        box-shadow: rgba(0,0,0,.1) 3px 3px 7px;
+        opacity: 1;
+        line-height: 1.4em;
+        font-size: 1em;
+        border-radius: 4px;
+        padding: 8px 12px;
+      }
+
+      .animated-pie-text {
+        opacity: 0;
+        transition: opacity .5s ease-in-out;
+        transition-delay: .4s;
+
+        &.animated {
+          opacity: 1;
+        }
+      }
+    }
+
+    // Line/Combo Chart Animations
+    .linear,
+    .Line,
+    .Combo {
+      &.animated path {
+        opacity: 0;
+      }
+      &.animate {
+        path {
+          opacity: 1;
+          stroke-dasharray: 2000;
+          stroke-dashoffset: 2000;
+          animation: dash 2s ease-in-out forwards;
+        }
+        @keyframes dash {
+          to {
+            stroke-dashoffset: 0;
+          }
+        }
+      }
+    }
+
+    // Bar/Combo Chart Animations
+    .linear,
+    .Bar,
+    .Combo {
+      .visx-group {
+        position: relative;
+      }
+
+      &.animated {
+        .vertical rect ,
+        .vertical foreignObject {
+          opacity: 0;
+          animation: growBar 0.5s linear forwards;
+          animation-play-state: paused;
+        }
+
+        .horizontal rect,
+        .horizontal foreignObject {
+          animation: growBarH 0.5s linear forwards;
+          animation-play-state: paused;
+        }
+
+        &.animate {
+          rect,
+          foreignObject {
+            animation-play-state: running;
+          }
+        }
+
+        .group-1,
+        .group-2 {
+          transform-origin: center;
+        }
+      }
+    }
+
+
+  @keyframes growBar {
+    from {
+      opacity: 1;
+      transform: scale(1, 0) ;
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1) ;
+    }
+  }
+
+  @keyframes growBarH {
+    from {
+      transform: scale(0, 1) ;
+    }
+
+    to {
+      transform: scale(1) ;
+    }
+  }
+}
+
+.cdc-visualization__paired-bar-chart {
+  text-align: center;
+  transform: scale(1);
+  > .visx-group[style] {
+    transform: scale(1);
+  }
 }
 
 #paired-bar-legend {
@@ -353,7 +550,6 @@
   }
 }
 
-
 .isEditor.type-sparkline .cdc-chart-inner-container {
     margin: 3em auto 0;
     max-width: 60%;