@vizzly/dashboard 0.14.4-dev-393f477b6f997aed542a53b1fce003c259068613 → 0.14.4-dev-51267ad10bc9846a5c46942c25ada51ebac30d1a

package/dist/dashboard.cjs.development.js

@@ -63,8 +63,7 @@ var d3Array = require('@visx/vendor/d3-array');
 var axis = require('@visx/axis');
 var text$3 = require('@visx/text');
 var grid = require('@visx/grid');
-require('@visx/point');
-var RadarChart$4 = require('./charts/src/v2/components/RadarChart');
+var point = require('@visx/point');
 var VisibilitySensor = _interopDefault(require('react-visibility-sensor'));
 var ExcelJS = _interopDefault(require('exceljs'));
 var fileSaver = require('file-saver');
@@ -44079,6 +44078,277 @@ function Area(_ref3) {
   });
 }
 
+var getValue = function getValue(d, key) {
+  return d[key].value;
+};
+var genPolygonPoints = function genPolygonPoints(dataArray, scale, yKey) {
+  var step = Math.PI * 2 / dataArray.length;
+  var points = new Array(dataArray.length).fill({
+    x: 0,
+    y: 0
+  });
+  var pointString = new Array(dataArray.length + 1).fill('').reduce(function (res, _, i) {
+    if (i > dataArray.length) return res;
+    var xVal = scale(getValue(dataArray[i - 1], yKey)) * Math.sin(i * step);
+    var yVal = scale(getValue(dataArray[i - 1], yKey)) * Math.cos(i * step);
+    points[i - 1] = {
+      x: xVal,
+      y: yVal
+    };
+    res += xVal + "," + yVal + " ";
+    return res;
+  });
+  return {
+    points: points,
+    pointString: pointString,
+    yKey: yKey
+  };
+};
+var Polygons = function Polygons(_ref) {
+  var chart = _ref.chart,
+    radius = _ref.radius,
+    visibleYKeys = _ref.visibleYKeys;
+  var yKeys = chart.y.keys;
+  var yScale = scale.scaleLinear({
+    range: [0, radius],
+    domain: [0, chart.y.scale.max],
+    nice: true
+  });
+  var polygonsPoints = yKeys.map(function (yKey) {
+    return genPolygonPoints(chart.data, function (d) {
+      var _yScale;
+      return (_yScale = yScale(d)) != null ? _yScale : 0;
+    }, yKey);
+  });
+  return jsxRuntime.jsx(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
+      });
+    })
+  });
+};
+var SinglePolygon = function SinglePolygon(_ref2) {
+  var isVisible = _ref2.isVisible,
+    polygonPoints = _ref2.polygonPoints,
+    colors = _ref2.colors;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("polygon", {
+      visibility: isVisible ? 'visible' : 'hidden',
+      points: polygonPoints.pointString,
+      fill: colors,
+      fillOpacity: 0.3,
+      stroke: colors,
+      strokeWidth: 1
+    }), polygonPoints.points.map(function (point, i) {
+      return jsxRuntime.jsx("circle", {
+        visibility: isVisible ? 'visible' : 'hidden',
+        cx: point.x,
+        cy: point.y,
+        r: 4,
+        fill: colors
+      }, "radar-point-" + i);
+    })]
+  });
+};
+
+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,
+    themeCSS = _ref.themeCSS,
+    show = _ref.show;
+  var textRefs = React.useRef([]);
+  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
+  });
+  var categoryValues = chart.x.ticks.map(function (tick) {
+    var _tick$formattedValue;
+    return (_tick$formattedValue = tick.formattedValue) != null ? _tick$formattedValue : tick.value;
+  });
+  React.useEffect(function () {
+    var newWidths = textRefs.current.map(function (ref) {
+      return ref ? ref.getComputedTextLength() : 0;
+    });
+    setTextWidths(newWidths);
+  }, [categoryValues]);
+  points.push(points.shift());
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: [].concat(new Array(chart.x.ticks.length)).map(function (_, i) {
+      var xOffset = points[i].x >= 0 ? textWidths[i] / 2 : -(textWidths[i] / 2);
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(shape.Line, {
+          from: zeroPoint,
+          to: points[i],
+          stroke: themeCSS.axis.stroke
+        }, "radar-line-" + i), show && jsxRuntime.jsx("text", {
+          ref: function ref(el) {
+            return textRefs.current[i] = el;
+          },
+          x: points[i].x * 1.1 + xOffset,
+          y: points[i].y * 1.1,
+          style: _extends({}, themeCSS.labels, {
+            fontSize: 12
+          }),
+          textAnchor: "middle",
+          children: categoryValues[i]
+        })]
+      });
+    })
+  });
+};
+
+var genAngles = function genAngles(length, degrees) {
+  return [].concat(new Array(length + 1)).map(function (_, i) {
+    return {
+      angle: i * (degrees / length) + (length % 2 === 0 ? 0 : degrees / length / 2)
+    };
+  });
+};
+var Grid$1 = function Grid(_ref) {
+  var _chart$y$ticks$scaleV;
+  var chart = _ref.chart,
+    radius = _ref.radius,
+    themeCSS = _ref.themeCSS;
+  var DEGREES = 360;
+  var radialScale = scale.scaleLinear({
+    range: [0, Math.PI * 2],
+    domain: [DEGREES, 0]
+  });
+  var webs = genAngles(chart.data.length, DEGREES);
+  var levels = chart.y.ticks.length;
+  var tickFormat = React.useCallback(function (value) {
+    var item = chart.y.ticks.filter(function (tick) {
+      return tick.value === value;
+    })[0];
+    if (item) {
+      if (item.formattedValue) {
+        return item.formattedValue;
+      }
+      return item.value.toString();
+    }
+    return '';
+  }, [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) {
+      var levelRadius = chart.y.ticks[i].value / chartValue * radius;
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(shape.LineRadial, {
+          data: webs,
+          angle: function angle(d) {
+            var _radialScale;
+            return (_radialScale = radialScale(d.angle)) != null ? _radialScale : 0;
+          },
+          radius: levelRadius,
+          fill: "none",
+          style: {
+            stroke: themeCSS.axis.stroke,
+            strokeWidth: 2,
+            strokeOpacity: 0.8,
+            strokeLinecap: 'round'
+          }
+        }, "web-" + i), jsxRuntime.jsx("text", {
+          x: 0,
+          y: levelRadius,
+          style: _extends({}, themeCSS.labels, {
+            fontSize: 18
+          }),
+          textAnchor: "middle",
+          children: tickFormat(chart.y.ticks[i].value)
+        })]
+      });
+    })
+  });
+};
+
+var WIDTH_MULTIPLIER_TO_SCROLL = 1.2;
+var LEGEND_PADDING = 40;
+var RadarChart$2 = function RadarChart(_ref) {
+  var chart = _ref.chart,
+    width = _ref.width,
+    height = _ref.height,
+    options = _ref.options,
+    theme = _ref.theme;
+  var ref = React.useRef(null);
+  var _useState = React.useState(0),
+    groupWidth = _useState[0],
+    setGroupWidth = _useState[1];
+  var _useState2 = React.useState(chart.lines.map(function (legendItem) {
+      return legendItem.yKey;
+    })),
+    visibleYKeys = _useState2[0],
+    setVisibleYKeys = _useState2[1];
+  var themeCSS = React.useMemo(function () {
+    return getChartThemeCSS(theme);
+  }, [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;
+  React.useEffect(function () {
+    var _ref$current;
+    setVisibleYKeys(chart.lines.map(function (legendItem) {
+      return legendItem.yKey;
+    }));
+    if (ref.current) setGroupWidth(((_ref$current = ref.current) == null ? void 0 : _ref$current.getBBox().width) || 0);
+    return function () {
+      setVisibleYKeys([]);
+    };
+  }, [chart.lines]);
+  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,
+      children: jsxRuntime.jsxs(group.Group, {
+        innerRef: ref,
+        top: height / 2 - margin.top * 2,
+        left: (groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width) / 2,
+        children: [jsxRuntime.jsx(MiddleLine, {
+          chart: chart,
+          radius: radius,
+          themeCSS: themeCSS,
+          show: options.axis.showXAxisLabels
+        }), jsxRuntime.jsx(Grid$1, {
+          chart: chart,
+          radius: radius,
+          themeCSS: themeCSS
+        }), jsxRuntime.jsx(Polygons, {
+          chart: chart,
+          radius: radius,
+          visibleYKeys: visibleYKeys
+        })]
+      })
+    }), options.showLegend && jsxRuntime.jsx(Legend$1, {
+      legendItems: chart.lines,
+      visibleYKeys: visibleYKeys,
+      setVisibleYKeys: setVisibleYKeys,
+      keys: chart.keys,
+      conditionalFormattingRules: [],
+      marginLeft: margin.left - margin.leftTitleOffset
+    })]
+  });
+};
+
 function getStyleDefinition(_ref) {
   var colors = _ref.colors,
     yKeys = _ref.yKeys,
@@ -50545,7 +50815,7 @@ var RadarChartView = function RadarChartView(props) {
           }),
           children: function children(parent) {
             if (chartRepresentation.data.length === 0) return jsxRuntime.jsx(LoadingComponent, {});
-            return jsxRuntime.jsx(RadarChart$4.RadarChart, {
+            return jsxRuntime.jsx(RadarChart$2, {
               width: parent.width,
               height: parent.height,
               options: {
@@ -50568,7 +50838,7 @@ var RadarChartView = function RadarChartView(props) {
 };
 var RadarChartView$1 = /*#__PURE__*/React.memo(RadarChartView, shouldUpdate);
 
-var RadarChart$2 = function RadarChart(_ref) {
+var RadarChart$3 = function RadarChart(_ref) {
   var component = _ref.component,
     dataSet = _ref.dataSet,
     dashboardBehaviour = _ref.dashboardBehaviour,
@@ -51113,7 +51383,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsxRuntime.jsx(RadarChart$2, {
+      children: jsxRuntime.jsx(RadarChart$3, {
         id: props.id,
         dataSet: dataSet,
         setLocalFilters: props.setLocalFilters,
@@ -67474,7 +67744,7 @@ var WaterfallChart$4 = /*#__PURE__*/function (_View16) {
   };
   return WaterfallChart;
 }(View$3);
-var RadarChart$3 = /*#__PURE__*/function (_View17) {
+var RadarChart$4 = /*#__PURE__*/function (_View17) {
   function RadarChart(attributes) {
     return _View17.call(this, _extends({}, attributes, {
       type: 'radarChart'
@@ -69417,7 +69687,7 @@ VizzlyServices.Header = Header;
 VizzlyServices.Library = Library$1;
 VizzlyServices.AreaChart = AreaChart$6;
 VizzlyServices.LineChart = LineChart$6;
-VizzlyServices.RadarChart = RadarChart$3;
+VizzlyServices.RadarChart = RadarChart$4;
 VizzlyServices.BarChart = BarChart$6;
 VizzlyServices.PieChart = PieChart$4;
 VizzlyServices.ScatterChart = ScatterChart$4;