React+Flexmonster project installation

Resolved
sabby asked on August 21, 2017

using react to embed flexmonster.
not using<script tags. tried to copy flexmonster.js in local box and it gives all out undefined excelptions
./src/containers/query/flexmonster/flexmonster.js
  Line 9:   Unexpected use of 'top'              no-restricted-globals
  Line 9:   Unexpected use of 'screen'           no-restricted-globals
  Line 9:   Unexpected use of 'screen'           no-restricted-globals
  Line 9:   Unexpected use of 'screen'           no-restricted-globals
  Line 9:   Unexpected use of 'screen'           no-restricted-globals
  Line 9:   'savingAs' is not defined            no-undef
  Line 9:   'canvg' is not defined               no-undef
  Line 9:   'html2canvas' is not defined         no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'canvg' is not defined               no-undef
  Line 9:   'html2canvas' is not defined         no-undef
  Line 9:   'jsPDF' is not defined               no-undef
  Line 9:   'html2canvas' is not defined         no-undef
  Line 9:   'jsPDF' is not defined               no-undef
  Line 9:   'html2canvas' is not defined         no-undef
  Line 9:   'html2canvas' is not defined         no-undef
  Line 9:   'savingAs' is not defined            no-undef
  Line 9:   'Zlib' is not defined                no-undef
  Line 9:   'Zlib' is not defined                no-undef
  Line 9:   'FlexmonsterToolbar' is not defined  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef
  Line 9:   'd3' is not defined                  no-undef

39 answers

Public
sabby August 21, 2017

Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'JSZip' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: Unexpected use of 'confirm' no-restricted-globals
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'jQuery' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not defined no-undef
Line 11: 'd3' is not de

Public
sabby August 21, 2017

i have added jquery
 

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster August 22, 2017

Hello Sabby,
Thank you for your question. Please have a look at our react integration example - http://www.flexmonster.com/doc/integration-with-react/. Also, we have a GitHub repository with the samples - https://github.com/flexmonster/pivot-react
Let us know if everything works fine for you.
Best regards,
Dmytro.

Public
sabby August 22, 2017

i did refer and used the link you just sent. since am not using any html file...i am importing via react.
import jquery via react is causing issue i suppose. also your flexmonster file neeeds import too

Public
sabby August 22, 2017

attaching file.

Attachments:
felx1.png

Public
sabby August 22, 2017

i did install  npm install jquery --save and import jquery in my react class

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster August 22, 2017

Hello Sabby,
Please have a look at you react project integration example based on the react-boilerplate project - https://github.com/flexmonster/pivot-react/tree/master/ES6. Also, please consider moving to 2.4 components version. The 2.4 version does not need any jQuery libraries. That makes the integration really easy. Please note that you should add the reference to the flexmonster library to the index.html file like in the following example - https://github.com/flexmonster/pivot-react/blob/master/ES6/app/index.html .
Let us know if it works for you.
Regards,
Dmytro.

Public
sabby August 22, 2017
	var pivot = new Flexmonster({
		container: "pivotContainer",
		toolbar: true,
		report: {
			dataSource: {
				data: jsonData
			},
			slice: {
				rows: [
				{ uniqueName: "Color" },
				{ uniqueName: "[Measures]" }
				],
				columns: [
				{ uniqueName: "Country" }
				],
				measures: [
				{
					uniqueName: "Price", 
					aggregation: "sum" 
				}
				]
			}
		},
		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
	});
i am using this as i have json . i wil mount this and check
Public
sabby August 22, 2017

doesnt work still. above tag 
new Flexmonster is what am needing to use? any help...

Public
sabby August 22, 2017

and what do you mean by " consider moving to 2.4 components version" ?   

Public
sabby August 22, 2017

also , [BABEL] Note: The code generator has deoptimised the styling of "C:/ProgramData/ProjectsWM/APHub_React/APHub_react/src/containers/query/flexmonster/flexmonster.js" as it exceeds the max of "500KB".

Public
sabby August 22, 2017
Public
sabby August 22, 2017

there s no script. npm run setup wont work 

Public
sabby August 22, 2017

Can you provide something like http://jsfiddle.net/flexmonster/pz431qp5/
?
 
With imports not <scripts

Public
sabby August 22, 2017

https://github.com/flexmonster/pivot-react/tree/master/ES6  how to run this project?
and my project is react js with redux . not using typescript

Public
Tanya Gryshko Tanya Gryshko Flexmonster August 23, 2017

Hello Sabby,
Thank you for your feedback. To run this project you need to do the following steps:
1. Run npm run setup in order to install dependencies and clean the git repo.
2. Run npm start to see the example app.
More details are available by the following link: https://github.com/react-boilerplate/react-boilerplate.
By the way, this integration sample does not require TypeScript. Let me know in case of further questions.
Regards,
Tanya

Public
sabby August 23, 2017

 is it the project with flexmonster+ react ?

Public
sabby August 23, 2017

kindly share your latest flexmonsterjs file to integrate with my react-redux project so i can try and use pivot table via flexmonster. need this urgent as i have been waiting and writing questions in blog from 2 days

