@vizzly/dashboard 0.14.4-dev-10397d77eda0887a2486552a23d06fbce1a8e6d0 → 0.14.4-dev-12c764e26a853f4862d2a960cce54b033696df5a

package/dist/dashboard.esm.js

@@ -28,13 +28,13 @@ import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/elemen
 import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { ParentSize } from '@visx/responsive';
-import { Annotation, AnnotationConnector, AnnotationLabel, DataContext, buildChartTheme, lightTheme, XYChart, Grid as Grid$1, Axis, AreaSeries, AreaStack, BarGroup, BarSeries, BarStack, GlyphSeries, LineSeries, Tooltip as Tooltip$3 } from '@visx/xychart';
+import { Annotation, AnnotationConnector, AnnotationLabel, DataContext, buildChartTheme, lightTheme, XYChart, Grid as Grid$2, Axis, AreaSeries, AreaStack, BarGroup, BarSeries, BarStack, GlyphSeries, LineSeries, Tooltip as Tooltip$3 } from '@visx/xychart';
 import { LinearGradient } from '@visx/gradient';
 import { LegendItem as LegendItem$1, LegendLabel } from '@visx/legend';
 import { scaleOrdinal, scaleQuantize, scalePoint, scaleTime, scaleLinear, scaleBand } from '@visx/scale';
 import Ordinal from '@visx/legend/lib/legends/Ordinal';
 import { curveNatural, curveMonotoneX, curveMonotoneY, curveLinear, curveStep, curveStepBefore, curveStepAfter } from '@visx/curve';
-import { Line as Line$1, LinePath, BarGroup as BarGroup$1, BarStack as BarStack$1, AreaStack as AreaStack$1, AreaClosed } from '@visx/shape';
+import { Line as Line$1, LinePath, BarGroup as BarGroup$1, BarStack as BarStack$1, AreaStack as AreaStack$1, AreaClosed, LineRadial } from '@visx/shape';
 import { Mercator, Graticule } from '@visx/geo';
 import { feature } from 'topojson-client';
 import ParentSize$1 from '@visx/responsive/lib/components/ParentSize';
@@ -54,8 +54,7 @@ import { bisector } from '@visx/vendor/d3-array';
 import { AxisBottom as AxisBottom$1, AxisLeft as AxisLeft$1 } from '@visx/axis';
 import { Text } from '@visx/text';
 import { GridRows as GridRows$1 } from '@visx/grid';
