@asphalt-react/data-viz - npm Package Compare versions

Comparing version 2.12.2 to 2.13.0

dist/index.css

+.Legend__3gE69 {
+  --font: var(
+    --text-bold-XS,
+    600 0.75rem/1.5 Maison Neue,
+    Helvetica,
+    Open Sans,
+    sans-serif
+  );
+  --font-color: var(--content-secondary, #4f515c);
+
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  color: var(--font-color);
+  font: var(--font);
+}
+
+.legendLabel__fxxoV {
+  gap: 0.25rem;
+  text-decoration: none;
+}
+
+.strikeThrough__9UjPg {
+  text-decoration: line-through;
+}
+
+.legendItem__hzrWm {
+  cursor: pointer;
+  display: inline-flex;
+  gap: 5;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.legendItemWrapper__cW42p {
+  display: flex;
+  flex-direction: row;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+}
+
+.legendMarker__MZY8H {
+  width: 1rem;
+  height: 0.75rem;
+}
+
+.Chart__HJjIR {
+  --font: var(
+    --text-bold-S,
+    600 0.875rem/1.5 Maison Neue,
+    Helvetica,
+    Open Sans,
+    sans-serif
+  );
+  --font-color: var(--content-secondary, #4f515c);
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 312px;
+  overflow-y: hidden;
+}
+
+.chartSvg__I4-CH {
+  min-height: 360px;
+}
+
+.legendTop__O4cid {
+  flex-direction: column-reverse;
+}
+
+.gapBottom__LqWhI {
+  margin-bottom: 8px;
+}
+
+.gapTop__jsB6e {
+  margin-top: 8px;
+}
+
+.leftAxisLabel__a-KuD {
+  font: var(--font);
+  fill: var(--font-color);
+}
+
+.bottomAxisLabel__fjcm2 {
+  font: var(--font);
+  fill: var(--font-color);
+}
+
+.tickLabel__s-42M {
+  font: var(
+    --text-regular-XS,
+    500 0.75rem/1.618 Maison Neue,
+    Helvetica,
+    Open Sans,
+    sans-serif
+  );
+  fill: var(--content-primary, #2d2e34);
+}
+
+.tooltipColorMarker__YQngq {
+  width: 1rem;
+  height: 0.75rem;
+}
+
+.tooltipWrapper__mE8oW {
+  display: inline-grid;
+  grid-auto-flow: row;
+  gap: 0.25rem;
+}
+
+.tooltipInfo__cx7e7 {
+  display: grid;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.tooltipInfoLine__ZH2cp {
+  display: inline-grid;
+  grid-auto-flow: column;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.tooltipSingleLine__aLzKm {
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+
+  /* Make sure the  column color marker is always left-aligned */
+  justify-content: start;
+}
+
+/* Remove extra right space in single line custom tooltip content */
+.customTooltipGap__ryF-V {
+  gap: 0;
+}
+
+.chartLabel__WisWp {
+  font: var(
+    --text-regular-XS,
+    500 0.75rem/1.618 Maison Neue,
+    Helvetica,
+    Open Sans,
+    sans-serif
+  );
+  fill: var(--content-primary, #2d2e34);
+}
+
+.contentContainer__NRbZQ {
+  white-space: nowrap;
+}

dist/index.cjs

@@ -0,1 +1,2 @@
+require("./index.css");
 'use strict';
@@ -13,3 +14,2 @@
 var text = require('@visx/text');
-var context = require('@asphalt-react/context');
 var typography = require('@asphalt-react/typography');
@@ -34,35 +34,5 @@ var shape = require('@visx/shape');
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$1 = ".Legend__3gE69 {\n  --font: var(\n    --text-bold-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  color: var(--font-color);\n  font: var(--font);\n}\n\n.legendLabel__fxxoV {\n  gap: 0.25rem;\n  text-decoration: none;\n}\n\n.strikeThrough__9UjPg {\n  text-decoration: line-through;\n}\n\n.legendItem__hzrWm {\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.legendItemWrapper__cW42p {\n  display: flex;\n  flex-direction: row;\n  gap: 0.625rem;\n  flex-wrap: wrap;\n}\n\n.legendMarker__MZY8H {\n  width: 1rem;\n  height: 0.75rem;\n}\n";
 var styles$1 = {"Legend":"Legend__3gE69","legendLabel":"legendLabel__fxxoV","strikeThrough":"strikeThrough__9UjPg","legendItem":"legendItem__hzrWm","legendItemWrapper":"legendItemWrapper__cW42p","legendMarker":"legendMarker__MZY8H"};
-var stylesheet$1=".Legend__3gE69 {\n  --font: var(\n    --text-bold-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  color: var(--font-color);\n  font: var(--font);\n}\n\n.legendLabel__fxxoV {\n  gap: 0.25rem;\n  text-decoration: none;\n}\n\n.strikeThrough__9UjPg {\n  text-decoration: line-through;\n}\n\n.legendItem__hzrWm {\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.legendItemWrapper__cW42p {\n  display: flex;\n  flex-direction: row;\n  gap: 0.625rem;\n  flex-wrap: wrap;\n}\n\n.legendMarker__MZY8H {\n  width: 1rem;\n  height: 0.75rem;\n}\n";
-styleInject(css_248z$1);
 
-const Legend=React.forwardRef(({scale,handleLegendClick,isStrikeThrough,...props},ref)=>{context.sendStyles(stylesheet$1);const{style,className,...restProps}=props;return React.createElement("div",_extends({className:styles$1.Legend,ref:ref},restProps),React.createElement(legend.LegendOrdinal,{scale:scale,labelFormat:label=>`${label}`},labels=>{return React.createElement("div",{className:styles$1.legendItemWrapper},labels.map((label,i)=>{const color=scale(label.datum);return React.createElement(legend.LegendItem,{"data-testid":"legend-item",key:`legend-quantile-${i}`,onClick:()=>handleLegendClick(label),className:styles$1.legendItem},React.createElement("span",{"data-testid":"legend-marker",className:styles$1.legendMarker,style:{backgroundColor:color}}),React.createElement(legend.LegendLabel,{align:"left",className:cn(styles$1.legendLabel,{[styles$1.strikeThrough]:isStrikeThrough?.(label.datum)})},label.text))}))}))});Legend.displayName="Legend";Legend.propTypes={scale:PropTypes.func,handleLegendClick:PropTypes.func,isStrikeThrough:PropTypes.func};
+const Legend=React.forwardRef(({scale,handleLegendClick,isStrikeThrough,...props},ref)=>{const{style,className,...restProps}=props;return React.createElement("div",_extends({className:styles$1.Legend,ref:ref},restProps),React.createElement(legend.LegendOrdinal,{scale:scale,labelFormat:label=>`${label}`},labels=>{return React.createElement("div",{className:styles$1.legendItemWrapper},labels.map((label,i)=>{const color=scale(label.datum);return React.createElement(legend.LegendItem,{"data-testid":"legend-item",key:`legend-quantile-${i}`,onClick:()=>handleLegendClick(label),className:styles$1.legendItem},React.createElement("span",{"data-testid":"legend-marker",className:styles$1.legendMarker,style:{backgroundColor:color}}),React.createElement(legend.LegendLabel,{align:"left",className:cn(styles$1.legendLabel,{[styles$1.strikeThrough]:isStrikeThrough?.(label.datum)})},label.text))}))}))});Legend.displayName="Legend";Legend.propTypes={scale:PropTypes.func,handleLegendClick:PropTypes.func,isStrikeThrough:PropTypes.func};
 
@@ -75,14 +45,11 @@ const validateDataKey=(data,dataKey)=>{for(const obj of data){if(!Object.prototype.hasOwnProperty.call(obj,dataKey)){return false}}return true};const validateChartData=data=>{if(!data.length){return {invalid:false,data:[]}}const firstKeys=new Set(Object.keys(data[0]));for(const obj of data.slice(1)){const currentKeys=new Set(Object.keys(obj));if(currentKeys.size!==firstKeys.size){return {invalid:true,data:[]}}if([...currentKeys].some(key=>!firstKeys.has(key))){return {invalid:true,data:[]}}}return {invalid:false,data}};
 
-var css_248z = ".Chart__HJjIR {\n  --font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 312px;\n  overflow-y: hidden;\n}\n\n.chartSvg__I4-CH {\n  min-height: 360px;\n}\n\n.legendTop__O4cid {\n  flex-direction: column-reverse;\n}\n\n.gapBottom__LqWhI {\n  margin-bottom: 8px;\n}\n\n.gapTop__jsB6e {\n  margin-top: 8px;\n}\n\n.leftAxisLabel__a-KuD {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.bottomAxisLabel__fjcm2 {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.tickLabel__s-42M {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.tooltipColorMarker__YQngq {\n  width: 1rem;\n  height: 0.75rem;\n}\n\n.tooltipWrapper__mE8oW {\n  display: inline-grid;\n  grid-auto-flow: row;\n  gap: 0.25rem;\n}\n\n.tooltipInfo__cx7e7 {\n  display: grid;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipInfoLine__ZH2cp {\n  display: inline-grid;\n  grid-auto-flow: column;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipSingleLine__aLzKm {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n\n  /* Make sure the  column color marker is always left-aligned */\n  justify-content: start;\n}\n\n/* Remove extra right space in single line custom tooltip content */\n.customTooltipGap__ryF-V {\n  gap: 0;\n}\n\n.chartLabel__WisWp {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.contentContainer__NRbZQ {\n  white-space: nowrap;\n}\n";
 var styles = {"Chart":"Chart__HJjIR","chartSvg":"chartSvg__I4-CH","legendTop":"legendTop__O4cid","gapBottom":"gapBottom__LqWhI","gapTop":"gapTop__jsB6e","leftAxisLabel":"leftAxisLabel__a-KuD","bottomAxisLabel":"bottomAxisLabel__fjcm2","tickLabel":"tickLabel__s-42M","tooltipColorMarker":"tooltipColorMarker__YQngq","tooltipWrapper":"tooltipWrapper__mE8oW","tooltipInfo":"tooltipInfo__cx7e7","tooltipInfoLine":"tooltipInfoLine__ZH2cp","tooltipSingleLine":"tooltipSingleLine__aLzKm","customTooltipGap":"customTooltipGap__ryF-V","chartLabel":"chartLabel__WisWp","contentContainer":"contentContainer__NRbZQ"};
-var stylesheet=".Chart__HJjIR {\n  --font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 312px;\n  overflow-y: hidden;\n}\n\n.chartSvg__I4-CH {\n  min-height: 360px;\n}\n\n.legendTop__O4cid {\n  flex-direction: column-reverse;\n}\n\n.gapBottom__LqWhI {\n  margin-bottom: 8px;\n}\n\n.gapTop__jsB6e {\n  margin-top: 8px;\n}\n\n.leftAxisLabel__a-KuD {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.bottomAxisLabel__fjcm2 {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.tickLabel__s-42M {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.tooltipColorMarker__YQngq {\n  width: 1rem;\n  height: 0.75rem;\n}\n\n.tooltipWrapper__mE8oW {\n  display: inline-grid;\n  grid-auto-flow: row;\n  gap: 0.25rem;\n}\n\n.tooltipInfo__cx7e7 {\n  display: grid;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipInfoLine__ZH2cp {\n  display: inline-grid;\n  grid-auto-flow: column;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipSingleLine__aLzKm {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n\n  /* Make sure the  column color marker is always left-aligned */\n  justify-content: start;\n}\n\n/* Remove extra right space in single line custom tooltip content */\n.customTooltipGap__ryF-V {\n  gap: 0;\n}\n\n.chartLabel__WisWp {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.contentContainer__NRbZQ {\n  white-space: nowrap;\n}\n";
-styleInject(css_248z);
 
 const ChartTooltip=({inverseTooltip=false,tooltipOpen,bezel=false,children,title,singleLine})=>{const{getPopoverProps}=popover.usePopover({open:tooltipOpen,bezel:bezel?false:true});const contentClasses=cn(styles.tooltipInfo,{[styles.tooltipSingleLine]:singleLine,[styles.customTooltipGap]:singleLine&&bezel});const renderContent=()=>{return React.createElement("div",{className:styles.tooltipWrapper},title&&React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},title),React.createElement("div",{className:contentClasses},children))};return inverseTooltip?React.createElement(popover.BasePopover,_extends({inverse:true},getPopoverProps()),React.createElement("div",{className:styles.contentContainer},renderContent())):renderContent()};ChartTooltip.displayName="ChartTooltip";ChartTooltip.propTypes={children:PropTypes.node,inverseTooltip:PropTypes.bool,tooltipOpen:PropTypes.bool,bezel:PropTypes.bool,title:PropTypes.string,singleLine:PropTypes.bool};
 
-const BarChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,viewTooltip=true,onMouseHover,showLegend=true,horizontal=false,stack=false,showLabel=false,formatLabel,inverseTooltip=false,tooltip: tooltip$1=null,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}context.sendStyles(stylesheet);const{style,className,...restProps}=props;const leftAxisRef=React.useRef(null);const bottomAxisRef=React.useRef(null);const legendRef=React.useRef(null);const chartRef=React.useRef(null);const[hiddenData,setHiddenData]=React.useState([]);const[ticksOverlapping,setTicksOverlapping]=React.useState(false);const[labelsOverflowing,setLabelsOverflowing]=React.useState(0);const{parentRef,width,height}=responsive.useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=tooltip.useTooltip();const{containerRef,TooltipInPortal}=tooltip.useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getBarChartProps}=useCharts({hideTicks,xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend,labelsOverflowing});const{type,xScale,yScale,colorScale,getBarShapeProps}=getBarChartProps({horizontal,stack});const BarShape=barShape[type];const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event$1,{barData,groupIndex})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=event.localPoint(event$1);const popoverData={currentData:{...barData,[dataKey]:validatedData?.[groupIndex]?.[dataKey]},groupData:{groupIndex,...validatedData?.[groupIndex]}};if(stack){popoverData.currentData={index:barData.index,key:barData.key,value:barData.bar.data[barData.key],color:barData.color,[dataKey]:barData.bar.data[dataKey]};popoverData.groupData={groupIndex:barData.index,...barData.bar.data};}showTooltip({tooltipData:popoverData,tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event$1,{...popoverData});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabel=barData=>{if(stack){const keys=Object.keys(barData||{}).filter(d=>d!==dataKey&&!hiddenData.includes(d));const totalData=keys.reduce((acc,item)=>{return acc+parseFloat(barData?.[item]||0)},0);return formatLabel?formatLabel(totalData):Number(totalData.toFixed(2))}return formatLabel?formatLabel(Number(barData)):Number(barData)};const calculateLabelPosition=bar=>{let dx=0;let dy=0;if(bar.width===0||bar.height===0){dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height-3;}else {dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height/bar.height-3;}return {dx,dy}};const renderBarChartLabel=(id,bar,barShape,labelValue)=>{const label=getLabel(labelValue);const{dx,dy}=calculateLabelPosition(bar);if(showLabel){return React.createElement(text.Text,{textAnchor:horizontal?"start":"middle",x:bar.x,dx:dx,dy:dy,y:bar.y,className:styles.chartLabel,key:`bar-text-${barShape.index}-${bar.index}`,"data-testid":`${id}-${barShape.index}-${bar.index}`},label)}return null};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};React.useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);React.useEffect(()=>{if(chartRef?.current&&horizontal){setLabelsOverflowing(getMaxLabelOverflowWidth(chartRef,margin.right));}},[chartRef,width,data]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(grid.Grid,getGridProps({xScale,yScale})),React.createElement(group.Group,{top:margin.top,left:margin.left,innerRef:chartRef},React.createElement(BarShape,getBarShapeProps(),barShapes=>barShapes.map((barShape,bsIndex,bsArr)=>stack?barShape.bars.map(bar=>{return React.createElement(group.Group,{key:`bar-group-stack-${barShape.index}-${bar.index}`},React.createElement("rect",{"data-testid":`bar-stack-${bar.key}${horizontal?"-horizontal":"-vertical"}`,key:`bar-stack-${barShape.index}-${bar.index}-${bar.value}-${bar.key}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar})}),bsIndex===bsArr.length-1&&renderBarChartLabel("bar-stack-text",bar,barShape,bar.bar.data))}):React.createElement(group.Group,{key:`bar-group-${barShape.index}`,left:barShape.x0,top:barShape.y0},barShape.bars.map(bar=>React.createElement(group.Group,{key:`bar-${bar.key}`},React.createElement("rect",{"data-testid":`bar-${bar.key}${horizontal?"-horizontal":"-vertical"}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar,groupIndex:barShape.index})}),renderBarChartLabel("bar-text",bar,barShape,bar.value)))))),React.createElement(axis.AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(axis.AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"bar-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`bar-chart-tooltip-${tooltipData.currentData.key}-${tooltipData.currentData[dataKey]}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip$1,title:!tooltip$1&&tooltipData.currentData[dataKey],singleLine:true},tooltip$1??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(tooltipData?.currentData?.key)}}),React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData?.currentData?.key,":"),React.createElement(typography.Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData?.currentData?.value)))))};BarChart.displayName="BarChart";BarChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,horizontal:PropTypes.bool,stack:PropTypes.bool,showLabel:PropTypes.bool,formatLabel:PropTypes.func,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};BarChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,horizontal:false,stack:false,showLabel:false,inverseTooltip:false,xTickWrap:false};
+const BarChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,viewTooltip=true,onMouseHover,showLegend=true,horizontal=false,stack=false,showLabel=false,formatLabel,inverseTooltip=false,tooltip: tooltip$1=null,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}const{style,className,...restProps}=props;const leftAxisRef=React.useRef(null);const bottomAxisRef=React.useRef(null);const legendRef=React.useRef(null);const chartRef=React.useRef(null);const[hiddenData,setHiddenData]=React.useState([]);const[ticksOverlapping,setTicksOverlapping]=React.useState(false);const[labelsOverflowing,setLabelsOverflowing]=React.useState(0);const{parentRef,width,height}=responsive.useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=tooltip.useTooltip();const{containerRef,TooltipInPortal}=tooltip.useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getBarChartProps}=useCharts({hideTicks,xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend,labelsOverflowing});const{type,xScale,yScale,colorScale,getBarShapeProps}=getBarChartProps({horizontal,stack});const BarShape=barShape[type];const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event$1,{barData,groupIndex})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=event.localPoint(event$1);const popoverData={currentData:{...barData,[dataKey]:validatedData?.[groupIndex]?.[dataKey]},groupData:{groupIndex,...validatedData?.[groupIndex]}};if(stack){popoverData.currentData={index:barData.index,key:barData.key,value:barData.bar.data[barData.key],color:barData.color,[dataKey]:barData.bar.data[dataKey]};popoverData.groupData={groupIndex:barData.index,...barData.bar.data};}showTooltip({tooltipData:popoverData,tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event$1,{...popoverData});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabel=barData=>{if(stack){const keys=Object.keys(barData||{}).filter(d=>d!==dataKey&&!hiddenData.includes(d));const totalData=keys.reduce((acc,item)=>{return acc+parseFloat(barData?.[item]||0)},0);return formatLabel?formatLabel(totalData):Number(totalData.toFixed(2))}return formatLabel?formatLabel(Number(barData)):Number(barData)};const calculateLabelPosition=bar=>{let dx=0;let dy=0;if(bar.width===0||bar.height===0){dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height-3;}else {dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height/bar.height-3;}return {dx,dy}};const renderBarChartLabel=(id,bar,barShape,labelValue)=>{const label=getLabel(labelValue);const{dx,dy}=calculateLabelPosition(bar);if(showLabel){return React.createElement(text.Text,{textAnchor:horizontal?"start":"middle",x:bar.x,dx:dx,dy:dy,y:bar.y,className:styles.chartLabel,key:`bar-text-${barShape.index}-${bar.index}`,"data-testid":`${id}-${barShape.index}-${bar.index}`},label)}return null};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};React.useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);React.useEffect(()=>{if(chartRef?.current&&horizontal){setLabelsOverflowing(getMaxLabelOverflowWidth(chartRef,margin.right));}},[chartRef,width,data]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(grid.Grid,getGridProps({xScale,yScale})),React.createElement(group.Group,{top:margin.top,left:margin.left,innerRef:chartRef},React.createElement(BarShape,getBarShapeProps(),barShapes=>barShapes.map((barShape,bsIndex,bsArr)=>stack?barShape.bars.map(bar=>{return React.createElement(group.Group,{key:`bar-group-stack-${barShape.index}-${bar.index}`},React.createElement("rect",{"data-testid":`bar-stack-${bar.key}${horizontal?"-horizontal":"-vertical"}`,key:`bar-stack-${barShape.index}-${bar.index}-${bar.value}-${bar.key}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar})}),bsIndex===bsArr.length-1&&renderBarChartLabel("bar-stack-text",bar,barShape,bar.bar.data))}):React.createElement(group.Group,{key:`bar-group-${barShape.index}`,left:barShape.x0,top:barShape.y0},barShape.bars.map(bar=>React.createElement(group.Group,{key:`bar-${bar.key}`},React.createElement("rect",{"data-testid":`bar-${bar.key}${horizontal?"-horizontal":"-vertical"}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar,groupIndex:barShape.index})}),renderBarChartLabel("bar-text",bar,barShape,bar.value)))))),React.createElement(axis.AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(axis.AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"bar-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`bar-chart-tooltip-${tooltipData.currentData.key}-${tooltipData.currentData[dataKey]}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip$1,title:!tooltip$1&&tooltipData.currentData[dataKey],singleLine:true},tooltip$1??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(tooltipData?.currentData?.key)}}),React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData?.currentData?.key,":"),React.createElement(typography.Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData?.currentData?.value)))))};BarChart.displayName="BarChart";BarChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,horizontal:PropTypes.bool,stack:PropTypes.bool,showLabel:PropTypes.bool,formatLabel:PropTypes.func,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};BarChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,horizontal:false,stack:false,showLabel:false,inverseTooltip:false,xTickWrap:false};
 
-const LineChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,tooltip: tooltip$1=null,viewTooltip=true,onMouseHover,showPoints=false,showLegend=true,startFromZero=false,inverseTooltip=false,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}context.sendStyles(stylesheet);const{style,className,...restProps}=props;const leftAxisRef=React.useRef(null);const bottomAxisRef=React.useRef(null);const legendRef=React.useRef(null);const[hiddenData,setHiddenData]=React.useState([]);const[ticksOverlapping,setTicksOverlapping]=React.useState(false);const{parentRef,width,height}=responsive.useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=tooltip.useTooltip();const{containerRef,TooltipInPortal}=tooltip.useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getLineChartProps}=useCharts({xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend});const{xScale,yScale,colorScale,groupedLineChartData}=getLineChartProps({startFromZero});const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=event$1=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const{x,y}=event.localPoint(event$1);let closestPoints=[];let minDistance=Infinity;groupedLineChartData.forEach(({group,values})=>{values.forEach(({x:xValue,y:yValue})=>{const xPos=xScale(xValue)+xScale.bandwidth()/2;const yPos=yScale(yValue);const distance=Math.sqrt((x-margin.left-xPos)**2+(y-margin.top-yPos)**2);if(distance<minDistance){minDistance=distance;closestPoints=[{x:xValue,y:yValue,group}];}else if(distance===minDistance){closestPoints.push({x:xValue,y:yValue,group});}});});showTooltip({tooltipData:closestPoints,tooltipLeft:x,tooltipTop:y});onMouseHover?.(event$1,{currentData:closestPoints.map(({x,y,group})=>({[dataKey]:x,[group]:y,color:colorScale(group)}))});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};React.useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(grid.Grid,_extends({},getGridProps({xScale,yScale}),{dx:"0.33em"})),React.createElement(group.Group,{top:margin.top,left:margin.left},groupedLineChartData.map(lineData=>React.createElement(React.Fragment,{key:`line-${lineData.group}`},React.createElement(shape.LinePath,{"data-testid":`line-${lineData.group}`,curve:curve.curveMonotoneX,data:lineData.values,x:d=>xScale(d.x)+xScale.bandwidth()/2,y:d=>yScale(d.y),stroke:colorScale(lineData.group),strokeWidth:2,onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove}),showPoints&&lineData.values.map((d,idx)=>React.createElement("circle",{"data-testid":`point-${lineData.group}-${idx}`,key:`point-${lineData.group}-${idx}`,cx:xScale(d.x)+xScale.bandwidth()/2,cy:yScale(d.y),r:4,stroke:"#ffffff",fill:colorScale(lineData.group),onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove})))),React.createElement(axis.AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(axis.AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,labelOffset:24,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"line-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`line-chart-tooltip`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip$1,singleLine:false,title:!tooltip$1&&tooltipData?.[0]?.x},tooltip$1??tooltipData.map((data,index)=>React.createElement("div",{key:index},React.createElement("div",{className:styles.tooltipInfoLine},React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(data?.group)}}),React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},data?.group,":"),React.createElement(typography.Text,{span:true,size:"xs",onBrand:inverseTooltip},data?.y)))))))};LineChart.displayName="LineChart";LineChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,showPoints:PropTypes.bool,startFromZero:PropTypes.bool,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};LineChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,showPoints:false,startFromZero:false,inverseTooltip:false,xTickWrap:false};
+const LineChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,tooltip: tooltip$1=null,viewTooltip=true,onMouseHover,showPoints=false,showLegend=true,startFromZero=false,inverseTooltip=false,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}const{style,className,...restProps}=props;const leftAxisRef=React.useRef(null);const bottomAxisRef=React.useRef(null);const legendRef=React.useRef(null);const[hiddenData,setHiddenData]=React.useState([]);const[ticksOverlapping,setTicksOverlapping]=React.useState(false);const{parentRef,width,height}=responsive.useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=tooltip.useTooltip();const{containerRef,TooltipInPortal}=tooltip.useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getLineChartProps}=useCharts({xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend});const{xScale,yScale,colorScale,groupedLineChartData}=getLineChartProps({startFromZero});const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=event$1=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const{x,y}=event.localPoint(event$1);let closestPoints=[];let minDistance=Infinity;groupedLineChartData.forEach(({group,values})=>{values.forEach(({x:xValue,y:yValue})=>{const xPos=xScale(xValue)+xScale.bandwidth()/2;const yPos=yScale(yValue);const distance=Math.sqrt((x-margin.left-xPos)**2+(y-margin.top-yPos)**2);if(distance<minDistance){minDistance=distance;closestPoints=[{x:xValue,y:yValue,group}];}else if(distance===minDistance){closestPoints.push({x:xValue,y:yValue,group});}});});showTooltip({tooltipData:closestPoints,tooltipLeft:x,tooltipTop:y});onMouseHover?.(event$1,{currentData:closestPoints.map(({x,y,group})=>({[dataKey]:x,[group]:y,color:colorScale(group)}))});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};React.useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(grid.Grid,_extends({},getGridProps({xScale,yScale}),{dx:"0.33em"})),React.createElement(group.Group,{top:margin.top,left:margin.left},groupedLineChartData.map(lineData=>React.createElement(React.Fragment,{key:`line-${lineData.group}`},React.createElement(shape.LinePath,{"data-testid":`line-${lineData.group}`,curve:curve.curveMonotoneX,data:lineData.values,x:d=>xScale(d.x)+xScale.bandwidth()/2,y:d=>yScale(d.y),stroke:colorScale(lineData.group),strokeWidth:2,onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove}),showPoints&&lineData.values.map((d,idx)=>React.createElement("circle",{"data-testid":`point-${lineData.group}-${idx}`,key:`point-${lineData.group}-${idx}`,cx:xScale(d.x)+xScale.bandwidth()/2,cy:yScale(d.y),r:4,stroke:"#ffffff",fill:colorScale(lineData.group),onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove})))),React.createElement(axis.AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(axis.AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,labelOffset:24,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"line-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`line-chart-tooltip`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip$1,singleLine:false,title:!tooltip$1&&tooltipData?.[0]?.x},tooltip$1??tooltipData.map((data,index)=>React.createElement("div",{key:index},React.createElement("div",{className:styles.tooltipInfoLine},React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(data?.group)}}),React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},data?.group,":"),React.createElement(typography.Text,{span:true,size:"xs",onBrand:inverseTooltip},data?.y)))))))};LineChart.displayName="LineChart";LineChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,showPoints:PropTypes.bool,startFromZero:PropTypes.bool,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};LineChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,showPoints:false,startFromZero:false,inverseTooltip:false,xTickWrap:false};
 
-const DonutChart=({data,colors,legendTop=false,tooltip: tooltip$1=null,viewTooltip=true,onMouseHover,showLegend=true,inverseTooltip=false,...props})=>{context.sendStyles(stylesheet);const{style,className,...restProps}=props;const[hiddenData,setHiddenData]=React.useState([]);const legendRef=React.useRef(null);const{parentRef,width,height}=responsive.useParentSize();let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=tooltip.useTooltip();const{containerRef,TooltipInPortal}=tooltip.useTooltipInPortal({scroll:true});const{margin,getDonutChartProps}=useCharts({legendTop,legendRef,colors,data:[data],height,hiddenData,width,showLegend});const{centerX,centerY,colorScale,getDonutShapeProps}=getDonutChartProps();const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event$1,{donutData})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=event.localPoint(event$1);const{data:key,value,color}=donutData;showTooltip({tooltipData:{currentData:{key,value,color}},tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event$1,{currentData:{[key]:value,color}});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},React.createElement(group.Group,{top:centerY+margin.top,left:centerX+margin.left},React.createElement(shape.Pie,getDonutShapeProps(),donut=>{return donut.arcs.map((arc,index)=>React.createElement("g",{key:`arc-${arc.data}-${index}`,"data-testid":`arc-donut-shape-${arc.data}`},React.createElement("path",{d:donut.path(arc),fill:colorScale(arc.data),onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{donutData:{...arc,color:colorScale(arc.data)}})})))}))),showLegend&&React.createElement(Legend,{"data-testid":"donut-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`donut-chart-tooltip-${tooltipData.currentData.key}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip$1,singleLine:true},tooltip$1??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:tooltipData.currentData.color}}),React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData.currentData.key,":"),React.createElement(typography.Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData.currentData.value)))))};DonutChart.propTypes={data:PropTypes.object.isRequired,colors:PropTypes.object,showLegend:PropTypes.bool,legendTop:PropTypes.bool,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,inverseTooltip:PropTypes.bool};DonutChart.defaultProps={tooltip:null,showLegend:true,legendTop:false,viewTooltip:true,inverseTooltip:false};
+const DonutChart=({data,colors,legendTop=false,tooltip: tooltip$1=null,viewTooltip=true,onMouseHover,showLegend=true,inverseTooltip=false,...props})=>{const{style,className,...restProps}=props;const[hiddenData,setHiddenData]=React.useState([]);const legendRef=React.useRef(null);const{parentRef,width,height}=responsive.useParentSize();let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=tooltip.useTooltip();const{containerRef,TooltipInPortal}=tooltip.useTooltipInPortal({scroll:true});const{margin,getDonutChartProps}=useCharts({legendTop,legendRef,colors,data:[data],height,hiddenData,width,showLegend});const{centerX,centerY,colorScale,getDonutShapeProps}=getDonutChartProps();const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event$1,{donutData})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=event.localPoint(event$1);const{data:key,value,color}=donutData;showTooltip({tooltipData:{currentData:{key,value,color}},tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event$1,{currentData:{[key]:value,color}});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},React.createElement(group.Group,{top:centerY+margin.top,left:centerX+margin.left},React.createElement(shape.Pie,getDonutShapeProps(),donut=>{return donut.arcs.map((arc,index)=>React.createElement("g",{key:`arc-${arc.data}-${index}`,"data-testid":`arc-donut-shape-${arc.data}`},React.createElement("path",{d:donut.path(arc),fill:colorScale(arc.data),onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{donutData:{...arc,color:colorScale(arc.data)}})})))}))),showLegend&&React.createElement(Legend,{"data-testid":"donut-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`donut-chart-tooltip-${tooltipData.currentData.key}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip$1,singleLine:true},tooltip$1??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:tooltipData.currentData.color}}),React.createElement(typography.Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData.currentData.key,":"),React.createElement(typography.Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData.currentData.value)))))};DonutChart.propTypes={data:PropTypes.object.isRequired,colors:PropTypes.object,showLegend:PropTypes.bool,legendTop:PropTypes.bool,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,inverseTooltip:PropTypes.bool};DonutChart.defaultProps={tooltip:null,showLegend:true,legendTop:false,viewTooltip:true,inverseTooltip:false};
 
@@ -89,0 +56,0 @@ exports.BarChart = BarChart;

dist/index.js

@@ -0,1 +1,2 @@
+import "./index.css";
 import React, { forwardRef, useState, useEffect, useRef, Fragment } from 'react';
@@ -11,3 +12,2 @@ import PropTypes from 'prop-types';
 import { Text as Text$1 } from '@visx/text';
-import { sendStyles } from '@asphalt-react/context';
 import { Text } from '@asphalt-react/typography';
@@ -32,35 +32,5 @@ import { BarStackHorizontal, BarGroupHorizontal, BarStack, BarGroup, LinePath, Pie } from '@visx/shape';
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$1 = ".Legend__3gE69 {\n  --font: var(\n    --text-bold-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  color: var(--font-color);\n  font: var(--font);\n}\n\n.legendLabel__fxxoV {\n  gap: 0.25rem;\n  text-decoration: none;\n}\n\n.strikeThrough__9UjPg {\n  text-decoration: line-through;\n}\n\n.legendItem__hzrWm {\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.legendItemWrapper__cW42p {\n  display: flex;\n  flex-direction: row;\n  gap: 0.625rem;\n  flex-wrap: wrap;\n}\n\n.legendMarker__MZY8H {\n  width: 1rem;\n  height: 0.75rem;\n}\n";
 var styles$1 = {"Legend":"Legend__3gE69","legendLabel":"legendLabel__fxxoV","strikeThrough":"strikeThrough__9UjPg","legendItem":"legendItem__hzrWm","legendItemWrapper":"legendItemWrapper__cW42p","legendMarker":"legendMarker__MZY8H"};
-var stylesheet$1=".Legend__3gE69 {\n  --font: var(\n    --text-bold-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  color: var(--font-color);\n  font: var(--font);\n}\n\n.legendLabel__fxxoV {\n  gap: 0.25rem;\n  text-decoration: none;\n}\n\n.strikeThrough__9UjPg {\n  text-decoration: line-through;\n}\n\n.legendItem__hzrWm {\n  cursor: pointer;\n  display: inline-flex;\n  gap: 5;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.legendItemWrapper__cW42p {\n  display: flex;\n  flex-direction: row;\n  gap: 0.625rem;\n  flex-wrap: wrap;\n}\n\n.legendMarker__MZY8H {\n  width: 1rem;\n  height: 0.75rem;\n}\n";
-styleInject(css_248z$1);
 
-const Legend=forwardRef(({scale,handleLegendClick,isStrikeThrough,...props},ref)=>{sendStyles(stylesheet$1);const{style,className,...restProps}=props;return React.createElement("div",_extends({className:styles$1.Legend,ref:ref},restProps),React.createElement(LegendOrdinal,{scale:scale,labelFormat:label=>`${label}`},labels=>{return React.createElement("div",{className:styles$1.legendItemWrapper},labels.map((label,i)=>{const color=scale(label.datum);return React.createElement(LegendItem,{"data-testid":"legend-item",key:`legend-quantile-${i}`,onClick:()=>handleLegendClick(label),className:styles$1.legendItem},React.createElement("span",{"data-testid":"legend-marker",className:styles$1.legendMarker,style:{backgroundColor:color}}),React.createElement(LegendLabel,{align:"left",className:cn(styles$1.legendLabel,{[styles$1.strikeThrough]:isStrikeThrough?.(label.datum)})},label.text))}))}))});Legend.displayName="Legend";Legend.propTypes={scale:PropTypes.func,handleLegendClick:PropTypes.func,isStrikeThrough:PropTypes.func};
+const Legend=forwardRef(({scale,handleLegendClick,isStrikeThrough,...props},ref)=>{const{style,className,...restProps}=props;return React.createElement("div",_extends({className:styles$1.Legend,ref:ref},restProps),React.createElement(LegendOrdinal,{scale:scale,labelFormat:label=>`${label}`},labels=>{return React.createElement("div",{className:styles$1.legendItemWrapper},labels.map((label,i)=>{const color=scale(label.datum);return React.createElement(LegendItem,{"data-testid":"legend-item",key:`legend-quantile-${i}`,onClick:()=>handleLegendClick(label),className:styles$1.legendItem},React.createElement("span",{"data-testid":"legend-marker",className:styles$1.legendMarker,style:{backgroundColor:color}}),React.createElement(LegendLabel,{align:"left",className:cn(styles$1.legendLabel,{[styles$1.strikeThrough]:isStrikeThrough?.(label.datum)})},label.text))}))}))});Legend.displayName="Legend";Legend.propTypes={scale:PropTypes.func,handleLegendClick:PropTypes.func,isStrikeThrough:PropTypes.func};
 
@@ -73,15 +43,12 @@ const validateDataKey=(data,dataKey)=>{for(const obj of data){if(!Object.prototype.hasOwnProperty.call(obj,dataKey)){return false}}return true};const validateChartData=data=>{if(!data.length){return {invalid:false,data:[]}}const firstKeys=new Set(Object.keys(data[0]));for(const obj of data.slice(1)){const currentKeys=new Set(Object.keys(obj));if(currentKeys.size!==firstKeys.size){return {invalid:true,data:[]}}if([...currentKeys].some(key=>!firstKeys.has(key))){return {invalid:true,data:[]}}}return {invalid:false,data}};
 
-var css_248z = ".Chart__HJjIR {\n  --font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 312px;\n  overflow-y: hidden;\n}\n\n.chartSvg__I4-CH {\n  min-height: 360px;\n}\n\n.legendTop__O4cid {\n  flex-direction: column-reverse;\n}\n\n.gapBottom__LqWhI {\n  margin-bottom: 8px;\n}\n\n.gapTop__jsB6e {\n  margin-top: 8px;\n}\n\n.leftAxisLabel__a-KuD {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.bottomAxisLabel__fjcm2 {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.tickLabel__s-42M {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.tooltipColorMarker__YQngq {\n  width: 1rem;\n  height: 0.75rem;\n}\n\n.tooltipWrapper__mE8oW {\n  display: inline-grid;\n  grid-auto-flow: row;\n  gap: 0.25rem;\n}\n\n.tooltipInfo__cx7e7 {\n  display: grid;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipInfoLine__ZH2cp {\n  display: inline-grid;\n  grid-auto-flow: column;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipSingleLine__aLzKm {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n\n  /* Make sure the  column color marker is always left-aligned */\n  justify-content: start;\n}\n\n/* Remove extra right space in single line custom tooltip content */\n.customTooltipGap__ryF-V {\n  gap: 0;\n}\n\n.chartLabel__WisWp {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.contentContainer__NRbZQ {\n  white-space: nowrap;\n}\n";
 var styles = {"Chart":"Chart__HJjIR","chartSvg":"chartSvg__I4-CH","legendTop":"legendTop__O4cid","gapBottom":"gapBottom__LqWhI","gapTop":"gapTop__jsB6e","leftAxisLabel":"leftAxisLabel__a-KuD","bottomAxisLabel":"bottomAxisLabel__fjcm2","tickLabel":"tickLabel__s-42M","tooltipColorMarker":"tooltipColorMarker__YQngq","tooltipWrapper":"tooltipWrapper__mE8oW","tooltipInfo":"tooltipInfo__cx7e7","tooltipInfoLine":"tooltipInfoLine__ZH2cp","tooltipSingleLine":"tooltipSingleLine__aLzKm","customTooltipGap":"customTooltipGap__ryF-V","chartLabel":"chartLabel__WisWp","contentContainer":"contentContainer__NRbZQ"};
-var stylesheet=".Chart__HJjIR {\n  --font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-secondary, #4f515c);\n\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 312px;\n  overflow-y: hidden;\n}\n\n.chartSvg__I4-CH {\n  min-height: 360px;\n}\n\n.legendTop__O4cid {\n  flex-direction: column-reverse;\n}\n\n.gapBottom__LqWhI {\n  margin-bottom: 8px;\n}\n\n.gapTop__jsB6e {\n  margin-top: 8px;\n}\n\n.leftAxisLabel__a-KuD {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.bottomAxisLabel__fjcm2 {\n  font: var(--font);\n  fill: var(--font-color);\n}\n\n.tickLabel__s-42M {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.tooltipColorMarker__YQngq {\n  width: 1rem;\n  height: 0.75rem;\n}\n\n.tooltipWrapper__mE8oW {\n  display: inline-grid;\n  grid-auto-flow: row;\n  gap: 0.25rem;\n}\n\n.tooltipInfo__cx7e7 {\n  display: grid;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipInfoLine__ZH2cp {\n  display: inline-grid;\n  grid-auto-flow: column;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.tooltipSingleLine__aLzKm {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n\n  /* Make sure the  column color marker is always left-aligned */\n  justify-content: start;\n}\n\n/* Remove extra right space in single line custom tooltip content */\n.customTooltipGap__ryF-V {\n  gap: 0;\n}\n\n.chartLabel__WisWp {\n  font: var(\n    --text-regular-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  fill: var(--content-primary, #2d2e34);\n}\n\n.contentContainer__NRbZQ {\n  white-space: nowrap;\n}\n";
-styleInject(css_248z);
 
 const ChartTooltip=({inverseTooltip=false,tooltipOpen,bezel=false,children,title,singleLine})=>{const{getPopoverProps}=usePopover({open:tooltipOpen,bezel:bezel?false:true});const contentClasses=cn(styles.tooltipInfo,{[styles.tooltipSingleLine]:singleLine,[styles.customTooltipGap]:singleLine&&bezel});const renderContent=()=>{return React.createElement("div",{className:styles.tooltipWrapper},title&&React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},title),React.createElement("div",{className:contentClasses},children))};return inverseTooltip?React.createElement(BasePopover,_extends({inverse:true},getPopoverProps()),React.createElement("div",{className:styles.contentContainer},renderContent())):renderContent()};ChartTooltip.displayName="ChartTooltip";ChartTooltip.propTypes={children:PropTypes.node,inverseTooltip:PropTypes.bool,tooltipOpen:PropTypes.bool,bezel:PropTypes.bool,title:PropTypes.string,singleLine:PropTypes.bool};
 
-const BarChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,viewTooltip=true,onMouseHover,showLegend=true,horizontal=false,stack=false,showLabel=false,formatLabel,inverseTooltip=false,tooltip=null,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}sendStyles(stylesheet);const{style,className,...restProps}=props;const leftAxisRef=useRef(null);const bottomAxisRef=useRef(null);const legendRef=useRef(null);const chartRef=useRef(null);const[hiddenData,setHiddenData]=useState([]);const[ticksOverlapping,setTicksOverlapping]=useState(false);const[labelsOverflowing,setLabelsOverflowing]=useState(0);const{parentRef,width,height}=useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=useTooltip();const{containerRef,TooltipInPortal}=useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getBarChartProps}=useCharts({hideTicks,xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend,labelsOverflowing});const{type,xScale,yScale,colorScale,getBarShapeProps}=getBarChartProps({horizontal,stack});const BarShape=barShape[type];const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event,{barData,groupIndex})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=localPoint(event);const popoverData={currentData:{...barData,[dataKey]:validatedData?.[groupIndex]?.[dataKey]},groupData:{groupIndex,...validatedData?.[groupIndex]}};if(stack){popoverData.currentData={index:barData.index,key:barData.key,value:barData.bar.data[barData.key],color:barData.color,[dataKey]:barData.bar.data[dataKey]};popoverData.groupData={groupIndex:barData.index,...barData.bar.data};}showTooltip({tooltipData:popoverData,tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event,{...popoverData});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabel=barData=>{if(stack){const keys=Object.keys(barData||{}).filter(d=>d!==dataKey&&!hiddenData.includes(d));const totalData=keys.reduce((acc,item)=>{return acc+parseFloat(barData?.[item]||0)},0);return formatLabel?formatLabel(totalData):Number(totalData.toFixed(2))}return formatLabel?formatLabel(Number(barData)):Number(barData)};const calculateLabelPosition=bar=>{let dx=0;let dy=0;if(bar.width===0||bar.height===0){dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height-3;}else {dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height/bar.height-3;}return {dx,dy}};const renderBarChartLabel=(id,bar,barShape,labelValue)=>{const label=getLabel(labelValue);const{dx,dy}=calculateLabelPosition(bar);if(showLabel){return React.createElement(Text$1,{textAnchor:horizontal?"start":"middle",x:bar.x,dx:dx,dy:dy,y:bar.y,className:styles.chartLabel,key:`bar-text-${barShape.index}-${bar.index}`,"data-testid":`${id}-${barShape.index}-${bar.index}`},label)}return null};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);useEffect(()=>{if(chartRef?.current&&horizontal){setLabelsOverflowing(getMaxLabelOverflowWidth(chartRef,margin.right));}},[chartRef,width,data]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(Grid,getGridProps({xScale,yScale})),React.createElement(Group,{top:margin.top,left:margin.left,innerRef:chartRef},React.createElement(BarShape,getBarShapeProps(),barShapes=>barShapes.map((barShape,bsIndex,bsArr)=>stack?barShape.bars.map(bar=>{return React.createElement(Group,{key:`bar-group-stack-${barShape.index}-${bar.index}`},React.createElement("rect",{"data-testid":`bar-stack-${bar.key}${horizontal?"-horizontal":"-vertical"}`,key:`bar-stack-${barShape.index}-${bar.index}-${bar.value}-${bar.key}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar})}),bsIndex===bsArr.length-1&&renderBarChartLabel("bar-stack-text",bar,barShape,bar.bar.data))}):React.createElement(Group,{key:`bar-group-${barShape.index}`,left:barShape.x0,top:barShape.y0},barShape.bars.map(bar=>React.createElement(Group,{key:`bar-${bar.key}`},React.createElement("rect",{"data-testid":`bar-${bar.key}${horizontal?"-horizontal":"-vertical"}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar,groupIndex:barShape.index})}),renderBarChartLabel("bar-text",bar,barShape,bar.value)))))),React.createElement(AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"bar-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`bar-chart-tooltip-${tooltipData.currentData.key}-${tooltipData.currentData[dataKey]}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip,title:!tooltip&&tooltipData.currentData[dataKey],singleLine:true},tooltip??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(tooltipData?.currentData?.key)}}),React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData?.currentData?.key,":"),React.createElement(Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData?.currentData?.value)))))};BarChart.displayName="BarChart";BarChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,horizontal:PropTypes.bool,stack:PropTypes.bool,showLabel:PropTypes.bool,formatLabel:PropTypes.func,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};BarChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,horizontal:false,stack:false,showLabel:false,inverseTooltip:false,xTickWrap:false};
+const BarChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,viewTooltip=true,onMouseHover,showLegend=true,horizontal=false,stack=false,showLabel=false,formatLabel,inverseTooltip=false,tooltip=null,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}const{style,className,...restProps}=props;const leftAxisRef=useRef(null);const bottomAxisRef=useRef(null);const legendRef=useRef(null);const chartRef=useRef(null);const[hiddenData,setHiddenData]=useState([]);const[ticksOverlapping,setTicksOverlapping]=useState(false);const[labelsOverflowing,setLabelsOverflowing]=useState(0);const{parentRef,width,height}=useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=useTooltip();const{containerRef,TooltipInPortal}=useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getBarChartProps}=useCharts({hideTicks,xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend,labelsOverflowing});const{type,xScale,yScale,colorScale,getBarShapeProps}=getBarChartProps({horizontal,stack});const BarShape=barShape[type];const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event,{barData,groupIndex})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=localPoint(event);const popoverData={currentData:{...barData,[dataKey]:validatedData?.[groupIndex]?.[dataKey]},groupData:{groupIndex,...validatedData?.[groupIndex]}};if(stack){popoverData.currentData={index:barData.index,key:barData.key,value:barData.bar.data[barData.key],color:barData.color,[dataKey]:barData.bar.data[dataKey]};popoverData.groupData={groupIndex:barData.index,...barData.bar.data};}showTooltip({tooltipData:popoverData,tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event,{...popoverData});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabel=barData=>{if(stack){const keys=Object.keys(barData||{}).filter(d=>d!==dataKey&&!hiddenData.includes(d));const totalData=keys.reduce((acc,item)=>{return acc+parseFloat(barData?.[item]||0)},0);return formatLabel?formatLabel(totalData):Number(totalData.toFixed(2))}return formatLabel?formatLabel(Number(barData)):Number(barData)};const calculateLabelPosition=bar=>{let dx=0;let dy=0;if(bar.width===0||bar.height===0){dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height-3;}else {dx=horizontal?bar.width+2:bar.width/2;dy=horizontal?bar.height/2+3:bar.height/bar.height-3;}return {dx,dy}};const renderBarChartLabel=(id,bar,barShape,labelValue)=>{const label=getLabel(labelValue);const{dx,dy}=calculateLabelPosition(bar);if(showLabel){return React.createElement(Text$1,{textAnchor:horizontal?"start":"middle",x:bar.x,dx:dx,dy:dy,y:bar.y,className:styles.chartLabel,key:`bar-text-${barShape.index}-${bar.index}`,"data-testid":`${id}-${barShape.index}-${bar.index}`},label)}return null};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);useEffect(()=>{if(chartRef?.current&&horizontal){setLabelsOverflowing(getMaxLabelOverflowWidth(chartRef,margin.right));}},[chartRef,width,data]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(Grid,getGridProps({xScale,yScale})),React.createElement(Group,{top:margin.top,left:margin.left,innerRef:chartRef},React.createElement(BarShape,getBarShapeProps(),barShapes=>barShapes.map((barShape,bsIndex,bsArr)=>stack?barShape.bars.map(bar=>{return React.createElement(Group,{key:`bar-group-stack-${barShape.index}-${bar.index}`},React.createElement("rect",{"data-testid":`bar-stack-${bar.key}${horizontal?"-horizontal":"-vertical"}`,key:`bar-stack-${barShape.index}-${bar.index}-${bar.value}-${bar.key}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar})}),bsIndex===bsArr.length-1&&renderBarChartLabel("bar-stack-text",bar,barShape,bar.bar.data))}):React.createElement(Group,{key:`bar-group-${barShape.index}`,left:barShape.x0,top:barShape.y0},barShape.bars.map(bar=>React.createElement(Group,{key:`bar-${bar.key}`},React.createElement("rect",{"data-testid":`bar-${bar.key}${horizontal?"-horizontal":"-vertical"}`,x:bar.x,y:bar.y,width:bar.width>0?bar.width:0,height:bar.height>0?bar.height:0,fill:bar.color,onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{barData:bar,groupIndex:barShape.index})}),renderBarChartLabel("bar-text",bar,barShape,bar.value)))))),React.createElement(AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"bar-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`bar-chart-tooltip-${tooltipData.currentData.key}-${tooltipData.currentData[dataKey]}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip,title:!tooltip&&tooltipData.currentData[dataKey],singleLine:true},tooltip??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(tooltipData?.currentData?.key)}}),React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData?.currentData?.key,":"),React.createElement(Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData?.currentData?.value)))))};BarChart.displayName="BarChart";BarChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,horizontal:PropTypes.bool,stack:PropTypes.bool,showLabel:PropTypes.bool,formatLabel:PropTypes.func,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};BarChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,horizontal:false,stack:false,showLabel:false,inverseTooltip:false,xTickWrap:false};
 
