Skip to content

Commit bc47f17

Browse files
avdaredevilavdaredevil
authored
Merge pull request #33 from mindon/polymer-3.0
highcharts-chart for Polymer 3.0 branch
2 parents 3a272b4 + 7ce5eac commit bc47f17

17 files changed

+978
-379
lines changed

‎README.md

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
# <highcharts-chart> [![Bower version](https://badge.fury.io/bo/highcharts-chart.svg)](http://badge.fury.io/bo/highcharts-chart) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/avdaredevil/highcharts-chart)
22

3-
> Web Component wrapper to the [Highcharts Graphing Library](http://www.highcharts.com/), to create a multitude of graphs/maps (spline, pie, and more) using [Polymer 2.0](http://www.polymer-project.org/2.0/).
3+
> Web Component wrapper to the [Highcharts Graphing Library](http://www.highcharts.com/), to create a multitude of graphs/maps (spline, pie, and more) using [Polymer 3.0](http://www.polymer-project.org/3.0/).
44
55
## Demo
66

77
You can see a [Realtime/Resonsive demo live](http://avdaredevil.github.io/highcharts-chart)! With a Tutorial Icon in the top right.
88

99
## Install
1010

11-
Install the component using [Bower](http://bower.io/):
11+
Install the component using [npm](https://www.npmjs.com/):
1212

1313
```sh
14-
$ bower install highcharts-chart --save
14+
$ npm install highcharts-chart --save
1515
```
1616

1717
Or [download as ZIP](https://github.com/avdaredevil/highcharts-chart/archive/master.zip).
@@ -27,19 +27,23 @@ Or [download as ZIP](https://github.com/avdaredevil/highcharts-chart/archive/mas
2727
2. Import Custom Element:
2828

2929
```html
30-
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">
30+
<script type="module" src="node_modules/highcharts-chart/highcharts-chart.js"></script>
3131
OR
32-
<link rel="import" href="bower_components/highcharts-chart/highcharts-map.html">
32+
<script type="module">
33+
import 'node_modules/highcharts-chart/highcharts-chart.js';
34+
</script>
3335
OR
34-
<link rel="import" href="bower_components/highcharts-chart/highcharts-stock.html">
36+
<script>
37+
import('node_modules/highcharts-chart/highcharts-chart.js');
38+
</script>
3539
```
3640

3741
3. Start using it!
3842
<!--
3943
```
4044
<custom-element-demo>
4145
<template>
42-
<link rel="import" href="highcharts-chart.html">
46+
<script type="module" src="highcharts-chart.js">
4347
<next-code-block></next-code-block>
4448
4549
</template>
@@ -154,6 +158,28 @@ Mixin | Description
154158
4. Push to the branch: `git push origin my-new-feature`
155159
5. Submit a pull request
156160

161+
162+
## Install the Polymer-CLI
163+
164+
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (_packaged with [Node.js](https://nodejs.org)_) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
165+
166+
## Viewing Your Element
167+
168+
```
169+
$ polymer serve
170+
```
171+
172+
## Running Tests
173+
174+
```
175+
$ polymer test
176+
```
177+
178+
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
179+
180+
181+
***Note:** Polymer 3 docs and migration done by: @mindon 2018-10-19*
182+
157183
## License
158184
159185
[MIT License](http://avdaredevil.mit-license.org/) © Apoorv Verma

‎bower.json

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎demo/index.html

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
<title>Highcharts-Chart Demo - Polymer 3.0</title>
67

7-
<title>Highcharts-Chart Polymer-2.0 Demo</title>
8+
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
89

9-
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
<script type="module">
11+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
12+
import '@polymer/iron-demo-helpers/demo-snippet';
13+
</script>
1014

11-
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
12-
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
13-
<link rel="import" href="../highcharts-chart.html">
15+
<script type="module" src="../highcharts-chart.js"></script>
1416

15-
<custom-style>
16-
<style is="custom-style" include="demo-pages-shared-styles"></style>
17-
</custom-style>
18-
</head>
19-
<body>
17+
<custom-style>
18+
<style is="custom-style" include="demo-pages-shared-styles"></style>
19+
</custom-style>
20+
</head>
21+
<body>
2022
<div class="vertical-section-container centered">
21-
<h3>Basic highcharts-chart polymer-2.0 demo</h3>
22-
<demo-snippet>
23-
<template>
24-
<highcharts-chart type="spline"
25-
data='[[0,0],[1,7],[2,1],[3,6],[4,8],[5,6]]'
26-
title='Test-Spline Chart'
27-
x-zoom x-label="Iterations"
28-
y-label="Awesomeness Index">
29-
30-
</highcharts-chart>
31-
</template>
32-
</demo-snippet>
23+
<h3>Basic highcharts-chart demo</h3>
24+
<demo-snippet>
25+
<template>
26+
<highcharts-chart type="spline"
27+
data='[[0,0],[1,7],[2,1],[3,6],[4,8],[5,6]]'
28+
title='Test-Spline Chart'
29+
x-zoom x-label="Iterations"
30+
y-label="Awesomeness Index">
31+
</highcharts-chart>
32+
</template>
33+
</demo-snippet>
3334
</div>
34-
</body>
35+
</body>
3536
</html>

0 commit comments

Comments
 (0)