GitHub - gokhanergen-tech/graphjs-react: The library provides you to view on the graphs your analytic data

GraphJS-React

GraphJS-React provides you create graphs for your data.

CONTENTS

Installation
Usage
- Show Your Data On Graphs
- Properties
Built With
License

Installation

Follow the instructions to install GraphJS-React

$ npm install graphjs-react

(back to top)

Usage

Add GraphJS-React CSS file to your index.js.

import 'graphjs-react/index.css'

Built With

[![React][React.js]][React-url]

(back to top)

License

Distributed under the MIT License.

(back to top)

Documantation

Bar Chart

Name	Description	Default
data*	BarChartColumn[]	-
width	number	500
height	number	1200
onBarClick	(e: MouseEvent, item: BarChartColumn) => void	-
title	TitleProps	-
containerStyle	CSSProperties	-
labelStyle	CSSProperties	-
roundValue	number	-
range	numbernull	-
grid	boolean	true
rootStyle	CSSProperties	-
graphStyle	CSSProperties	-
backgroundColor	stringnull	white
legend	boolean	true
labels	Omit<LegendItemProps, "size">[]	-
titles	{ x: string; y: string; } \| null	-
wheelScaling	boolean	-

Show Code

<BarChart
height={400}
onBarClick={() => {}}
data={[
  {
    color: 'rgb(110,221,234)',
    x: 'Ocak',
    y: -68
  },
  {
    color: 'rgb(106,226,126)',
    x: 'Şubat',
    y: -54
  },
  {
    color: 'rgb(154,222,111)',
    x: 'Mart',
    y: -37
  },
  {
    color: 'rgb(126,187,225)',
    x: 'Nisan',
    y: 56
  },
  {
    color: 'rgb(156,206,128)',
    x: 'Mayıs',
    y: 83
  },
  {
    color: 'rgb(116,245,247)',
    x: 'Haziran',
    y: -78
  },
  {
    color: 'rgb(235,196,136)',
    x: 'Temmuz',
    y: 30
  },
  {
    color: 'rgb(186,117,243)',
    x: 'Ağustos',
    y: 75
  },
  {
    color: 'rgb(221,157,208)',
    x: 'Eylül',
    y: -63
  },
  {
    color: 'rgb(252,122,106)',
    x: 'Ekim',
    y: 10
  },
  {
    color: 'rgb(193,139,193)',
    x: 'Kasım',
    y: 27
  },
  {
    color: 'rgb(254,173,150)',
    x: 'Aralık',
    y: -52
  }
]}
width={400}
  />

Funnel Chart

Name	Description	Default
data*	FunnelChartData	-
width*	number	-
height*	number	-
options	FunnelChartOptions	object
rootStyle	CSSProperties	-
graphStyle	CSSProperties	-
title	TitleProps	-
backgroundColor	stringnull	white

Show Code

<FunnelChart
data={[
  {
    backgroundColor: 'lightgreen',
    name: 'K',
    value: 999
  },
  {
    backgroundColor: 'green',
    name: 'B',
    value: 168
  },
  {
    backgroundColor: 'yellow',
    name: 'E',
    value: 114
  },
  {
    backgroundColor: 'red',
    name: 'C',
    value: 93
  },
  {
    backgroundColor: 'black',
    name: 'D',
    value: 32
  }
]}
height={500}
width={500}
/>

Pie Char

Name Description Default

data*

ItemProps[]

-

onMouseClickPiece

((e: MouseEvent, data: MouseEventData) => void)

`e`	Mouseevent object
`data`	Clicked data which contains { root: ItemProps, name: string, angle: number, bgColor: string }

-

legend

boolean

false

radius

number

120

scaled

boolean

false

textToCenter

boolean

false

rootStyle

CSSProperties

-

graphStyle

CSSProperties

-

title

TitleProps

-

backgroundColor

stringnull

white

labels

Omit<LegendItemProps, "size">[]

-

titles

{ x: string; y: string; } | null

-

doughnut

boolean

false

