@redsift/charts 10.1.0-alpha.0 → 10.1.0-alpha.1

package/index.d.ts

@@ -59,6 +59,7 @@ interface AxisProps extends Omit<ComponentProps<'g'>, 'scale'> {
     tickRotation?: number;
     tickSize?: number;
     tickValues?: TicksSpec;
+    tickRemodelling?: (tickValues: any[]) => any[];
     /** Variant. */
     variant?: AxisVariant;
     /** X position. */
@@ -96,6 +97,12 @@ type ChartAxesProps = {
     xAxisTickSize?: AxisProps['tickSize'];
     /** X axis tick values. */
     xAxisTickValues?: AxisProps['tickValues'];
+    /** X axis min value. */
+    xAxisMinValue?: number | string;
+    /** X axis min value. */
+    xAxisMaxValue?: number | string;
+    /** Y axis tick remodelling. */
+    xAxisTickRemodelling?: (tickValues: any[]) => any[];
     /** Y axis variant. */
     yAxisVariant?: AxisVariant;
     /** Y axis placement. */
@@ -110,6 +117,12 @@ type ChartAxesProps = {
     yAxisTickSize?: AxisProps['tickSize'];
     /** Y axis tick values. */
     yAxisTickValues?: AxisProps['tickValues'];
+    /** Y axis min value. */
+    yAxisMinValue?: number | string;
+    /** Y axis min value. */
+    yAxisMaxValue?: number | string;
+    /** Y axis tick remodelling. */
+    yAxisTickRemodelling?: (tickValues: any[]) => any[];
 };
 
 type JSONValue = string | number | boolean | Date | {

package/index.js

@@ -741,9 +741,10 @@ const computeTicks = _ref => {
     tickValues,
     tickSize,
     tickPadding,
-    tickRotation
+    tickRotation,
+    tickRemodelling
   } = _ref;
-  const values = getScaleTicks(scale, tickValues);
+  const values = tickRemodelling ? tickRemodelling(getScaleTicks(scale, tickValues)) : getScaleTicks(scale, tickValues);
   const position = 'bandwidth' in scale ? centerScale(scale) : scale;
   const line = {
     lineX: 0,
@@ -808,7 +809,7 @@ const computeTicks = _ref => {
   };
 };
 
-const _excluded$n = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "variant", "x", "y"];
+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 = {
@@ -837,6 +838,7 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
       tickSize,
       tickValues,
       tickFormat,
+      tickRemodelling,
       variant,
       x,
       y
@@ -907,7 +909,8 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
     tickValues,
     tickSize: tickSize,
     tickPadding: tickPadding,
-    tickRotation: tickRotation
+    tickRotation: tickRotation,
+    tickRemodelling
   });
   const transition = Gt(ticks, _objectSpread2(_objectSpread2({}, config), {}, {
     keys: tick => tick.key,
@@ -1600,7 +1603,7 @@ const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$h = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "dateParser"];
+const _excluded$h = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "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", "dateParser"];
 const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       barProps,
@@ -1623,6 +1626,9 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       xAxisTickRotation,
       xAxisTickSize,
       xAxisTickValues,
+      xAxisMinValue,
+      xAxisMaxValue,
+      xAxisTickRemodelling,
       yAxisVariant: propsYAxisVariant,
       yAxisPlacement,
       yAxisTickFormat,
@@ -1630,6 +1636,9 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisTickRotation,
       yAxisTickSize,
       yAxisTickValues,
+      yAxisMinValue,
+      yAxisMaxValue,
+      yAxisTickRemodelling,
       dateParser
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$h);
@@ -1659,22 +1668,35 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   let barWidth = chartWidth / (numberOfRows * 2) - gap;
   const scaleX = (() => {
     if (xScaleType === 'number') {
+      var _ref, _ref2;
       const domain = extent(data, d => d.key);
+      domain[0] = (_ref = xAxisMinValue) !== null && _ref !== void 0 ? _ref : domain[0];
+      domain[1] = (_ref2 = xAxisMaxValue) !== null && _ref2 !== void 0 ? _ref2 : domain[1];
       const gap = domain[1] - domain[0];
       domain[0] -= gap * 0.1;
       domain[1] += gap * 0.1;
       return scaleLinear().domain(domain).range([0, chartWidth]).nice();
     } else if (xScaleType === 'dateString' || xScaleType === 'Date') {
+      var _ref3, _ref4;
       const domain = xScaleType === 'dateString' ? extent(data, d => Date.parse(d.key)) : extent(data, d => d.key.valueOf());
+      domain[0] = (_ref3 = xAxisMinValue) !== null && _ref3 !== void 0 ? _ref3 : domain[0];
+      domain[1] = (_ref4 = xAxisMaxValue) !== null && _ref4 !== void 0 ? _ref4 : domain[1];
       const startDate = xAxisTickValues && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), -1) : new Date(domain[0]);
       const endDate = xAxisTickValues && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[1]), 0) : new Date(domain[1]);
       return scaleTime().domain([startDate, endDate]).range([0, chartWidth]).nice();
     } else {
-      return scalePoint().domain(xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key)).range([0, chartWidth]);
+      var _ref5, _ref6;
+      const domain = xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key);
+      domain[0] = (_ref5 = xAxisMinValue) !== null && _ref5 !== void 0 ? _ref5 : domain[0];
+      domain[1] = (_ref6 = xAxisMaxValue) !== null && _ref6 !== void 0 ? _ref6 : domain[1];
+      return scalePoint().domain(domain).range([0, chartWidth]);
     }
   })();
   const scaleY = (() => {
+    var _ref7, _ref8;
     const domain = extent(data, d => d.value);
+    domain[0] = (_ref7 = yAxisMinValue) !== null && _ref7 !== void 0 ? _ref7 : domain[0];
+    domain[1] = (_ref8 = yAxisMaxValue) !== null && _ref8 !== void 0 ? _ref8 : 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;
@@ -1716,7 +1738,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   });
   if (xScaleType) {
     const minimalGap = Math.min(...bars.map((bar, i) => i > 0 ? Math.abs(bar.key - bars[i - 1].key) : undefined).filter(k => k)) * 0.9;
-    barWidth = Math.min(chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), barWidth);
+    barWidth = Math.min(barWidth, chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), chartWidth / (xAxisTickValues ? xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
   }
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     id: id,
@@ -1770,6 +1792,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: xAxisTickRotation,
     tickSize: xAxisTickSize,
     tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
   }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "top",
