lucid-ui
Version:
A UI component library from AppNexus.
64 lines • 2.32 kB
JavaScript
import _map from "lodash/map";
import React from 'react';
import createClass from 'create-react-class';
import { d3Scale, Lines, SuccessIcon, VerticalTabs, WarningIcon } from '../../../index';
var data = [{
x: 'OR',
y: 1
}, {
x: 'CA',
y: 0
}, {
x: 'WA',
y: 3
}, {
x: 'NY',
y: 2
}, {
x: 'TX',
y: 1
}, {
x: 'WV',
y: 3
}];
var width = 200;
var height = 50;
var xScale = d3Scale.scalePoint().domain(_map(data, 'x')).range([0, width]);
var yScale = d3Scale.scaleLinear().domain([0, 4]).range([height, 0]);
var titleThree = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("h2", {
style: {
margin: 0
}
}, "Performance"), /*#__PURE__*/React.createElement("svg", {
width: width,
height: height
}, /*#__PURE__*/React.createElement(Lines, {
data: data,
xScale: xScale,
yScale: yScale
})));
export default createClass({
render: function render() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(VerticalTabs, null, /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, /*#__PURE__*/React.createElement(VerticalTabs.Title, null, /*#__PURE__*/React.createElement("h2", {
style: {
margin: 0
}
}, "One"), /*#__PURE__*/React.createElement(SuccessIcon, null), /*#__PURE__*/React.createElement("span", {
style: {
fontWeight: 'normal',
color: '#333',
marginLeft: '5px'
}
}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")), "One content"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, /*#__PURE__*/React.createElement(VerticalTabs.Title, null, /*#__PURE__*/React.createElement("h2", {
style: {
margin: 0
}
}, "Two"), /*#__PURE__*/React.createElement(WarningIcon, null), /*#__PURE__*/React.createElement("span", {
style: {
fontWeight: 'normal',
color: '#333',
marginLeft: '5px'
}
}, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")), "Two content"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, /*#__PURE__*/React.createElement(VerticalTabs.Title, null, titleThree), "Three content"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, /*#__PURE__*/React.createElement(VerticalTabs.Title, null, "Four"), "Four content")));
}
});