Show Code

  <Pie
  data={[
    {
      backgroundColor: 'lightgreen',
      name: 'K',
      textColor: 'white',
      value: 136
    },
    {
      backgroundColor: 'green',
      name: 'B',
      textColor: 'yellow',
      value: 85
    },
    {
      backgroundColor: 'red',
      name: 'C',
      textColor: 'white',
      value: 53
    },
    {
      backgroundColor: 'black',
      name: 'D',
      textColor: 'white',
      value: 22
    },
    {
      backgroundColor: 'yellow',
      name: 'E',
      textColor: 'black',
      value: 30
    }
  ]}
  legend
  onMouseClickPiece={() => {}}
/>

Line Chart

Name	Description	Default
data*	ChartColumn[] \| ChartColumn[][]	-
width	number	500
height	number	1200
labels	Omit<LegendItemProps, "size">[]	-
title	TitleProps	-
titles	{ x: string; y: string; } \| null	-
xAxisLabels	string[]	-
containerStyle	CSSProperties	-
labelStyle	CSSProperties	-
roundValue	number	-
range	numbernull	-
grid	boolean	true
wheelScaling	boolean	-
rootStyle	CSSProperties	-
graphStyle	CSSProperties	-
backgroundColor	stringnull	white
legend	boolean	true
onPointOver	((e: MouseEvent, item: ChartPointItem) => void)	-
onPointClick	((e: MouseEvent, item: ChartPointItem) => void)	-

Show Code

<LineChart
data={[
  [
    {
      color: 'rgb(119,219,103)',
      x: '2005',
      y: 34752098
    },
    {
      color: 'rgb(198,199,182)',
      x: '2006',
      y: 32487921
    },
    {
      color: 'rgb(187,183,118)',
      x: '2007',
      y: 53719722
    },
    {
      color: 'rgb(162,237,225)',
      x: '2008',
      y: 65884386
    },
    {
      color: 'rgb(153,122,222)',
      x: '2009',
      y: 50304302
    },
    {
      color: 'rgb(251,126,251)',
      x: '2010',
      y: 88975899
    }
  ],
  [
    {
      color: 'rgb(122,111,103)',
      x: '2005',
      y: 85404004
    },
    {
      color: 'rgb(241,254,214)',
      x: '2006',
      y: 44951584
    },
    {
      color: 'rgb(168,145,111)',
      x: '2007',
      y: 66770171
    },
    {
      color: 'rgb(172,186,236)',
      x: '2008',
      y: 88406893
    },
    {
      color: 'rgb(168,242,195)',
      x: '2009',
      y: 30232527
    },
    {
      color: 'rgb(237,119,101)',
      x: '2010',
      y: 17022190
    }
  ]
]}
height={400}
labels={[
  {
    color: 'blue',
    name: 'A'
  },
  {
    color: 'red',
    name: 'B'
  }
]}
onPointClick={() => {}}
onPointOver={() => {}}
title={{
  label: 'Countries\' Populations'
}}
titles={{
  x: 'Year',
  y: 'Population'
}}
width={400}
xAxisLabels={[
  '2005',
  '2002',
  '2006',
  '2007',
  '2008',
  '2009',
  '2010'
]}
/>

Show Code

