@elliemae/ds-dataviz 3.11.0-rc.2 → 3.11.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,6 +34,7 @@ var import_d3 = require("d3");
34
34
  var import_styles = require("../../styles");
35
35
  var import_ChartContext = require("../../ChartContext");
36
36
  var import_useUniqueData = require("../../helpers/useUniqueData");
37
+ var import_helpers = require("../../helpers");
37
38
  const AxisBottom = import_react.default.memo(() => {
38
39
  const {
39
40
  props: { xAxis },
@@ -76,8 +77,8 @@ const AxisBottom = import_react.default.memo(() => {
76
77
  }
77
78
  if (tickFormat) {
78
79
  if (typeof tickFormat === "string") {
79
- const formatGenerator = (0, import_d3.timeFormat)(tickFormat);
80
- axis.tickFormat((d) => formatGenerator(d));
80
+ const formatGenerator = (0, import_helpers.getFormatGenerator)(xAxis.type ?? "linear");
81
+ axis.tickFormat((d) => formatGenerator(tickFormat)(d));
81
82
  }
82
83
  if (typeof tickFormat === "function") {
83
84
  axis.tickFormat(tickFormat);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat, ScaleLinear, ScaleTime } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth / 100) * containerRatio;\n }\n return innerWidth / 100;\n })();\n const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n // we show the only the ticks values on the screen when zoomed enough\n // @todo we need to improve this logic\n if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n const ticksName = uniqueData.map((u) => u.xValue);\n axis.tickValues(ticksName);\n grid.tickValues(ticksName);\n } else if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = timeFormat(tickFormat);\n axis.tickFormat((d) => formatGenerator(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n }\n\n if (axisRef?.current && gridRef?.current) {\n if (xAxis?.showGrid) select(gridRef.current).call(grid);\n const axisNode = select(axisRef.current);\n axisNode.call(axis);\n\n // need to remove the first tick when live under the domain line\n const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n firstTick.remove();\n }\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n .attr('dy', '.71em')\n .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n .attr('transform', `rotate(${tickRotation})`);\n }\n }, [\n innerHeight,\n overwriteTicks,\n xAxis?.showGrid,\n tickFormat,\n tickValues,\n xScale,\n tickRotation,\n xAxis.type,\n ticksScales,\n tickCount,\n containerRatio,\n innerWidth,\n uniqueData.length,\n uniqueData,\n internalMargin.left,\n isHorizontal,\n ]);\n if (xAxis.hideAxis) return null;\n return (\n <g transform={`translate(0,${innerHeight})`}>\n <g ref={setAxisBottomRef}>\n <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n </g>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat, ScaleLinear, ScaleTime } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth / 100) * containerRatio;\n }\n return innerWidth / 100;\n })();\n const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n // we show the only the ticks values on the screen when zoomed enough\n // @todo we need to improve this logic\n if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n const ticksName = uniqueData.map((u) => u.xValue);\n axis.tickValues(ticksName);\n grid.tickValues(ticksName);\n } else if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n }\n\n if (axisRef?.current && gridRef?.current) {\n if (xAxis?.showGrid) select(gridRef.current).call(grid);\n const axisNode = select(axisRef.current);\n axisNode.call(axis);\n\n // need to remove the first tick when live under the domain line\n const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n firstTick.remove();\n }\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n .attr('dy', '.71em')\n .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n .attr('transform', `rotate(${tickRotation})`);\n }\n }, [\n innerHeight,\n overwriteTicks,\n xAxis?.showGrid,\n tickFormat,\n tickValues,\n xScale,\n tickRotation,\n xAxis.type,\n ticksScales,\n tickCount,\n containerRatio,\n innerWidth,\n uniqueData.length,\n uniqueData,\n internalMargin.left,\n isHorizontal,\n ]);\n if (xAxis.hideAxis) return null;\n return (\n <g transform={`translate(0,${innerHeight})`}>\n <g ref={setAxisBottomRef}>\n <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n </g>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAqD;AACrD,gBAAuE;AACvE,oBAAuC;AACvC,0BAA6B;AAE7B,2BAA8B;AAC9B,qBAAmC;AAE5B,MAAM,aAAa,aAAAA,QAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,iBAAa,oCAAc;AACjC,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,MAAqC,EAAE,cAAc,CAAC;AAE9E,QAAI,YAAY,SAAS,MAAM,IAAI,GAAG;AACpC,YAAM,YAAY,MAAM;AACtB,YAAI;AAAW,iBAAO;AACtB,YAAI,iBAAiB,GAAG;AACtB,iBAAQ,aAAa,MAAO;AAAA,QAC9B;AACA,eAAO,aAAa;AAAA,MACtB,GAAG;AACH,YAAM,QAAS,OAA0E,QAAQ,QAAQ;AAIzG,UAAI,iBAAiB,KAAK,WAAW,SAAS,MAAM,CAAC,cAAc;AACjE,cAAM,YAAY,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM;AAChD,aAAK,WAAW,SAAS;AACzB,aAAK,WAAW,SAAS;AAAA,MAC3B,WAAW,cAAc,OAAO;AAC9B,cAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,aAAK,WAAW,UAAU;AAAA,MAC5B,OAAO;AACL,aAAK,WAAW,KAAK;AACrB,aAAK,WAAW,KAAK;AAAA,MACvB;AAEA,UAAI,YAAY;AACd,YAAI,OAAO,eAAe,UAAU;AAClC,gBAAM,sBAAkB,mCAAmB,MAAM,QAAQ,QAAQ;AACjE,eAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,QACvD;AACA,YAAI,OAAO,eAAe,YAAY;AACpC,eAAK,WAAW,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS,WAAW,SAAS,SAAS;AACxC,UAAI,OAAO;AAAU,8BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACtD,YAAM,eAAW,kBAAO,QAAQ,OAAO;AACvC,eAAS,KAAK,IAAI;AAGlB,YAAM,YAAY,SAAS,OAAO,OAAO,EAAE,KAAK;AAChD,UAAI,WAAW,sBAAsB,EAAE,OAAO,eAAe,OAAO,MAAM,CAAC,OAAO,WAAW;AAC3F,kBAAU,OAAO;AAAA,MACnB;AACA,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,eAAe,IAAI,UAAU,KAAK,EACvD,KAAK,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI,CAAC,EACvD,KAAK,MAAM,OAAO,EAClB,KAAK,KAAK,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,GAAG,EACxE,KAAK,aAAa,UAAU,eAAe;AAAA,IAClD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,IACf;AAAA,EACF,CAAC;AACD,MAAI,MAAM;AAAU,WAAO;AAC3B,SACE,6CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,kDAAC;AAAA,QAAE,KAAK;AAAA,QACN,sDAAC;AAAA,UAAW,WAAW,MAAM;AAAA,UAAO,WAAW;AAAA,UAAO,KAAK;AAAA,SAAS;AAAA,OACtE;AAAA,MACA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ,CAAC;",
6
6
  "names": ["React"]
7
7
  }
