xtal-frappe-chart
Web component wrapper around the Frappé chart library
<xtal-frappe-chart>
Web component wrapper around the cool Frappe chart library.
Things I like about this chart library:
- It is quite small (17kb), yet, unlike chartist, it has nice interactive features.
- It supports ES6 Modules (and iffe).
- The charts look nice.
NB Tooltips don't display properly within ShadowDOM.
<script defer src="https://cdn.jsdelivr.net/npm/es-module-shims@0.2.0/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"xtal-element/": "https://cdn.jsdelivr.net/npm/xtal-element@0.0.43/",
"xtal-json-merge/": "https://cdn.jsdelivr.net/npm/xtal-json-merge@0.2.34/",
"xtal-json-editor/": "https://cdn.jsdelivr.net/npm/xtal-json-editor@0.0.33/",
"p-d.p-u/": "https://cdn.jsdelivr.net/npm/p-d.p-u@0.0.110/",
"xtal-frappe-chart/": "https://cdn.jsdelivr.net/npm/xtal-frappe-chart@0.0.22/",
"frappe-charts/": "https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/"
}
}
</script>
<script type="module-shim">
import 'xtal-frappe-chart/xtal-frappe-chart.js';
import 'xtal-json-merge/xtal-insert-json.js';
import 'xtal-json-editor/xtal-json-editor.js';
import 'p-d.p-u/p-d.js';
</script>
</div>
Syntax
Install the Polymer-CLI
First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
WIP
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- frappe-charts#1.1.0
- xtal-element#0.0.54
- trans-render#0.0.102
- Released
- 2019-04-17
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent
xtal-frappe-chart - Vaadin Add-on Directory
Web component wrapper around the Frappé chart library
View on NPM
xtal-frappe-chart version 0.0.1
### Dependencies
* @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0
* @bower_components/async#caolan/async#^1.5.0
* @bower_components/chai#chaijs/chai#^3.2.0
* @bower_components/font-roboto#PolymerElements/font-roboto#^1
* @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0
* @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2
* @bower_components/iron-location#PolymerElements/iron-location#1 - 2
* @bower_components/json-merge#bahrus/json-merge#^0.1.0
* @bower_components/lodash#lodash/lodash#^3.7.0
* @bower_components/marked#chjj/marked#~0.3.6
* @bower_components/marked-element#polymerelements/marked-element#1 - 2
* @bower_components/mocha#mochajs/mocha#^3.1.2
* @bower_components/polymer#Polymer/polymer#^2.0.0
* @bower_components/prism#LeaVerou/prism#*
* @bower_components/prism-element#PolymerElements/prism-element#1 - 2
* @bower_components/shadycss#webcomponents/shadycss#^v1.0.0
* @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0
* @bower_components/sinonjs#blittle/sinon.js#^1.14.1
* @bower_components/stacky#PolymerLabs/stacky#^1.3.0
* @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0
* @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0
* @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0
* @bower_components/xtal-json-editor#bahrus/xtal-json-editor#^0.0.6
xtal-frappe-chart version 0.0.4
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.5
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.6
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.7
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.8
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.10
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.11
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.12
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.13
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.9
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.17
xtal-frappe-chart version 0.0.14
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.15
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.16
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.17
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.18
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.19
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.20
### Dependencies
* frappe-charts#^1.1.0
* xtal-latx#0.0.44
xtal-frappe-chart version 0.0.21
### Dependencies
* frappe-charts#1.1.0
* xtal-latx#0.0.88
xtal-frappe-chart version 0.0.22
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.42
xtal-frappe-chart version 0.0.23
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.42
xtal-frappe-chart version 0.0.24
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.43
xtal-frappe-chart version 0.0.25
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.44
xtal-frappe-chart version 0.0.26
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.50
xtal-frappe-chart version 0.0.27
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.51
xtal-frappe-chart version 0.0.28
### Dependencies
* frappe-charts#1.1.0
* xtal-element#0.0.54
* trans-render#0.0.102