Chartjs-How to show price history data on a chart using props [Vue Chartkick]?

by

0👍

Try like following snippet (use computed property):

var app = Vue.createApp({
  el: "#app",
  data() {
    return {
      prod: { "pid": 2, "name": "Ekologiškas kefyras, 2.5% rieb., 900 g", "productIconUrl": "https://rimibaltic-res.cloudinary.com/image/upload/b_white,c_fit,f_auto,h_480,q_auto,w_480/d_ecommerce:backend-fallback.png/MAT_1005450_PCE_LT", 
"shops": [ { "name": "Ekologiškas kefyras, 2.5% rieb., 900 g", "productUrl": "https://www.rimi.lt/e-parduotuve/lt/produktai/bakaleja/kava-ir-kakava/kavos-kapsules/kavos-kapsules-aroma-gold-oat-flat-white-162g/p/1005450", "shopIconUrl": "https://upload.wikimedia.org/wikipedia/en/thumb/c/c7/Rimi_Baltic_Logo.svg/220px-Rimi_Baltic_Logo.svg.png", "priceHistory": [ 2.99, 1.88, 1.47 ], "scanHistory": [ "2022-04-07", "2022-04-06", "2022-04-01" ] }, { "name": "Ekologiškas kefyras, 2.5% rieb., 900 g", "productUrl": "https://www.rimi.lt/e-parduotuve/lt/produktai/bakaleja/kava-ir-kakava/kavos-kapsules/kavos-kapsules-aroma-gold-oat-flat-white-162g/p/1005450", "shopIconUrl": "https://upload.wikimedia.org/wikipedia/en/thumb/c/c7/Rimi_Baltic_Logo.svg/220px-Rimi_Baltic_Logo.svg.png", "priceHistory": [ 2.88, 1.77, 1.33 ], "scanHistory": [ "2022-04-04", "2022-04-03", "2022-04-02" ] }]}
    }
  },
})
app.component('chart', {
  template: `<line-chart :data="chartData"></line-chart>`,
  props: ['prod'],
  computed: {
    chartData() {
      const res = {}
      this.prod.shops.forEach(d => d.scanHistory.forEach((s, i) => res[s] = d.priceHistory[i]))
      return res
    }
  }
})
app.use(Chartkick.use(Chart))
app.mount("#app")
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/chart.js@3.0.2"></script>
<script src="https://unpkg.com/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
<script src="https://unpkg.com/chartkick@4.0.2"></script>
<script src="https://unpkg.com/vue-chartkick@1.1.0"></script>
<div id="app">
  <chart :prod="prod"></>
</div>

Leave a comment