Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add solution to Code Generator for properties with few types in JS #128

Open
brofixo opened this issue Sep 16, 2017 · 16 comments
Open

Add solution to Code Generator for properties with few types in JS #128

brofixo opened this issue Sep 16, 2017 · 16 comments
Assignees

Comments

@brofixo
Copy link
Contributor

brofixo commented Sep 16, 2017

No description provided.

@brofixo brofixo self-assigned this Sep 16, 2017
@TorsteinHonsi
Copy link
Collaborator

Can you elaborate here? We probably have the same requirement when generating inputs for Highcharts cloud, as well as Highcharts iOS. We have been discussing a stricter definition of the various options in the doclets, to make auto-genaration of wrappers fail-safe.

For example, pie.size can be either a string or a number. If string, it should be a percentage like "50%". If number, it is pixels.

@brofixo
Copy link
Contributor Author

brofixo commented Sep 18, 2017

There is no proper solution inside Code Generator for such properties.
Now Code Generator takes first type from JSON for property and creates property with such type in .NET wrapper. The rest of types are ignored.
If I find such case, I made changes inside Code Generator for this particular case.
The result of this update is extra property. For example:
If in JS property SampleSize may be Number or String, then Code Generator creates class with property
SampleSize with type: double. After my changes generator creates extra property SampleSizeString with type string.
And if user of the wrapper will set SampleSize property, then will get number in JS. If user will set SampleSizeString property, then will get string in JS.

There is no automatic mechanism implemented inside Code Generator for properties with multiple types.
I want to implement this as soon as possible.

@TorsteinHonsi
Copy link
Collaborator

I want to implement this as soon as possible.

Great, but let's discuss this first, so we get a solution that is consistent across Highcharts.NET, Highcharts Cloud, our Typescript definitions and other wrappers.

Yes I suppose creating extended property names is a quick and viable way of resolving the problem. For example:

Pie.Size would be a number designating pixels, and
Pie.SizeString would be a string on the for 50%.

... however it would be more intuitive if the options were called Pie.SizePixels and Pie.SizePercent and both options were doubles, right?

But implementing that would take a bit more work. We would need to add a structure in the JSDoc doclets that defines how these settings should be resolved. And this would be settings that only apply to strictly typed environments - in the vanilla JavaScript API nothing would change.

@cvasseng, as the author of the TypeScript definition and the Editor, what do you think? @pawelfus any thoghts?

@TorsteinHonsi
Copy link
Collaborator

@brofixo Can you easily generate a list of those double-typed options so we can get an overview of what we're dealing with? I know some of them types can easily be skipped. For example, all animations can be Boolean or Object. We don't need to deal with the boolean, instead we can disable animation by setting { duration: 0 }.

@brofixo
Copy link
Contributor Author

brofixo commented Sep 19, 2017 via email

@brofixo
Copy link
Contributor Author

brofixo commented Sep 19, 2017 via email

@cvasseng
Copy link
Collaborator

cvasseng commented Sep 19, 2017

@TorsteinHonsi: For the typescript generator, I used a preferred order on multi-type properties. Basically it would revert to a single type in this order array > object > primitive. This worked somewhat for most things, but not for all, which was part of the motiviation to enhance the api dump.

This is somewhat of a problem though, for iOS, .NET, and TypeScript. I'm not sure what the best way of handling it is. It feels a bit messy to add even more tags to the JSDoc stuff. It might be better to maintain a "typed language" dictionary separatly, for those options with types that does not translate well to typed languages. The doc generator could then look properties up in that map for a given product.

We could do that in combination with creating types for object properties (e.g. an AnimationSettings type), so that the dictionary could be keyed on type name.

Another problem if relying on JSDoc for iOS/.Net/TS, is that we need @product tags for them in the sources. That's a lot of work at this point; patching automatically now is not as easy as the initial pass was.

@TorsteinHonsi
Copy link
Collaborator

It might be better to maintain a "typed language" dictionary separatly,

Definately. We can maintain a JSON config file, that would be a whole lot easier.

In some of these cases we already have @typedef tags defined:

https://github.com/highcharts/highcharts/blob/1a97fbe1f0c6482e82963edd8ff54807f18fdb52/js/parts/Utilities.js#L806-L811

