djaxho / pure-vue-chart Goto Github PK

similar to adding a separate chart for showing 'expected' data. Also use the trndline to show current/expected comparison data

Switch to using Tweenjs for tweening, since GSAP has odd licensing

When tried with Nuxt is SSR mode. I get

document is not defined

more details

`node_modules/pure-vue-chart/dist/pure-vue-chart.common.js:3624:22
line3624 : var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

`

Should add an optional trendline to barcharts

if prop points is type of object list, then update its value will break the chart.
points=[{label: 'N', value: 41.1}, {label: 'NW', value: 1}, {label: 'W', value: 15}]
It seem that component will take the object (eg. {label: 'N', value: 41.1}) as the height value.

I tested some small change and it worked well:

    chartData() {
      return this.staticDataPoints.map((dataPoint, index) => ({
        valueNotInMotion: this.tweenedDataPoints[index],
        index,
        partitionWidth: this.partitionWidth,
        midPoint: this.partitionWidth / 2,
        x: index * this.partitionWidth,
        xMidpoint: index * this.partitionWidth + this.partitionWidth / 2,
        yOffset: this.innerChartHeight - this.y(this.tweenedDataPoints[index].value),
        height: this.y(this.tweenedDataPoints[index].value),
      }))
    }

We need flexibility in colors, starting with at least the bar strokes

It should be possible to speed/slow the animations

Tried to use pure-vue-chart with Vue3. It gives a bunch of warnings and then the error:

Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
    at Proxy.render (pure-vue-chart.common.js?7769:5088)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
    at mountComponent (runtime-core.esm-bundler.js?5c40:3976)
    at processComponent (runtime-core.esm-bundler.js?5c40:3936)
    at patch (runtime-core.esm-bundler.js?5c40:3547)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3736)

For me personally, I think this will make the code easier to read and understand how each function works.

For example using slots to allow more customization

how can i set them responsive ? thank you

I bond the points prop to a computed value that returns the array of points to display. When I go from a larger set of points to a lower one, the chart component crashes with the following error:

[Vue warn]: Error in render: "TypeError: _this3.dataColors[index] is undefined"

found in

---> <VueBarGraph>
       <Chart>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
    VueJS 18
    _callee2$ chart.vue:45
    Babel 10
    _callee$ chart.vue:32
    Babel 8
    _callee$ App.vue:42
    Babel 8
    keyup App.vue:38
    VueJS 3

TypeError: _this3.dataColors[index] is undefined
    chartData vue-bar-graph.common.js:7663
    chartData vue-bar-graph.common.js:7651
    VueJS 3
    render vue-bar-graph.common.js:3291
    VueJS 14
    _callee2$ chart.vue:45
    Babel 10
    _callee$ chart.vue:32
    Babel 8
    _callee$ App.vue:42
    Babel 8
    keyup App.vue:38
    VueJS 3
vue.runtime.esm.js:1897
    VueJS 17
    _callee2$ chart.vue:45
    Babel 10
    _callee$ chart.vue:32
    Babel 8
    _callee$ App.vue:42
    Babel 8
    keyup App.vue:38
    VueJS 3

To reproduce: display dynamically a set of n points, then change the cardinality of the set (simply removing some values) to m (m<n)

Hi,

I have two bar charts in the same bar chart, this is my defined points:
points: [
{ label: "Planned", value: 41.1 },
{ label: "Realized", value: 15 }
],

I want a different color for every bach chart, how can I do that?

Thank you,
Goran

This should allow showing a chart of historical, or planned data (such as budget goals)
And should be able to sow an additional chart showing where the data currently sits.
This will be a good place to use percentages also

On initial load the trend line produces a console error "Error: attribute y1: Expected length, "NaN""

is there a way, a color prop can be added for better customization of the chart?

Allow slots for the title so it is not strictly a string