@cdc/chart 4.22.11 → 4.23.1

package/src/components/PieChart.tsx

@@ -31,6 +31,16 @@ export default function PieChart() {
     freezeOnceVisible: false
   })
 
+  // Make sure the chart is visible if in the editor
+  useEffect(() => {
+    const element = document.querySelector('.isEditor')
+    if (element) {
+      // parent element is visible
+      console.log('setAnimation')
+      setAnimatePie(prevState => true)
+    }
+  })
+
   useEffect(() => {
     if (dataRef?.isIntersecting && config.animate && !animatedPie) {
       setTimeout(() => {
@@ -117,7 +127,7 @@ export default function PieChart() {
     width = width * 0.73
   }
 
-  const height = config.aspectRatio ? width * config.aspectRatio : config.height
+  const height = config.heights.vertical
 
   const radius = Math.min(width, height) / 2
   const centerY = height / 2
@@ -146,7 +156,7 @@ export default function PieChart() {
 
   return (
     <ErrorBoundary component='PieChart'>
-      <svg width={width} height={height} className={`group ${animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
+      <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
         <Group top={centerY} left={centerX}>
           <Pie data={filteredData || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
             {pie => <AnimatedPie<any> {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}

package/src/components/useIntersectionObserver.tsx

@@ -10,17 +10,19 @@ export default function useIntersectionObserver(elementRef, { threshold = 0, roo
   }
 
   useEffect(() => {
-    const node = elementRef?.current
-    const hasIOSupport = !!window.IntersectionObserver
+    setTimeout(() => {
+      const node = elementRef?.current
+      const hasIOSupport = !!window.IntersectionObserver
 
-    if (!hasIOSupport || frozen || !node) return
+      if (!hasIOSupport || frozen || !node) return
 
-    const observerParams = { threshold, root, rootMargin }
-    const observer = new IntersectionObserver(updateEntry, observerParams)
+      const observerParams = { threshold, root, rootMargin }
+      const observer = new IntersectionObserver(updateEntry, observerParams)
 
-    observer.observe(node)
+      observer.observe(node)
 
-    return () => observer.disconnect()
+      return () => observer.disconnect()
+    }, 500);
   }, [elementRef, threshold, root, rootMargin, frozen])
 
   return entry

package/src/data/initial-state.js

@@ -31,20 +31,25 @@ export default {
     tickColor: '#333',
     rightHideAxis: true,
     rightAxisSize: 50,
+    rightLabel: '',
     rightLabelOffsetSize: 0,
     rightAxisLabelColor: '#333',
     rightAxisTickLabelColor: '#333',
     rightAxisTickColor: '#333',
-    isLegendValue:false,
-    numTicks:''
-
+    numTicks: ''
   },
+  boxplot: [],
   topAxis: {
     hasLine: false
   },
+  isLegendValue: false,
   barThickness: 0.35,
   barHeight: 25,
-  height: 300,
+  barSpace: 15,
+  heights: {
+    vertical: 300,
+    horizontal: 750
+  },
   xAxis: {
     type: 'categorical',
     hideAxis: false,
@@ -57,15 +62,16 @@ export default {
     labelColor: '#333',
     tickLabelColor: '#333',
     tickColor: '#333',
-    isLegendValue:false,
-    numTicks:''
+    numTicks: '',
+    labelOffset: 65
   },
   table: {
     label: 'Data Table',
     expanded: true,
     limitHeight: false,
     height: '',
-    caption: ''
+    caption: '',
+    showDownloadUrl: false
   },
   orientation: 'vertical',
   legend: {
@@ -88,7 +94,7 @@ export default {
   palette: 'qualitative-bold',
   isPaletteReversed: false,
   labels: false,
-  dataFormat: { commas: false, prefix: '', suffix: '' },
+  dataFormat: { commas: false, prefix: '', suffix: '', abbreviated: false },
   confidenceKeys: {},
   visual: {
     border: true,

package/src/hooks/useReduceData.ts

@@ -1,6 +1,8 @@
 function useReduceData(config, data) {
-  // for combo charts check all  Data Series set to Bar;
+  // for combo charts check if all  Data Series selected to Bar;
   const isBar = config?.series?.every(element => element?.type === 'Bar')
+  // for combo charts check if all Data series selected Line or dashed-md/sm/lg.
+  const isAllLine = config?.series?.every(el => el.type === 'Line' || el.type=== 'dashed-sm'|| el.type=== 'dashed-md' || el.type=== 'dashed-lg');
 
   const getMaxValueFromData = () => {
     let max // will hold max number from data.
@@ -66,10 +68,11 @@ function useReduceData(config, data) {
     return existPositiveValue
   }
 
-  const maxValue = getMaxValueFromData()
-  const minValue = getMinValueFromData()
-  const existPositiveValue = findPositiveNum()
-  return { minValue, maxValue, existPositiveValue }
+  const maxValue = Number(getMaxValueFromData());
+  const minValue = Number(getMinValueFromData());
+  const existPositiveValue = findPositiveNum();
+
+  return {minValue, maxValue, existPositiveValue ,isAllLine}
 }
 
 export default useReduceData

package/src/index.html

@@ -1,67 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <style>
+      body {
+        /* max-width: 1000px; */
+        margin: 0 auto !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <style>
-    body {
-      /* max-width: 1000px; */
-      margin: 0 auto !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
+      .react-container + .react-container {
+        margin-top: 3rem;
+      }
+    </style>
+  </head>
 
-    .react-container+.react-container {
-      margin-top: 3rem;
-    }
-  </style>
-</head>
+  <body>
+    <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
 
-<body>
-  <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
-
-  <!-- <select id="cove_select">
+    <!-- <select id="cove_select">
       <option value=""">Choose An Option</option>
       <option value="Non-Hispanic White">Non-Hispanic White</option>
       <option value="Hispanic or Latino">Test 2</option>
     </select> -->
 
-  <div class="react-container" data-config="/examples/private/yaxis-test.json"></div>
-  <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>-->
-  <!-- <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div>-->
-  <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
-  <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
-  <!-- <div class="react-container" data-config="/examples/private/textelements.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div>  -->
-  <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
-
-  <!-- HORIZONTAL BAR CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/private/filters.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/private/yaxis-test.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/planet-combo-example-config.json"></div>-->
+<!--     <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div>-->
+    <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
+    <!--<div class="react-container" data-config="/examples/case-rate-example-config.json"></div>-->
+    <!-- <div class="react-container" data-config="/examples/private/textelements.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div>  -->
+    <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
 
-  <!-- VERTICAL BAR CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-with-confidence.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+    <!-- HORIZONTAL BAR CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
-  <!-- LOLLIPOP CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
+    <!-- VERTICAL BAR CHARTS -->
+    <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div>
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-with-confidence.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/box-plot.json"></div> -->
 
-  <!-- PAIRED BAR CHARTS -->
-  <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
+    <!-- LOLLIPOP CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
 
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-</body>
+    <!-- PAIRED BAR CHARTS -->
+    <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
 
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
 </html>

package/src/scss/DataTable.scss

@@ -1,6 +1,6 @@
 @include breakpointClass(md) {
   .data-table-container {
-    margin: 1em;
+    margin: 5px 1em;
   }
 }
 

package/src/scss/main.scss

@@ -120,30 +120,30 @@
     order: 1;
     position: relative;
 
-    &__inner{
-      &.bottom{
+    &__inner {
+      &.bottom {
         display: grid;
         grid-template-columns: auto auto;
       }
 
-      &.single-row{
+      &.single-row {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: flex-start;
-   
-         & >div{
-          padding:0 1.2em 1em 0;
+
+        & > div {
+          padding: 0 1.2em 1em 0;
         }
 
-        & div>span {
-         margin-right: 0!important;
+        & div > span {
+          margin-right: 0 !important;
         }
 
-        & >div.legend-item{
+        & > div.legend-item {
           margin: 0 !important;
         }
-       }
+      }
     }
 
     .legend-reset {
@@ -186,14 +186,15 @@
       font-size: 1.3em;
     }
 
-    h2,p{
+    h2,
+    p {
       margin-bottom: 0.8em;
     }
-    & div.legend-item{
+    & div.legend-item {
       margin-bottom: 0.5em !important;
 
-      &:last-child{
-       margin: 0 !important;
+      &:last-child {
+        margin: 0 !important;
       }
     }
 
@@ -249,9 +250,8 @@
     display: flex;
     align-items: flex-start;
     flex-wrap: wrap;
-    margin-bottom: 1em;
 
-    &.bottom{
+    &.bottom {
       flex-wrap: nowrap;
       flex-direction: column;
     }
@@ -323,6 +323,28 @@
   }
 
   .filters-section {
+    margin-left: 1rem;
+    margin-right: 1rem;
+
+    &__title {
+      margin: 15px 0;
+    }
+
+    &__wrapper {
+      margin-bottom: 40px;
+
+      hr {
+        margin-bottom: 20px;
+      }
+
+      label {
+        display: inherit;
+        margin-bottom: 5px;
+        font-weight: 600;
+        font-size: 16px;
+      }
+    }
+
     @include breakpoint(md) {
       display: flex;
       gap: 30px;
@@ -334,6 +356,7 @@
 
     select {
       font-size: 1em;
+      padding-right: 5px;
     }
 
     .single-filter {
@@ -377,6 +400,10 @@
     .chart-container {
       flex-wrap: nowrap;
 
+      .no-wrap {
+        flex-wrap: nowrap;
+      }
+
       .legend-container {
         width: 25%;
         margin-left: 1em;
@@ -387,7 +414,7 @@
           margin-right: 1em;
           order: 0;
         }
-        &.bottom{
+        &.bottom {
           width: 100%;
           margin-left: 0;
         }
@@ -422,8 +449,6 @@
     }
   }
 
- 
-  
   @include breakpointClass(lg) {
     &.font-small {
       font-size: 1em;
@@ -457,6 +482,7 @@
   // ANIMATIONS
   // Pie Chart Animations
   .animated-pie {
+    margin: auto !important;
     transition: all 0.4s ease-in-out;
     opacity: 0;
     transform-origin: center;
@@ -494,19 +520,20 @@
   .linear,
   .Line,
   .Combo {
-    &.animated path {
+    &.animated path.animation {
       opacity: 0;
     }
     &.animate {
-      path {
+      path.animation {
         opacity: 1;
         stroke-dasharray: 2000;
-        stroke-dashoffset: 2000;
+        stroke-dashoffset: 4000;
         animation: dash 2s ease-in-out forwards;
       }
       @keyframes dash {
         to {
           stroke-dashoffset: 0;
+          opacity: 0;
         }
       }
     }
@@ -545,6 +572,10 @@
       .group-2 {
         transform-origin: center;
       }
+
+      .visx-linepath .animation {
+        opacity: 0;
+      }
     }
   }
 

package/examples/private/filters.json

@@ -1,170 +0,0 @@
-{
-  "type": "chart",
-  "title": "Combo Chart (With Right Axis)",
-  "theme": "theme-blue",
-  "animate": false,
-  "fontSize": "medium",
-  "lineDatapointStyle": "hover",
-  "barHasBorder": "false",
-  "isLollipopChart": false,
-  "lollipopShape": "circle",
-  "lollipopColorStyle": "two-tone",
-  "visualizationSubType": "regular",
-  "barStyle": "",
-  "roundingStyle": "standard",
-  "tipRounding": "top",
-  "padding": {
-    "left": 5,
-    "right": 5
-  },
-  "yAxis": {
-    "hideAxis": false,
-    "displayNumbersOnBar": false,
-    "hideLabel": false,
-    "hideTicks": false,
-    "size": 50,
-    "gridLines": false,
-    "min": "",
-    "max": "",
-    "labelColor": "orange",
-    "tickLabelColor": "orange",
-    "tickColor": "orange",
-    "rightHideAxis": true,
-    "rightAxisSize": "88",
-    "rightLabelOffsetSize": "80",
-    "rightAxisLabelColor": "purple",
-    "rightAxisTickLabelColor": "purple",
-    "rightAxisTickColor": "purple",
-    "isLegendValue": false,
-    "numTicks": "",
-    "label": "Left Axis (Value)",
-    "rightSeries": "tot_tests_18_older",
-    "rightLabel": "",
-    "rightHideLabel": false,
-    "rightHideTicks": false,
-    "rightNumTicks": "6"
-  },
-  "topAxis": {
-    "hasLine": false
-  },
-  "barThickness": 0.35,
-  "barHeight": 25,
-  "height": 300,
-  "xAxis": {
-    "type": "date",
-    "hideAxis": false,
-    "hideLabel": false,
-    "hideTicks": false,
-    "size": "100",
-    "tickRotation": 30,
-    "min": "",
-    "max": "",
-    "labelColor": "blue",
-    "tickLabelColor": "blue",
-    "tickColor": "blue",
-    "isLegendValue": false,
-    "numTicks": "",
-    "label": "Date/Category Axis",
-    "dataKey": "week",
-    "dateParseFormat": "%m/%d/%Y",
-    "dateDisplayFormat": "%m/%d/%Y"
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": false,
-    "limitHeight": false,
-    "height": "",
-    "caption": "",
-    "show": true
-  },
-  "orientation": "vertical",
-  "legend": {
-    "behavior": "isolate",
-    "position": "bottom",
-    "singleRow": false,
-    "colorCode": "",
-    "reverseLabelOrder": false,
-    "description": "",
-    "dynamicLegend": false,
-    "dynamicLegendDefaultText": "Show All",
-    "dynamicLegendItemLimit": 5,
-    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
-    "dynamicLegendChartMessage": "Select Options from the Legend",
-    "hide": false
-  },
-  "exclusions": {
-    "active": false,
-    "keys": []
-  },
-  "palette": "qualitative-bold",
-  "isPaletteReversed": false,
-  "labels": false,
-  "dataFormat": {
-    "commas": false,
-    "prefix": "",
-    "suffix": "",
-    "roundTo": "0"
-  },
-  "confidenceKeys": {},
-  "visual": {
-    "border": true,
-    "accent": true,
-    "background": true
-  },
-  "dataUrl": "/examples/private/yaxis.json",
-  "visualizationType": "Combo",
-  "series": [
-    {
-      "dataKey": "tot_tests_0_12",
-      "type": "Bar",
-      "axis": "Left"
-    },
-    {
-      "dataKey": "tot_tests_13_17",
-      "type": "Bar",
-      "axis": "Left"
-    },
-    {
-      "dataKey": "0_12_positivity_rate",
-      "type": "Bar",
-      "axis": "Left"
-    }
-  ],
-  "dataCutoff": "0.5",
-  "filters": [
-    {
-      "values": [
-        "5/21/2022",
-        "5/28/2022",
-        "6/4/2022",
-        "6/11/2022",
-        "6/18/2022",
-        "6/25/2022",
-        "7/2/2022",
-        "7/9/2022",
-        "7/16/2022",
-        "7/23/2022",
-        "7/30/2022",
-        "8/6/2022",
-        "8/13/2022",
-        "8/20/2022",
-        "8/27/2022",
-        "9/3/2022",
-        "9/10/2022",
-        "9/17/2022",
-        "9/24/2022",
-        "10/1/2022",
-        "10/8/2022",
-        "10/15/2022",
-        "10/22/2022",
-        "10/29/2022",
-        "11/5/2022",
-        "11/12/2022"
-      ],
-      "active": "5/21/2022",
-      "order": "asc",
-      "columnName": "week",
-      "label": "Week"
-    }
-  ]
-}

package/examples/private/line-test-data.json

@@ -1,22 +0,0 @@
-[
-  {
-    "Number": "11.0",
-    "Date": "9/1/2022"
-  },
-  {
-    "Number": "12.2",
-    "Date": "9/2/2022"
-  },
-  {
-    "Number": "13.6",
-    "Date": "9/4/2022"
-  },
-  {
-    "Number": "",
-    "Date": "9/5/2022"
-  },
-  {
-    "Number": "6.4",
-    "Date": "9/6/2022"
-  }
-]