@cdc/chart 1.3.4 → 4.22.10

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,23 @@ 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>(false);
 
-  
+  const triggerRef = useRef();
+  const dataRef = useIntersectionObserver(triggerRef, {
+    freezeOnceVisible: false
+  });
+
+  useEffect( () => {
+    if (dataRef?.isIntersecting && config.animate && !animatedPie) {
+      setTimeout(() => {
+        setAnimatePie(true);
+      }, 500);
+    }
+  }, [dataRef?.isIntersecting, config.animate])
 
   type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
     animate?: boolean;
@@ -66,7 +79,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 +114,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 +185,13 @@ export default function PieChart() {
 
   return (
     <ErrorBoundary component="PieChart">
-      <svg width={width} height={height}>
+      <svg
+        width={width}
+        height={height}
+        className={`group ${animatedPie ? 'animated' : ''}`}
+        role="img"
+        aria-label={handleChartAriaLabels(config)}
+      >
         <Group top={centerY} left={centerX}>
           <Pie
             data={filteredData || data}
@@ -183,6 +209,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

@@ -15,17 +15,14 @@ import ReactTooltip from 'react-tooltip';
 
 import useReduceData from '../hooks/useReduceData';
 
-
 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')) {
-	// 	width = width * 0.73;
-	// }
+
 	const margin = ({ top: 5, right: 10, bottom: 10, left: 10 })
 	const height = parentHeight;
 
@@ -38,16 +35,14 @@ export default function SparkLine({width: parentWidth, height: parentHeight}) {
 	let xScale;
 	let yScale;
 	let seriesScale;
-
+	const {max:enteredMaxValue,min:enteredMinValue} = config.runtime.yAxis;
+  		const isMaxValid =  Number(enteredMaxValue)  >= Number(maxValue); 
+  		const isMinValid =  Number(enteredMinValue)  <= Number(minValue); 
 
 	if (data) {
-		let min = config.runtime.yAxis.min !== undefined ? config.runtime.yAxis.min : minValue
-		let max = config.runtime.yAxis.max !== undefined ? config.runtime.yAxis.max : Number.MIN_VALUE;
-
-		if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && min > 0) {
-			min = 0;
-		}
-		//If data value max wasn't provided, calculate it
+		let min = (enteredMinValue && isMinValid) ? enteredMinValue : minValue;
+		let max = (enteredMaxValue && isMaxValid )? enteredMaxValue : Number.MIN_VALUE;
+		
 		if (max === Number.MIN_VALUE) {
 			max = maxValue
 		}
@@ -107,15 +102,19 @@ 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) => (
 						<>
 						<Group
 							className='sparkline-group'
 							height={parentHeight}
+							style={{ height: parentHeight}}
 							top={margin.top}
 							key={`series-${seriesKey}`}
 							opacity={config.legend.behavior === "highlight" && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
@@ -126,13 +125,12 @@ export default function SparkLine({width: parentWidth, height: parentHeight}) {
 								let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
 
 								const tooltip = `<div>
-				${yAxisTooltip}<br />
-				${xAxisTooltip}<br />
-				${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''} 
-				</div>`
+									${yAxisTooltip}<br />
+									${xAxisTooltip}<br />
+									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''} 
+									</div>`
 
 								let circleRadii = 4.5
-
 								return (
 									<Group key={`series-${seriesKey}-point-${dataIndex}`}>
 										<Text
@@ -144,7 +142,7 @@ export default function SparkLine({width: parentWidth, height: parentHeight}) {
 											{formatNumber(d[seriesKey])}
 										</Text>
 
-										{dataIndex + 1 !== data.length &&
+										{ dataIndex + 1 !== data.length && ( (config.lineDatapointStyle === 'always show') || (config.lineDatapointStyle === 'hover') ) &&
 											<circle
 												key={`${seriesKey}-${dataIndex}`}
 												r={circleRadii}
@@ -168,16 +166,19 @@ export default function SparkLine({width: parentWidth, height: parentHeight}) {
 								strokeWidth={2}
 								strokeOpacity={1}
 								shapeRendering="geometricPrecision"
-								marker-end="url(#arrow)"
+								marker-end={`url(#${'arrow'}--${index})`}
 
 							/>
-								<MarkerArrow 
-									id="arrow" 
-									refX={2} 
-									size={6} 
-									marker-end="url(#arrow)"
-									fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-									/>
+							<MarkerArrow 
+								id={`arrow--${index}`} 
+								refX={2} 
+								size={6} 
+								marker-end={`url(#${'arrow'}--${index})`}
+								strokeOpacity={1}
+								fillOpacity={1}
+								// stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+								fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+								/>
 
 						</Group>
 						<AxisBottom

package/src/components/useIntersectionObserver.tsx

@@ -0,0 +1,30 @@
+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;
+
+        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,28 @@ 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
+    colorCode:'',
+    reverseLabelOrder:false,
+    description:'',
+    dynamicLegend: false,
+    dynamicLegendDefaultText: "Show All",
+    dynamicLegendItemLimit: 5,
+    dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
+    dynamicLegendChartMessage: 'Select Options from the Legend',
   },
   exclusions: {
     active: false,
@@ -51,7 +67,7 @@ export default {
   palette: 'qualitative-bold',
   isPaletteReversed: false,
   labels: false,
-  dataFormat: {},
+  dataFormat: {commas:false,prefix:'',suffix:""},
   confidenceKeys: {},
   visual: {
     border: true,

package/src/hooks/useChartClasses.js

@@ -0,0 +1,35 @@
+export default function useChartClasses(config) {
+	let lineDatapointClass = ''
+	let barBorderClass = ''
+
+	if (config.lineDatapointStyle === "hover") { lineDatapointClass = ' chart-line--hover' }
+	if (config.lineDatapointStyle === "always show") { lineDatapointClass = ' chart-line--always' }
+	if (config.barHasBorder === "false") { barBorderClass = ' chart-bar--no-border' }
+
+	let innerContainerClasses = ['cove-component__inner']
+	config.title && innerContainerClasses.push('component--has-title')
+	config.subtext && innerContainerClasses.push('component--has-subtext')
+	config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
+	config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+
+	let contentClasses = ['cove-component__content'];
+	config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
+	!config.visual?.border && contentClasses.push('no-borders');
+	config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme');
+	config.visual?.accent && contentClasses.push('component--has-accent');
+	config.visual?.background && contentClasses.push('component--has-background');
+	config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor');
+
+	let sparkLineStyles = {
+		width: '100%',
+		height: '100px',
+	}
+
+	return {
+		barBorderClass,
+		lineDatapointClass,
+		contentClasses,
+		innerContainerClasses,
+		sparkLineStyles
+	};
+}

package/src/hooks/useLegendClasses.js

@@ -0,0 +1,20 @@
+export default function useLegendClasses(config) {
+	let containerClasses = ['legend-container']
+	let innerClasses = ['legend-container__inner'];
+
+	// Legend Positioning
+	if (config.legend.position === "left") {
+		containerClasses.push('left')
+	}
+
+	// Legend > Item Ordering
+	if (config.legend.reverseLabelOrder) {
+		innerClasses.push('d-flex')
+		innerClasses.push('flex-column-reverse')
+	}
+
+	return {
+		containerClasses,
+		innerClasses
+	};
+}

package/src/hooks/useReduceData.ts

@@ -1,30 +1,64 @@
 
 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.
-
-    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])))));
+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);
+
+      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 if(config.visualizationType === "Combo"  && config.visualizationSubType === "stacked" && !isBar){
+    let total  = []
+
+    if(config.runtime.barSeriesKeys && config.runtime.lineSeriesKeys ){
+    // get barSeries max Values added to each other
+    data.map(function (d,index) {
+      const totalYValues =config.runtime.barSeriesKeys.reduce((yTotal, k) => {
+          yTotal += Number(d[k]);
+          return yTotal;
+        }, 0);
+        total.push(totalYValues) 
+    
+   });
+   // get lineSeries largest values
+   const lineMax =  Math.max(...data.map((d) =>Math.max(...config.runtime.lineSeriesKeys.map((key) => Number(d[key])))));
 
-      return max;
+    const barMax = Math.max(...total) 
+
+    max = (Number(barMax) > Number(lineMax)) ? barMax : lineMax;
+  }
+  }else {
+    max = Math.max(
+      ...data.map((d) =>
+        Math.max(...config.runtime.seriesKeys.map((key) => Number(d[key])))
+      )
+    );
+  }
+
+  return max;
 };
     
 const getMinValueFromData = ()=> {
@@ -34,10 +68,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

@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <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;
-      }
+        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>
-  <body>
+</head>
+
+<body>
     <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
 
     <!-- <select id="cove_select">
@@ -28,22 +28,20 @@
       <option value="Hispanic or Latino">Test 2</option>
     </select> -->
 
-    <!-- <div class="react-container" data-config="/examples/covid-example-config.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-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/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> -->
-
-    <!-- LINE -->
-    <!-- <div class="react-container" data-config="/examples/line-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> -->
@@ -51,18 +49,19 @@
 
 
     <!-- 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/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> -->
-    
+
     <!-- LOLLIPOP CHARTS -->
     <!-- <div class="react-container" data-config="/examples/gallery/lollipop/lollipop-style-horizontal.json"></div> -->
-   
+
     <!-- 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>
+</body>
+
 </html>

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;