@cdc/chart 1.3.4 → 9.22.9

package/src/components/PieChart.tsx

@@ -6,6 +6,7 @@ import Pie, { ProvidedProps, PieArcDatum } from '@visx/shape/lib/shapes/Pie';
 import chroma from "chroma-js";
 import { Group } from '@visx/group';
 import { Text } from '@visx/text';
+import useIntersectionObserver from "./useIntersectionObserver";
 
 import Context from '../context';
 
@@ -20,11 +21,21 @@ const enterUpdateTransition = ({ startAngle, endAngle }: PieArcDatum<any>) => ({
 });
 
 export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport } = useContext<any>(Context);
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext<any>(Context);
 
   const [filteredData, setFilteredData] = useState<any>(undefined);
+  const [animatedPie, setAnimatePie] = useState<boolean>((!config.animate));
 
-  
+  const triggerRef = useRef();
+  const dataRef = useIntersectionObserver(triggerRef, {
+    freezeOnceVisible: false
+  });
+
+  if( dataRef?.isIntersecting && config.animate && ! animatedPie ) {
+    setTimeout(() => {
+      setAnimatePie(true);
+    }, 500);
+  }
 
   type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
     animate?: boolean;
@@ -66,7 +77,14 @@ export default function PieChart() {
 
             const tooltip = `<div>
             ${yAxisTooltip}<br />
-            ${xAxisTooltip}<br />`
+            ${xAxisTooltip}<br />
+            Percent: ${Math.round(
+                (((arc.endAngle - arc.startAngle) * 180) /
+                  Math.PI /
+                  360) *
+                  100
+              ) + "%"}
+            `
 
             return (
               <Group key={key} style={{ opacity: (config.legend.behavior === "highlight" && seriesHighlight.length > 0 && seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1) ? 0.5 : 1 }}>
@@ -94,12 +112,12 @@ export default function PieChart() {
             props: PieStyles;
             key: string;
             }) => {
-           
+
             const [centroidX, centroidY] = path.centroid(arc);
             const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;
 
             let textColor = "#FFF";
-            if (chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
+            if (colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
               textColor = "000";
             }
 
@@ -165,7 +183,13 @@ export default function PieChart() {
 
   return (
     <ErrorBoundary component="PieChart">
-      <svg width={width} height={height}>
+      <svg
+        width={width}
+        height={height}
+        className={`animated-pie group ${animatedPie ? 'animated' : ''}`}
+        role="img"
+        aria-label={handleChartAriaLabels(config)}
+      >
         <Group top={centerY} left={centerX}>
           <Pie
             data={filteredData || data}
@@ -183,6 +207,7 @@ export default function PieChart() {
           </Pie>
         </Group>
       </svg>
+      <div ref={triggerRef} />
       <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} html={true} type="light" arrowColor="rgba(0,0,0,0)" className="tooltip"/>
     </ErrorBoundary>
   )

package/src/components/SparkLine.js

@@ -20,7 +20,7 @@ import Context from '../context';
 
 export default function SparkLine({width: parentWidth, height: parentHeight}) {
 
-	const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale } = useContext(Context);
+	const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(Context);
 	let width = parentWidth
 	const { minValue, maxValue } = useReduceData(config, data)
 	// if (config && config.legend && !config.legend.hide && (currentViewport === 'lg' || currentViewport === 'md')) {
@@ -107,9 +107,12 @@ export default function SparkLine({width: parentWidth, height: parentHeight}) {
 	return (
 		<ErrorBoundary component="SparkLine">
 			<svg
+				role="img"
+				aria-label={handleChartAriaLabels(config)}
 				width={width} 
 				height={height} 
 				className={'sparkline'}
+				tabIndex={0}
 				>
 					{(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
 						<>

package/src/components/useIntersectionObserver.tsx

@@ -0,0 +1,32 @@
+import {useEffect, useState} from "react";
+
+export default function useIntersectionObserver(
+    elementRef,
+    { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false }
+) {
+    const [entry, setEntry] = useState<any>();
+
+    const frozen = entry?.isIntersecting && freezeOnceVisible;
+
+    const updateEntry = ([entry]) => {
+        setEntry(entry);
+    };
+
+    useEffect(() => {
+        const node = elementRef?.current;
+        const hasIOSupport = !!window.IntersectionObserver;
+
+        // console.log('node: ', node)
+
+        if (!hasIOSupport || frozen || !node) return;
+
+        const observerParams = { threshold, root, rootMargin };
+        const observer = new IntersectionObserver(updateEntry, observerParams);
+
+        observer.observe(node);
+
+        return () => observer.disconnect();
+    }, [elementRef, threshold, root, rootMargin, frozen]);
+
+    return entry;
+}

package/src/data/initial-state.js

@@ -2,6 +2,7 @@ export default {
   type: 'chart',
   title: '',
   theme: 'theme-blue',
+  animate: false,
   fontSize: 'medium',
   lineDatapointStyle: 'hover',
   barHasBorder: 'false',
@@ -9,20 +10,25 @@ export default {
   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: undefined,
-    max:undefined
+    min:'',
+    max:'',
   },
   barThickness: 0.35,
+  barHeight: 25,
   height: 300,
   xAxis: {
     type: 'categorical',
@@ -31,18 +37,22 @@ export default {
     hideTicks: false,
     size: 75,
     tickRotation: 0,
-    min: undefined,
-    max:undefined
+    min: '',
+    max:'',
   },
   table: {
     label: 'Data Table',
-    expanded: true
+    expanded: true,
+    limitHeight:false,
+    height:"",
+    caption:""
   },
   orientation: 'vertical',
   legend: {
     behavior: 'isolate',
     position: 'right',
-    reverseLabelOrder:false
+    reverseLabelOrder:false,
+    description:''
   },
   exclusions: {
     active: false,
@@ -51,7 +61,7 @@ export default {
   palette: 'qualitative-bold',
   isPaletteReversed: false,
   labels: false,
-  dataFormat: {},
+  dataFormat: {commas:false,prefix:'',suffix:""},
   confidenceKeys: {},
   visual: {
     border: true,

package/src/hooks/useReduceData.ts

@@ -1,30 +1,43 @@
 
 function useReduceData(config,data) {
+    // for combo charts check all  Data Series set to Bar;
+  const isBar = config?.series?.every(element=>element?.type === 'Bar');
 
-const getMaxValueFromData = ()=>{
-    let max;  // will hold max number from data.
+const getMaxValueFromData = () => {
+  let max; // will hold max number from data.
+  if (
+    (config.visualizationType === "Bar" || (config.visualizationType === "Combo" && isBar )) &&
+    config.visualizationSubType === "stacked"
+  ) {
+    const yTotals = data.reduce((allTotals, xValue) => {
+      const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
+        yTotal += Number(xValue[k]);
+        return yTotal;
+      }, 0);
 
-    if (config.visualizationType === 'Bar' && config.visualizationSubType === 'stacked') {
-        const yTotals = data.reduce((allTotals, xValue) => {
-          const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
-            yTotal += Number(xValue[k]);
-            return yTotal;
-          }, 0);
-          allTotals.push(totalYValues);
-          if(totalYValues > max){
-            max = totalYValues;
-          }
-          return allTotals;
-        }, [] as number[]);
-
-        max = Math.max(...yTotals);
-      } else if(config.visualizationType === 'Bar' && config.confidenceKeys && config.confidenceKeys.upper) {
-        max = Math.max(...data.map((d) => Number(d[config.confidenceKeys.upper])));
-      } else {
-        max = Math.max(...data.map((d) => Math.max(...config.runtime.seriesKeys.map((key) => Number(d[key])))));
+      allTotals.push(totalYValues);
+      if (totalYValues > max) {
+        max = totalYValues;
       }
+      return allTotals;
+    }, [] as number[]);
+
+    max = Math.max(...yTotals);
+  } else if (
+    config.visualizationType === "Bar" &&
+    config.series &&
+    config.series.dataKey
+  ) {
+    max = Math.max(...data.map((d) => Number(d[config.series.dataKey])));
+  } else {
+    max = Math.max(
+      ...data.map((d) =>
+        Math.max(...config.runtime.seriesKeys.map((key) => Number(d[key])))
+      )
+    );
+  }
 
-      return max;
+  return max;
 };
     
 const getMinValueFromData = ()=> {
@@ -34,10 +47,24 @@ const getMinValueFromData = ()=> {
  
     return min;
 };
+
+const findPositiveNum = ():boolean=>{
+  // loop throught provided data to find positve number in arr based on series keys.
+  let existPositiveValue = false;
+  if (config.runtime.seriesKeys) {
+    for(let i = 0; i < config.runtime.seriesKeys.length; i++) {
+      existPositiveValue = data.some(d => d[config.runtime.seriesKeys[i]] >= 0);
+    };
+  };
+  return existPositiveValue;
+};
+  
+  
     
     const maxValue = getMaxValueFromData();
-    const minValue = getMinValueFromData()
-  return {minValue,maxValue}
+    const minValue = getMinValueFromData();
+    const existPositiveValue = findPositiveNum();
+  return {minValue,maxValue,existPositiveValue};
 }
 
 export default useReduceData

package/src/index.html

@@ -31,19 +31,15 @@
     <!-- <div class="react-container" data-config="/examples/covid-example-config.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-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/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/example-bar-chart.json"></div> -->
-
-    <!-- LINE -->
-    <!-- <div class="react-container" data-config="/examples/line-chart.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> -->

package/src/scss/editor-panel.scss

@@ -265,7 +265,6 @@
       display: block;
       text-align: left;
       cursor: pointer;
-      color: rgba(0, 0, 0, .5);
       text-decoration: underline;
 
       span {
@@ -310,6 +309,8 @@
     z-index: 3;
   }
 
+
+  legend,
   label {
     text-transform: uppercase;
     display: block;
@@ -341,6 +342,29 @@
     }
   }
 
+  legend {
+    font-weight: normal;
+    margin-bottom: 0.3em;
+  }
+
+  legend + span {
+    float: left;
+  }
+
+  .radio-label {
+    font-weight: normal;
+  }
+
+  .accordion__panel fieldset:not(:first-child) {
+    margin-top: 1em;
+  }
+
+  .accordion__panel fieldset {
+    label:not(:first-child) {
+      margin-top: 0rem;
+    }
+  }
+
   input[type="text"], input[role="combobox"], input[type="number"], textarea {
     min-width: 100%;
     max-width: 100%; // Doing this prevents width of textarea from being changed
@@ -350,7 +374,7 @@
     min-height: 140px;
   }
 
-  .header .color-palette li {
+  .header .color-palette button {
     width: 21px;
     height: 21px;
     border-radius: 40px;
@@ -365,7 +389,7 @@
     list-style: none;
     flex-wrap: wrap;
 
-    li {
+    button {
       width: 45px;
       height: 23px;
       margin-right: 4px;
@@ -375,6 +399,7 @@
       overflow: hidden;
       cursor: pointer;
       position: relative;
+      padding: 0;
 
       .click-target {
         position: absolute;
@@ -390,12 +415,17 @@
 
       span {
         width: 33.3%;
+        height: 100%;
       }
     }
   }
 
   fieldset {
     display: block;
+
+    .float-left {
+      float: left;
+    }
   }
 
   .primary-fieldset {
@@ -641,7 +671,7 @@
     cursor: auto;
   }
 
-  [type="radio"] {
+  input[type="radio"] {
     border: 1px solid #8c8f94;
     border-radius: 50%;
     margin-right: 5px;

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; }
@@ -96,6 +96,10 @@
     margin-bottom: 20px;
   }
 
+  .section-subtext {
+    padding: 15px;
+  }
+
   .legend-container {
     background: #fff;
     width: 100%;
@@ -215,7 +219,10 @@
   }
 
   .filters-section {
-    display: inline-block;
+    @include breakpoint(md) {
+      display: flex;
+      gap: 30px;
+    }
 
     label:not(:empty) {
       margin-right: .4em;
@@ -225,8 +232,8 @@
       font-size: 1em;
     }
 
-    .single-filter + .single-filter {
-      margin-left: 1em;
+    .single-filter {
+      margin-bottom: .5em;
     }
   }
 
@@ -331,9 +338,163 @@
       }
     }
   }
+
   [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;
+          //transform-origin: bottom;
+        }
+
+        .horizontal rect,
+        .horizontal foreignObject {
+          //transform: scale(0, 1);
+          //display: none;
+          //opacity: 1;
+          animation: growBarH 0.5s linear forwards;
+          animation-play-state: paused;
+        }
+
+        circle {
+          opacity: 0;
+          animation: revealLolly 0.25s linear forwards;
+          animation-delay: 0.5s;
+          animation-play-state: paused;
+        }
+
+        &.animate {
+          rect,
+          foreignObject {
+            //opacity: 1;
+            animation-play-state: running;
+          }
+
+          circle {
+            animation-play-state: running;
+          }
+        }
+
+        .group-1,
+        .group-2 {
+          transform-origin: center;
+        }
+
+
+      }
+    }
+    */
+  @keyframes revealLolly {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @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 +514,6 @@
   }
 }
 
-
 .isEditor.type-sparkline .cdc-chart-inner-container {
     margin: 3em auto 0;
     max-width: 60%;