Urbica Components

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