-import '@visx/point';
-import { RadarChart as RadarChart$4 } from './charts/src/v2/components/RadarChart';
+import { Point } from '@visx/point';
 import VisibilitySensor from 'react-visibility-sensor';
 import ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -33010,7 +33009,7 @@ var VizzlyXYChart = function VizzlyXYChart(props) {
       onPointerUp: function onPointerUp(params) {
         return props == null ? void 0 : props.onClick(nearestDatum, nearestTooltipDatums, params);
       },
-      children: [jsx(Grid$1, {
+      children: [jsx(Grid$2, {
         columns: horizontal,
         rows: !horizontal,
         stroke: "black",
@@ -41592,7 +41591,7 @@ var VizzlyBubbleChart = function VizzlyBubbleChart(props) {
       onPointerUp: function onPointerUp(params) {
         return props == null ? void 0 : props.onClick(nearestDatum, nearestTooltipDatums, params);
       },
-      children: [jsx(Grid$1, {
+      children: [jsx(Grid$2, {
         columns: horizontal,
         rows: !horizontal,
         stroke: "black",
@@ -44137,6 +44136,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 = 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 jsx(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
+      });
+    })
+  });
+};
+var SinglePolygon = function SinglePolygon(_ref2) {
+  var isVisible = _ref2.isVisible,
+    polygonPoints = _ref2.polygonPoints,
+    colors = _ref2.colors;
+  return jsxs(Fragment$1, {
+    children: [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 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 = useRef([]);
+  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
+  });
+  var categoryValues = chart.x.ticks.map(function (tick) {
+    var _tick$formattedValue;
+    return (_tick$formattedValue = tick.formattedValue) != null ? _tick$formattedValue : tick.value;
+  });
+  useEffect(function () {
+    var newWidths = textRefs.current.map(function (ref) {
+      return ref ? ref.getComputedTextLength() : 0;
+    });
+    setTextWidths(newWidths);
+  }, [categoryValues]);
+  points.push(points.shift());
+  return jsx(Fragment$1, {
+    children: [].concat(new Array(chart.x.ticks.length)).map(function (_, i) {
+      var xOffset = points[i].x >= 0 ? textWidths[i] / 2 : -(textWidths[i] / 2);
+      return jsxs(Fragment$1, {
+        children: [jsx(Line$1, {
+          from: zeroPoint,
+          to: points[i],
+          stroke: themeCSS.axis.stroke
+        }, "radar-line-" + i), show && 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 = scaleLinear({
+    range: [0, Math.PI * 2],
+    domain: [DEGREES, 0]
+  });
+  var webs = genAngles(chart.data.length, DEGREES);
+  var levels = chart.y.ticks.length;
+  var tickFormat = 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 jsx(Fragment$1, {
+    children: [].concat(new Array(levels)).map(function (_, i) {
+      var levelRadius = chart.y.ticks[i].value / chartValue * radius;
+      return jsxs(Fragment$1, {
+        children: [jsx(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), 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 = useRef(null);
+  var _useState = useState(0),
+    groupWidth = _useState[0],
+    setGroupWidth = _useState[1];
+  var _useState2 = useState(chart.lines.map(function (legendItem) {
+      return legendItem.yKey;
+    })),
+    visibleYKeys = _useState2[0],
+    setVisibleYKeys = _useState2[1];
+  var themeCSS = 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;
+  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 jsxs(Fragment, {
+    children: [jsx(ChartWrapper$1, {
+      width: groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width,
+      height: height,
+      showLegend: options.showLegend,
+      children: jsxs(Group$2, {
+        innerRef: ref,
+        top: height / 2 - margin.top * 2,
+        left: (groupWidth > width ? width * WIDTH_MULTIPLIER_TO_SCROLL : width) / 2,
+        children: [jsx(MiddleLine, {
+          chart: chart,
+          radius: radius,
+          themeCSS: themeCSS,
+          show: options.axis.showXAxisLabels
+        }), jsx(Grid$1, {
+          chart: chart,
+          radius: radius,
+          themeCSS: themeCSS
+        }), jsx(Polygons, {
+          chart: chart,
+          radius: radius,
+          visibleYKeys: visibleYKeys
+        })]
+      })
+    }), options.showLegend && 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,
@@ -50603,7 +50873,7 @@ var RadarChartView = function RadarChartView(props) {
           }),
           children: function children(parent) {
             if (chartRepresentation.data.length === 0) return jsx(LoadingComponent, {});
-            return jsx(RadarChart$4, {
+            return jsx(RadarChart$2, {
               width: parent.width,
               height: parent.height,
               options: {
@@ -50626,7 +50896,7 @@ var RadarChartView = function RadarChartView(props) {
 };
 var RadarChartView$1 = /*#__PURE__*/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,
@@ -51171,7 +51441,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsx(RadarChart$2, {
+      children: jsx(RadarChart$3, {
         id: props.id,
         dataSet: dataSet,
         setLocalFilters: props.setLocalFilters,
@@ -67532,7 +67802,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'
@@ -69475,7 +69745,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;
@@ -72383,6 +72653,7 @@ var index = {
   displayPositions: displayPositions,
   DataSetField: DataSetField
 };
+var VIRDIS_COLOR_PALETTE = ["#440154FF", "#414487FF", "#2A788EFF", "#22A884FF", "#7AD151FF", "#FDE725FF"];
 
 export default index;
-export { Dashboard$2 as Dashboard, DataSetField, Editor$1 as Editor, NewVizzlyImplementation, VizzlyState, VizzlyTheming, displayPositions, useVizzly, vizzlyState };
+export { Dashboard$2 as Dashboard, DataSetField, Editor$1 as Editor, NewVizzlyImplementation, VIRDIS_COLOR_PALETTE, VizzlyState, VizzlyTheming, displayPositions, useVizzly, vizzlyState };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.14.4-dev-10397d77eda0887a2486552a23d06fbce1a8e6d0",
+  "version": "0.14.4-dev-12c764e26a853f4862d2a960cce54b033696df5a",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",