@@ -1782,6 +1805,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: xAxisTickRotation,
     tickSize: xAxisTickSize,
     tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
   }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "left",
@@ -1794,6 +1818,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: yAxisTickRotation,
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "right",
@@ -1806,6 +1831,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: yAxisTickRotation,
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null))));
 });
@@ -2465,7 +2491,7 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "dateParser"];
+const _excluded$9 = ["className", "data", "dotRole", "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"];
 const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -2491,6 +2517,9 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       xAxisTickRotation,
       xAxisTickSize,
       xAxisTickValues,
+      xAxisMinValue,
+      xAxisMaxValue,
+      xAxisTickRemodelling,
       yAxisVariant,
       yAxisPlacement,
       yAxisTickFormat,
@@ -2498,6 +2527,9 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisTickRotation,
       yAxisTickSize,
       yAxisTickValues,
+      yAxisMinValue,
+      yAxisMaxValue,
+      yAxisTickRemodelling,
       dateParser
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$9);
@@ -2522,20 +2554,36 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   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 {
-      return scalePoint().domain(xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key[0])).range([0, chartWidth]);
+      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;
@@ -2643,6 +2691,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: xAxisTickRotation,
     tickSize: xAxisTickSize,
     tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
   }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "top",
@@ -2655,6 +2704,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: xAxisTickRotation,
     tickSize: xAxisTickSize,
     tickFormat: xAxisTickFormat,
+    tickRemodelling: xAxisTickRemodelling,
     variant: xAxisVariant
   }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "left",
@@ -2667,6 +2717,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: yAxisTickRotation,
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
     position: "right",
@@ -2679,6 +2730,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRotation: yAxisTickRotation,
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
+    tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: statsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {