@redsift/charts 10.3.0-alpha.5 → 10.3.0-alpha.6

package/index.js

@@ -407,20 +407,20 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
-    tabIndex: onClick ? 0 : undefined
+    tabIndex: onClick ? 0 : undefined,
+    "aria-label": showTooltip && !isEmpty ? text : undefined,
+    "aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
+    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
+    onClick: onClick ? () => onClick(data) : undefined,
+    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
+    role: role ? role : onClick ? 'button' : href ? undefined : 'img'
   }, forwardedProps, {
     className: classNames(className, `_${index}`, {
       selected: isSelected,
       deselected: isDeselected
     }),
     ref: ref,
-    "aria-label": showTooltip && !isEmpty ? `${text}: ${data.data.value}` : undefined,
-    "aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
-    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
     id: id,
-    onClick: onClick ? () => onClick(data) : undefined,
-    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
-    role: role ? role : onClick ? 'button' : undefined,
     $clickable: Boolean(onClick)
   }), children, !showTooltip && !isEmpty ? /*#__PURE__*/React__default.createElement("title", {
     id: `${id}-title`
@@ -502,24 +502,9 @@ const config = (() => ({
 const _excluded$p = ["className", "createArc", "hasStroke", "previousData"];
 const COMPONENT_NAME$c = 'Arc';
 const CLASSNAME$c = 'redsift-arc';
-const DEFAULT_PROPS$c = {
-  color: monochrome,
-  index: 0,
-  previousData: {
-    data: {
-      key: '',
-      value: 0
-    },
-    startAngle: 0,
-    endAngle: 0,
-    padAngle: 0,
-    value: 0,
-    index: 0
-  }
-};
 const Arc = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
     isSelected: propsIsSelected,
     onClick,
@@ -529,7 +514,17 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       createArc,
       hasStroke,
-      previousData
+      previousData = {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: 0,
+        endAngle: 0,
+        padAngle: 0,
+        value: 0,
+        index: 0
+      }
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const theme = useTheme();
@@ -558,7 +553,6 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Arc.className = CLASSNAME$c;
-Arc.defaultProps = DEFAULT_PROPS$c;
 Arc.displayName = COMPONENT_NAME$c;
 
 /**
@@ -569,7 +563,6 @@ const StyledArcs = styled.g``;
 const _excluded$o = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
 const COMPONENT_NAME$b = 'Arcs';
 const CLASSNAME$b = 'redsift-arcs';
-const DEFAULT_PROPS$b = {};
 const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       arcs,
@@ -640,7 +633,6 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   })) : null);
 });
 Arcs.className = CLASSNAME$b;
-Arcs.defaultProps = DEFAULT_PROPS$b;
 Arcs.displayName = COMPONENT_NAME$b;
 
 /**
@@ -814,36 +806,25 @@ const computeTicks = _ref => {
 const _excluded$n = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "tickRemodelling", "variant", "x", "y"];
 const COMPONENT_NAME$a = 'Axis';
 const CLASSNAME$a = 'redsift-axis';
-const DEFAULT_PROPS$a = {
-  position: AxisPosition.bottom,
-  legendOffset: -32,
-  legendPosition: 'end',
-  tickPadding: 5,
-  tickRotation: 0,
-  tickSize: 5,
-  variant: AxisVariant.default,
-  x: 0,
-  y: 0
-};
 const getAxisType = position => [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';
 const Axis = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       length,
       legend,
-      legendOffset,
-      legendPosition,
-      position,
+      legendOffset = -32,
+      legendPosition = 'end',
+      position = AxisPosition.bottom,
       scale,
-      tickPadding,
-      tickRotation,
-      tickSize,
+      tickPadding = 5,
+      tickRotation = 0,
+      tickSize = 5,
       tickValues,
       tickFormat,
       tickRemodelling,
-      variant,
-      x,
-      y
+      variant = AxisVariant.default,
+      x = 0,
+      y = 0
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const theme = useTheme();
@@ -975,7 +956,6 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null, legendNode);
 });
 Axis.className = CLASSNAME$a;
-Axis.defaultProps = DEFAULT_PROPS$a;
 Axis.displayName = COMPONENT_NAME$a;
 
 /**
@@ -1057,27 +1037,12 @@ const StyledBar = styled(DataPoint)`
 const _excluded$m = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "scalePosition", "width"];
 const COMPONENT_NAME$9 = 'Bar';
 const CLASSNAME$9 = 'redsift-bar';
-const DEFAULT_PROPS$9 = {
-  color: monochrome,
-  index: 0,
-  gap: 5,
-  height: 40,
-  maxHeight: 100,
-  orientation: BarOrientation.horizontal,
-  previousData: {
-    data: {
-      key: '',
-      value: 0
-    }
-  },
-  width: 40
-};
 const getValue = data => data.cumulativeValue !== undefined ? data.cumulativeValue : data.value;
 const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
-    index,
+    index = 0,
     isSelected: propsIsSelected,
     labelDecorator,
     onClick,
@@ -1085,14 +1050,19 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
-      gap,
-      height,
-      maxHeight,
-      orientation,
-      previousData,
+      gap = 5,
+      height = 40,
+      maxHeight = 100,
+      orientation = BarOrientation.horizontal,
+      previousData = {
+        data: {
+          key: '',
+          value: 0
+        }
+      },
       scale,
       scalePosition,
-      width
+      width = 40
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const theme = useTheme();
@@ -1140,7 +1110,6 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   }, text) : null);
 });
 Bar.className = CLASSNAME$9;
-Bar.defaultProps = DEFAULT_PROPS$9;
 Bar.displayName = COMPONENT_NAME$9;
 
 /**
@@ -1255,7 +1224,6 @@ const StyledChartContainerCaption = styled.p`
 const _excluded$l = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset", "theme", "mode", "definition", "interactionExplanation", "descriptionForAssistiveTechnology", "dataTableRepresentation", "xAxisDefinition", "yAxisDefinition"];
 const COMPONENT_NAME$8 = 'ChartContainer';
 const CLASSNAME$8 = 'redsift-chart-container';
-const DEFAULT_PROPS$8 = {};
 const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       'aria-label': propsAriaLabel,
@@ -1329,7 +1297,6 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   }, format(`${mode}-chart`)), ariaLabel ? /*#__PURE__*/React__default.createElement("p", null, `${ariaLabel}. ${format(`${mode}-chart`)}`) : /*#__PURE__*/React__default.createElement("p", {
     "aria-labelledby": `${ariaLabelledby} id${id}__interactive-or-not`
   }), /*#__PURE__*/React__default.createElement("div", null, definition), /*#__PURE__*/React__default.createElement("div", null, interactionExplanation), /*#__PURE__*/React__default.createElement("div", null, descriptionForAssistiveTechnology !== null && descriptionForAssistiveTechnology !== void 0 ? descriptionForAssistiveTechnology : description), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("button", {
-    id: "hc-linkto-highcharts-data-table-0",
     tabIndex: -1,
     "aria-expanded": viewAsDataTable,
     onClick: () => setViewAsDataTable(!viewAsDataTable)
@@ -1369,7 +1336,6 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   }), dataTableRepresentation.header, dataTableRepresentation.body) : null)))));
 });
 ChartContainer.className = CLASSNAME$8;
