@evergis/charts 2.0.108 → 2.0.109

package/dist/charts.esm.js

@@ -1,6 +1,6 @@
 import styled, { css, createGlobalStyle } from 'styled-components';
 import React, { useState, useCallback, useMemo, useEffect, useRef, Fragment } from 'react';
-import { select, pointer, min, max, scaleLinear, lineRadial, curveLinearClosed, range as range$1, format, arc, pie, create, quantize, interpolate, interpolateRound, quantile, axisBottom, group, utcFormat, scaleSequential, interpolateGreens, utcYear, utcMonths, utcMonth, utcSunday, utcMonday, axisLeft, line, curveLinear, area, scaleBand, sum, scaleLog } from 'd3';
+import { select, pointer, min, max, scaleLinear, lineRadial, curveLinearClosed, range as range$1, format, arc, pie, create, quantize, interpolate, interpolateRound, quantile, axisBottom, group, utcFormat, scaleSequential, interpolateGreens, utcYear, utcMonths, utcMonth, utcSunday, utcMonday, axisLeft, axisRight, line, curveLinear, area, scaleBand, sum, scaleLog } from 'd3';
 import ReactDOMServer from 'react-dom/server';
 import { unmountComponentAtNode, render } from 'react-dom';
 
@@ -1321,6 +1321,7 @@ const stackedData = data => {
 var _templateObject$8, _templateObject2$2;
 const lineChartClassNames = {
   lineChartYScaleGlobal: 'lineChartYScaleGlobal',
+  lineChartYScaleRight: 'lineChartYScaleRight',
   lineChartXScaleGlobal: 'lineChartXScaleGlobal',
   lineChartLinesGlobal: 'lineChartLinesGlobal',
   lineChartLine: 'lineChartLine',
@@ -1654,7 +1655,8 @@ const draw$3 = (node, props) => {
     tooltipClassName,
     xScaleItemWidth,
     areaCurve,
-    dotSnapping
+    dotSnapping,
+    rightAxis
   } = props;
 
   if (node !== null && chartData.length) {
@@ -1681,7 +1683,8 @@ const draw$3 = (node, props) => {
       return max(values);
     });
     const svg = appendSvg(node, width, height || 0);
-    const yScale = scaleLinear().domain([min$1 || 0, max$1 || 0]).range([height - marginTop - marginBottom - (xAxisPadding || 0), marginTop]).nice();
+    const yRange = [height - marginTop - marginBottom - (xAxisPadding || 0), marginTop];
+    const yScale = scaleLinear().domain([min$1 || 0, max$1 || 0]).range(yRange).nice();
     customYScale && customYScale(yScale);
     const yTicksCountDefault = 8;
     const yAxisLeft = axisLeft(yScale).ticks(yTicksCountDefault);
@@ -1692,15 +1695,29 @@ const draw$3 = (node, props) => {
       width: yAxisWidth
     } = computeDimensions(yAxis);
     yAxis.attr('transform', "translate(" + (marginLeft + yAxisWidth) + ", 0)");
+    let yAxisRightWidth = 0;
+
+    if (rightAxis) {
+      const rightAxisMin = min(rightAxis);
+      const rightAxisMax = max(rightAxis);
+      const yRightScale = scaleLinear().domain([rightAxisMin || 0, rightAxisMax || 0]).range(yRange).nice();
+      const yAxisRightTicks = axisRight(yRightScale).ticks(yTicksCountDefault);
+      const yAxisRight = svg.append('g').attr('class', lineChartClassNames.lineChartYScaleGlobal + " " + lineChartClassNames.lineChartYScaleRight).call(yAxisRightTicks).call(customYAxisSelection ? customYAxisSelection : none);
+      ({
+        width: yAxisRightWidth
+      } = computeDimensions(yAxisRight));
+      yAxisRight.attr('transform', "translate(" + (width - yAxisRightWidth) + ", 0)");
+    }
     /** xScale **/
 
+
     const lastIndex = labels && labels.length ? labels.length - 1 : data.reduce((acc, _ref3) => {
       let {
         values
       } = _ref3;
       return Math.max(acc, values.length);
     }, 0) - 1;
-    const xScale = scaleLinear().domain([0, lastIndex]).range([marginLeft + yAxisWidth + (yAxisPadding || 0), width - marginRight]);
+    const xScale = scaleLinear().domain([0, lastIndex]).range([marginLeft + yAxisWidth + (yAxisPadding || 0), width - yAxisRightWidth - marginRight]);
     const xAxisBottom = axisBottom(xScale).tickFormat(value => // @ts-ignore
     labels && labels.length > 0 ? labels[value] : 0).ticks(lastIndex);