Comments (12)
cc @aldendaniels @Kureev @joshhornby
from react-highcharts.
why not just react-highcharts/<name-of-module>
?
from react-highcharts.
- So that it's explicit that those are modules
- So that we don't have a bunch of files in the roue.
- I was also thinking of generating them somehow, and this way files would be easier to clean and deal with if they are in a separate folder
from react-highcharts.
If I'm right, you can point index
file in package.json in lib
folder (or whatever) and in the same folder store all your module files, in this case relative path would be calculated relatively to index.
from react-highcharts.
Or, of course, you can create absolutely different packages and use them as plugins
from react-highcharts.
A similar (but modified) idea...
Idea
-
Publish standalone NPM modules for the various Highcharts flavors we want to support with properly defined exports. Of course Highcharts really should be doing this for us... but they aren't. 😢
-
Add an
injectHighcharts()
method to React Highcharts to get a handle to whatever copy of Highcharts the user is using. -
Stop bundling Highcharts.
-
Then users can do this:
import Highcharts from 'my-flavor-of-highcharts'; import ReactHighcharts from 'react-highcharts'; ReactHighcharts.injectHighcharts(Highcharts); // Then use <ReactHighcharts /> like normal.
Benefits
- We can separately version the Highchart modules and React Highcharts itself. This means that a breaking Highcharts change won't require a major version change for React Highcharts.
- We can separately version each Highcharts module. This is important if we want to support other Highcharts libraries such as Highmaps.
- Non-React developers can use the Highcharts NPM modules we'd be maintaining. This is good for everyone.
- The injector method avoids reliance on a global Highcharts variable. This reduces the risk of order-dependent module loading problems.
from react-highcharts.
@Kureev - Just saw your comment:
Or, of course, you can create absolutely different packages and use them as plugins
I think we're getting at the same idea.
from react-highcharts.
Default
var ReactHighcharts = require('react-highcharts')
will expect a global Highcharts variable
Optionally it would be possible to inject a different version of highcharts
import Highcharts from 'my-flavor-of-highcharts'; import ReactHighcharts from 'react-highcharts'; ReactHighchartsWithFlavor = ReactHighcharts.injectHighcharts(Highcharts);
injectHighcharts
in this case acts as a factory and creates a copy of reactHighcharts using different version of Highcharts, so it's possible to have several versions of react Highcharts if necessary.
Bundles
Looks like everybody agrees on bundles
Modules
Looks like most the ideal solution would be to have highcharts org to have each module as a separate npm package.
I actually see better modularization in their roadmap for highcharts 5.
http://www.highcharts.com/support/roadmap
This is coming on Q1 of 2016 though, and as a temporary solution we could follow @Kureev's suggestion and do something like this:
require('react-highcharts/more')
;
require('react-highcharts/exporting')
;
require('react-highcharts/heatmap')
;
from react-highcharts.
+1 for @Kureev's suggestion for modules. I'm trying (and failing) to get drilldown (http://www.highcharts.com/docs/chart-concepts/drilldown) working via react-highcharts at the moment, require('react-highcharts/drilldown');
sounds ideal.
from react-highcharts.
@kirjs - Looking good. I'd still suggest moving the Highcharts builds into separate NPM packages:
highcharts-build-more
highcharts-build-exporting
highcharts-build-heatmap
This is much more friendly to non-react consumers and makes for better semserver.
from react-highcharts.
@aldendaniels Will move out the modules once #44 is done
from react-highcharts.
Should be fixed starting with v3
from react-highcharts.
Related Issues (20)
- Questions about copyright HOT 1
- [Bug]: multi-data & category => xAxis is dislocation HOT 1
- Update an issue template to use stackblitz for an example HOT 1
- Update all the dependencies HOT 2
- Highcharts export functionality HOT 1
- react 16.8 hooks addPlotLine not work?
- Why opposite:true doesn't work in ReactHighstock?
- Demo project doesn't work.
- outside: true on Tooltip - Error when trying to trigger the tooltip manually
- Upgrade Highcharts - Cross Site Scripting vuln HOT 3
- HighCharts events not getting triggered
- Tooltip.positioner function not working
- cannot use boost HOT 1
- Chart not resizing with container
- All Bars are starting from 0 value in Stacked bar when render happens
- npm vulnerability issue Cross-site Scripting (XSS), need to upgrade highcharts dependency
- Cannot read property 'series' of undefined
- Wrong ordering with temporal data
- Can we do reset on navigator when we switch between custom zoom buttons.
- Incorrect Date Display on Highchart ReactHighstock X-Axis.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-highcharts.