lucid-ui
Version:
A UI component library from AppNexus.
59 lines (58 loc) • 2.6 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { d3Scale, Lines, SuccessIcon, VerticalTabs, WarningIcon, } from '../../../index';
const 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 },
];
const width = 200;
const height = 50;
const xScale = d3Scale
.scalePoint()
.domain(_.map(data, 'x'))
.range([0, width]);
const yScale = d3Scale
.scaleLinear()
.domain([0, 4])
.range([height, 0]);
const titleThree = (React.createElement("span", null,
React.createElement("h2", { style: { margin: 0 } }, "Performance"),
React.createElement("svg", { width: width, height: height },
React.createElement(Lines, { data: data, xScale: xScale, yScale: yScale }))));
export default createClass({
render() {
return (React.createElement("div", null,
React.createElement(VerticalTabs, null,
React.createElement(VerticalTabs.Tab, null,
React.createElement(VerticalTabs.Title, null,
React.createElement("h2", { style: { margin: 0 } }, "One"),
React.createElement(SuccessIcon, null),
React.createElement("span", { style: {
fontWeight: 'normal',
color: '#333',
marginLeft: '5px',
} }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")),
"One content"),
React.createElement(VerticalTabs.Tab, null,
React.createElement(VerticalTabs.Title, null,
React.createElement("h2", { style: { margin: 0 } }, "Two"),
React.createElement(WarningIcon, null),
React.createElement("span", { style: {
fontWeight: 'normal',
color: '#333',
marginLeft: '5px',
} }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
"Two content"),
React.createElement(VerticalTabs.Tab, null,
React.createElement(VerticalTabs.Title, null, titleThree),
"Three content"),
React.createElement(VerticalTabs.Tab, null,
React.createElement(VerticalTabs.Title, null, "Four"),
"Four content"))));
},
});