Additional properties

[Dmfilipkiewicz]

Hi,

I would like yo know if there is any possibility to change "on fly" other properties like millisPerPixel or style/color of the line based on what I send? I know that streamDelay can be adjusted like that but not other options and it seems that only one option to apply these changes is to refresh whole component 🤔

Greetings
Damian Filipkiewicz

[cinderblock]

Hey Damian,

Good question.

Unfortunately the lower level APIs that I'm leveraging don't allow such granular control. I was musing at a way to redo the low level stuff and make it more programmatic but landed on that that would take a more complete overhaul of the canvas drawing system.

Looking into it a little bit more, I see the underlying smoothie.js uses the <canvas>'s strokeStyle. Looking at the API for strokeStyle, there are some other options that could be played with. Specifically there is an option to use a CanvasGradient object. That may achieve what you're looking for. If you're using TypeScript, you might have some types to figure out or variable to coerce to what is expected by my types. I will look into improving those types so that this option is more obvious.

[Dmfilipkiewicz]

Thanks for answer

I was working on the workaround this problem and for now can make some changes through the references for the Smoothie Component, for milisPerPixel. Unfortunately the changing color I could not achieve with the gradient object because currently it accepts only string afaik. For changing the stroke style Im just dropping data by removeTimeSeries method and addding it immedietaly with the style I want with addTimeSeries. Of course everything with the useRef Hook.

[cinderblock]

I'm not sure about milisPerPixel. If you find something nice, I'd be happy to incorporate it into this library.

As for "it accepts only string", that was my point about "you might have some types to figure out". Something like gradient as unkown as string should force TypeScript to accept the types.

I'll see if I can't add the missing types for you.

[cinderblock]

I just pushed a version to Github to try this. I am holding back publishing to Npm until you (or anyone) test this a little more.

In case you need the command, this should let you use the default (master) branch version directly from Github.

npm i cinderblock/react-smoothie

[Dmfilipkiewicz]

Ok thanks! I will check it but unfortunately I will get to it on Monday but I will get back to you if everything works or something is quite not working.

[Dmfilipkiewicz]

Oh and one more question. The one only way to add data to series is through .append right? You need to append every array with two values? And you cannot send like more these arrays at once?

[cinderblock]

The way SoothieCharts is designed, each "TimeSeries" is just that, a series of single value data points in time, and they are each independent. So different datasets must be added to separate TimeSeries objects which thus must be done independently. You could pretty easily add your own wrapper that takes a larger data structure of values and "spreads" the data across as many TimeSeries objects as necessary.

[Dmfilipkiewicz]

Hi, today i tried to install the package through the command that you told me. Unfrotunately after starting the project I've got an error in the console.

D:\project\path\node_modules\react-smoothie\SmoothieComponent.js:27
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:101:7)
    at createScript (vm.js:262:10)
    at Object.runInThisContext (vm.js:310:10)
    at wrapSafe (internal/modules/cjs/loader.js:974:15)
    at Module._compile (internal/modules/cjs/loader.js:1034:27)
    at Module._compile (D:\project\path\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Object.newLoader [as .js] (D:\project\path\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)

[cinderblock]

Oops. Lol. What'd I break!?!

Looking into it. Probably because I changed tsconfig.conf and forgot to test.

I should probably add some tests...

[Dmfilipkiewicz]

How is the progress on that one? Just wondering how the things are hanging out 🤔

[cinderblock]

I just pushed a version that seems to have fixed these things.

Looking into the new style options, they depend on being able to access the DOM's <canvas> object and getting its "2D context". I've added the <canvas> element as a ref but I forget the right way to enable access to the object...

[Dmfilipkiewicz]

I updated package and now works without problem

But I have problem with the gradient as you wrote about it. Because I am little bit confused if it is avaiable to write or not? I think I need to say that I use react js with it and I tried to apply gradient through reference with CanvasGradient but no luck. I will try other things but if you have idea how to call out method that will draw gradient instead of static color I would be grateful for tips

[Dmfilipkiewicz]

How are the things doing with it? Is there any progress?