https://github.com/cannercms/vega-canner-components
Canner components for vega
https://github.com/cannercms/vega-canner-components
Last synced: about 2 months ago
JSON representation
Canner components for vega
- Host: GitHub
- URL: https://github.com/cannercms/vega-canner-components
- Owner: CannerCMS
- Created: 2018-08-18T06:22:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-22T10:02:25.000Z (over 7 years ago)
- Last Synced: 2025-03-03T11:35:49.412Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://canner.github.io/vega-canner-components
- Size: 1.99 MB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vega-canner-components [](https://lernajs.io/) [](https://canner.github.io/victory-canner-components/)
This repository provide chart components for developers to assemble CMS interface using [Canner CMS](https://www.canner.io/).
## Usage in [Canner](https://www.canner.io)
You have to use `` tag to use charts in Canner. [Learn more](https://www.canner.io/docs/schema-page-tags#lt-component-gt)
```jsx
```
**Chart example**
```jsx
```
## 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](https://vega.github.io/vega/docs/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 [](https://www.npmjs.com/package/@canner/vega-chart-line)
```
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 [](https://www.npmjs.com/package/@canner/vega-chart-bar)
```
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 [](https://www.npmjs.com/package/@canner/vega-chart-pie)
```
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 [](https://www.npmjs.com/package/@canner/vega-chart-scatter)
```
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
```