https://github.com/highcharts/highcharts/blob/1a97fbe1f0c6482e82963edd8ff54807f18fdb52/js/parts/Utilities.js#L1862-L1875

These are already parsed and used in the class reference. We could extend on that and make it consistent.

Let's wait for @brofixo's dump so we get an overview of the scope.

@cvasseng
Copy link
Collaborator

Sounds good. We could map on primitive types as well as typedefs also. I think that's the cleanest solution (e.g. number: {products: { ios: 'NSNumber}} or something).

I can probably throw together a script to generate both the initial dictionary, and the rest of the typedefs too.

@pawelfus
Copy link

I agree, that including more jsdoc comments in sources will become messy. Can API generator just take another supplementary-net-docs.js file which will "patch" all cases? It could not only add new properties (like Pie.SizePercent) but could also change the description for the option. Maybe I don't get the 'a "typed language" dictionary' meaning - is that the same?

@cvasseng
Copy link
Collaborator

That's pretty much what I was thinking, yes. :)

Basically have a JSON dictionary which maps between a generated typename (e.g. chart.animation could have an entry in the dictionary as ChartAnimation, or even better, a general Animation object) and a language-specific type name (for instance String could translate to NString for iOS).

Then, for iOS and .NET, all that would be required is to add the actual types in that dictionary. The dictionary could also support defining multiple types, so that e.g. size which can be String|Number would result in two option entries - sizePixels and sizePercent.

@cvasseng
Copy link
Collaborator

Are there cases with .NET (or iOS) where the desciption for an option is different than the one in vanilla?

@pawelfus
Copy link

For example pie.size has description:

The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers...

If we will have two params (sizePixels and sizePercent), then shouldn't description be different for both?

@brofixo
Copy link
Contributor Author

brofixo commented Sep 20, 2017

I've got from JSON such double types:

