Node Popular Man

    @urbica/components

    1.2.0 • Public • Published

    Urbica Components

    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

    Install

    npm i @urbica/components

    DownloadsWeekly Downloads

    14

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • boyur
    • device25
    • karmatsky
    • stepankuzmin