{"id":20218264,"url":"https://github.com/cannercms/vega-canner-components","last_synced_at":"2026-05-11T09:52:44.910Z","repository":{"id":113038568,"uuid":"145195737","full_name":"CannerCMS/vega-canner-components","owner":"CannerCMS","description":"Canner components for vega","archived":false,"fork":false,"pushed_at":"2018-10-22T10:02:25.000Z","size":2086,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-03T11:35:49.412Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://canner.github.io/vega-canner-components","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CannerCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-18T06:22:31.000Z","updated_at":"2022-09-25T15:29:26.000Z","dependencies_parsed_at":"2023-03-13T13:23:32.085Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/vega-canner-components","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/CannerCMS/vega-canner-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fvega-canner-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fvega-canner-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fvega-canner-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fvega-canner-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/vega-canner-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fvega-canner-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32889971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T06:37:48.479Z","updated_at":"2026-05-11T09:52:44.893Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vega-canner-components [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://canner.github.io/victory-canner-components/)\n\nThis repository provide chart components for developers to assemble CMS interface using [Canner CMS](https://www.canner.io/).\n\n## Usage in [Canner](https://www.canner.io)\n\nYou have to use `\u003ccomponent/\u003e` tag to use charts in Canner. [Learn more](https://www.canner.io/docs/schema-page-tags#lt-component-gt)\n\n```jsx\n\u003ccomponent\n  packageName=\"@canner/vega-chart-scatter\"\n  graphql=\"\u003cyour graphql schema\u003e\"\n  {...custom props}\n  /\u003e\n```\n\n**Chart example**\n\n```jsx\n\u003ccomponent\n  ui=\"@canner/vega-chart-bar\"\n  keyName=\"user-bar\"\n  graphql={`\n      query users {\n        users(first: 10) {name age}\n      }\n    `}\n  uiParams={{\n    height: 150,\n    width: 200,\n    color: {\n      field: \"name\"\n    },\n    x: {\n      field: \"name\"\n    },\n    y: {\n      field: \"age\"\n    }\n  }}\n/\u003e\n```\n\n## Demo\n\nhttps://canner.github.io/vega-canner-components/?selectedKind=Basic%20Charts\u0026selectedStory=Line%20Chart\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\n\n## Common Props\n\nAll charts support common props as below\n\n- `keyName`: A unique key.\n- `ui`: Chart type. `line`, `bar`, `pie` or `scatter`\n- `transformData`: Get the value from fetched data, this could allow you to transform your data.\n- `spec`: Overwrite the default `specs` in charts. Learn more from [Vega Specification](https://vega.github.io/vega/docs/specification/).\n- `graphql`: The graphql string to fetch the data\n- `uiParams`: For more detailed UI settings\n\nOther than common props, every charts have additional settings for each chart, and is listed in each section below.\n\n## Line chart [![npm-image](https://badge.fury.io/js/%40canner%2Fvega-chart-line.svg)](https://www.npmjs.com/package/@canner/vega-chart-line)\n\n```\nnpm i --save @canner/vega-chart-line\n```\n\n**_uiParams:_**\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eTypes\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003einterpolate\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring // default linear\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\"basis\" | \"cardinal\" | \"catmull-rom\" | \"linear\" | \"monotone\" | \"natural\" | \"step\" | \"step-after\" | \"step-before\"\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ex\u003c/td\u003e\n    \u003ctd\u003e\n\u003cpre\u003e\u003ccode\u003e{\n  field: string,\n  scale?: string, // default linear\n  title?: string\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales\"\u003escale\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ey\u003c/td\u003e\n    \u003ctd\u003e\u003cpre\u003e\u003ccode\u003e{\n  field: string,\n  scale?: string, // default linear\n  title?: string\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales\"\u003escale\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efill\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring // default #1890ff\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003ecolor\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Bar chart [![npm-image](https://badge.fury.io/js/%40canner%2Fvega-chart-bar.svg)](https://www.npmjs.com/package/@canner/vega-chart-bar)\n\n```\nnpm i --save @canner/vega-chart-bar\n```\n\n**_uiParams:_**\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eTypes\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ex\u003c/td\u003e\n    \u003ctd\u003e\u003cpre\u003e\u003ccode\u003e{\n  field: string,\n  scale?: string, // default linear\n  title?: string\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales\"\u003escale\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ey\u003c/td\u003e\n    \u003ctd\u003e\u003cpre\u003e\u003ccode\u003e{\n  field: string,\n  scale?: string, // default linear\n  title?: string\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales\"\u003escale\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efill\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring // default #1890ff\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003ecolor\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Pie chart [![npm-image](https://badge.fury.io/js/%40canner%2Fvega-chart-pie.svg)](https://www.npmjs.com/package/@canner/vega-chart-pie)\n\n```\nnpm i --save @canner/vega-chart-pie\n```\n\n**_uiParams:_**\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eTypes\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efield\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ecolor\u003c/td\u003e\n    \u003ctd\u003e\n\u003cpre\u003e\u003ccode\u003e{\n  range?: string, // default category20\n  field?: string // default id\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales/#range\"\u003erange\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003esort\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean // default false\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eoptional\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Scatter chart [![npm-image](https://badge.fury.io/js/%40canner%2Fvega-chart-scatter.svg)](https://www.npmjs.com/package/@canner/vega-chart-scatter)\n\n```\nnpm i --save @canner/vega-chart-scatter\n```\n\n**_uiParams:_**\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eTypes\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ex\u003c/td\u003e\n    \u003ctd\u003e\u003cpre\u003e\u003ccode\u003e{\n  field: string,\n  scale?: string, // default linear\n  title?: string\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales\"\u003escale\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ey\u003c/td\u003e\n    \u003ctd\u003e\u003cpre\u003e\u003ccode\u003e{\n  field: string,\n  scale?: string, // default linear\n  title?: string\n}\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ca href=\"https://vega.github.io/vega/docs/scales\"\u003escale\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ewidth\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eheight\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber | string // default 100%\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enumber or percent string\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003etext\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e{\n      field: string\n    }\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe text of field will be shown once the hover event is fired\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efill\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003estring // default #1890ff\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003ecolor\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Develop\n\n```\n# install lerna in npm\n$ npm i -g lerna\n\n$ lerna bootstrap\n$ npm run build\n# or watch for rebuilding\n$ npm run build:watch\n\n# run demo\n$ npm run storybook\n```\n\n## Test\n\n```\n$ lerna run test\n```\n\n## Deploy\n\n```\n$ npm run deploy-storybook\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fvega-canner-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannercms%2Fvega-canner-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fvega-canner-components/lists"}