plotOptions.bar.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.bubble.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.column.states.hover.animation : Boolean|Object
plotOptions.areaspline.states.hover.animation : Boolean|Object
plotOptions.waterfall.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
chart.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.funnel.states.hover.animation : Boolean|Object
plotOptions.boxplot.states.hover.animation : Boolean|Object
plotOptions.polygon.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.pie.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.columnrange.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.areasplinerange.states.hover.animation : Boolean|Object
legend.navigation.animation : Boolean|Object
plotOptions.spline.states.hover.animation : Boolean|Object
plotOptions.series.states.hover.animation : Boolean|Object
plotOptions.treemap.states.hover.animation : Boolean|Object
plotOptions.errorbar.states.hover.animation : Boolean|Object
plotOptions.arearange.states.hover.animation : Boolean|Object
plotOptions.area.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.pyramid.states.hover.animation : Boolean|Object
drilldown.animation : Boolean|Object
plotOptions.line.states.hover.animation : Boolean|Object
series.states.hover.animation : Boolean|Object
plotOptions.scatter.states.hover.animation : Boolean|Object
plotOptions.heatmap.states.hover.animation : Boolean|Object
pane.center : Array<String|Number>
plotOptions.funnel.center : Array<String|Number>
series.center : Array<String|Number>
plotOptions.pyramid.center : Array<String|Number>
series.center : Array<String|Number>
series.center : Array<String|Number>
plotOptions.pie.center : Array<String|Number>
yAxis.crosshair : Boolean|Object
xAxis.crosshair : Boolean|Object
zAxis.crosshair : Boolean|Object
series.data : Array<Object|Array|Number>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Array>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Array>
series.data : Array<Object|Number>
series.data : Array<Object|Array|Number>
series.data : Array<Object|Number>
series.height : Number|String
plotOptions.pyramid.height : Number|String
plotOptions.funnel.height : Number|String
series.height : Number|String
chart.height : Number|String
series.data.innerRadius : Number|String
pane.background.innerRadius : Number|String
yAxis.plotBands.innerRadius : Number|String
plotOptions.pie.innerSize : String|Number
series.innerSize : String|Number
yAxis.minorTickInterval : String|Number
xAxis.minorTickInterval : String|Number
zAxis.minorTickInterval : String|Number
plotOptions.funnel.neckHeight : Number|String
series.neckHeight : Number|String
plotOptions.funnel.neckWidth : Number|String
series.neckWidth : Number|String
pane.background.outerRadius : Number|String
yAxis.plotBands.outerRadius : Number|String
chart.plotShadow : Boolean|Object
accessibility.pointDescriptionThreshold : Number|Boolean
plotOptions.areaspline.pointPlacement : String|Number
plotOptions.column.pointPlacement : String|Number
series.pointPlacement : String|Number
plotOptions.line.pointPlacement : String|Number
plotOptions.areasplinerange.pointPlacement : String|Number
plotOptions.waterfall.pointPlacement : String|Number
plotOptions.series.pointPlacement : String|Number
plotOptions.bar.pointPlacement : String|Number
series.pointPlacement : String|Number
plotOptions.area.pointPlacement : String|Number
plotOptions.boxplot.pointPlacement : String|Number
series.pointPlacement : String|Number
plotOptions.columnrange.pointPlacement : String|Number
series.pointPlacement : String|Number
plotOptions.spline.pointPlacement : String|Number
plotOptions.arearange.pointPlacement : String|Number
series.pointPlacement : String|Number
series.pointPlacement : String|Number
plotOptions.errorbar.pointPlacement : String|Number
series.pointPlacement : String|Number
series.pointPlacement : String|Number
series.pointPlacement : String|Number
series.pointPlacement : String|Number
series.pointPlacement : String|Number
series.pointPlacement : String|Number
series.data.radius : Number|String
chart.renderTo : String|Object
plotOptions.heatmap.shadow : Boolean|Object
plotOptions.bar.dataLabels.shadow : Boolean|Object
plotOptions.treemap.shadow : Boolean|Object
series.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.arearange.shadow : Boolean|Object
plotOptions.series.shadow : Boolean|Object
plotOptions.heatmap.dataLabels.shadow : Boolean|Object
plotOptions.arearange.dataLabels.shadow : Boolean|Object
plotOptions.series.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.treemap.dataLabels.shadow : Boolean|Object
plotOptions.column.dataLabels.shadow : Boolean|Object
plotOptions.gauge.dataLabels.shadow : Boolean|Object
plotOptions.pie.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.line.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.pie.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.columnrange.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.scatter.dataLabels.shadow : Boolean|Object
plotOptions.areasplinerange.shadow : Boolean|Object
plotOptions.columnrange.dataLabels.shadow : Boolean|Object
plotOptions.polygon.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.areasplinerange.dataLabels.shadow : Boolean|Object
plotOptions.spline.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.pyramid.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
legend.shadow : Boolean|Object
plotOptions.area.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.line.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.pyramid.shadow : Boolean|Object
plotOptions.funnel.dataLabels.shadow : Boolean|Object
plotOptions.solidgauge.dataLabels.shadow : Boolean|Object
plotOptions.bar.shadow : Boolean|Object
plotOptions.bubble.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.column.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.spline.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.areaspline.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
series.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.funnel.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.polygon.dataLabels.shadow : Boolean|Object
plotOptions.areaspline.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
plotOptions.waterfall.shadow : Boolean|Object
series.dataLabels.shadow : Boolean|Object
series.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.area.dataLabels.shadow : Boolean|Object
plotOptions.waterfall.dataLabels.shadow : Boolean|Object
plotOptions.bubble.dataLabels.shadow : Boolean|Object
chart.shadow : Boolean|Object
series.shadow : Boolean|Object
plotOptions.scatter.shadow : Boolean|Object
pane.size : Number|String
plotOptions.pie.size : String|Number
series.size : String|Number
data.table : String|HTMLElement
yAxis.plotBands.thickness : Number|String
plotOptions.errorbar.whiskerLength : Number|String
series.whiskerLength : Number|String
plotOptions.boxplot.whiskerLength : Number|String
series.whiskerLength : Number|String
plotOptions.pyramid.width : Number|String
series.width : Number|String
series.width : Number|String
plotOptions.funnel.width : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.xAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String
series.yAxis : Number|String

@TorsteinHonsi
Copy link
Collaborator

Thanks @brofixo! We are continuing the discussion on Slack - did you receive the notifications?

@brofixo
Copy link
Contributor Author

brofixo commented Sep 20, 2017 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants