lucid-ui
Version:
A UI component library from AppNexus.
75 lines (74 loc) • 2.99 kB
JavaScript
import * as d3Selection from 'd3-selection';
import React from 'react';
import { omitProps } from '../../util/component-types';
import { lucidClassNames } from '../../util/style-helpers';
import DraggableLineChartD3 from './DraggableLineChartD3';
const cx = lucidClassNames.bind('&-DraggableLineChart');
const getEmptyRenderProp = (preSelectText) => (React.createElement("div", { style: { height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
React.createElement("div", { className: cx('&-empty-info') }, preSelectText)));
const getCleanData = (data) => {
return data.map(({ x, y }) => ({ x, y: Number.isFinite(y) ? y : 0 }));
};
const draggableLineChartDefaultProps = {
height: 315,
width: 1000,
margin: { top: 65, right: 80, bottom: 65, left: 80 },
};
class DraggableLineChart extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
this.d3LineChart = null;
}
componentDidUpdate() {
this.d3LineChart.updateLineChart(this.props.data);
}
componentDidMount() {
const svg = d3Selection.select(this.ref);
const { height, width, margin, data, onDragEnd, xAxisTicksVertical, dataIsCentered, yAxisMin = 0, xAxisRenderProp, onPreselect, preSelectText, } = this.props;
const emptyRenderProp = onPreselect && preSelectText
? () => getEmptyRenderProp(preSelectText)
: undefined;
this.d3LineChart = new DraggableLineChartD3(svg, {
height: height || draggableLineChartDefaultProps.height,
width: width || draggableLineChartDefaultProps.width,
margin: margin || draggableLineChartDefaultProps.margin,
data: getCleanData(data),
onDragEnd,
xAxisTicksVertical,
dataIsCentered,
yAxisMin,
xAxisRenderProp,
emptyRenderProp,
cx,
onPreselect,
});
this.d3LineChart.renderLineChart();
}
render() {
const { height, width, ...passThroughs } = this.props;
return (React.createElement("svg", Object.assign({}, omitProps(passThroughs, undefined, [
'height',
'width',
'margin',
'data',
'onDragEnd',
'xAxisTicksVertical',
'dataIsCentered',
'yAxisMin',
'xAxisRenderProp',
'onPreselect',
'preSelectText',
]), { ref: (ref) => (this.ref = ref), className: cx('&'), width: width, height: height })));
}
}
DraggableLineChart.displayName = 'DraggableLineChart';
DraggableLineChart.peek = {
description: `
The draggable line chart is a single-lined line chart where
the points on the line are draggable and will update the data real-time.
`,
categories: ['visualizations', 'charts'],
};
DraggableLineChart.defaultProps = draggableLineChartDefaultProps;
export default DraggableLineChart;