-
Notifications
You must be signed in to change notification settings - Fork 192
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
passing in custom value to reference line is not working as expected #121
Comments
I'm seeing similar problems with this. From inspecting the generated <line...> code, it looks like the "value" for a custom SparklinesReferenceLine is being interpreted relative to the pixel dimensions of the containing svg (from top-left corner) rather than relative to the data being passed in via the data attribute |
+1 |
I just ran into this today. Please Fix! |
+1 |
Ran into the issue today. |
Hi, this my team's work arounds. extracted from original react-sparklines code. import React, { memo } from 'react'
import {
Sparklines,
SparklinesLine,
SparklinesReferenceLine,
SparklinesProps,
SparklinesLineProps
} from 'react-sparklines'
import { useMemo } from '@src/hooks'
const arrayMin = (data: number[]): number => Math.min.apply(Math, data)
const arrayMax = (data: number[]): number => Math.max.apply(Math, data)
interface FancySparklinesProps extends SparklinesProps {
data: number[]
referenceValue?: number
lineStyle?: SparklinesLineProps
}
interface CalcRefValueProps {
data: number[]
height: number
margin: number
referenceValue?: number
}
const calcRefValue = ({ data, height, margin, referenceValue }: CalcRefValueProps) => {
if (referenceValue === undefined) return
const max = arrayMax(data)
const min = arrayMin(data)
const vfactor = (height - margin * 2) / (max - min || 2)
return (max === min ? 1 : max - referenceValue) * vfactor + margin
}
const FancySparklines = (props: FancySparklinesProps): JSX.Element => {
const { data, height = 1, margin = 0, referenceValue, lineStyle } = props
const refValue = useMemo(() => {
return calcRefValue({ data, height, margin, referenceValue })
}, [data, height, margin, referenceValue])
return (
<Sparklines {...props}>
<SparklinesLine {...lineStyle} />
{referenceValue !== undefined && <SparklinesReferenceLine type="custom" value={refValue} />}
</Sparklines>
)
}
export default memo(FancySparklines) the problem is 0 is just 0, not a SVG position. |
I have a linear data set going from [1, ...6]. Passing in 1 as a value to the SparklinesReferenceLine I would expect the reference line to be at the bottom of my screenshot below, but no matter what value I pass in, it seems to want to just stay around the 4,5,6 range.
The text was updated successfully, but these errors were encountered: