juijs / vue-graph

⚡️ Vue components based on the JUI chart available in Vue.js
https://codepen.io/collection/nWpqoB/
128 stars 16 forks source link

Vue error while rendering #33

Closed xdursoc closed 3 years ago

xdursoc commented 4 years ago

I have this error:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

for the note, legend and tooltip tag, the code is the following:

<template>
  <div id="dashboard">
    <graph-pie
      :width="500"
      :height="500"
      :padding-top="75"
      :padding-right="75"
      :padding-bottom="75"
      :padding-left="75"
      :values="values"
      :names="names"
      :active-event="'click'"
      :show-text-type="'outside'"
      :data-format="dataFormat"
      :shape="'donut'"
      :colors="['#468ed4', '#f2b82a']"
      :show-total-value="true">
      <note :text="'Space Chart'"></note>
      <legends :names="names"></legends>
      <tooltip :names="names"></tooltip>
    </graph-pie>
  </div>
</template>
<script>
import Pie from 'vue-graph/src/components/pie';

import GraphLine3D from 'vue-graph/src/components/line3d';
import NoteWidget from 'vue-graph/src/widgets/note';
import LegendWidget from 'vue-graph/src/widgets/legends';
import TooltipWidget from 'vue-graph/src/widgets/tooltip';

export default {
  name: 'dashboard',
  components: {
    Pie,
    GraphLine3D,
    NoteWidget,
    LegendWidget,
  },
  data() {
    return {
      values: [150, 50],
      names: ['Available', 'Occupied'],
    };
  },
  methods: {
    dataFormat: function(a, b) {
      if (b) return b + 'GB';
      return a;
    },
  },
};
</script>

I imported vue-graph in my main.js obviously.

yanick commented 3 years ago

The line triggering the error is https://github.com/juijs/vue-graph/blob/master/src/widgets/core.js#L2

It should be fixable by replacing it with

    render: function(createElement) {
        return createElement('span', {
            attrs: { style: 'display: none' }
        } )
    },

I'll presently test that and, if successful, submit a PR for it.