Public
Ian Sadovy Ian Sadovy Flexmonster August 23, 2017

Hello Sabby,
 
Answering your questions:

  1. Yes, here is a project with flexmonster+react - https://github.com/flexmonster/pivot-react/tree/master/ES6 
  2. It contains the latest version of the component referenced from our CDN. Also, you can always download the latest version from our site.

To start the flexmonster+react project, execute the following in the command line:

npm run setup
npm start

Then, just open http://localhost:3000/ in the browser to see the project up and running.
Please let me know if you have any further questions.
 
Regards,
Ian

Public
sabby August 23, 2017

cani just add flexmonster.react.js fle from above repo in my project and add  <script src="https://cdn.flexmonster.com/flexmonster.js"></script> in my index page. and then will use my own reducer/components
 
will that be ok or is there any other flexmoster oritented file i need to import ?

Public
Ian Sadovy Ian Sadovy Flexmonster August 23, 2017

Yes, it should be enough.
Also, do not forget about importing flexmonster.react.js :

import * as FlexmonsterReact from './flexmonster.react';

 

Public
sabby August 23, 2017
./src/containers/query/flexmonster/flexmonster.react.js
Line 57: 'Flexmonster' is not defined no-undef

Public
sabby August 23, 2017

for line this.flexmonster = new Flexmonster(config);  in flexmonster.react.js , i am getting "

'Flexmonster' is not defined  no-undef"
Public
sabby August 23, 2017

do i need to download https://cdn.flexmonster.com/flexmonster.js  this file in my local box and import it within lexmonster.react.js ?

Public
Ian Sadovy Ian Sadovy Flexmonster August 23, 2017

Please check that <script src=”https://cdn.flexmonster.com/flexmonster.js”></script> is included before the main script in the index page. 

Public
sabby August 23, 2017

after doing aboev step import Flexmonster from './flexmonster';
am getting all errors undefined 

./src/containers/query/flexmonster/flexmonster.js
Line 9: Unexpected use of 'top' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: Unexpected use of 'screen' no-restricted-globals
Line 9: 'savingAs' is not defined no-undef
Line 9: 'canvg' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'canvg' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'jsPDF' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'jsPDF' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'html2canvas' is not defined no-undef
Line 9: 'savingAs' is not defined no-undef
Line 9: 'Zlib' is not defined no-undef
Line 9: 'Zlib' is not defined no-undef
Line 9: 'FlexmonsterToolbar' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef
Line 9: 'd3' is not defined no-undef

 

Public
sabby August 23, 2017

same error i started with at begining of this conversation

Public
sabby August 23, 2017

yes its included. 
<script src=”https://cdn.flexmonster.com/flexmonster.js”></script>

Public
Ian Sadovy Ian Sadovy Flexmonster August 23, 2017

Importing ./flexmonster is a wrong approach. It should be included as a simple JavaScript file.
And flexmonster.react.js should be imported using React.

Public
sabby August 23, 2017

1.i download flexmonster.js from https://cdn.flexmonster.com/flexmonster.js
2. added in my project and import it within flexmonster.react.js
3. getting undefined error as abve d3,jquery....and all not defined. 
4. can you share with me flexmonsterjs with all imports necessary ? may be all those componets are expected to be at global level from flex but its not at our side. we need imports at each file . 
5. can you email or attach the flexmonster.js file with necessary imports?

Public
sabby August 23, 2017

i did include the script in my index.html file. but i think the scope of it is withini index.html as per my project and it cannot be accessed by other page/compoennt
how can i include this script in  my react component ?

Public
sabby August 23, 2017

i was able to access it via this.flexmonster = new window.Flexmonster(config);
 

Public
sabby August 23, 2017

how can i remove Connect , open , save , options from VieW?

Public
sabby August 23, 2017

also , how can i change look and feel of pivot table? can you tell me easy way  to do so ?

Public
sabby August 23, 2017

how can i enable filtering options? like search ..

Public
sabby August 23, 2017

<FlexmonsterReact.Pivot toolbar="true"
componentFolder="https://cdn.flexmonster.com/"    what should be my component folder? if i remove this...the view is gone. so i shld be using this ?

Public
sabby August 23, 2017

once the page is loaded with data , any change in event reloads the store but flexmonster component is not changing at all

Public
sabby August 23, 2017

how can i make sure data is reloaded and flex monster component is frehsed with new data. 
provide solution for below tag (if you suggest refresh or reload)
 
<FlexmonsterReact.Pivot toolbar="true"
componentFolder="https://cdn.flexmonster.com/2.4/"
width="1800px" report = {
{
dataSource: {
dataSourceType: "json",
data : this.getJsonData()

},

Public
sabby August 23, 2017

flexmonster.updateData({ data: jsonData }); where should i add this.? as i am using
<FlexmonsterReact.Pivot toolbar=”true”
componentFolder=”https://cdn.flexmonster.com/2.4/”
width=”1800px” report = {
{
dataSource: {
dataSourceType: “json”,
data : this.getJsonData()
},

Please login or Register to Submit Answer