@@ -49,8 +49,6 @@ const AxisLeft = () => {
49
49
  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};
50
50
  const ticks = yScale.ticks?.(tickCount ?? height / 80);
51
51
  const { type, showGrid, color: axisColor } = yAxis;
52
- (0, import_react.useEffect)(() => {
53
- });
54
52
  (0, import_react.useEffect)(() => {
55
53
  const axis = (0, import_d3.axisLeft)(yScale).tickSizeOuter(0);
56
54
  const grid = (0, import_d3.axisLeft)(yScale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisLeft = () => {\n const {\n props: { yAxis },\n innerHeight,\n innerWidth,\n yScale,\n chartId,\n height,\n setAxisLeftRef,\n } = useContext(ChartContext);\n\n const ref = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};\n\n const ticks = yScale.ticks?.(tickCount ?? height / 80);\n\n const { type, showGrid, color: axisColor } = yAxis;\n\n useEffect(() => {});\n useEffect(() => {\n const axis = axisLeft(yScale).tickSizeOuter(0);\n\n const grid = axisLeft(yScale)\n .tickFormat((_) => '')\n .tickSize(showGrid ? -innerWidth : 0)\n .tickSizeOuter(0);\n\n if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n if (ref?.current && gridRef?.current) {\n select(gridRef.current).call(grid);\n const axisNode = select(ref.current);\n axisNode.call(axis);\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', 'end')\n .attr('dx', '-.8em')\n .attr('dy', '.15em')\n .attr('transform', `rotate(-${tickRotation})`);\n }\n }, [\n innerHeight,\n innerWidth,\n overwriteTicks,\n showGrid,\n tickFormat,\n tickRotation,\n tickValues,\n ticks,\n type,\n yAxis,\n yScale,\n ]);\n\n if (yAxis.hideAxis) return null;\n\n return (\n <g>\n <g mask={`url(#mask-${chartId})`}>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n <g ref={setAxisLeftRef}>\n <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-left\"></StyledAxis>\n </g>\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAqD;AACrD,gBAAiC;AACjC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;AAE5B,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,8BAAU,MAAM;AAAA,EAAC,CAAC;AAClB,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,sBAAkB,mCAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,sDAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,4CAAC;AAAA,QAAE,KAAK;AAAA,QACN,sDAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisLeft = () => {\n const {\n props: { yAxis },\n innerHeight,\n innerWidth,\n yScale,\n chartId,\n height,\n setAxisLeftRef,\n } = useContext(ChartContext);\n\n const ref = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};\n\n const ticks = yScale.ticks?.(tickCount ?? height / 80);\n\n const { type, showGrid, color: axisColor } = yAxis;\n\n useEffect(() => {\n const axis = axisLeft(yScale).tickSizeOuter(0);\n\n const grid = axisLeft(yScale)\n .tickFormat((_) => '')\n .tickSize(showGrid ? -innerWidth : 0)\n .tickSizeOuter(0);\n\n if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n if (ref?.current && gridRef?.current) {\n select(gridRef.current).call(grid);\n const axisNode = select(ref.current);\n axisNode.call(axis);\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', 'end')\n .attr('dx', '-.8em')\n .attr('dy', '.15em')\n .attr('transform', `rotate(-${tickRotation})`);\n }\n }, [\n innerHeight,\n innerWidth,\n overwriteTicks,\n showGrid,\n tickFormat,\n tickRotation,\n tickValues,\n ticks,\n type,\n yAxis,\n yScale,\n ]);\n\n if (yAxis.hideAxis) return null;\n\n return (\n <g>\n <g mask={`url(#mask-${chartId})`}>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n <g ref={setAxisLeftRef}>\n <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-left\"></StyledAxis>\n </g>\n </g>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAqD;AACrD,gBAAiC;AACjC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;AAE5B,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,sBAAkB,mCAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,sDAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,4CAAC;AAAA,QAAE,KAAK;AAAA,QACN,sDAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,11 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import React2, { useContext, useEffect, useRef } from "react";
4
- import { select, axisBottom, timeFormat } from "d3";
4
+ import { select, axisBottom } from "d3";
5
5
  import { StyledAxis, StyledGrid } from "../../styles";
6
6
  import { ChartContext } from "../../ChartContext";
7
7
  import { useUniqueData } from "../../helpers/useUniqueData";
8
+ import { getFormatGenerator } from "../../helpers";
8
9
  const AxisBottom = React2.memo(() => {
9
10
  const {
10
11
  props: { xAxis },
@@ -47,8 +48,8 @@ const AxisBottom = React2.memo(() => {
47
48
  }
48
49
  if (tickFormat) {
49
50
  if (typeof tickFormat === "string") {
50
- const formatGenerator = timeFormat(tickFormat);
51
- axis.tickFormat((d) => formatGenerator(d));
51
+ const formatGenerator = getFormatGenerator(xAxis.type ?? "linear");
52
+ axis.tickFormat((d) => formatGenerator(tickFormat)(d));
52
53
  }
53
54
  if (typeof tickFormat === "function") {
54
55
  axis.tickFormat(tickFormat);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat, ScaleLinear, ScaleTime } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth / 100) * containerRatio;\n }\n return innerWidth / 100;\n })();\n const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n // we show the only the ticks values on the screen when zoomed enough\n // @todo we need to improve this logic\n if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n const ticksName = uniqueData.map((u) => u.xValue);\n axis.tickValues(ticksName);\n grid.tickValues(ticksName);\n } else if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = timeFormat(tickFormat);\n axis.tickFormat((d) => formatGenerator(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n }\n\n if (axisRef?.current && gridRef?.current) {\n if (xAxis?.showGrid) select(gridRef.current).call(grid);\n const axisNode = select(axisRef.current);\n axisNode.call(axis);\n\n // need to remove the first tick when live under the domain line\n const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n firstTick.remove();\n }\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n .attr('dy', '.71em')\n .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n .attr('transform', `rotate(${tickRotation})`);\n }\n }, [\n innerHeight,\n overwriteTicks,\n xAxis?.showGrid,\n tickFormat,\n tickValues,\n xScale,\n tickRotation,\n xAxis.type,\n ticksScales,\n tickCount,\n containerRatio,\n innerWidth,\n uniqueData.length,\n uniqueData,\n internalMargin.left,\n isHorizontal,\n ]);\n if (xAxis.hideAxis) return null;\n return (\n <g transform={`translate(0,${innerHeight})`}>\n <g ref={setAxisBottomRef}>\n <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n </g>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n );\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat, ScaleLinear, ScaleTime } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n const {\n props: { xAxis },\n innerHeight,\n xScale,\n innerWidth,\n containerRatio,\n internalMargin,\n isHorizontal,\n setAxisBottomRef,\n } = useContext(ChartContext);\n\n const axisRef = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n xAxis.tick || ({} as DSChartT.AxisTickT);\n\n const ticksScales = ['linear', 'time', 'log'];\n // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n const uniqueData = useUniqueData();\n useEffect(() => {\n const grid = axisBottom(xScale as ScaleLinear<number, number>)\n .tickSize(-innerHeight)\n .tickFormat('')\n .tickSizeOuter(0);\n\n const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n if (ticksScales.includes(xAxis.type)) {\n const ticksNum = (() => {\n if (tickCount) return tickCount;\n if (containerRatio > 1) {\n return (innerWidth / 100) * containerRatio;\n }\n return innerWidth / 100;\n })();\n const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n // we show the only the ticks values on the screen when zoomed enough\n // @todo we need to improve this logic\n if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\n const ticksName = uniqueData.map((u) => u.xValue);\n axis.tickValues(ticksName);\n grid.tickValues(ticksName);\n } else if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n }\n\n if (axisRef?.current && gridRef?.current) {\n if (xAxis?.showGrid) select(gridRef.current).call(grid);\n const axisNode = select(axisRef.current);\n axisNode.call(axis);\n\n // need to remove the first tick when live under the domain line\n const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10 && !xScale.bandwidth) {\n firstTick.remove();\n }\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n .attr('dy', '.71em')\n .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n .attr('transform', `rotate(${tickRotation})`);\n }\n }, [\n innerHeight,\n overwriteTicks,\n xAxis?.showGrid,\n tickFormat,\n tickValues,\n xScale,\n tickRotation,\n xAxis.type,\n ticksScales,\n tickCount,\n containerRatio,\n innerWidth,\n uniqueData.length,\n uniqueData,\n internalMargin.left,\n isHorizontal,\n ]);\n if (xAxis.hideAxis) return null;\n return (\n <g transform={`translate(0,${innerHeight})`}>\n <g ref={setAxisBottomRef}>\n <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n </g>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n );\n});\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -20,8 +20,6 @@ const AxisLeft = () => {
20
20
  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};
21
21
  const ticks = yScale.ticks?.(tickCount ?? height / 80);
22
22
  const { type, showGrid, color: axisColor } = yAxis;
23
- useEffect(() => {
24
- });
25
23
  useEffect(() => {
26
24
  const axis = axisLeft(yScale).tickSizeOuter(0);
27
25
  const grid = axisLeft(yScale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisLeft = () => {\n const {\n props: { yAxis },\n innerHeight,\n innerWidth,\n yScale,\n chartId,\n height,\n setAxisLeftRef,\n } = useContext(ChartContext);\n\n const ref = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};\n\n const ticks = yScale.ticks?.(tickCount ?? height / 80);\n\n const { type, showGrid, color: axisColor } = yAxis;\n\n useEffect(() => {});\n useEffect(() => {\n const axis = axisLeft(yScale).tickSizeOuter(0);\n\n const grid = axisLeft(yScale)\n .tickFormat((_) => '')\n .tickSize(showGrid ? -innerWidth : 0)\n .tickSizeOuter(0);\n\n if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n if (ref?.current && gridRef?.current) {\n select(gridRef.current).call(grid);\n const axisNode = select(ref.current);\n axisNode.call(axis);\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', 'end')\n .attr('dx', '-.8em')\n .attr('dy', '.15em')\n .attr('transform', `rotate(-${tickRotation})`);\n }\n }, [\n innerHeight,\n innerWidth,\n overwriteTicks,\n showGrid,\n tickFormat,\n tickRotation,\n tickValues,\n ticks,\n type,\n yAxis,\n yScale,\n ]);\n\n if (yAxis.hideAxis) return null;\n\n return (\n <g>\n <g mask={`url(#mask-${chartId})`}>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n <g ref={setAxisLeftRef}>\n <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-left\"></StyledAxis>\n </g>\n </g>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAsB,IAAI;AACtC,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,YAAU,MAAM;AAAA,EAAC,CAAC;AAClB,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,OAAO,SAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,kBAAkB,mBAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,WAAW,OAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,8BAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,oBAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisLeft = () => {\n const {\n props: { yAxis },\n innerHeight,\n innerWidth,\n yScale,\n chartId,\n height,\n setAxisLeftRef,\n } = useContext(ChartContext);\n\n const ref = useRef<SVGSVGElement>(null);\n const gridRef = useRef<SVGSVGElement>(null);\n const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};\n\n const ticks = yScale.ticks?.(tickCount ?? height / 80);\n\n const { type, showGrid, color: axisColor } = yAxis;\n\n useEffect(() => {\n const axis = axisLeft(yScale).tickSizeOuter(0);\n\n const grid = axisLeft(yScale)\n .tickFormat((_) => '')\n .tickSize(showGrid ? -innerWidth : 0)\n .tickSizeOuter(0);\n\n if (tickValues && ticks) {\n const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];\n axis.tickValues(finalTicks);\n } else {\n axis.tickValues(ticks);\n grid.tickValues(ticks);\n }\n\n if (tickFormat) {\n if (typeof tickFormat === 'string') {\n const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n }\n if (typeof tickFormat === 'function') {\n axis.tickFormat(tickFormat);\n }\n }\n if (ref?.current && gridRef?.current) {\n select(gridRef.current).call(grid);\n const axisNode = select(ref.current);\n axisNode.call(axis);\n if (tickRotation)\n axisNode\n .selectAll('text')\n .style('text-anchor', 'end')\n .attr('dx', '-.8em')\n .attr('dy', '.15em')\n .attr('transform', `rotate(-${tickRotation})`);\n }\n }, [\n innerHeight,\n innerWidth,\n overwriteTicks,\n showGrid,\n tickFormat,\n tickRotation,\n tickValues,\n ticks,\n type,\n yAxis,\n yScale,\n ]);\n\n if (yAxis.hideAxis) return null;\n\n return (\n <g>\n <g mask={`url(#mask-${chartId})`}>\n <StyledGrid ref={gridRef}></StyledGrid>\n </g>\n <g ref={setAxisLeftRef}>\n <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-left\"></StyledAxis>\n </g>\n </g>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAsB,IAAI;AACtC,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,OAAO,SAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,kBAAkB,mBAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,WAAW,OAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,8BAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,oBAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dataviz",
3
- "version": "3.11.0-rc.2",
3
+ "version": "3.11.0-rc.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - DataViz",
6
6
  "files": [
@@ -35,13 +35,13 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-grid": "3.11.0-rc.2",
39
- "@elliemae/ds-icon": "3.11.0-rc.2",
40
- "@elliemae/ds-icons": "3.11.0-rc.2",
41
- "@elliemae/ds-popperjs": "3.11.0-rc.2",
42
- "@elliemae/ds-system": "3.11.0-rc.2",
43
- "@elliemae/ds-tooltip": "3.11.0-rc.2",
44
- "@elliemae/ds-utilities": "3.11.0-rc.2",
38
+ "@elliemae/ds-grid": "3.11.0-rc.3",
39
+ "@elliemae/ds-icon": "3.11.0-rc.3",
40
+ "@elliemae/ds-icons": "3.11.0-rc.3",
41
+ "@elliemae/ds-popperjs": "3.11.0-rc.3",
42
+ "@elliemae/ds-system": "3.11.0-rc.3",
43
+ "@elliemae/ds-tooltip": "3.11.0-rc.3",
44
+ "@elliemae/ds-utilities": "3.11.0-rc.3",
45
45
  "d3": "~7.4.4"
46
46
  },
47
47
  "devDependencies": {