@cdc/chart 1.3.4 → 4.22.11

package/src/scss/main.scss

@@ -1,14 +1,16 @@
 @import '~@cdc/core/styles/base';
-@import "~@cdc/core/styles/heading-colors";
+@import '~@cdc/core/styles/heading-colors';
 @import 'mixins';
 @import 'variables';
 @import '~@cdc/core/styles/v2/themes/color-definitions';
 
 .form-container {
-  overflow: scroll;
+  overflow-y: auto;
 }
 
-.d-flex { display: flex; }
+.d-flex {
+  display: flex;
+}
 .flex-column-reverse {
   flex-direction: column-reverse;
 }
@@ -19,6 +21,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;
@@ -39,10 +49,10 @@
     background: #005eaa;
     color: #fff !important;
     border: 0;
-    padding: .4em .8em;
+    padding: 0.4em 0.8em;
     display: block;
     border-radius: 5px;
-    transition: .1s all;
+    transition: 0.1s all;
     cursor: pointer;
 
     &[disabled] {
@@ -66,7 +76,7 @@
 
   .chart-title {
     position: relative;
-    padding: .6em .8em;
+    padding: 0.6em 0.8em;
     margin: 0;
     color: #fff;
     font-size: 1.1em;
@@ -86,7 +96,7 @@
 
     &:not(:empty) {
       margin: 0 0 1rem 0 !important;
-      padding: .6em .8em;
+      padding: 0.6em 0.8em;
       border-bottom-width: 3px;
       border-bottom-style: solid;
     }
@@ -96,31 +106,67 @@
     margin-bottom: 20px;
   }
 
+  .section-subtext {
+    padding: 15px;
+  }
+
   .legend-container {
     background: #fff;
     width: 100%;
     padding: 15px;
     vertical-align: top;
-    text-align: center;
+    text-align: left;
     border: 1px solid $lightGray;
     order: 1;
     position: relative;
 
+    &__inner{
+      &.bottom{
+        display: grid;
+        grid-template-columns: auto auto;
+      }
+
+      &.single-row{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+   
+         & >div{
+          padding:0 1.2em 1em 0;
+        }
+
+        & div>span {
+         margin-right: 0!important;
+        }
+
+        & >div.legend-item{
+          margin: 0 !important;
+        }
+       }
+    }
+
     .legend-reset {
-      font-size: .7em;
+      font-size: 0.7em;
       color: rgba(0, 0, 0, 0.6);
       position: absolute;
       right: 1em;
       background: rgba(0, 0, 0, 0.1);
       text-transform: uppercase;
-      transition: .3s all;
-      padding: .375rem;
+      transition: 0.3s all;
+      padding: 0.375rem;
       top: 1em;
       border-radius: 3px;
 
+      &--dynamic {
+        position: relative;
+        float: right;
+        right: unset;
+      }
+
       &:hover {
-        background: rgba(0, 0, 0, .15);
-        transition: .3s all;
+        background: rgba(0, 0, 0, 0.15);
+        transition: 0.3s all;
       }
     }
 
@@ -132,30 +178,62 @@
 
     .legend-item > .legend-item {
       display: inline-block;
-      margin-right: .5rem;
+      margin-right: 0.5rem;
       flex: 0 0 auto;
     }
 
     h2 {
       font-size: 1.3em;
-      margin-bottom: .3em;
+    }
+
+    h2,p{
+      margin-bottom: 0.8em;
+    }
+    & div.legend-item{
+      margin-bottom: 0.5em !important;
+
+      &:last-child{
+       margin: 0 !important;
+      }
     }
 
     .legend-item {
       cursor: pointer;
-      transition: .2s all;
+      transition: 0.2s all;
 
       &.inactive {
-        opacity: .5;
-        transition: .2s all;
+        opacity: 0.5;
+        transition: 0.2s all;
+      }
+    }
+  }
+
+  .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;
-    box-shadow: rgba(0, 0, 0, .1) 3px 3px 7px;
+    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 7px;
     line-height: 1.4em;
     font-size: 1em !important;
     border-radius: 4px !important;
@@ -173,6 +251,10 @@
     flex-wrap: wrap;
     margin-bottom: 1em;
 
+    &.bottom{
+      flex-wrap: nowrap;
+      flex-direction: column;
+    }
     &.legend-hidden > svg {
       width: 100% !important;
     }
@@ -205,6 +287,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,24 +323,27 @@
   }
 
   .filters-section {
-    display: inline-block;
+    @include breakpoint(md) {
+      display: flex;
+      gap: 30px;
+    }
 
     label:not(:empty) {
-      margin-right: .4em;
+      margin-right: 0.4em;
     }
 
     select {
       font-size: 1em;
     }
 
-    .single-filter + .single-filter {
-      margin-left: 1em;
+    .single-filter {
+      margin-bottom: 0.5em;
     }
   }
 
   @include breakpointClass(xs) {
     &.font-small {
-      font-size: .8em;
+      font-size: 0.8em;
 
       .chart-container > svg {
         font-size: 12px;
@@ -240,7 +351,7 @@
     }
 
     &.font-medium {
-      font-size: .9em;
+      font-size: 0.9em;
 
       .chart-container > svg {
         font-size: 14px;
@@ -257,7 +368,8 @@
   }
 
   @include breakpointClass(md) {
-    .filters-section, .chart-container:not(.sparkline) {
+    .filters-section,
+    .chart-container:not(.sparkline) {
       margin-left: 1em;
       margin-right: 1em;
     }
@@ -275,6 +387,10 @@
           margin-right: 1em;
           order: 0;
         }
+        &.bottom{
+          width: 100%;
+          margin-left: 0;
+        }
       }
 
       > svg {
@@ -283,14 +399,14 @@
         order: 1;
 
         circle {
-          filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
+          filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
           transform-origin: 50% 50%;
         }
       }
     }
 
     &.font-small {
-      font-size: .9em;
+      font-size: 0.9em;
 
       .chart-container > svg {
         font-size: 14px;
@@ -306,6 +422,8 @@
     }
   }
 
+ 
+  
   @include breakpointClass(lg) {
     &.font-small {
       font-size: 1em;
@@ -331,13 +449,137 @@
       }
     }
   }
+
   [tabindex]:focus-visible {
     outline: 2px solid rgb(0, 95, 204) !important;
   }
+
+  // ANIMATIONS
+  // Pie Chart Animations
+  .animated-pie {
+    transition: all 0.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, 0.3) 1px solid !important;
+      box-shadow: rgba(0, 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 0.5s ease-in-out;
+      transition-delay: 0.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);
+    }
+  }
 }
 
