lucid-ui
Version:
A UI component library from AppNexus.
29 lines (28 loc) • 950 B
JavaScript
import React from 'react';
import _ from 'lodash';
import { Bars, d3Scale } from '../../../index';
const data = [
{ x: 'one', y: 10 },
{ x: 'two', y: 100 },
{ x: 'three', y: 1000 },
{ x: 'four', y: 10000 },
{ x: 'five', y: 100000 }
];
const width = 750;
const height = 400;
const yScale = d3Scale
.scaleLog()
.domain([1, 1000000])
.range([height, 0]);
const xScale = d3Scale
.scaleBand()
.domain(_.map(data, 'x'))
.range([0, width]);
export default function App() {
return (React.createElement("svg", { height: 600, width: 1000 },
React.createElement("g", null,
React.createElement(Bars, { data: data, xScale: xScale, yScale: yScale })),
React.createElement("g", null, _.map(data, item => {
return (React.createElement("text", { textAnchor: 'middle', x: xScale(item.x) + xScale.bandwidth() / 2, y: yScale(item.y) - 10, fill: 'gray' }, item.y));
}))));
}