@vizzly/dashboard 0.14.4-dev-bb1215ca6cb16d6182d2617660ee9c9be91b265f → 0.14.4-dev-f81c05d870985862e147c5e214f0dc91eb44478a

package/dist/dashboard.esm.js

@@ -34,7 +34,7 @@ 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 } from '@visx/shape';
+import { Line as Line$1, LinePath, BarGroup as BarGroup$1, BarStack as BarStack$1, AreaStack as AreaStack$1, AreaClosed } from '@visx/shape';
 import { Mercator, Graticule } from '@visx/geo';
 import { feature } from 'topojson-client';
 import ParentSize$1 from '@visx/responsive/lib/components/ParentSize';
@@ -55,7 +55,6 @@ 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 { AreaChartV2 as AreaChartV2$1 } from './charts/src/v2';
 import VisibilitySensor from 'react-visibility-sensor';
 import ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -43379,6 +43378,432 @@ var Bar = function Bar(props) {
   }, props.key);
 };
 
+var useableId = function useableId(key, prefix) {
+  var newKey = key.toLowerCase()
+  // Remove characters that aren't letters, digits, underscores, or spaces
+  .replace(/[^\w\s-]+/g, '')
+  // Replace whitespace with hyphens
+  .replace(/\s+/g, '-')
+  // Remove leading or trailing hyphens
+  .replace(/^-+|-+$/g, '');
+  return prefix + '-' + newKey;
+};
+
+function useVisibleYKeys(areas) {
+  var _useState = useState(areas.map(function (legendItem) {
+      return legendItem.yKey;
+    })),
+    visibleYKeysState = _useState[0],
+    setVisibleYKeys = _useState[1];
+  useEffect(function () {
+    setVisibleYKeys(areas.map(function (legendItem) {
+      return legendItem.yKey;
+    }));
+    return function () {
+      setVisibleYKeys([]);
+    };
+  }, [areas]);
+  return {
+    visibleYKeys: visibleYKeysState,
+    setVisibleYKeys: setVisibleYKeys
+  };
+}
+
+var thresholdId$1 = function thresholdId(args, idPrefix, position, uniqueId) {
+  var rawIdKey = args.yKey + "_" + args.value + "_" + args.operator;
+  return (position + "_" + idPrefix + "_" + uniqueId + "_" + btoa(rawIdKey)).replace(/=/g, '');
+};
+function buildClipPathId$1(rule, idPrefix, uniqueId) {
+  var isGreater = rule.operator === '>=';
+  var clipPathId = isGreater ? thresholdId$1(rule, idPrefix, 'above', uniqueId) : thresholdId$1(rule, idPrefix, 'below', uniqueId);
+  return clipPathId;
+}
+function getRule(rules, yKey) {
+  return rules.filter(function (threshold) {
+    return threshold.yKey === yKey;
+  });
+}
+
+var ThresholdArea = function ThresholdArea(props) {
+  var chartHeight = props.height - props.margin.top;
+  return jsxs(Fragment, {
+    children: [jsx("g", {
+      transform: "translate(50, 0)",
+      children: props.rules.map(function (thresh, index) {
+        var _props$theme$stroke, _props$theme;
+        var thresholdYCoord = props.yScale(thresh.value);
+        return jsx("g", {
+          children: jsx("line", {
+            x1: 0,
+            y1: thresholdYCoord,
+            x2: props.width - props.margin.right - props.margin.left,
+            y2: thresholdYCoord,
+            stroke: (_props$theme$stroke = (_props$theme = props.theme) == null ? void 0 : _props$theme.stroke) != null ? _props$theme$stroke : '#F4F4F4',
+            strokeWidth: "1",
+            fill: "transparent",
+            "data-themeapi": "charts.threshold.stroke"
+          })
+        }, "threshold-" + index);
+      })
+    }), jsx("defs", {
+      children: props.rules.map(function (thresh, index) {
+        var thresholdYCoord = props.yScale(thresh.value);
+        if (!thresholdYCoord) return null;
+        return jsxs(Fragment, {
+          children: [jsx("clipPath", {
+            id: thresholdId$1(thresh, props.idPrefix, 'above', props.uniqueId),
+            children: jsx("rect", {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: thresholdYCoord
+            })
+          }), jsx("clipPath", {
+            id: thresholdId$1(thresh, props.idPrefix, 'intermediate', props.uniqueId),
+            children: jsx("rect", {
+              x: "0",
+              y: thresholdYCoord,
+              width: "100%",
+              height: 0
+            })
+          }), jsx("clipPath", {
+            id: thresholdId$1(thresh, props.idPrefix, 'below', props.uniqueId),
+            children: jsx("rect", {
+              x: "0",
+              y: thresholdYCoord,
+              width: "100%",
+              height: chartHeight - thresholdYCoord
+            })
+          })]
+        }, "threshold-" + index);
+      })
+    })]
+  });
+};
+
+var AREA_GRADIENT_ID_PREFIX = 'area-gradient';
+
+/* 
+  NOTES
+  ----- 
+  1. Control width of margins via props and truncate ticks using a fixed width
+  2. (somehow) prevent overlapping of ticks
+  3. Split out conditional formatting colours to show operator and values for each color
+  4. Add axis titles
+  5. Account for no xKey and showing 1 dot for a single yKey
+*/
+
+var AreaChart$5 = function AreaChart(_ref) {
+  var _theme$axis;
+  var chart = _ref.chart,
+    options = _ref.options,
+    theme = _ref.theme,
+    width = _ref.width,
+    height = _ref.height,
+    uniqueId = _ref.uniqueId;
+  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,
+    _useTooltip$lineLeft = _useTooltip.lineLeft,
+    lineLeft = _useTooltip$lineLeft === void 0 ? 0 : _useTooltip$lineLeft,
+    tooltipData = _useTooltip.tooltipData,
+    hideTooltip = _useTooltip.hideTooltip,
+    showTooltip = _useTooltip.showTooltip;
+  var margin = buildMargin(chart.y.ticks, options.axis.showYAxisLabels, chart.y.title != null, chart.x.title != null);
+  var _useVisibleYKeys = useVisibleYKeys(chart.areas),
+    visibleYKeys = _useVisibleYKeys.visibleYKeys,
+    setVisibleYKeys = _useVisibleYKeys.setVisibleYKeys;
+  var innerWidth = width - margin.left - margin.right;
+  var innerHeight = height - margin.top - margin.bottom - (options.showLegend ? 40 : 0);
+  var xKey = chart.x.key;
+  var xScaleKey = chart.x.scale.key;
+  var xScaleDataType = chart.x.scale.dataType;
+  var themeCSS = useMemo(function () {
+    return getChartThemeCSS(theme);
+  }, [theme]);
+  var xScale = useMemo(function () {
+    if (xScaleDataType === 'string') {
+      return scalePoint({
+        range: [0, innerWidth],
+        domain: xScaleKey ? [].concat(chart.data.map(function (d) {
+          return d[xScaleKey] && d[xScaleKey].value !== null ? String(d[xScaleKey].value) : '';
+        })) : []
+      });
+    }
+    if (xScaleDataType === 'date_time') {
+      return scaleTime({
+        range: [0, innerWidth],
+        domain: chart.x.scale.ordering === 'asc' ? [chart.x.scale.min, chart.x.scale.max] : [chart.x.scale.max, chart.x.scale.min]
+      });
+    }
+    if (xScaleDataType === 'number') {
+      return scaleLinear({
+        range: [0, innerWidth],
+        domain: chart.x.scale.ordering === 'asc' ? [chart.x.scale.min, chart.x.scale.max] : [chart.x.scale.max, chart.x.scale.min],
+        nice: true
+      });
+    }
+    return null;
+  }, [innerWidth, chart.x, chart.data]);
+  var _yScale = useMemo(function () {
+    return scaleLinear({
+      range: [innerHeight, 0],
+      domain: chart.y.scale.ordering === 'asc' ? [chart.y.scale.min, chart.y.scale.max] : [chart.y.scale.max, chart.y.scale.min],
+      nice: true
+    });
+  }, [innerHeight, chart.y.scale]);
+  var dataFlattened = useFlattenedData(xScaleKey, xScaleDataType, chart);
+  var handleMouseMove = useCallback(function (event) {
+    if (!xKey || !xScaleKey || xScale === null) return;
+    var tooltipData = getTooltipData({
+      data: chart.data,
+      event: event,
+      margin: margin,
+      xScaleKey: xScaleKey,
+      xScaleDataType: xScaleDataType,
+      xOrdering: chart.x.scale.ordering,
+      xScale: xScale,
+      chartType: 'lines'
+    });
+    showTooltip({
+      lineLeft: tooltipData == null ? void 0 : tooltipData.lineLeft,
+      tooltipLeft: event.pageX,
+      tooltipTop: event.pageY,
+      tooltipData: tooltipData == null ? void 0 : tooltipData.tooltipData
+    });
+  }, [showTooltip, xScale, margin, xKey, xScaleKey, xScaleDataType, chart.x.scale.ordering, chart.data]);
+  var handleMouseLeave = useCallback(function () {
+    hideTooltip();
+  }, [hideTooltip]);
+  var areaCurve = useCallback(function () {
+    var _options$curve;
+    var curveMap = {
+      natural: curveMonotoneX,
+      step: curveStep,
+      straight: curveLinear
+    };
+    return curveMap[(_options$curve = options.curve) != null ? _options$curve : 'monotoneX'];
+  }, [options.curve]);
+  if (width === 0 || height === 0 || xScale === null) return jsx(React__default.Fragment, {});
+  var yTickValues = chart.y.ticks.map(function (tick) {
+    return Number(tick.value);
+  });
+  return jsxs(React__default.Fragment, {
+    children: [jsxs(ChartWrapper$1, {
+      width: width,
+      height: height,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      showLegend: options.showLegend,
+      children: [jsxs(Group$2, {
+        left: margin.left,
+        top: margin.top,
+        children: [jsx(GridRows, {
+          ticks: yTickValues,
+          yScale: _yScale,
+          width: innerWidth,
+          height: innerHeight,
+          removeStroke: options.removeStroke,
+          themeCSS: themeCSS
+        }), jsx(AxisBottom, {
+          x: chart.x,
+          margin: margin,
+          themeCSS: themeCSS,
+          show: options.axis.showXAxisLabels,
+          removeStroke: options.removeStroke,
+          xScaleDataType: xScaleDataType,
+          xScale: xScale,
+          height: innerHeight
+        }), jsx(AxisLeft, {
+          show: options.axis.showYAxisLabels,
+          y: chart.y,
+          margin: margin,
+          themeCSS: themeCSS,
+          yScale: _yScale,
+          ticks: yTickValues,
+          stroke: theme == null || (_theme$axis = theme.axis) == null ? void 0 : _theme$axis.stroke
+        }), jsxs(Group$2, {
+          children: [chart.conditionalFormattingRules && chart.conditionalFormattingRules.length > 0 && jsx(ThresholdArea, {
+            rules: chart.conditionalFormattingRules,
+            height: height,
+            margin: margin,
+            idPrefix: AREA_GRADIENT_ID_PREFIX,
+            theme: theme == null ? void 0 : theme.threshold,
+            uniqueId: uniqueId,
+            yScale: _yScale,
+            width: width
+          }), chart.y.keys.map(function (yKey) {
+            var style = chart.areas.find(function (area) {
+              return area.yKey === yKey;
+            });
+            return jsxs(Fragment, {
+              children: [jsx(LinearGradient, {
+                id: useableId(yKey, AREA_GRADIENT_ID_PREFIX),
+                from: style == null ? void 0 : style.color,
+                to: style == null ? void 0 : style.color,
+                fromOpacity: style == null ? void 0 : style.style.fromOpacity,
+                toOpacity: style == null ? void 0 : style.style.toOpacity
+              }), getRule(chart.conditionalFormattingRules, yKey).map(function (areaThreshold, thresholdIndex) {
+                return jsx(LinearGradient, {
+                  id: useableId(yKey + "-" + thresholdIndex, AREA_GRADIENT_ID_PREFIX),
+                  from: areaThreshold == null ? void 0 : areaThreshold.color,
+                  to: areaThreshold == null ? void 0 : areaThreshold.color,
+                  fromOpacity: style == null ? void 0 : style.style.fromOpacity,
+                  toOpacity: style == null ? void 0 : style.style.toOpacity,
+                  clipPath: "url(#" + buildClipPathId$1(areaThreshold, AREA_GRADIENT_ID_PREFIX, uniqueId) + ")"
+                }, yKey + "-" + AREA_GRADIENT_ID_PREFIX + "_" + thresholdIndex);
+              })]
+            }, yKey + "-" + AREA_GRADIENT_ID_PREFIX);
+          }), options.stacked && jsx(AreaStack$1, {
+            keys: chart.y.keys,
+            data: dataFlattened,
+            x: function x(d) {
+              var _xScale;
+              // @ts-ignore
+              var xValue = d.data[xScaleKey];
+              var xValueAdjusted = xScaleDataType === 'date_time' ? new Date(xValue) : xScaleDataType === 'number' ? Number(xValue) : String(xValue);
+              // @ts-ignore
+              return (_xScale = xScale(xValueAdjusted)) != null ? _xScale : 0;
+            },
+            y0: function y0(d) {
+              return _yScale(d[0]);
+            },
+            y1: function y1(d) {
+              return _yScale(d[1]);
+            },
+            curve: areaCurve(),
+            children: function children(_ref2) {
+              var stacks = _ref2.stacks,
+                path = _ref2.path;
+              return stacks.map(function (stack) {
+                return jsx(Fragment, {
+                  children: jsx("path", {
+                    d: path(stack) || '',
+                    fill: "url(#" + useableId(stack.key, AREA_GRADIENT_ID_PREFIX) + ")"
+                  })
+                }, "stack-" + stack.index + "-" + stack.key);
+              });
+            }
+          }), !options.stacked && chart.y.keys.map(function (yKey) {
+            if (xScaleKey === null) return null;
+            return jsxs(Fragment, {
+              children: [jsx(Area, {
+                data: dataFlattened,
+                yScale: _yScale,
+                xScaleDataType: xScaleDataType,
+                xKey: xScaleKey,
+                xScale: xScale,
+                yKey: yKey,
+                curve: areaCurve()
+              }), getRule(chart.conditionalFormattingRules, yKey).map(function (areaThreshold, thresholdIndex) {
+                var id = useableId(yKey + "-" + thresholdIndex, AREA_GRADIENT_ID_PREFIX);
+                return jsx(Area, {
+                  data: dataFlattened,
+                  yScale: _yScale,
+                  xScaleDataType: xScaleDataType,
+                  xKey: xScaleKey,
+                  xScale: xScale,
+                  yKey: yKey,
+                  curve: areaCurve(),
+                  stroke: "url(#" + id + ")",
+                  clipPath: "url(#" + buildClipPathId$1(areaThreshold, AREA_GRADIENT_ID_PREFIX, uniqueId) + ")",
+                  fill: "url(#" + id + ")"
+                }, yKey + "-" + AREA_GRADIENT_ID_PREFIX + "-" + thresholdIndex);
+              })]
+            }, yKey + "-" + AREA_GRADIENT_ID_PREFIX);
+          })]
+        })]
+      }), tooltipData && jsxs("g", {
+        children: [jsx(Line, {
+          x: lineLeft,
+          margin: margin,
+          height: innerHeight
+        }), !options.stacked && jsx(CrosshairCircle, {
+          yKeys: chart.y.keys,
+          xKey: xScaleKey,
+          dataType: xScaleDataType,
+          legendItems: chart.areas,
+          yScale: function yScale(yKey) {
+            return _yScale(tooltipData[yKey].value !== null ? tooltipData[yKey].value : 0);
+          }
+          // @ts-ignore
+          ,
+          xScale: xScale,
+          margin: margin,
+          tooltipData: tooltipData,
+          conditionalFormattingRules: chart.conditionalFormattingRules,
+          visibleYKeys: visibleYKeys
+        })]
+      }), jsx(GoalLines$1, {
+        goalLines: chart.goalLines,
+        y: function y(d) {
+          return _yScale(d);
+        },
+        margin: margin,
+        width: innerWidth
+      })]
+    }), options.showLegend && jsx(Legend$1, {
+      legendItems: chart.areas,
+      visibleYKeys: visibleYKeys,
+      setVisibleYKeys: setVisibleYKeys,
+      keys: chart.keys,
+      conditionalFormattingRules: chart.conditionalFormattingRules,
+      marginLeft: margin.left - margin.leftTitleOffset
+    }), tooltipOpen && tooltipData && xKey && jsx(Tooltip$1, {
+      tooltipData: tooltipData,
+      tooltipLeft: tooltipLeft,
+      tooltipTop: tooltipTop,
+      xKey: xKey,
+      keys: chart.keys,
+      visibleYKeys: visibleYKeys,
+      yKeys: chart.y.keys,
+      legendItems: chart.areas,
+      showRoundedTotal: options.showRoundedTotal,
+      conditionalFormattingRules: chart.conditionalFormattingRules,
+      theme: themeCSS.popoverMenus
+    })]
+  });
+};
+function Area(_ref3) {
+  var data = _ref3.data,
+    xScaleDataType = _ref3.xScaleDataType,
+    xScale = _ref3.xScale,
+    yScale = _ref3.yScale,
+    yKey = _ref3.yKey,
+    curve = _ref3.curve,
+    clipPath = _ref3.clipPath,
+    xKey = _ref3.xKey,
+    fill = _ref3.fill,
+    stroke = _ref3.stroke;
+  return jsx(AreaClosed, {
+    data: data,
+    x: function x(d) {
+      var _xScale2;
+      var xValue = d[xKey];
+      var xValueAdjusted = xScaleDataType === 'date_time' ? new Date(xValue) : xScaleDataType === 'number' ? Number(xValue) : String(xValue);
+      // @ts-ignore
+      return (_xScale2 = xScale(xValueAdjusted)) != null ? _xScale2 : 0;
+    },
+    y: function y(d) {
+      var _yScale2;
+      var value = d[yKey];
+      return value !== null ? (_yScale2 = yScale(value)) != null ? _yScale2 : 0 : 0;
+    },
+    defined: function defined(d) {
+      return d !== null && d[yKey] !== null;
+    },
+    yScale: yScale,
+    strokeWidth: 1,
+    stroke: stroke != null ? stroke : "url(#" + useableId(yKey, AREA_GRADIENT_ID_PREFIX) + ")",
+    fill: fill != null ? fill : "url(#" + useableId(yKey, AREA_GRADIENT_ID_PREFIX) + ")",
+    curve: curve,
+    clipPath: clipPath
+  });
+}
+
 function getStyleDefinition(_ref) {
   var colors = _ref.colors,
     yKeys = _ref.yKeys,
@@ -49353,7 +49778,7 @@ var AreaChartV2View = function AreaChartV2View(props) {
           children: function children(parent) {
             var _props$attributes$vie2, _props$attributes$sta;
             if (chartRepresentation.areas.length === 0) return jsx(LoadingComponent, {});
-            return jsx(AreaChartV2$1, {
+            return jsx(AreaChart$5, {
               width: parent.width,
               height: parent.height,
               chart: adjustTicks(chartRepresentation, parent.width, parent.height),
@@ -66087,7 +66512,7 @@ var View$3 = /*#__PURE__*/function () {
   };
   return View;
 }();
-var AreaChart$5 = /*#__PURE__*/function (_View2) {
+var AreaChart$6 = /*#__PURE__*/function (_View2) {
   function AreaChart(attributes) {
     return _View2.call(this, _extends({}, attributes, {
       type: 'areaChart'
@@ -68168,7 +68593,7 @@ VizzlyServices.Dashboard = Dashboard$1;
 VizzlyServices.Editor = Editor;
 VizzlyServices.Header = Header;
 VizzlyServices.Library = Library$1;
-VizzlyServices.AreaChart = AreaChart$5;
+VizzlyServices.AreaChart = AreaChart$6;
 VizzlyServices.LineChart = LineChart$6;
 VizzlyServices.BarChart = BarChart$6;
 VizzlyServices.PieChart = PieChart$4;

package/package.json

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