-ChartContainer.defaultProps = DEFAULT_PROPS$8;
 ChartContainer.displayName = COMPONENT_NAME$8;
 
 /**
@@ -1802,13 +1768,9 @@ const StyledLegendItem = styled.li`
 const _excluded$h = ["className", "color", "data", "id", "variant"];
 const COMPONENT_NAME$7 = 'LegendItem';
 const CLASSNAME$7 = 'redsift-legend-item';
-const DEFAULT_PROPS$7 = {
-  color: monochrome,
-  index: 0
-};
 const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    index,
+    index = 0,
     isSelected: propsIsSelected,
     labelDecorator,
     legendDecorator,
@@ -1817,7 +1779,7 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
-      color,
+      color = monochrome,
       data,
       id: propsId,
       variant
@@ -1886,27 +1848,22 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text)));
 });
 LegendItem.className = CLASSNAME$7;
-LegendItem.defaultProps = DEFAULT_PROPS$7;
 LegendItem.displayName = COMPONENT_NAME$7;
 
 const _excluded$g = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
   _excluded2 = ["color"];
 const COMPONENT_NAME$6 = 'Legend';
 const CLASSNAME$6 = 'redsift-chart-legend';
-const DEFAULT_PROPS$6 = {
-  isLegendItemSelected: () => true,
-  variant: LegendVariant.label
-};
 const Legend = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       data,
-      isLegendItemSelected,
+      isLegendItemSelected = () => true,
       labelDecorator,
       legendDecorator,
       legendItemRole,
       onLegendItemClick,
-      variant,
+      variant = LegendVariant.label,
       width
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
@@ -1942,7 +1899,6 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Legend.className = CLASSNAME$6;
-Legend.defaultProps = DEFAULT_PROPS$6;
 Legend.displayName = COMPONENT_NAME$6;
 
 const _excluded$f = ["barProps", "className", "data", "id", "getBarAnchorProps", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "xScaleType", "dateParser"];
@@ -2182,39 +2138,49 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     height: height,
     "aria-label": "Interactive Bar Chart",
     "aria-hidden": "false"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`,
-    "aria-hidden": "false"
-  }, bars.map((bar, index) => {
-    const to = {
-      data: bar
-    };
-    const from = cache.current ? {
-      data: cache.current[index]
-    } : undefined;
-    return /*#__PURE__*/React__default.createElement(Bar, _extends({
-      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
-      data: to,
-      gap: gap,
-      id: `id${id}__bar-${index}`,
-      index: index,
-      isSelected: Boolean(isBarSelected(to)),
-      key: `bar _${index}`,
-      labelDecorator: labelDecorator,
-      maxHeight: scaleY(bar.cumulativeValue - bar.value)
-    }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
-      onClick: onBarClick,
-      orientation: BarOrientation.vertical,
-      previousData: from,
-      scale: scaleY,
-      scalePosition: scaleX,
-      tooltipVariant: tooltipVariant
-    }, barProps, {
-      width: barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
-      height: undefined,
-      role: barRole
+  }, categories.map((category, index) => {
+    const filteredBars = bars.filter(bar => bar.category === category);
+    return /*#__PURE__*/React__default.createElement("g", _extends({
+      key: category,
+      transform: `translate(${margins.left},${margins.top})`,
+      "aria-hidden": "false",
+      role: "region"
+    }, hasCategory ? {
+      'aria-label': `${category}, category ${index + 1} of ${categories.length} with ${filteredBars.length} bars`
+    } : {}), filteredBars.map((bar, index) => {
+      const to = {
+        data: bar
+      };
+      const from = cache.current ? {
+        data: cache.current[index]
+      } : undefined;
+      return /*#__PURE__*/React__default.createElement(Bar, _extends({
+        color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
+        data: to,
+        gap: gap,
+        id: `id${id}__bar-${index}`,
+        index: index,
+        isSelected: Boolean(isBarSelected(to)),
+        key: `bar _${index}`,
+        labelDecorator: labelDecorator,
+        maxHeight: scaleY(bar.cumulativeValue - bar.value)
+      }, getBarAnchorProps ? getBarAnchorProps(to) : {}, {
+        onClick: onBarClick,
+        orientation: BarOrientation.vertical,
+        previousData: from,
+        scale: scaleY,
+        scalePosition: scaleX,
+        tooltipVariant: tooltipVariant
+      }, barProps, {
+        width: barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
+        height: undefined,
+        role: barRole
+      }));
     }));
-  }), ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`,
+    "aria-hidden": "true"
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "bottom",
     length: chartWidth,
     scale: scaleX,
@@ -2275,46 +2241,37 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : null);
 });
 
-const _excluded$e = ["caping", "chartRef", "className", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipDecorator", "colorTheme", "tooltipVariant"];
+const _excluded$e = ["barRole", "caping", "chartRef", "className", "colorTheme", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "yAxisPlacement"];
 const COMPONENT_NAME$5 = 'BarChart';
 const CLASSNAME$5 = 'redsift-barchart';
-const DEFAULT_PROPS$5 = {
-  isBarSelected: () => true,
-  orientation: BarOrientation.horizontal,
-  others: true,
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.default,
-  tooltipVariant: TooltipVariant.value,
-  localeText: {
-    emptyChartText: 'No Data'
-  },
-  xAxisPlacement: 'bottom',
-  yAxisPlacement: 'left'
-};
 const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      barRole,
       caping,
       chartRef,
       className,
+      colorTheme = ColorTheme.default,
       data: propsData,
       dataType: propsDataType,
       emptyComponent,
       id: propsId,
-      isBarSelected,
+      isBarSelected = () => true,
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       onBarClick,
-      orientation,
-      others,
-      size,
-      barRole,
+      orientation = BarOrientation.horizontal,
+      others = true,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
       theme,
       tooltipDecorator,
-      colorTheme,
-      tooltipVariant
+      tooltipVariant = TooltipVariant.value,
+      xAxisPlacement = 'bottom',
+      yAxisPlacement = 'left'
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [_id] = useId();
@@ -2353,10 +2310,13 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       orientation: orientation,
       others: others,
       size: size,
+      sortingMethod: sortingMethod,
       theme: theme,
       tooltipDecorator: tooltipDecorator,
       colorTheme: colorTheme,
-      tooltipVariant: tooltipVariant
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
     }, forwardedProps, {
       ref: ref
     }));
@@ -2373,10 +2333,13 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       legendVariant: legendVariant,
       onBarClick: onBarClick,
       size: size,
+      sortingMethod: sortingMethod,
       theme: theme,
       tooltipDecorator: tooltipDecorator,
       colorTheme: colorTheme,
-      tooltipVariant: tooltipVariant
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
     }, forwardedProps, {
       ref: ref
     }));
@@ -2384,7 +2347,6 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
   return null;
 });
 BarChart.className = CLASSNAME$5;
-BarChart.defaultProps = DEFAULT_PROPS$5;
 BarChart.displayName = COMPONENT_NAME$5;
 
 /**
@@ -2438,20 +2400,12 @@ const StyledDot = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$d = ["className", "scaleX", "scaleY", "variant"];
+const _excluded$d = ["className", "labelDecorator", "scaleX", "scaleY", "variant"];
 const COMPONENT_NAME$4 = 'Dot';
 const CLASSNAME$4 = 'redsift-dot';
-const DEFAULT_PROPS$4 = {
-  color: monochrome,
-  index: 0,
-  labelDecorator: datum => {
-    return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
-  },
-  variant: DotVariant.plain
-};
 const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
     isSelected: propsIsSelected,
     onClick,
@@ -2459,15 +2413,20 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const {
       className,
+      labelDecorator = datum => {
+        return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
+      },
       scaleX,
       scaleY,
-      variant
+      variant = DotVariant.plain
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const theme = useTheme();
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
-  return /*#__PURE__*/React__default.createElement(StyledDot, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(StyledDot, _extends({
+    labelDecorator: labelDecorator
+  }, forwardedProps, {
     ref: ref,
     className: classNames(Dot.className, className),
     $clickable: Boolean(onClick),
@@ -2483,7 +2442,6 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Dot.className = CLASSNAME$4;
-Dot.defaultProps = DEFAULT_PROPS$4;
 Dot.displayName = COMPONENT_NAME$4;
 
 /**
@@ -2494,13 +2452,9 @@ const StyledLine = styled('g')``;
 const _excluded$c = ["className", "createLine", "previousData"];
 const COMPONENT_NAME$3 = 'Line';
 const CLASSNAME$3 = 'redsift-line';
-const DEFAULT_PROPS$3 = {
-  color: monochrome,
-  previousData: []
-};
 const Line = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    color,
+    color = monochrome,
     data,
     isSelected: propsIsSelected,
     role
@@ -2508,7 +2462,7 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       createLine,
-      previousData
+      previousData = []
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const interpolator = interpolate(previousData, data);
@@ -2535,7 +2489,6 @@ const Line = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 Line.className = CLASSNAME$3;
-Line.defaultProps = DEFAULT_PROPS$3;
 Line.displayName = COMPONENT_NAME$3;
 
 /**
@@ -2973,25 +2926,13 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : null);
 });
 
-const _excluded$8 = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "colorTheme", "tooltipDecorator", "tooltipVariant"];
+const _excluded$8 = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
 const COMPONENT_NAME$2 = 'LineChart';
 const CLASSNAME$2 = 'redsift-line-chart';
-const DEFAULT_PROPS$2 = {
-  localeText: {
-    emptyChartText: 'No Data'
-  },
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.dark,
-  tooltipVariant: TooltipVariant.none,
-  xAxisVariant: AxisVariant.default,
-  xAxisPlacement: 'bottom',
-  yAxisVariant: AxisVariant.default,
-  yAxisPlacement: 'left'
-};
 const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
+      colorTheme = ColorTheme.dark,
       data: propsData,
       dotRole,
       emptyComponent,
@@ -3000,12 +2941,18 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       onDotClick,
-      size,
-      colorTheme,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
       tooltipDecorator,
-      tooltipVariant
+      tooltipVariant = TooltipVariant.none,
+      xAxisPlacement = 'bottom',
+      xAxisVariant = AxisVariant.default,
+      yAxisPlacement = 'left',
+      yAxisVariant = AxisVariant.default
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$8);
   const [_id] = useId();
@@ -3023,13 +2970,19 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
       data: propsData,
       emptyComponent: emptyComponent,
       localeText: localeText,
-      size: size
+      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,
@@ -3040,15 +2993,18 @@ const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
     localeText: localeText,
     onDotClick: onDotClick,
     size: size,
-    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
     tooltipDecorator: tooltipDecorator,
-    tooltipVariant: tooltipVariant
+    tooltipVariant: tooltipVariant,
+    xAxisPlacement: xAxisPlacement,
+    xAxisVariant: xAxisVariant,
+    yAxisPlacement: yAxisPlacement,
+    yAxisVariant: yAxisVariant
   }, forwardedProps, {
     ref: ref
   }));
 });
 LineChart.className = CLASSNAME$2;
-LineChart.defaultProps = DEFAULT_PROPS$2;
 LineChart.displayName = COMPONENT_NAME$2;
 
 /**
@@ -3511,46 +3467,36 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : null);
 });
 
-const _excluded$4 = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "colorTheme", "tooltipDecorator", "tooltipVariant", "variant"];
+const _excluded$4 = ["caping", "chartRef", "className", "colorTheme", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "sortingMethod", "subtext", "text", "tooltipDecorator", "tooltipVariant", "variant"];
 const COMPONENT_NAME$1 = 'PieChart';
 const CLASSNAME$1 = 'redsift-piechart';
-const DEFAULT_PROPS$1 = {
-  isSliceSelected: () => true,
-  // legendVariant: PieChartLegendVariant.none,
-  others: true,
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.default,
-  variant: PieChartVariant.spaced,
-  tooltipVariant: TooltipVariant.value,
-  localeText: {
-    emptyChartText: 'No Data'
-  }
-};
 const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
       chartRef,
       className,
+      colorTheme = ColorTheme.default,
       data: propsData,
       emptyComponent,
       id: propsId,
-      isSliceSelected,
+      isSliceSelected = () => true,
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       middleText,
       onSliceClick,
-      others,
-      size,
+      others = true,
+      size = ChartSize.medium,
       sliceRole,
+      sortingMethod = 'desc-value',
       subtext,
       text,
-      colorTheme,
       tooltipDecorator,
-      tooltipVariant,
-      variant
+      tooltipVariant = TooltipVariant.value,
+      variant = PieChartVariant.spaced
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
   const [_id] = useId();
@@ -3570,6 +3516,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       id: id,
       localeText: localeText,
       size: size,
+      sortingMethod: sortingMethod,
       variant: variant
     }, forwardedProps, {
       ref: ref
@@ -3590,6 +3537,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     others: others,
     size: size,
     sliceRole: sliceRole,
+    sortingMethod: sortingMethod,
     subtext: subtext,
     text: text,
     colorTheme: colorTheme,
@@ -3601,7 +3549,6 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 PieChart.className = CLASSNAME$1;
-PieChart.defaultProps = DEFAULT_PROPS$1;
 PieChart.displayName = COMPONENT_NAME$1;
 
 /**
@@ -4072,45 +4019,37 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   }, legendProps)) : null);
 });
 
-const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "colorTheme", "tooltipDecorator", "tooltipVariant", "variant"];
+const _excluded = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "variant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
 const COMPONENT_NAME = 'ScatterPlot';
 const CLASSNAME = 'redsift-scatterplot';
-const DEFAULT_PROPS = {
-  hideControlKeyPanel: false,
-  // legendVariant: ScatterPlotLegendVariant.externalLabel,
-  localeText: {
-    emptyChartText: 'No Data'
-  },
-  size: ChartSize.medium,
-  sortingMethod: 'desc-value',
-  colorTheme: ColorTheme.default,
-  tooltipVariant: TooltipVariant.none,
-  variant: ScatterPlotVariant.default,
-  xAxisVariant: AxisVariant.default,
-  xAxisPlacement: 'bottom',
-  yAxisVariant: AxisVariant.default,
-  yAxisPlacement: 'left'
-};
 const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
+      colorTheme = ColorTheme.default,
       data: propsData,
       dotRole,
       emptyComponent,
+      hideControlKeyPanel = false,
       id: propsId,
       isDotSelected,
       labelDecorator,
       legendDecorator,
       legendVariant: propsLegendVariant,
-      localeText,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
       onBrush,
       onBrushEnd,
       onDotClick,
-      size,
-      colorTheme,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
       tooltipDecorator,
-      tooltipVariant,
-      variant
+      tooltipVariant = TooltipVariant.none,
+      variant = ScatterPlotVariant.default,
+      xAxisPlacement = 'bottom',
+      xAxisVariant = AxisVariant.default,
+      yAxisPlacement = 'left',
+      yAxisVariant = AxisVariant.default
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   const [_id] = useId();
@@ -4127,16 +4066,24 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement(EmptyScatterPlot, _extends({
       data: propsData,
       emptyComponent: emptyComponent,
+      hideControlKeyPanel: hideControlKeyPanel,
       localeText: localeText,
-      size: size
+      size: size,
+      sortingMethod: sortingMethod,
+      xAxisPlacement: xAxisPlacement,
+      xAxisVariant: xAxisVariant,
+      yAxisPlacement: yAxisPlacement,
+      yAxisVariant: yAxisVariant
     }, forwardedProps, {
       ref: ref
     }));
   }
   return /*#__PURE__*/React__default.createElement(RenderedScatterPlot, _extends({
     className: classNames(ScatterPlot.className, className),
+    colorTheme: colorTheme,
     data: propsData,
     dotRole: dotRole,
+    hideControlKeyPanel: hideControlKeyPanel,
     id: id,
     isDotSelected: isDotSelected,
     labelDecorator: labelDecorator,
@@ -4147,16 +4094,19 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     onBrushEnd: onBrushEnd,
     onDotClick: onDotClick,
     size: size,
-    colorTheme: colorTheme,
+    sortingMethod: sortingMethod,
     tooltipDecorator: tooltipDecorator,
     tooltipVariant: tooltipVariant,
-    variant: variant
+    variant: variant,
+    xAxisPlacement: xAxisPlacement,
+    xAxisVariant: xAxisVariant,
+    yAxisPlacement: yAxisPlacement,
+    yAxisVariant: yAxisVariant
   }, forwardedProps, {
     ref: ref
   }));
 });
 ScatterPlot.className = CLASSNAME;
-ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
 export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarChartLegendVariant, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };