@vizzly/dashboard 0.15.0-dev-307a9830cb4e82f036693ccfe2634f74381a2b72 → 0.15.0-dev-d949562f7d69a747b6f32349c6a53a2dc3ed06f9

package/dist/charts/src/v2/components/RadarChart/Polygons.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { PolygonProps } from './types';
-export declare const Polygons: ({ chart, radius, visibleYKeys }: PolygonProps) => JSX.Element;
+export declare const Polygons: ({ chart, radius, visibleYKeys, tooltipData, hoveredDataPointIndex }: PolygonProps) => JSX.Element;

package/dist/charts/src/v2/components/RadarChart/RadarCrosshairCircle.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent } from 'react';
+import { DataItem, ShapeDefinition } from '../../../../../shared-logic/src/ChartsV2/types';
+import { LinesItemStyleLine } from '../../../../../shared-logic/src/RadarChart/types';
+export declare const RadarCrosshairCircle: FunctionComponent<{
+    tooltipData: {
+        [keyId: string]: DataItem;
+    };
+    yKeys: string[];
+    legendItems: ShapeDefinition<LinesItemStyleLine>[];
+    conditionalFormattingRules?: any;
+    visibleYKeys: string[];
+    radius: number;
+    yScale: {
+        max: number | null;
+        min: number | null;
+    };
+    dataPointIndex: number;
+    totalDataPoints: number;
+}>;

package/dist/charts/src/v2/components/RadarChart/shared.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LINE_STYLES: React.CSSProperties;

package/dist/charts/src/v2/components/RadarChart/types.d.ts

@@ -17,6 +17,10 @@ export declare type PolygonProps = {
     chart: RadarChartRepresentation;
     radius: number;
     visibleYKeys: string[];
+    tooltipData?: {
+        [keyId: string]: import('../../../../../shared-logic/src/RadarChart/types').DataItem;
+    } | null;
+    hoveredDataPointIndex?: number;
 };
 export declare type RadarShapeProps = {
     chart: RadarChartRepresentation;

package/dist/charts/src/v2/components/Tooltip/CrosshairCircle.d.ts

@@ -14,7 +14,7 @@ export declare const CrosshairCircle: FunctionComponent<{
     xKey: string | null;
     margin: Margin;
     legendItems: ShapeDefinition<AreaStyles | LineStyles | BubbleStyles>[];
-    conditionalFormattingRules: any;
+    conditionalFormattingRules?: any;
     visibleYKeys: string[];
     yScale: (yKey: string) => number;
     xScale: (value: string | number | Date) => number | undefined;

package/dist/charts/src/v2/utils/getRadarTooltipData.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { DataItem } from '../../../../shared-logic/src/RadarChart/types';
+declare type RadarTooltipData = {
+    [keyId: string]: DataItem;
+};
+interface GetRadarTooltipDataArgs {
+    data: Array<{
+        [keyId: string]: DataItem;
+    }>;
+    event: React.MouseEvent<SVGElement>;
+    totalDataPoints: number;
+    centerX: number;
+    centerY: number;
+}
+interface RadarTooltipDataReturn {
+    tooltipData: RadarTooltipData | null;
+    dataPointIndex: number;
+    angle: number;
+}
+export declare const getRadarTooltipData: ({ data, event, totalDataPoints, centerX, centerY, }: GetRadarTooltipDataArgs) => RadarTooltipDataReturn | undefined;
+export {};

package/dist/dashboard.cjs.development.js

@@ -44147,11 +44147,12 @@ var AxisLeft = function AxisLeft(_ref) {
   });
 };
 
-var GRID_STYLES = {
+var LINE_STYLES = {
   strokeWidth: 2,
   strokeOpacity: 0.8,
   strokeLinecap: 'round',
-  strokeDasharray: '0.5 5'
+  strokeDasharray: '0.5 5',
+  stroke: 'rgba(0, 0, 0, 0.1)'
 };
 
 var GridRows = function GridRows(_ref) {
@@ -44171,7 +44172,7 @@ var GridRows = function GridRows(_ref) {
     strokeWidth: removeStroke ? 0 : 2,
     lineStyle: _extends({
       stroke: themeCSS.grid.stroke
-    }, GRID_STYLES)
+    }, LINE_STYLES)
   });
 };
 
