d3-shape#curveCardinal JavaScript Examples
The following examples show how to use
d3-shape#curveCardinal.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: bar-chart.js From website with Apache License 2.0 | 4 votes |
|
BarChart = ({
data,
lineData,
refLineData,
annotations,
handleAnnotationClick,
fill,
lineColor,
marginBottom,
marginLeft,
marginRight,
marginTop,
showTicks,
width,
height,
yMax,
yTicks,
lastXTick,
renderTooltipContents,
perCapLabel,
}) => {
const chartRef = useRef()
const [tooltip, setTooltip] = useState(null)
// Used for tooltip optimization
const [timeoutRef, setTimeoutRef] = useState(null)
const [keyboardFocus, setKeyboardFocus] = useState(false)
// Used when placing annotations
const getValueForDate = date => {
const dateData = data.find(d => d.date.getTime() === date.getTime())
return dateData && dateData.value
}
const totalXMargin = marginLeft + marginRight
const totalYMargin = marginTop + marginBottom
// The x range is over the area in which the chart should be displaying.
// We don't use an X transform to place it in the correct spot, we use range
// instead
const xScale = scaleBand()
.domain(data.map(d => d.date))
.range([marginLeft, width - marginRight])
.padding(0.1)
const dateDomain = extent(data, d => d.date)
// Should probably refactor to use a single x-axis scale
// but the bars make use of the band.
const xScaleTime = scaleTime()
.domain(dateDomain)
.range([marginLeft, width - marginRight])
const yMaxEffective =
yMax || max([...data, ...(refLineData || [])], d => d.value)
const yScale = scaleLinear()
.domain([0, yMaxEffective])
.nice()
.range([height - totalYMargin, 0])
const msInOneMonth = 2628000000
const monthlyTickInterval = Math.ceil(
Math.abs((dateDomain[1] - dateDomain[0]) / (msInOneMonth * 6)),
)
const xTickAmount = timeMonth.every(monthlyTickInterval)
const yTicksThreshold = 4
const yTicksEffective =
yTicks || yMaxEffective < yTicksThreshold ? yMaxEffective : yTicksThreshold
const lastTime = xScaleTime.ticks(timeDay.every(1)).pop()
let lineFn = null
if (lineData) {
lineFn = line()
.defined(d => !Number.isNaN(d.value) && d.value !== null)
.curve(curveCardinal)
.x(d => xScaleTime(d.date))
.y(d => yScale(d.value))
}
const hover = (event, d) => {
// Ensure that tooltip doesn't flash when transitioning between bars
if (timeoutRef) {
clearTimeout(timeoutRef)
}
const isTouchEvent = !event.clientX
const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX
const eventY = isTouchEvent ? event.touches[0].clientY : event.clientY
setTooltip({
top: isTouchEvent ? eventY - 130 : eventY + 10,
left: isTouchEvent ? eventX - 80 : eventX + 5,
d,
})
}
const mouseOut = () => {
if (timeoutRef) {
clearTimeout(timeoutRef)
}
setTimeoutRef(setTimeout(() => setTooltip(null), 200))
}
useEffect(() => {
if (keyboardFocus === false || typeof data[keyboardFocus] === 'undefined') {
return
}
const column = data[keyboardFocus]
setTooltip({
top: chartRef.current.getBoundingClientRect().top,
left: chartRef.current.getBoundingClientRect().left,
d: column,
})
}, [keyboardFocus])
return (
<>
<svg
className={classnames(chartStyles.chart, styles.chart)}
viewBox={`0 0 ${width} ${height}`}
tabIndex="0"
aria-hidden
ref={chartRef}
onBlur={() => {
setTooltip(null)
setKeyboardFocus(false)
}}
onKeyDown={event => {
if (event.key === 'Escape') {
setTooltip(null)
setKeyboardFocus(false)
chartRef.current.blur()
}
if (event.key === 'ArrowRight') {
setKeyboardFocus(
keyboardFocus < data.length ? keyboardFocus + 1 : data.length,
)
}
if (
(event.shiftKey && event.key === 'Tab') ||
event.key === 'ArrowLeft'
) {
setKeyboardFocus(keyboardFocus > 0 ? keyboardFocus - 1 : 0)
}
}}
>
<g transform={`translate(${marginLeft} ${marginTop})`}>
<text className={classnames(chartStyles.label, styles.directions)}>
Use arrows to move, Escape to leave.
</text>
</g>
{/* y ticks */}
<g transform={`translate(${marginLeft} ${marginTop})`}>
{yScale.ticks(yTicksEffective).map(
(tick, i) =>
i < showTicks && (
<g key={tick}>
{/* Do not remove nested svg. See https://github.com/COVID19Tracking/website/pull/645#discussion_r411676987 */}
<svg
y={yScale(tick) + 6}
x="-10"
className={chartStyles.yTickLabel}
>
<text className={chartStyles.label}>
{formatNumber(tick)}
{tick > 0 &&
perCapLabel /* this only displays if passed */}
</text>
</svg>
<line
className={chartStyles.gridLine}
x1={0}
x2={width - totalXMargin}
y1={yScale(tick)}
y2={yScale(tick)}
/>
</g>
),
)}
</g>
{/* x ticks (dates) */}
<g transform={`translate(0, ${height - marginBottom})`}>
{xScaleTime.ticks(xTickAmount).map(d => (
<Fragment key={`x-${d}`}>
<text
className={`${chartStyles.label} ${chartStyles.xTickLabel}`}
key={d}
x={xScaleTime(d)}
y="20"
>{`${formatDate(d)}`}</text>
<line
className={chartStyles.label}
stroke={colors.colorSlate500}
x1={xScaleTime(d)}
y1="0"
x2={xScaleTime(d)}
y2="5"
/>
</Fragment>
))}
{lastXTick && (
<>
<text
className={`${chartStyles.label} ${chartStyles.xTickLabel}`}
x={xScaleTime(lastTime)}
y="20"
>{`${formatDate(lastTime)}`}</text>
<line
className={chartStyles.label}
stroke={colors.colorSlate500}
x1={xScaleTime(lastTime)}
y1="0"
x2={xScaleTime(lastTime)}
y2="5"
/>
</>
)}
</g>
<mask id="dataMask">
<rect
x="0"
y="0"
width={width - marginRight}
height={height - totalYMargin}
fill="white"
/>
</mask>
{/* data */}
<g transform={`translate(0 ${marginTop})`} mask="url(#dataMask)">
{/* bars (data) */}
{data.map((d, key) => (
<rect
key={d.date + d.value}
x={xScale(d.date)}
y={yScale(d.value)}
height={yScale(0) - yScale(d.value)}
width={xScale.bandwidth()}
fillOpacity={lineData ? 1 : 0.8}
fill={fill}
className={classnames(
renderTooltipContents && styles.interactiveBar,
key === keyboardFocus && styles.selected,
)}
onMouseOver={event => hover(event, d)}
onFocus={event => hover(event, d)}
onMouseOut={mouseOut}
onBlur={mouseOut}
/>
))}
{/* line */}
{lineData && (
<path
d={lineFn(lineData)}
stroke={lineColor}
strokeWidth="3"
fill="none"
/>
)}
{/* reference line */}
{refLineData && (
<path
d={lineFn(refLineData)}
stroke="black"
strokeWidth="2"
strokeDasharray="4"
fill="none"
/>
)}
</g>
{/* annotations */}
{annotations && (
<g transform={`translate(0 ${marginTop})`}>
{annotations
.filter(
annotation =>
xScaleTime(annotation.date) >= xScaleTime(dateDomain[0]) &&
xScaleTime(annotation.date) <= xScaleTime(dateDomain[1]),
)
.map(d => (
<AnnotationBubble
content={d}
xScaleTime={xScaleTime}
yScale={yScale}
handleAnnotationClick={handleAnnotationClick}
getValueForDate={getValueForDate}
/>
))}
</g>
)}
</svg>
{renderTooltipContents && tooltip && (
<Tooltip {...tooltip}>{renderTooltipContents(tooltip.d)} </Tooltip>
)}
</>
)
}
Example #2
| Source File: line-chart.js From website with Apache License 2.0 | 4 votes |
|
LineChart = ({
data,
marginBottom,
marginLeft,
marginRight,
marginTop = 0,
showTicks,
width,
height,
yMax,
yTicks,
lastXTick,
perCapLabel,
renderTooltipContents,
}) => {
const totalXMargin = marginLeft + marginRight
const totalYMargin = marginTop + marginBottom
const dates = []
const values = []
data.forEach(item => {
item.data.forEach(row => {
dates.push(row.date)
values.push(row.value)
})
})
const [tooltip, setTooltip] = useState(null)
const [timeoutRef, setTimeoutRef] = useState(null)
const hover = (event, dataLine) => {
// Ensure that tooltip doesn't flash when transitioning between bars
if (timeoutRef) {
clearTimeout(timeoutRef)
}
const isTouchEvent = !event.clientX
const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX
const eventY = isTouchEvent ? event.touches[0].clientY : event.clientY
setTooltip({
top: isTouchEvent ? eventY - 130 : eventY + 10,
left: isTouchEvent ? eventX - 80 : eventX + 5,
d: dataLine,
})
}
const mouseOut = () => {
if (timeoutRef) {
clearTimeout(timeoutRef)
}
setTimeoutRef(setTimeout(() => setTooltip(null), 200))
}
const dateDomain = extent(dates)
const xScaleTime = scaleTime()
.domain(dateDomain)
.range([marginLeft, width - marginRight])
const yMaxEffective = yMax || max(values)
const yScale = scaleLinear()
.domain([0, yMaxEffective])
.nice()
.range([height - totalYMargin, 0])
const msInOneMonth = 2628000000
const monthlyTickInterval = Math.ceil(
Math.abs((dateDomain[1] - dateDomain[0]) / (msInOneMonth * 6)),
)
const xTickAmount = timeMonth.every(monthlyTickInterval)
const yTicksThreshold = 4
const yTicksEffective =
yTicks || yMaxEffective < yTicksThreshold ? yMaxEffective : yTicksThreshold
const lastTime = xScaleTime.ticks(timeDay.every(1)).pop()
const lineFn = line()
.defined(d => !Number.isNaN(d.value) && d.value !== null)
.curve(curveCardinal)
.x(d => xScaleTime(d.date))
.y(d => yScale(d.value))
return (
<>
<svg
className={chartStyles.chart}
viewBox={`0 0 ${width} ${height}`}
aria-hidden
>
{/* y ticks */}
<g transform={`translate(${marginLeft} ${marginTop})`}>
{yScale.ticks(yTicksEffective).map(
(tick, i) =>
i < showTicks && (
<g key={tick}>
{/* Do not remove nested svg. See https://github.com/COVID19Tracking/website/pull/645#discussion_r411676987 */}
<svg
y={yScale(tick) + 6}
x="-10"
className={chartStyles.yTickLabel}
>
<text className={chartStyles.label}>
{formatNumber(tick)}
{tick > 0 &&
perCapLabel /* this only displays if passed */}
</text>
</svg>
<line
className={chartStyles.gridLine}
x1={0}
x2={width - totalXMargin}
y1={yScale(tick)}
y2={yScale(tick)}
/>
</g>
),
)}
</g>
{/* x ticks (dates) */}
<g transform={`translate(0, ${height - marginBottom})`}>
{xScaleTime.ticks(xTickAmount).map(d => (
<Fragment key={`x-${d}`}>
<text
className={`${chartStyles.label} ${chartStyles.xTickLabel}`}
key={d}
x={xScaleTime(d)}
y="20"
>{`${formatDate(d)}`}</text>
<line
className={chartStyles.label}
stroke={colors.colorSlate500}
x1={xScaleTime(d)}
y1="0"
x2={xScaleTime(d)}
y2="5"
/>
</Fragment>
))}
{lastXTick && (
<>
<text
className={`${chartStyles.label} ${chartStyles.xTickLabel}`}
x={xScaleTime(lastTime)}
y="20"
>{`${formatDate(lastTime)}`}</text>
<line
className={chartStyles.label}
stroke={colors.colorSlate500}
x1={xScaleTime(lastTime)}
y1="0"
x2={xScaleTime(lastTime)}
y2="5"
/>
</>
)}
</g>
<mask id="dataMask">
<rect
x="0"
y="0"
width={width - marginRight}
height={height - totalYMargin}
fill="white"
/>
</mask>
{/* data */}
<g transform={`translate(0 ${marginTop})`} mask="url(#dataMask)">
{data && (
<>
{data.map(dataLine => (
<>
<path
d={lineFn(dataLine.data)}
stroke={dataLine.color}
strokeWidth={dataLine.stroke}
fill="none"
/>
{/* Add a wider hidden path for tooltips. */}
<path
d={lineFn(dataLine.data)}
stroke="transparent"
strokeWidth={6}
fill="none"
onMouseOver={event => hover(event, dataLine)}
onFocus={event => hover(event, dataLine)}
onMouseOut={mouseOut}
onBlur={mouseOut}
/>
</>
))}
</>
)}
</g>
</svg>
{renderTooltipContents && tooltip && (
<Tooltip {...tooltip}>{renderTooltipContents(tooltip.d)} </Tooltip>
)}
</>
)
}
Example #3
| Source File: multi-line-chart.js From website with Apache License 2.0 | 4 votes |
|
MultiLineChart = ({
data,
marginBottom,
marginLeft,
marginRight,
marginTop = 0,
showTicks,
width,
height,
yMax,
yTicks,
lastXTick,
perCapLabel,
}) => {
const totalXMargin = marginLeft + marginRight
const totalYMargin = marginTop + marginBottom
const dates = []
const values = []
data.forEach(item => {
Object.keys(item.data).forEach(category => {
item.data[category].forEach(row => {
dates.push(row.date)
values.push(row.value)
})
})
})
const dateDomain = extent(dates)
const xScaleTime = scaleTime()
.domain(dateDomain)
.range([marginLeft, width - marginRight])
const yMaxEffective = yMax || max(values)
const yScale = scaleLinear()
.domain([0, yMaxEffective])
.nice()
.range([height - totalYMargin, 0])
const msInOneMonth = 2628000000
const monthlyTickInterval = Math.ceil(
Math.abs((dateDomain[1] - dateDomain[0]) / (msInOneMonth * 6)),
)
const xTickAmount = timeMonth.every(monthlyTickInterval)
const yTicksThreshold = 4
const yTicksEffective =
yTicks || yMaxEffective < yTicksThreshold ? yMaxEffective : yTicksThreshold
const lastTime = xScaleTime.ticks(timeDay.every(1)).pop()
const lineFn = line()
.defined(d => !Number.isNaN(d.value) && d.value !== null)
.curve(curveCardinal)
.x(d => xScaleTime(d.date))
.y(d => yScale(d.value))
// TODO make this dry-er w/r/t the single line chart component
return (
<>
<svg
className={chartStyles.chart}
viewBox={`0 0 ${width} ${height}`}
aria-hidden
>
{/* y ticks */}
<g transform={`translate(${marginLeft} ${marginTop})`}>
{yScale.ticks(yTicksEffective).map(
(tick, i) =>
i < showTicks && (
<g key={tick}>
{/* Do not remove nested svg. See https://github.com/COVID19Tracking/website/pull/645#discussion_r411676987 */}
<svg
y={yScale(tick) + 6}
x="-10"
className={chartStyles.yTickLabel}
>
<text className={chartStyles.label}>
{formatNumber(tick)}
{tick > 0 &&
perCapLabel /* this only displays if passed */}
</text>
</svg>
<line
className={chartStyles.gridLine}
x1={0}
x2={width - totalXMargin}
y1={yScale(tick)}
y2={yScale(tick)}
/>
</g>
),
)}
</g>
{/* x ticks (dates) */}
<g transform={`translate(0, ${height - marginBottom})`}>
{xScaleTime.ticks(xTickAmount).map(d => (
<Fragment key={`x-${d}`}>
<text
className={`${chartStyles.label} ${chartStyles.xTickLabel}`}
key={d}
x={xScaleTime(d)}
y="20"
>{`${formatDate(d)}`}</text>
<line
className={chartStyles.label}
stroke={colors.colorSlate500}
x1={xScaleTime(d)}
y1="0"
x2={xScaleTime(d)}
y2="5"
/>
</Fragment>
))}
{lastXTick && (
<>
<text
className={`${chartStyles.label} ${chartStyles.xTickLabel}`}
x={xScaleTime(lastTime)}
y="20"
>{`${formatDate(lastTime)}`}</text>
<line
className={chartStyles.label}
stroke={colors.colorSlate500}
x1={xScaleTime(lastTime)}
y1="0"
x2={xScaleTime(lastTime)}
y2="5"
/>
</>
)}
</g>
<mask id="dataMask">
<rect
x="0"
y="0"
width={width - marginRight}
height={height - totalYMargin}
fill="white"
/>
</mask>
{/* data */}
<g transform={`translate(0 ${marginTop})`} mask="url(#dataMask)">
{data && (
<>
{data.map(item => (
<>
{Object.keys(item.data).map(category => (
<path
d={lineFn(item.data[category])}
stroke={item.colorMap[category]}
strokeWidth="1px"
fill="none"
/>
))}
</>
))}
</>
)}
</g>
</svg>
</>
)
}
Example #4
| Source File: AreaChart.js From fluent-ui-uxpin-merge with MIT License | 4 votes |
|
render() {
const curve = (type) => {
switch (type) {
case 'curveNatural':
return type;
case 'curveBasis':
return type;
case 'curveBasisClosed':
return type;
case 'curveLinear':
return type;
case 'curveLinearClosed':
return type;
case 'curveMonotoneX':
return type;
case 'curveMonotoneY':
return type;
case 'curveStep':
return type;
case 'curveStepAfter':
return type;
case 'curveStepBefore':
return type;
case 'curveCatmullRom':
return curveCatmullRom.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveCatmullRomClosed':
return curveCatmullRomClosed.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveCatmullRomOpen':
return curveCatmullRomOpen.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveBundle':
return curveBundle.beta(parseFloat(this.props.curveBundleBeta));
case 'curveCardinal':
return curveCardinal.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'curveCardinalOpen':
return curveCardinalOpen.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'curveCardinalClosed':
return curveCardinalClosed.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'no curve':
default:
return '';
}
};
return (
<XYPlot
height={this.props.height}
width={this.props.width}
css={AreaChartStyles}
onMouseLeave={() => this.restartCrosshair()}
margin={this.props.margin}>
{this.props.verticalGridLines ? <VerticalGridLines /> : undefined}
{this.props.horizontalGridLines ? <HorizontalGridLines /> : undefined}
{this.props.xLabels ? <XAxis /> : undefined}
{this.props.yLabels ? <YAxis /> : undefined}
{!Array.isArray(this.getData()[0]) ? (
<AreaSeries
data={this.getData()}
color={
this.getColorRange !== undefined
&& this.getColorRange()[0]
? this.getColorRange()[0]
: this.props.color
}
curve={curve(this.props.curve)}
opacity={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].opacity
? parseFloat(this.props.styles[0].opacity)
: parseFloat(this.props.opacity / 100)
}
stroke={
this.props.strokeColorRange !== undefined
&& this.props.strokeColorRange[0]
? this.props.strokeColorRange[0]
: this.props.strokeColor
}
strokeWidth={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].strokeWidth
? this.props.styles[0].strokeWidth
: this.props.strokeWidth
}
strokeStyle={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].strokeStyle
? this.props.styles[0].strokeStyle
: this.props.strokeStyle
}
onNearestX={(value, index) => this.getCrosshair(value, index)}
onNearestXY={this.props.onNearestXY}
onSeriesClick={this.props.onSeriesClick}
onSeriesRightClick={this.props.onSeriesRightClick}
onSeriesMouseOver={this.props.onSeriesMouseOver}
onSeriesMouseOut={this.props.onSeriesMouseOver}
animation={this.props.animation}
/>
) : (
this.getData().map((e, i) => (
<AreaSeries
key={i}
data={this.getData()[i]}
color={
this.getColorRange !== undefined
&& this.getColorRange()[i]
? this.getColorRange()[i]
: this.props.color
}
curve={curve(this.props.curve)}
opacity={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].opacity
? parseFloat(this.props.styles[i].opacity)
: parseFloat(this.props.opacity)
}
stroke={
this.props.strokeColorRange !== undefined
&& this.props.strokeColorRange[i]
? this.props.strokeColorRange[i]
: this.props.strokeColor
}
strokeWidth={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].strokeWidth
? this.props.styles[i].strokeWidth
: this.props.strokeWidth
}
strokeStyle={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].strokeStyle
? this.props.styles[i].strokeStyle
: this.props.strokeStyle
}
onNearestX={(value, index) => this.getCrosshair(value, index)}
onNearestXY={this.props.onNearestXY}
onSeriesClick={this.props.onSeriesClick}
onSeriesRightClick={this.props.onSeriesRightClick}
onSeriesMouseOver={this.props.onSeriesMouseOver}
onSeriesMouseOut={this.props.onSeriesMouseOver}
animation={this.props.animation}
/>
))
)}
{this.props.crossHair ? <Crosshair values={this.state.crosshairValues} /> : undefined}
</XYPlot>
);
}
Example #5
| Source File: LineChart.js From fluent-ui-uxpin-merge with MIT License | 4 votes |
|
render() {
const curve = (type) => {
switch (type) {
case 'curveNatural':
return type;
case 'curveBasis':
return type;
case 'curveBasisClosed':
return type;
case 'curveLinear':
return type;
case 'curveLinearClosed':
return type;
case 'curveMonotoneX':
return type;
case 'curveMonotoneY':
return type;
case 'curveStep':
return type;
case 'curveStepAfter':
return type;
case 'curveStepBefore':
return type;
case 'curveCatmullRom':
return curveCatmullRom.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveCatmullRomClosed':
return curveCatmullRomClosed.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveCatmullRomOpen':
return curveCatmullRomOpen.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveBundle':
return curveBundle.beta(parseFloat(this.props.curveBundleBeta));
case 'curveCardinal':
return curveCardinal.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'curveCardinalOpen':
return curveCardinalOpen.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'curveCardinalClosed':
return curveCardinalClosed.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'no curve':
default:
return '';
}
};
return (
<XYPlot
height={this.props.height}
width={this.props.width}
css={ChartStyles}
onMouseLeave={() => this.restartCrosshair()}
margin={this.props.margin}>
{this.props.verticalGridLines ? <VerticalGridLines /> : undefined}
{this.props.horizontalGridLines ? <HorizontalGridLines /> : undefined}
{this.props.xLabels ? <XAxis /> : undefined}
{this.props.yLabels ? <YAxis /> : undefined}
{!Array.isArray(this.props.data[0]) ? (
<LineSeries
data={this.state.data}
color={
this.props.colorRange !== undefined
&& this.props.colorRange[0]
? this.props.colorRange[0]
: this.props.color
}
curve={curve(this.props.curve)}
opacity={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].opacity
? parseFloat(this.props.styles[0].opacity)
: parseFloat(this.props.opacity)
}
strokeWidth={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].strokeWidth
? this.props.styles[0].strokeWidth
: this.props.strokeWidth
}
strokeStyle={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].strokeStyle
? this.props.styles[0].strokeStyle
: this.props.strokeStyle
}
onNearestX={(value, index) => this.getCrosshair(value, index)}
onNearestXY={this.props.onNearestXY}
onSeriesClick={this.props.onSeriesClick}
onSeriesRightClick={this.props.onSeriesRightClick}
onSeriesMouseOver={this.props.onSeriesMouseOver}
onSeriesMouseOut={this.props.onSeriesMouseOver}
animation={this.props.animation}
/>
) : (
this.state.data.map((e, i) => (
<LineSeries
key={i}
data={this.state.data[i]}
color={
this.props.colorRange !== undefined
&& this.props.colorRange[i]
? this.props.colorRange[i]
: this.props.color
}
curve={curve(this.props.curve)}
opacity={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].opacity
? parseFloat(this.props.styles[i].opacity)
: parseFloat(this.props.opacity)
}
strokeWidth={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].strokeWidth
? this.props.styles[i].strokeWidth
: this.props.strokeWidth
}
strokeStyle={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].strokeStyle
? this.props.styles[i].strokeStyle
: this.props.strokeStyle
}
onNearestX={(value, index) => this.getCrosshair(value, index)}
onNearestXY={this.props.onNearestXY}
onSeriesClick={this.props.onSeriesClick}
onSeriesRightClick={this.props.onSeriesRightClick}
onSeriesMouseOver={this.props.onSeriesMouseOver}
onSeriesMouseOut={this.props.onSeriesMouseOver}
animation={this.props.animation}
/>
))
)}
{this.props.crossHair ? <Crosshair values={this.state.crosshairValues} /> : undefined}
</XYPlot>
);
}
Example #6
| Source File: LineMarkChart.js From fluent-ui-uxpin-merge with MIT License | 4 votes |
|
render() {
const curve = (type) => {
switch (type) {
case 'curveNatural':
return type;
case 'curveBasis':
return type;
case 'curveBasisClosed':
return type;
case 'curveLinear':
return type;
case 'curveLinearClosed':
return type;
case 'curveMonotoneX':
return type;
case 'curveMonotoneY':
return type;
case 'curveStep':
return type;
case 'curveStepAfter':
return type;
case 'curveStepBefore':
return type;
case 'curveCatmullRom':
return curveCatmullRom.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveCatmullRomClosed':
return curveCatmullRomClosed.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveCatmullRomOpen':
return curveCatmullRomOpen.alpha(
parseFloat(this.props.curveCatmullRomAlpha)
);
case 'curveBundle':
return curveBundle.beta(parseFloat(this.props.curveBundleBeta));
case 'curveCardinal':
return curveCardinal.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'curveCardinalOpen':
return curveCardinalOpen.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'curveCardinalClosed':
return curveCardinalClosed.tension(
parseFloat(this.props.curveCardinalTension)
);
case 'no curve':
default:
return '';
}
};
return (
<XYPlot
height={this.props.height}
width={this.props.width}
css={ChartStyles}
onMouseLeave={() => this.restartCrosshair()}
xType={this.props.xScaleType}
yType={this.props.yScaleType}
margin={this.props.margin}>
{this.props.verticalGridLines ? <VerticalGridLines /> : undefined}
{this.props.horizontalGridLines ? <HorizontalGridLines /> : undefined}
{this.props.xLabels ? <XAxis title={this.props.xAxisTitle} /> : undefined}
{this.props.yLabels ? <YAxis title={this.props.yAxisTitle} /> : undefined}
{!Array.isArray(this.props.data[0]) ? (
<LineMarkSeries
data={this.state.data}
color={
this.props.colorRange !== undefined && this.props.colorRange[0]
? this.props.colorRange[0]
: this.props.color
}
fill={
this.props.fillRange !== undefined && this.props.fillRange[0]
? this.props.fillRange[0]
: this.props.fill
}
size={this.props.size}
curve={curve(this.props.curve)}
opacity={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].opacity
? parseFloat(this.props.styles[0].opacity)
: parseFloat(this.props.opacity)
}
strokeWidth={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].strokeWidth
? this.props.styles[0].strokeWidth
: this.props.strokeWidth
}
strokeStyle={
this.props.styles !== undefined
&& this.props.styles[0]
&& this.props.styles[0].strokeStyle
? this.props.styles[0].strokeStyle
: this.props.strokeStyle
}
onValueClick={(value) => this.getHint(value)}
onNearestX={(value, index) => this.getCrosshair(value, index)}
onNearestXY={this.props.onNearestXY}
onSeriesClick={this.props.onSeriesClick}
onSeriesRightClick={this.props.onSeriesRightClick}
onSeriesMouseOver={this.props.onSeriesMouseOver}
onSeriesMouseOut={this.props.onSeriesMouseOver}
animation={this.props.animation}
/>
) : (
this.state.data.map((e, i) => (
<LineMarkSeries
key={i}
data={this.state.data[i]}
color={
this.props.colorRange !== undefined
&& this.props.colorRange[i]
? this.props.colorRange[i]
: this.props.color
}
fill={
this.props.fillRange !== undefined
&& this.props.fillRange[i]
? this.props.fillRange[i]
: this.props.fill
}
size={this.props.size}
curve={curve(this.props.curve)}
opacity={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].opacity
? parseFloat(this.props.styles[i].opacity)
: parseFloat(this.props.opacity)
}
strokeWidth={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].strokeWidth
? this.props.styles[i].strokeWidth
: this.props.strokeWidth
}
strokeStyle={
this.props.styles !== undefined
&& this.props.styles[i]
&& this.props.styles[i].strokeStyle
? this.props.styles[i].strokeStyle
: this.props.strokeStyle
}
onValueClick={(value) => this.getHint(value)}
onNearestX={(value, index) => this.getCrosshair(value, index)}
onNearestXY={this.props.onNearestXY}
onSeriesClick={this.props.onSeriesClick}
onSeriesRightClick={this.props.onSeriesRightClick}
onSeriesMouseOver={this.props.onSeriesMouseOver}
onSeriesMouseOut={this.props.onSeriesMouseOver}
animation={this.props.animation}
/>
))
)}
{this.props.crossHair ? (
<Crosshair values={this.state.crosshairValues} />
) : (
undefined
)}
{this.props.hint && this.state.showHint ? (
<Hint value={this.state.hintValue} />
) : (
undefined
)}
</XYPlot>
);
}
