@cdc/chart 1.3.3 → 4.22.10

package/src/components/Legend.js

@@ -0,0 +1,334 @@
+import React, { useContext, useEffect } from 'react';
+import Context from '../context';
+import parse from 'html-react-parser';
+import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
+import LegendCircle from '@cdc/core/components/LegendCircle';
+
+import useLegendClasses from './../hooks/useLegendClasses';
+
+
+const Legend = () => {
+
+	const { 
+		config,
+		legend,
+		colorScale,
+		seriesHighlight,
+		highlight,
+		highlightReset,
+		setSeriesHighlight,
+		dynamicLegendItems,
+		setDynamicLegendItems,
+		transformedData: data,
+		setFilteredData,
+		colorPalettes,
+		rawData,
+		setConfig
+	} = useContext(Context);
+
+	const {innerClasses, containerClasses} = useLegendClasses(config)
+
+	useEffect(() => {
+		if(dynamicLegendItems.length === 0) return;
+		
+		let itemsToHighlight = dynamicLegendItems.map( item => item.text);
+		
+		setSeriesHighlight( itemsToHighlight )
+		
+		let colsToKeep = [...itemsToHighlight]
+		let tmpLabels = [];
+
+		rawData.map( dataItem => {
+			let tmp = {}
+			colsToKeep.map( col => {
+				tmp[col] = isNaN(dataItem[col]) ? dataItem[col] : dataItem[col]
+			})
+			return tmp
+		})
+
+		colsToKeep.map( col => {
+			tmpLabels[col] = col
+		})
+
+		if(dynamicLegendItems.length > 0) {
+			setConfig({
+				...config,
+				runtime: {
+					...config.runtime,
+					seriesKeys: colsToKeep,
+					seriesLabels: tmpLabels
+				}
+			})
+		}
+		
+
+
+	}, [dynamicLegendItems]);
+
+
+	useEffect(() => {
+		if(dynamicLegendItems.length === 0 ) {
+
+			// loop through all labels and add keys
+			let resetSeriesNames = [...config.runtime.seriesLabelsAll]
+			let tmpLabels = [];
+			config.runtime.seriesLabelsAll.map( item => {
+				resetSeriesNames.map( col => {
+					tmpLabels[col] = col
+				})
+			})
+
+			setConfig({
+				...config,
+				runtime: {
+					...config.runtime,
+					seriesKeys: config.runtime.seriesLabelsAll,
+					seriesLabels: tmpLabels
+				}
+			})
+
+		}
+	}, [dynamicLegendItems]);
+
+	const removeDynamicLegendItem = (label) => {
+		let newLegendItems = dynamicLegendItems.filter((item) => item.text !== label.text);
+		let newLegendItemsText = newLegendItems.map(item => item.text )
+		setDynamicLegendItems( newLegendItems )
+		setSeriesHighlight( newLegendItemsText)
+	}
+	const handleDynamicLegendChange = (e) => {
+		setDynamicLegendItems([...dynamicLegendItems, JSON.parse(e.target.value)])
+	}
+
+	const createLegendLabels = (data,defaultLabels) => {
+		const colorCode = config.legend?.colorCode;
+		if( config.visualizationType !=='Bar' ||  config.visualizationSubType !=="regular" || !colorCode || config.series?.length > 1){
+			return defaultLabels;
+		};
+		let palette = colorPalettes[config.palette];
+	   
+		while(data.length > palette.length) {
+		  palette = palette.concat(palette);
+		}
+		palette = palette.slice(0, data.length);
+		//store uniq values to Set by colorCode
+		const set = new Set();
+
+		data.forEach(d=>set.add(d[colorCode]));
+
+		// create labels with uniq values
+		const uniqeLabels = Array.from(set).map((val,i)=>{
+			const newLabel = {
+				datum :val,
+				index:i,
+				text:val,
+				value:palette[i]
+			};
+		return newLabel;
+		});
+
+		return uniqeLabels;
+	  };
+
+
+	  
+	if (!legend) return;
+
+	if (!legend.dynamicLegend) return (
+		<aside id="legend" className={containerClasses.join(' ')} role="region" aria-label="legend" tabIndex={0}>
+			{legend.label && <h2>{parse(legend.label)}</h2>}
+			{legend.description && <p>{parse(legend.description)}</p>}
+			<LegendOrdinal
+				scale={colorScale}
+				itemDirection="row"
+				labelMargin="0 20px 0 0"
+				shapeMargin="0 10px 0"
+			>
+
+				{labels => (
+					<div className={innerClasses.join(' ')}>
+						{createLegendLabels(data,labels).map((label, i) => {
+
+							let className = 'legend-item'
+							let itemName = label.datum
+
+							// Filter excluded data keys from legend
+							if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+								return
+							}
+
+							if (config.runtime.seriesLabels) {
+								let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+								itemName = config.runtime.seriesKeys[index]
+							}
+
+							if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+								className += ' inactive'
+							}
+
+
+							return (
+								<LegendItem
+									className={className}
+									tabIndex={0}
+									key={`legend-quantile-${i}`}
+									onKeyPress={(e) => {
+										if (e.key === 'Enter') {
+											highlight(label);
+										}
+									}}
+									onClick={() => {
+										highlight(label);
+									}}
+								>
+									<LegendCircle fill={label.value} />
+									<LegendLabel align="left" margin="0 0 0 4px">
+										{label.text}
+									</LegendLabel>
+								</LegendItem>
+							)
+						})}
+						{seriesHighlight.length > 0 && <button className={`legend-reset ${config.theme}`} onClick={ (labels) => highlightReset(labels) } tabIndex={0}>Reset</button>}
+					</div>
+				)}
+			</LegendOrdinal>
+		</aside>
+	)
+	
+	return (
+		<aside id="legend" className={containerClasses.join(' ')} role="region" aria-label="legend" tabIndex={0}>
+			{legend.label && <h2>{parse(legend.label)}</h2>}
+			{legend.description && <p>{parse(legend.description)}</p>}
+
+			<LegendOrdinal
+				scale={colorScale}
+				itemDirection="row"
+				labelMargin="0 20px 0 0"
+				shapeMargin="0 10px 0"
+			>
+
+				{labels => {
+				if ( 
+					(Number(config.legend.dynamicLegendItemLimit) > dynamicLegendItems.length) // legend items are less than limit
+					&& (dynamicLegendItems.length !== config.runtime.seriesLabelsAll.length) ) // legend items are equal to series length
+					{
+					return (
+					<select
+						className='dynamic-legend-dropdown'
+						onChange={(e) => handleDynamicLegendChange(e) }
+					>
+						<option
+							className={'all'}
+							tabIndex={0}
+							value={JSON.stringify({ text: config.legend.dynamicLegendDefaultText })}
+
+						>
+							{config.legend.dynamicLegendDefaultText}
+						</option>
+						{labels.map((label, i) => {
+							let className = 'legend-item'
+							let itemName = label.datum
+							let inDynamicList = false;
+
+							// Filter excluded data keys from legend
+							if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+								return
+							}
+
+							if (config.runtime.seriesLabels) {
+								let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+								itemName = config.runtime.seriesKeys[index]
+							}
+
+							if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+								className += ' inactive'
+							}
+
+							dynamicLegendItems.map(listItem => {
+								if(listItem.text === label.text) {
+									inDynamicList = true;
+								}
+							})
+
+							if(inDynamicList) return true;
+							let palette = colorPalettes[config.palette];
+
+							label.value = palette[dynamicLegendItems.length]
+
+							return (
+								<option
+									className={className}
+									tabIndex={0}
+									value={JSON.stringify(label)}
+
+								>
+									{label.text}
+								</option>
+							)
+						})}
+					</select>
+					)
+				} else {
+					return config.legend.dynamicLegendItemLimitMessage
+				}
+			}}
+			</LegendOrdinal>
+
+
+			<div className="dynamic-legend-list">
+				{dynamicLegendItems.map((label, i) => {
+
+					let className = ['legend-item']
+					let itemName = label.text
+					let palette = colorPalettes[config.palette];
+
+					// Filter excluded data keys from legend
+					if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+						return
+					}
+
+					if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {
+						let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+						itemName = config.runtime.seriesKeys[index]
+					}
+
+					if (seriesHighlight.length > 0 && !seriesHighlight.includes(itemName)) {
+						className.push('inactive')
+					}
+
+					if(seriesHighlight.length === 0 && config.legend.dynamicLegend) {
+						className.push('inactive')
+					}
+
+					return (
+						<>
+							<LegendItem
+								className={className.join(' ')}
+								tabIndex={0}
+								key={`dynamic-legend-item-${i}`}
+								alignItems="center"
+								
+							>
+								<button
+									className="btn-wrapper"
+									onClick={() => {
+										highlight(label);
+									}}
+								>
+									<LegendCircle fill={palette[i]} config={config} />
+									<LegendLabel align="space-between" margin="4px 0 0 4px">
+										{label.text}
+									</LegendLabel>
+								</button>
+								<button onClick={() => removeDynamicLegendItem(label)}>x</button>
+							</LegendItem>
+						</>
+					)
+				})}
+			</div>
+			{seriesHighlight.length < dynamicLegendItems.length && <button className={`legend-reset legend-reset--dynamic ${config.theme}`} onClick={highlightReset} tabIndex={0}>Reset</button>}
+		</aside>
+	)
+}
+
+export default Legend;

