@evergis/charts 2.0.93 → 2.0.95

package/dist/charts/BarChart/drawTooltip/index.d.ts

@@ -1,2 +1,2 @@
 import { DrawTooltipProps } from './types';
-export declare const drawTooltip: ({ svg, node, data, marshalledData, xScale, yScale, renderTooltip, labelPosition, marginTop, renderLabel, barWidth, barPadding, dynamicTooltipEnable, tooltipY, tooltipBind, lineData, formatTooltipValue, formatTooltipName, tooltipYDomain, setTooltipPosition, onLabelItem, isBarTooltip, bars, tooltipRoot, tooltipClassName, }: DrawTooltipProps) => void;
+export declare const drawTooltip: ({ svg, node, data, marshalledData, xScale, yScale, renderTooltip, labelPosition, marginTop, renderLabel, barWidth, barPadding, dynamicTooltipEnable, tooltipY, tooltipBind, lineData, formatTooltipValue, formatTooltipName, tooltipYDomain, setTooltipPosition, onLabelItem, isBarTooltip, bars, tooltipRoot, tooltipClassName, onBarClick, onBarHover, }: DrawTooltipProps) => void;

package/dist/charts/BarChart/drawTooltip/types.d.ts

@@ -10,4 +10,4 @@ export declare type DrawTooltipProps = {
     marginTop: number;
     barWidth: number;
     bars: d3.Selection<SVGGElement, BarChartMarshalledGroup[], SVGGElement, unknown>;
-} & Pick<BarChartProps, 'renderTooltip' | 'labelPosition' | 'renderLabel' | 'dynamicTooltipEnable' | 'tooltipY' | 'tooltipBind' | 'lineData' | 'formatTooltipValue' | 'formatTooltipName' | 'tooltipYDomain' | 'data' | 'barPadding' | 'setTooltipPosition' | 'onLabelItem' | 'isBarTooltip' | 'tooltipRoot' | 'tooltipClassName'>;
+} & Pick<BarChartProps, 'renderTooltip' | 'labelPosition' | 'renderLabel' | 'dynamicTooltipEnable' | 'tooltipY' | 'tooltipBind' | 'lineData' | 'formatTooltipValue' | 'formatTooltipName' | 'tooltipYDomain' | 'data' | 'barPadding' | 'setTooltipPosition' | 'onLabelItem' | 'isBarTooltip' | 'tooltipRoot' | 'tooltipClassName' | 'onBarClick' | 'onBarHover'>;

package/dist/charts/BarChart/types.d.ts

@@ -25,6 +25,7 @@ export interface BarChartMarker {
     value: number;
     color?: string;
     className?: string;
+    horizontal?: boolean;
 }
 export declare type BarChartProps = {
     className?: string;
@@ -112,6 +113,8 @@ export declare type BarChartProps = {
     tooltipClassName?: string;
     selectable?: boolean;
     onSelect?: (value: [number, number]) => void;
+    onBarClick?: (group: BarChartMarshalledGroup) => void;
+    onBarHover?: (group?: BarChartMarshalledGroup) => void;
 };
 export declare type BarChartMergedData = (BarChartMarshalledGroup & BarChartLineData & {
     groupName: string;

package/dist/charts.cjs.development.js

@@ -2309,7 +2309,9 @@ const drawTooltip$2 = _ref => {
     isBarTooltip,
     bars,
     tooltipRoot,
-    tooltipClassName
+    tooltipClassName,
+    onBarClick,
+    onBarHover
   } = _ref;
   d3.select(node).select("." + barChartClassNames.barChartMouseContainer).remove();
   const xScaleBandDomain = xScale.domain();
@@ -2513,6 +2515,21 @@ const drawTooltip$2 = _ref => {
   const container = d3.select(node).append('div').attr('class', barChartClassNames.barChartMouseContainer);
   const labelContainer = container.append('div').attr('class', barChartClassNames.barChartLabelContainer).style('position', 'absolute').style('top', y2 + "px");
 
+  const isMouseWithin = (e, callback) => {
+    const [rectrX, rectrY] = d3.pointer(e, mouseRect);
+    const [nodeX, nodeY] = d3.pointer(e, node);
+    const x = rectrX - (rectrX - nodeX);
+    const y = rectrY - nodeY;
+    const currIndex = groups.findIndex(value => x <= value);
+    const dataItem = marshalledData[currIndex][0];
+
+    if (dataItem.height >= y1 - y) {
+      callback(dataItem);
+    }
+  };
+
+  mouseGlobal.on("click", e => isMouseWithin(e, dataItem => onBarClick && onBarClick(dataItem))).on("mousemove", e => isMouseWithin(e, dataItem => onBarHover && onBarHover(dataItem))).on("mouseleave", () => onBarHover && onBarHover(undefined));
+
   if (labelPosition) {
     const concatedData = lineData ? marshalledData.map((stack, index) => stack.concat(lineData.map(_ref6 => {
       let {
@@ -2646,7 +2663,9 @@ const draw$4 = (node, props) => {
     isBarTooltip,
     xScaleItemWidth,
     tooltipRoot,
-    tooltipClassName
+    tooltipClassName,
+    onBarClick,
+    onBarHover
   } = props;
 
   if (node !== null && data.length) {
@@ -2760,6 +2779,12 @@ const draw$4 = (node, props) => {
         return;
       }
 
+      if (marker.horizontal) {
+        svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", marginLeft + yAxisWidth).attr("y1", yScale(marker.value) + 1).attr("x2", width).attr("y2", yScale(marker.value) + 1);
+        svg.append("text").attr("y", yScale(marker.value) + 1).attr("x", marginLeft + yAxisWidth).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
+        return;
+      }
+
       svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", width / data.length * marker.value + 1).attr("y1", 0).attr("x2", width / data.length * marker.value + 1).attr("y2", height - marginTop - marginBottom + marginBottom / 2);
       svg.append("text").attr("y", height).attr("x", width / data.length * marker.value + 1).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
     });
@@ -2811,7 +2836,9 @@ const draw$4 = (node, props) => {
         isBarTooltip,
         bars: groups,
         tooltipRoot,
-        tooltipClassName
+        tooltipClassName,
+        onBarClick,
+        onBarHover
       });
     }