Skip to content
This repository has been archived by the owner on Feb 5, 2019. It is now read-only.

urbica/charts

Folders and files

NameName
Last commit message
Last commit date
Jul 17, 2017
Jul 17, 2017
Jul 17, 2017
Jul 17, 2017
Apr 9, 2017
Apr 9, 2017
May 1, 2017
Apr 9, 2017
Feb 27, 2017
Jul 17, 2017
Jul 17, 2017
Dec 4, 2017
Dec 20, 2018
Jul 17, 2017
Jul 17, 2017

Repository files navigation

Urbica Components

Greenkeeper badge

Build Status codecov Conventional Commits Commitizen friendly

Urbica React D3 Components. React Storybook

Usage

npm i -S @urbica/components

Components

Chart

import { Chart } from '@urbica/components';
<Chart width={100} height={100} />

Line

import { Line } from '@urbica/components';

<Line
  data={data}
  x={d => d.key}
  y={d => d.value}
  style={style}
  xScale={xScale}
  yScale={yScale}
  defined={d => !!d.value}
/>

Area

import { Area } from '@urbica/components';

<Area
  data={data}
  x={d => d.key}
  y={d => d.value}
  style={style}
  xScale={xScale}
  yScale={yScale}
  defined={d => !!d.value}
/>

Axis

import { Axis } from '@urbica/components';
import { timeHour } from 'd3-time';
import { timeFormat } from 'd3-time-format';

<Axis
  scale={xScale}
  ticks={timeDay}
  transform={`translate(0, ${height})`}
  orientation={'bottom'}
  tickFormat={timeFormat('%H')}
  tickArguments={[timeHour.every(1)]}
/>

LineChart

import { LineChart } from '@urbica/components';
import { curveBasis } from 'd3-shape';
import { scaleLinear, scaleTime } from 'd3-scale';

<LineChart
  data={data}
  x={d => d.x}
  y={d => d.y}
  width={640}
  height={240}
  curve={curveBasis}
  xScale={scaleTime}
  yScale={scaleLinear}
  lineStyle={lineStyle}
/>

AreaChart

import { AreaChart } from '@urbica/components';
import { curveBasis } from 'd3-shape';
import { scaleLinear, scaleTime } from 'd3-scale';

<AreaChart
  data={data}
  x={d => d.x}
  y={d => d.y}
  width={640}
  height={240}
  curve={curveBasis}
  xScale={scaleTime}
  yScale={scaleLinear}
  areaStyle={areaStyle}
/>

TrendChart

Trend chart is a graphical representation of time series data (information in sequence over time) showing the trend line or curve that reveals a general pattern of change.

import { TrendChart } from '@urbica/components';
<TrendChart data={data} width={1000} height={100}/>

Live Usage

TrendAreaChart

Trend chart is a graphical representation of time series data (information in sequence over time) showing the trend line or curve that reveals a general pattern of change.

import { TrendAreaChart } from '@urbica/components';
<TrendAreaChart data={data} width={1000} height={100}/>

Live Usage