-#paired-bar-legend {
+.cdc-visualization__paired-bar-chart {
+  text-align: center;
+  transform: scale(1);
+  > .visx-group[style] {
+    transform: scale(1);
+  }
+}
 
+#paired-bar-legend {
   text-align: center;
 
   div {
@@ -353,10 +595,9 @@
   }
 }
 
-
 .isEditor.type-sparkline .cdc-chart-inner-container {
-    margin: 3em auto 0;
-    max-width: 60%;
+  margin: 3em auto 0;
+  max-width: 60%;
 }
 
 .cdc-open-viz-module.type-chart.lg.type-sparkline .chart-container > svg {
@@ -369,9 +610,8 @@
 }
 
 .cdc-open-viz-module.type-chart.type-sparkline {
-
   .cove-component__content {
-    background: #F2F2F2;
+    background: #f2f2f2;
   }
 
   .cove-component__content.component--hideBackgroundColor {
@@ -387,7 +627,7 @@
   }
 
   .cove-component__content:not(.no-borders) {
-    border: 1px solid $lightGray
+    border: 1px solid $lightGray;
   }
 
   .cove-component__header ~ .cove-component__content:not(.no-borders) {
@@ -405,7 +645,6 @@
   .subtext {
     margin-bottom: 15px;
   }
-
 }
 
 .cdc-open-viz-module .cove-component__content.sparkline {
@@ -417,10 +656,10 @@
   border-bottom-right-radius: 3px;
 
   .visx-axis-tick:first-of-type {
-    transform: translate(20px, 0)
+    transform: translate(20px, 0);
   }
 
   .visx-axis-tick:last-of-type {
-    transform: translate(-20px, 0)
+    transform: translate(-20px, 0);
   }
 }

package/src/scss/variables.scss

@@ -1 +1 @@
-$editorWidth: 350px;
+$editorWidth: 350px;