@shopify/polaris-viz - npm Package Compare versions

Comparing version 0.27.0 to 0.28.0

build/cjs/components/BarChart/BarChart.js

@@ -6,8 +6,8 @@ 'use strict';
 var React = require('react');
-var Chart = require('./Chart.js');
 var uniqueId = require('../../utilities/unique-id.js');
 var normalizeData = require('../../utilities/normalize-data.js');
 var SkipLink = require('../SkipLink/SkipLink.js');
-var ChartContainer = require('../ChartContainer/ChartContainer.js');
-var TooltipContent = require('./components/TooltipContent/TooltipContent.js');
+var VerticalBarChart = require('../VerticalBarChart/VerticalBarChart.js');
+var HorizontalBarChart = require('../HorizontalBarChart/HorizontalBarChart.js');
+var TooltipContent = require('../TooltipContent/TooltipContent.js');
 
@@ -19,37 +19,48 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 function BarChart({
+  annotations = [],
   data,
-  annotations,
-  renderTooltipContent,
+  direction = 'vertical',
   emptyStateText,
   isAnimated = false,
+  renderTooltipContent,
   skipLinkText,
+  theme,
+  type = 'default',
   xAxisOptions,
-  yAxisOptions,
-  theme
+  yAxisOptions
 }) {
-  const skipLinkAnchorId = React.useRef(uniqueId.uniqueId('barChart'));
+  const skipLinkAnchorId = React.useRef(uniqueId.uniqueId('BarChart'));
   const emptyState = data.length === 0;
-  const xAxisOptionsWithDefaults = {
+  const hideSkipLink = skipLinkText == null || skipLinkText.length === 0 || emptyState;
+  const xAxisOptionsForChart = {
     labelFormatter: value => value,
-    useMinimalLabels: false,
-    wrapLabels: true,
+    hide: false,
+    wrapLabels: false,
     ...xAxisOptions
   };
-  const yAxisOptionsWithDefaults = {
-    labelFormatter: value => value.toString(),
-    integersOnly: false,
-    ...yAxisOptions
-  };
 
-  function renderDefaultTooltipContent({
-    label,
-    value,
-    annotation
+  function renderTooltip({
+    data
   }) {
-    const formattedLabel = xAxisOptionsWithDefaults.labelFormatter(label);
-    const formattedValue = yAxisOptionsWithDefaults.labelFormatter(value);
+    if (renderTooltipContent != null) {
+      return renderTooltipContent({
+        data
+      });
+    }
+
+    const tooltipData = data.map(({
+      value,
+      label,
+      color,
+      type
+    }) => {
+      return {
+        label,
+        value: xAxisOptionsForChart.labelFormatter(value),
+        color,
+        type
+      };
+    });
     return /*#__PURE__*/React__default["default"].createElement(TooltipContent.TooltipContent, {
-      label: formattedLabel,
-      value: formattedValue,
-      annotation: annotation,
+      data: tooltipData,
       theme: theme
@@ -59,25 +70,28 @@ });
 
-  let annotationsLookupTable = {};
-
-  if (annotations != null && annotations.length > 0) {
-    annotationsLookupTable = normalizeData.normalizeData(annotations, 'dataIndex');
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, skipLinkText == null || skipLinkText.length === 0 || emptyState ? null : /*#__PURE__*/React__default["default"].createElement(SkipLink.SkipLink, {
+  const annotationsLookupTable = normalizeData.normalizeData(annotations, 'dataSeriesIndex');
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hideSkipLink ? null : /*#__PURE__*/React__default["default"].createElement(SkipLink.SkipLink, {
     anchorId: skipLinkAnchorId.current
-  }, skipLinkText), /*#__PURE__*/React__default["default"].createElement(ChartContainer.ChartContainer, {
-    theme: theme
-  }, /*#__PURE__*/React__default["default"].createElement(Chart.Chart, {
+  }, skipLinkText), direction === 'vertical' ? /*#__PURE__*/React__default["default"].createElement(VerticalBarChart.VerticalBarChart, {
+    annotationsLookupTable: annotationsLookupTable,
+    data: data,
+    xAxisOptions: xAxisOptionsForChart,
+    yAxisOptions: yAxisOptions,
+    theme: theme,
+    type: type,
+    emptyStateText: emptyStateText,
     isAnimated: isAnimated,
+    renderTooltipContent: renderTooltip
+  }) : /*#__PURE__*/React__default["default"].createElement(HorizontalBarChart.HorizontalBarChart, {
+    annotationsLookupTable: annotationsLookupTable,
     data: data,
-    annotationsLookupTable: annotationsLookupTable,
-    renderTooltipContent: renderTooltipContent != null ? renderTooltipContent : renderDefaultTooltipContent,
-    xAxisOptions: xAxisOptionsWithDefaults,
-    yAxisOptions: yAxisOptionsWithDefaults,
-    emptyStateText: emptyStateText
-  })), skipLinkText == null || skipLinkText.length === 0 || emptyState ? null : /*#__PURE__*/React__default["default"].createElement(SkipLink.SkipLink, {
-    anchorId: skipLinkAnchorId.current
-  }, skipLinkText));
+    isAnimated: isAnimated,
+    renderTooltipContent: renderTooltip,
+    theme: theme,
+    type: type,
+    xAxisOptions: xAxisOptionsForChart
+  }), hideSkipLink ? null : /*#__PURE__*/React__default["default"].createElement(SkipLink.SkipLink.Anchor, {
+    id: skipLinkAnchorId.current
+  }));
 }
 
 exports.BarChart = BarChart;

build/cjs/components/BarChart/components/AnnotationLine/AnnotationLine.js

@@ -16,28 +16,36 @@ 'use strict';
 function AnnotationLine({
-  xPosition,
-  barWidth,
-  drawableHeight,
-  width: annotationWidth,
+  barSize,
+  color,
+  direction = 'vertical',
+  drawableSize,
+  offset = MEDIAN_OFFSET,
+  position,
   shouldAnimate = false,
-  color,
-  xOffset = MEDIAN_OFFSET
+  width: annotationWidth
 }) {
   const halfAnnotationWidth = annotationWidth / 2;
-  const offset = barWidth * xOffset;
+  const centerOffset = barSize * offset;
   const xValueClamped = clamp.clamp({
-    amount: xPosition + offset,
-    min: xPosition + halfAnnotationWidth,
-    max: xPosition + barWidth - halfAnnotationWidth
+    amount: position + centerOffset,
+    min: position + halfAnnotationWidth,
+    max: position + barSize - halfAnnotationWidth
   });
-  return /*#__PURE__*/React__default["default"].createElement("line", {
-    className: classnames.classNames(shouldAnimate && AnnotationLine$1["default"].AnimatedLine),
-    stroke: color,
-    strokeWidth: annotationWidth,
+  const xy = direction === 'vertical' ? {
     x1: xValueClamped,
     x2: xValueClamped,
-    y1: drawableHeight,
+    y1: drawableSize,
     y2: 0
-  });
+  } : {
+    y1: xValueClamped,
+    y2: xValueClamped,
+    x1: drawableSize,
+    x2: 0
+  };
+  return /*#__PURE__*/React__default["default"].createElement("line", Object.assign({
+    className: classnames.classNames(shouldAnimate && AnnotationLine$1["default"].AnimatedLine),
+    stroke: color,
+    strokeWidth: annotationWidth
+  }, xy));
 }
 
 exports.AnnotationLine = AnnotationLine;

build/cjs/components/HorizontalBarChart/Chart.js

@@ -17,2 +17,3 @@ 'use strict';
 var useHorizontalBarSizes = require('../../hooks/useHorizontalBarSizes.js');
+var useBarChartTooltipContent = require('../../hooks/useBarChartTooltipContent.js');
 var useHorizontalTransitions = require('../../hooks/useHorizontalTransitions.js');
@@ -23,2 +24,3 @@ var VerticalGridLines = require('./components/VerticalGridLines/VerticalGridLines.js');
 var HorizontalGroup = require('../shared/HorizontalGroup/HorizontalGroup.js');
+var AnnotationLine = require('../BarChart/components/AnnotationLine/AnnotationLine.js');
 var TooltipWrapper = require('../TooltipWrapper/TooltipWrapper.js');
@@ -34,2 +36,3 @@ var getAlteredHorizontalBarPosition = require('./utilities/getAlteredHorizontalBarPosition.js');
 function Chart({
+  annotationsLookupTable = {},
   data,
@@ -134,25 +137,8 @@ dimensions,
   }, [data, labelFormatter]);
-  const getTooltipMarkup = React.useCallback(activeIndex => {
-    if (activeIndex === -1) {
-      return null;
-    }
-
-    const tooltipData = data.map(({
-      name,
-      data,
-      color
-    }, index) => {
-      const {
-        value
-      } = data[activeIndex];
-      return {
-        label: `${name}`,
-        value: `${value}`,
-        color: color !== null && color !== void 0 ? color : seriesColors[index]
-      };
-    });
-    return renderTooltipContent({
-      data: tooltipData
-    });
-  }, [data, seriesColors, renderTooltipContent]);
+  const getTooltipMarkup = useBarChartTooltipContent.useBarChartTooltipContent({
+    annotationsLookupTable,
+    data,
+    seriesColors,
+    renderTooltipContent
+  });
   const {
@@ -227,3 +213,25 @@ transitions
     });
-  })), /*#__PURE__*/React__default["default"].createElement(TooltipWrapper.TooltipWrapper, {
+  }), /*#__PURE__*/React__default["default"].createElement("g", null, Object.keys(annotationsLookupTable).map((key, dataIndex) => {
+    const annotation = annotationsLookupTable[Number(key)];
+
+    if (annotation == null) {
+      return null;
+    }
+
+    const xPosition = groupHeight * annotation.dataSeriesIndex;
+    const xPositionValue = xPosition == null ? 0 : xPosition;
+    const leftOffset = barHeight * annotation.dataPointIndex;
+    const position = xPositionValue + constants.HORIZONTAL_GROUP_LABEL_HEIGHT + leftOffset;
+    return /*#__PURE__*/React__default["default"].createElement(AnnotationLine.AnnotationLine, {
+      barSize: barHeight,
+      color: annotation.color,
+      direction: "horizontal",
+      drawableSize: width,
+      key: `annotation${dataIndex}${annotation.dataPointIndex}`,
+      position: position,
+      shouldAnimate: isAnimated,
+      width: annotation.width,
+      offset: annotation.offset
+    });
+  }))), /*#__PURE__*/React__default["default"].createElement(TooltipWrapper.TooltipWrapper, {
     bandwidth: groupBarsAreaHeight,
@@ -230,0 +238,0 @@ chartDimensions: {

build/cjs/components/HorizontalBarChart/HorizontalBarChart.js

@@ -9,3 +9,2 @@ 'use strict';
 var ChartContainer = require('../ChartContainer/ChartContainer.js');
-var TooltipContent = require('../TooltipContent/TooltipContent.js');
 
@@ -17,2 +16,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 function HorizontalBarChart({
+  annotationsLookupTable = {},
   data,
@@ -28,2 +28,3 @@ isAnimated = true,
     hide: false,
+    wrapLabels: false,
     ...xAxisOptions
@@ -34,35 +35,9 @@ };
   } = usePrefersReducedMotion.usePrefersReducedMotion();
-
-  function renderTooltip({
-    data
-  }) {
-    if (renderTooltipContent != null) {
-      return renderTooltipContent({
-        data
-      });
-    }
-
-    const tooltipData = data.map(({
-      value,
-      label,
-      color
-    }) => {
-      return {
-        label,
-        value: xAxisOptionsForChart.labelFormatter(value),
-        color
-      };
-    });
-    return /*#__PURE__*/React__default["default"].createElement(TooltipContent.TooltipContent, {
-      data: tooltipData,
-      theme: theme
-    });
-  }
-
   return /*#__PURE__*/React__default["default"].createElement(ChartContainer.ChartContainer, {
     theme: theme
   }, /*#__PURE__*/React__default["default"].createElement(Chart.Chart, {
+    annotationsLookupTable: annotationsLookupTable,
     data: data,
     isAnimated: isAnimated && !prefersReducedMotion,
-    renderTooltipContent: renderTooltip,
+    renderTooltipContent: renderTooltipContent,
     type: type,
@@ -69,0 +44,0 @@ xAxisOptions: xAxisOptionsForChart

build/cjs/components/LineChart/Chart.js

@@ -44,3 +44,3 @@ 'use strict';
 function Chart({
-  series,
+  data,
   dimensions,
@@ -69,3 +69,3 @@ renderTooltipContent,
   const fontSize = width < constants.SMALL_SCREEN ? constants.SMALL_FONT_SIZE : constants.FONT_SIZE;
-  const emptyState = series.length === 0;
+  const emptyState = data.length === 0;
   const {
@@ -76,3 +76,3 @@ ticks: initialTicks
     drawableHeight: height - constants.LineChartMargin.Top,
-    series,
+    data,
     formatYAxisLabel: yAxisOptions.labelFormatter,
@@ -83,3 +83,3 @@ integersOnly: yAxisOptions.integersOnly
   const xAxisDetails = useLinearXAxisDetails.useLinearXAxisDetails({
-    series,
+    data,
     fontSize,
@@ -103,3 +103,3 @@ width: width - selectedTheme.grid.horizontalMargin * 2,
     drawableHeight,
-    series,
+    data,
     formatYAxisLabel: yAxisOptions.labelFormatter,
@@ -109,3 +109,3 @@ integersOnly: yAxisOptions.integersOnly
   const getTooltipMarkup = React.useCallback(index => {
-    const data = series.reduce((accumulator, {
+    const content = data.reduce((accumulator, {
       data,
@@ -119,8 +119,10 @@ name,
       if (currentDataPoint != null) {
+        var _currentDataPoint$val;
+
         accumulator.push({
           point: {
-            label: currentDataPoint.label,
-            value: currentDataPoint.rawValue
+            label: `${currentDataPoint.key}`,
+            value: (_currentDataPoint$val = currentDataPoint.value) !== null && _currentDataPoint$val !== void 0 ? _currentDataPoint$val : 0
           },
-          name,
+          name: name !== null && name !== void 0 ? name : '',
           color,
@@ -139,6 +141,6 @@ lineStyle
     return renderTooltipContent({
-      data
+      data: content
     });
-  }, [renderTooltipContent, series]);
-  const reversedSeries = React.useMemo(() => series.slice().reverse(), [series]);
+  }, [renderTooltipContent, data]);
+  const reversedSeries = React.useMemo(() => data.slice().reverse(), [data]);
   const marginBetweenLabelsAndData = constants.SPACING_BASE_TIGHT;
@@ -159,4 +161,4 @@ const dataStartPosition = axisMargin + Number(selectedTheme.grid.horizontalMargin) + marginBetweenLabelsAndData;
     const generator = d3Shape.line().x((_, index) => xScale == null ? 0 : xScale(index)).y(({
-      rawValue
-    }) => yScale(rawValue));
+      value
+    }) => yScale(value !== null && value !== void 0 ? value : 0));
 
@@ -173,3 +175,3 @@ if (selectedTheme.line.hasSpline) {
   } = useLinearChartAnimations.useLinearChartAnimations({
-    series: reversedSeries,
+    data: reversedSeries,
     lineGenerator,
@@ -291,5 +293,5 @@ activeIndex,
   })), emptyState ? null : /*#__PURE__*/React__default["default"].createElement(VisuallyHiddenRows.VisuallyHiddenRows, {
+    data: data,
     formatYAxisLabel: yAxisOptions.labelFormatter,
-    xAxisLabels: formattedLabels,
-    series: series
+    xAxisLabels: formattedLabels
   }), /*#__PURE__*/React__default["default"].createElement("g", {
@@ -357,4 +359,8 @@ transform: `translate(${dataStartPosition},${constants.LineChartMargin.Top})`
     }) : null, data.map(({
-      rawValue
+      value
     }, dataIndex) => {
+      if (value == null) {
+        return null;
+      }
+
       return /*#__PURE__*/React__default["default"].createElement(Point.Point, {
@@ -366,3 +372,3 @@ dataType: types$1.DataType.Point,
         cx: xScale(dataIndex),
-        cy: yScale(rawValue),
+        cy: yScale(value),
         active: activeIndex === dataIndex,
@@ -369,0 +375,0 @@ index: dataIndex,

build/cjs/components/LineChart/components/GradientArea/GradientArea.js

@@ -29,4 +29,4 @@ 'use strict';
   const areaGenerator = d3Shape.area().x((_, index) => xScale(index)).y0(yScale(0)).y1(({
-    rawValue
-  }) => yScale(rawValue));
+    value
+  }) => yScale(value !== null && value !== void 0 ? value : 0));
 
@@ -33,0 +33,0 @@ if (hasSpline) {

build/cjs/components/LineChart/components/GradientArea/utilities/get-gradient-details.js

@@ -7,8 +7,7 @@ 'use strict';
 function getGradientDetails(data) {
-  const max = Math.max(...data.map(({
-    rawValue
-  }) => rawValue), 0);
-  const min = Math.min(...data.map(({
-    rawValue
-  }) => rawValue), 0);
+  const values = data.map(({
+    value
+  }) => value).filter(Boolean);
+  const max = Math.max(...values, 0);
+  const min = Math.min(...values, 0);
   const allNegatives = max <= 0 && min <= 0;
@@ -15,0 +14,0 @@ const allPositives = min === 0 && max >= 0;

build/cjs/components/LineChart/components/Line/Line.js

@@ -27,3 +27,4 @@ 'use strict';
   const path = lineGenerator(series.data);
-  const isSolidLine = series.lineStyle == null || series.lineStyle === 'solid';
+  const isSolidLine = series.isComparison !== true;
+  const lineStyle = series.isComparison ? 'dotted' : 'solid';
   const styles = web.useSpring({
@@ -61,3 +62,3 @@ from: isSolidLine ? {
     strokeLinecap: "round",
-    strokeDasharray: constants$2.StrokeDasharray[series.lineStyle]
+    strokeDasharray: constants$2.StrokeDasharray[lineStyle]
   }), children);
@@ -64,0 +65,0 @@ });

build/cjs/components/LineChart/hooks/use-y-scale.js

@@ -15,3 +15,3 @@ 'use strict';
   drawableHeight,
-  series,
+  data,
   formatYAxisLabel,
@@ -27,3 +27,3 @@ fontSize,
     const [minY, maxY] = yAxisMinMax.yAxisMinMax({
-      series,
+      data,
       integersOnly
@@ -64,3 +64,3 @@ });
     };
-  }, [series, integersOnly, drawableHeight, formatYAxisLabel, fontSize]);
+  }, [data, integersOnly, drawableHeight, formatYAxisLabel, fontSize]);
   return {
@@ -67,0 +67,0 @@ yScale,

build/cjs/components/LineChart/LineChart.js

@@ -23,3 +23,3 @@ 'use strict';
 function LineChart({
-  series,
+  data,
   renderTooltipContent,
@@ -34,3 +34,3 @@ skipLinkText,
   const selectedTheme = useTheme.useTheme(theme);
-  const seriesColors = useThemeSeriesColors.useThemeSeriesColors(series, selectedTheme);
+  const seriesColors = useThemeSeriesColors.useThemeSeriesColors(data, selectedTheme);
   const {
@@ -93,19 +93,18 @@ prefersReducedMotion
 
-  const areaOpacity = getOpacityByDataLength(series.length);
-  const seriesWithDefaults = series.map((series, index) => {
-    var _series$lineStyle, _series$color;
+  const areaOpacity = getOpacityByDataLength(data.length);
+  const dataWithDefaults = data.map((series, index) => {
+    var _series$color;
 
     const seriesColor = seriesColors[index];
-    const isSolidLine = series.lineStyle == null || series.lineStyle === 'solid';
     const areaColor = isGradientType.isGradientType(seriesColor) ? getAverageColor.getAverageColor(seriesColor[0].color, seriesColor[seriesColor.length - 1].color) : seriesColor;
     return {
-      lineStyle: (_series$lineStyle = series.lineStyle) !== null && _series$lineStyle !== void 0 ? _series$lineStyle : selectedTheme.line.style,
+      lineStyle: series.isComparison ? 'dotted' : selectedTheme.line.style,
       ...series,
-      areaColor: isSolidLine ? changeColorOpacity.changeColorOpacity(areaColor, areaOpacity) : undefined,
+      areaColor: series.isComparison ? undefined : changeColorOpacity.changeColorOpacity(areaColor, areaOpacity),
       // We want to override the color, not set a default
       // so it has to come last
-      color: isSolidLine ? (_series$color = series.color) !== null && _series$color !== void 0 ? _series$color : seriesColors[index] : seriesColors[index]
+      color: series.isComparison ? seriesColors[index] : (_series$color = series.color) !== null && _series$color !== void 0 ? _series$color : seriesColors[index]
     };
   });
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, skipLinkText == null || skipLinkText.length === 0 || series.length === 0 ? null : /*#__PURE__*/React__default["default"].createElement(SkipLink.SkipLink, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, skipLinkText == null || skipLinkText.length === 0 || data.length === 0 ? null : /*#__PURE__*/React__default["default"].createElement(SkipLink.SkipLink, {
     anchorId: skipLinkAnchorId.current
@@ -115,3 +114,3 @@ }, skipLinkText), /*#__PURE__*/React__default["default"].createElement(ChartContainer.ChartContainer, {
   }, /*#__PURE__*/React__default["default"].createElement(Chart.Chart, {
-    series: seriesWithDefaults,
+    data: dataWithDefaults,
     xAxisOptions: xAxisOptionsWithDefaults,
@@ -118,0 +117,0 @@ yAxisOptions: yAxisOptionsWithDefaults,

build/cjs/components/LineChart/utilities/y-axis-min-max.js

@@ -8,6 +8,6 @@ 'use strict';
 function yAxisMinMax({
-  series,
+  data,
   integersOnly
 }) {
-  if (series.length === 0) {
+  if (data.length === 0) {
     return [constants.EMPTY_STATE_CHART_MIN, constants.EMPTY_STATE_CHART_MAX];
@@ -18,10 +18,14 @@ }
   let maxY = -Infinity;
-  series.forEach(({
+  data.forEach(({
     data
   }) => {
     data.forEach(({
-      rawValue
+      value
     }) => {
-      minY = Math.min(minY, rawValue);
-      maxY = Math.max(maxY, rawValue);
+      if (value == null) {
+        return;
+      }
+
+      minY = Math.min(minY, value);
+      maxY = Math.max(maxY, value);
     });
@@ -28,0 +32,0 @@ });

build/cjs/components/StackedAreaChart/Chart.js

@@ -45,3 +45,3 @@ 'use strict';
   xAxisOptions,
-  series,
+  data,
   dimensions,
@@ -60,3 +60,3 @@ formatXAxisLabel,
   const selectedTheme = useTheme.useTheme(theme);
-  const colors = useThemeSeriesColors.useThemeSeriesColors(series, selectedTheme);
+  const colors = useThemeSeriesColors.useThemeSeriesColors(data, selectedTheme);
   const [activePointIndex, setActivePointIndex] = React.useState(null);
@@ -73,7 +73,7 @@ const [svgRef, setSvgRef] = React.useState(null);
   const hideXAxis = xAxisOptions.hide || selectedTheme.xAxis.hide;
-  const areaStack = React.useMemo(() => d3Shape.stack().keys(series.map(({
+  const areaStack = React.useMemo(() => d3Shape.stack().keys(data.map(({
     name
-  }) => name)).order(d3Shape.stackOrderReverse).offset(d3Shape.stackOffsetNone), [series]);
+  }) => name !== null && name !== void 0 ? name : '')).order(d3Shape.stackOrderReverse).offset(d3Shape.stackOffsetNone), [data]);
   const xAxisLabels = xAxisOptions.labels;
-  const formattedData = React.useMemo(() => xAxisLabels.map((_, labelIndex) => series.reduce((acc, {
+  const formattedData = React.useMemo(() => xAxisLabels.map((_, labelIndex) => data.reduce((acc, {
     name,
@@ -83,9 +83,9 @@ data
     const {
-      rawValue
+      value
     } = data[labelIndex];
     const dataPoint = {
-      [name]: rawValue
+      [name !== null && name !== void 0 ? name : '']: value
     };
     return Object.assign(acc, dataPoint);
-  }, {})), [xAxisLabels, series]);
+  }, {})), [xAxisLabels, data]);
   const fontSize = width < constants.SMALL_SCREEN ? constants.SMALL_FONT_SIZE : constants.FONT_SIZE;
@@ -102,3 +102,3 @@ const stackedValues = React.useMemo(() => areaStack(formattedData), [areaStack, formattedData]);
   const xAxisDetails = useLinearXAxisDetails.useLinearXAxisDetails({
-    series,
+    data,
     fontSize,
@@ -134,3 +134,3 @@ width: width - selectedTheme.grid.horizontalMargin * 2,
   const getTooltipMarkup = React.useCallback(index => {
-    const data = series.reduce(function removeNullsAndFormatData(tooltipData, {
+    const content = data.reduce(function removeNullsAndFormatData(tooltipData, {
       name,
@@ -140,6 +140,6 @@ data
       const {
-        rawValue
+        value
       } = data[index];
 
-      if (rawValue == null) {
+      if (value == null) {
         return tooltipData;
@@ -150,4 +150,4 @@ }
         color: colors[seriesIndex],
-        label: name,
-        value: rawValue
+        label: name !== null && name !== void 0 ? name : '',
+        value
       });
@@ -158,10 +158,10 @@ return tooltipData;
     return renderTooltipContent({
-      data,
+      data: content,
       title
     });
-  }, [colors, series, xAxisLabels, renderTooltipContent]);
+  }, [colors, data, xAxisLabels, renderTooltipContent]);
   const lineGenerator = React.useMemo(() => {
     const generator = d3Shape.line().x((_, index) => xScale == null ? 0 : xScale(index)).y(({
-      rawValue
-    }) => yScale(rawValue));
+      value
+    }) => yScale(value !== null && value !== void 0 ? value : 0));
 
@@ -178,7 +178,6 @@ if (selectedTheme.line.hasSpline) {
         name: '',
-        color: null,
         data: value.map(val => {
           return {
-            label: '',
-            rawValue: val[1]
+            key: '',
+            value: val[1]
           };
@@ -192,3 +191,3 @@ })
   } = useLinearChartAnimations.useLinearChartAnimations({
-    series: seriesForAnimation,
+    data: seriesForAnimation,
     lineGenerator,
@@ -259,5 +258,5 @@ activeIndex: activePointIndex,
   })), /*#__PURE__*/React__default["default"].createElement(VisuallyHiddenRows.VisuallyHiddenRows, {
+    data: data,
     formatYAxisLabel: formatYAxisLabel,
-    xAxisLabels: formattedXAxisLabels,
-    series: series
+    xAxisLabels: formattedXAxisLabels
   }), /*#__PURE__*/React__default["default"].createElement(StackedAreas.StackedAreas, {
@@ -264,0 +263,0 @@ width: drawableWidth,

build/cjs/components/StackedAreaChart/StackedAreaChart.js

@@ -19,3 +19,3 @@ 'use strict';
   yAxisOptions,
-  series,
+  data,
   renderTooltipContent,
@@ -30,3 +30,3 @@ isAnimated = false,
 
-  if (series.length === 0) {
+  if (data.length === 0) {
     return null;
@@ -64,3 +64,3 @@ }
     xAxisOptions: xAxisOptions,
-    series: series,
+    data: data,
     formatXAxisLabel: xFormatter,
@@ -67,0 +67,0 @@ formatYAxisLabel: yFormatter,

build/cjs/components/TooltipContent/TooltipContent.js

@@ -8,3 +8,4 @@ 'use strict';
 var useTheme = require('../../hooks/useTheme.js');
-var SquareColorPreview = require('../SquareColorPreview/SquareColorPreview.js');
+var AnnotationRow = require('./components/AnnotationRow.js');
+var DefaultRow = require('./components/DefaultRow.js');
 
@@ -15,2 +16,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+exports.TooltipRowType = void 0;
+
+(function (TooltipRowType) {
+  TooltipRowType[TooltipRowType["Default"] = 0] = "Default";
+  TooltipRowType[TooltipRowType["Annotation"] = 1] = "Annotation";
+})(exports.TooltipRowType || (exports.TooltipRowType = {}));
+
 function TooltipContent({
@@ -29,3 +37,3 @@ title,
       background: tooltip.backgroundColor,
-      color: tooltip.labelColor
+      color: tooltip.valueColor
     }
@@ -37,16 +45,27 @@ }, title == null ? null : /*#__PURE__*/React__default["default"].createElement("div", {
     label,
-    value
-  }, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-    key: `${label}-${index}`
-  }, /*#__PURE__*/React__default["default"].createElement(SquareColorPreview.SquareColorPreview, {
-    color: color
-  }), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: TooltipContent$1["default"].Label
-  }, label), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: TooltipContent$1["default"].Value,
-    style: {
-      color: tooltip.valueColor
+    value,
+    type = exports.TooltipRowType.Default
+  }, index) => {
+    switch (type) {
+      default:
+      case exports.TooltipRowType.Default:
+        return /*#__PURE__*/React__default["default"].createElement(DefaultRow.DefaultRow, {
+          color: color,
+          key: `${label}-${index}`,
+          label: label,
+          value: value
+        });
+
+      case exports.TooltipRowType.Annotation:
+        return /*#__PURE__*/React__default["default"].createElement(AnnotationRow.AnnotationRow, {
+          key: `${label}-${index}`,
+          label: label,
+          value: value,
+          theme: theme
+        });
     }
-  }, value))), total == null ? null : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: TooltipContent$1["default"].Label
+  }), total == null ? null : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: TooltipContent$1["default"].Row
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    className: TooltipContent$1["default"].TotalLabel
   }, total.label), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -53,0 +72,0 @@ className: TooltipContent$1["default"].Value

build/cjs/components/TooltipContent/TooltipContent.scss.js

@@ -68,8 +68,12 @@ 'use strict';
   "colorYellow90": "#74742c",
-  "Container": "_Container_1iny0_3",
-  "Title": "_Title_1iny0_5",
-  "Label": "_Label_1iny0_7",
-  "Value": "_Value_1iny0_9"
+  "Container": "_Container_1mvd1_3",
+  "Row": "_Row_1mvd1_5",
+  "Title": "_Title_1mvd1_9",
+  "Label": "_Label_1mvd1_11",
+  "AnnotationLabel": "_AnnotationLabel_1mvd1_13",
+  "TotalLabel": "_TotalLabel_1mvd1_15",
+  "Value": "_Value_1mvd1_17",
+  "AnnotationValue": "_AnnotationValue_1mvd1_19"
 };
 
 exports["default"] = styles;

build/cjs/components/VisuallyHiddenRows/VisuallyHiddenRows.js

@@ -13,3 +13,3 @@ 'use strict';
 const VisuallyHiddenRows = /*#__PURE__*/React__default["default"].memo(function Rows({
-  series,
+  data,
   xAxisLabels,
@@ -28,3 +28,3 @@ formatYAxisLabel
     }, xAxisLabel);
-  })), series.map(({
+  })), data.map(({
     name,
@@ -40,10 +40,10 @@ data
     }, name), data.map(({
-      rawValue,
-      label
+      value,
+      key
     }, index) => {
       return /*#__PURE__*/React__default["default"].createElement("text", {
-        key: `cell-${name}-${rawValue}-${label}-${index}`,
+        key: `cell-${name}-${value}-${key}-${index}`,
         role: "cell",
         className: VisuallyHiddenRows$1["default"].VisuallyHidden
-      }, rawValue == null ? '' : formatYAxisLabel(rawValue));
+      }, value == null ? '' : formatYAxisLabel(value));
     }));
@@ -50,0 +50,0 @@ }));

build/cjs/hooks/use-linear-chart-animations.js

@@ -19,7 +19,7 @@ 'use strict';
   lineGenerator,
-  series,
+  data,
   isAnimated
 }) {
   const currentIndex = activeIndex == null ? 0 : activeIndex;
-  const immediate = !isAnimated || series.length === 0 || activeIndex == null; // Create off screen paths used for sub path and total path length calculations
+  const immediate = !isAnimated || data.length === 0 || activeIndex == null; // Create off screen paths used for sub path and total path length calculations
 
@@ -30,7 +30,7 @@ const createOffScreenPath = React.useCallback(data => {
     return offscreenPath;
-  }, [lineGenerator]); // Get total lengths of paths for all series
+  }, [lineGenerator]); // Get total lengths of paths for all data
 
   const totalPaths = React.useMemo(() => {
     if (immediate) return null;
-    return series.map(({
+    return data.map(({
       data
@@ -44,7 +44,7 @@ }) => {
     });
-  }, [immediate, createOffScreenPath, series]); // Get length of subpaths at current index for all series
+  }, [immediate, createOffScreenPath, data]); // Get length of subpaths at current index for all data
 
   const subPaths = React.useMemo(() => {
     if (immediate) return null;
-    return series.map(({
+    return data.map(({
       data
@@ -58,3 +58,3 @@ }) => {
     });
-  }, [immediate, createOffScreenPath, currentIndex, series]); // Get percentage of subpath compared to total length
+  }, [immediate, createOffScreenPath, currentIndex, data]); // Get percentage of subpath compared to total length
 
@@ -67,7 +67,7 @@ const getPercentage = React.useCallback((subpathLength, totalLength) => {
     return subpathLength / totalLength * 100;
-  }, []); // Calculate percentage for subpath compared to total length of all series
+  }, []); // Calculate percentage for subpath compared to total length of all data
 
   const percentages = React.useMemo(() => {
     if (immediate || !totalPaths || !subPaths) return null;
-    return series.map((_, index) => {
+    return data.map((_, index) => {
       const totalLength = totalPaths[index].length;
@@ -77,3 +77,3 @@ const subPath = subPaths[index];
     });
-  }, [immediate, totalPaths, subPaths, series, getPercentage]); // Using the percentage, get the length to calculate the coordinates at the current index
+  }, [immediate, totalPaths, subPaths, data, getPercentage]); // Using the percentage, get the length to calculate the coordinates at the current index
 
@@ -80,0 +80,0 @@ const getCoordinatesFromPercentage = React.useCallback((percent, path, totalLength) => {

build/cjs/hooks/use-theme-series-colors.js

@@ -30,5 +30,6 @@ 'use strict';
       color,
-      lineStyle
+      lineStyle,
+      isComparison
     }) => {
-      if (lineStyle && lineStyle !== 'solid') {
+      if (isComparison === true || lineStyle && lineStyle !== 'solid') {
         return selectedTheme.line.dottedStrokeColor;
@@ -35,0 +36,0 @@ } // If the series doesn't have a color property

build/cjs/hooks/useLinearXAxisDetails.js

@@ -19,3 +19,3 @@ 'use strict';
 function useLinearXAxisDetails({
-  series,
+  data,
   fontSize,
@@ -50,3 +50,3 @@ width,
   }, [fontSize, initialTicks, width]);
-  const longestSeriesLastIndex = React.useMemo(() => series.reduce((max, currentSeries) => Math.max(max, currentSeries.data.length - 1), 0), [series]); // using the estimated width, use the xscale hook so we can then get the d3's estimated ticks
+  const longestSeriesLastIndex = React.useMemo(() => data.reduce((max, currentSeries) => Math.max(max, currentSeries.data.length - 1), 0), [data]); // using the estimated width, use the xscale hook so we can then get the d3's estimated ticks
 
@@ -53,0 +53,0 @@ const initialXScale = useLinearXScale.useLinearXScale({

build/cjs/index.js

@@ -10,14 +10,11 @@ 'use strict';
 var SimpleNormalizedChart = require('./components/SimpleNormalizedChart/SimpleNormalizedChart.js');
-var BarChart = require('./components/BarChart/BarChart.js');
-var TooltipContent = require('./components/BarChart/components/TooltipContent/TooltipContent.js');
 var LineChart = require('./components/LineChart/LineChart.js');
-var TooltipContent$1 = require('./components/LineChart/components/TooltipContent/TooltipContent.js');
+var TooltipContent = require('./components/LineChart/components/TooltipContent/TooltipContent.js');
 var StackedAreaChart = require('./components/StackedAreaChart/StackedAreaChart.js');
 var Legend = require('./components/Legend/Legend.js');
-var MultiSeriesBarChart = require('./components/MultiSeriesBarChart/MultiSeriesBarChart.js');
-var TooltipContent$2 = require('./components/TooltipContent/TooltipContent.js');
+var BarChart = require('./components/BarChart/BarChart.js');
+var TooltipContent$1 = require('./components/TooltipContent/TooltipContent.js');
 var LinePreview = require('./components/LinePreview/LinePreview.js');
 var SquareColorPreview = require('./components/SquareColorPreview/SquareColorPreview.js');
 var PolarisVizProvider = require('./components/PolarisVizProvider/PolarisVizProvider.js');
-var HorizontalBarChart = require('./components/HorizontalBarChart/HorizontalBarChart.js');
 
@@ -32,13 +29,10 @@
 exports.SimpleNormalizedChart = SimpleNormalizedChart.SimpleNormalizedChart;
-exports.BarChart = BarChart.BarChart;
-exports.BarChartTooltipContent = TooltipContent.TooltipContent;
 exports.LineChart = LineChart.LineChart;
-exports.LineChartTooltipContent = TooltipContent$1.TooltipContent;
+exports.LineChartTooltipContent = TooltipContent.TooltipContent;
 exports.StackedAreaChart = StackedAreaChart.StackedAreaChart;
 exports.Legend = Legend.Legend;
-exports.MultiSeriesBarChart = MultiSeriesBarChart.MultiSeriesBarChart;
-exports.TooltipContent = TooltipContent$2.TooltipContent;
+exports.BarChart = BarChart.BarChart;
+exports.TooltipContent = TooltipContent$1.TooltipContent;
 exports.LinePreview = LinePreview.LinePreview;
 exports.SquareColorPreview = SquareColorPreview.SquareColorPreview;
 exports.PolarisVizProvider = PolarisVizProvider.PolarisVizProvider;
-exports.HorizontalBarChart = HorizontalBarChart.HorizontalBarChart;

build/cjs/utilities/should-rotate-zero-bars.js

@@ -8,9 +8,9 @@ 'use strict';
   const allValuesLessThanOne = data.every(({
-    rawValue
+    value
   }) => {
-    if (rawValue !== 0) {
+    if (value !== 0) {
       allValuesZero = false;
     }
 
-    if (rawValue > 0) {
+    if (value !== null && value > 0) {
       return false;
@@ -17,0 +17,0 @@ }

build/esm/components/BarChart/BarChart.js

 import React, { useRef } from 'react';
-import { Chart } from './Chart.js';
 import { uniqueId } from '../../utilities/unique-id.js';
 import { normalizeData } from '../../utilities/normalize-data.js';
 import { SkipLink } from '../SkipLink/SkipLink.js';
-import { ChartContainer } from '../ChartContainer/ChartContainer.js';
-import { TooltipContent } from './components/TooltipContent/TooltipContent.js';
+import { VerticalBarChart } from '../VerticalBarChart/VerticalBarChart.js';
+import { HorizontalBarChart } from '../HorizontalBarChart/HorizontalBarChart.js';
+import { TooltipContent } from '../TooltipContent/TooltipContent.js';
 
 function BarChart({
+  annotations = [],
   data,
-  annotations,
-  renderTooltipContent,
+  direction = 'vertical',
   emptyStateText,
   isAnimated = false,
+  renderTooltipContent,
   skipLinkText,
+  theme,
+  type = 'default',
   xAxisOptions,
-  yAxisOptions,
-  theme
+  yAxisOptions
 }) {
-  const skipLinkAnchorId = useRef(uniqueId('barChart'));
+  const skipLinkAnchorId = useRef(uniqueId('BarChart'));
   const emptyState = data.length === 0;
-  const xAxisOptionsWithDefaults = {
+  const hideSkipLink = skipLinkText == null || skipLinkText.length === 0 || emptyState;
+  const xAxisOptionsForChart = {
     labelFormatter: value => value,
-    useMinimalLabels: false,
-    wrapLabels: true,
+    hide: false,
+    wrapLabels: false,
     ...xAxisOptions
   };
-  const yAxisOptionsWithDefaults = {
-    labelFormatter: value => value.toString(),
-    integersOnly: false,
-    ...yAxisOptions
-  };
 
-  function renderDefaultTooltipContent({
-    label,
-    value,
-    annotation
+  function renderTooltip({
+    data
   }) {
-    const formattedLabel = xAxisOptionsWithDefaults.labelFormatter(label);
-    const formattedValue = yAxisOptionsWithDefaults.labelFormatter(value);
+    if (renderTooltipContent != null) {
+      return renderTooltipContent({
+        data
+      });
+    }
+
+    const tooltipData = data.map(({
+      value,
+      label,
+      color,
+      type
+    }) => {
+      return {
+        label,
+        value: xAxisOptionsForChart.labelFormatter(value),
+        color,
+        type
+      };
+    });
     return /*#__PURE__*/React.createElement(TooltipContent, {
-      label: formattedLabel,
-      value: formattedValue,
-      annotation: annotation,
+      data: tooltipData,
       theme: theme
@@ -49,25 +60,28 @@ });
 
-  let annotationsLookupTable = {};
-
-  if (annotations != null && annotations.length > 0) {
-    annotationsLookupTable = normalizeData(annotations, 'dataIndex');
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, skipLinkText == null || skipLinkText.length === 0 || emptyState ? null : /*#__PURE__*/React.createElement(SkipLink, {
+  const annotationsLookupTable = normalizeData(annotations, 'dataSeriesIndex');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hideSkipLink ? null : /*#__PURE__*/React.createElement(SkipLink, {
     anchorId: skipLinkAnchorId.current
-  }, skipLinkText), /*#__PURE__*/React.createElement(ChartContainer, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(Chart, {
+  }, skipLinkText), direction === 'vertical' ? /*#__PURE__*/React.createElement(VerticalBarChart, {
+    annotationsLookupTable: annotationsLookupTable,
+    data: data,
+    xAxisOptions: xAxisOptionsForChart,
+    yAxisOptions: yAxisOptions,
+    theme: theme,
+    type: type,
+    emptyStateText: emptyStateText,
     isAnimated: isAnimated,
+    renderTooltipContent: renderTooltip
+  }) : /*#__PURE__*/React.createElement(HorizontalBarChart, {
+    annotationsLookupTable: annotationsLookupTable,
     data: data,
-    annotationsLookupTable: annotationsLookupTable,
-    renderTooltipContent: renderTooltipContent != null ? renderTooltipContent : renderDefaultTooltipContent,
-    xAxisOptions: xAxisOptionsWithDefaults,
-    yAxisOptions: yAxisOptionsWithDefaults,
-    emptyStateText: emptyStateText
-  })), skipLinkText == null || skipLinkText.length === 0 || emptyState ? null : /*#__PURE__*/React.createElement(SkipLink, {
-    anchorId: skipLinkAnchorId.current
-  }, skipLinkText));
+    isAnimated: isAnimated,
+    renderTooltipContent: renderTooltip,
+    theme: theme,
+    type: type,
+    xAxisOptions: xAxisOptionsForChart
+  }), hideSkipLink ? null : /*#__PURE__*/React.createElement(SkipLink.Anchor, {
+    id: skipLinkAnchorId.current
+  }));
 }
 
 export { BarChart };

build/esm/components/BarChart/components/AnnotationLine/AnnotationLine.js

@@ -8,28 +8,36 @@ import React from 'react';
 function AnnotationLine({
-  xPosition,
-  barWidth,
-  drawableHeight,
-  width: annotationWidth,
+  barSize,
+  color,
+  direction = 'vertical',
+  drawableSize,
+  offset = MEDIAN_OFFSET,
+  position,
   shouldAnimate = false,
-  color,
-  xOffset = MEDIAN_OFFSET
+  width: annotationWidth
 }) {
   const halfAnnotationWidth = annotationWidth / 2;
-  const offset = barWidth * xOffset;
+  const centerOffset = barSize * offset;
   const xValueClamped = clamp({
-    amount: xPosition + offset,
-    min: xPosition + halfAnnotationWidth,
-    max: xPosition + barWidth - halfAnnotationWidth
+    amount: position + centerOffset,
+    min: position + halfAnnotationWidth,
+    max: position + barSize - halfAnnotationWidth
   });
-  return /*#__PURE__*/React.createElement("line", {
-    className: classNames(shouldAnimate && styles.AnimatedLine),
-    stroke: color,
-    strokeWidth: annotationWidth,
+  const xy = direction === 'vertical' ? {
     x1: xValueClamped,
     x2: xValueClamped,
-    y1: drawableHeight,
+    y1: drawableSize,
     y2: 0
-  });
+  } : {
+    y1: xValueClamped,
+    y2: xValueClamped,
+    x1: drawableSize,
+    x2: 0
+  };
+  return /*#__PURE__*/React.createElement("line", Object.assign({
+    className: classNames(shouldAnimate && styles.AnimatedLine),
+    stroke: color,
+    strokeWidth: annotationWidth
+  }, xy));
 }
 
 export { AnnotationLine };

build/esm/components/HorizontalBarChart/Chart.js

 import React, { useState, useMemo, useCallback } from 'react';
-import { XMLNS, HORIZONTAL_BAR_GROUP_DELAY, BarChartMargin } from '../../constants.js';
+import { XMLNS, HORIZONTAL_BAR_GROUP_DELAY, BarChartMargin, HORIZONTAL_GROUP_LABEL_HEIGHT } from '../../constants.js';
 import { DataType } from '../../types.js';
@@ -13,2 +13,3 @@ import styles from './Chart.scss.js';
 import { useHorizontalBarSizes } from '../../hooks/useHorizontalBarSizes.js';
+import { useBarChartTooltipContent } from '../../hooks/useBarChartTooltipContent.js';
 import { useHorizontalTransitions } from '../../hooks/useHorizontalTransitions.js';
@@ -19,2 +20,3 @@ import { VerticalGridLines } from './components/VerticalGridLines/VerticalGridLines.js';
 import { HorizontalGroup } from '../shared/HorizontalGroup/HorizontalGroup.js';
+import { AnnotationLine } from '../BarChart/components/AnnotationLine/AnnotationLine.js';
 import { TooltipWrapper } from '../TooltipWrapper/TooltipWrapper.js';
@@ -26,2 +28,3 @@ import { getAlteredHorizontalBarPosition } from './utilities/getAlteredHorizontalBarPosition.js';
 function Chart({
+  annotationsLookupTable = {},
   data,
@@ -126,25 +129,8 @@ dimensions,
   }, [data, labelFormatter]);
-  const getTooltipMarkup = useCallback(activeIndex => {
-    if (activeIndex === -1) {
-      return null;
-    }
-
-    const tooltipData = data.map(({
-      name,
-      data,
-      color
-    }, index) => {
-      const {
-        value
-      } = data[activeIndex];
-      return {
-        label: `${name}`,
-        value: `${value}`,
-        color: color !== null && color !== void 0 ? color : seriesColors[index]
-      };
-    });
-    return renderTooltipContent({
-      data: tooltipData
-    });
-  }, [data, seriesColors, renderTooltipContent]);
+  const getTooltipMarkup = useBarChartTooltipContent({
+    annotationsLookupTable,
+    data,
+    seriesColors,
+    renderTooltipContent
+  });
   const {
@@ -219,3 +205,25 @@ transitions
     });
-  })), /*#__PURE__*/React.createElement(TooltipWrapper, {
+  }), /*#__PURE__*/React.createElement("g", null, Object.keys(annotationsLookupTable).map((key, dataIndex) => {
+    const annotation = annotationsLookupTable[Number(key)];
+
+    if (annotation == null) {
+      return null;
+    }
+
+    const xPosition = groupHeight * annotation.dataSeriesIndex;
+    const xPositionValue = xPosition == null ? 0 : xPosition;
+    const leftOffset = barHeight * annotation.dataPointIndex;
+    const position = xPositionValue + HORIZONTAL_GROUP_LABEL_HEIGHT + leftOffset;
+    return /*#__PURE__*/React.createElement(AnnotationLine, {
+      barSize: barHeight,
+      color: annotation.color,
+      direction: "horizontal",
+      drawableSize: width,
+      key: `annotation${dataIndex}${annotation.dataPointIndex}`,
+      position: position,
+      shouldAnimate: isAnimated,
+      width: annotation.width,
+      offset: annotation.offset
+    });
+  }))), /*#__PURE__*/React.createElement(TooltipWrapper, {
     bandwidth: groupBarsAreaHeight,
@@ -222,0 +230,0 @@ chartDimensions: {

build/esm/components/HorizontalBarChart/HorizontalBarChart.js

@@ -5,5 +5,5 @@ import React from 'react';
 import { ChartContainer } from '../ChartContainer/ChartContainer.js';
-import { TooltipContent } from '../TooltipContent/TooltipContent.js';
 
 function HorizontalBarChart({
+  annotationsLookupTable = {},
   data,
@@ -19,2 +19,3 @@ isAnimated = true,
     hide: false,
+    wrapLabels: false,
     ...xAxisOptions
@@ -25,35 +26,9 @@ };
   } = usePrefersReducedMotion();
-
-  function renderTooltip({
-    data
-  }) {
-    if (renderTooltipContent != null) {
-      return renderTooltipContent({
-        data
-      });
-    }
-
-    const tooltipData = data.map(({
-      value,
-      label,
-      color
-    }) => {
-      return {
-        label,
-        value: xAxisOptionsForChart.labelFormatter(value),
-        color
-      };
-    });
-    return /*#__PURE__*/React.createElement(TooltipContent, {
-      data: tooltipData,
-      theme: theme
-    });
-  }
-
   return /*#__PURE__*/React.createElement(ChartContainer, {
     theme: theme
   }, /*#__PURE__*/React.createElement(Chart, {
+    annotationsLookupTable: annotationsLookupTable,
     data: data,
     isAnimated: isAnimated && !prefersReducedMotion,
-    renderTooltipContent: renderTooltip,
+    renderTooltipContent: renderTooltipContent,
     type: type,
@@ -60,0 +35,0 @@ xAxisOptions: xAxisOptionsForChart

build/esm/components/LineChart/Chart.js

@@ -36,3 +36,3 @@ import React, { useState, useRef, useMemo, useCallback } from 'react';
 function Chart({
-  series,
+  data,
   dimensions,
@@ -61,3 +61,3 @@ renderTooltipContent,
   const fontSize = width < SMALL_SCREEN ? SMALL_FONT_SIZE : FONT_SIZE;
-  const emptyState = series.length === 0;
+  const emptyState = data.length === 0;
   const {
@@ -68,3 +68,3 @@ ticks: initialTicks
     drawableHeight: height - LineChartMargin.Top,
-    series,
+    data,
     formatYAxisLabel: yAxisOptions.labelFormatter,
@@ -75,3 +75,3 @@ integersOnly: yAxisOptions.integersOnly
   const xAxisDetails = useLinearXAxisDetails({
-    series,
+    data,
     fontSize,
@@ -95,3 +95,3 @@ width: width - selectedTheme.grid.horizontalMargin * 2,
     drawableHeight,
-    series,
+    data,
     formatYAxisLabel: yAxisOptions.labelFormatter,
@@ -101,3 +101,3 @@ integersOnly: yAxisOptions.integersOnly
   const getTooltipMarkup = useCallback(index => {
-    const data = series.reduce((accumulator, {
+    const content = data.reduce((accumulator, {
       data,
@@ -111,8 +111,10 @@ name,
       if (currentDataPoint != null) {
+        var _currentDataPoint$val;
+
         accumulator.push({
           point: {
-            label: currentDataPoint.label,
-            value: currentDataPoint.rawValue
+            label: `${currentDataPoint.key}`,
+            value: (_currentDataPoint$val = currentDataPoint.value) !== null && _currentDataPoint$val !== void 0 ? _currentDataPoint$val : 0
           },
-          name,
+          name: name !== null && name !== void 0 ? name : '',
           color,
@@ -131,6 +133,6 @@ lineStyle
     return renderTooltipContent({
-      data
+      data: content
     });
-  }, [renderTooltipContent, series]);
-  const reversedSeries = useMemo(() => series.slice().reverse(), [series]);
+  }, [renderTooltipContent, data]);
+  const reversedSeries = useMemo(() => data.slice().reverse(), [data]);
   const marginBetweenLabelsAndData = SPACING_BASE_TIGHT;
@@ -151,4 +153,4 @@ const dataStartPosition = axisMargin + Number(selectedTheme.grid.horizontalMargin) + marginBetweenLabelsAndData;
     const generator = line().x((_, index) => xScale == null ? 0 : xScale(index)).y(({
-      rawValue
-    }) => yScale(rawValue));
+      value
+    }) => yScale(value !== null && value !== void 0 ? value : 0));
 
@@ -165,3 +167,3 @@ if (selectedTheme.line.hasSpline) {
   } = useLinearChartAnimations({
-    series: reversedSeries,
+    data: reversedSeries,
     lineGenerator,
@@ -283,5 +285,5 @@ activeIndex,
   })), emptyState ? null : /*#__PURE__*/React.createElement(VisuallyHiddenRows, {
+    data: data,
     formatYAxisLabel: yAxisOptions.labelFormatter,
-    xAxisLabels: formattedLabels,
-    series: series
+    xAxisLabels: formattedLabels
   }), /*#__PURE__*/React.createElement("g", {
@@ -349,4 +351,8 @@ transform: `translate(${dataStartPosition},${LineChartMargin.Top})`
     }) : null, data.map(({
-      rawValue
+      value
     }, dataIndex) => {
+      if (value == null) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement(Point, {
@@ -358,3 +364,3 @@ dataType: DataType.Point,
         cx: xScale(dataIndex),
-        cy: yScale(rawValue),
+        cy: yScale(value),
         active: activeIndex === dataIndex,
@@ -361,0 +367,0 @@ index: dataIndex,

build/esm/components/LineChart/components/GradientArea/GradientArea.js

@@ -21,4 +21,4 @@ import React, { useMemo } from 'react';
   const areaGenerator = area().x((_, index) => xScale(index)).y0(yScale(0)).y1(({
-    rawValue
-  }) => yScale(rawValue));
+    value
+  }) => yScale(value !== null && value !== void 0 ? value : 0));
 
@@ -25,0 +25,0 @@ if (hasSpline) {

build/esm/components/LineChart/components/GradientArea/utilities/get-gradient-details.js

 const HIGHEST_ALPHA = 0.25;
 function getGradientDetails(data) {
-  const max = Math.max(...data.map(({
-    rawValue
-  }) => rawValue), 0);
-  const min = Math.min(...data.map(({
-    rawValue
-  }) => rawValue), 0);
+  const values = data.map(({
+    value
+  }) => value).filter(Boolean);
+  const max = Math.max(...values, 0);
+  const min = Math.min(...values, 0);
   const allNegatives = max <= 0 && min <= 0;
@@ -10,0 +9,0 @@ const allPositives = min === 0 && max >= 0;

build/esm/components/LineChart/components/Line/Line.js

@@ -19,3 +19,4 @@ import React from 'react';
   const path = lineGenerator(series.data);
-  const isSolidLine = series.lineStyle == null || series.lineStyle === 'solid';
+  const isSolidLine = series.isComparison !== true;
+  const lineStyle = series.isComparison ? 'dotted' : 'solid';
   const styles = useSpring({
@@ -53,3 +54,3 @@ from: isSolidLine ? {
     strokeLinecap: "round",
-    strokeDasharray: StrokeDasharray[series.lineStyle]
+    strokeDasharray: StrokeDasharray[lineStyle]
   }), children);
@@ -56,0 +57,0 @@ });

build/esm/components/LineChart/hooks/use-y-scale.js

@@ -11,3 +11,3 @@ import { useMemo } from 'react';
   drawableHeight,
-  series,
+  data,
   formatYAxisLabel,
@@ -23,3 +23,3 @@ fontSize,
     const [minY, maxY] = yAxisMinMax({
-      series,
+      data,
       integersOnly
@@ -60,3 +60,3 @@ });
     };
-  }, [series, integersOnly, drawableHeight, formatYAxisLabel, fontSize]);
+  }, [data, integersOnly, drawableHeight, formatYAxisLabel, fontSize]);
   return {
@@ -63,0 +63,0 @@ yScale,

build/esm/components/LineChart/LineChart.js

@@ -15,3 +15,3 @@ import React, { useRef } from 'react';
 function LineChart({
-  series,
+  data,
   renderTooltipContent,
@@ -26,3 +26,3 @@ skipLinkText,
   const selectedTheme = useTheme(theme);
-  const seriesColors = useThemeSeriesColors(series, selectedTheme);
+  const seriesColors = useThemeSeriesColors(data, selectedTheme);
   const {
@@ -85,19 +85,18 @@ prefersReducedMotion
 
-  const areaOpacity = getOpacityByDataLength(series.length);
-  const seriesWithDefaults = series.map((series, index) => {
-    var _series$lineStyle, _series$color;
+  const areaOpacity = getOpacityByDataLength(data.length);
+  const dataWithDefaults = data.map((series, index) => {
+    var _series$color;
 
     const seriesColor = seriesColors[index];
-    const isSolidLine = series.lineStyle == null || series.lineStyle === 'solid';
     const areaColor = isGradientType(seriesColor) ? getAverageColor(seriesColor[0].color, seriesColor[seriesColor.length - 1].color) : seriesColor;
     return {
-      lineStyle: (_series$lineStyle = series.lineStyle) !== null && _series$lineStyle !== void 0 ? _series$lineStyle : selectedTheme.line.style,
+      lineStyle: series.isComparison ? 'dotted' : selectedTheme.line.style,
       ...series,
-      areaColor: isSolidLine ? changeColorOpacity(areaColor, areaOpacity) : undefined,
+      areaColor: series.isComparison ? undefined : changeColorOpacity(areaColor, areaOpacity),
       // We want to override the color, not set a default
       // so it has to come last
-      color: isSolidLine ? (_series$color = series.color) !== null && _series$color !== void 0 ? _series$color : seriesColors[index] : seriesColors[index]
+      color: series.isComparison ? seriesColors[index] : (_series$color = series.color) !== null && _series$color !== void 0 ? _series$color : seriesColors[index]
     };
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, skipLinkText == null || skipLinkText.length === 0 || series.length === 0 ? null : /*#__PURE__*/React.createElement(SkipLink, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, skipLinkText == null || skipLinkText.length === 0 || data.length === 0 ? null : /*#__PURE__*/React.createElement(SkipLink, {
     anchorId: skipLinkAnchorId.current
@@ -107,3 +106,3 @@ }, skipLinkText), /*#__PURE__*/React.createElement(ChartContainer, {
   }, /*#__PURE__*/React.createElement(Chart, {
-    series: seriesWithDefaults,
+    data: dataWithDefaults,
     xAxisOptions: xAxisOptionsWithDefaults,
@@ -110,0 +109,0 @@ yAxisOptions: yAxisOptionsWithDefaults,

build/esm/components/LineChart/utilities/y-axis-min-max.js

 import { EMPTY_STATE_CHART_MIN, EMPTY_STATE_CHART_MAX, DEFAULT_MAX_Y } from '../../../constants.js';
 
 function yAxisMinMax({
-  series,
+  data,
   integersOnly
 }) {
-  if (series.length === 0) {
+  if (data.length === 0) {
     return [EMPTY_STATE_CHART_MIN, EMPTY_STATE_CHART_MAX];
@@ -13,10 +13,14 @@ }
   let maxY = -Infinity;
-  series.forEach(({
+  data.forEach(({
     data
   }) => {
     data.forEach(({
-      rawValue
+      value
     }) => {
-      minY = Math.min(minY, rawValue);
-      maxY = Math.max(maxY, rawValue);
+      if (value == null) {
+        return;
+      }
+
+      minY = Math.min(minY, value);
+      maxY = Math.max(maxY, value);
     });
@@ -23,0 +27,0 @@ });

build/esm/components/StackedAreaChart/Chart.js

@@ -37,3 +37,3 @@ import React, { useState, useRef, useMemo, useCallback } from 'react';
   xAxisOptions,
-  series,
+  data,
   dimensions,
@@ -52,3 +52,3 @@ formatXAxisLabel,
   const selectedTheme = useTheme(theme);
-  const colors = useThemeSeriesColors(series, selectedTheme);
+  const colors = useThemeSeriesColors(data, selectedTheme);
   const [activePointIndex, setActivePointIndex] = useState(null);
@@ -65,7 +65,7 @@ const [svgRef, setSvgRef] = useState(null);
   const hideXAxis = xAxisOptions.hide || selectedTheme.xAxis.hide;
-  const areaStack = useMemo(() => stack().keys(series.map(({
+  const areaStack = useMemo(() => stack().keys(data.map(({
     name
-  }) => name)).order(stackOrderReverse).offset(stackOffsetNone), [series]);
+  }) => name !== null && name !== void 0 ? name : '')).order(stackOrderReverse).offset(stackOffsetNone), [data]);
   const xAxisLabels = xAxisOptions.labels;
-  const formattedData = useMemo(() => xAxisLabels.map((_, labelIndex) => series.reduce((acc, {
+  const formattedData = useMemo(() => xAxisLabels.map((_, labelIndex) => data.reduce((acc, {
     name,
@@ -75,9 +75,9 @@ data
     const {
-      rawValue
+      value
     } = data[labelIndex];
     const dataPoint = {
-      [name]: rawValue
+      [name !== null && name !== void 0 ? name : '']: value
     };
     return Object.assign(acc, dataPoint);
-  }, {})), [xAxisLabels, series]);
+  }, {})), [xAxisLabels, data]);
   const fontSize = width < SMALL_SCREEN ? SMALL_FONT_SIZE : FONT_SIZE;
@@ -94,3 +94,3 @@ const stackedValues = useMemo(() => areaStack(formattedData), [areaStack, formattedData]);
   const xAxisDetails = useLinearXAxisDetails({
-    series,
+    data,
     fontSize,
@@ -126,3 +126,3 @@ width: width - selectedTheme.grid.horizontalMargin * 2,
   const getTooltipMarkup = useCallback(index => {
-    const data = series.reduce(function removeNullsAndFormatData(tooltipData, {
+    const content = data.reduce(function removeNullsAndFormatData(tooltipData, {
       name,
@@ -132,6 +132,6 @@ data
       const {
-        rawValue
+        value
       } = data[index];
 
-      if (rawValue == null) {
+      if (value == null) {
         return tooltipData;
@@ -142,4 +142,4 @@ }
         color: colors[seriesIndex],
-        label: name,
-        value: rawValue
+        label: name !== null && name !== void 0 ? name : '',
+        value
       });
@@ -150,10 +150,10 @@ return tooltipData;
     return renderTooltipContent({
-      data,
+      data: content,
       title
     });
-  }, [colors, series, xAxisLabels, renderTooltipContent]);
+  }, [colors, data, xAxisLabels, renderTooltipContent]);
   const lineGenerator = useMemo(() => {
     const generator = line().x((_, index) => xScale == null ? 0 : xScale(index)).y(({
-      rawValue
-    }) => yScale(rawValue));
+      value
+    }) => yScale(value !== null && value !== void 0 ? value : 0));
 
@@ -170,7 +170,6 @@ if (selectedTheme.line.hasSpline) {
         name: '',
-        color: null,
         data: value.map(val => {
           return {
-            label: '',
-            rawValue: val[1]
+            key: '',
+            value: val[1]
           };
@@ -184,3 +183,3 @@ })
   } = useLinearChartAnimations({
-    series: seriesForAnimation,
+    data: seriesForAnimation,
     lineGenerator,
@@ -251,5 +250,5 @@ activeIndex: activePointIndex,
   })), /*#__PURE__*/React.createElement(VisuallyHiddenRows, {
+    data: data,
     formatYAxisLabel: formatYAxisLabel,
-    xAxisLabels: formattedXAxisLabels,
-    series: series
+    xAxisLabels: formattedXAxisLabels
   }), /*#__PURE__*/React.createElement(StackedAreas, {
@@ -256,0 +255,0 @@ width: drawableWidth,

build/esm/components/StackedAreaChart/StackedAreaChart.js

@@ -11,3 +11,3 @@ import React, { useRef } from 'react';
   yAxisOptions,
-  series,
+  data,
   renderTooltipContent,
@@ -22,3 +22,3 @@ isAnimated = false,
 
-  if (series.length === 0) {
+  if (data.length === 0) {
     return null;
@@ -56,3 +56,3 @@ }
     xAxisOptions: xAxisOptions,
-    series: series,
+    data: data,
     formatXAxisLabel: xFormatter,
@@ -59,0 +59,0 @@ formatYAxisLabel: yFormatter,

build/esm/components/TooltipContent/TooltipContent.js

 import React from 'react';
 import styles from './TooltipContent.scss.js';
 import { useTheme } from '../../hooks/useTheme.js';
-import { SquareColorPreview } from '../SquareColorPreview/SquareColorPreview.js';
+import { AnnotationRow } from './components/AnnotationRow.js';
+import { DefaultRow } from './components/DefaultRow.js';
 
+let TooltipRowType;
+
+(function (TooltipRowType) {
+  TooltipRowType[TooltipRowType["Default"] = 0] = "Default";
+  TooltipRowType[TooltipRowType["Annotation"] = 1] = "Annotation";
+})(TooltipRowType || (TooltipRowType = {}));
+
 function TooltipContent({
@@ -19,3 +27,3 @@ title,
       background: tooltip.backgroundColor,
-      color: tooltip.labelColor
+      color: tooltip.valueColor
     }
@@ -27,16 +35,27 @@ }, title == null ? null : /*#__PURE__*/React.createElement("div", {
     label,
-    value
-  }, index) => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: `${label}-${index}`
-  }, /*#__PURE__*/React.createElement(SquareColorPreview, {
-    color: color
-  }), /*#__PURE__*/React.createElement("p", {
-    className: styles.Label
-  }, label), /*#__PURE__*/React.createElement("p", {
-    className: styles.Value,
-    style: {
-      color: tooltip.valueColor
+    value,
+    type = TooltipRowType.Default
+  }, index) => {
+    switch (type) {
+      default:
+      case TooltipRowType.Default:
+        return /*#__PURE__*/React.createElement(DefaultRow, {
+          color: color,
+          key: `${label}-${index}`,
+          label: label,
+          value: value
+        });
+
+      case TooltipRowType.Annotation:
+        return /*#__PURE__*/React.createElement(AnnotationRow, {
+          key: `${label}-${index}`,
+          label: label,
+          value: value,
+          theme: theme
+        });
     }
-  }, value))), total == null ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("p", {
-    className: styles.Label
+  }), total == null ? null : /*#__PURE__*/React.createElement("div", {
+    className: styles.Row
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles.TotalLabel
   }, total.label), /*#__PURE__*/React.createElement("p", {
@@ -47,2 +66,2 @@ className: styles.Value
 
-export { TooltipContent };
+export { TooltipContent, TooltipRowType };

build/esm/components/TooltipContent/TooltipContent.scss.js

@@ -64,8 +64,12 @@ var styles = {
   "colorYellow90": "#74742c",
-  "Container": "_Container_1iny0_3",
-  "Title": "_Title_1iny0_5",
-  "Label": "_Label_1iny0_7",
-  "Value": "_Value_1iny0_9"
+  "Container": "_Container_1mvd1_3",
+  "Row": "_Row_1mvd1_5",
+  "Title": "_Title_1mvd1_9",
+  "Label": "_Label_1mvd1_11",
+  "AnnotationLabel": "_AnnotationLabel_1mvd1_13",
+  "TotalLabel": "_TotalLabel_1mvd1_15",
+  "Value": "_Value_1mvd1_17",
+  "AnnotationValue": "_AnnotationValue_1mvd1_19"
 };
 
 export { styles as default };

build/esm/components/VisuallyHiddenRows/VisuallyHiddenRows.js

@@ -5,3 +5,3 @@ import React from 'react';
 const VisuallyHiddenRows = /*#__PURE__*/React.memo(function Rows({
-  series,
+  data,
   xAxisLabels,
@@ -20,3 +20,3 @@ formatYAxisLabel
     }, xAxisLabel);
-  })), series.map(({
+  })), data.map(({
     name,
@@ -32,10 +32,10 @@ data
     }, name), data.map(({
-      rawValue,
-      label
+      value,
+      key
     }, index) => {
       return /*#__PURE__*/React.createElement("text", {
-        key: `cell-${name}-${rawValue}-${label}-${index}`,
+        key: `cell-${name}-${value}-${key}-${index}`,
         role: "cell",
         className: styles.VisuallyHidden
-      }, rawValue == null ? '' : formatYAxisLabel(rawValue));
+      }, value == null ? '' : formatYAxisLabel(value));
     }));
@@ -42,0 +42,0 @@ }));

build/esm/hooks/use-linear-chart-animations.js

@@ -15,7 +15,7 @@ import { useCallback, useMemo } from 'react';
   lineGenerator,
-  series,
+  data,
   isAnimated
 }) {
   const currentIndex = activeIndex == null ? 0 : activeIndex;
-  const immediate = !isAnimated || series.length === 0 || activeIndex == null; // Create off screen paths used for sub path and total path length calculations
+  const immediate = !isAnimated || data.length === 0 || activeIndex == null; // Create off screen paths used for sub path and total path length calculations
 
@@ -26,7 +26,7 @@ const createOffScreenPath = useCallback(data => {
     return offscreenPath;
-  }, [lineGenerator]); // Get total lengths of paths for all series
+  }, [lineGenerator]); // Get total lengths of paths for all data
 
   const totalPaths = useMemo(() => {
     if (immediate) return null;
-    return series.map(({
+    return data.map(({
       data
@@ -40,7 +40,7 @@ }) => {
     });
-  }, [immediate, createOffScreenPath, series]); // Get length of subpaths at current index for all series
+  }, [immediate, createOffScreenPath, data]); // Get length of subpaths at current index for all data
 
   const subPaths = useMemo(() => {
     if (immediate) return null;
-    return series.map(({
+    return data.map(({
       data
@@ -54,3 +54,3 @@ }) => {
     });
-  }, [immediate, createOffScreenPath, currentIndex, series]); // Get percentage of subpath compared to total length
+  }, [immediate, createOffScreenPath, currentIndex, data]); // Get percentage of subpath compared to total length
 
@@ -63,7 +63,7 @@ const getPercentage = useCallback((subpathLength, totalLength) => {
     return subpathLength / totalLength * 100;
-  }, []); // Calculate percentage for subpath compared to total length of all series
+  }, []); // Calculate percentage for subpath compared to total length of all data
 
   const percentages = useMemo(() => {
     if (immediate || !totalPaths || !subPaths) return null;
-    return series.map((_, index) => {
+    return data.map((_, index) => {
       const totalLength = totalPaths[index].length;
@@ -73,3 +73,3 @@ const subPath = subPaths[index];
     });
-  }, [immediate, totalPaths, subPaths, series, getPercentage]); // Using the percentage, get the length to calculate the coordinates at the current index
+  }, [immediate, totalPaths, subPaths, data, getPercentage]); // Using the percentage, get the length to calculate the coordinates at the current index
 
@@ -76,0 +76,0 @@ const getCoordinatesFromPercentage = useCallback((percent, path, totalLength) => {

build/esm/hooks/use-theme-series-colors.js

@@ -26,5 +26,6 @@ import { useMemo } from 'react';
       color,
-      lineStyle
+      lineStyle,
+      isComparison
     }) => {
-      if (lineStyle && lineStyle !== 'solid') {
+      if (isComparison === true || lineStyle && lineStyle !== 'solid') {
         return selectedTheme.line.dottedStrokeColor;
@@ -31,0 +32,0 @@ } // If the series doesn't have a color property

build/esm/hooks/useLinearXAxisDetails.js

@@ -15,3 +15,3 @@ import { useMemo } from 'react';
 function useLinearXAxisDetails({
-  series,
+  data,
   fontSize,
@@ -46,3 +46,3 @@ width,
   }, [fontSize, initialTicks, width]);
-  const longestSeriesLastIndex = useMemo(() => series.reduce((max, currentSeries) => Math.max(max, currentSeries.data.length - 1), 0), [series]); // using the estimated width, use the xscale hook so we can then get the d3's estimated ticks
+  const longestSeriesLastIndex = useMemo(() => data.reduce((max, currentSeries) => Math.max(max, currentSeries.data.length - 1), 0), [data]); // using the estimated width, use the xscale hook so we can then get the d3's estimated ticks
 
@@ -49,0 +49,0 @@ const initialXScale = useLinearXScale({

build/esm/index.js

@@ -6,4 +6,2 @@ export { DEFAULT_THEME as PolarisVizDefaultTheme, LIGHT_THEME as PolarisVizLightheme } from './constants.js';
 export { SimpleNormalizedChart } from './components/SimpleNormalizedChart/SimpleNormalizedChart.js';
-export { BarChart } from './components/BarChart/BarChart.js';
-export { TooltipContent as BarChartTooltipContent } from './components/BarChart/components/TooltipContent/TooltipContent.js';
 export { LineChart } from './components/LineChart/LineChart.js';
@@ -13,3 +11,3 @@ export { TooltipContent as LineChartTooltipContent } from './components/LineChart/components/TooltipContent/TooltipContent.js';
 export { Legend } from './components/Legend/Legend.js';
-export { MultiSeriesBarChart } from './components/MultiSeriesBarChart/MultiSeriesBarChart.js';
+export { BarChart } from './components/BarChart/BarChart.js';
 export { TooltipContent } from './components/TooltipContent/TooltipContent.js';
@@ -19,2 +17,1 @@ export { LinePreview } from './components/LinePreview/LinePreview.js';
 export { PolarisVizProvider } from './components/PolarisVizProvider/PolarisVizProvider.js';
-export { HorizontalBarChart } from './components/HorizontalBarChart/HorizontalBarChart.js';

build/esm/utilities/should-rotate-zero-bars.js

 function shouldRotateZeroBars(data) {
   let allValuesZero = true;
   const allValuesLessThanOne = data.every(({
-    rawValue
+    value
   }) => {
-    if (rawValue !== 0) {
+    if (value !== 0) {
       allValuesZero = false;
     }
 
-    if (rawValue > 0) {
+    if (value !== null && value > 0) {
       return false;
@@ -12,0 +12,0 @@ }

build/ts/src/components/BarChart/BarChart.d.ts

 import React from 'react';
-import type { XAxisOptions, YAxisOptions } from '../../types';
-import type { BarChartData, RenderTooltipContentData, Annotation } from './types';
+import type { ChartType, DataSeries, Direction } from '../../types';
+import type { RenderTooltipContentData, XAxisOptions, YAxisOptions } from '../BarChart';
+import type { Annotation } from './types';
 export interface BarChartProps {
-    data: BarChartData[];
+    data: DataSeries[];
+    renderTooltipContent?(data: RenderTooltipContentData): React.ReactNode;
     annotations?: Annotation[];
-    skipLinkText?: string;
+    direction?: Direction;
     emptyStateText?: string;
     isAnimated?: boolean;
-    renderTooltipContent?: (data: RenderTooltipContentData) => React.ReactNode;
-    xAxisOptions?: XAxisOptions;
-    yAxisOptions?: YAxisOptions;
+    skipLinkText?: string;
     theme?: string;
+    type?: ChartType;
+    xAxisOptions?: Partial<XAxisOptions>;
+    yAxisOptions?: Partial<YAxisOptions>;
 }
-export declare function BarChart({ data, annotations, renderTooltipContent, emptyStateText, isAnimated, skipLinkText, xAxisOptions, yAxisOptions, theme, }: BarChartProps): JSX.Element;
+export declare function BarChart({ annotations, data, direction, emptyStateText, isAnimated, renderTooltipContent, skipLinkText, theme, type, xAxisOptions, yAxisOptions, }: BarChartProps): JSX.Element;
 //# sourceMappingURL=BarChart.d.ts.map

build/ts/src/components/BarChart/components/AnnotationLine/AnnotationLine.d.ts

 /// <reference types="react" />
+import type { Direction } from 'types';
 import type { Annotation } from '../../types';
-export interface AnnotationLineProps extends Omit<Annotation, 'dataIndex'> {
-    xPosition: number;
-    barWidth: number;
-    drawableHeight: number;
+export interface AnnotationLineProps extends Omit<Annotation, 'dataPointIndex' | 'dataSeriesIndex'> {
+    position: number;
+    barSize: number;
+    drawableSize: number;
     shouldAnimate?: boolean;
+    direction?: Direction;
 }
-export declare function AnnotationLine({ xPosition, barWidth, drawableHeight, width: annotationWidth, shouldAnimate, color, xOffset, }: AnnotationLineProps): JSX.Element;
+export declare function AnnotationLine({ barSize, color, direction, drawableSize, offset, position, shouldAnimate, width: annotationWidth, }: AnnotationLineProps): JSX.Element;
 //# sourceMappingURL=AnnotationLine.d.ts.map

build/ts/src/components/BarChart/index.d.ts

 export { BarChart } from './BarChart';
 export type { BarChartProps } from './BarChart';
-export { TooltipContent as BarChartTooltipContent } from './components';
-export type { TooltipContentProps as BarChartTooltipContentProps } from './components';
+export type { AnnotationLookupTable, RenderTooltipContentData, XAxisOptions, YAxisOptions, } from './types';
+export { AnnotationLine } from './components/AnnotationLine';
 //# sourceMappingURL=index.d.ts.map

build/ts/src/components/BarChart/types.d.ts

@@ -1,14 +0,20 @@
-import type { Color } from 'types';
-export interface BarChartData {
-    barColor?: Color;
-    label: string;
-    rawValue: number;
-}
+import type { TooltipData } from 'components/TooltipContent';
+import type { LabelFormatter } from 'types';
 export interface RenderTooltipContentData {
-    label: string;
-    value: number;
+    data: TooltipData[];
+    title?: string;
     annotation?: Annotation;
 }
+export interface XAxisOptions {
+    labelFormatter?: LabelFormatter;
+    hide?: boolean;
+    wrapLabels?: boolean;
+}
+export interface YAxisOptions {
+    labelFormatter: LabelFormatter;
+    integersOnly: boolean;
+}
 export interface Annotation {
-    dataIndex: number;
+    dataSeriesIndex: number;
+    dataPointIndex: number;
     width: number;
@@ -21,3 +27,3 @@ color: string;
     ariaLabel?: string;
-    xOffset?: number;
+    offset?: number;
 }
@@ -24,0 +30,0 @@ export interface AnnotationLookupTable {

build/ts/src/components/Docs/stories/components/index.d.ts

@@ -7,3 +7,3 @@ export { ComponentContainer } from './ComponentContainer';
 export { PropertyTable } from './PropertyTable';
-export { SampleSparkBarChart, SampleSparkLineChart, SampleLineChart, SampleBarchart, SampleMultiseriesBarChart, SampleStackedAreaChart, SampleSimpleNormalizedChart, } from './SampleComponents';
+export { SampleSparkLineChart, SampleLineChart, SampleBarChart, SampleStackedAreaChart, SampleSimpleNormalizedChart, } from './SampleComponents';
 //# sourceMappingURL=index.d.ts.map

build/ts/src/components/Docs/stories/components/SampleComponents.d.ts

 /// <reference types="react" />
-export declare const SampleSparkBarChart: ({ theme }?: {
-    theme: string;
-}) => JSX.Element;
 export declare const SampleSparkLineChart: ({ theme }?: {
@@ -11,7 +8,4 @@ theme: string;
 }) => JSX.Element;
-export declare const SampleBarchart: ({ theme }?: {
+export declare const SampleBarChart: ({ theme, seriesLength }?: {
     theme: string;
-}) => JSX.Element;
-export declare const SampleMultiseriesBarChart: ({ theme, seriesLength }?: {
-    theme: string;
     seriesLength?: number | undefined;
@@ -18,0 +12,0 @@ }) => JSX.Element;

build/ts/src/components/Docs/stories/components/Title/Title.d.ts

@@ -1,6 +0,7 @@
-import React from 'react';
-export declare function Title({ type, children, }: {
+import React, { CSSProperties } from 'react';
+export declare function Title({ type, children, style, }: {
     type: string;
     children: React.ReactChildren;
+    style: CSSProperties;
 }): JSX.Element;
 //# sourceMappingURL=Title.d.ts.map

build/ts/src/components/HorizontalBarChart/Chart.d.ts

 import { ReactNode } from 'react';
 import { ChartType, DataSeries, Dimensions } from '../../types';
-import type { RenderTooltipContentData, XAxisOptions } from './types';
+import type { AnnotationLookupTable, RenderTooltipContentData, XAxisOptions } from '../BarChart';
 export interface ChartProps {
@@ -10,6 +10,7 @@ isAnimated: boolean;
     xAxisOptions: Required<XAxisOptions>;
+    annotationsLookupTable?: AnnotationLookupTable;
     dimensions?: Dimensions;
     theme?: string;
 }
-export declare function Chart({ data, dimensions, isAnimated, renderTooltipContent, theme, type, xAxisOptions, }: ChartProps): JSX.Element;
+export declare function Chart({ annotationsLookupTable, data, dimensions, isAnimated, renderTooltipContent, theme, type, xAxisOptions, }: ChartProps): JSX.Element;
 //# sourceMappingURL=Chart.d.ts.map

build/ts/src/components/HorizontalBarChart/HorizontalBarChart.d.ts

 import { ReactNode } from 'react';
+import type { AnnotationLookupTable, RenderTooltipContentData, XAxisOptions } from '../BarChart';
 import type { ChartType, DataSeries } from '../../types';
-import type { RenderTooltipContentData, XAxisOptions } from './types';
 export interface HorizontalBarChartProps {
     data: DataSeries[];
+    renderTooltipContent: (data: RenderTooltipContentData) => ReactNode;
+    xAxisOptions: XAxisOptions;
+    annotationsLookupTable?: AnnotationLookupTable;
     isAnimated?: boolean;
-    renderTooltipContent?: (data: RenderTooltipContentData) => ReactNode;
     theme?: string;
     type?: ChartType;
-    xAxisOptions?: XAxisOptions;
 }
-export declare function HorizontalBarChart({ data, isAnimated, renderTooltipContent, theme, type, xAxisOptions, }: HorizontalBarChartProps): JSX.Element;
+export declare function HorizontalBarChart({ annotationsLookupTable, data, isAnimated, renderTooltipContent, theme, type, xAxisOptions, }: HorizontalBarChartProps): JSX.Element;
 //# sourceMappingURL=HorizontalBarChart.d.ts.map

build/ts/src/components/index.d.ts

 export { Point } from './Point';
-export { Bar } from './Bar';
 export { Crosshair } from './Crosshair';
@@ -9,4 +8,2 @@ export { HorizontalGridLines } from './HorizontalGridLines';
 export type { SparkBarChartProps } from './SparkBarChart';
-export { BarChart, BarChartTooltipContent } from './BarChart';
-export type { BarChartProps, BarChartTooltipContentProps } from './BarChart';
 export { LineChart, LineChartTooltipContent } from './LineChart';
@@ -22,6 +19,6 @@ export type { LineChartProps, LineChartTooltipContentProps } from './LineChart';
 export { LinearXAxis } from './LinearXAxis';
-export { MultiSeriesBarChart } from './MultiSeriesBarChart';
-export type { MultiSeriesBarChartProps } from './MultiSeriesBarChart';
-export { TooltipContent } from './TooltipContent';
-export type { TooltipContentProps } from './TooltipContent';
+export { BarChart } from './BarChart';
+export type { BarChartProps } from './BarChart';
+export { TooltipContent, TooltipRowType } from './TooltipContent';
+export type { TooltipContentProps, TooltipData } from './TooltipContent';
 export { BarChartXAxis } from './BarChartXAxis';
@@ -36,6 +33,4 @@ export { SkipLink } from './SkipLink';
 export { TooltipWrapper } from './TooltipWrapper';
-export { HorizontalBarChart } from './HorizontalBarChart';
-export type { HorizontalBarChartProps } from './HorizontalBarChart';
 export { SimpleBarChart } from './SimpleBarChart';
 export type { SimpleBarChartProps } from './SimpleBarChart';
 //# sourceMappingURL=index.d.ts.map

build/ts/src/components/Legend/Legend.d.ts

 /// <reference types="react" />
-import type { LegacyDataSeries, Data, NullableData, LineStyle, Color } from '../../types';
-declare type LegendData = LegacyDataSeries<Data | NullableData, Color>;
-interface LegendSeries extends Omit<LegendData, 'data'> {
+import type { LineStyle, Color } from '../../types';
+interface LegendSeries {
     lineStyle?: LineStyle;
-    data?: (Data | NullableData)[];
+    name?: string;
+    color?: Color;
 }
@@ -8,0 +8,0 @@ export interface Props {

build/ts/src/components/LineChart/Chart.d.ts

 import React from 'react';
 import { Dimensions } from '../../types';
-import type { RenderTooltipContentData, XAxisOptions, YAxisOptions, SeriesWithDefaults } from './types';
+import type { RenderTooltipContentData, XAxisOptions, YAxisOptions, DataWithDefaults } from './types';
 interface Props {
     isAnimated: boolean;
     renderTooltipContent: (data: RenderTooltipContentData) => React.ReactNode;
-    series: SeriesWithDefaults[];
+    data: DataWithDefaults[];
     xAxisOptions: XAxisOptions;
@@ -14,4 +14,4 @@ yAxisOptions: Required<YAxisOptions>;
 }
-export declare function Chart({ series, dimensions, renderTooltipContent, emptyStateText, isAnimated, xAxisOptions, yAxisOptions, theme, }: Props): JSX.Element | null;
+export declare function Chart({ data, dimensions, renderTooltipContent, emptyStateText, isAnimated, xAxisOptions, yAxisOptions, theme, }: Props): JSX.Element | null;
 export {};
 //# sourceMappingURL=Chart.d.ts.map

build/ts/src/components/LineChart/components/GradientArea/GradientArea.d.ts

 /// <reference types="react" />
 import type { ScaleLinear } from 'd3-scale';
-import type { SeriesWithDefaults } from '../../types';
-interface Props {
-    series: SeriesWithDefaults;
+import type { DataWithDefaults } from '../../types';
+export interface Props {
+    series: DataWithDefaults;
     yScale: ScaleLinear<number, number>;
@@ -11,3 +11,2 @@ xScale: ScaleLinear<number, number>;
 export declare function GradientArea({ series, yScale, xScale, hasSpline }: Props): JSX.Element | null;
-export {};
 //# sourceMappingURL=GradientArea.d.ts.map

build/ts/src/components/LineChart/components/GradientArea/utilities/get-gradient-details.d.ts

@@ -1,3 +0,3 @@
-import type { Data } from '../../../../../types';
-export declare function getGradientDetails(data: Data[]): {
+import type { DataPoint } from '../../../../../types';
+export declare function getGradientDetails(data: DataPoint[]): {
     offset: number;
@@ -4,0 +4,0 @@ stopOpacity: number;

build/ts/src/components/LineChart/components/Line/Line.d.ts

 import React, { ReactNode } from 'react';
 import type { Line as D3Line } from 'd3-shape';
-import type { SeriesWithDefaults } from '../../types';
-interface Props {
-    series: SeriesWithDefaults;
+import type { DataPoint, DataSeries } from '../../../../types';
+export interface Props {
+    series: DataSeries;
     isAnimated: boolean;
     index: number;
-    lineGenerator: D3Line<{
-        rawValue: number;
-    }>;
+    lineGenerator: D3Line<DataPoint>;
     color: string;
@@ -16,3 +14,2 @@ children?: ReactNode;
 export declare const Line: React.NamedExoticComponent<Props>;
-export {};
 //# sourceMappingURL=Line.d.ts.map

build/ts/src/components/LineChart/components/TooltipContent/TooltipContent.d.ts

 /// <reference types="react" />
 import type { LineStyle, Color } from 'types';
-interface TooltipData {
+export interface TooltipData {
     name: string;
@@ -17,3 +17,2 @@ point: {
 export declare function TooltipContent({ data, theme }: TooltipContentProps): JSX.Element;
-export {};
 //# sourceMappingURL=TooltipContent.d.ts.map

build/ts/src/components/LineChart/hooks/use-y-scale.d.ts

@@ -1,7 +0,6 @@
-import type { Series } from '../types';
-import type { NumberLabelFormatter } from '../../../types';
-export declare function useYScale({ drawableHeight, series, formatYAxisLabel, fontSize, integersOnly, }: {
+import type { DataSeries, NumberLabelFormatter } from '../../../types';
+export declare function useYScale({ drawableHeight, data, formatYAxisLabel, fontSize, integersOnly, }: {
     fontSize: number;
     drawableHeight: number;
-    series: Series[];
+    data: DataSeries[];
     formatYAxisLabel: NumberLabelFormatter;
@@ -8,0 +7,0 @@ integersOnly: boolean;

build/ts/src/components/LineChart/LineChart.d.ts

 import React from 'react';
-import type { Series, RenderTooltipContentData, XAxisOptions, YAxisOptions } from './types';
+import type { DataSeries } from '../../types';
+import type { RenderTooltipContentData, XAxisOptions, YAxisOptions } from './types';
 export interface LineChartProps {
-    series: Series[];
+    data: DataSeries[];
     emptyStateText?: string;
@@ -13,3 +14,3 @@ isAnimated?: boolean;
 }
-export declare function LineChart({ series, renderTooltipContent, skipLinkText, emptyStateText, isAnimated, xAxisOptions, yAxisOptions, theme, }: LineChartProps): JSX.Element;
+export declare function LineChart({ data, renderTooltipContent, skipLinkText, emptyStateText, isAnimated, xAxisOptions, yAxisOptions, theme, }: LineChartProps): JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

build/ts/src/components/LineChart/types.d.ts

@@ -1,7 +0,4 @@
-import type { LegacyDataSeries, Data, LineStyle, StringLabelFormatter, NumberLabelFormatter, Color } from '../../types';
-export interface Series extends LegacyDataSeries<Data, Color> {
-    areaColor?: string | null;
-    lineStyle?: LineStyle;
-}
-export declare type SeriesWithDefaults = Required<LegacyDataSeries<Data, Color>> & {
+import type { LineStyle, StringLabelFormatter, NumberLabelFormatter, Color, DataSeries } from '../../types';
+export declare type DataWithDefaults = DataSeries & {
+    color: Color;
     lineStyle: LineStyle;
@@ -8,0 +5,0 @@ areaColor?: string | null;

build/ts/src/components/LineChart/utilities/y-axis-min-max.d.ts

@@ -1,6 +0,6 @@
-import type { Series } from '../types';
-export declare function yAxisMinMax({ series, integersOnly, }: {
-    series: Series[];
+import type { DataSeries } from 'types';
+export declare function yAxisMinMax({ data, integersOnly, }: {
+    data: DataSeries[];
     integersOnly: boolean;
 }): number[];
 //# sourceMappingURL=y-axis-min-max.d.ts.map

build/ts/src/components/StackedAreaChart/Chart.d.ts

 import React from 'react';
-import { StringLabelFormatter, NumberLabelFormatter, Dimensions } from '../../types';
-import type { Series, RenderTooltipContentData } from './types';
-interface Props {
+import { StringLabelFormatter, NumberLabelFormatter, Dimensions, DataSeries } from '../../types';
+import type { RenderTooltipContentData } from './types';
+export interface Props {
     xAxisOptions: {
@@ -10,3 +10,3 @@ labels: string[];
     };
-    series: Series[];
+    data: DataSeries[];
     formatXAxisLabel: StringLabelFormatter;
@@ -19,4 +19,3 @@ formatYAxisLabel: NumberLabelFormatter;
 }
-export declare function Chart({ xAxisOptions, series, dimensions, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, isAnimated, theme, }: Props): JSX.Element | null;
-export {};
+export declare function Chart({ xAxisOptions, data, dimensions, formatXAxisLabel, formatYAxisLabel, renderTooltipContent, isAnimated, theme, }: Props): JSX.Element | null;
 //# sourceMappingURL=Chart.d.ts.map

build/ts/src/components/StackedAreaChart/StackedAreaChart.d.ts

 import React from 'react';
-import type { StringLabelFormatter, NumberLabelFormatter } from '../../types';
-import type { Series, RenderTooltipContentData } from './types';
+import type { StringLabelFormatter, NumberLabelFormatter, DataSeries } from '../../types';
+import type { RenderTooltipContentData } from './types';
 export interface StackedAreaChartProps {
@@ -15,3 +15,3 @@ renderTooltipContent?(data: RenderTooltipContentData): React.ReactNode;
     };
-    series: Series[];
+    data: DataSeries[];
     isAnimated?: boolean;
@@ -21,3 +21,3 @@ skipLinkText?: string;
 }
-export declare function StackedAreaChart({ xAxisOptions, yAxisOptions, series, renderTooltipContent, isAnimated, skipLinkText, theme, }: StackedAreaChartProps): JSX.Element | null;
+export declare function StackedAreaChart({ xAxisOptions, yAxisOptions, data, renderTooltipContent, isAnimated, skipLinkText, theme, }: StackedAreaChartProps): JSX.Element | null;
 //# sourceMappingURL=StackedAreaChart.d.ts.map

build/ts/src/components/StackedAreaChart/types.d.ts

@@ -1,3 +0,2 @@
-import type { Color, Data, LegacyDataSeries } from '../../types';
-export declare type Series = LegacyDataSeries<Data, Color>;
+import type { Color } from '../../types';
 export interface RenderTooltipContentData {
@@ -4,0 +3,0 @@ title: string;

build/ts/src/components/TooltipContent/index.d.ts

@@ -1,3 +0,3 @@
-export { TooltipContent } from './TooltipContent';
+export { TooltipContent, TooltipRowType } from './TooltipContent';
 export type { TooltipContentProps, TooltipData } from './TooltipContent';
 //# sourceMappingURL=index.d.ts.map

build/ts/src/components/TooltipContent/TooltipContent.d.ts

 /// <reference types="react" />
-import type { Color } from 'types';
+import type { Color } from '../../types';
+export declare enum TooltipRowType {
+    Default = 0,
+    Annotation = 1
+}
 export interface TooltipData {
@@ -7,2 +11,3 @@ color: Color;
     value: string;
+    type?: TooltipRowType;
 }
@@ -9,0 +14,0 @@ export interface TooltipContentProps {

build/ts/src/components/VisuallyHiddenRows/VisuallyHiddenRows.d.ts

 import React from 'react';
-import type { NumberLabelFormatter, LegacyDataSeries, NullableData, Data, Color } from '../../types';
-interface Props {
-    series: LegacyDataSeries<Data | NullableData, Color>[];
+import type { NumberLabelFormatter, DataSeries } from '../../types';
+export interface Props {
+    data: DataSeries[];
     xAxisLabels: string[];
@@ -9,3 +9,2 @@ formatYAxisLabel: NumberLabelFormatter;
 export declare const VisuallyHiddenRows: React.NamedExoticComponent<Props>;
-export {};
 //# sourceMappingURL=VisuallyHiddenRows.d.ts.map

build/ts/src/hooks/index.d.ts

@@ -19,2 +19,3 @@ export { usePrefersReducedMotion } from './usePrefersReducedMotion';
 export type { HorizontalTransitionStyle } from './useHorizontalTransitions';
+export { useBarChartTooltipContent } from './useBarChartTooltipContent';
 //# sourceMappingURL=index.d.ts.map

build/ts/src/hooks/use-linear-chart-animations.d.ts

 import type { Line } from 'd3-shape';
-import type { Data, LegacyDataSeries } from '../types';
+import type { DataPoint, DataSeries } from '../types';
 export declare const SPRING_CONFIG: {
@@ -9,9 +9,6 @@ friction: number;
 };
-declare type SeriesWithData = Required<LegacyDataSeries<Data, any>>;
-export declare function useLinearChartAnimations<T extends SeriesWithData>({ activeIndex, lineGenerator, series, isAnimated, }: {
+export declare function useLinearChartAnimations({ activeIndex, lineGenerator, data, isAnimated, }: {
     activeIndex: number | null;
-    lineGenerator: Line<{
-        rawValue: number;
-    }>;
-    series: T[];
+    lineGenerator: Line<DataPoint>;
+    data: DataSeries[];
     isAnimated: boolean;
@@ -24,3 +21,2 @@ }): {
 };
-export {};
 //# sourceMappingURL=use-linear-chart-animations.d.ts.map

build/ts/src/hooks/useLinearXAxisDetails.d.ts

@@ -1,4 +0,4 @@
-import type { StringLabelFormatter, NullableData, Data, LegacyDataSeries, Color, YAxisTick } from '../types';
+import type { StringLabelFormatter, YAxisTick, DataSeries } from '../types';
 export interface ChartDetails {
-    series: LegacyDataSeries<Data | NullableData, Color>[];
+    data: DataSeries[];
     fontSize: number;
@@ -12,3 +12,3 @@ width: number;
 }
-export declare function useLinearXAxisDetails({ series, fontSize, width, formatXAxisLabel, initialTicks, xAxisLabels, useMinimalLabels, wrapLabels, }: ChartDetails): {
+export declare function useLinearXAxisDetails({ data, fontSize, width, formatXAxisLabel, initialTicks, xAxisLabels, useMinimalLabels, wrapLabels, }: ChartDetails): {
     maxXLabelHeight: number;
@@ -15,0 +15,0 @@ maxDiagonalLabelLength: number;

build/ts/src/index.d.ts

@@ -1,3 +0,3 @@
-export { SparkLineChart, SparkBarChart, SimpleNormalizedChart, BarChart, BarChartTooltipContent, LineChart, LineChartTooltipContent, StackedAreaChart, Legend, MultiSeriesBarChart, TooltipContent, LinePreview, SquareColorPreview, PolarisVizProvider, HorizontalBarChart, } from './components';
-export type { SparkLineChartProps, SparkBarChartProps, SimpleNormalizedChartProps, BarChartProps, BarChartTooltipContentProps, LineChartProps, LineChartTooltipContentProps, StackedAreaChartProps, MultiSeriesBarChartProps, TooltipContentProps, PolarisVizProviderProps, HorizontalBarChartProps, } from './components';
+export { SparkLineChart, SparkBarChart, SimpleNormalizedChart, LineChart, LineChartTooltipContent, StackedAreaChart, Legend, BarChart, TooltipContent, LinePreview, SquareColorPreview, PolarisVizProvider, } from './components';
+export type { SparkLineChartProps, SparkBarChartProps, SimpleNormalizedChartProps, LineChartProps, LineChartTooltipContentProps, StackedAreaChartProps, BarChartProps, TooltipContentProps, PolarisVizProviderProps, } from './components';
 export { DEFAULT_THEME as PolarisVizDefaultTheme, LIGHT_THEME as PolarisVizLightheme, } from './constants';
@@ -4,0 +4,0 @@ export { createTheme } from './utilities/create-themes';

build/ts/src/storybook/index.d.ts

@@ -18,2 +18,9 @@ import type { Color } from '../types';
 };
+export declare const DIRECTION_CONTROL_ARGS: {
+    description: string;
+    control: {
+        type: string;
+        options: string[];
+    };
+};
 //# sourceMappingURL=index.d.ts.map

build/ts/src/types.d.ts

@@ -21,7 +21,2 @@ import type { InterpolatorFn } from '@react-spring/web';
 export declare type LineStyle = 'dashed' | 'solid' | 'dotted';
-export interface LegacyDataSeries<T, C> {
-    name: string;
-    data: T[];
-    color?: C;
-}
 export interface GradientStop {
@@ -28,0 +23,0 @@ offset: number;

build/ts/src/utilities/should-rotate-zero-bars.d.ts

@@ -1,3 +0,3 @@
-import type { Data } from '../types';
-export declare function shouldRotateZeroBars(data: Data[]): false;
+import type { DataPoint } from '../types';
+export declare function shouldRotateZeroBars(data: DataPoint[]): false;
 //# sourceMappingURL=should-rotate-zero-bars.d.ts.map

CHANGELOG.md

@@ -5,2 +5,27 @@ # Changelog
 
+## [0.28.0] - 2021-12-07
+
+[0.28.0 Migration Guide](https://docs.google.com/document/d/1iO05cV5POYAjXI6HAiVXBHo7jWdMA7_ad3w08KQ52Dg)
+
+### Added
+
+- Added `direction` to `BarChartProps` to switch between `vertical` and `horizontal` charts.
+
+### Changed
+
+- Renamed `series` to `data` in `StackedAreaChartProps`.
+- Changed `StackedAreaChartProps.data` to use `DataSeries[]`.
+- Changed `BarChartProps.data` to use `DataSeries[]`.
+- Renamed `isStacked` to `type` in `BarChartProps`.
+- `type` now accepts `default | stacked` to change between stacked or individual bar groups.
+- Renamed `Annotation.xOffset` to `offset`.
+- Renamed `Annotation.dataIndex` to `dataSeriesIndex`.
+- Added `dataPointIndex` to `Annotation`.
+- Renamed `series` to `data` in `LineChartProps`.
+- Changed `LineChartProps.data` to use `DataSeries[]`.
+### Removed
+
+- Removed `<MultiSeriesBarChart />`.
+- Removed `<HorizontalBarChart />`.
+
 ## [0.27.0] - 2021-12-01
@@ -7,0 +32,0 @@

package.json

 {
   "name": "@shopify/polaris-viz",
   "description": "Shopify’s viz component library",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "private": false,
@@ -6,0 +6,0 @@ "license": "SEE LICENSE IN LICENSE.md",

No alert changes

Worsened metrics

Total package byte prevSize

1131425

decreased by-4.43%

Number of package files

994

decreased by-2.83%

Lines of code

20064

decreased by-4.58%

No dependency changes