skalinichev / uplot-wrappers Goto Github PK

Hi,

at the moment react@^16.8.6 is used as peer dependency and thus React 17 is out of the semver scope.
This should be changed to include React 17 (e.g.react@>=16.8.6), which also seems to work perfectly fine 🙂

For now the workaround for newer node versions (where this is an error) is to use npm i --force (as it states in the error message).

❯ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from [email protected]
npm ERR! node_modules/uplot-react
npm ERR!   uplot-react@"^1.0.2" 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.

hello,

i am using:

• uplot: 1.6.11
• uplot-vue: 1.0.2

i was wondering why after updating the data attribute the chart is not re-rendered.
after a long forensic search i think i found the error.

in the code lines here in the current commit

in uplot-vue.tsx:44

data(prevData: uPlot.AlignedData, data: uPlot.AlignedData) {

and also in uplot-vue.js:241 that is shipped via npm install

data: function data(prevData, _data) {

reference to the vue watch api:
https://vuejs.org/v2/api/#vm-watch

maybe u can build a new release 🙂

Hey there,

I'm struggling to figure out how to add uplot to my project. Would it be possible for you to give me a step-by-step guide, from the moment I use create-react-app until I can see a chart on my website? I would really appreciate it!

Also, I was curious about whether I should use React TypeScript or if I can stick with React Javascript?

Thanks so much for your help! I really appreciate your work.

Hello,

thank you for this awesome package! I have some troubles including uplot into Vue 3. I created a new Vue project using the Vue ui, so I have a main.js a App.js and a components folder. When I copy the code from the uplot-vue3-example.tsx into my main.js, I get 19 build errors. Commenting out the render() function let me build the app but uplot isn’t showing up and I get this excepton:

Uncaught TypeError: Cannot read property 'extend' of undefined at Module../vue/uplot-vue.tsx (uplot-vue.js?3e1e:196) at __webpack_require__ (uplot-vue.js?3e1e:30) at eval (uplot-vue.js?3e1e:94) at eval (uplot-vue.js?3e1e:97) at webpackUniversalModuleDefinition (uplot-vue.js?3e1e:3) at eval (uplot-vue.js?3e1e:10) at Object../node_modules/uplot-vue/uplot-vue.js (chunk-vendors.js:1705) at __webpack_require__ (app.js:849) at fn (app.js:151) at eval (main.ts:19)

I’am a Vue beginner and I don’t know how to integrate uplot into Vue when the Vue app is setup with the Vue ui. I use npm and no typescript and no JSX.

Can someone help me?

Thank you!!

Code Like:

import UplotReact from "uplot-react";
function hello() {
  return <div style={{ display: "none" }}>hello world</div>; // CSS is running
  return <UplotReact options={options_} data={data_} style={{ display: "none" }} />; //CSS is not running

The display argument would work if it were a common react component but the UplotReact component does not.

Hello,

can someone tell me how to call uPlot functions? I want to add series dynamicly. Like in this example :
demo:https://leeoniya.github.io/uPlot/demos/add-del-series.html
code: https://github.com/leeoniya/uPlot/blob/master/demos/add-del-series.html

I need to do
u.addSeries({ .. }) (line 59 in the example)

How is the right way in a vue single file component?

<template>
  <UplotVue :data="data" :options="options" /> 
  <button @click="myAddSeries">add a series</button>
</template>

<script>
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';

let data = [[0, 1, 2, 3, 4], [0, 2, 4, 6, 8]];

export default {
  name: "AwsomeComponent",
  components: {
    UplotVue,
  },

  data() {
        return {
            data: data,
            options: {
                title: 'Chart', width: 1200, height: 800,
                series: [{
                    label: 'x'
                }, {
                    label: 'first',
                    points: {show: false},
                    stroke: 'blue',
                },                 
                ],
                scales: {x: {time: false}}
            },
        };
    },
    methods: {
        myAddSeries() {
          // let newData = [0, 1, 4, 9, 1];
          // what do I have to do here??
        }
    }

};
</script>

THANK YOU VERY MUCH!

Hello! I faced an issue: when I update one of the functions passed to options.hook - changes not detected and wrapper using old options, because this utill comparing functions by stringifying them.

For example, we have component:

const MyCoolChart = (someFunction: (value: number) => string, data: uPlot.AlignedData) => {
  const drawAxesHook = (self: uPlot) => {
    console.log(someFunction(123))
  };

  const options = {
    //some options...
    hooks: [drawAxesHook]
  };
  
  return (<UplotReact data={data} options={options} />);
}

And in parent component we have:

const [data, setData] = useState<uPlot.AlignedData>([[]]); //data can change
const someFunction = (value: number) => `formatting one ${value}`;

return (<MyCoolChart data={data} someFunction={someFunction} />);

On the first mount we will get in console: formatting one 123, which is correct. But if we somehow change someFunction, for example to:

const someFunction = (value: number) => `formatting two ${value}`;

And then we mutate data by calling setData, we will get the same console.log: formatting one 123, which is incorrect!

It compares functions as strings, and `stringify getting the same results, even though someFunction is changed.

I purpose to use Object.is to compare to option fields:

    if (!Object.is(lhs[k], rhs[k])) {

Or use polyfill, like in react source code:

https://github.com/facebook/react/blob/4ce89a58dac5287a2c7fc454e86562297e97a6d9/packages/shared/objectIs.js#L14

If you want to perform deep equal - I purpose to use lodash.isEqual. Its quite fast, and if imported correctly, a single-function weight almost nothing https://www.measurethat.net/Benchmarks/Show/3940/0/fastdeepequal---lodashisequal

Hello I'm using uplot with React.
I'm looking to have the charts resize with their parent containers. How would i access the chart.setSize method?

Hi,

Thanks for developing these wrappers. It works nicely to get the uplot component to work in react. However, I ran into a problem.

I need to dynamically add and remove signals to the graphs, but there are no methods exposed for this (the original component has an addSignal method). Would it be possible to expose these in this library?

Also, I tried to implement this functionality by updating the data and options.series inputs to the component (using setState), but it seems like the uPlot wrapper is not refreshing the plot when these change or at least the lines are not visible.

Do you have any idea if this functionality should be supported? Perhaps, I am doing something wrong.

Thanks!

I am building a project with esbuild, and the rest of the code and most of the libraries support module mode. Even the ones that are CJS are imported and work correctly except for uplot-react.

I get the following error when building with it:

/home/node/app-dev/node_modules/uplot-react/webpack:/UplotReact/webpack/universalModuleDefinition:10
})(self, (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_uplot__) => {
 ^
ReferenceError: self is not defined
    at Object.<anonymous> (/home/node/app-dev/node_modules/uplot-react/webpack:/UplotReact/webpack/universalModuleDefinition:10:2)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Something is wrong with how webpack and esbuild are interfacing. I think ideally, an ESM specific build is also generated and that is included as a second import in the package.json.

With Svelte's popularity and use in many contexts - e.g. native app development, web development etc, are there any plans to expand the uplot wrappers to encompass Svelte?

Motivation

I am currently developing an app in Tauri and stumbled upon uPlot. It was the perfect solution to my problem since I need to display plotted information in 200hz on the screen - something with uPlot deals with very well. I began abstracting graphs and plots into components and thought about whether there is already a wrapper about it.

P.S.
I am willing to write a wrapper inspired by the existing ones in Vue and React.

Hi!

Thanks for uplot-wrappers!

I want create gradient line, where line color related from value.

Example from there are https://leeoniya.github.io/uPlot/demos/gradient-stroke.html

I get an error: TypeError: u.valToPos is not a function

My code:

options: {
        id: "wb-chart-content",
        height: 330,
        legend: {
          show: false
        },
        series: [
          {},
          {
            label: "Temperature",
            width: 1,
            // series style
            stroke: (u, seriesIdx) => {
              console.log(u)

              return this.scaleGradient(u, 'y', 1, [
                [0, "#0ACEF9"],
                [46, "#FFE663"],
                [60, "#F9440A"],
              ])
            },
          },
        ],
        axes: [
          {show: false,},
          {show: false}
        ]
      }

methods: {
    onCreate(event) {
      console.log("onCreate", event)
      event.setSize(this.getSize())
    },
    onDelete(event) {
      console.log("onDelete", event)
    },
    scaleGradient(u, scaleKey, ori, scaleStops) {
      console.log(u, scaleKey, ori, scaleStops)

      let min = scaleStops[0][0];
      let max = scaleStops[scaleStops.length - 1][0];
      let rng = max - min;

      let minPos = u.valToPos(min, scaleKey, true);
      let maxPos = u.valToPos(max, scaleKey, true);

      let x0, y0, x1, y1;

      if (ori == 1) {
        x0 = x1 = 0;
        y0 = minPos;
        y1 = maxPos;
      }
      else {
        y0 = y1 = 0;
        x0 = minPos;
        x1 = maxPos;
      }

      let grd = u.ctx.createLinearGradient(x0, y0, x1, y1);

      scaleStops.forEach(s => {
        let pct = (s[0] - min) / rng;
        grd.addColorStop(pct, s[1]);
      });

      return grd;
    }
  },

How to connect a tooltip plugin in vue?

Any chance you could package the vue wrapper for build-less loading. I.e. so <script src="..uplot-vue.js"></script> registers the component? Or am I missing something?

The watch method for the data property uses the signature data(prevData: uPlot.AlignedData, data: uPlot.AlignedData) - (so old data, new data) although the vuejs docs specify this the other way around (new data, old data)

watch: {
    // whenever question changes, this function will run
    question: function (newQuestion, oldQuestion) {}
}

I love your library, but I have a problem with zooming in the graph.

My code is as follows:

//server component
const Analytics = async () => {

   const data: uPlot.AlignedData = [
    Array.from({ length: 10000 }, (_, i) => i),
    Array.from({ length: 10000 }, (_, i) => i),
  ];
  console.log("data length", data[0].length);

  const options: Options = {
    width: 400,
    height: 300,
    scales: {
      x: {
        time: true,
        range: [-0.5, 4000.5],
      },
      y: {},
    },
    axes: [{}],
    series: [
      {},
      {
        stroke: "blue",
      },
    ],
  };
  return (<div>
           <UplotWrapper options={options} data={data} />
   </div>
}

// client component
"use client";
import type uPlot from "uplot";
import UplotReact from "uplot-react";
import "uplot/dist/uPlot.min.css";

export const UplotWrapper: React.FC<{
  options: uPlot.Options;
  data: uPlot.AlignedData;
}> = ({ options, data }) => {
  return (
    <div>
      <UplotReact
        options={options}
        data={data}
        onCreate={(chart: uPlot) => {}}
        onDelete={(chart: uPlot) => {}}
      />
    </div>
  );
};

Any ideas on how to make the chart zoom in? Using nextjs 13 and React 18

I tried to capture it in "react useeffect hook", but canvas did not start rendering.
I want to save Canvas to Image? Is there any way to solve this problem? Thanks.

Hi there, thank you for making this helpful library :) I'm trying to dynamically resize the plot to half the window size using flexboxes, useRef() -> clientWidth/Height, and React effects/callbacks.

I have an example here: https://codesandbox.io/s/uplot-react-resizing-3m733r. Current issues:

• Resizing the window in any direction always increases clientHeight
• Widening the window increases clientWidth but narrowing the window does nothing

Sample logs from narrowing the window size:

width = 695, height = 244
width = 695, height = 301
width = 695, height = 358
width = 695, height = 415
width = 695, height = 472
width = 695, height = 529
width = 695, height = 586
width = 695, height = 643
width = 695, height = 700
width = 695, height = 757
width = 695, height = 814

I'm defining target as my local ref.current as HTMLDivElement so that I can create my own div with its own ref (instead this being done automatically: https://github.com/skalinichev/uplot-wrappers/blob/master/react/uplot-react.tsx#L81).

I couldn't find any resizing examples this repo but the main repo has a resize demo. This example directly calls setSize() which is what I'm trying to do through updating options: https://github.com/skalinichev/uplot-wrappers/blob/master/react/uplot-react.tsx#L54.

Do you know what I'm doing wrong? Apologies if I'm missing something obvious, I'm totally new to web dev.

Note: this example needs some fixing so that it resizes on startup as well.

panning is available when the x is set as plain number, the feature is gone when I set it to time.

Hi,

Firstly, thank you for the wrapper, really helpful and very much appreciated!!!

I have come across a bug which does resolve itself, but creates an error from uplot

The issue occurs when you reduce the number of series for a chart. Adding series is fine.

The error is:

uPlot.esm.js?4298:3485 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at accScale (uPlot.esm.js?4298:3485:1)
    at eval (uPlot.esm.js?4298:3555:1)
    at Array.forEach (<anonymous>)
    at setScales (uPlot.esm.js?4298:3530:1)
    at _commit (uPlot.esm.js?4298:4215:1)

I have made the most simple example i could think of below. If you add a series its fine, but when you reduce the series count, we hit the error.

Is there a better way for me to deal with series updates? I have tried setTimeout tests, and getting the chart instance and calling destroy before updates, but I can't seem to get rid of the error :(

Thanks again

import React, {useState} from 'react';
import UplotReact from 'uplot-react';

const xs = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
const vals = [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10];

const sets = [
  {
    // x + 1 y series data set
    data: [
      xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
      xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
    ],
    options: {
      width: 1920,
      height: 600,
      title: "Area Fill",
      series: [
        {},
        {
          stroke: "green",
          fill: "rgba(0,255,0,0.1)",
        },
      ],
    }
  },
  {
    // x + 2 y series data set
    data: [
      xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
      xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
      xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
    ],
    options: {
      width: 1920,
      height: 600,
      title: "Area Fill",
      series: [
        {},
        {
          stroke: "red",
          fill: "rgba(255,0,0,0.1)",
        },
        {
          stroke: "green",
          fill: "rgba(0,255,0,0.1)",
        },
      ],
    }
  }
]

export default function Test () {
  const [setSelection, setSetSelection] = useState(0)
  const [data, setData] = useState(sets[0].data)
  const [options, setOptions] = useState(sets[0].options)

  function handleChange (e) {
    const v = e.target.value
    const s = sets[v]
    setSetSelection(v)
    setData(s.data)
    setOptions(s.options)
  }

  function renderChart () {
    if (! data || ! options) return "waiting for data"

    return (
      <UplotReact
        options={options}
        data={data}
        onCreate={(u) => console.log("created", u)}
        onDelete={(u) => console.log("destroyed", u)}
      />
    )
  }

  return (
    <div>
      <select value={setSelection} onChange={handleChange} >
        <option value={0}>set 0 (1 Y series)</option>
        <option value={1}>set 1 (2 Y series)</option>
      </select>

      {renderChart()}
    </div>
  )
}

Hey there!

you are amazing thank you a lot for making uplot and uplot wrapper for react ,

i am really frustrated because i have a problem i cant solve for a long time , and i need some help , if you can help me solve why the graph is working fine in the JavaScript example but on the React example i cant regenterate the same results

i posted a question on stackoverflow

https://stackoverflow.com/questions/76096315/reactjs-not-rendering-real-time-graphs-with-muplot-as-expected

Hey there!

I am currently working on the implementation of µPlot with Vue.js 3.x.
I saw that µPlot is compatible with the previous version of Vue. However, since my company decided to use the latest version I would like to know if the implementation for Vue.js 3.x is coming any time soon. If not, is there any workaround to implement it myself?

Thank you very much in advance!

J

I update the data every second, but the chart doesn't refresh .

There is no simple example available(as far as i know) from a heat mapping plot in this wrapper for both Vue as React. I tried this in Vue.js(Code is based on: https://codesandbox.io/s/wk68o):

The mode/ms test were based on the opts5 variable in https://leeoniya.github.io/uPlot/demos/latency-heatmap.html

And I know that the heatmapPaths variable in the html file and countstoFills are not inserted in this value. But I expect that these are not important in this variable.

Can you somebody explain what the reason is why this is not working properly? Am I missing some important other variables in the option settings?