CannerCMS / vega-canner-components

Canner components for vega

Home Page:https://canner.github.io/vega-canner-components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vega-canner-components lerna Storybook

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-image

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-image

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-image

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-image

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

About

Canner components for vega

https://canner.github.io/vega-canner-components


Languages

Language:JavaScript 99.8%Language:HTML 0.2%