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

dovexz12323 0
Viewed 33

I have come across a chart library called Chartkick for Vue project. https://chartkick.com/vue

I have my data passed as props to a component. I have created a data element but it can't seem to access the prop so I used sample data.

<script>
export default {
  props: ["prod"],
  data() {
    return {
      prices: {
        '2022-09-11': 2.99
      }
    }
  }
};
</script>

The chart is displayed using this component inside of html:

<line-chart :data="prices"></line-chart>

Unfortunately, I can't figure out to give data from props to this component. I have to give the date from the scanHistory and price from the priceHistory array of the first element, how may I join them in this case and display price history? Data example:

{ "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" ] }

For every scanHistory[] it should join the priceHistory[] so I would have something like {'2022-04-07': 2.99, '2022-04-06': 1.88}... etc

chartkick chart.js vuejs3 vue.js javascript
1 Answers

Try like following snippet:

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>

Nikola Pavicevic0
Related