How is get elements?

[Feduch]

Hi!

Very cool tool, thanks!

I using napchart in nuxt roject.

How can I get list of elements in code?

[larskarbo]

Cool to hear, can you give a bit more details?

[Feduch]

~/plugins/napchart.js

import Vue from "vue";
import Napchart from "napchart";

Object.defineProperty(Vue.prototype, '$napchart', { value: Napchart });

component

<template>
  <div style="width: 100%; height: 500px ">
    <canvas
      width="300"
      height="300"
      ref="schedule"
      id="schedule"
      @mouseup="updateRanges"
    ></canvas>
  </div>
</template>

<script>
export default {
  name: "NapChart",
  props: {
    ranges: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      width: 300,
      height: 300,
      chart: null
    }
  },
  computed: {
    elements() {
      let elements = []

      this.ranges.forEach((range) => {
        elements.push({
          start: range.from / 60,
          end: range.to / 60
        })
      })

      return elements
    }
  },
  created() {
    console.log("NapChart created")
  },
  mounted() {
    console.log("NapChart mounted")

    this.chart = this.$refs.schedule.getContext('2d')
    this.initChart()
  },
  methods: {
    initChart() {
      this.$napchart.init(this.chart, {
          elements: this.elements,
          shape: 'circle',
          lanes: 1,
        },
        {
          interaction: true,
          penMode: true,
          background: 'transparent',
          fontColor: '#AEC7F4'
        }
      )
    },
    updateRanges(e) { <---------------- I want get all elements on chart and store to database
      console.log(e)

    }
  },
  watch: {
    ranges() {
      console.log("NapChart updated ranges")
      console.log(this.$napchart?.elements)
      this.initChart()
    }
  }
}
</script>

<style scoped>

</style>

updateRanges <---------------- I want get all elements on chart and store to database, but I don`t understand how do it

From console

[larskarbo]

Look at the value napchart.init() returns! You will find the data there 👍