@@ -45966,6 +45967,58 @@ function Bubbles(_ref2) {
   });
 }
 
+var RadarCrosshairCircle = function RadarCrosshairCircle(_ref) {
+  var tooltipData = _ref.tooltipData,
+    yKeys = _ref.yKeys,
+    legendItems = _ref.legendItems,
+    conditionalFormattingRules = _ref.conditionalFormattingRules,
+    visibleYKeys = _ref.visibleYKeys,
+    radius = _ref.radius,
+    yScale = _ref.yScale,
+    dataPointIndex = _ref.dataPointIndex,
+    totalDataPoints = _ref.totalDataPoints;
+  var radiusScale = scale.scaleLinear({
+    range: [0, radius],
+    domain: [0, yScale.max],
+    nice: true
+  });
+  var step = Math.PI * 2 / totalDataPoints;
+  var yKeysTest = [].concat(yKeys);
+  if (yKeysTest.length > 1) {
+    var lastItem = yKeysTest.pop();
+    yKeysTest.unshift(lastItem);
+  }
+  return jsxRuntime.jsx(React.Fragment, {
+    children: yKeysTest.map(function (yKey) {
+      var _legendItems$filter$;
+      if (!tooltipData[yKey] || tooltipData[yKey].value === null || !visibleYKeys.includes(yKey)) {
+        return null;
+      }
+      var value = tooltipData[yKey].value;
+      var scaledRadius = radiusScale(value);
+      var angle = (dataPointIndex + 1) * step;
+      var x = scaledRadius * Math.sin(angle);
+      var y = scaledRadius * Math.cos(angle);
+      return jsxRuntime.jsx("circle", {
+        cx: x,
+        cy: y,
+        r: 6,
+        fill: getColor({
+          defaultColor: ((_legendItems$filter$ = legendItems.filter(function (legendItem) {
+            return legendItem.yKey === yKey;
+          })[0]) == null ? void 0 : _legendItems$filter$.color) || '#000',
+          yKey: yKey,
+          value: tooltipData[yKey].value,
+          conditionalFormattingRules: conditionalFormattingRules
+        }),
+        strokeWidth: 2,
+        stroke: "#fff",
+        pointerEvents: "none"
+      }, "radar-crosshair-" + yKey);
+    })
+  });
+};
+
 var getValue = function getValue(d, key) {
   return d[key].value;
 };
@@ -45995,7 +46048,9 @@ var genPolygonPoints = function genPolygonPoints(dataArray, scale, yKey) {
 var Polygons = function Polygons(_ref) {
   var chart = _ref.chart,
     radius = _ref.radius,
-    visibleYKeys = _ref.visibleYKeys;
+    visibleYKeys = _ref.visibleYKeys,
+    tooltipData = _ref.tooltipData,
+    hoveredDataPointIndex = _ref.hoveredDataPointIndex;
   var yKeys = chart.y.keys;
   var yScale = scale.scaleLinear({
     range: [0, radius],
@@ -46008,16 +46063,26 @@ var Polygons = function Polygons(_ref) {
       return (_yScale = yScale(d)) != null ? _yScale : 0;
     }, yKey);
   });
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: polygonsPoints.map(function (polygonPoints) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [polygonsPoints.map(function (polygonPoints) {
       return jsxRuntime.jsx(SinglePolygon, {
         isVisible: visibleYKeys.includes(polygonPoints.yKey),
         polygonPoints: polygonPoints,
         colors: chart.lines.filter(function (legendItem) {
           return legendItem.yKey === polygonPoints.yKey;
         })[0].color
-      });
-    })
+      }, polygonPoints.yKey);
+    }), tooltipData && hoveredDataPointIndex !== undefined && hoveredDataPointIndex >= 0 && jsxRuntime.jsx(RadarCrosshairCircle, {
+      tooltipData: tooltipData,
+      yKeys: chart.y.keys,
+      legendItems: chart.lines,
+      conditionalFormattingRules: [],
+      visibleYKeys: visibleYKeys,
+      radius: radius,
+      yScale: chart.y.scale,
+      dataPointIndex: hoveredDataPointIndex,
+      totalDataPoints: chart.data.length
+    })]
   });
 };
 var SinglePolygon = function SinglePolygon(_ref2) {
@@ -46044,15 +46109,6 @@ var SinglePolygon = function SinglePolygon(_ref2) {
   });
 };
 
