dmtrbrl / vue-trend-chart Goto Github PK

when I move data label from data()

  data() {
    return {
      ...
      labels: {
        xLabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        yLabels: 5,
        yLabelsTextFormatter: val => Math.round(val * 100) / 100
      },

to mounted()
like:

  mounted() {
    ...
    this.labels = {        
      xLabels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      yLabels: 5,
      yLabelsTextFormatter: val => Math.round(val * 100) / 100}
  }

then the bottom label (xLabels) overlaps the chart (changes position/moves up)

https://codepen.io/czelsa/pen/gOaQzbP

Please upgrade axios dependency or release the version pin.

When changing xLabels, by changing it on TrendChartLabels directly or via TrendChart, the HTML doesn't get rerendered.

I build a workaround by calling $forceReload everytime I update it, but there has to be a better solution.

First, thanks for making this component. I'm getting an error related to this.$refs.chart.

vue-trend-chart.mjs:433 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')

https://github.com/dmtrbrl/vue-trend-chart/blob/master/src/components/trend-chart.js#L114

Do you need a reproduction or is this enough?

Hey!
I noticed that the package lists an outdated version of axios as a peer-dependency.
Since some time now npm will install (and thus require) those by default - meaning that having vue-trend-chart anywhere in the dependency-tree prevents users from updating axios altogether.

npm ERR! Found: [email protected]
npm ERR! node_modules/axios
npm ERR!   dev axios@"^0.21.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer axios@"^0.18.0" from [email protected]
npm ERR! node_modules/vue-trend-chart
npm ERR!   vue-trend-chart@"^0.15.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Workaround:

npm install axios@latest --save --legacy-peer-deps

Since axios seems to only be included for the demo I'd suggest creating a separate package.json for that.

Cheers!

I want to modify the y-axis range, want to start it from a defined value like 50 or 100. I tried using yLabelsTextFormatter but it's not plotting the graph in a correct way (means taking the y-axis from 0 only).

Can you please suggest is there any way?

I would like to show a single horizontal line showing the average value across the data.

Is it possible to configure the position of the horizontal line to do this?

If not, would you be open to a pull request to support this? Can you provide any guidance on how best to achieve this?

Tried to use it with Vue 3. Getting the following error:

vue-trend-chart.esm.js?21e9:723 Uncaught (in promise) TypeError: h is not a function
    at Proxy.render (vue-trend-chart.esm.js?21e9:723)
    at renderComponentRoot (runtime-core.esm-bundler.js?9e79:846)
    at componentEffect (runtime-core.esm-bundler.js?9e79:4280)
    at reactiveEffect (reactivity.esm-bundler.js?0a2b:42)
    at effect (reactivity.esm-bundler.js?0a2b:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?9e79:4263)
    at mountComponent (runtime-core.esm-bundler.js?9e79:4222)
    at processComponent (runtime-core.esm-bundler.js?9e79:4182)
    at patch (runtime-core.esm-bundler.js?9e79:3791)
    at mountChildren (runtime-core.esm-bundler.js?9e79:3975)
render @ vue-trend-chart.esm.js?21e9:723

When using Typescript I get this error:
Could not find a declaration file for module 'vue-trend-chart'. '/node_modules/vue-trend-chart/dist/vue-trend-chart.common.js' implicitly has an 'any' type.

In an Electron app, I'm loading up a vue-trend-chart in a Vuetify full-screen dialog.

Initially, I had an issue with the graph loading up at what appears to be a minimum size. I think this was related to displaying it in a transitioning full-screen dialogue where the dialog size was undefined so the graph SVG didn't scale to fit properly. I remedied this by redrawing the graph once the dialog was opened.

Then I re-encountered the issue when programmatically setting the window size in Electron. The graph looks fine by default:

and then when you close the dialog containing the graph, press a button to resize the current window, and reopen the dialog to view the graph:

EDIT: At this point, manually resizing the electron app window just a pixel will fix the graph and make it display properly, filling up the container size again.

I'm not sure what the problem is here, I know SVG scaling is more awkward than say just having an image.

Is it possible to provide a function to redraw the SVG's or any other way to combat this?

Windows 10
Electron 7.3.0
Vue-Trend-Chart 0.15.2

since chartjs is not compatible with vue3 vue-trend-chart also has some problems when it's used with vue3 like the h function, i solved the h function issue but still see a lot of problems , is there any future fix for this , &thank you

Hi there,

I'm not sure what if I'm doing something wrong (because your codepen samples don't have this problem) or if this is a bug, but on:mouseMove event isn't being called.

I suspect it's because of this:
https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

Vue js hints in console (using non minified version of vue.js) seem to confirm this:

[Vue tip]: Event "mousemove" is emitted in component but the handler is registered for "mouseMove". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "mouse-move" instead of "mouseMove".

The fix for me seems to be change this

        this.$emit(
          "mouseMove",  ////// this should be lowercase to "mousemove"
          this.activeLineParams ? Object.assign({}, this.activeLineParams, {data: data}) : null
        );