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

Comparing version 2.14.0 to 2.15.0

dist/index.cjs

@@ -49,3 +49,3 @@ require("./index.css");
 
-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 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,xTickFilter,...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]);const bottomAxisProps=getBottomAxisProps({xScale});if(xTickFilter)bottomAxisProps.tickValues=bottomAxisProps.tickValues.filter((value,index)=>xTickFilter(value,index));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({},bottomAxisProps,{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,xTickFilter:PropTypes.func};LineChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,showPoints:false,startFromZero:false,inverseTooltip:false,xTickWrap:false};
 
@@ -52,0 +52,0 @@ 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};

dist/index.d.ts

@@ -28,2 +28,3 @@ type Override<T, U> = Omit<U, keyof T> & T
    * Example:
+   *
    * ```js
@@ -54,2 +55,3 @@ * [
    * For instance:
+   *
    * ```js
@@ -77,2 +79,3 @@ * const data = [
    * For instance:
+   *
    * ```js
@@ -177,2 +180,14 @@ * const data = [
   xTickWrap?: boolean
+  /**
+   * Filters x-axis tick values to control which ticks and their labels are rendered.
+   *
+   * - value - the tick value.
+   * - index - the index of the tick.
+   * return true to show the tick, false to hide it.
+   *
+   * For instance:
+   * ```js
+   * (value, index) => index % 2 === 0
+   * ```
+   */ xTickFilter?: (...args: any[]) => any
 }
@@ -190,2 +205,3 @@
    * Example:
+   *
    * ```js
@@ -259,2 +275,3 @@ *   {
    * Example:
+   *
    * ```js
@@ -285,2 +302,3 @@ * [
    * For instance:
+   *
    * ```js
@@ -308,2 +326,3 @@ * const data = [
    * For instance:
+   *
    * ```js
@@ -310,0 +329,0 @@ * const data = [

dist/index.js

@@ -47,3 +47,3 @@ import "./index.css";
 
-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 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,xTickFilter,...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]);const bottomAxisProps=getBottomAxisProps({xScale});if(xTickFilter)bottomAxisProps.tickValues=bottomAxisProps.tickValues.filter((value,index)=>xTickFilter(value,index));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({},bottomAxisProps,{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,xTickFilter:PropTypes.func};LineChart.defaultProps={tooltip:null,showGrid:false,showLegend:true,legendTop:false,viewTooltip:true,showPoints:false,startFromZero:false,inverseTooltip:false,xTickWrap:false};
 
@@ -50,0 +50,0 @@ 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};

package.json

 {
   "name": "@asphalt-react/data-viz",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "data-viz is a comprehensive charting library tailored to fulfill diverse visualization requirements.",
@@ -42,4 +42,4 @@ "keywords": [
   "dependencies": {
-    "@asphalt-react/popover": "^2.14.0",
-    "@asphalt-react/typography": "^2.14.0",
+    "@asphalt-react/popover": "^2.15.0",
+    "@asphalt-react/typography": "^2.15.0",
     "@visx/axis": "^3.10.1",
@@ -61,3 +61,3 @@ "@visx/curve": "^3.3.0",
   "devDependencies": {
-    "@asphalt-react/build": "^2.14.0",
+    "@asphalt-react/build": "^2.15.0",
     "@testing-library/react": "^11.2.7"
@@ -69,3 +69,3 @@ },
   ],
-  "gitHead": "c544de513631fc56b7ee00844ca9ba2515d8410a"
+  "gitHead": "4414f2abe8aea713a0b6cafcee2ab24461ce3263"
 }

README.md

@@ -555,2 +555,20 @@ # DataViz
 
+### xTickFilter
+
+Filters x-axis tick values to control which ticks and their labels are rendered.
+
+* value - the tick value.
+* index - the index of the tick.
+  return true to show the tick, false to hide it.
+
+For instance:
+
+```js
+(value, index) => index % 2 === 0
+```
+
+| type | required | default |
+| ---- | -------- | ------- |
+| func | false    | N/A     |
+
 # DonutChart
@@ -557,0 +575,0 @@

No alert changes

Improved metrics

Total package byte prevSize

93689

1.22%

Lines of code

993

2.06%

Number of lines in readme file

675

2.74%

Dependency changes

• Updated

  @asphalt-react/popover@^2.15.0

• Updated

  @asphalt-react/typography@^2.15.0