-var genPoints = function genPoints(length, radius) {
-  var step = Math.PI * 2 / length;
-  return [].concat(new Array(length)).map(function (_, i) {
-    return {
-      x: radius * Math.sin(i * step),
-      y: radius * Math.cos(i * step)
-    };
-  });
-};
 var MiddleLine = function MiddleLine(_ref) {
   var chart = _ref.chart,
     radius = _ref.radius,
@@ -46062,7 +46118,6 @@ var MiddleLine = function MiddleLine(_ref) {
   var _useState = React.useState([]),
     textWidths = _useState[0],
     setTextWidths = _useState[1];
-  var points = genPoints(chart.x.ticks.length, radius);
   var zeroPoint = new point.Point({
     x: 0,
     y: 0
@@ -46071,22 +46126,33 @@ var MiddleLine = function MiddleLine(_ref) {
     var _tick$formattedValue;
     return (_tick$formattedValue = tick.formattedValue) != null ? _tick$formattedValue : tick.value;
   });
+  var genPoints = function genPoints(length, radius) {
+    var step = Math.PI * 2 / length;
+    return new Array(length).fill(0).map(function (_, i) {
+      return {
+        x: radius * Math.sin(i * step),
+        y: radius * Math.cos(i * step)
+      };
+    });
+  };
   React.useEffect(function () {
     var newWidths = textRefs.current.map(function (ref) {
       return ref ? ref.getComputedTextLength() : 0;
     });
     setTextWidths(newWidths);
-  }, [categoryValues]);
+  }, []);
+  var points = genPoints(chart.x.ticks.length, radius);
   points.push(points.shift());
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: [].concat(new Array(chart.x.ticks.length)).map(function (_, i) {
+    children: new Array(chart.x.ticks.length).fill(0).map(function (_, i) {
       var xOffset = points[i].x >= 0 ? textWidths[i] / 2 : -(textWidths[i] / 2);
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      return jsxRuntime.jsxs(React__default.Fragment, {
         children: [jsxRuntime.jsx(shape.Line, {
           from: zeroPoint,
           to: points[i],
-          stroke: themeCSS.axis.stroke,
-          strokeDasharray: "0.5 5"
+          style: _extends({
+            stroke: themeCSS.axis.stroke
+          }, LINE_STYLES)
         }, "radar-line-" + i), show && jsxRuntime.jsx("text", {
           ref: function ref(el) {
             return textRefs.current[i] = el;
@@ -46097,13 +46163,13 @@ var MiddleLine = function MiddleLine(_ref) {
           textAnchor: "middle",
           children: categoryValues[i]
         })]
-      });
+      }, "middle-line-" + i);
     })
   });
 };
 
 var genAngles = function genAngles(length, degrees) {
-  return [].concat(new Array(length + 1)).map(function (_, i) {
+  return new Array(length + 1).fill(0).map(function (_, i) {
     return {
       angle: i * (degrees / length) + (length % 2 === 0 ? 0 : degrees / length / 2)
     };
@@ -46135,9 +46201,9 @@ var Grid$1 = function Grid(_ref) {
   }, [chart.y.ticks]);
   var chartValue = (_chart$y$ticks$scaleV = chart.y.ticks[levels - 1].scaleValue) != null ? _chart$y$ticks$scaleV : chart.y.ticks[levels - 1].value;
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: [].concat(new Array(levels)).map(function (_, i) {
+    children: new Array(levels).fill(0).map(function (_, i) {
       var levelRadius = chart.y.ticks[i].value / chartValue * radius;
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      return jsxRuntime.jsxs(React__default.Fragment, {
         children: [jsxRuntime.jsx(shape.LineRadial, {
           data: webs,
           angle: function angle(d) {
@@ -46148,7 +46214,7 @@ var Grid$1 = function Grid(_ref) {
           fill: "none",
           style: _extends({
             stroke: themeCSS.axis.stroke
-          }, GRID_STYLES)
+          }, LINE_STYLES)
         }, "web-" + i), jsxRuntime.jsx("text", {
           x: 0,
           y: levelRadius,
@@ -46158,11 +46224,40 @@ var Grid$1 = function Grid(_ref) {
           textAnchor: "middle",
           children: tickFormat(chart.y.ticks[i].value)
         })]
-      });
+      }, "grid-level-" + i);
     })
   });
 };
 
+var getRadarTooltipData = function getRadarTooltipData(_ref) {
+  var data = _ref.data,
+    event$1 = _ref.event,
+    totalDataPoints = _ref.totalDataPoints,
+    centerX = _ref.centerX,
+    centerY = _ref.centerY;
+  var point = event.localPoint(event$1) || {
+    x: 0,
+    y: 0
+  };
+  if (!point) return;
+  var mouseX = point.x - centerX;
+  var mouseY = point.y - centerY;
+  var mouseAngle = Math.atan2(mouseX, mouseY);
+  if (mouseAngle < 0) {
+    mouseAngle += 2 * Math.PI;
+  }
+  var step = Math.PI * 2 / totalDataPoints;
+  var dataPointIndex = Math.round(mouseAngle / step) % totalDataPoints;
+  dataPointIndex = (dataPointIndex - 1 + totalDataPoints) % totalDataPoints;
+  var tooltipData = data[dataPointIndex] || null;
+  var angle = (dataPointIndex + 1) * step;
+  return {
+    tooltipData: tooltipData,
+    dataPointIndex: dataPointIndex,
+    angle: angle
+  };
+};
+
 var WIDTH_MULTIPLIER_TO_SCROLL = 1.2;
 var LEGEND_PADDING = 40;
 var RadarChart$2 = function RadarChart(_ref) {
@@ -46171,6 +46266,15 @@ var RadarChart$2 = function RadarChart(_ref) {
     height = _ref.height,
     options = _ref.options,
     theme = _ref.theme;
+  var _useTooltip = useTooltip$1(),
+    tooltipOpen = _useTooltip.tooltipOpen,
+    _useTooltip$tooltipLe = _useTooltip.tooltipLeft,
+    tooltipLeft = _useTooltip$tooltipLe === void 0 ? 0 : _useTooltip$tooltipLe,
+    _useTooltip$tooltipTo = _useTooltip.tooltipTop,
+    tooltipTop = _useTooltip$tooltipTo === void 0 ? 0 : _useTooltip$tooltipTo,
+    tooltipData = _useTooltip.tooltipData,
+    hideTooltip = _useTooltip.hideTooltip,
+    showTooltip = _useTooltip.showTooltip;
   var ref = React.useRef(null);
   var _useState = React.useState(0),
     groupWidth = _useState[0],
@@ -46180,13 +46284,17 @@ var RadarChart$2 = function RadarChart(_ref) {
     })),
     visibleYKeys = _useState2[0],
     setVisibleYKeys = _useState2[1];
+  var _useState3 = React.useState(),
+    hoveredDataPointIndex = _useState3[0],
+    setHoveredDataPointIndex = _useState3[1];
   var themeCSS = React.useMemo(function () {
-    return getChartThemeCSS(theme);
+    var css = getChartThemeCSS(theme);
+    return css;
   }, [theme]);
   var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null);
   var innerWidth = width - margin.left - margin.right - (options.showLegend ? LEGEND_PADDING : 0);
   var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? LEGEND_PADDING : 0);