package/src/components/LineChart.tsx

@@ -9,17 +9,34 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary';
 
 import Context from '../context';
 
-export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber,formatDate,parseDate } = useContext<any>(Context);
+export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
+  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber,formatDate,parseDate } = useContext<any>(Context);
+
+  const handleLineType = (lineType) => {
+    switch(lineType) {
+      case 'dashed-sm':
+        return '5 5'
+      case 'dashed-md':
+        return '10 5'
+      case 'dashed-lg':
+        return '15 5'
+      default:
+        return 0;
+    }
+  }
+
+console.log('seriesStyle', seriesStyle)
 
   return (
     <ErrorBoundary component="LineChart">
       <Group left={config.runtime.yAxis.size}>
-        { (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
+        { (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
+          let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
+          return (
           <Group
             key={`series-${seriesKey}`}
             opacity={config.legend.behavior === "highlight" && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-            display={config.legend.behavior === "highlight" || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+            display={config.legend.behavior === "highlight" || (seriesHighlight.length === 0 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
           >
             { data.map((d, dataIndex) => {
               const xAxisValue = config.runtime.xAxis.type==='date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey];
@@ -33,9 +50,9 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }
             </div>`
 
               let circleRadii = 4.5
-
-              return (
+              return (d[seriesKey] !== undefined && d[seriesKey] !== "") && (
                 <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                
                 <Text
                     display={config.labels ? 'block' : 'none'}
                     x={xScale(getXAxisData(d))}
@@ -44,6 +61,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }
                     textAnchor="middle">
                       {formatNumber(d[seriesKey])}
                   </Text>
+                  
                   <circle
                     key={`${seriesKey}-${dataIndex}`}
                     r={circleRadii}
@@ -57,18 +75,40 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData }
                 </Group>
             )
             })}
-            <LinePath
-              curve={allCurves.curveLinear}
-              data={data}
-              x={(d) => xScale(getXAxisData(d))}
-              y={(d) => yScale(getYAxisData(d, seriesKey))}
-              stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-              strokeWidth={2}
-              strokeOpacity={1}
-              shapeRendering="geometricPrecision"
-            />
+              <LinePath
+                curve={allCurves.curveLinear}
+                data={data}
+                x={(d) => xScale(getXAxisData(d))}
+                y={(d) => yScale(getYAxisData(d, seriesKey))}
+                stroke={colorScale && !config.legend.dynamicLegend ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : 
+                // is dynamic legend
+                config.legend.dynamicLegend ? colorPalettes[config.palette][index] :
+                // fallback
+                '#000'
+                }
+                strokeWidth={2}
+                strokeOpacity={1}
+                shapeRendering="geometricPrecision"
+                strokeDasharray={lineType ? handleLineType(lineType) : 0}
+                defined={(item,i) => {
+                  return item[config.runtime.seriesLabels[seriesKey]] !== "";
+                }}
+              />
           </Group>
-        ))
+        )})
+        }
+       
+        {/* Message when dynamic legend and nothing has been picked */}
+        { (config.legend.dynamicLegend && seriesHighlight.length === 0) &&
+          <Text
+              x={ xMax / 2 }
+              y={yMax / 2}
+              fill="black"
+              textAnchor="middle"
+              color='black'
+              >
+              {config.legend.dynamicLegendChartMessage}
+          </Text>
         }
       </Group>
     </ErrorBoundary>