Browse Source

init

master
Markus Bergholz 4 months ago
commit
e6cd1a4cdd
4 changed files with 83 additions and 0 deletions
  1. +11
    -0
      .gitlab-ci.yml
  2. +23
    -0
      README.md
  3. +45
    -0
      index.html
  4. +4
    -0
      some.json

+ 11
- 0
.gitlab-ci.yml View File

@@ -0,0 +1,11 @@
pages:
stage: deploy
script:
- mkdir .public
- cp index.html .public
- mv .public public
artifacts:
paths:
- public
only:
- master

+ 23
- 0
README.md View File

@@ -0,0 +1,23 @@
# vuebar

Just put the index.html somewhere and browse it.

# dynamic data

# vuebar

add e.g. `https://markuman.gitlab.io/vuepie/?data={"Linux":64,"Mac":35,"Windos":1}` to an url.

# git mirror

- https://gitlab.com/markuman/vuebar
- https://github.com/markuman/vuebar

# deployment mirrors

- https://markuman.gitlab.io/vuebar

# made with

- [vuejs](https://vuejs.org/)
- [vue-chartkick](https://github.com/ankane/vue-chartkick)

+ 45
- 0
index.html View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://unpkg.com/chartkick@2.3.3"></script>
<script src="https://unpkg.com/vue-chartkick@0.2.1/dist/vue-chartkick.js"></script>
<style type="text/css">
</style>
<title>vuepie</title>
</head>
<body>
<div id="app">
<column-chart :data="chartData" :download="true" legend="bottom" label="Value"></line-chart>
</div>
<script>
new Vue({
el: '#app',
data: {
chartData: [{ "name": "Workout", "data": { "bla": 3, "blub": 4 } }, { "name": "ja", "data": { "linux": 5, "aws": 3 } }]

},
beforeMount(){
const dataRegexp = /data=(.*)/
let match = dataRegexp.exec(document.URL)
if (match) {
if (match.length === 2) {
try {
match = match[1].replace(/%22/g,'"')
this.chartData = JSON.parse(match)
} catch(e) {
console.error(match[1])
console.error('failed to treat input string as a json object')
}
}
}
}
})
</script>
</body>
</html>

+ 4
- 0
some.json View File

@@ -0,0 +1,4 @@
[
{ "name": "Workout", "data": { "bla": 3, "blub": 4 } },
{ "name": "ja", "data": { "linux": 5, "aws": 3 } }
]

Loading…
Cancel
Save