Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

🎩 React-based charting and component library for data visualization

Resources

License

Packages

No packages published