🎩 React-based charting and component library for data visualization
Branch: master
Clone or download
lorenries Publish
 - @newamerica/data-table@0.0.6
 - @newamerica/storybook@0.0.8
Latest commit 8bea13a Feb 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets monorepo Jan 19, 2019
packages Publish Feb 20, 2019
scripts [docs] update docs Jan 31, 2019
.gitignore monorepo Jan 19, 2019
LICENSE monorepo Jan 19, 2019
README.md [docs] update docs Jan 31, 2019
lerna.json monorepo Jan 19, 2019
package.json start working on docs Jan 29, 2019

README.md

Teddy Logo

Teddy

Teddy is a library of charts, maps, and user interface components for data visualization, built with React and vx.

Demo and examples

Usage

Example:

import { Chart, Bar } from "@newamerica/charts";
import "@newamerica/charts/dist/styles.css";

const MyChart = () => (
  <Chart
    maxWidth="100%"
    height={400}
    renderTooltip={({ datum }) => <div>{datum.value}</div>}
  >
    {({ width, height, handleMouseMove, handleMouseLeave }) => (
      <Bar
        data={data}
        width={width}
        height={height}
        x={d => d.x}
        y={d => +d.y}
        handleMouseMove={handleMouseMove}
        handleMouseLeave={handleMouseLeave}
      />
    )}
  </Chart>
);

Packages and docs

More charts and documentation coming soon

Charts (docs)

npm install --save @newamerica/charts
  • Bar
  • HorizontalBar
  • HorizontalStackedBar
  • VerticalGroupedBar
  • Line
  • Scatterplot

Maps (docs)

npm install --save @newamerica/maps
  • Pindrop
  • Choropleth
  • Cartogram
  • Hexgrid (coming soon)

Data Table (docs)

npm install --save @newamerica/data-table
  • DataTable
  • DataTableWithSearch

Timeline

npm install --save @newamerica/timeline
  • Timeline

Components (docs)

npm install --save @newamerica/components
  • ButtonGroup
  • CheckboxGroup
  • Search
  • Select
  • Slider
  • Toggle

Meta (docs)

npm install --save @newamerica/meta
  • ChartContainer
  • Title
  • Description
  • Source

To do

  • add prop type checks to all packages
  • generate documentation from prop types
  • add mobile touch events for tooltip interactions
  • project website
  • improve accessibility across packages, especially for UI components

Development

Clone this repo:

git clone https://github.com/newamericafoundation/teddy.git

Install lerna globally:

npm i -g lerna

Bootstrap all packages. This installs package dependencies (equivalent to npm install in every package folder), but hoists dependencies required by multiple packages up to the top level node_modules. It also symlinks @newamerica dependencies to that package's packages/<PACKAGE>/dist folder.

lerna bootstrap --hoist

To publish new package versions to npm:

lerna publish

Local development

Watch file changes in all packages and create development builds. This runs rollup -c -w --environment BUILD:development inside of every package:

lerna run start --parallel

If you just want to work on one or a couple packages, run something like this instead (it'll be a bit lighter on your computer, because it won't spawn separate subprocesses to watch/build every single package).

lerna run start --parallel --scope @newamerica/charts @newamerica/maps

Now you can start storybook to develop charts/maps/components locally. Packages will be rebuilt automatically on file changes and storybook will hot reload those changes. Go to packages/storybook and run:

npm run storybook

Docs

To generate documentation from component prop-types, run this from the root of the repo, or run npm run docs in an individual package folder:

lerna run docs