vega-canner-components

This repository provide chart components for developers to assemble CMS interface using Canner CMS.

Usage in Canner

You have to use <component/> tag to use charts in Canner. Learn more

<component
  packageName="@canner/vega-chart-scatter"
  graphql="<your graphql schema>"
  {...custom props}
  />

Chart example

<component
  ui="@canner/vega-chart-bar"
  keyName="user-bar"
  graphql={`
      query users {
        users(first: 10) {name age}
      }
    `}
  uiParams={{
    height: 150,
    width: 200,
    color: {
      field: "name"
    },
    x: {
      field: "name"
    },
    y: {
      field: "age"
    }
  }}
/>

Demo

https://canner.github.io/vega-canner-components/?selectedKind=Basic%20Charts&selectedStory=Line%20Chart&full=0&addons=1&stories=1&panelRight=0

Common Props

All charts support common props as below

• keyName: A unique key.
• ui: Chart type. line, bar, pie or scatter
• transformData: Get the value from fetched data, this could allow you to transform your data.
• spec: Overwrite the default specs in charts. Learn more from Vega Specification.
• graphql: The graphql string to fetch the data
• uiParams: For more detailed UI settings

Other than common props, every charts have additional settings for each chart, and is listed in each section below.

Line chart

npm i --save @canner/vega-chart-line

uiParams:

Name	Types	Description
interpolate	string // default linear	"basis" | "cardinal" | "catmull-rom" | "linear" | "monotone" | "natural" | "step" | "step-after" | "step-before"
x	{ field: string, scale?: string, // default linear title?: string }	scale
y	{ field: string, scale?: string, // default linear title?: string }	scale
width	number | string // default 100%	number or percent string
height	number | string // default 100%	number or percent string
fill	string // default #1890ff	color

Bar chart

npm i --save @canner/vega-chart-bar

uiParams:

Name	Types	Description
x	{ field: string, scale?: string, // default linear title?: string }	scale
y	{ field: string, scale?: string, // default linear title?: string }	scale
width	number | string // default 100%	number or percent string
height	number | string // default 100%	number or percent string
fill	string // default #1890ff	color

Pie chart

npm i --save @canner/vega-chart-pie

uiParams:

Name	Types	Description
field	string
width	number | string // default 100%	number or percent string
height	number | string // default 100%	number or percent string
color	{ range?: string, // default category20 field?: string // default id }	range
sort	boolean // default false	optional

Scatter chart

npm i --save @canner/vega-chart-scatter

uiParams:

Name	Types	Description
x	{ field: string, scale?: string, // default linear title?: string }	scale
y	{ field: string, scale?: string, // default linear title?: string }	scale
width	number | string // default 100%	number or percent string
height	number | string // default 100%	number or percent string
text	{ field: string }	The text of field will be shown once the hover event is fired
fill	string // default #1890ff	color

Develop

# install lerna in npm
$ npm i -g lerna

$ lerna bootstrap
$ npm run build
# or watch for rebuilding
$ npm run build:watch

# run demo
$ npm run storybook

Test

$ lerna run test

Deploy

$ npm run deploy-storybook