<LineChart
data={[
  [
    {
      x: -35,
      y: 1225
    },
    {
      x: -34,
      y: 1156
    },
    {
      x: -33,
      y: 1089
    },
    {
      x: -32,
      y: 1024
    },
    {
      x: -31,
      y: 961
    },
    {
      x: -30,
      y: 900
    },
    {
      x: -29,
      y: 841
    },
    {
      x: -28,
      y: 784
    },
    {
      x: -27,
      y: 729
    },
    {
      x: -26,
      y: 676
    },
    {
      x: -25,
      y: 625
    },
    {
      x: -24,
      y: 576
    },
    {
      x: -23,
      y: 529
    },
    {
      x: -22,
      y: 484
    },
    {
      x: -21,
      y: 441
    },
    {
      x: -20,
      y: 400
    },
    {
      x: -19,
      y: 361
    },
    {
      x: -18,
      y: 324
    },
    {
      x: -17,
      y: 289
    },
    {
      x: -16,
      y: 256
    },
    {
      x: -15,
      y: 225
    },
    {
      x: -14,
      y: 196
    },
    {
      x: -13,
      y: 169
    },
    {
      x: -12,
      y: 144
    },
    {
      x: -11,
      y: 121
    },
    {
      x: -10,
      y: 100
    },
    {
      x: -9,
      y: 81
    },
    {
      x: -8,
      y: 64
    },
    {
      x: -7,
      y: 49
    },
    {
      x: -6,
      y: 36
    },
    {
      x: -5,
      y: 25
    },
    {
      x: -4,
      y: 16
    },
    {
      x: -3,
      y: 9
    },
    {
      x: -2,
      y: 4
    },
    {
      x: -1,
      y: 1
    },
    {
      x: 0,
      y: 0
    },
    {
      x: 0,
      y: 0
    },
    {
      x: 1,
      y: 1
    },
    {
      x: 2,
      y: 4
    },
    {
      x: 3,
      y: 9
    },
    {
      x: 4,
      y: 16
    },
    {
      x: 5,
      y: 25
    },
    {
      x: 6,
      y: 36
    },
    {
      x: 7,
      y: 49
    },
    {
      x: 8,
      y: 64
    },
    {
      x: 9,
      y: 81
    },
    {
      x: 10,
      y: 100
    },
    {
      x: 11,
      y: 121
    },
    {
      x: 12,
      y: 144
    },
    {
      x: 13,
      y: 169
    },
    {
      x: 14,
      y: 196
    },
    {
      x: 15,
      y: 225
    },
    {
      x: 16,
      y: 256
    },
    {
      x: 17,
      y: 289
    },
    {
      x: 18,
      y: 324
    },
    {
      x: 19,
      y: 361
    },
    {
      x: 20,
      y: 400
    },
    {
      x: 21,
      y: 441
    },
    {
      x: 22,
      y: 484
    },
    {
      x: 23,
      y: 529
    },
    {
      x: 24,
      y: 576
    },
    {
      x: 25,
      y: 625
    },
    {
      x: 26,
      y: 676
    },
    {
      x: 27,
      y: 729
    },
    {
      x: 28,
      y: 784
    },
    {
      x: 29,
      y: 841
    },
    {
      x: 30,
      y: 900
    },
    {
      x: 31,
      y: 961
    },
    {
      x: 32,
      y: 1024
    },
    {
      x: 33,
      y: 1089
    },
    {
      x: 34,
      y: 1156
    },
    {
      x: 35,
      y: 1225
    }
  ],
  [
    {
      x: -35,
      y: 1319
    },
    {
      x: -34,
      y: 1246
    },
    {
      x: -33,
      y: 1175
    },
    {
      x: -32,
      y: 1106
    },
    {
      x: -31,
      y: 1039
    },
    {
      x: -30,
      y: 974
    },
    {
      x: -29,
      y: 911
    },
    {
      x: -28,
      y: 850
    },
    {
      x: -27,
      y: 791
    },
    {
      x: -26,
      y: 734
    },
    {
      x: -25,
      y: 679
    },
    {
      x: -24,
      y: 626
    },
    {
      x: -23,
      y: 575
    },
    {
      x: -22,
      y: 526
    },
    {
      x: -21,
      y: 479
    },
    {
      x: -20,
      y: 434
    },
    {
      x: -19,
      y: 391
    },
    {
      x: -18,
      y: 350
    },
    {
      x: -17,
      y: 311
    },
    {
      x: -16,
      y: 274
    },
    {
      x: -15,
      y: 239
    },
    {
      x: -14,
      y: 206
    },
    {
      x: -13,
      y: 175
    },
    {
      x: -12,
      y: 146
    },
    {
      x: -11,
      y: 119
    },
    {
      x: -10,
      y: 94
    },
    {
      x: -9,
      y: 71
    },
    {
      x: -8,
      y: 50
    },
    {
      x: -7,
      y: 31
    },
    {
      x: -6,
      y: 14
    },
    {
      x: -5,
      y: -1
    },
    {
      x: -4,
      y: -14
    },
    {
      x: -3,
      y: -25
    },
    {
      x: -2,
      y: -34
    },
    {
      x: -1,
      y: -41
    },
    {
      x: 0,
      y: -46
    },
    {
      x: 0,
      y: -46
    },
    {
      x: 1,
      y: -49
    },
    {
      x: 2,
      y: -50
    },
    {
      x: 3,
      y: -49
    },
    {
      x: 4,
      y: -46
    },
    {
      x: 5,
      y: -41
    },
    {
      x: 6,
      y: -34
    },
    {
      x: 7,
      y: -25
    },
    {
      x: 8,
      y: -14
    },
    {
      x: 9,
      y: -1
    },
    {
      x: 10,
      y: 14
    },
    {
      x: 11,
      y: 31
    },
    {
      x: 12,
      y: 50
    },
    {
      x: 13,
      y: 71
    },
    {
      x: 14,
      y: 94
    },
    {
      x: 15,
      y: 119
    },
    {
      x: 16,
      y: 146
    },
    {
      x: 17,
      y: 175
    },
    {
      x: 18,
      y: 206
    },
    {
      x: 19,
      y: 239
    },
    {
      x: 20,
      y: 274
    },
    {
      x: 21,
      y: 311
    },
    {
      x: 22,
      y: 350
    },
    {
      x: 23,
      y: 391
    },
    {
      x: 24,
      y: 434
    },
    {
      x: 25,
      y: 479
    },
    {
      x: 26,
      y: 526
    },
    {
      x: 27,
      y: 575
    },
    {
      x: 28,
      y: 626
    },
    {
      x: 29,
      y: 679
    },
    {
      x: 30,
      y: 734
    },
    {
      x: 31,
      y: 791
    },
    {
      x: 32,
      y: 850
    },
    {
      x: 33,
      y: 911
    },
    {
      x: 34,
      y: 974
    },
    {
      x: 35,
      y: 1039
    }
  ]
]}
height={400}
labels={[
  {
    color: 'blue',
    name: 'A'
  },
  {
    color: 'red',
    name: 'B'
  }
]}
onPointClick={() => {}}
onPointOver={() => {}}
titles={{
  x: 'X',
  y: 'Y'
}}
width={400}
/>

Interfaces

interface ChartColumn {
  y: string | number,
  x: string | number,
  color?: string, 
}

interface TitleProps{
    label:string,
    style?:CSSProperties
}

interface ContextChartXY {
  context: CanvasRenderingContext2D | null
  maxItemWidth: number
}

interface LegendItemProps {
    name: string,
    color: string,
    size?: number
}

interface ChartPointItem extends ChartColumn{
    root:LegendItemProps
}

interface LineChartProps{
    onPointOver?:(e:MouseEvent,item:ChartPointItem)=>void,
    onPointClick?:(e:MouseEvent,item:ChartPointItem)=>void
}

interface ItemProps {
    /**
     * @description The value of item
     */
    value: number,
    /**
     * @description item name
     */
    name: string,
    /**
     * @description specify a color for background
     */
    backgroundColor: string,
    /**
     * @description text color, It was excluded from Funnel Chart
     */
    textColor?: string
}

interface FunnelChartOptions{
    /**
     * @description high value bg gradient color
     * @default #00308F
     */
    highBarColor:string,
     /**
     * @description low value bg gradient color
     * @default gray
     */
    lowBarColor:string,
     /**
     * @description inline text color
     * @default lightgray
     */
    barInlineTextColor:string,
     /**
     * @description label text color
     * @default black
     */
    labelTextColor:string
}

Notes for 1.0.2

Fixed bar chart number zero problem
Changed barchar values property name to data

Notes for 1.0.3

Fixed going x axis to right when adding x and y labels
Added Line Chart

Name		Name	Last commit message	Last commit date
Latest commit History 103 Commits
example		example
images		images
src		src
.duplicate		.duplicate
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.test.json		tsconfig.test.json

gokhanergen-tech/graphjs-react

Folders and files

Latest commit

History

Repository files navigation

GraphJS-React

Installation

Usage

Built With

License

Documantation

Bar Chart

Funnel Chart

Pie Char

Line Chart

Interfaces

About

Resources

Stars

Watchers

Forks

Languages