-const LineChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,tooltip=null,viewTooltip=true,onMouseHover,showPoints=false,showLegend=true,startFromZero=false,inverseTooltip=false,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}sendStyles(stylesheet);const{style,className,...restProps}=props;const leftAxisRef=useRef(null);const bottomAxisRef=useRef(null);const legendRef=useRef(null);const[hiddenData,setHiddenData]=useState([]);const[ticksOverlapping,setTicksOverlapping]=useState(false);const{parentRef,width,height}=useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=useTooltip();const{containerRef,TooltipInPortal}=useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getLineChartProps}=useCharts({xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend});const{xScale,yScale,colorScale,groupedLineChartData}=getLineChartProps({startFromZero});const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=event=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const{x,y}=localPoint(event);let closestPoints=[];let minDistance=Infinity;groupedLineChartData.forEach(({group,values})=>{values.forEach(({x:xValue,y:yValue})=>{const xPos=xScale(xValue)+xScale.bandwidth()/2;const yPos=yScale(yValue);const distance=Math.sqrt((x-margin.left-xPos)**2+(y-margin.top-yPos)**2);if(distance<minDistance){minDistance=distance;closestPoints=[{x:xValue,y:yValue,group}];}else if(distance===minDistance){closestPoints.push({x:xValue,y:yValue,group});}});});showTooltip({tooltipData:closestPoints,tooltipLeft:x,tooltipTop:y});onMouseHover?.(event,{currentData:closestPoints.map(({x,y,group})=>({[dataKey]:x,[group]:y,color:colorScale(group)}))});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(Grid,_extends({},getGridProps({xScale,yScale}),{dx:"0.33em"})),React.createElement(Group,{top:margin.top,left:margin.left},groupedLineChartData.map(lineData=>React.createElement(Fragment,{key:`line-${lineData.group}`},React.createElement(LinePath,{"data-testid":`line-${lineData.group}`,curve:curveMonotoneX,data:lineData.values,x:d=>xScale(d.x)+xScale.bandwidth()/2,y:d=>yScale(d.y),stroke:colorScale(lineData.group),strokeWidth:2,onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove}),showPoints&&lineData.values.map((d,idx)=>React.createElement("circle",{"data-testid":`point-${lineData.group}-${idx}`,key:`point-${lineData.group}-${idx}`,cx:xScale(d.x)+xScale.bandwidth()/2,cy:yScale(d.y),r:4,stroke:"#ffffff",fill:colorScale(lineData.group),onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove})))),React.createElement(AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,labelOffset:24,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"line-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`line-chart-tooltip`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip,singleLine:false,title:!tooltip&&tooltipData?.[0]?.x},tooltip??tooltipData.map((data,index)=>React.createElement("div",{key:index},React.createElement("div",{className:styles.tooltipInfoLine},React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(data?.group)}}),React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},data?.group,":"),React.createElement(Text,{span:true,size:"xs",onBrand:inverseTooltip},data?.y)))))))};LineChart.displayName="LineChart";LineChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,showPoints:PropTypes.bool,startFromZero:PropTypes.bool,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};LineChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,showPoints:false,startFromZero:false,inverseTooltip:false,xTickWrap:false};
+const LineChart=({data,colors,dataKey,xAxisLabel,yAxisLabel,showGrid=false,xTickFormat,yTickFormat,legendTop=false,tooltip=null,viewTooltip=true,onMouseHover,showPoints=false,showLegend=true,startFromZero=false,inverseTooltip=false,xTickWrap=false,...props})=>{const{invalid,data:validatedData}=validateChartData(data);if(invalid){console.error(`Dataviz: Invalid data. Make sure all the keys are same in each of the object in the data array.`);}if(!validateDataKey(data,dataKey)){console.warn(`Dataviz: Invalid dataKey ${dataKey}. Make sure the dataKey is present in all the data points. Otherwise the chart will be inaccurate.`);}const{style,className,...restProps}=props;const leftAxisRef=useRef(null);const bottomAxisRef=useRef(null);const legendRef=useRef(null);const[hiddenData,setHiddenData]=useState([]);const[ticksOverlapping,setTicksOverlapping]=useState(false);const{parentRef,width,height}=useParentSize();const hideTicks=false;const hideXAxisLine=false;const hideYAxisLine=false;let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=useTooltip();const{containerRef,TooltipInPortal}=useTooltipInPortal({scroll:true});const{margin,getGridProps,getLeftAxisProps,getBottomAxisProps,getLineChartProps}=useCharts({xAxisLabel,yAxisLabel,legendTop,leftAxisRef,bottomAxisRef,legendRef,colors,data:validatedData,dataKey,height,hiddenData,width,ticksOverlapping,showLegend});const{xScale,yScale,colorScale,groupedLineChartData}=getLineChartProps({startFromZero});const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=event=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const{x,y}=localPoint(event);let closestPoints=[];let minDistance=Infinity;groupedLineChartData.forEach(({group,values})=>{values.forEach(({x:xValue,y:yValue})=>{const xPos=xScale(xValue)+xScale.bandwidth()/2;const yPos=yScale(yValue);const distance=Math.sqrt((x-margin.left-xPos)**2+(y-margin.top-yPos)**2);if(distance<minDistance){minDistance=distance;closestPoints=[{x:xValue,y:yValue,group}];}else if(distance===minDistance){closestPoints.push({x:xValue,y:yValue,group});}});});showTooltip({tooltipData:closestPoints,tooltipLeft:x,tooltipTop:y});onMouseHover?.(event,{currentData:closestPoints.map(({x,y,group})=>({[dataKey]:x,[group]:y,color:colorScale(group)}))});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};const getLabelTicks=()=>{const baseProps={textAnchor:ticksOverlapping?"end":"middle",className:styles.tickLabel,angle:ticksOverlapping?-45:0};const wrapConfig=xTickWrap?{width:xScale.bandwidth?xScale.bandwidth():120,verticalAnchor:"start"}:{};return {tickLabelProps:()=>({...baseProps,...wrapConfig})}};useEffect(()=>{if(bottomAxisRef?.current){setTicksOverlapping(overlappingTicks(bottomAxisRef));}},[width,bottomAxisRef]);return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},showGrid&&React.createElement(Grid,_extends({},getGridProps({xScale,yScale}),{dx:"0.33em"})),React.createElement(Group,{top:margin.top,left:margin.left},groupedLineChartData.map(lineData=>React.createElement(Fragment,{key:`line-${lineData.group}`},React.createElement(LinePath,{"data-testid":`line-${lineData.group}`,curve:curveMonotoneX,data:lineData.values,x:d=>xScale(d.x)+xScale.bandwidth()/2,y:d=>yScale(d.y),stroke:colorScale(lineData.group),strokeWidth:2,onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove}),showPoints&&lineData.values.map((d,idx)=>React.createElement("circle",{"data-testid":`point-${lineData.group}-${idx}`,key:`point-${lineData.group}-${idx}`,cx:xScale(d.x)+xScale.bandwidth()/2,cy:yScale(d.y),r:4,stroke:"#ffffff",fill:colorScale(lineData.group),onMouseLeave:handleMouseLeave,onMouseMove:handleMouseMove})))),React.createElement(AxisLeft,_extends({},getLeftAxisProps({yScale}),{hideTicks:hideTicks,hideAxisLine:hideYAxisLine,label:yAxisLabel,tickFormat:yTickFormat,innerRef:leftAxisRef,labelClassName:styles.leftAxisLabel,tickLabelProps:{className:styles.tickLabel},labelProps:{y:-margin.left+20}})),React.createElement(AxisBottom,_extends({},getBottomAxisProps({xScale}),{tickFormat:xTickFormat},getLabelTicks(),{hideTicks:hideTicks,hideAxisLine:hideXAxisLine,label:xAxisLabel,labelClassName:styles.bottomAxisLabel,labelOffset:24,innerRef:bottomAxisRef})))),showLegend&&React.createElement(Legend,{"data-testid":"line-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`line-chart-tooltip`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip,singleLine:false,title:!tooltip&&tooltipData?.[0]?.x},tooltip??tooltipData.map((data,index)=>React.createElement("div",{key:index},React.createElement("div",{className:styles.tooltipInfoLine},React.createElement("span",{className:styles.tooltipColorMarker,style:{background:colorScale(data?.group)}}),React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},data?.group,":"),React.createElement(Text,{span:true,size:"xs",onBrand:inverseTooltip},data?.y)))))))};LineChart.displayName="LineChart";LineChart.propTypes={data:PropTypes.arrayOf(PropTypes.object).isRequired,colors:PropTypes.object,dataKey:PropTypes.string.isRequired,xAxisLabel:PropTypes.string,yAxisLabel:PropTypes.string,showGrid:PropTypes.bool,showLegend:PropTypes.bool,legendTop:PropTypes.bool,xTickFormat:PropTypes.func,yTickFormat:PropTypes.func,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,showPoints:PropTypes.bool,startFromZero:PropTypes.bool,inverseTooltip:PropTypes.bool,xTickWrap:PropTypes.bool};LineChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,showPoints:false,startFromZero:false,inverseTooltip:false,xTickWrap:false};
 
-const DonutChart=({data,colors,legendTop=false,tooltip=null,viewTooltip=true,onMouseHover,showLegend=true,inverseTooltip=false,...props})=>{sendStyles(stylesheet);const{style,className,...restProps}=props;const[hiddenData,setHiddenData]=useState([]);const legendRef=useRef(null);const{parentRef,width,height}=useParentSize();let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=useTooltip();const{containerRef,TooltipInPortal}=useTooltipInPortal({scroll:true});const{margin,getDonutChartProps}=useCharts({legendTop,legendRef,colors,data:[data],height,hiddenData,width,showLegend});const{centerX,centerY,colorScale,getDonutShapeProps}=getDonutChartProps();const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event,{donutData})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=localPoint(event);const{data:key,value,color}=donutData;showTooltip({tooltipData:{currentData:{key,value,color}},tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event,{currentData:{[key]:value,color}});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},React.createElement(Group,{top:centerY+margin.top,left:centerX+margin.left},React.createElement(Pie,getDonutShapeProps(),donut=>{return donut.arcs.map((arc,index)=>React.createElement("g",{key:`arc-${arc.data}-${index}`,"data-testid":`arc-donut-shape-${arc.data}`},React.createElement("path",{d:donut.path(arc),fill:colorScale(arc.data),onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{donutData:{...arc,color:colorScale(arc.data)}})})))}))),showLegend&&React.createElement(Legend,{"data-testid":"donut-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`donut-chart-tooltip-${tooltipData.currentData.key}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip,singleLine:true},tooltip??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:tooltipData.currentData.color}}),React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData.currentData.key,":"),React.createElement(Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData.currentData.value)))))};DonutChart.propTypes={data:PropTypes.object.isRequired,colors:PropTypes.object,showLegend:PropTypes.bool,legendTop:PropTypes.bool,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,inverseTooltip:PropTypes.bool};DonutChart.defaultProps={tooltip:null,showLegend:true,legendTop:false,viewTooltip:true,inverseTooltip:false};
+const DonutChart=({data,colors,legendTop=false,tooltip=null,viewTooltip=true,onMouseHover,showLegend=true,inverseTooltip=false,...props})=>{const{style,className,...restProps}=props;const[hiddenData,setHiddenData]=useState([]);const legendRef=useRef(null);const{parentRef,width,height}=useParentSize();let tooltipTimeout;const{tooltipOpen,tooltipLeft,tooltipTop,tooltipData,hideTooltip,showTooltip}=useTooltip();const{containerRef,TooltipInPortal}=useTooltipInPortal({scroll:true});const{margin,getDonutChartProps}=useCharts({legendTop,legendRef,colors,data:[data],height,hiddenData,width,showLegend});const{centerX,centerY,colorScale,getDonutShapeProps}=getDonutChartProps();const handleLegendClick=legendData=>{if(hiddenData.includes(legendData.datum)){setHiddenData(hiddenData.filter(d=>d!==legendData.datum));}else {setHiddenData([...hiddenData,legendData.datum]);}};const handleMouseMove=(event,{donutData})=>{if(tooltipTimeout){clearTimeout(tooltipTimeout);}const eventSvgCoords=localPoint(event);const{data:key,value,color}=donutData;showTooltip({tooltipData:{currentData:{key,value,color}},tooltipTop:eventSvgCoords?.y,tooltipLeft:eventSvgCoords?.x});onMouseHover?.(event,{currentData:{[key]:value,color}});};const handleMouseLeave=()=>{if(viewTooltip){tooltipTimeout=window.setTimeout(()=>{hideTooltip();},300);}};return React.createElement("div",_extends({},restProps,{ref:parentRef,className:cn(styles.Chart,{[styles.legendTop]:legendTop})}),React.createElement("svg",{ref:containerRef,width:width,height:"100%",className:cn(styles.chartSvg,legendTop?styles.gapTop:styles.gapBottom)},React.createElement(Group,{top:centerY+margin.top,left:centerX+margin.left},React.createElement(Pie,getDonutShapeProps(),donut=>{return donut.arcs.map((arc,index)=>React.createElement("g",{key:`arc-${arc.data}-${index}`,"data-testid":`arc-donut-shape-${arc.data}`},React.createElement("path",{d:donut.path(arc),fill:colorScale(arc.data),onMouseLeave:handleMouseLeave,onMouseMove:event=>handleMouseMove(event,{donutData:{...arc,color:colorScale(arc.data)}})})))}))),showLegend&&React.createElement(Legend,{"data-testid":"donut-chart-legend",scale:colorScale,handleLegendClick:handleLegendClick,isStrikeThrough:label=>hiddenData.includes(label),ref:legendRef}),viewTooltip&&tooltipOpen&&tooltipData&&React.createElement(TooltipInPortal,{"data-testid":`donut-chart-tooltip-${tooltipData.currentData.key}`,top:tooltipTop,left:tooltipLeft,style:inverseTooltip?TOOLTIP_STYLE_INVERSE:TOOLTIP_STYLE_DEFAULT},React.createElement(ChartTooltip,{inverseTooltip:inverseTooltip,tooltipOpen:tooltipOpen,bezel:tooltip,singleLine:true},tooltip??React.createElement(React.Fragment,null,React.createElement("span",{className:styles.tooltipColorMarker,style:{background:tooltipData.currentData.color}}),React.createElement(Text,{span:true,size:"xs",bold:true,onBrand:inverseTooltip},tooltipData.currentData.key,":"),React.createElement(Text,{span:true,size:"xs",onBrand:inverseTooltip},tooltipData.currentData.value)))))};DonutChart.propTypes={data:PropTypes.object.isRequired,colors:PropTypes.object,showLegend:PropTypes.bool,legendTop:PropTypes.bool,tooltip:PropTypes.node,viewTooltip:PropTypes.bool,onMouseHover:PropTypes.func,inverseTooltip:PropTypes.bool};DonutChart.defaultProps={tooltip:null,showLegend:true,legendTop:false,viewTooltip:true,inverseTooltip:false};
 
 export { BarChart, DonutChart, LineChart, useCharts };

package.json

 {
   "name": "@asphalt-react/data-viz",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "description": "data-viz is a comprehensive charting library tailored to fulfill diverse visualization requirements.",
@@ -42,5 +42,4 @@ "keywords": [
   "dependencies": {
-    "@asphalt-react/context": "^2.12.0",
-    "@asphalt-react/popover": "^2.12.2",
-    "@asphalt-react/typography": "^2.12.2",
+    "@asphalt-react/popover": "^2.13.0",
+    "@asphalt-react/typography": "^2.13.0",
     "@visx/axis": "^3.10.1",
@@ -62,7 +61,10 @@ "@visx/curve": "^3.3.0",
   "devDependencies": {
-    "@asphalt-react/build": "^2.12.0",
+    "@asphalt-react/build": "^2.13.0",
     "@testing-library/react": "^11.2.7"
   },
   "license": "UNLICENSED",
-  "gitHead": "37abc774b63d4cf0a1d699371d887524b1819a4d"
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "gitHead": "6238a81dad8246006beb0bea5148a283f34b22ed"
 }

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dependency count

17

-5.56%

Number of package files

6

20%

Lines of code

973

4.4%

Number of low supply chain risk alerts

1

-80%

Worsened metrics

Total package byte prevSize

92560

-9.53%

Dependency changes

• - Removed

  @asphalt-react/context@^2.12.0

• - Removed

  @asphalt-react/context@2.15.0
  (transitive)

• Updated

  @asphalt-react/popover@^2.13.0

• Updated

  @asphalt-react/typography@^2.13.0