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

package/dist/dashboard.esm.js

@@ -44199,11 +44199,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) {
@@ -44223,7 +44224,7 @@ var GridRows = function GridRows(_ref) {
     strokeWidth: removeStroke ? 0 : 2,
     lineStyle: _extends({
       stroke: themeCSS.grid.stroke
-    }, GRID_STYLES)
+    }, LINE_STYLES)
   });
 };
 
@@ -46024,6 +46025,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 = 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 jsx(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 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;
 };
@@ -46053,7 +46106,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 = scaleLinear({
     range: [0, radius],
@@ -46066,16 +46121,26 @@ var Polygons = function Polygons(_ref) {
       return (_yScale = yScale(d)) != null ? _yScale : 0;
     }, yKey);
   });
-  return jsx(Fragment$1, {
-    children: polygonsPoints.map(function (polygonPoints) {
+  return jsxs(Fragment$1, {
+    children: [polygonsPoints.map(function (polygonPoints) {
       return 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 && 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) {
@@ -46102,15 +46167,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,
@@ -46120,7 +46176,6 @@ var MiddleLine = function MiddleLine(_ref) {
   var _useState = useState([]),
     textWidths = _useState[0],
     setTextWidths = _useState[1];
-  var points = genPoints(chart.x.ticks.length, radius);
   var zeroPoint = new Point({
     x: 0,
     y: 0
@@ -46129,22 +46184,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)
+      };
+    });
+  };
   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 jsx(Fragment$1, {
-    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 jsxs(Fragment$1, {
+      return jsxs(React__default.Fragment, {
         children: [jsx(Line$1, {
           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 && jsx("text", {
           ref: function ref(el) {
             return textRefs.current[i] = el;
@@ -46155,13 +46221,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)
     };
@@ -46193,9 +46259,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 jsx(Fragment$1, {
-    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 jsxs(Fragment$1, {
+      return jsxs(React__default.Fragment, {
         children: [jsx(LineRadial, {
           data: webs,
           angle: function angle(d) {
@@ -46206,7 +46272,7 @@ var Grid$1 = function Grid(_ref) {
           fill: "none",
           style: _extends({
             stroke: themeCSS.axis.stroke
-          }, GRID_STYLES)
+          }, LINE_STYLES)
         }, "web-" + i), jsx("text", {
           x: 0,
           y: levelRadius,
@@ -46216,11 +46282,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 = _ref.event,
+    totalDataPoints = _ref.totalDataPoints,
+    centerX = _ref.centerX,
+    centerY = _ref.centerY;
+  var point = localPoint(event) || {
+    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) {
@@ -46229,6 +46324,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 = useRef(null);
   var _useState = useState(0),
     groupWidth = _useState[0],
@@ -46238,13 +46342,17 @@ var RadarChart$2 = function RadarChart(_ref) {
     })),
     visibleYKeys = _useState2[0],
     setVisibleYKeys = _useState2[1];
+  var _useState3 = useState(),
+    hoveredDataPointIndex = _useState3[0],
+    setHoveredDataPointIndex = _useState3[1];
   var themeCSS = 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;
   useEffect(function () {
     var _ref$current;
     setVisibleYKeys(chart.lines.map(function (legendItem) {
@@ -46255,16 +46363,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 = 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 = useCallback(function () {
+    hideTooltip();
+    setHoveredDataPointIndex(-1);
+  }, [hideTooltip]);
   if (width < 10) return null;
   return jsxs(Fragment, {
     children: [jsx(ChartWrapper$1, {
       width: groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width,
       height: height,
       showLegend: options.showLegend,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
       children: jsxs(Group$2, {
         innerRef: ref,
-        top: height / 2 - margin.top * 2,
-        left: (groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width) / 2,
+        top: centerY,
+        left: centerX,
         children: [jsx(MiddleLine, {
           chart: chart,
           radius: radius,
@@ -46277,7 +46410,9 @@ var RadarChart$2 = function RadarChart(_ref) {
         }), jsx(Polygons, {
           chart: chart,
           radius: radius,
-          visibleYKeys: visibleYKeys
+          visibleYKeys: visibleYKeys,
+          tooltipData: tooltipData,
+          hoveredDataPointIndex: hoveredDataPointIndex
         })]
       })
     }), options.showLegend && jsx(Legend$1, {
@@ -46289,6 +46424,21 @@ var RadarChart$2 = function RadarChart(_ref) {
       setVisibleYKeys: setVisibleYKeys,
       keys: chart.keys,
       marginLeft: margin.left - margin.leftTitleOffset
+    }), tooltipOpen && tooltipData && chart.x.key && 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
     })]
   });
 };
@@ -52624,7 +52774,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({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.15.0-dev-307a9830cb4e82f036693ccfe2634f74381a2b72",
+  "version": "0.15.0-dev-d949562f7d69a747b6f32349c6a53a2dc3ed06f9",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",

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

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