[Idea] Add ability to include headers to endpoints

[youngchan1694]

Hello.
Our current project uses chartkick to render charts by providing them endpoints to our backend. However, most of our endpoints currently use JWT authentication tokens in order to access that data, would it be possible to add a a prop that takes in headers and/or other backend settings? If not, either the charts don't render due to no access and throw a 401 or we have to unlock those certain endpoints.

Thanks!

[ankane]

Hey @youngchan1694, thanks for the suggestion!

You can currently use a function for :data to customize authentication, so I'd like to hold off on this for now. If there's demand in non-JS versions (which don't have the ability to use functions), I can see a headers option making sense.

[youngchan1694]

Ah, okay I appreciate it. I didn't know that was possible but I couldn't find an example of passing a function into the :data prop in the docs, is there someplace that I could see a working version? Thanks!

Edit: Currently, I'm just passing in the endpoint as a string in the data prop

<template>
  <v-card height="100%">
    <pie-chart
      :id="questionName"
      ref="piechart"
      :library="{ title: questionTitle }"
      adapter="google"
      legend="bottom"
      :data="endPoint"
      :refresh=10
      :messages="{ empty: 'No data' }"
    />
  </v-card>
</template>

<script>
import {mapState, mapActions} from "vuex";

export default {
  name: "ChartKickComponent",
  props: {
    questionName: {
      type: String,
      default: ""
    },
    questionTitle: {
      type: String,
      default: ""
    },
  },
  computed: {
    ...mapState("survey", ["selectedSurveyNumber"]),
    surveyNum() {
      return this.selectedSurveyNumber === null ? 0 : this.selectedSurveyNumber;
    },
    endPoint() {
      return (
        `${process.env.BASE_URL}/piechart?format=json&pk=${this.survey.pk}&type=${this.questionName}`
      );

};
</script>

[ankane]

Docs are here: https://github.com/ankane/vue-chartkick#data