XY Container | Fix: yDomain excludes upper bound for some charts when…

… scaleByDomain is true

#0

packages/dev/src/examples/auxiliary/crosshair/xy-components/index.tsx → 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)

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>
+      ))}
+  </>)
+}

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