Ability To Save Chart Interactives

[me60732]

It would be nice if there were a nice clean way to save all the chart interactives, so the next time the user loads the chart the program can load all the interactives back in.

At the moment I'm just formating the interactives into a json string, then reading it back in, which seem to work on most interactives, however the InteractiveYCoordinate the edge object has a display format method which of course json strips out when serialising, then reading back in the script fails at:

react-stockcharts/lib/interactive/components/InteractiveYCoordinate.js line 154 var yValue = edge.displayFormat(this.props.yValue); because edge.displayFormat is now undefiend.

I have added code to add that method when reading it back in from a json string, but it would be nice if it could handle it internally.

[mussonero]

@me60732 Could you kindly share your method on how to read it back from json string. Thanks!,

Update: It was more simpler in the end . edge:{displayFormat:function xx() {return format('.6f');} }

[me60732]

Hello,

I tried to reply on github, but adding the code and stuff was a mess (I don't use it much, some seem to do a really good job of it).

The code

getChartObjects(listingID) { letchartObjects =this.props.stockInfo.getChartObjects(listingID); letstate ={}; if(chartObjects) { for(letkey inthis.state) { if(!chartObjects[key]) { chartObjects[key] =[]; } state[key] =chartObjects[key]; if(key ==="InteractiveYCoordinate_1") { for(letinteractive ofchartObjects[key]) { interactive.edge.displayFormat =format(".3f"); } } else{ state[key] =this.mapCoordinates(chartObjects[key], key, false); } } } return(state); }

The listingID is just an auto number ID to pull the chart objects from the database (just thing of is as a stock code);

the this.props.stockInfo.getChartObjects(listingID); is just the function that actually retrieves it from the database and returns the javascript object (already done the JSON.parse)

The this.mapCoordinated is a function that alters the x,y (or start,end) coordinate properties when viewing different intervals (daily, weekly, monthly yearly) so all the trend-line and stuff get rendered properly and still line up.

the interactive.edge.displayFormat =format(".3f"); I had to set, because the JSON object i get back doesn't have the methods and would end up throwing an error, it would be better if i could create those objects from your classes and just pass the data into it (that's a bit hacky).

it returns the new state object then at some point passed to react this.setState(state);

An example JSON string:

"

{"Trendline_1":[{"start":[1100,0.35481],"end":[1179,0.31877000000000005],"selected":false,"appearance":{"stroke":"green","strokeOpacity":1,"strokeWidth":2,"edgeStrokeWidth":2,"edgeFill":"green","edgeStroke":"green"},"type":"RAY"},{"start":[1203.4883720930231,0.19224000000000008],"end":[1350,0.20287999999999995],"selected":false,"appearance":{"stroke":"green","strokeOpacity":1,"strokeWidth":2,"edgeStrokeWidth":2,"edgeFill":"green","edgeStroke":"green"},"type":"RAY"}],"StandardDeviationChannel_1":[{"start":[4835,null],"end":[4971,null],"selected":false,"appearance":{"edgeFill":"#FFFFFF","edgeStroke":"#000000","edgeStrokeWidth":2,"fill":"#8AAFE2","fillOpacity":0.1,"r":5,"stroke":"#000000","strokeOpacity":1,"strokeWidth":1}},{"start":[4733,21.6],"end":[4834,11.63],"selected":false,"appearance":{"edgeFill":"#FFFFFF","edgeStroke":"#000000","edgeStrokeWidth":2,"fill":"#8AAFE2","fillOpacity":0.1,"r":5,"stroke":"#000000","strokeOpacity":1,"strokeWidth":1}}],"FibonacciRetracement_1":[{"x1":460,"y1":6.01933,"x2":465,"y2":7.677490000000001,"selected":false,"appearance":{"stroke":"#000000","strokeWidth":1,"strokeOpacity":1,"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":11,"fontFill":"#000000","edgeStroke":"#000000","edgeFill":"#FFFFFF","nsEdgeFill":"#000000","edgeStrokeWidth":1,"r":5},"type":"RAY"},{"x1":936,"y1":0.16996499999999998,"x2":1391,"y2":0.35057000000000005,"selected":false,"appearance":{"stroke":"#000000","strokeWidth":1,"strokeOpacity":1,"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":11,"fontFill":"#000000","edgeStroke":"#000000","edgeFill":"#FFFFFF","nsEdgeFill":"#000000","edgeStrokeWidth":1,"r":5},"type":"RAY"}],"InteractiveYCoordinate_1":[]}

"

If you need anymore happy to provide it.

thanks

Regards

Mark

On 23/3/20 4:41 am, mussonero wrote:

@me60732 https://github.com/me60732 Could you kindly share your method on how to read it back from json string. Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rrag/react-stockcharts/issues/731#issuecomment-602245312, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM5GFVCGS245T6IQS5SAOADRIZET5ANCNFSM4IWKTCPA.

[mussonero]

@me60732 Thank, You much appreciated, your solution is more elegant :), in my case i had to stringify"serializing" the object including the function, which return the correct format.

So instated of interactive.edge.displayFormat = format(".3f"); I do this interactive.edge.displayFormat =function xx() {return format('.3f');};

And my JSON string looks like this

[{"bgFill":"#FFFFFF","bgOpacity":5,"stroke":"#ef5fd2","strokeOpacity":1,"strokeDasharray":"ShortDashDot","strokeWidth":4,"textFill":"rgb(0,0,0)","fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":16,"fontStyle":"normal","fontWeight":"normal","text":"newAlert","textBox":{"height":28,"left":20,"padding":{"left":10,"right":5},"closeIcon":{"padding":{"left":5,"right":8},"width":10}},"edge":{"stroke":"#ff1eb4","strokeOpacity":1,"strokeWidth":4,"fill":"#FFFFFF","fillOpacity":1,"orient":"right","at":"right","arrowWidth":10,"dx":0,"rectWidth":50,"rectHeight":20, **"displayFormat":"/Function(function displayFormat() {\n return Object(d3_format__WEBPACK_IMPORTED_MODULE_2__["format"])('.3f');\n })/"},** "yValue":1.725,"id":"4nZVCkZJ3","draggable":true}]

As you can see the function already present and it works very well, when i call it back via JSON parser it dose not give "edge.displayFormat undefined."

KR mussonero

---

`getChartObjects(listingID) {
    let chartObjects = this.props.stockInfo.getChartObjects(listingID);
    let state = {};
    if (chartObjects) {
        for (let key in this.state) {
            if (!chartObjects[key]) {
                chartObjects[key] = [];
            }
            state[key] = chartObjects[key];
            if (key === "InteractiveYCoordinate_1") {
                for (let interactive of chartObjects[key]) {
                    interactive.edge.displayFormat = format(".3f");
                }
            } else {
                state[key] = this.mapCoordinates(chartObjects[key], key, false);
            }
        }
    }
    return (state);
}`