Last active
December 10, 2019 11:22
-
-
Save vrehm/c334b51b60da2d8e286d6600bdebdea4 to your computer and use it in GitHub Desktop.
How to pass data from Django Template 'real' HTML to TheApp.vue ?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import store from './store/index' | |
| import Vue from 'vue' | |
| import TheApp from './TheApp.vue' | |
| import Highcharts from 'highcharts' | |
| import HighchartsVue from 'highcharts-vue' | |
| import accessibility from 'highcharts/modules/accessibility' | |
| import exporting from 'highcharts/modules/export-data' | |
| // import darkUnica from 'highcharts/themes/dark-unica' | |
| import vSelect from 'vue-select' | |
| Vue.component('v-select', vSelect) | |
| Vue.use(HighchartsVue) | |
| exporting(Highcharts) | |
| accessibility(Highcharts) | |
| // darkUnica(Highcharts) | |
| window.Vue = Vue | |
| Vue.config.productionTip = false | |
| /* eslint-disable */ | |
| new Vue({ | |
| delimiters: ['[[', ']]'], | |
| el: '#vue-portal', | |
| store, | |
| render: h => h(TheApp) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="container mx-auto flex flex-wrap justify-center my-6"> | |
| <highcharts :options="chartOptions" class="w-full" /> | |
| </div> | |
| </template> | |
| <script> | |
| import Highcharts from 'highcharts' | |
| export default { | |
| props: { | |
| description: { | |
| type: String, | |
| required: true | |
| }, | |
| title: { | |
| type: String, | |
| required: true | |
| }, | |
| subtitle: { | |
| type: String, | |
| required: true | |
| }, | |
| xAxis: { | |
| type: String, | |
| required: true | |
| }, | |
| yAxis: { | |
| type: String, | |
| required: true | |
| }, | |
| xAxisText: { | |
| type: String, | |
| required: true | |
| }, | |
| yAxisText: { | |
| type: String, | |
| required: true | |
| }, | |
| xUnit: { | |
| type: String, | |
| required: true | |
| }, | |
| yUnit: { | |
| type: String, | |
| required: true | |
| } | |
| }, | |
| mounted() { | |
| window.dispatchEvent(new Event('resize')) | |
| }, | |
| computed: { | |
| chartOptions() { | |
| return { | |
| chart: { | |
| type: 'scatter', | |
| zoomType: 'xy', | |
| backgroundColor: 'transparent' | |
| }, | |
| accessibility: { | |
| description: this.description | |
| }, | |
| title: { | |
| text: this.title, | |
| align: 'center' | |
| }, | |
| subtitle: { | |
| text: this.subtitle | |
| }, | |
| xAxis: { | |
| title: { | |
| enabled: true, | |
| text: this.xAxisText | |
| }, | |
| startOnTick: true, | |
| endOnTick: true, | |
| showLastLabel: true | |
| }, | |
| yAxis: { | |
| title: { | |
| text: this.yAxisText | |
| } | |
| }, | |
| legend: { | |
| layout: 'vertical', | |
| align: 'right', | |
| verticalAlign: 'top', | |
| x: 0, | |
| y: 10, | |
| floating: true, | |
| backgroundColor: Highcharts.defaultOptions.chart.backgroundColor, | |
| borderWidth: 1 | |
| }, | |
| plotOptions: { | |
| scatter: { | |
| marker: { | |
| radius: 5, | |
| states: { | |
| hover: { | |
| enabled: true, | |
| lineColor: 'rgb(100,100,100)' | |
| } | |
| } | |
| }, | |
| states: { | |
| hover: { | |
| marker: { | |
| enabled: false | |
| } | |
| } | |
| }, | |
| tooltip: { | |
| valueDecimals: 2, | |
| headerFormat: '<b>{series.name}</b><br>', | |
| pointFormat: `{point.runId}<br>{point.x:.2f} ${this.xUnit}<br>{point.y} ${this.yUnit}` | |
| } | |
| }, | |
| series: { | |
| allowPointSelect: true, | |
| cursor: 'pointer', | |
| point: { | |
| events: { | |
| click: (event) => { | |
| this.clickDataPoint(event) | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| series: this.$store.state.result.series, | |
| exporting: { | |
| showTable: true, | |
| allowHTML: true, | |
| useMultiLevelHeaders: false, | |
| csv: { | |
| // Uncomment for custom column header formatter. | |
| // This function is called for each column header. | |
| columnHeaderFormatter: (item, key) => { | |
| const xText = this.xAxisText | |
| const yText = this.yAxisText | |
| if (!item || item instanceof Highcharts.Axis) { | |
| return xText | |
| // return item.options.title.text | |
| } | |
| // Item is not axis, now we are working with series. | |
| // Key is the property on the series we show in this column. | |
| if (key === 'y') { | |
| return { columnTitle: yText } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| methods: { | |
| clickDataPoint(event) { | |
| const point = event.point | |
| alert(`${point.x} - ${point.y}`) | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .highcharts-data-table table { | |
| @apply text-left w-full border-collapse my-6 outline-none bg-gray-100; | |
| } | |
| .highcharts-data-table thead { | |
| @apply bg-gray-600; | |
| } | |
| .highcharts-data-table td, | |
| .highcharts-data-table th, | |
| .highcharts-data-table caption { | |
| @apply py-4 px-6 font-bold uppercase text-sm text-gray-500 border-b border-gray-400; | |
| } | |
| .highcharts-data-table tr:nth-child(even), | |
| .highcharts-data-table thead tr { | |
| @apply text-gray-500; | |
| } | |
| .highcharts-data-table tr:hover { | |
| @apply bg-gray-800; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment