I don't know. I'm really a bit stumped here.
next up is to add `console.log('hello') right here to see if this code is even getting executed: https://github.com/rreusser/idyll-plotly-example/blob/master/components/plot.js#L13
@rreusser earlier I said I changed the return to just <div> Hello </div> instead of the conditional and it rendered that just fine
I don't have any coworkers until tomorrow that I can get to try it as a 3rd reference, but I wil tomorrow
I can imagine a world in which these lines do something which violate windows path rules, but that would be news to me: https://github.com/rreusser/idyll-plotly-example/blob/master/components/plot.js#L6-L7
only other guess then is
const React = require('react');
const path = require('path')
const PlotComponent = (() => {
try {
// `document` is not available during server-side rendering, so we allow
// this to fail and render an empty div during server-side rendering
const Plotly = require(path.join('plotly.js', 'dist', 'plotly-basic.min.js'));
return require(path.join('react-plotly.js', 'factory')).default(Plotly);
} catch (e) { }
})();
though I really thought require handled that…
it accepted that, but still no plot output
That try case just doesn't return true at all
For me
@rreusser Confirmed, it does not load on another windows server and on a co-worker's laptop. He's actually a JS/React developer and he tried to get it to work but couldn't get it done. He moved alot of code around to move the PlotComponent into the main class and we were able to confirm that it does throw an exception each time. Wish we could say its an easy problem to solve. I'm curious how its working on your machine at all.
@mathisonian I tried it today, without success, I guess I'm doing something wrong. Can you please help?
On the top, I'm importing the component with
Then I'm writing in the render-method:
The value gets rendered from the prop correctly but it won't let me change it. What else do I have to include or to change so that it's working properly? Thanks a lot!
On the top, I'm importing the component with
import { TextInput } from "idyll-components";Then I'm writing in the render-method:
<TextInput value={this.props.strLength}></TextInput>The value gets rendered from the prop correctly but it won't let me change it. What else do I have to include or to change so that it's working properly? Thanks a lot!
i see an error in the js console in IE11 but it seems different from what you're seeing
in React if the value of an input widget doesn't change, it will be stuck in that state in the Ui. to get updates to work you always have to provide an explicit update handler
i usually end up writing things this when passing properties down to nested components, the wrapping component can always inject additional properties on
[MyComponent]
[TextInput value:someVar /]
[/MyComponent]
@mathisonian Hmm, I expected the
TextInput component to work out of the box (interacting with the component writes the value back into the prop) when I'm importing it like a react-component. If I'm using TextInput as a child and get it from the array (React.Children.toArray(this.props.children)) it works fine but the first approach would be cleaner I think?
see the "runtime context" documentation here
essentially you'll want to write your function, then add it to the context during the
onInitialize event
once you've done that it should be available to be used inside any idyll expression
re: the vega-lite question.... i'm not sure, but i sit by some people who are more expert at VL than me, will ask this week
I'm not too particular sure how to increment it for this use case though, since the scrolling as 3 steps (as opposed to 100 steps via
1/0.01)
This animation example may be a good starting point, but its variable updating is binded to an
onClick function.
I could see how we increment transformationStep in increments of 0.33 though (since there are 3 steps), with basing off the transformation prop of IdyllApparatusComponent via the scrollerIndex variable, since it'll be 1, 2, and 3, respectively:
[IdyllAppratusComponent
...other props
transformation: `scrollerIndex / 3.0`
/]But again, I'm unsure exactly how to get the 100 steps in here... I'll update if I think of something that could work
Hi, @pravikaj demand seem very similar to mine some weeks ago and @mathisonian create an issue for it: idyll-lang/idyll#589
In my project, we have several button elements, and we would like to style them in multiple different ways. We originally adding styling to them in the style.css file by adding css to the .button tag. The problem with this is now we would like to add more buttons, but with different styles. Since we added the styling to ".button" they all end up looking the same. Is there any way to add classes or ids to built-in idyll components? Thanks!
And similarly to other built-in components as well!
I'm trying to make a button that will change its text value and variable value on click, but when I use this code I found in the documentation (https://idyll-lang.org/docs/components/default/conditional), my terminal tells me there is no 'Conditional' component. I've tried it with 'Case' similarly with no luck. Is there a way to download or access these components or a different way to write conditionals in Idyll?
You can find all the current default components here: https://github.com/idyll-lang/idyll/tree/master/packages/idyll-components/src . The most up-to-date version of idyll should be able to recognize Conditional I believe, but a quick fix should be to download the Conditional component file and put it in your components directory
Also is there somewhere I can read or see an example of tooltips working in Idyll on a elements of a d3 component?