fix: allow empty tick values (#2671)

FormidableLabs · Nov 15, 2023 · 6dc9f10 · 6dc9f10 · vercel · Nov 15, 2023
1 parent 0a26400
commit 6dc9f10
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 2 deletions.
diff --git a/demo/ts/components/victory-axis-demo.tsx b/demo/ts/components/victory-axis-demo.tsx
@@ -269,6 +269,14 @@ export default class VictoryAxisDemo extends React.Component<
               "Mariners\nSEA",
             ]}
           />
+
+          <VictoryAxis
+            label="Empty Values"
+            padding={{ top: 40, bottom: 40, left: 40, right: 90 }}
+            orientation="right"
+            style={styleOverrides}
+            tickValues={[]}
+          />
         </div>
       </div>
     );

diff --git a/packages/victory-axis/CHANGELOG.md b/packages/victory-axis/CHANGELOG.md
@@ -1,5 +1,7 @@
 # victory-axis
 
+## 36.6.13
+
 ## 36.6.12
 
 ## 36.6.11

diff --git a/packages/victory-axis/src/helper-methods.tsx b/packages/victory-axis/src/helper-methods.tsx
@@ -595,7 +595,8 @@ export const getBaseProps = (props, fallbackProps) => {
         ? { [otherAxis]: props.scale[otherAxis] }
         : undefined,
   };
-  return ticks.reduce((childProps, tickValue, index) => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  return (ticks as number[]).reduce((childProps, tickValue, index) => {
     const tick = stringTicks ? stringTicks[index] : tickValue;
     const text = tickFormat(tickValue, index, ticks);
     const styles = getEvaluatedStyles(

diff --git a/packages/victory-core/src/victory-util/axis.tsx b/packages/victory-core/src/victory-util/axis.tsx
@@ -181,6 +181,11 @@ function getStringTicks(props) {
 
 function getTickArray(props) {
   const { tickValues, tickFormat } = props;
+
+  if (tickValues?.length === 0) {
+    return [];
+  }
+
   const axis = getAxis(props);
   const stringMap = props.stringMap && props.stringMap[axis];
   const getTicksFromFormat = () => {
@@ -276,6 +281,11 @@ function downsampleTicks(ticks: number[], tickCount: number) {
 export function getTicks(props, scale: D3Scale, filterZero = false) {
   const { tickCount } = props;
   const tickArray = getTickArray(props);
+
+  if (tickArray?.length === 0) {
+    return [""];
+  }
+
   const tickValues = tickArray ? tickArray.map((v) => v.value) : undefined;
   if (tickValues) {
     return downsampleTicks(tickValues, tickCount);
@@ -307,7 +317,10 @@ export function getTicks(props, scale: D3Scale, filterZero = false) {
 function getDomainFromData(props, axis) {
   const { polar, startAngle = 0, endAngle = 360 } = props;
   const tickArray = getTickArray(props);
-  const tickValues = tickArray ? tickArray.map((v) => v.value) : undefined;
+  const tickValues =
+    tickArray && tickArray?.length !== 0
+      ? tickArray.map((v) => v.value)
+      : undefined;
   if (!Array.isArray(tickValues)) {
     return undefined;
   }

diff --git a/stories/victory-axis.stories.js b/stories/victory-axis.stories.js
@@ -133,6 +133,13 @@ export const TickValues = () => {
       <VictoryChart {...defaultChartProps} scale={{ x: "log" }}>
         <VictoryAxis tickValues={[1, 3, 5, 7, 10, 50, 100, 500, 1000]} />
       </VictoryChart>
+      <VictoryChart {...defaultChartProps}>
+        <VictoryAxis
+          label={"Empty Tick Values"}
+          tickValues={[]}
+          orientation="right"
+        />
+      </VictoryChart>
     </div>
   );
 };