From 780fbcdc12234975b49e7e0e62febcd200b19580 Mon Sep 17 00:00:00 2001
From: Rebecca Bol <r.bol@f5.com>
Date: Mon, 11 Mar 2024 13:49:37 -0700
Subject: [PATCH] XY Container | Fix: yDomain excludes upper bound for some
 charts when scaleByDomain is true #0

---
 .../stacked-vs-non-stacked}/index.tsx         |  4 +--
 .../stacked-vs-non-stacked}/styles.module.css |  0
 .../xy-container/scale-by-domain/index.tsx    | 33 +++++++++++++++++++
 packages/ts/src/utils/data.ts                 |  2 +-
 4 files changed, 36 insertions(+), 3 deletions(-)
 rename packages/dev/src/examples/{auxiliary/crosshair/xy-components => xy-components/crosshair/stacked-vs-non-stacked}/index.tsx (91%)
 rename packages/dev/src/examples/{auxiliary/crosshair/xy-components => xy-components/crosshair/stacked-vs-non-stacked}/styles.module.css (100%)
 create mode 100644 packages/dev/src/examples/xy-components/xy-container/scale-by-domain/index.tsx

diff --git a/packages/dev/src/examples/auxiliary/crosshair/xy-components/index.tsx b/packages/dev/src/examples/xy-components/crosshair/stacked-vs-non-stacked/index.tsx
similarity index 91%
rename from packages/dev/src/examples/auxiliary/crosshair/xy-components/index.tsx
rename to packages/dev/src/examples/xy-components/crosshair/stacked-vs-non-stacked/index.tsx
index 2bd9db6ed..03654c815 100644
--- a/packages/dev/src/examples/auxiliary/crosshair/xy-components/index.tsx
+++ b/packages/dev/src/examples/xy-components/crosshair/stacked-vs-non-stacked/index.tsx
@@ -4,8 +4,8 @@ import { generateXYDataRecords, XYDataRecord } from '@src/utils/data'
 
 import s from './styles.module.css'
 
-export const title = 'XY Components'
-export const subTitle = 'Stacked vs Non-Stacked data'
+export const title = 'Stacked vs. Non-Stacked'
+export const subTitle = 'XY component comparison'
 
 export const component = (): JSX.Element => {
   const data = generateXYDataRecords(10)
diff --git a/packages/dev/src/examples/auxiliary/crosshair/xy-components/styles.module.css b/packages/dev/src/examples/xy-components/crosshair/stacked-vs-non-stacked/styles.module.css
similarity index 100%
rename from packages/dev/src/examples/auxiliary/crosshair/xy-components/styles.module.css
rename to packages/dev/src/examples/xy-components/crosshair/stacked-vs-non-stacked/styles.module.css
diff --git a/packages/dev/src/examples/xy-components/xy-container/scale-by-domain/index.tsx b/packages/dev/src/examples/xy-components/xy-container/scale-by-domain/index.tsx
new file mode 100644
index 000000000..29d4360e0
--- /dev/null
+++ b/packages/dev/src/examples/xy-components/xy-container/scale-by-domain/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { VisXYContainer, VisArea, VisLine, VisAxis, VisCrosshair, VisStackedBar, VisScatter } from '@unovis/react'
+
+export const title = 'Scale by Domain'
+export const subTitle = 'XY component comparison'
+
+export const component = (): JSX.Element => {
+  const data = Array.from({ length: 10 }, (_, i) => ({
+    x: i + 1,
+    y: Math.pow(2, i + 1),
+  }))
+  const configs = [
+    { },
+    { scaleByDomain: true },
+    { scaleByDomain: true, xDomain: [1, 5] },
+  ]
+  const components = [VisArea, VisLine, VisStackedBar, VisScatter]
+  return (<>
+    {components.map(// eslint-disable-next-line @typescript-eslint/naming-convention
+      Component => (
+        <div style={{ display: 'flex', width: '100%', height: 200 }}>
+          {configs.map((c, i) => (
+            <VisXYContainer key={`c${i}`} {...c}>
+              <Component data={data} x={d => d.x} y={d => d.y}/>
+              <VisCrosshair/>
+              <VisAxis type="x" minMaxTicksOnly />
+              <VisAxis type="y" minMaxTicksOnly/>
+            </VisXYContainer>
+          ))}
+        </div>
+      ))}
+  </>)
+}
diff --git a/packages/ts/src/utils/data.ts b/packages/ts/src/utils/data.ts
index 4f9ab4f94..f0bd9c01b 100644
--- a/packages/ts/src/utils/data.ts
+++ b/packages/ts/src/utils/data.ts
@@ -325,7 +325,7 @@ export function getNearest<Datum> (data: Datum[], value: number, accessor: Numer
 export function filterDataByRange<Datum> (data: Datum[], range: [number, number], accessor: NumericAccessor<Datum>): Datum[] {
   const filteredData = data.filter((d, i) => {
     const value = getNumber(d, accessor, i)
-    return (value >= range[0]) && (value < range[1])
+    return (value >= range[0]) && (value <= range[1])
   })
 
   return filteredData