-  var radius = Math.min(innerWidth, innerHeight) / 2;
+  var radius = Math.min(innerWidth, innerHeight) / 2 * 0.93;
   React.useEffect(function () {
     var _ref$current;
     setVisibleYKeys(chart.lines.map(function (legendItem) {
@@ -46197,16 +46305,41 @@ var RadarChart$2 = function RadarChart(_ref) {
       setVisibleYKeys([]);
     };
   }, [chart.lines]);
+  var centerX = (groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width) / 2;
+  var centerY = height / 2 - margin.top * 2;
+  var handleMouseMove = React.useCallback(function (event) {
+    var radarTooltipData = getRadarTooltipData({
+      data: chart.data,
+      event: event,
+      totalDataPoints: chart.data.length,
+      centerX: centerX,
+      centerY: centerY
+    });
+    if (radarTooltipData) {
+      setHoveredDataPointIndex(radarTooltipData.dataPointIndex);
+      showTooltip({
+        tooltipLeft: event.pageX,
+        tooltipTop: event.pageY,
+        tooltipData: radarTooltipData.tooltipData
+      });
+    }
+  }, [showTooltip, chart.data, centerX, centerY]);
+  var handleMouseLeave = React.useCallback(function () {
+    hideTooltip();
+    setHoveredDataPointIndex(-1);
+  }, [hideTooltip]);
   if (width < 10) return null;
   return jsxRuntime.jsxs(React.Fragment, {
     children: [jsxRuntime.jsx(ChartWrapper$1, {
       width: groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width,
       height: height,
       showLegend: options.showLegend,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
       children: jsxRuntime.jsxs(group.Group, {
         innerRef: ref,
-        top: height / 2 - margin.top * 2,
-        left: (groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width) / 2,
+        top: centerY,
+        left: centerX,
         children: [jsxRuntime.jsx(MiddleLine, {
           chart: chart,
           radius: radius,
@@ -46219,7 +46352,9 @@ var RadarChart$2 = function RadarChart(_ref) {
         }), jsxRuntime.jsx(Polygons, {
           chart: chart,
           radius: radius,
-          visibleYKeys: visibleYKeys
+          visibleYKeys: visibleYKeys,
+          tooltipData: tooltipData,
+          hoveredDataPointIndex: hoveredDataPointIndex
         })]
       })
     }), options.showLegend && jsxRuntime.jsx(Legend$1, {
@@ -46231,6 +46366,21 @@ var RadarChart$2 = function RadarChart(_ref) {
       setVisibleYKeys: setVisibleYKeys,
       keys: chart.keys,
       marginLeft: margin.left - margin.leftTitleOffset
+    }), tooltipOpen && tooltipData && chart.x.key && jsxRuntime.jsx(Tooltip$1, {
+      items: [{
+        legendItems: chart.lines,
+        visibleYKeys: visibleYKeys,
+        conditionalFormattingRules: []
+      }],
+      tooltipData: tooltipData,
+      tooltipLeft: tooltipLeft,
+      tooltipTop: tooltipTop,
+      xKey: chart.x.key,
+      keys: chart.keys,
+      yKeys: chart.y.keys,
+      showRoundedTotal: options.showRoundedTotal,
+      theme: themeCSS.popoverMenus,
+      shouldShowColorLegend: false
     })]
   });
 };
@@ -52566,7 +52716,7 @@ var getScaleAndTicks$2 = function getScaleAndTicks(_ref) {
   var maxY = y.max || 0;
   var minY = Math.min(y.min || 0, 0);
   var yTickInterval = getNiceInterval$2((maxY - minY) / (tickCountYAxis - 1));
-  for (var i = 0; i <= tickCountYAxis; i++) {
+  for (var i = 0; i <= Math.ceil(maxY / yTickInterval); i++) {
     var _value = yTickInterval * i;
     var formattedValue = formattingFunctionY(_value, nullValue);
     yTicks.push({