@cdc/chart 4.23.8 → 4.23.10

package/src/hooks/useScales.js

@@ -48,12 +48,12 @@ const useScales = properties => {
   }
 
   // handle Area chart
-  if (config.visualizationType === 'Area Chart' && config.xAxis.type === 'date') {
+  if (config.xAxis.type === 'date' && config.xAxis.sortDates) {
     xScale = scaleTime({
       domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)],
       range: [0, xMax]
     })
-    xScale.type = scaleTypes.TIME
+    xScale.type = scaleTypes.LINEAR
   }
 
   // handle Deviation bar

package/src/hooks/useTooltip.jsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
+import { defaultStyles } from '@visx/tooltip'
 
 // third party
 import { localPoint } from '@visx/event'
@@ -30,6 +31,8 @@ export const useTooltip = props => {
     }
 
     const tooltipInformation = {
+      tooltipLeft: tooltipData.dataXPosition,
+      tooltipTop: tooltipData.dataYPosition,
       tooltipData: tooltipData
     }
 
@@ -50,11 +53,22 @@ export const useTooltip = props => {
     // Additional data for pie charts
     const { data: pieChartData, arc } = additionalChartData
 
-    const closestXScaleValue = getXValueFromCoordinate(x)
+    const closestXScaleValue = getXValueFromCoordinate(x - Number(config.yAxis.size || 0))
 
     const includedSeries = visualizationType !== 'Pie' ? config.series.filter(series => series.tooltip === true).map(item => item.dataKey) : config.series.map(item => item.dataKey)
     includedSeries.push(config.xAxis.dataKey)
 
+    if (config.visualizationType === 'Forecasting') {
+      config.series.map(s => {
+        s.confidenceIntervals.map(c => {
+          if (c.showInTooltip) {
+            includedSeries.push(c.high)
+            includedSeries.push(c.low)
+          }
+        })
+      })
+    }
+
     const yScaleValues = getYScaleValues(closestXScaleValue, includedSeries)
 
     const xScaleValues = data.filter(d => d[xAxis.dataKey] === getClosestYValue(y))
@@ -103,14 +117,14 @@ export const useTooltip = props => {
       if (visualizationType === 'Pie') {
         return [
           [config.xAxis.dataKey, pieChartData],
-          [config.runtime.yAxis.dataKey, formatNumber(arc.data[config.runtime.yAxis.dataKey])],
-          ['Percent', `${Math.round((((arc.endAngle - arc.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
+          [config.runtime.yAxis.dataKey, formatNumber(arc?.data[config.runtime.yAxis.dataKey])],
+          ['Percent', `${Math.round((((arc?.endAngle - arc?.startAngle) * 180) / Math.PI / 360) * 100) + '%'}`]
         ]
       }
 
       return getIncludedTooltipSeries()
         .filter(Boolean)
-        .flatMap(seriesKey => {
+        .flatMap((seriesKey, index) => {
           return resolvedScaleValues[0][seriesKey] ? [[seriesKey, resolvedScaleValues[0][seriesKey], getAxisPosition(seriesKey)]] : []
         })
     }
@@ -131,7 +145,6 @@ export const useTooltip = props => {
    */
   const handleTooltipMouseOff = () => {
     if (config.visualizationType === 'Area Chart') {
-      console.log('HERE IN OFF')
       setTimeout(() => {
         hideTooltip()
       }, 3000)
@@ -170,11 +183,11 @@ export const useTooltip = props => {
   const getXValueFromCoordinate = x => {
     if (visualizationType === 'Pie') return
     if (orientation === 'horizontal') return
-    if (xScale.type === 'point' || xAxis.type === 'continuous') {
+    if (xScale.type === 'point' || xAxis.type === 'continuous' || xAxis.type === 'date') {
       // Find the closest x value by calculating the minimum distance
       let closestX = null
       let minDistance = Number.MAX_VALUE
-      let offset = x - yAxis.size
+      let offset = x
 
       data.forEach(d => {
         const xPosition = xAxis.type === 'date' ? xScale(parseDate(d[xAxis.dataKey])) : xScale(d[xAxis.dataKey])
@@ -315,7 +328,7 @@ export const useTooltip = props => {
       if (!config.dashboard) {
         switch (visualizationType) {
           case 'Combo':
-            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.barSeriesKeys, ...runtime?.lineSeriesKeys, ...stageColumns, ...ciItems]
+            standardLoopItems = [runtime.xAxis.dataKey, ...runtime?.seriesKeys, ...stageColumns, ...ciItems]
             break
           case 'Forecasting':
             standardLoopItems = [runtime.xAxis.dataKey, ...stageColumns, ...ciItems]

package/src/scss/legend.scss

@@ -0,0 +1,206 @@
+// Notes - copied in from map > sidebar.scss
+// should be placed in a more global area eventually.
+// Had to remove/edit some styles to make the legend look proper.
+aside {
+  background-color: #fff;
+  z-index: 6;
+  border-top: $lightGray 1px solid;
+  @include breakpointClass(md) {
+    &.bottom {
+      border: $lightGray 1px solid;
+    }
+    &.side {
+      z-index: 1;
+      box-sizing: content-box;
+      max-width: 450px;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      align-self: flex-start;
+      z-index: 4;
+      right: 1em;
+      border: $lightGray 1px solid;
+      width: 50%;
+      top: 2em;
+      right: 1em;
+
+      ul.vertical-sorted {
+        @include breakpoint(md) {
+          column-count: 2;
+          column-fill: balance;
+        }
+      }
+
+      ul:not(.vertical-sorted) {
+        @include breakpoint(md) {
+          column-count: initial;
+          column-fill: initial;
+        }
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+    }
+
+    &.bottom {
+      ul.legend-container__ul.vertical-sorted {
+        display: block;
+        @include breakpoint(md) {
+          column-count: 2;
+          column-fill: balance;
+        }
+      }
+
+      ul.legend-container__ul {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        li {
+          width: 50%;
+        }
+      }
+
+      ul.single-row {
+        display: block;
+        column-count: initial;
+        column-fill: auto;
+      }
+    }
+  }
+
+  &.legend-container {
+    padding: 1em;
+    position: relative;
+    .legend-container__title {
+      font-size: 1.3em;
+      padding-bottom: 0;
+      display: inline-block;
+    }
+    .legend-container__title + p,
+    .legend-container__title + ul,
+    p + ul,
+    p + p {
+      padding-top: 1em;
+    }
+    .legend-container__reset-button {
+      font-size: 0.75em;
+      color: rgba(0, 0, 0, 0.6);
+      position: absolute;
+      right: 1em;
+      top: 1em;
+      background: rgba(0, 0, 0, 0.1);
+      text-transform: uppercase;
+      transition: 0.2s all;
+      padding: 0.2em 0.5em;
+      border: rgba(0, 0, 0, 0.2) 1px solid;
+      color: rgba(0, 0, 0, 0.6) !important;
+      &:hover {
+        text-decoration: none;
+        background: rgba(0, 0, 0, 0.15);
+        transition: 0.2s all;
+      }
+    }
+    p {
+      line-height: 1.4em;
+    }
+    .legend-container__ul {
+      list-style: none;
+      padding-top: 1em;
+
+      &.vertical-sorted {
+        flex-direction: column;
+      }
+      .legend-container__li {
+        flex-shrink: 0;
+        display: inline-block;
+        padding-right: 1em;
+        padding-bottom: 1em;
+        vertical-align: middle;
+        transition: 0.1s opacity;
+        display: flex;
+        cursor: pointer;
+        flex-grow: 1;
+
+        &.legend-container__li--disabled {
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+
+  &.side .legend-container .legend-container__ul--single-column {
+    @include breakpointClass(md) {
+      width: 25%;
+      min-width: 200px;
+      .legend-section ul {
+        flex-direction: column;
+        li {
+          width: 100%;
+          &:nth-last-of-type(-n + 2) {
+            padding-bottom: 1em;
+          }
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+    li {
+      width: 100%;
+    }
+  }
+
+  &.bottom.single-row {
+    width: 100%;
+    .legend-container ul {
+      flex-direction: row;
+      align-items: baseline;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      li {
+        justify-items: center;
+        line-break: loose;
+        align-items: center;
+        width: auto;
+        padding-right: 1em;
+        padding-bottom: 1em;
+        display: inline-block;
+        & > span {
+          margin: 0 !important;
+        }
+      }
+    }
+  }
+
+  @include breakpointClass(sm) {
+    .legend-container ul {
+      align-items: flex-start;
+      justify-content: space-between;
+      li {
+        flex-grow: 1;
+        padding-right: 0.5em;
+      }
+    }
+  }
+
+  .filters-section {
+    padding: 0 1em 1em;
+    .heading-3 {
+      font-weight: bold;
+      margin-bottom: 0.5em;
+    }
+    form {
+      margin-top: 0.5em;
+      line-height: 2em;
+      display: flex;
+      align-items: flex-end;
+      section + section {
+        margin-left: 0.75em;
+      }
+      select {
+        display: block;
+        font-size: 1em;
+      }
+    }
+  }
+}

package/src/scss/main.scss

@@ -126,25 +126,27 @@
     &__inner {
       &.bottom {
         display: grid;
-        grid-template-columns: auto auto;
+        grid-template-columns: 1fr 1fr;
+        grid-column-gap: 1.5em;
+      }
+      &.vertical-sorted {
+        display: block;
+
+        @include breakpoint(md) {
+          column-count: 2;
+          column-width: 100%;
+        }
+        column-gap: 1.5em;
+        column-fill: balance;
       }
 
       &.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-item {
+          flex-basis: auto;
         }
       }
     }
@@ -177,6 +179,17 @@
       text-align: left;
       align-items: flex-start !important;
       user-select: none;
+      white-space: nowrap;
+
+      .visx-legend-label {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+    }
+
+    .vertical-sorted:not(.single-row) .legend-item {
+      white-space: nowrap;
     }
 
     .legend-item > .legend-item {
@@ -669,14 +682,6 @@
     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;
   }
@@ -684,10 +689,6 @@
   .isEditor {
     position: relative;
   }
-
-  .subtext {
-    margin-bottom: 15px;
-  }
 }
 
 .cdc-open-viz-module .cove-component__content.sparkline {