@cdc/chart 1.3.1 → 1.3.3

package/src/scss/main.scss

@@ -0,0 +1,426 @@
+@import '~@cdc/core/styles/base';
+@import "~@cdc/core/styles/heading-colors";
+@import 'mixins';
+@import 'variables';
+@import '~@cdc/core/styles/v2/themes/color-definitions';
+
+.form-container {
+  overflow: scroll;
+}
+
+.d-flex { display: flex; }
+.flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.cdc-open-viz-module.type-chart {
+  @import 'DataTable';
+  @import 'editor-panel';
+
+  border-radius: 3px;
+
+  .visually-hidden {
+    position: fixed;
+    left: -10000px;
+  }
+
+  .loader {
+    width: 100%;
+    text-align: center;
+    display: inline-block;
+    animation: spin 1s linear infinite;
+
+    &::before {
+      content: '\21BB';
+    }
+  }
+
+  .btn {
+    background: #005eaa;
+    color: #fff !important;
+    border: 0;
+    padding: .4em .8em;
+    display: block;
+    border-radius: 5px;
+    transition: .1s all;
+    cursor: pointer;
+
+    &[disabled] {
+      opacity: 0.5;
+      z-index: -1;
+      position: relative;
+    }
+  }
+
+  .warning-icon {
+    position: relative;
+    top: 2px;
+    width: 15px;
+    height: 15px;
+    margin-left: 5px;
+
+    path {
+      fill: #d8000c;
+    }
+  }
+
+  .chart-title {
+    position: relative;
+    padding: .6em .8em;
+    margin: 0;
+    color: #fff;
+    font-size: 1.1em;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
+
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+
+    em {
+      font-style: italic;
+    }
+
+    strong {
+      font-weight: bold;
+    }
+
+    &:not(:empty) {
+      margin: 0 0 1rem 0 !important;
+      padding: .6em .8em;
+      border-bottom-width: 3px;
+      border-bottom-style: solid;
+    }
+  }
+
+  .chart-description {
+    margin-bottom: 20px;
+  }
+
+  .legend-container {
+    background: #fff;
+    width: 100%;
+    padding: 15px;
+    vertical-align: top;
+    text-align: center;
+    border: 1px solid $lightGray;
+    order: 1;
+    position: relative;
+
+    .legend-reset {
+      font-size: .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;
+      top: 1em;
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(0, 0, 0, .15);
+        transition: .3s all;
+      }
+    }
+
+    .legend-item {
+      text-align: left;
+      align-items: flex-start !important;
+      user-select: none;
+    }
+
+    .legend-item > .legend-item {
+      display: inline-block;
+      margin-right: .5rem;
+      flex: 0 0 auto;
+    }
+
+    h2 {
+      font-size: 1.3em;
+      margin-bottom: .3em;
+    }
+
+    .legend-item {
+      cursor: pointer;
+      transition: .2s all;
+
+      &.inactive {
+        opacity: .5;
+        transition: .2s all;
+      }
+    }
+  }
+
+  .tooltip {
+    background-color: #fff;
+    border: rgba(0, 0, 0, 0.3) 1px solid !important;
+    box-shadow: rgba(0, 0, 0, .1) 3px 3px 7px;
+    line-height: 1.4em;
+    font-size: 1em !important;
+    border-radius: 4px !important;
+    padding: 8px 12px !important;
+    opacity: 1;
+  }
+
+  .region-table {
+    margin-top: 15px;
+  }
+
+  .chart-container {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin-bottom: 1em;
+
+    &.legend-hidden > svg {
+      width: 100% !important;
+    }
+
+    > svg {
+      overflow: visible;
+      font-size: 14px;
+      margin: 1rem 0 2rem;
+
+      .visx-linepath {
+        pointer-events: none;
+      }
+
+      circle {
+        opacity: 0;
+      }
+    }
+
+    &.chart-line--hover {
+      > svg circle {
+        opacity: 0;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.chart-line--always {
+      > svg circle {
+        opacity: 1;
+      }
+    }
+
+    &.chart-bar--no-border {
+      .visx-group:not(.visx-axis) rect {
+        stroke: none;
+      }
+    }
+  }
+
+  .filters-section {
+    display: inline-block;
+
+    label:not(:empty) {
+      margin-right: .4em;
+    }
+
+    select {
+      font-size: 1em;
+    }
+
+    .single-filter + .single-filter {
+      margin-left: 1em;
+    }
+  }
+
+  @include breakpointClass(xs) {
+    &.font-small {
+      font-size: .8em;
+
+      .chart-container > svg {
+        font-size: 12px;
+      }
+    }
+
+    &.font-medium {
+      font-size: .9em;
+
+      .chart-container > svg {
+        font-size: 14px;
+      }
+    }
+
+    &.font-large {
+      font-size: 1em;
+
+      .chart-container > svg {
+        font-size: 16px;
+      }
+    }
+  }
+
+  @include breakpointClass(md) {
+    .filters-section, .chart-container:not(.sparkline) {
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+
+    .chart-container {
+      flex-wrap: nowrap;
+
+      .legend-container {
+        width: 25%;
+        margin-left: 1em;
+        order: 2;
+
+        &.left {
+          margin-left: 0;
+          margin-right: 1em;
+          order: 0;
+        }
+      }
+
+      > svg {
+        font-size: 16px;
+        width: 75%;
+        order: 1;
+
+        circle {
+          filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
+          transform-origin: 50% 50%;
+        }
+      }
+    }
+
+    &.font-small {
+      font-size: .9em;
+
+      .chart-container > svg {
+        font-size: 14px;
+      }
+    }
+
+    &.font-large {
+      font-size: 1.1em;
+
+      .chart-container > svg {
+        font-size: 18px;
+      }
+    }
+  }
+
+  @include breakpointClass(lg) {
+    &.font-small {
+      font-size: 1em;
+
+      .chart-container > svg {
+        font-size: 16px;
+      }
+    }
+
+    &.font-medium {
+      font-size: 1.1em;
+
+      .chart-container > svg {
+        font-size: 18px;
+      }
+    }
+
+    &.font-large {
+      font-size: 1.2em;
+
+      .chart-container > svg {
+        font-size: 20px;
+      }
+    }
+  }
+  [tabindex]:focus-visible {
+    outline: 2px solid rgb(0, 95, 204) !important;
+  }
+}
+
+#paired-bar-legend {
+
+  text-align: center;
+
+  div {
+    margin: 0 0.5em;
+    display: flex;
+  }
+
+  .indicator {
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+    margin: 0.25em;
+  }
+}
+
+
+.isEditor.type-sparkline .cdc-chart-inner-container {
+    margin: 3em auto 0;
+    max-width: 60%;
+}
+
+.cdc-open-viz-module.type-chart.lg.type-sparkline .chart-container > svg {
+  width: 100%;
+}
+
+.chart-container.sparkline {
+  display: flex !important;
+  flex-wrap: wrap !important;
+}
+
+.cdc-open-viz-module.type-chart.type-sparkline {
+
+  .cove-component__content {
+    background: #F2F2F2;
+  }
+
+  .cove-component__content.component--hideBackgroundColor {
+    background: transparent;
+  }
+
+  .chart-title:not(:empty) {
+    margin-bottom: 0 !important;
+  }
+
+  .cove-component__content .chart-container {
+    padding: 1em;
+  }
+
+  .cove-component__content:not(.no-borders) {
+    border: 1px solid $lightGray
+  }
+
+  .cove-component__header ~ .cove-component__content:not(.no-borders) {
+    border-top: none !important;
+  }
+
+  .subtext {
+    margin-top: 0px;
+  }
+
+  .isEditor {
+    position: relative;
+  }
+
+  .subtext {
+    margin-bottom: 15px;
+  }
+
+}
+
+.cdc-open-viz-module .cove-component__content.sparkline {
+  padding: 1em;
+}
+
+.cove-component__content.sparkline {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+
+  .visx-axis-tick:first-of-type {
+    transform: translate(20px, 0)
+  }
+
+  .visx-axis-tick:last-of-type {
+    transform: translate(-20px, 0)
+  }
+}

package/src/scss/variables.scss

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