@redsift/charts 11.5.0 → 11.6.0-alpha.0

package/_internal/LineChart2.js

@@ -0,0 +1,669 @@
+import { _ as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { useTheme, useMessageFormatter, Flexbox, useId } from '@redsift/design-system';
+import { L as LegendVariant, T as TooltipVariant } from './legend2.js';
+import { C as ChartSize, g as getSortingMethod, i as isValidDate, u as useColor, m as mergeLegends, a as ColorTheme } from './theme.js';
+import styled from 'styled-components';
+import { C as ChartContainer } from './ChartContainer2.js';
+import { scaleLinear, extent, scaleTime, scalePoint, line } from 'd3';
+import { A as Axis, a as AxisVariant } from './Axis2.js';
+import { L as Line } from './Line2.js';
+import { D as Dot, a as DotVariant } from './Dot2.js';
+import { L as Legend } from './Legend3.js';
+
+/**
+ * Component's labels variant.
+ */
+const LineChartLegendVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent',
+  custom: 'custom'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledLineChart = styled(ChartContainer)``;
+const StyledLineChartEmptyText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref => {
+  let {
+    $maxWidth
+  } = _ref;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+    font-size: ${_ref3 => {
+  let {
+    $textSize
+  } = _ref3;
+  return $textSize;
+}}px;
+    line-height: ${_ref4 => {
+  let {
+    $textSize
+  } = _ref4;
+  return $textSize;
+}}px;
+  }
+`;
+
+const _excluded$3 = ["className"];
+const LoadingLineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), "Loading...");
+});
+
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 600,
+        height: 300,
+        fontSize: 30
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 750,
+        height: 375,
+        fontSize: 34
+      };
+    case ChartSize.large:
+      return {
+        width: 900,
+        height: 450,
+        fontSize: 38
+      };
+  }
+};
+const statsBy = (arr, sortingMethod) => {
+  const counts = arr.reduce((prev, curr) => {
+    if (!curr.value) {
+      return prev;
+    }
+    if (!prev[curr.key[1]]) {
+      prev[curr.key[1]] = {
+        value: curr.value,
+        min: curr.value,
+        max: curr.value,
+        values: [curr.value]
+      };
+    } else {
+      prev[curr.key[1]] = {
+        value: prev[curr.key[1]].value + curr.value,
+        min: Math.min(prev[curr.key[1]].min, curr.value),
+        max: Math.max(prev[curr.key[1]].max, curr.value),
+        values: [...prev[curr.key[1]].values, curr.value]
+      };
+    }
+    return prev;
+  }, {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key].value,
+    min: counts[key].min,
+    max: counts[key].max,
+    values: counts[key].values,
+    first: counts[key].values[0],
+    last: counts[key].values[counts[key].values.length - 1],
+    trending: {
+      overall: (counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100 / counts[key].values[0]
+    }
+  })).sort(getSortingMethod(sortingMethod));
+};
+
+const _excluded$2 = ["className", "data", "emptyComponent", "localeText", "size"];
+const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      data: propsData,
+      emptyComponent,
+      localeText,
+      size
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const theme = useTheme();
+  const cache = useRef();
+  const data = propsData;
+  useEffect(() => {
+    cache.current = data;
+  });
+  const chartDimensions = sizeToDimension(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = {
+    top: 16,
+    left: 48,
+    right: 16,
+    bottom: 48
+  };
+  const chartWidth = width - margins.left - margins.right;
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledLineChartEmptyText, {
+    $maxWidth: width,
+    $textSize: chartDimensions.fontSize / 2,
+    $theme: theme
+  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, /*#__PURE__*/React__default.createElement(Axis, {
+    position: "bottom",
+    length: width - 32,
+    scale: scaleLinear().domain([]).range([0, chartWidth]),
+    x: 0,
+    y: height,
+    tickValues: 4
+  })))));
+});
+
+var enUS = {
+	"interactive-chart": "Interactive Line Chart",
+	"static-chart": "Static Line Chart",
+	"definition-linear": "Linear Line Chart with {circleLength} circles.",
+	"definition-linear-with-categories": "Linear Line Chart with {categoryLength} categories and {circleLength} circles.",
+	"definition-ordinal": "Ordinal Line Chart with {circleLength} circles.",
+	"x-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying numbers from {start, number} to {end, number}.",
+	"y-axis-numbers-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying numbers from {start, number} to {end, number}.",
+	"x-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying dates from {start, date, ::yyyyMMdd} to {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying dates from {start, date, ::yyyyMMdd} to {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying categories.",
+	"y-axis-categories-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying categories.",
+	"series-legend": "{category}, line {categoryIndex} of {categoryLength} with {circleLength} circles"
+};
+
+var frFR = {
+	"interactive-chart": "Graphique en courbe interactif",
+	"static-chart": "Graphique en courbe statique",
+	"definition-linear": "Graphique en courbe contenant {circleLength} points répartis sur un axe linéraire.",
+	"definition-linear-with-categories": "Graphique en courbe contenant {categoryLength} courbes et {circleLength} points répartis sur un axe linéraire.",
+	"definition-ordinal": "Graphique en courbe contenant {circleLength} points.",
+	"x-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des nombres allant de {start, number} à {end, number}.",
+	"y-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des nombres allant de {start, number} à {end, number}.",
+	"x-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"y-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
+	"x-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des categories.",
+	"y-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des categories.",
+	"series-legend": "{category}, courbe {categoryIndex} sur {categoryLength} contenant {circleLength} points"
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+const _excluded$1 = ["className", "data", "dotRole", "disableAnimations", "getDotAnchorProps", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"],
+  _excluded2 = ["extraLegendItems"];
+const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      data: propsData,
+      dotRole,
+      disableAnimations,
+      getDotAnchorProps,
+      id,
+      isDotSelected,
+      labelDecorator,
+      legendDecorator,
+      legendVariant,
+      legendProps,
+      margins: propsMargins,
+      onDotClick,
+      size,
+      sortingMethod,
+      colorTheme,
+      tooltipDecorator,
+      tooltipVariant,
+      xAxisVariant,
+      xAxisPlacement,
+      xAxisTickFormat: propsXAxisTickFormat,
+      xAxisTickPadding,
+      xAxisTickRotation,
+      xAxisTickSize,
+      xAxisTickValues,
+      xAxisMinValue,
+      xAxisMaxValue,
+      xAxisTickRemodelling,
+      yAxisVariant,
+      yAxisPlacement,
+      yAxisTickFormat,
+      yAxisTickPadding,
+      yAxisTickRotation,
+      yAxisTickSize,
+      yAxisTickValues,
+      yAxisMinValue,
+      yAxisMaxValue,
+      yAxisTickRemodelling,
+      dateParser
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const cache = useRef();
+  const theme = useTheme();
+  const format = useMessageFormatter(intlMessages);
+  const xScaleType = propsData[0].key[0] instanceof Date ? 'Date' : typeof propsData[0].key[0] === 'number' ? 'number' : typeof propsData[0].key[0] === 'string' && isValidDate(propsData[0].key[0]) ? 'dateString' : typeof propsData[0].key[0] === 'string' ? 'string' : undefined;
+  const data = xScaleType === 'number' ? propsData.filter(datum => typeof datum.key[0] === 'number' && !Number.isNaN(datum.key[0])) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(datum.key[0])) : xScaleType === 'string' ? propsData.filter(datum => typeof datum.key[0] === 'string') : xScaleType === 'Date' ? propsData.filter(datum => datum.key[0] instanceof Date) : propsData;
+  useEffect(() => {
+    cache.current = data;
+  });
+  const svgRef = useRef();
+  const chartDimensions = sizeToDimension(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = _objectSpread2({
+    top: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
+    left: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    right: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    bottom: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8
+  }, propsMargins);
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const scaleX = (() => {
+    if (xScaleType === 'number') {
+      var _ref, _ref2;
+      const domain = extent(data, d => d.key[0]);
+      domain[0] = (_ref = xAxisMinValue) !== null && _ref !== void 0 ? _ref : domain[0];
+      domain[1] = (_ref2 = xAxisMaxValue) !== null && _ref2 !== void 0 ? _ref2 : domain[1];
+      return scaleLinear().domain(domain).range([0, chartWidth]).nice();
+    } else if (xScaleType === 'dateString') {
+      var _ref3, _ref4;
+      const domain = extent(data, d => Date.parse(d.key[0]));
+      domain[0] = (_ref3 = xAxisMinValue) !== null && _ref3 !== void 0 ? _ref3 : domain[0];
+      domain[1] = (_ref4 = xAxisMaxValue) !== null && _ref4 !== void 0 ? _ref4 : domain[1];
+      return scaleTime().domain([new Date(domain[0]), new Date(domain[1])]).range([0, chartWidth]).nice();
+    } else if (xScaleType === 'Date') {
+      var _ref5, _ref6;
+      const domain = extent(data, d => d.key[0].valueOf());
+      domain[0] = (_ref5 = xAxisMinValue) !== null && _ref5 !== void 0 ? _ref5 : domain[0];
+      domain[1] = (_ref6 = xAxisMaxValue) !== null && _ref6 !== void 0 ? _ref6 : domain[1];
+      return scaleTime().domain([new Date(domain[0]), new Date(domain[1])]).range([0, chartWidth]).nice();
+    } else {
+      var _ref7, _ref8;
+      const domain = xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key[0]);
+      domain[0] = (_ref7 = xAxisMinValue) !== null && _ref7 !== void 0 ? _ref7 : domain[0];
+      domain[1] = (_ref8 = xAxisMaxValue) !== null && _ref8 !== void 0 ? _ref8 : domain[1];
+      return scalePoint().domain(domain).range([0, chartWidth]);
+    }
+  })();
+  const scaleY = (() => {
+    var _ref9, _ref10;
+    const domain = extent(data, d => d.value);
+    domain[0] = (_ref9 = yAxisMinValue) !== null && _ref9 !== void 0 ? _ref9 : domain[0];
+    domain[1] = (_ref10 = yAxisMaxValue) !== null && _ref10 !== void 0 ? _ref10 : domain[1];
+    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
+  })();
+  const xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
+  const hasCategory = data[0] && data[0].key.length >= 2 && data[0].key[1] !== null && data[0].key[1] !== undefined;
+  const statsByCategory = statsBy(data, sortingMethod);
+  const colorScale = useColor({
+    data: statsByCategory,
+    colorTheme: colorTheme,
+    category: d => d.key,
+    theme
+  });
+  const circles = data.sort((a, b) => {
+    if (xScaleType === 'number') {
+      if (a.key[0] < b.key[0]) return -1;
+      if (a.key[0] > b.key[0]) return 1;
+      return 0;
+    } else if (xScaleType === 'dateString') {
+      if (Date.parse(a.key[0]) < Date.parse(b.key[0])) return -1;
+      if (Date.parse(a.key[0]) > Date.parse(b.key[0])) return 1;
+      return 0;
+    } else if (xScaleType === 'Date') {
+      if (a.key[0].valueOf() < b.key[0].valueOf()) return -1;
+      if (a.key[0].valueOf() > b.key[0].valueOf()) return 1;
+      return 0;
+    } else if (xScaleType === 'string' && xAxisTickValues && Array.isArray(xAxisTickValues)) {
+      if (xAxisTickValues.indexOf(a.key[0]) < xAxisTickValues.indexOf(b.key[0])) return -1;
+      if (xAxisTickValues.indexOf(a.key[0]) > xAxisTickValues.indexOf(b.key[0])) return 1;
+      return 0;
+    }
+    return 0;
+  }).filter(d => d.value !== null).map(d => {
+    var _d$key$;
+    return {
+      category: (_d$key$ = d.key[1]) !== null && _d$key$ !== void 0 ? _d$key$ : 'default',
+      x: xScaleType === 'dateString' ? dateParser ? dateParser(d.key[0]) : new Date(Date.parse(d.key[0])) : d.key[0],
+      y: d.value,
+      data: {
+        key: d.key,
+        value: d.value
+      },
+      points: [d]
+    };
+  });
+  const lines = hasCategory ? Object.values(circles.reduce((prev, curr) => {
+    if (!prev[curr.category]) {
+      prev[curr.category] = [];
+    }
+    prev[curr.category].push(curr);
+    return prev;
+  }, {})) : [circles];
+  const createLine = line().x(d => scaleX(d.x)).y(d => scaleY(d.y));
+  const categories = [];
+  const pivotedTable = circles.reduce((acc, item) => {
+    const {
+      x,
+      category,
+      y
+    } = item;
+    if (!categories.includes(category)) {
+      categories.push(category);
+    }
+    const formattedKey = xAxisTickFormat ? xAxisTickFormat(x) : x.toString();
+    let entry = acc.find(e => e.key === formattedKey);
+    if (!entry) {
+      entry = {
+        key: formattedKey
+      };
+      acc.push(entry);
+    }
+    entry[category] = y;
+    return acc;
+  }, []);
+  const _ref11 = legendProps || {},
+    {
+      extraLegendItems
+    } = _ref11,
+    forwardedLegendProps = _objectWithoutProperties(_ref11, _excluded2);
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({
+    mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? 'interactive' : 'static',
+    definition: hasCategory ? format('definition-linear-with-categories', {
+      categoryLength: categories.length,
+      circleLength: circles.length
+    }) : format('definition-linear', {
+      circleLength: circles.length
+    }),
+    xAxisDefinition: xScaleType !== 'string' ? format(`x-axis-${xScaleType === 'number' ? 'numbers' : 'dates'}-definition`, {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1,
+      start: scaleX.domain()[0],
+      end: scaleX.domain()[1]
+    }) : format('x-axis-categories-definition', {
+      numAxis: xAxisPlacement === 'both' ? 2 : 1
+    }),
+    yAxisDefinition: format('y-axis-numbers-definition', {
+      numAxis: yAxisPlacement === 'both' ? 2 : 1,
+      start: scaleY.domain()[0],
+      end: scaleY.domain()[1]
+    }),
+    dataTableRepresentation: hasCategory ? {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: category,
+        scope: "col"
+      }, category)))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, pivotedTable.map(row => /*#__PURE__*/React__default.createElement("tr", {
+        key: row.key
+      }, /*#__PURE__*/React__default.createElement("th", {
+        scope: "row"
+      }, row.key), categories.map(category => /*#__PURE__*/React__default.createElement("th", {
+        key: `${row.key}-${category}-${row[category]}`,
+        scope: "col"
+      }, row[category])))))
+    } : {
+      header: /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, xScaleType === 'Date' || xScaleType === 'dateString' ? 'Date' : 'Key'), /*#__PURE__*/React__default.createElement("th", {
+        scope: "col"
+      }, "Value"))),
+      body: /*#__PURE__*/React__default.createElement("tbody", null, circles.map(datum => {
+        const key = xAxisTickFormat ? xAxisTickFormat(datum.x) : datum.x.toString();
+        return /*#__PURE__*/React__default.createElement("tr", {
+          key: key
+        }, /*#__PURE__*/React__default.createElement("th", {
+          scope: "row"
+        }, key), /*#__PURE__*/React__default.createElement("td", null, datum.y));
+      }))
+    }
+  }, forwardedProps, {
+    id: id,
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "8"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    ref: svgRef,
+    width: width,
+    height: height,
+    "aria-label": typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? format('interactive-chart') : format('static-chart'),
+    "aria-hidden": "false"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, lines.map((line, index) => {
+    return /*#__PURE__*/React__default.createElement(Line, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(line[0].category),
+      data: line.filter(point => point.y !== null),
+      disableAnimations: disableAnimations,
+      createLine: createLine,
+      key: `line _${index}`
+    });
+  })), categories.map((category, categoryIndex) => {
+    const filteredCircles = circles.filter(circle => circle.category === category);
+    return /*#__PURE__*/React__default.createElement("g", _extends({
+      key: `${id}-series-${category}`,
+      transform: `translate(${margins.left},${margins.top})`,
+      "aria-hidden": "false",
+      role: "region"
+    }, hasCategory ? {
+      'aria-label': `${category}, category ${categoryIndex + 1} of ${categories.length} with ${filteredCircles.length} circles`
+    } : {}), filteredCircles.map((circle, index) => {
+      const scaleXDomain = scaleX.domain();
+      const scaleYDomain = scaleY.domain();
+      if (xScaleType === 'number' && (circle.x < scaleXDomain[0] || circle.x > scaleXDomain[1] || circle.y < scaleYDomain[0] || circle.y > scaleYDomain[1])) {
+        return null;
+      }
+      const to = _objectSpread2(_objectSpread2({}, circle), {}, {
+        r: 4
+      });
+      return /*#__PURE__*/React__default.createElement(Dot, {
+        id: `id${id}__circle-${categoryIndex}.${index}`,
+        color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
+        data: to,
+        dataset: circles,
+        isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
+        anchorProps: getDotAnchorProps ? getDotAnchorProps(to) : undefined,
+        key: `circle _${categoryIndex}.${index}`,
+        labelDecorator: labelDecorator,
+        onClick: onDotClick,
+        role: dotRole,
+        scaleX: scaleX,
+        scaleY: scaleY,
+        tooltipDecorator: tooltipDecorator,
+        tooltipVariant: tooltipVariant,
+        variant: DotVariant.hollow
+      });
+    }));
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "bottom",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: chartHeight,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
+    variant: xAxisVariant
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "top",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: 0,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
+    variant: xAxisVariant
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "left",
+    length: chartHeight,
+    scale: scaleY,
+    x: 0,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
+    variant: yAxisVariant
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    disableAnimations: disableAnimations,
+    position: "right",
+    length: chartHeight,
+    scale: scaleY,
+    x: chartWidth,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
+    variant: yAxisVariant
+  }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
+    })),
+    variant: legendVariant === LineChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === LineChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === LineChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
+    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
+  }, forwardedLegendProps)) : null);
+});
+
+const _excluded = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
+const COMPONENT_NAME = 'LineChart';
+const CLASSNAME = 'redsift-line-chart';
+const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      colorTheme = ColorTheme.dark,
+      data: propsData,
+      dotRole,
+      emptyComponent,
+      id: propsId,
+      isDotSelected,
+      labelDecorator,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
+      onDotClick,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
+      tooltipDecorator,
+      tooltipVariant = TooltipVariant.none,
+      xAxisPlacement = 'bottom',
+      xAxisVariant = AxisVariant.default,
+      yAxisPlacement = 'left',
+      yAxisVariant = AxisVariant.default
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : LineChartLegendVariant.externalLabel;
+  if (propsData === undefined || propsData === null) {
+    return /*#__PURE__*/React__default.createElement(LoadingLineChart, _extends({
+      id: id
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  if (propsData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(EmptyLineChart, _extends({
+      data: propsData,
+      emptyComponent: emptyComponent,
+      localeText: localeText,
+      size: size,
+      sortingMethod: sortingMethod,
+      xAxisPlacement: xAxisPlacement,
+      xAxisVariant: xAxisVariant,
+      yAxisPlacement: yAxisPlacement,
+      yAxisVariant: yAxisVariant
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(RenderedLineChart, _extends({
+    className: classNames(LineChart.className, className),
+    colorTheme: colorTheme,
+    data: propsData,
+    dotRole: dotRole,
+    id: id,
+    isDotSelected: isDotSelected,
+    labelDecorator: labelDecorator,
+    legendDecorator: legendDecorator,
+    legendVariant: legendVariant,
+    localeText: localeText,
+    onDotClick: onDotClick,
+    size: size,
+    sortingMethod: sortingMethod,
+    tooltipDecorator: tooltipDecorator,
+    tooltipVariant: tooltipVariant,
+    xAxisPlacement: xAxisPlacement,
+    xAxisVariant: xAxisVariant,
+    yAxisPlacement: yAxisPlacement,
+    yAxisVariant: yAxisVariant
+  }, forwardedProps, {
+    ref: ref
+  }));
+});
+LineChart.className = CLASSNAME;
+LineChart.displayName = COMPONENT_NAME;
+
+export { LineChart as L, StyledLineChart as S, LineChartLegendVariant as a, StyledLineChartEmptyText as b };
+//# sourceMappingURL=LineChart2.js.map