@vizzly/dashboard 0.14.4-dev-a92622560305a2aadfb851574db2d2f43a80cb14 → 0.14.4-dev-8beb4cd0b38350abdd05b93b66f2523ced40aa15

package/dist/dashboard.esm.js

@@ -48,7 +48,6 @@ import { useWindowWidth } from '@react-hook/window-size';
 import copy from 'copy-to-clipboard';
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
-import { BubbleChart as BubbleChart$3 } from './charts/src/BubbleChart';
 import { RectClipPath } from '@visx/clip-path';
 import { localPoint } from '@visx/event';
 import { bisector } from '@visx/vendor/d3-array';
@@ -9331,7 +9330,7 @@ var BubbleChart = function BubbleChart(config) {
 
 var attributesSchema$f = function attributesSchema(config) {
   return Joi.object(_extends({}, baseAttributesSchema(config.attributesSchemaOptions), timeDimensionQuerySchema(config.queryEngineConfig, config.attributesSchemaOptions), {
-    stacked: Joi.valid(true, false, '100%'),
+    stacked: Joi.valid(true, false),
     legend: Joi.valid(true, false),
     type: Joi.valid('barChartV2').required(),
     parameters: parametersSchema(config.queryEngineConfig, config.attributesSchemaOptions),
@@ -40784,6 +40783,259 @@ var IconText = function IconText(props) {
   });
 };
 
+var accessors$1 = function accessors(xAxisIsTime, xKey, yKey, horizontal) {
+  return {
+    xAccessor: function xAccessor(d) {
+      return d ? horizontal ? d[yKey] : xAxisIsTime ? new Date(d[xKey]) : d[xKey] : undefined;
+    },
+    yAccessor: function yAccessor(d) {
+      return d ? horizontal ? xAxisIsTime ? new Date(d[xKey]) : d[xKey] : d[yKey] : undefined;
+    }
+  };
+};
+var DEFAULT_Y_AXIS_LABEL_COUNT$1 = 5;
+var VizzlyBubbleChart = function VizzlyBubbleChart(props) {
+  var _props$height, _theme$axis$stroke, _theme$axis, _ref, _props$lines$data$len, _props$lines, _props$areas, _props$bars, _props$forceXAxisAsTi, _props$bars2, _props$lines2, _theme$grid$stroke, _theme$grid, _props$axisTitles, _props$axisTitles2, _props$axisTitles3, _props$axisTitles4, _props$bars3, _props$bars4, _props$bars5;
+  var height = adjustHeight((_props$height = props == null ? void 0 : props.height) != null ? _props$height : 300, props == null ? void 0 : props.legend);
+  var _props$approxYAxisLab = props.approxYAxisLabelCount,
+    approxYAxisLabelCount = _props$approxYAxisLab === void 0 ? 'auto' : _props$approxYAxisLab,
+    _props$approxXAxisLab = props.approxXAxisLabelCount,
+    approxXAxisLabelCount = _props$approxXAxisLab === void 0 ? 'auto' : _props$approxXAxisLab,
+    _props$removeStroke = props.removeStroke,
+    removeStroke = _props$removeStroke === void 0 ? false : _props$removeStroke,
+    _props$horizontal = props.horizontal,
+    horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
+    theme = props.theme,
+    x = props.x;
+  var xAxisIsTime = isXAxisTime(props.x, props.forceXAxisAsTime, props.bars, props.lines, props.areas);
+  var axisLabelStyles = function axisLabelStyles(horizontal, labelTheme) {
+    var _labelTheme$color, _labelTheme$fontSize, _labelTheme$fontWeigh, _labelTheme$fontFamil;
+    return {
+      fill: (_labelTheme$color = labelTheme == null ? void 0 : labelTheme.color) != null ? _labelTheme$color : 'rgba(0, 0, 0, 0.6)',
+      fontSize: (_labelTheme$fontSize = labelTheme == null ? void 0 : labelTheme.fontSize) != null ? _labelTheme$fontSize : 9,
+      fontWeight: (_labelTheme$fontWeigh = labelTheme == null ? void 0 : labelTheme.fontWeight) != null ? _labelTheme$fontWeigh : 700,
+      fontFamily: (_labelTheme$fontFamil = labelTheme == null ? void 0 : labelTheme.fontFamily) != null ? _labelTheme$fontFamil : DEFAULT_CHART_FONT,
+      textAnchor: horizontal ? 'end' : 'middle',
+      scaleToFit: 'shrink-only'
+    };
+  };
+  var _useXAxisLabelCount = useXAxisLabelCount(approxXAxisLabelCount, !(props != null && props.horizontal) && (props == null ? void 0 : props.forceXAxisAsTime)),
+    widthRef = _useXAxisLabelCount[0],
+    approximateXTickCount = _useXAxisLabelCount[1];
+  var _useState = useState(undefined),
+    nearestDatum = _useState[0];
+  var _useState2 = useState(undefined),
+    nearestTooltipDatums = _useState2[0];
+  var colors = getConcatenatedProperties(props, 'colors');
+  var customTheme = buildChartTheme(_extends({}, lightTheme, {
+    colors: colors,
+    tickLength: 0,
+    gridColor: '',
+    gridColorDark: ''
+  }));
+  var chartData = getConcatenatedProperties(props, 'data');
+  var axisStrokeColor = (_theme$axis$stroke = theme == null || (_theme$axis = theme.axis) == null ? void 0 : _theme$axis.stroke) != null ? _theme$axis$stroke : '#eaeaea';
+  var _getAxisType = getAxisType(approxXAxisLabelCount, approxYAxisLabelCount),
+    xAxisType = _getAxisType.xAxisType,
+    xAxisAttributes = _getAxisType.xAxisAttributes,
+    yAxisType = _getAxisType.yAxisType;
+  var numberOfXAxisPoints = (_ref = (_props$lines$data$len = props == null || (_props$lines = props.lines) == null ? void 0 : _props$lines.data.length) != null ? _props$lines$data$len : props == null || (_props$areas = props.areas) == null || (_props$areas = _props$areas.data) == null ? void 0 : _props$areas.length) != null ? _ref : (_props$bars = props.bars) == null ? void 0 : _props$bars.data.length;
+  var _useMinMaxValue = useMinMaxValue(props),
+    maxValue = _useMinMaxValue.maxValue,
+    minValue = _useMinMaxValue.minValue;
+  var leftWidth = getYAxisWidth(horizontal, (_props$forceXAxisAsTi = props.forceXAxisAsTime) != null ? _props$forceXAxisAsTi : false, props, theme, getConcatenatedProperties(props, 'data'), props.x);
+  var margin = props.sparkline ? NO_MARGIN(props.yAxisOrientation !== 'right') : getDefaultMargins(horizontal, props.yAxisOrientation !== 'right', xAxisType, props == null ? void 0 : props.axisTitles, leftWidth);
+  var getTrendLineStyle = function getTrendLineStyle(datumKey) {
+    if (props.trends) {
+      var _props$trends, _strokeDasharrayToBor, _indicatorProperties$, _indicatorProperties$2, _indicatorProperties$3, _indicatorProperties$4, _indicatorProperties$5, _indicatorProperties$6, _indicatorProperties$7, _indicatorProperties$8, _indicatorProperties$9;
+      var indicatorKeyIndex = (_props$trends = props.trends) == null ? void 0 : _props$trends.keys.indexOf(datumKey);
+      var indicatorProperties = props.trends;
+      return {
+        borderStyle: (_strokeDasharrayToBor = strokeDasharrayToBorderStyle((_indicatorProperties$ = indicatorProperties.strokeDasharray) == null ? void 0 : _indicatorProperties$[indicatorKeyIndex])) != null ? _strokeDasharrayToBor : 'dotted',
+        borderWidth: 0,
+        marginTop: (_indicatorProperties$2 = (_indicatorProperties$3 = indicatorProperties.strokeWidth) == null ? void 0 : _indicatorProperties$3[indicatorKeyIndex]) != null ? _indicatorProperties$2 : 2,
+        borderTopWidth: (_indicatorProperties$4 = (_indicatorProperties$5 = indicatorProperties.strokeWidth) == null ? void 0 : _indicatorProperties$5[indicatorKeyIndex]) != null ? _indicatorProperties$4 : 2,
+        borderColor: (_indicatorProperties$6 = (_indicatorProperties$7 = indicatorProperties.colors) == null ? void 0 : _indicatorProperties$7[indicatorKeyIndex]) != null ? _indicatorProperties$6 : '#1E1D2D',
+        opacity: (_indicatorProperties$8 = (_indicatorProperties$9 = indicatorProperties.opacity) == null ? void 0 : _indicatorProperties$9[indicatorKeyIndex]) != null ? _indicatorProperties$8 : 1
+      };
+    }
+    return undefined;
+  };
+  return jsxs("div", {
+    ref: widthRef,
+    style: {
+      position: 'relative',
+      height: height
+    },
+    className: "vizzly-xy-chart" + (props != null && (_props$bars2 = props.bars) != null && _props$bars2.funnelChart ? ' vizzly-xy-chart-funnel' : ''),
+    "data-testid": "vizzly-" + (props == null ? void 0 : props.uniqueId) + "-chart",
+    children: [jsxs(XYChart, {
+      theme: customTheme,
+      margin: margin,
+      height: height,
+      xScale: getScale('x', horizontal, xAxisIsTime, props == null || (_props$lines2 = props.lines) == null ? void 0 : _props$lines2.scatter, !!(props != null && props.lines) || !!(props != null && props.areas)),
+      yScale: getYScale(props == null ? void 0 : props.goalLine, maxValue, minValue, horizontal, xAxisIsTime),
+      horizontal: horizontal,
+      onPointerUp: function onPointerUp(params) {
+        return props == null ? void 0 : props.onClick(nearestDatum, nearestTooltipDatums, params);
+      },
+      children: [jsx(Grid$1, {
+        columns: horizontal,
+        rows: !horizontal,
+        stroke: "black",
+        strokeDasharray: "0.5 5",
+        strokeWidth: removeStroke ? 0 : 2,
+        lineStyle: {
+          strokeLinecap: 'round',
+          stroke: (_theme$grid$stroke = theme == null || (_theme$grid = theme.grid) == null ? void 0 : _theme$grid.stroke) != null ? _theme$grid$stroke : 'rgba(200, 200, 200, 0.2)'
+        }
+      }), !(props != null && props.sparkline) && jsxs(Fragment$1, {
+        children: [xAxisType !== 'none' && jsx(Axis, _extends({}, xAxisAttributes, {
+          tickLabelProps: function tickLabelProps() {
+            var tickLabelProps = _extends({}, axisLabelStyles(horizontal, theme == null ? void 0 : theme.labels));
+            if (!horizontal) {
+              tickLabelProps['y'] = 15;
+            }
+            return tickLabelProps;
+          },
+          numTicks: xAxisType === 'end2end' ? numberOfXAxisPoints : approximateXTickCount,
+          strokeWidth: removeStroke ? 0 : 1,
+          tickStroke: "#eaeaea",
+          stroke: horizontal ? 'transparent' : axisStrokeColor,
+          orientation: horizontal ? 'left' : 'bottom',
+          tickFormat: handleFormatXAxisLabel(props.formatXAxisLabel, props.forceXAxisAsTime || xAxisIsTime, chartData),
+          label: horizontal ? props == null || (_props$axisTitles = props.axisTitles) == null ? void 0 : _props$axisTitles.y : props == null || (_props$axisTitles2 = props.axisTitles) == null ? void 0 : _props$axisTitles2.x,
+          children: function children(axisProps) {
+            return jsx(XAxis, _extends({}, axisProps, {
+              theme: theme,
+              type: xAxisType,
+              uniqueId: props == null ? void 0 : props.uniqueId,
+              chartWidth: props == null ? void 0 : props.width,
+              xAxisIsTime: !!props.forceXAxisAsTime,
+              leftPanelWidth: leftWidth,
+              axisHorizontal: props == null ? void 0 : props.horizontal
+            }));
+          }
+        })), jsx(Axis, {
+          labelOffset: 50,
+          tickLabelProps: function tickLabelProps() {
+            var tickLabelProps = _extends({}, axisLabelStyles(horizontal, theme == null ? void 0 : theme.labels));
+            if (!horizontal && props.yAxisOrientation !== 'right') {
+              tickLabelProps['width'] = LEFT_PANEL_WIDTH;
+              tickLabelProps['textAnchor'] = 'middle';
+            }
+            return tickLabelProps;
+          },
+          hideAxisLine: true,
+          numTicks: approxYAxisLabelCount === 'auto' ? DEFAULT_Y_AXIS_LABEL_COUNT$1 : approxYAxisLabelCount,
+          strokeWidth: removeStroke ? 0 : 1,
+          hideTicks: true,
+          tickLength: !props.horizontal && props.yAxisOrientation !== 'right' ? LEFT_PANEL_WIDTH / 2 : 10,
+          stroke: axisStrokeColor,
+          orientation: horizontal ? 'bottom' : props.yAxisOrientation || 'left',
+          tickFormat: formatYAxisLabel$1(props),
+          label: horizontal ? props == null || (_props$axisTitles3 = props.axisTitles) == null ? void 0 : _props$axisTitles3.x : props == null || (_props$axisTitles4 = props.axisTitles) == null ? void 0 : _props$axisTitles4.y,
+          children: function children(axisProps) {
+            return jsx(YAxis, _extends({}, axisProps, {
+              theme: theme,
+              type: yAxisType,
+              horizontal: horizontal,
+              maxValueOfYAxis: props != null && props.formatYAxisLabel ? props == null ? void 0 : props.formatYAxisLabel(maxValue) : maxValue,
+              uniqueId: props == null ? void 0 : props.uniqueId
+            }));
+          }
+        })]
+      }), jsx("style", {
+        children: "\n        .visx-bar-stack .visx-bar {\n          stroke: #fff;\n          stroke-width: 2px;\n        }\n        .vizzly-xy-chart-funnel .visx-bar-stack .visx-bar {\n          stroke-width: 0;\n        }\n        .visx-tooltip-glyph svg {\n          max-width: 10px\n          height: 10px;\n        }\n        " + TOOLTIP_ZINDEX + "\n        "
+      }), props.lines && props.lines.keys.map(function (key, keyIndex) {
+        var _props$lines3, _props$lines4;
+        return jsx(GlyphSeries, _extends({
+          size: function size(datum) {
+            if (!datum || !datum.bubbleSize) return 5;
+            return datum.bubbleSize;
+          },
+          dataKey: key,
+          data: (_props$lines3 = props.lines) == null ? void 0 : _props$lines3.data
+        }, accessors$1(xAxisIsTime, x, key, horizontal), {
+          colorAccessor: (props == null || (_props$lines4 = props.lines) == null ? void 0 : _props$lines4.formatter) && getColorFromDatum(key, props == null ? void 0 : props.lines.formatter, colors, keyIndex)
+        }), "scatter_chart_" + props.uniqueId + "_" + keyIndex);
+      })]
+    }), (props == null ? void 0 : props.legend) && jsx(Legend, {
+      funnelChart: props == null || (_props$bars3 = props.bars) == null ? void 0 : _props$bars3.funnelChart
+      // groupingCount={props}
+      ,
+      keys: getConcatenatedProperties(props, 'keys'),
+      colors: colors,
+      typeIndex: getTypeIndex(props),
+      formatSeriesName: props == null ? void 0 : props.formatSeriesName,
+      formatter: props == null || (_props$bars4 = props.bars) == null ? void 0 : _props$bars4.formatter,
+      data: (_props$bars5 = props.bars) == null ? void 0 : _props$bars5.data,
+      conditionalFormattingPossibilities: props.conditionalFormattingPossibilities,
+      getIndicatorStyles: getTrendLineStyle
+    })]
+  });
+};
+
+var BubbleChart$2 = /*#__PURE__*/forwardRef(function (props, ref) {
+  var zValues = props.z ? props.data.map(function (d) {
+    return d[props.z];
+  }) : [];
+  var normaliseArray = function normaliseArray(array, min, max) {
+    var arrayMin = Math.min.apply(Math, array);
+    var arrayMax = Math.max.apply(Math, array);
+    return array.map(function (value) {
+      return (value - arrayMin) / (arrayMax - arrayMin) * (max - min) + min;
+    });
+  };
+  var scaledSizeValues = normaliseArray(zValues, 1, 30);
+  var data = props.data.map(function (d, i) {
+    return _extends({}, d, {
+      bubbleSize: scaledSizeValues[i]
+    });
+  });
+  var forceRerender = useChartForceRerender(ref);
+  if (forceRerender) return null;
+  return jsx(ParentSize, {
+    children: function children(parent) {
+      var _props$height, _props$width;
+      return jsx(VizzlyBubbleChart, {
+        isBubble: true,
+        approxXAxisLabelCount: props.approxXAxisLabelCount,
+        approxYAxisLabelCount: props.approxYAxisLabelCount,
+        uniqueId: props.uniqueId,
+        formatSeriesName: props.formatSeriesName,
+        forceXAxisAsTime: props.forceXAxisAsTime,
+        sparkline: props.sparkline,
+        lines: {
+          annotate: props.annotate || [],
+          data: data,
+          keys: props.keys,
+          colors: props.colors,
+          scatter: true
+        },
+        x: props.x,
+        z: props.z,
+        sharedTooltip: true,
+        legend: props.legend,
+        removeStroke: props == null ? void 0 : props.removeStroke,
+        formatXAxisLabel: props == null ? void 0 : props.formatXAxisLabel,
+        formatYAxisLabel: props == null ? void 0 : props.formatYAxisLabel,
+        horizontal: props == null ? void 0 : props.horizontal,
+        height: (_props$height = props == null ? void 0 : props.height) != null ? _props$height : parent == null ? void 0 : parent.height,
+        width: (_props$width = props == null ? void 0 : props.width) != null ? _props$width : parent == null ? void 0 : parent.width,
+        theme: props == null ? void 0 : props.theme,
+        onClick: function onClick(datum) {
+          return (props == null ? void 0 : props.onClick) && (props == null ? void 0 : props.onClick(datum));
+        },
+        goalLine: props == null ? void 0 : props.goalLine,
+        axisTitles: props == null ? void 0 : props.axisTitles,
+        idPrefix: props == null ? void 0 : props.idPrefix,
+        popOverMenuStyles: props.popOverMenuStyles
+      });
+    }
+  });
+});
+
 var defaultProps$6 = {
   type: 'bubbleChart',
   xMeasure: null,
@@ -40871,7 +41123,7 @@ var BubbleChartView = function BubbleChartView(props) {
       queriesAreChanging: props.queriesAreChanging,
       children: [jsx(ViewHeader, _extends({}, headerProps)), jsx(ChartWrapper, {
         disabledFeatures: (_props$library2 = props.library) != null ? _props$library2 : false,
-        children: jsx(BubbleChart$3, {
+        children: jsx(BubbleChart$2, {
           ref: ref,
           approxXAxisLabelCount: props.approxXAxisLabelCount,
           approxYAxisLabelCount: props.approxYAxisLabelCount,
@@ -40916,7 +41168,7 @@ var BubbleChartView = function BubbleChartView(props) {
 BubbleChartView.defaultProps = defaultProps$6;
 var memoized$4 = /*#__PURE__*/memo(BubbleChartView, shouldUpdate);
 
-var BubbleChart$2 = function BubbleChart(props) {
+var BubbleChart$3 = function BubbleChart(props) {
   var _props$dashboardBehav;
   var _props$component = props.component,
     results = _props$component.results,
@@ -48583,7 +48835,7 @@ var Component = function Component(props) {
         });
       },
       onError: dashboardBehaviour.onError,
-      children: jsx(BubbleChart$2, {
+      children: jsx(BubbleChart$3, {
         id: props.id,
         setLocalFilters: props.setLocalFilters,
         dataSet: dataSet,
@@ -57046,6 +57298,22 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
     }
     return options;
   }();
+  var layoutOptions = function () {
+    var options = [{
+      label: textOverride('grouped', 'Grouped'),
+      value: false
+    }, {
+      label: textOverride('stacked', 'Stacked'),
+      value: true
+    }];
+    if (attributes.type === 'barChart' || attributes.type === 'areaChart') {
+      options.push({
+        label: textOverride('stacked_100prc', 'Stacked (100%)'),
+        value: '100%'
+      });
+    }
+    return options;
+  }();
   return jsx(Section, {
     title: section.title,
     tooltip: section == null ? void 0 : section.description,
@@ -57065,16 +57333,7 @@ var ChartSettingsSection = function ChartSettingsSection(_ref) {
                   stacked: stacked
                 });
               },
-              options: [{
-                label: textOverride('grouped', 'Grouped'),
-                value: false
-              }, {
-                label: textOverride('stacked', 'Stacked'),
-                value: true
-              }, {
-                label: textOverride('stacked_100prc', 'Stacked (100%)'),
-                value: '100%'
-              }]
+              options: layoutOptions
             }), section.type === 'curve' && jsx(FormatSelectInput, {
               label: section.title,
               id: "format-layout-curve",

package/dist/shared-logic/src/BubbleChart/getAxisFormattingFunction.d.ts

@@ -9,5 +9,5 @@ interface getAxisFormattingFunctionArgs {
     };
     formatFunctionId: FormatType;
 }
-export declare const getAxisFormattingFunction: ({ formatFunctionId, numberFormatOptions, dateTimeFormatOptions, }: getAxisFormattingFunctionArgs) => ((number: number | null | undefined, noValueReplacement?: string | undefined) => string) | ((date: Date) => string) | ((value: string) => string);
+export declare const getAxisFormattingFunction: ({ formatFunctionId, numberFormatOptions, dateTimeFormatOptions, }: getAxisFormattingFunctionArgs) => ((date: Date) => string) | ((number: number | null | undefined, noValueReplacement?: string | undefined) => string) | ((value: string) => string);
 export {};

package/dist/shared-logic/src/ChartsV2/getAxisFormattingFunction.d.ts

@@ -9,5 +9,5 @@ interface getAxisFormattingFunctionArgs {
     };
     formatFunctionId: FormatType;
 }
-export declare const getAxisFormattingFunction: ({ formatFunctionId, numberFormatOptions, dateTimeFormatOptions, }: getAxisFormattingFunctionArgs) => ((number: number | null | undefined, noValueReplacement?: string | undefined) => string) | ((date: Date) => string) | ((value: string) => string);
+export declare const getAxisFormattingFunction: ({ formatFunctionId, numberFormatOptions, dateTimeFormatOptions, }: getAxisFormattingFunctionArgs) => ((date: Date) => string) | ((number: number | null | undefined, noValueReplacement?: string | undefined) => string) | ((value: string) => string);
 export {};

package/package.json

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